From 044f27c5ba9846fd4544123a26fcf969c0832774 Mon Sep 17 00:00:00 2001 From: Hannes Date: Sat, 9 Jan 2021 22:56:28 +0100 Subject: [PATCH] refactor: Convert colors to css variables --- resources/mixins.less | 16 +- .../skins.citizen.styles.lazyload.less | 18 +- .../skins.citizen.styles.search.less | 93 ++++--- .../skins.citizen.styles.toc.less | 90 +++---- resources/skins.citizen.styles/Catlinks.less | 13 +- resources/skins.citizen.styles/Drawer.less | 126 ++++----- resources/skins.citizen.styles/Header.less | 10 +- resources/skins.citizen.styles/Pagelinks.less | 35 +-- resources/skins.citizen.styles/Pagetools.less | 47 +--- resources/skins.citizen.styles/Searchbox.less | 64 ++--- resources/skins.citizen.styles/Sidebar.less | 10 +- .../skins.citizen.styles/common/common.less | 88 ++----- .../skins.citizen.styles/common/content.less | 42 +-- .../common/scrollbar.less | 4 +- .../common/wikitable.less | 29 +-- resources/skins.citizen.styles/css-vars.less | 239 ++++++++++++++++++ resources/skins.citizen.styles/skin.less | 1 + 17 files changed, 504 insertions(+), 421 deletions(-) create mode 100644 resources/skins.citizen.styles/css-vars.less diff --git a/resources/mixins.less b/resources/mixins.less index c8111348..96c502d0 100644 --- a/resources/mixins.less +++ b/resources/mixins.less @@ -61,30 +61,30 @@ // Material-like menu .menu-container() { padding: 8px 0; - background-color: @menu-background; + background-color: var( --menu-container-background-color ); border-radius: @border-radius-medium; display: block; } .menu-item-link() { display: flex; - color: @color-item-text !important; + color: var( --menu-item-link-color ) !important; transition: @transition-background-quick, @transition-color-quick; } .menu-item-link-hover() { - color: @color-item-text-hover !important; - background-color: @menu-item-link-hover; + color: var( --menu-item-link-hover-color ) !important; + background-color: var( --menu-item-link-hover-background-color ); } .menu-item-link-active() { - color: @color-item-text-active !important; - background-color: @menu-item-link-active; + color: var( --menu-item-link-active-focus-color ) !important; + background-color: var( --menu-item-link-active-focus-background-color ); } .menu-item-link-focus() { - color: @color-item-text-active !important; - background-color: @menu-item-link-active; + color: var( --menu-item-link-active-focus-color ) !important; + background-color: var( --menu-item-link-active-focus-background-color ); } // Button Styles diff --git a/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less b/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less index f9961713..fe415527 100644 --- a/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less +++ b/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less @@ -5,9 +5,17 @@ @import '../variables.less'; +:root { + --lazyload-mw-body-content-a-image-background-color: @base-90; +} + +:root.skin-citizen-dark { + --lazyload-mw-body-content-a-image-background-color: @dark-bg-10; +} + .mw-body-content { a.image { - background-color: @base-90; + background-color: var( --lazyload-mw-body-content-a-image-background-color ); .lazy { opacity: 0; @@ -19,11 +27,3 @@ } } } - -@media ( prefers-color-scheme: dark ) { - .mw-body-content { - a.image { - background-color: @dark-bg-10; - } - } -} diff --git a/resources/skins.citizen.styles.search/skins.citizen.styles.search.less b/resources/skins.citizen.styles.search/skins.citizen.styles.search.less index c3978e8d..45a1aca4 100644 --- a/resources/skins.citizen.styles.search/skins.citizen.styles.search.less +++ b/resources/skins.citizen.styles.search/skins.citizen.styles.search.less @@ -6,6 +6,44 @@ @import '../variables.less'; @import '../mixins.less'; +:root { + --suggestion-dropdown-background-color: @base-100; + + --suggestion-link-active-background-color: @accent-90; + --suggestion-link-active-suggestion-title-color: @accent-50; + + --suggestion-title-color: @base-10; + + --suggestion-highlight-color: @base-30; + + --suggestion-description-color: @base-30; + + --suggestion-thumbnail-background-color: @base-80; + + --suggestion-special-border-color: @base-80; + --suggestion-special-hover-background-color: @accent-90; + --suggestion-special-color: @base-10; +} + +:root.skin-citizen-dark { + --suggestion-dropdown-background-color: @dark-bg-50; + + --suggestion-link-active-background-color: @accent-10; + --suggestion-link-active-suggestion-title-color: @accent-90; + + --suggestion-title-color: @dark-text-90; + + --suggestion-highlight-color: @dark-text-70; + + --suggestion-description-color: @dark-text-70; + + --suggestion-thumbnail-background-color: @base-80; + + --suggestion-special-border-color: @dark-bg-40; + --suggestion-special-hover-background-color: @accent-10; + --suggestion-special-color: @dark-text-90; +} + #typeahead-suggestions { position: absolute; top: 38px; @@ -18,7 +56,7 @@ max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side ); display: flex; // Needed to show margin flex-direction: column; - background: @base-100; + background: var( --suggestion-dropdown-background-color ); border-radius: 0 0 @border-radius-large @border-radius-large; .boxshadow(4); } @@ -30,10 +68,10 @@ align-items: center; &.active { - background-color: @accent-90; + background-color: var( --suggestion-link-active-background-color ); .suggestion-title { - color: @accent-50; + color: var( --suggestion-link-active-suggestion-title-color ); } } } @@ -45,18 +83,18 @@ &-title { margin: 0 0 0.78rem * @content-scaling 0; display: inline-block; // so that the margin does not occupy space - color: @base-10; + color: var( --suggestion-title-color ); font-size: @content-h6-size; line-height: 1.872rem * @content-scaling; } &-highlight { - color: @base-30; + color: var( --suggestion-highlight-color ); font-style: normal; } &-description { - color: @base-30; + color: var( --suggestion-description-color ); margin: 0; font-family: @fonts; font-size: @content-caption-size; @@ -68,7 +106,7 @@ min-width: 70px; // so it won't be squeezed by the content text height: 60px; border-radius: @border-radius-small; - background-color: @base-80; + background-color: var( --suggestion-thumbnail-background-color ); background-position: center center; background-repeat: no-repeat; background-size: cover; @@ -137,44 +175,3 @@ a.suggestion-link:hover { max-width: 100vw; } } - -@media ( prefers-color-scheme: dark ) { - .suggestions-dropdown { - background: @dark-bg-50; - } - - .suggestion { - &-link { - &.active { - background-color: @accent-10; - - .suggestion-title { - color: @accent-90; - } - } - } - - &-title { - color: @dark-text-90; - } - - &-highlight { - color: @dark-text-70; - } - - &-description { - color: @dark-text-70; - } - } - - #suggestion { - &-special { - border-color: @dark-bg-40; - color: @dark-text-90; - - &:hover { - background-color: @accent-10; - } - } - } -} diff --git a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less index eb41a6ef..5439a940 100644 --- a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less +++ b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less @@ -1,6 +1,40 @@ @import '../variables.less'; @import '../mixins.less'; +:root { + --toc-color: @base-70; + + --toc-title-h2-color: @base-50; + + --toc-li-active-color: @accent-50; + --toc-li-active-a-li-color: @base-30; + + --toc-a-color: @base-50; + --toc-a-hover-color: @base-30; + + --screen3-toc-toggle-label-background-color: @base-90; + --screen3-toc-toggle-label-hover-background-color: @base-80; + --screen3-toc-toggle-label-focus-background-color: @accent-90; + --screen3-toc-ul-background-color: @base-100; +} + +:root.skin-citizen-dark { + --toc-color: @dark-text-60; + + --toc-title-h2-color: @base-50; + + --toc-li-active-color: @dark-color-link; + --toc-li-active-a-li-color: @dark-text-80; + + --toc-a-color: @dark-text-70; + --toc-a-hover-color: @dark-text-80; + + --screen3-toc-toggle-label-background-color: @dark-bg-50; + --screen3-toc-toggle-label-hover-background-color: @accent-10; + --screen3-toc-toggle-label-focus-background-color: @accent-10; + --screen3-toc-ul-background-color: @dark-bg-40; +} + .toc { position: fixed; z-index: -1; // So that it is below float objects in content @@ -8,7 +42,7 @@ top: @header-height; left: 0; padding: @margin-side; - color: @base-70; + color: var( --toc-color ); &::-webkit-scrollbar { width: 0; // Hide bar on toc @@ -17,7 +51,7 @@ &title { h2 { margin: 0; - color: @base-50 !important; + color: var( --toc-title-h2-color ) !important; font-size: @ui-menu-text-big; } } @@ -44,7 +78,7 @@ } li.active { - color: @accent-50; + color: var( --toc-li-active-a-li-color ); > a { color: inherit !important; @@ -53,7 +87,7 @@ a, li { - color: @base-30; + color: var( --toc-li-active-a-li-color ); } } @@ -61,11 +95,11 @@ display: inline-block; margin: @content-margin-top / 4 0; padding-left: 9px; - color: @base-50; + color: var( --toc-a-color ); border-left: 3px solid transparent; &:hover { - color: @base-30; + color: var( --toc-a-hover-color ); } } @@ -119,12 +153,12 @@ width: 39px; height: 56px; display: block; - background-color: @base-90; + background-color: var( --screen3-toc-toggle-label-background-color ); border-radius: 100%; .boxshadow(4); &:hover { - background-color: @menu-item-link-hover; + background-color: var( --screen3-toc-toggle-label-hover-background-color ); .boxshadow(5); &:before { @@ -133,7 +167,7 @@ } &:focus { - background-color: @menu-item-link-active; + background-color: var( --screen3-toc-toggle-label-focus-background-color ); } &:before { @@ -159,54 +193,20 @@ max-width: none; height: 100%; max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')'; - background: @base-100; + background: var( --screen3-toc-ul-background-color ); border-radius: 0 @border-radius-large @border-radius-large 0; .boxshadow(3); transform: translateX( -300px - @margin-side ); transition: @transition-transform; } } -} -@media ( prefers-color-scheme: dark ) { - .toc { - color: @dark-text-60; - - a { - color: @dark-text-70; - - &:hover { - color: @dark-text-80; - } - } - - li.active { - color: @dark-color-link; - - a, - li { - color: @dark-text-80; - } - } - } - - @media ( max-width: @screen3 ) { + .skin-citizen-dark { .toc { &togglelabel { - background-color: @dark-bg-50; - &:before { filter: invert( 1 ); } - - &:hover, - &:focus { - background-color: @accent-10; - } - } - - > ul { - background: @dark-bg-40; } } } diff --git a/resources/skins.citizen.styles/Catlinks.less b/resources/skins.citizen.styles/Catlinks.less index 2804649a..252d0ab9 100644 --- a/resources/skins.citizen.styles/Catlinks.less +++ b/resources/skins.citizen.styles/Catlinks.less @@ -34,9 +34,9 @@ a { padding: @margin-side / 4 @margin-side / 2; display: block; - border: 1px solid @base-90; - background-color: @base-90; - color: @color-content-caption !important; // Override other styles + border: 1px solid var( --catlinks-ul-li-a-border-color ); + background-color: var( --catlinks-ul-li-a-background-color ); + color: var( --catlinks-ul-li-a-color ) !important; // Overr .boxshadow(1); transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick; @@ -70,10 +70,3 @@ margin: 0 ~'calc((100vw - @{page-width}) / -2)'; } } - -@media ( prefers-color-scheme: dark ) { - .catlinks .mw-normal-catlinks > ul li a { - background-color: @dark-bg-10; - border-color: @dark-bg-10; - } -} diff --git a/resources/skins.citizen.styles/Drawer.less b/resources/skins.citizen.styles/Drawer.less index 3c4027c7..255ef507 100644 --- a/resources/skins.citizen.styles/Drawer.less +++ b/resources/skins.citizen.styles/Drawer.less @@ -11,11 +11,11 @@ justify-content: center; &-1 { - transform-origin: 0% 0%; + transform-origin: 0 0; } &-2 { - transform-origin: 0% 100%; + transform-origin: 0 100%; } } @@ -81,17 +81,17 @@ height: 100%; .boxshadow(3); border-radius: 0 @border-radius-large @border-radius-large 0; - background: @menu-background; + background: var( --drawer-mw-drawer-menu-background-color ); display: flex; flex-direction: column; - transform-origin: 0% 0%; + transform-origin: 0 0; transform: translate( -110%, 0 ); // shadow bleeding with 100% transition: @transition-transform; will-change: transform; // help with performance &-logo { padding: @header-height @margin-side @margin-side / 2 @margin-side; - border-bottom: 1px solid @base-80; + border-bottom: 1px solid var( --drawer-mw-drawer-menu-logo-border-color ); display: flex; flex-direction: column; @@ -108,6 +108,7 @@ .mw-wiki-title { opacity: 0; height: 0; + color: var( --drawer-mw-drawer-menu-logo-mw-wiki-title-color ); } } @@ -120,7 +121,7 @@ h3 { margin: @margin-side / 2 0 0 0; padding: @margin-side / 2 @margin-side; - color: @color-item-header; + color: var( --drawer-mw-drawer-menu-main-h3-color ); font-size: @ui-menu-header; font-weight: normal; letter-spacing: 1px; @@ -175,7 +176,7 @@ height: 2px; border-radius: @border-radius-large; display: block; - background: @base-0; + background: var( --drawer-mw-drawer-button-icon-div-background-color ); opacity: @opacity-icon; transform-origin: 4px 0; transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick; @@ -186,7 +187,7 @@ #p-personal { padding-top: @margin-side / 2; - border-top: 1px solid @base-80; + border-top: 1px solid var( --drawer-p-personal-border-color ); #pt-userpage { margin-bottom: @margin-side / 2; @@ -242,6 +243,44 @@ } } +.skin-citizen-dark { + #mw-drawer { + &-menu { + &-main, + &-user { + a { + &:after { + filter: invert( 1 ); + } + } + } + } + + &-button { + &:hover { + ~ #mw-drawer-button-icon { + .mw-drawer-button-icon { + &-div { + opacity: 0.6; + } + } + } + } + } + } + + .mw-drawer { + &-button { + &-icon { + &-div { + opacity: 0.4; + } + } + } + } +} + + // Only show title when screen height is less than 800px @media ( max-height: 800px ) { #mw-drawer-menu-logo { @@ -257,74 +296,3 @@ } } } - -@media ( prefers-color-scheme: dark ) { - #mw-drawer { - &-button { - &:hover { - ~ #mw-drawer-button-icon { - .mw-drawer-button-icon { - &-div { - opacity: 0.6; - } - } - } - } - } - - &-menu { - background: @dark-bg-40; - - &-logo { - border-color: @dark-bg-50; - - .mw-wiki-title { - color: @dark-text-100; - } - } - - &-main { - h3 { - color: @dark-text-100; - } - } - - &-main, - &-user { - a { - color: @dark-text-80 !important; - - &:hover { - background-color: @dark-bg-60; - color: @dark-text-90 !important; - } - - &:active, - &:focus { - color: @dark-text-100 !important; - background-color: @accent-10; - } - - &:after { - filter: invert( 1 ); - } - } - } - } - } - - .mw-drawer { - &-button { - &-icon { - &-div { - opacity: 0.4; - background: @base-100; - } - } - } - } - - #p-personal { - border-color: @dark-bg-50; - } -} diff --git a/resources/skins.citizen.styles/Header.less b/resources/skins.citizen.styles/Header.less index fef2d50b..7d904667 100644 --- a/resources/skins.citizen.styles/Header.less +++ b/resources/skins.citizen.styles/Header.less @@ -27,7 +27,7 @@ position: absolute; left: 0; right: 0; - box-shadow: 0 0 50px @header-height @header-background-color-light; + box-shadow: 0 0 50px @header-height var( --header-mw-header-background-box-shadow-color ); z-index: -1; transition: @transition-box-shadow; } @@ -41,11 +41,3 @@ align-items: center; } } - -@media ( prefers-color-scheme: dark ) { - #mw-header { - &-background { - box-shadow: 0 0 50px @header-height @header-background-color-dark !important; - } - } -} diff --git a/resources/skins.citizen.styles/Pagelinks.less b/resources/skins.citizen.styles/Pagelinks.less index 2749e64d..39384a6f 100644 --- a/resources/skins.citizen.styles/Pagelinks.less +++ b/resources/skins.citizen.styles/Pagelinks.less @@ -17,14 +17,14 @@ display: flex; align-items: center; padding: 0.4rem 0.8rem; - border: 1px solid @base-80; - color: @base-20; - background-color: @base-90; + border: 1px solid var( --pagelinks-p-namespaces-ul-li-a-border-color ); + color: var( --pagelinks-p-namespaces-ul-li-a-color ); + background-color: var( --pagelinks-p-namespaces-ul-li-a-background-color ); transition: @transition-background-quick, @transition-box-shadow-quick; .boxshadow(1); &:hover { - background-color: @base-80; + background-color: var( --pagelinks-p-namespaces-ul-li-a-hover-background-color ); .boxshadow(2); } @@ -45,6 +45,16 @@ } } +.skin-citizen-dark { + #p-namespaces { + ul li a { + &:after { + filter: invert( 1 ); + } + } + } +} + @media ( max-width: @screen1 ) { #p-namespaces { margin: 0 !important; // somehow got overrided @@ -57,20 +67,3 @@ margin: 0 ~'calc((100vw - @{page-width}) / -2)'; } } - -@media ( prefers-color-scheme: dark ) { - #p-namespaces { - ul li a { - background-color: @dark-bg-10; - border-color: @dark-bg-20; - - &:hover { - background-color: @dark-bg-20; - } - - &:after { - filter: invert( 1 ); - } - } - } -} diff --git a/resources/skins.citizen.styles/Pagetools.less b/resources/skins.citizen.styles/Pagetools.less index ef49d7af..9fe577c6 100644 --- a/resources/skins.citizen.styles/Pagetools.less +++ b/resources/skins.citizen.styles/Pagetools.less @@ -99,6 +99,20 @@ } } +.skin-citizen-dark { + #p-actions { + &:before { + filter: invert( 1 ); + } + } + + #p-views { + li > a:after { + filter: invert( 1 ); + } + } +} + // TODO: Flexible value @media ( max-width: @screen2 ) { #page-tools { @@ -123,36 +137,3 @@ } } } - -@media ( prefers-color-scheme: dark ) { - #p-actions { - ul { - background: @dark-bg-50; - - a { - color: @dark-text-80 !important; - - &:hover { - background-color: @dark-bg-60; - color: @dark-text-90 !important; - } - - &:active, - &:focus { - color: @dark-text-100 !important; - background-color: @accent-10; - } - } - } - - &:before { - filter: invert( 1 ); - } - } - - #p-views { - li > a:after { - filter: invert( 1 ); - } - } -} diff --git a/resources/skins.citizen.styles/Searchbox.less b/resources/skins.citizen.styles/Searchbox.less index 6ca927be..ef12db6f 100644 --- a/resources/skins.citizen.styles/Searchbox.less +++ b/resources/skins.citizen.styles/Searchbox.less @@ -70,7 +70,7 @@ margin-left: -2px; width: 10px; height: 10px; - border: solid 2px @base-0; + border: solid 2px var( --search-toggle-icon-2-border-color ); border-radius: 100%; transform: rotate( -45deg ); } @@ -86,7 +86,7 @@ &-1, &-3 { width: 2px; - background-color: @base-0; + background-color: var( --search-toggle-icon-1-3-background-color ); } } @@ -169,8 +169,8 @@ width: 0; height: @search-bar-height; max-width: calc( ~'100vw -'@margin-side ); - background: @base-100; - border: 1px solid @base-90; + background: var( --search-Input-background-color ); + border: 1px solid var( --search-Input-border-color ); border-radius: @border-radius-small; transition: @transition-width, @transition-box-shadow; @@ -247,27 +247,7 @@ } } -@media ( max-width: @search-bar-width ) { - #search { - &form:before { - content: ''; - display: block; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: @base-100; - opacity: 0.9; - } - - &Input { - transition: none; // Width transition does not play well on mobile - } - } -} - -@media ( prefers-color-scheme: dark ) { +.skin-citizen-dark { #search { &form { &-icon, @@ -284,15 +264,6 @@ &-toggle { &-icon { opacity: 0.4; - - &-2 { - border-color: @base-100; - } - - &-1, - &-3 { - background: @base-100; - } } &:hover { @@ -301,16 +272,25 @@ } } } + } +} + +@media ( max-width: @search-bar-width ) { + #search { + &form:before { + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var( --search-searchform-before-background-color ); + opacity: 0.9; + } &Input { - border-color: @dark-bg-60; - background: @dark-bg-50; + transition: none; // Width transition does not play well on mobile } } } - -@media ( max-width: @search-bar-width ) and ( prefers-color-scheme: dark ) { - #searchform:before { - background: @dark-bg-50; - } -} diff --git a/resources/skins.citizen.styles/Sidebar.less b/resources/skins.citizen.styles/Sidebar.less index 38cbdc7e..afaed6aa 100644 --- a/resources/skins.citizen.styles/Sidebar.less +++ b/resources/skins.citizen.styles/Sidebar.less @@ -14,15 +14,13 @@ } } +a.mw-wiki-title { + color: var( --sidebar-a-mw-wiki-title-color ); +} + @media ( max-width: @screen2 ) { .mw-sidebar-sitename { z-index: -1; // remove link opacity: 0; // hide visual } } - -@media ( prefers-color-scheme: dark ) { - a.mw-wiki-title { - color: @dark-text-70; - } -} diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less index ccab5ae1..b88e43f2 100644 --- a/resources/skins.citizen.styles/common/common.less +++ b/resources/skins.citizen.styles/common/common.less @@ -12,8 +12,8 @@ body { overflow-x: hidden; // prevent overflow from scrollbar margin: 0; padding: 0; - background: @base-100; - color: @color-content-text; + background: var( --common-html-background ); + color: var( --common-html-color ); } table { @@ -45,8 +45,9 @@ dl { pre, code, .mw-code { - color: @base-0; - background-color: @base-90; + color: var( --common-pre-color ); + background-color: var( --common-pre-background ); + border: var( --common-pre-border ); } code { @@ -60,8 +61,17 @@ pre, white-space: pre-wrap; } +input, +select, +textarea { + color: var( --common-input-color ); + background-color: var( --common-input-background ); + border: var( --common-input-border ); +} + fieldset { - color: @base-30; + color: var( --common-fieldset-color ); + border-color: var( --common-fieldset-border-color ); margin: @content-margin-top 0; padding: @content-margin-top / 2 @margin-side; } @@ -71,7 +81,7 @@ fieldset > table { } legend { - color: @base-30; + color: var( --common-legend-color ); margin: 0; padding: 4px; } @@ -82,7 +92,7 @@ code, fieldset, select, textarea { - border: 1px solid @base-80; + border: var( --common-input-border ); } textarea { @@ -129,11 +139,11 @@ a { } &:hover { - color: @color-link-active; + color: var( --common-link-color ); } &.new { - color: @color-link-new !important; // Override visited + color: var( --common-link-new-color ) !important; // Override visited &:hover { color: @color-link-new-active !important; @@ -250,63 +260,15 @@ figcaption, } } +.skin-citizen-dark { + .mw-editsection > a:before { + filter: invert( 1 ); + } +} + @media ( max-width: @screen2 ) { .mw-editsection { position: relative !important; transform: none !important; } } - -@media ( prefers-color-scheme: dark ) { - html, - body { - background: @dark-bg-0; - color: @dark-text-90; - } - - ::-webkit-scrollbar-thumb { - background-color: @dark-bg-60; - } - - * { - scrollbar-color: @dark-bg-60 transparent; - } - - pre, - code, - .mw-code { - color: @dark-text-90; - background-color: @dark-bg-10; - border: 1px solid @dark-bg-20; - } - - input, - select, - textarea { - border: 1px solid @dark-bg-50; - background: @dark-bg-40; - color: @dark-text-80; - } - - fieldset { - color: @dark-text-90; - border-color: @dark-bg-20; - } - - legend { - color: @dark-text-80; - } - - a, - a.external { - color: @dark-color-link; - } - - a.new { - color: @dark-color-link-new !important; - } - - .mw-editsection > a:before { - filter: invert( 1 ); - } -} diff --git a/resources/skins.citizen.styles/common/content.less b/resources/skins.citizen.styles/common/content.less index cf1af9cc..c8e604ab 100644 --- a/resources/skins.citizen.styles/common/content.less +++ b/resources/skins.citizen.styles/common/content.less @@ -1,13 +1,13 @@ .firstHeading { margin: 0; - color: @base-10; + color: var( --content-firstHeading-color ); overflow-wrap: break-word; // Break word instead of overflow if title is too long } #siteSub { display: block; margin: 0.4rem 0 1.6rem; - color: @base-30; + color: var( --content-sub-color ); } .firstHeading, @@ -17,7 +17,7 @@ #contentSub, #contentSub2 { - color: @base-30; + color: var( --content-sub-color ); } #mw-content-text { @@ -214,6 +214,24 @@ } } +.skin-citizen-dark { + .mw-body .firstHeading, + .mw-body-content h1, + .mw-body-content h2, + .mw-body-content h3, + .mw-body-content h4, + .mw-body-content h5, + .mw-body-content h6 { + color: var( --content-firstHeading-color ); + } + + .mw-body-content #contentSub, + .mw-body-content #contentSub2, + .mw-body #siteSub { + color: var( --content-sub-color ) !important; + } +} + @media ( max-width: @screen0 ) { #mw-content-text { > .mw-parser-output { @@ -323,21 +341,3 @@ } } } - -@media ( prefers-color-scheme: dark ) { - .mw-body .firstHeading, - .mw-body-content h1, - .mw-body-content h2, - .mw-body-content h3, - .mw-body-content h4, - .mw-body-content h5, - .mw-body-content h6 { - color: @dark-text-100; - } - - .mw-body-content #contentSub, - .mw-body-content #contentSub2, - .mw-body #siteSub { - color: @dark-text-80 !important; - } -} diff --git a/resources/skins.citizen.styles/common/scrollbar.less b/resources/skins.citizen.styles/common/scrollbar.less index 193beb75..5d610b0f 100644 --- a/resources/skins.citizen.styles/common/scrollbar.less +++ b/resources/skins.citizen.styles/common/scrollbar.less @@ -1,6 +1,6 @@ * { scrollbar-width: thin; - scrollbar-color: @base-70 transparent; + scrollbar-color: var( --scrollbar-color ) transparent; } ::-webkit-scrollbar { @@ -13,6 +13,6 @@ } ::-webkit-scrollbar-thumb { - background-color: @base-70; + background-color: var( --scrollbar-color ); border: 4px solid transparent; } diff --git a/resources/skins.citizen.styles/common/wikitable.less b/resources/skins.citizen.styles/common/wikitable.less index 592d66c8..e0418061 100644 --- a/resources/skins.citizen.styles/common/wikitable.less +++ b/resources/skins.citizen.styles/common/wikitable.less @@ -1,6 +1,6 @@ table.wikitable { background-color: transparent; - color: @base-20; + color: var( --wikitable-color ); border: 0; border-collapse: collapse; @@ -13,7 +13,7 @@ table.wikitable { vertical-align: top; th { - color: @base-30; + color: var( --wikitable-tr-th-color ); background-color: transparent; font-size: @content-caption-size; text-align: left; @@ -27,11 +27,11 @@ table.wikitable { td { padding: @margin-side / 2 @margin-side @margin-side / 2 0; border: 0; - border-bottom: 1px solid @base-80; + border-bottom: 1px solid var( --wikitable-tr-th-border-color ); } &:hover { - background-color: @base-90; + background-color: var( --wikitable-tr-hover-background-color ); } } } @@ -41,24 +41,3 @@ table.wikitable { white-space: nowrap; } } - -@media ( prefers-color-scheme: dark ) { - table.wikitable { - color: @dark-text-90; - - tr { - th { - color: @dark-text-80; - } - - th, - td { - border-color: @dark-bg-20; - } - - &:hover { - background-color: @dark-bg-10; - } - } - } -} diff --git a/resources/skins.citizen.styles/css-vars.less b/resources/skins.citizen.styles/css-vars.less new file mode 100644 index 00000000..fe9b8c38 --- /dev/null +++ b/resources/skins.citizen.styles/css-vars.less @@ -0,0 +1,239 @@ +@import '../variables.less'; + +/** +This definitely needs to be slimmed down + */ + +:root { + /** + Mixins + */ + --menu-item-link-color: @base-30; + + --menu-item-link-hover-color: @base-20; + --menu-item-link-hover-background-color: @base-80; + + --menu-item-link-active-focus-color: @accent-50; + --menu-item-link-active-focus-background-color: @accent-90; + + --menu-container-background-color: @base-100; + + + /** + Common + */ + --common-html-background: @base-100; + --common-html-color: @base-20; + + --common-pre-background: @base-90; + --common-pre-color: @base-0; + --common-pre-border: initial; + + --common-input-color: inherit; + --common-input-background: inherit; + --common-input-border: 1px solid @base-80; + + --common-fieldset-color: @base-30; + --common-fieldset-border-color: initial; + + --common-legend-color: @base-30; + + --common-link-color: @color-link; + --common-link-new-color: @color-link-new; + + /** + Content + */ + --content-firstHeading-color: @base-10; + --content-sub-color: @base-30; + + /** + Scrollbar + */ + --scrollbar-color: @base-70; + + /** + Wikitable + */ + --wikitable-color: @base-20; + + --wikitable-tr-th-color: @base-30; + --wikitable-tr-th-border-color: @base-80; + --wikitable-tr-hover-background-color: @base-90; + + /** + Catlinks + */ + --catlinks-ul-li-a-color: @base-30; + --catlinks-ul-li-a-background-color: @base-90; + --catlinks-ul-li-a-border-color: @base-90; + + + /** + Drawer + */ + --drawer-mw-drawer-menu-background-color: @menu-background; + + --drawer-mw-drawer-menu-logo-border-color: @base-80; + --drawer-mw-drawer-menu-logo-mw-wiki-title-color: inherit; + + --drawer-mw-drawer-menu-main-h3-color: @color-item-header; + + --drawer-mw-drawer-menu-main-a-color: @dark-text-90; + + --drawer-mw-drawer-menu-main-a-hover-color: @dark-bg-60; + --drawer-mw-drawer-menu-main-a-hover-background-color: @dark-text-90; + + --drawer-mw-drawer-menu-main-a-active-color: @dark-text-100; + --drawer-mw-drawer-menu-main-a-active-background-color: @accent-10; + + --drawer-mw-drawer-button-icon-div-background-color: @base-0; + + --drawer-p-personal-border-color: @base-80; + + /** + Header + */ + --header-mw-header-background-box-shadow-color: @base-100; + + /** + Pagelinks + */ + --pagelinks-p-namespaces-ul-li-a-color: @base-20; + --pagelinks-p-namespaces-ul-li-a-background-color: @base-90; + --pagelinks-p-namespaces-ul-li-a-border-color: @base-80; + --pagelinks-p-namespaces-ul-li-a-hover-background-color: @base-80; + + /** + Searchbox + */ + --search-toggle-icon-2-border-color: @base-0; + --search-toggle-icon-1-3-background-color: @base-0; + + --search-Input-border-color: @base-90; + --search-Input-background-color: @base-100; + + --search-searchform-before-background-color: @base-100; + + /** + Sidebar + */ + --sidebar-a-mw-wiki-title-color: inherit; +} + +:root.skin-citizen-dark { + /** + Mixins + */ + --menu-item-link-color: @dark-text-80; + + --menu-item-link-hover-color: @dark-text-90; + --menu-item-link-hover-background-color: @dark-bg-60; + + --menu-item-link-active-focus-color: @dark-text-100; + --menu-item-link-active-focus-background-color: @accent-10; + + --menu-container-background-color: @dark-bg-50; + + + /** + Common + */ + --common-html-background: @dark-bg-0; + --common-html-color: @dark-text-90; + + --common-pre-background: @dark-bg-10; + --common-pre-color: @dark-text-90; + --common-pre-border: 1px solid @dark-bg-20; + + --common-input-color: @dark-text-80; + --common-input-background: @dark-bg-40; + --common-input-border: 1px solid @dark-bg-50; + + --common-fieldset-color: @dark-text-90; + --common-fieldset-border-color: @dark-bg-20; + + --common-legend-color: @dark-text-80; + + --common-link-color: @dark-color-link; + --common-link-new-color: @dark-color-link-new; + + /** + Content + */ + --content-firstHeading-color: @dark-text-100; + --content-sub-color: @dark-text-80; + + /** + Scrollbar + */ + --scrollbar-color: @dark-bg-60; + + /** + Wikitable + */ + --wikitable-color: @dark-text-90; + + --wikitable-tr-th-color: @dark-text-80; + --wikitable-tr-th-border-color: @dark-bg-20; + --wikitable-tr-hover-background-color: @dark-bg-10; + + /** + Catlinks + */ + --catlinks-ul-li-a-color: @dark-text-70; + --catlinks-ul-li-a-background-color: @dark-bg-10; + --catlinks-ul-li-a-border-color: @dark-bg-10; + + + /** + Drawer + */ + --drawer-mw-drawer-menu-background-color: @dark-bg-40; + + --drawer-mw-drawer-menu-logo-border-color: @dark-bg-50; + --drawer-mw-drawer-menu-logo-mw-wiki-title-color: @dark-text-100; + + --drawer-mw-drawer-menu-main-h3-color: @dark-text-100; + + --drawer-mw-drawer-menu-main-a-color: @dark-text-90; + + --drawer-mw-drawer-menu-main-a-hover-color: @dark-bg-60; + --drawer-mw-drawer-menu-main-a-hover-background-color: @dark-text-90; + + --drawer-mw-drawer-menu-main-a-active-color: @dark-text-100; + --drawer-mw-drawer-menu-main-a-active-background-color: @accent-10; + + --drawer-mw-drawer-button-icon-div-background-color: @base-100; + + --drawer-p-personal-border-color: @dark-bg-50; + + /** + Header + */ + --header-mw-header-background-box-shadow-color: @dark-bg-0; + + /** + Pagelinks + */ + --pagelinks-p-namespaces-ul-li-a-color: @dark-text-80; + --pagelinks-p-namespaces-ul-li-a-background-color: @dark-bg-10; + --pagelinks-p-namespaces-ul-li-a-border-color: @dark-bg-20; + --pagelinks-p-namespaces-ul-li-a-hover-background-color: @dark-bg-20; + + /** + Searchbox + */ + --search-toggle-icon-2-border-color: @base-100; + --search-toggle-icon-1-3-background-color: @base-100; + + --search-Input-border-color: @dark-bg-60; + --search-Input-background-color: @dark-bg-50; + + --search-searchform-before-background-color: @dark-bg-50; + + /** + Sidebar + */ + --sidebar-a-mw-wiki-title-color: @dark-text-70; +} diff --git a/resources/skins.citizen.styles/skin.less b/resources/skins.citizen.styles/skin.less index a6c19222..6be4d1be 100644 --- a/resources/skins.citizen.styles/skin.less +++ b/resources/skins.citizen.styles/skin.less @@ -4,6 +4,7 @@ @import '../mixins.less'; @media only screen { + @import 'css-vars'; @import 'common/common.less'; @import 'common/content.less'; @import 'common/typography.less';