diff --git a/Themes/default/css/attachments.css b/Themes/default/css/attachments.css index 8e46edd4c5..211b2bb31e 100644 --- a/Themes/default/css/attachments.css +++ b/Themes/default/css/attachments.css @@ -51,8 +51,8 @@ div#post_attachments_area.roundframe { box-shadow: none; } #post_attachments_area #postAttachment .attached { - border-right: 1px dotted #ddd; - border-top: 1px dotted #ddd; + border-right: 1px dotted var(--attachment-item-border-color); + border-top: 1px dotted var(--attachment-item-border-color); padding-top: 9px; width: 200px; position: relative; @@ -173,7 +173,7 @@ div#post_attachments_area.roundframe { min-height: initial; } #post_attachments_area #attachment_upload.dz-drag-hover { - border-color: #557ea0; + border-color: var(--attachment-dropzone-border-color_hover); } #post_attachments_area .dz-clickable { cursor: pointer; diff --git a/Themes/default/css/calendar.rtl.css b/Themes/default/css/calendar.rtl.css index 262239864f..976b0be219 100644 --- a/Themes/default/css/calendar.rtl.css +++ b/Themes/default/css/calendar.rtl.css @@ -8,8 +8,8 @@ margin: 0 0 0 1%; } #main_grid table.weeklist td.windowbg { - border-left: 2px solid #fff; - border-bottom: 2px solid #fff; + border-left: 2px solid var(--calendar-weeklist-border-color); + border-bottom: 2px solid var(--calendar-weeklist-border-color); } #main_grid img.calendar_icon { float: right; @@ -18,6 +18,6 @@ #main_grid table.weeklist td.weekdays { text-align: left; vertical-align: middle; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; + border-right: 2px solid var(--calendar-weeklist-border-color); + border-bottom: 2px solid var(--calendar-weeklist-border-color); } \ No newline at end of file diff --git a/Themes/default/css/dark.css b/Themes/default/css/dark.css index 48b84a7d1a..37740b8605 100644 --- a/Themes/default/css/dark.css +++ b/Themes/default/css/dark.css @@ -538,6 +538,29 @@ /** Theme Picker **/ --picktheme-selected-bg: hsl(var(--primary-color-hue), 28%, 24%); + /** Mentions **/ + --mentions-bg: var(--dark-bg-3); + --mentions-border-color: var(--dark-line-strong); + --mentions-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + --mentions-item-bg: var(--dark-bg-2); + --mentions-item-bg_current: hsl(225, 55%, 42%); + --mentions-item-border-color: var(--dark-line); + --mentions-item-color: var(--dark-ink); + + /** Shorthand Borders **/ + --attachment-dropzone-border-color_hover: hsl(var(--primary-color-hue), 45%, 55%); + --attachment-item-border-color: var(--dark-line); + --buttonrow-border-color: var(--dark-line); + --calendar-weeklist-border-color: var(--dark-bg-1); + --detailedinfo-border-color: var(--dark-line); + --draftoptions-border-color_left: var(--dark-line-strong); + --draftoptions-item-border-color: var(--dark-line); + --errorfile-current-border-color: rgba(255, 255, 255, 0.2); + --innerwrap-border-color: var(--dark-line); + --listposts-border-color: var(--dark-line); + --mobileaction-item-border-color: var(--dark-line); + --upcontain-lastpost-border-color: var(--dark-line); + /** Admin **/ /* The permission grid is the one place a background alone carries the /* meaning - deny, allow, custom, unchanged - so those six keep their hues diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 2f2e70e177..32c170b33c 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1292,7 +1292,7 @@ h1.forumtitle { } h1.forumtitle a { color: var(--forumtitle-link-color); - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + text-shadow: var(--forumtitle-link-text-shadow); } /* Float these items to the right */ #siteslogan, img#smflogo { @@ -1316,7 +1316,7 @@ img#smflogo { display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #bbb; + border-bottom: 1px solid var(--innerwrap-border-color); margin-bottom: 12px; padding: 12px 10px 2px 10px; } @@ -1959,8 +1959,8 @@ tr.windowbg td, tr.bg td, .table_grid tr td { } .errorfile_table td.current { font-weight: bold; - border-top: 1px solid rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-top: 1px solid var(--errorfile-current-border-color); + border-bottom: 1px solid var(--errorfile-current-border-color); border-width: 1px 0 1px 1px; background: var(--errorfile-bg_current); } @@ -2513,7 +2513,7 @@ dl { margin-left: 25px; } .list_posts { - border-top: 1px solid #ddd; + border-top: 1px solid var(--listposts-border-color); box-shadow: var(--listposts-box-shadow); padding-top: 1em; margin-top: 1em; @@ -3673,13 +3673,13 @@ form#postmodify .roundframe { #post_draft_options { background: var(--draftoptions-bg); border: 1px solid var(--draftoptions-border-color); - border-left: 1px solid #bbb; + border-left: 1px solid var(--draftoptions-border-color_left); border-top: none; border-radius: 0 0 4px 4px; } #post_draft_options .settings dd, #post_draft_options .settings dt { width: 50%; - border-top: 1px solid #e4e4e4; + border-top: 1px solid var(--draftoptions-item-border-color); padding: 5px 10px; margin: 0; } diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index c54074e9dd..8a43434043 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -66,7 +66,7 @@ overflow: auto; margin: 0 0 18px 0; padding: 0 0 15px 0; - border-bottom: 1px #ccc solid; + border-bottom: 1px var(--detailedinfo-border-color) solid; } #detailedinfo dt, #tracking dt { diff --git a/Themes/default/css/responsive.css b/Themes/default/css/responsive.css index ea9261c689..61293d09a6 100644 --- a/Themes/default/css/responsive.css +++ b/Themes/default/css/responsive.css @@ -72,7 +72,7 @@ margin: 0 auto; } #mobile_action .notify_dropdown a { - border-bottom: 1px solid #999; + border-bottom: 1px solid var(--mobileaction-item-border-color); } #mobile_action .notify_dropdown a:last-of-type { border-bottom: none; @@ -194,7 +194,7 @@ min-height: 2em; } .up_contain .lastpost { - border-top: 1px solid #ddd; + border-top: 1px solid var(--upcontain-lastpost-border-color); min-height: initial; } .lastpost p { diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 6dc4fc3d9e..1be7dec6ad 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -201,7 +201,7 @@ ul.quickbuttons li { } .buttonrow .button:first-child { border-radius: 0; - border-right: 1px solid #ccc; + border-right: 1px solid var(--buttonrow-border-color); } .post_verification #verification_control { diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index a7051b0d44..11ef5e503a 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -792,4 +792,46 @@ --editor-popup-container-bg: #f5f5f5; --editor-tablegrid-bg_active: #85a1b7; --editor-tablegrid-border-color: #85a1b7; + + /* Borders written as a shorthand rather than as a -color property, so + /* the sweep that tokenised the rest of the theme did not see them. */ + /** Shorthand Borders **/ + --attachment-dropzone-border-color_hover: #557ea0; + --attachment-item-border-color: #ddd; + --buttonrow-border-color: #ccc; + --calendar-weeklist-border-color: #fff; + --detailedinfo-border-color: #ccc; + --draftoptions-border-color_left: #bbb; + --draftoptions-item-border-color: #e4e4e4; + --errorfile-current-border-color: rgba(0, 0, 0, 0.2); + --forumtitle-link-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + --innerwrap-border-color: #bbb; + --listposts-border-color: #ddd; + --mobileaction-item-border-color: #999; + --upcontain-lastpost-border-color: #ddd; + + /* atwho.css already gives each of these a fallback, so the mentions list + /* has never looked wrong. But a token that is never declared cannot be + /* overridden either, which is what kept the list light in dark mode. Each + /* value here is the fallback it is declared from. */ + /** Mentions **/ + --mentions-bg: #fff; + --mentions-border-color: hsl(0, 0%, 85%); + --mentions-border-radius: 1px; + --mentions-border-style: solid; + --mentions-border-width: 1px; + --mentions-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + --mentions-item-bg: #f2f2f2; + --mentions-item-bg_current: hsl(225, 100%, 60%); + --mentions-item-border-color: hsl(0, 0%, 85%); + --mentions-item-border-style: solid; + --mentions-item-border-width: 0 0 1px; + --mentions-item-color: hsl(0, 0%, 20%); + --mentions-item-color_current: #fff; + --mentions-item-cursor: pointer; + --mentions-item-font-size: .95em; + --mentions-item-font-size_current: .95em; + --mentions-item-font-weight: normal; + --mentions-item-font-weight_current: normal; + --mentions-width: 120px; }