From 258c5d262fa4971d0df1d4d4f23c2b1f02ab93af Mon Sep 17 00:00:00 2001 From: albertlast Date: Tue, 11 Aug 2026 08:48:31 +0200 Subject: [PATCH] Gives the last hard-coded colours in index.css a token Wave 4 tokenised index.css area by area and left a remainder: 55 declarations that no area owned, scattered across the file. This takes those, so that every colour the default theme draws now resolves through variables.css. Most are one-offs - the forum title link, the current page number, the status words, the COPPA contact block, the error file viewer, the warning level bars. Three are not: the sheen gradients on raised controls, on their hover state and on the overlay surfaces are each shared by a long selector list spanning menus, quick buttons, popups and post options, so they are named for what they are rather than for any one component that uses them. Every token is seeded with the literal it takes over from, so this is not meant to change what the forum looks like, and does not. Verified by recording the computed color, background, background-image, border colours, box-shadow, outline and text-shadow of every element on twelve pages - the board index, a topic, the poster, the profile, the stats, help, search, the calendar, personal messages, the admin centre, its permission grid and its theme list - before and after: 4254 elements, zero differences. The one literal left is the diagonal stripe the progress bar draws over its fill, which is a translucent white texture rather than a colour. Signed-off-by: Mathias Alberts Signed-off-by: albertlast --- Themes/default/css/index.css | 116 +++++++++++++++---------------- Themes/default/css/variables.css | 101 +++++++++++++++++++++++++-- 2 files changed, 153 insertions(+), 64 deletions(-) diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 04c606a7f3..bcae359fee 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -150,7 +150,7 @@ strong, .strong { color: var(--strong-color); } .cat_bar strong { - color: #fff; + color: var(--catbar-strong-color); } em, .em { font-style: italic; @@ -238,14 +238,14 @@ body#help_popup { position: relative; top: -2px; padding: 0 4px; - background: linear-gradient(#f97b00,#884d00); - color: #fff; + background: var(--newposts-bg); + color: var(--newposts-color); font: 9px/15px verdana, sans-serif; border-radius: 2px; opacity: 0.8; } a.new_posts:visited { - color: #fff; + color: var(--newposts-color); } .new_posts:hover, .new_posts:focus { text-decoration: none; @@ -626,7 +626,7 @@ strong[id^='child_list_']::after { } .current_page { padding: 0 4px 0 2px; - color: #b46100; + color: var(--currentpage-color); font-family: verdana, sans-serif; font-weight: bold; } @@ -646,15 +646,15 @@ strong[id^='child_list_']::after { /* Calendar colors for birthdays, events and holidays */ .birthday { - color: #920ac4; + color: var(--birthday-color); } .event { - color: #078907; + color: var(--event-color); } .holiday > span.label { - color: #025dff; + color: var(--holiday-color); } .holiday_wrapper > span:first-of-type::before { content: '('; @@ -671,11 +671,11 @@ strong[id^='child_list_']::after { } .warn_moderate { - color: #ffa500; + color: var(--warnmoderate-color); } .warn_watch, .success { - color: green; + color: var(--success-color); } a.moderation_link, a.moderation_link:visited { @@ -818,17 +818,17 @@ img.sort, .sort { visibility: hidden; border-radius: 3px; outline: none !important; - border: 1px solid #bbb; + border: 1px solid var(--autosuggest-border-color); z-index: 100; } .auto_suggest_item { - background: #ddd; + background: var(--autosuggest-item-bg); padding: 1px 4px; } .auto_suggest_item_hover { - background: #888; + background: var(--autosuggest-item-bg_hover); cursor: pointer; - color: #eee; + color: var(--autosuggest-item-color_hover); padding: 1px 4px; } @@ -1147,7 +1147,7 @@ html[lang="el-GR"] .inline_mod_check { text-transform: capitalize; } .pagesection .button { - color: #346; + color: var(--pagesection-button-color); } /* .button is listed here for the border and the shadow; it overrides the colour again immediately below, so this one belongs to the quick buttons. */ @@ -1207,10 +1207,10 @@ html[lang="el-GR"] .inline_mod_check { /* Box-shadow only on this one. */ #wrapper { clear: both; - background: #fff; - border: 1px solid #b8b8b8; + background: var(--wrapper-bg); + border: 1px solid var(--wrapper-border-color); border-radius: 8px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14); + box-shadow: var(--wrapper-box-shadow); } /* Set maximum width limit for content. @@ -1291,7 +1291,7 @@ h1.forumtitle { flex: 1 1 auto; } h1.forumtitle a { - color: #a85400; + color: var(--forumtitle-link-color); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } /* Float these items to the right */ @@ -1910,16 +1910,16 @@ dl.register_form dd { .coppa_contact { padding: 4px; width: 32ex; - background: #fff; - color: #222; + background: var(--coppa-bg); + color: var(--coppa-color); margin-left: 5ex; - border: 1px solid #222; + border: 1px solid var(--coppa-border-color); } .valid_input { - background: #f5fff0; + background: var(--input-bg_valid); } .invalid_input { - background: #fff0f0; + background: var(--input-bg_invalid); } /* Styles for maintenance mode. @@ -1950,7 +1950,7 @@ tr.windowbg td, tr.bg td, .table_grid tr td { } .errorfile_table { - background: #f0f4f7; + background: var(--errorfile-bg); border-collapse: collapse; } .errorfile_table .file_line { @@ -1962,7 +1962,7 @@ tr.windowbg td, tr.bg td, .table_grid tr td { border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-width: 1px 0 1px 1px; - background: rgba(245, 141, 15, 0.2); + background: var(--errorfile-bg_current); } .generic_menu { @@ -2546,7 +2546,7 @@ dl { width: 35%; margin: 0 0 3px 0; font-weight: bold; - color: #444; + color: var(--profile-dt-color); } #detailedinfo dd, #tracking dd { width: 65%; @@ -2590,10 +2590,10 @@ dl { } .activity_stats li span { display: block; - border: 1px solid #666; + border: 1px solid var(--activitystats-border-color); border-left: none; border-right: none; - background: #eee; + background: var(--activitystats-bg); } .activity_stats li.last span { border-right: none; @@ -2629,7 +2629,7 @@ dl { padding: 5px 6px 1px 2px; font-size: 2.2em; font-weight: bold; - color: #3f3f3f; + color: var(--counter-color); float: left; } .topic_details { @@ -2640,7 +2640,7 @@ dl { } .list_posts { border-top: 1px solid #ddd; - box-shadow: 0 1px 0 #fff inset; + box-shadow: var(--listposts-box-shadow); padding-top: 1em; margin-top: 1em; margin-bottom: 1em; @@ -2742,7 +2742,7 @@ dl { float: left; } #pick_theme .selected { - background: #cddbe6; + background: var(--picktheme-selected-bg); } /* Signature preview */ @@ -2768,16 +2768,16 @@ dl { max-width: 250px; } .warning_level.none .bar { - background-color: #75da41; + background-color: var(--warninglevel-bg_none); } .warning_level.watched .bar { - background-color: #ffd800; + background-color: var(--warninglevel-bg_watched); } .warning_level.moderated .bar { - background-color: orange; + background-color: var(--warninglevel-bg_moderated); } .warning_level.muted .bar { - background-color: #f45d4c; + background-color: var(--warninglevel-bg_muted); } /* Styles for the statistics center. @@ -3098,7 +3098,7 @@ dl.addrules dt.floatleft { border: var(--popup-content-border-width) var(--popup-content-border-style) var(--popup-content-border-color); border-bottom: var(--popup-content-border-width) var(--popup-content-border-style) var(--popup-content-border-color_bottom); 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); + box-shadow: var(--popup-content-box-shadow); } .popup_window.large .popup_content { max-height: 80vh; @@ -3840,8 +3840,8 @@ form#postmodify .roundframe { font-weight: bold; } #post_draft_options { - background: #fdfdfd; - border: 1px solid #aaa; + background: var(--draftoptions-bg); + border: 1px solid var(--draftoptions-border-color); border-left: 1px solid #bbb; border-top: none; border-radius: 0 0 4px 4px; @@ -3856,7 +3856,7 @@ form#postmodify .roundframe { border-top: none; /* Some people are OCD, like me. :P */ } #post_draft_options .settings strong { - color: #555; + color: var(--draftoptions-strong-color); } #post_confirm_buttons { display: flex; @@ -3934,16 +3934,16 @@ form#postmodify .roundframe { border-spacing: 1px; } .errorfile_table td { - background: #fbfbfb; + background: var(--errorfile-line-bg); } .errorfile_table .current { - background: #fbc6c6; + background: var(--errorfile-line-bg_current); } .errorfile_table .file_line.current { - background: #fb9090; + background: var(--errorfile-fileline-bg_current); } .errorfile_table .file_line { - background: #ececec; + background: var(--errorfile-fileline-bg); } /* General Classes */ @@ -4053,7 +4053,7 @@ h3.catbg .main_icons::before, h3.catbg .icon { } h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { background: none; - color: #555; + color: var(--titlebg-color); font-family: "Tahoma", sans-serif; font-weight: bold; overflow: hidden; @@ -4062,7 +4062,7 @@ h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { } .titlebg a, .subbg a { background: none; - color: #555; + color: var(--titlebg-link-color); text-decoration: none; } .title_bar + .windowbg, .title_bar + .roundframe { @@ -4232,18 +4232,18 @@ h3.profile_hd::before, .quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus, .inline_mod_check, .popup_window, .post_options ul, .post_options ul a:hover, .post_options ul a:focus, .dropmenu .viewport .overview a:hover, .dropmenu .viewport .overview a:focus { - background: #fff; /* fallback for some browsers */ - background-image: linear-gradient(#e2e9f3 0%, #fff 70%); + background: var(--raised-bg); /* fallback for some browsers */ + background-image: var(--raised-bg-image); } /* Well some of them has different gradient effect on hover */ .button:hover, #search_form .button:hover, .quickbuttons li:hover { - background: #fff; - background-image: linear-gradient(to bottom, #fff 0%, #e2e9f3 70%); + background: var(--raised-bg_hover); + background-image: var(--raised-bg-image_hover); } /* If it fits I sits... */ .navigate_section ul, .popup_content, .up_contain { - background: #fff; - background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%); + background: var(--overlay-bg); + background-image: var(--overlay-bg-image); } /* Topic/Board follow-alert menu */ @@ -4259,7 +4259,7 @@ h3.profile_hd::before, } .dropmenu .viewport .overview a:hover, .dropmenu .viewport .overview a:focus { - border-color: #ddd; + border-color: var(--dropmenu-border-color_focus); } .dropmenu .viewport .overview span { font-size: 0.9em; @@ -4271,7 +4271,7 @@ h3.profile_hd::before, margin: -7px 0 15px 0; } #display_head p { - color: #959595; + color: var(--displayhead-color); } #display_head span { margin: -4px 0 0 0; @@ -4298,13 +4298,13 @@ h3.profile_hd::before, /* Messages that somehow need to attract the attention. */ .red, .meaction, .error, .alert, .warn_mute { - color: red; + color: var(--error-color); } .blue { - color: blue; + color: var(--blue-color); } .green { - color: green; + color: var(--green-color); } /* Adding some classes for generic usage and JS rules */ @@ -4486,7 +4486,7 @@ tr[id^='list_news_lists_'] textarea { } .videocontainer video { object-fit: contain; - background: black; + background: var(--video-bg); max-width: 100%; } diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index f82905f948..dd7b204ee9 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -45,6 +45,9 @@ --secondary-color-900: hsl(var(--secondary-color-hue), 97%, 46%); /** Layout **/ + --wrapper-bg: #fff; + --wrapper-border-color: #b8b8b8; + --wrapper-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14); --wrapper-width: 1200px; /** Footer **/ @@ -92,6 +95,7 @@ --dropmenu-border-color: transparent; --dropmenu-border-color_active: #f49a3a; --dropmenu-border-color_active_hover: #f49a3a; + --dropmenu-border-color_focus: #ddd; --dropmenu-border-color_hover: #4a6b8c; --dropmenu-border-radius: 4px; --dropmenu-border-style: solid; @@ -169,6 +173,8 @@ --input-bg_disabled: #eee; --input-bg_focus: #fff; --input-bg_hover: #fbfbfb; + --input-bg_invalid: #fff0f0; + --input-bg_valid: #f5fff0; --input-border-color: #bbb; --input-border-color_disabled: #b6b6b6; --input-border-color_focus: #7fb0d8; @@ -290,6 +296,7 @@ --catbar-color: #fff; --catbar-font-family: "Tahoma", sans-serif; --catbar-font-size: 1.1em; + --catbar-strong-color: #fff; --catbar-text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); --catbar-text-shadow_hover: -1px -1px 0 rgba(0, 0, 0, 0.4); @@ -506,6 +513,7 @@ --popup-content-border-color_bottom: #ddd; --popup-content-border-style: solid; --popup-content-border-width: 1px; + --popup-content-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2); /** Generic Lists **/ --listgrid-border-color: #aaa; @@ -632,20 +640,23 @@ --breadcrumb-link-text-shadow_hover: none; /** Calendar **/ - --calendar-th-bg: #e7eaef; - --calendar-today-bg: #fff; - --calendar-disabled-bg: #eee; + --birthday-color: #920ac4; + --calendar-birthday-bg: rgba(102, 0, 255, 0.1); + --calendar-birthday-bg_hover: rgba(153, 51, 255, 0.2); --calendar-day-bg_hover: rgba(97, 135, 166, 0.2); + --calendar-disabled-bg: #eee; --calendar-event-bg: rgba(30, 245, 20, 0.1); --calendar-event-bg_hover: rgba(30, 245, 20, 0.2); + --calendar-event-meta-color: #777; --calendar-holiday-bg: rgba(23, 110, 245, 0.1); --calendar-holiday-bg_hover: rgba(23, 110, 245, 0.2); - --calendar-birthday-bg: rgba(102, 0, 255, 0.1); - --calendar-birthday-bg_hover: rgba(153, 51, 255, 0.2); --calendar-link-color: #999; --calendar-link-color_hover: #555; + --calendar-th-bg: #e7eaef; --calendar-title-link-color: #555; - --calendar-event-meta-color: #777; + --calendar-today-bg: #fff; + --event-color: #078907; + --holiday-color: #025dff; /** Admin **/ --admin-announcement-border-color: #bf6900; @@ -676,4 +687,82 @@ --admin-smiley-border-color_selected: #ffb42d; --admin-table-caption-color: #000; --admin-table-grid-border-color: #ddd; + + /** Forum Title Link **/ + --forumtitle-link-color: #a85400; + + /** New Posts Badge **/ + --newposts-bg: linear-gradient(#f97b00,#884d00); + --newposts-color: #fff; + + /** Page Index **/ + --currentpage-color: #b46100; + --pagesection-button-color: #346; + + /** Status Text **/ + --blue-color: blue; + --error-color: red; + --green-color: green; + --success-color: green; + --warnmoderate-color: #ffa500; + + /** Raised Controls **/ + --raised-bg: #fff; + --raised-bg-image: linear-gradient(#e2e9f3 0%, #fff 70%); + --raised-bg_hover: #fff; + --raised-bg-image_hover: linear-gradient(to bottom, #fff 0%, #e2e9f3 70%); + + /** Overlay Surfaces **/ + --overlay-bg: #fff; + --overlay-bg-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%); + + /** Title and Sub Backgrounds **/ + --titlebg-color: #555; + --titlebg-link-color: #555; + + /** Auto Suggest **/ + --autosuggest-border-color: #bbb; + --autosuggest-item-bg: #ddd; + --autosuggest-item-bg_hover: #888; + --autosuggest-item-color_hover: #eee; + + /** Topic Display Head **/ + --displayhead-color: #959595; + + /** Draft Options **/ + --draftoptions-bg: #fdfdfd; + --draftoptions-border-color: #aaa; + --draftoptions-strong-color: #555; + + /** Profile **/ + --activitystats-bg: #eee; + --activitystats-border-color: #666; + --counter-color: #3f3f3f; + --listposts-box-shadow: 0 1px 0 #fff inset; + --profile-dt-color: #444; + + /** Warning Level Bars **/ + --warninglevel-bg_moderated: orange; + --warninglevel-bg_muted: #f45d4c; + --warninglevel-bg_none: #75da41; + --warninglevel-bg_watched: #ffd800; + + /** COPPA Contact **/ + --coppa-bg: #fff; + --coppa-border-color: #222; + --coppa-color: #222; + + /** Error File Viewer **/ + --errorfile-bg: #f0f4f7; + --errorfile-bg_current: rgba(245, 141, 15, 0.2); + --errorfile-fileline-bg: #ececec; + --errorfile-fileline-bg_current: #fb9090; + --errorfile-line-bg: #fbfbfb; + --errorfile-line-bg_current: #fbc6c6; + + /** Theme Picker **/ + --picktheme-selected-bg: #cddbe6; + + /** Embedded Video **/ + --video-bg: black; }