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.
This commit is contained in:
Antoine Le Gonidec 2024-07-29 16:45:36 +02:00
parent 33e1780e89
commit 7d7996cb01
Signed by: vv221
GPG key ID: 636B78F91CEB80D8

View file

@ -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;
}