From 7d7996cb01d2065bb33a0ed469f73943047aa3d3 Mon Sep 17 00:00:00 2001 From: Antoine Le Gonidec Date: Mon, 29 Jul 2024 16:45:36 +0200 Subject: [PATCH] Drop all shadows and underlines The links are no longer underlined when hovered upon. A grey background is displayed behind links that are focused using the keyboard. --- css/index.css | 272 ++++++++++++++++---------------------------------- 1 file changed, 87 insertions(+), 185 deletions(-) diff --git a/css/index.css b/css/index.css index 9d7414e..c9ba85b 100644 --- a/css/index.css +++ b/css/index.css @@ -31,6 +31,18 @@ html { --font-copyright: Verdana, sans-serif; /* Copyright must be Verdana! */ } +/** + * No shadows + * No underlines + * No exception + */ + +* { + box-shadow: none !important; + text-decoration: none !important; + text-shadow: none !important; +} + /* Main text settings */ body { @@ -71,6 +83,80 @@ h6 { font-family: var(--font-mono); } +/* Links hover and focus effect */ + +a:hover, +a:link:hover, +a:visited:hover { + cursor: pointer; +} +/* The default focus effect is a light grey background */ +a:focus, +a:link:focus, +a:visited:focus { + background-color: var(--neutral-color); + border-radius: 5px; +} +/* No effect on the forum title */ +h1.forumtitle a:focus, +h1.forumtitle a:link:focus, +h1.forumtitle a:visited:focus { + background-color: unset; +} +/* Use a dark grey background for white text */ +h2.catbg a:focus, +h2.catbg a:link:focus, +h2.catbg a:visited:focus, +.navigate_section ul li a:focus, +.navigate_section ul li a:link:focus, +.navigate_section ul li a:visited:focus, +.title_bar a:focus, +.title_bar a:link:focus, +.title_bar a:visited:focus, +#footer a:focus, +#footer a:link:focus, +#footer a:visited:focus { + background-color: var(--menu-background); +} +/* Use a light gray background for the navigation menu items */ +.khbb_nav ul li a:focus img { + clip-path: circle(50%); + background-color: var(--menu-background-active); +} +.khbb_nav ul li a:focus .khbb_subtitlemenu { + color: var(--neutral-light-color) ; +} +.dropmenu > li:hover > a, +.dropmenu > li:focus > a, +.dropmenu > li > a:focus, +#top_info > li:hover > a, +#top_info > li:focus > a, +#top_info > li > a:focus, +#top_info > li > a.open { + cursor: pointer; +} +.dropmenu > li:focus > a, +.dropmenu > li > a:focus, +#top_info > li:focus > a, +#top_info > li > a:focus, +#top_info > li > a.open { + background: var(--menu-background-hover); +} +.dropmenu li a.active:focus, +.dropmenu li:focus a.active { + background: var(--menu-background-active); + font-weight: bold; +} +/* Use the MMF red for buttons */ +a.button:hover, +a.button:focus, +a.button:link:hover, +a.button:link:focus, +a.button:visited:hover, +a.button:visited:focus { + background-color: var(--mmf-color); +} + /* Index */ html { @@ -84,7 +170,6 @@ body { height: 100%; } ::selection { - text-shadow: none; background: #99d4ff; color: rgba(0, 0, 0, 0.6); } @@ -105,9 +190,6 @@ ul.normallist { table { empty-cells: show; } -abbr { - border-bottom: 0.1em dotted; -} input, select, textarea { color: var(--dark-color); font: 83.33%/150% ; @@ -116,7 +198,6 @@ input, select, textarea { border: 1px solid #bbb; vertical-align: middle; border-radius: 3px; - box-shadow: 1px 2px 1px rgba(160, 187, 221, 0.2) inset; padding: 0.3em 0.4em; } input:hover, textarea:hover, select:hover, button:hover, @@ -140,9 +221,6 @@ select { /* This is about links */ a, a:visited, a:link { color: var(--color4); - text-decoration: none; - border-bottom-style: dotted; - border-bottom-width: 1px; } /* Only for Accessibility */ .link_access { @@ -165,28 +243,13 @@ a, a:visited, a:link { } /*a:hover { - text-decoration: underline; cursor: pointer; } a:link { color: #483D8B; - text-decoration: underline dotted; }*/ -a:hover, -a:focus, -a:link:hover, -a:link:focus, -a:visited:hover, -a:visited:focus, -a:link:active, -a:visited:active { - /*text-decoration: underline;*/ - border-bottom-style: solid; - cursor: pointer; -} - /* Selects with more than one line */ select[size] { height: auto; @@ -204,9 +267,6 @@ img, input, select, textarea { max-width: 100%; } -.sceditor-container textarea, .sceditor-container textarea:focus { - box-shadow: none; -} #quick_edit_body_container textarea, .move_topic textarea, dd textarea { @@ -247,7 +307,6 @@ fieldset { fieldset legend { font-weight: bold; color: #555; - box-shadow: none; border: none; } summary { @@ -288,7 +347,6 @@ input[type="checkbox"], input[type="radio"] { border: none; background: none; vertical-align: middle; - box-shadow: none; margin: 0 3px; } .moderationbuttons_mobile_check { @@ -308,7 +366,6 @@ hr { margin: 12px 0; height: 2px; background: var(--neutral-light-color); - box-shadow: 0 1px 0 #bbb inset; } /* Help popups require a different styling of the body element. */ @@ -351,15 +408,12 @@ body#help_popup { color: var(--neutral-light-color); border-radius: 2px; opacity: 0.8; - border-bottom: none; margin-right: .3em; } a.new_posts:visited { color: var(--neutral-light-color); } .new_posts:hover, .new_posts:focus { - text-decoration: none; - border-bottom: none; opacity: 1; } @@ -454,7 +508,6 @@ blockquote { } blockquote cite { display: block; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.9em; margin-bottom: 3px; } @@ -503,14 +556,6 @@ blockquote cite::before { max-height: none; } /* Styling for BBC tags */ -.bbc_link { - border-bottom: 1px solid #a8b6cf; -} -.bbc_link:hover, .bbc_link:focus { - text-decoration: none; - border-bottom: none; - border-bottom: 1px solid #346; -} .bbc_size { line-height: 1.4em; } @@ -581,7 +626,6 @@ a img { .toggle_up:hover:before, .toggle_down:hover:before, .toggle_up:focus:before, .toggle_down:focus:before { background-color: #bfd4e7; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset; transition: background-color 0.25s; } @@ -709,7 +753,6 @@ a.moderation_link, a.moderation_link:visited { ------------------------------------------------------- */ #ajax_in_progress { background: var(--neutral-light-color); - border-bottom: 4px solid #f96f00; color: #f96f00; text-align: center; font-size: 1.6em; @@ -883,7 +926,6 @@ img.sort, .sort { .dropmenu li a, #top_info > li > a { display: block; - border-bottom: none; padding-left: 1.3em; } /* Level 1 active button. */ @@ -891,26 +933,6 @@ img.sort, .sort { font-weight: bold; background: var(--menu-background-active) ; } -/* Level 1 hover effects. */ -.dropmenu > li:hover > a, -.dropmenu > li:focus > a, -.dropmenu > li > a:focus, -#top_info > li:hover > a, -#top_info > li:focus > a, -#top_info > li > a:focus, -#top_info > li > a.open { - background: var(--menu-background-hover); - cursor: pointer; - border: none; -} -/* Level 1 active button. */ -.dropmenu li a.active:hover, -.dropmenu li a.active:focus, -.dropmenu li:hover a.active, -.dropmenu li:focus a.active { - background: var(--menu-background-active); - font-weight: bold; -} a.mobile_user_menu, a[class^="mobile_generic_menu_"] { @@ -967,9 +989,6 @@ a[class^="mobile_generic_menu_"] { margin-top: 5px; border-top: 1px solid var(--neutral-color); } -.unread_notify { - border-bottom: 1px solid var(--neutral-color); -} .no_unread { margin-top: 5px; text-align: center; @@ -977,11 +996,6 @@ a[class^="mobile_generic_menu_"] { .unread_notify:hover, .unread_notify:focus { background: #eee; - text-decoration: none; - border-bottom: none; -} -.unread_notify:last-child { - border-bottom: none; } .unread_notify { display: flex; @@ -1127,7 +1141,6 @@ generic_menu .dropmenu .subsections ul li a { .dropmenu ul { display: block; border: solid 1px var(--mmf-color); - box-shadow: 0px 0px 5px 1px var(--neutral-light-color); border-radius: 0 0.5em; } /* Hiding Level 3 submenu off hover. */ @@ -1162,9 +1175,6 @@ generic_menu .dropmenu .subsections ul li a { z-index: 100; padding: 5px 0 5px 0; } -.sceditor-button { - border-bottom: none; -} .button, button { display: inline-block; @@ -1197,10 +1207,6 @@ input[type="submit"].button { font-weight: 700; } -a.button, a.button:hover, .button:focus { - border-bottom: none; -} - html[lang="el-GR"] .button, html[lang="el-GR"] .quickbuttons > li > a, html[lang="el-GR"] .inline_mod_check { @@ -1216,16 +1222,9 @@ html[lang="el-GR"] .inline_mod_check { background: var(--mmf-color); color: var(--neutral-light-color); font-weight: bold; - border-bottom: none; - } .button.active:hover, .button.active:focus { background: var(--mmf-color); - box-shadow: none; - border-bottom: none; -} -.cat_bar .button { - box-shadow: none; } /* In a .buttonrow, the buttons are joined together */ .buttonrow { @@ -1265,8 +1264,6 @@ html[lang="el-GR"] .inline_mod_check { /* The framing graphics */ /* The top bar. */ #top_section { - border-bottom: 1px solid #bbb; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); background: var(--neutral-light-color); clear: both; } @@ -1329,11 +1326,6 @@ h1.forumtitle { } h1.forumtitle a { color: var(--header-font); - border-bottom: none; - border-bottom-style: inherit !important; -} -h1.forumtitle a:hover { - border-bottom: none; } h1.forumtitle a img { @@ -1377,7 +1369,6 @@ img#smflogo { display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #bbb; margin-bottom: 12px; } .user { @@ -1437,7 +1428,6 @@ font-size: large; align-items: baseline; max-width: 50%; background-color: var(--neutral-light-color) ; - box-shadow: 0px 0px 5px 1px var(--neutral-light-color); border-radius: 0 0.5em; } @@ -1504,8 +1494,6 @@ font-size: large; max-height: 2em; padding: .5em 1em .5em 1.5em; position: relative; - text-decoration: none; - border-bottom: none; transition-timing-function: ease-in; transition: 0.5s; line-height: 1.1em; @@ -1645,9 +1633,6 @@ font-size: large; margin: 0; } -.quickbuttons > li > a, .quickbuttons > li > a:hover, .quickbuttons > li > a:focus { - border-bottom: none; -} /* Citer tout un message, c'est mal. Citez avec discernement et effort ! Donc on supprime.*/ .quickbuttons > li:first-child { background-color: lime; @@ -1666,7 +1651,6 @@ font-size: large; border: 1px solid; border-color: var(--neutral-color) #bbb #aaa var(--neutral-color); border-radius: 3px; - box-shadow: 1px 1px 1px rgba(221, 221, 221, 0.57) inset; box-sizing: border-box; vertical-align: middle; } @@ -1686,9 +1670,6 @@ font-size: large; top: -1px; height: auto; } -.moderationbuttons_check:focus { - box-shadow: 0 0 4px #499dd8; -} .quick_edit, .post_options { position: relative; } @@ -1707,7 +1688,6 @@ font-size: large; border-left: solid 1px #aaa; border-top: solid 1px #bbb; border-radius: 4px 0 4px 4px; - box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2); } .post_options:hover ul { display: block; @@ -1717,7 +1697,6 @@ font-size: large; width: 12em; padding: 0 6px; line-height: 2.2em; - /*text-decoration: none;*/ border: 1px solid transparent; border-radius: 3px; } @@ -2460,7 +2439,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { padding: 0; margin: 0; font-size: 1.1em; - text-decoration: underline; } .errorbox p { margin: 12px 0 0 0; @@ -2472,9 +2450,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { width: 12px; font-size: 1.5em; } -.errorbox span { - text-decoration: underline; -} /* Styles for info boxes ------------------------------------------------- */ @@ -2519,7 +2494,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { .generic_bar span, .progress_bar span { position: relative; z-index: 2; - text-shadow: 1px 1px rgba(255, 255, 255, .4); display: inline-block; padding: 0 5px; } @@ -2532,8 +2506,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { background: orange; transition: width .3s; border-radius: 1px; - box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.1) inset, - 4px 4px 8px rgba(255,255,255,0.3) inset; display: block; } .generic_bar.vertical { @@ -2542,8 +2514,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { .generic_bar.vertical .bar { right: 0; top: auto; - box-shadow: 4px -4px 4px rgba(0, 0, 0, 0.1) inset, - 4px 4px 4px rgba(255,255,255,0.3) inset; } .progress_bar { @@ -2553,8 +2523,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { color: rgba(0, 0, 0, 0.8); } .progress_bar .bar { - box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.25) inset, - 1px -1px 0 rgba(0,0,0,0.1) inset; background-color: #75da41; background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); @@ -2633,7 +2601,6 @@ dl { overflow: auto; margin: 0 0 18px 0; padding: 0 0 15px 0; - border-bottom: 1px #ccc solid; } #detailedinfo dt, #tracking dt { width: 35%; @@ -2646,9 +2613,6 @@ dl { float: left; margin: 0 0 3px 0; } -#detailedinfo .noborder { - border-bottom: 0; -} #detailedinfo dt.clear { width: 100%; } @@ -2693,9 +2657,6 @@ dl { } .activity_stats li .generic_bar { height: 100px; - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; margin: 0 auto; } .activity_stats li .generic_bar span { @@ -2788,14 +2749,9 @@ dl { } .boardslist a { font-weight: bold; - border-bottom: 1px solid #c4c4c4; display: block; margin-bottom: 0.5em; } -.boardslist a:hover { - text-decoration: none; - border-bottom: 1px solid #334466; -} .boardslist label { display: inline-block; text-indent: -3ch; @@ -3112,7 +3068,6 @@ dl.addrules dt.floatleft { margin: 12px 0 0 0; padding: 8px 20px 12px 20px; border: 1px solid var(--neutral-color); - box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1); overflow: auto; } #helpmain p { @@ -3144,7 +3099,6 @@ dl.addrules dt.floatleft { background: var(--neutral-light-color); border: 1px solid #aaa; border-radius: 4px; - box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; } /* Styles for popup windows */ @@ -3192,7 +3146,6 @@ dl.addrules dt.floatleft { border: 1px solid #bbb; border-bottom: 1px solid var(--neutral-color); border-radius: 6px 6px 2px 2px; - box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2); } #main_menu .popup_heading, @@ -3232,12 +3185,6 @@ dl.addrules dt.floatleft { .windowbg:nth-of-type(odd), .bg.odd { background: var(--neutral-light-color); } -.windowbg { - border-bottom: #ddd solid 1px; -} -.windowbg:last-child, .windowbg:last-of-type { - border-bottom: none; -} /* Highlight the target item */ .windowbg:target { @@ -3281,9 +3228,6 @@ tr.windowbg:hover { padding: 5px 0; border-radius: 0; } -.generic_list_wrapper table.table_grid { - border-bottom: 1px solid #aaa; -} div#editlang_desc { margin-bottom: 8px; @@ -3294,9 +3238,6 @@ div#editlang_desc { .table_grid tr.windowbg td.centercol { text-align: center; } -tr.windowbg { - box-shadow: none; -} #postmodify #message { width: 100%; } @@ -3337,7 +3278,6 @@ div#manage_boards dl dd textarea[name=desc] { display: inline-block; } #groups .windowbg { - box-shadow: none; border-radius: 0; border-top: 0; margin: 0; @@ -3366,14 +3306,10 @@ h2 .collapse { display: inline-block; width: 45px; height: 45px; - border-bottom:none; } #messageindex .board_icon a, #messageindex .board_icon div { background: none; } -.board_icon a:hover, .board_icon div:hover { - border-bottom:none; -} .board_icon a.board_on2, .board_icon div.board_on2 { background-position: -45px 0; } @@ -3460,7 +3396,6 @@ h2 .collapse { } .khbb_children { display: flex; - border-bottom: 1px solid var(--neutral-color); align-items: center; } .khbb_children:last-of-type { @@ -3553,8 +3488,6 @@ span.postby { /* Start with description and other things */ #description_board, .filter_row { padding: 8px 10px; - border-bottom: none; - box-shadow: none; } #description_board h2, #description_board div { display: inline-block; @@ -3578,7 +3511,6 @@ span.postby { #topic_container .windowbg { border-top: none; display: flex; - box-shadow: none; border-radius: 0; padding: 0; margin: 0; @@ -3790,9 +3722,6 @@ div#pollmoderation { color: #c06002; line-height: 1.6em; } -.poster li.poster_online:hover, .poster li.poster_online:hover a { - /*text-decoration: underline;*/ -} .poster li.warning a img { vertical-align: bottom; padding: 0 2px; @@ -3866,7 +3795,6 @@ img.avatar { padding: 7px 8px 2px 2px; margin: 0; border-top: 1px solid var(--neutral-color); - box-shadow: 0 1px 0 var(--neutral-light-color) inset; min-height: 85px; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; @@ -4051,7 +3979,6 @@ ul.post_options li { clear: right; padding: 0.5em; border-top: 1px solid var(--neutral-color); - box-shadow: 0 1px 0 var(--neutral-light-color) inset; line-height: 1.4em; font-size: small; color: var(--neutral-mid-color); @@ -4060,7 +3987,6 @@ ul.post_options li { .under_message { overflow: visible; border: none; - box-shadow: none; } .smflikebutton { margin-top: 4px; @@ -4136,9 +4062,6 @@ h2.catbg, h2.catbg a, h2.catbg a:hover { color: var(--neutral-light-color); } -h2.catbg a:hover { - text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4); -} h2.catbg .main_icons::before, h2.catbg .icon { margin: 0 5px 0 0; } @@ -4160,8 +4083,7 @@ h2.catbg .main_icons::before, h2.catbg .icon { /*margin: 10px 0 0 0; padding: 12px 16px;*/ background: var(--neutral-light-color); - /*border: 1px solid #c5c5c5; - box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);*/ + /*border: 1px solid #c5c5c5;*/ overflow: auto; } /* TitleBar & SubBar */ @@ -4176,10 +4098,7 @@ h2.catbg .main_icons::before, h2.catbg .icon { color: var(--neutral-light-color); } .sub_bar { - border-bottom: 1px solid var(--neutral-color); - text-shadow: none; background: none; - box-shadow: 0 -1px 0 #999 inset; clear: both; } @@ -4189,7 +4108,6 @@ h3.titlebg, h4.titlebg, h2.subbg, h4.subbg, .subbg { font-weight: bold; overflow: hidden; padding: 6px 12px 5px 12px; - text-shadow: none; } h2.titlebg { @@ -4250,7 +4168,6 @@ p.information img { background: var(--neutral-light-color); border: 1px solid var(--neutral-color); border-radius: 3px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); min-width: 120px; z-index: 11110 !important; } @@ -4276,7 +4193,6 @@ p.information img { .atwho-view ul li { display: block; padding: 5px 10px; - border-bottom: 1px solid var(--neutral-color); cursor: pointer; } .atwho-view small { @@ -4388,7 +4304,6 @@ h2.profile_hd::before, .notify_dropdown a { display: block; padding: 0.5em; - text-decoration: none; border: 1px solid transparent; border-radius: 3px; } @@ -4604,10 +4519,6 @@ input[name="attachBBC"] { .information.noup { border-radius: 0; margin: 0 !important; - border-bottom: none; -} -.windowbg.noup { - box-shadow: none; } /* Make the reCAPTCHA dialog centered to match the positioning of the built-in verification */ @@ -4664,7 +4575,6 @@ tr[id^='list_news_lists_'] textarea { .backtrace:not(:last-child) { padding-bottom: 0.5em; - border-bottom: 1px solid var(--neutral-color); margin-bottom: 0.5em; } @@ -4734,13 +4644,6 @@ img.theme_thumbnail { .khbb_nav ul li img { width: 2em; } -.khbb_nav ul li:hover img { - clip-path: circle(50%); - background-color: var(--menu-background-active); -} -.khbb_nav ul li a:hover .khbb_subtitlemenu, .khbb_nav ul li a:focus .khbb_subtitlemenu { - color: var(--neutral-light-color) ; -} .khbb_subtitlemenu { color:var(--menu-font); @@ -4770,7 +4673,6 @@ img.theme_thumbnail { justify-content: center; align-items: baseline; max-width: 30%; - box-shadow: 0px 0px 5px 1px var(--neutral-light-color); border-radius: 0.5em 0; }