From a9888043fcd37389e1e14e65eb2b3ab7b4a708bb Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Dec 2024 17:12:20 +0100 Subject: Dark mode mainly --- src/_badge.scss | 14 ++++ src/_board.scss | 4 +- src/_core.scss | 1 + src/_core.vars.scss | 183 +++++++++++++++++++++++++++++++++++----------------- src/_footer.scss | 6 ++ src/_header.scss | 2 +- src/_sidebar.scss | 16 ----- src/dark.scss | 6 ++ 8 files changed, 154 insertions(+), 78 deletions(-) (limited to 'src') diff --git a/src/_badge.scss b/src/_badge.scss index 1076947..5913ea6 100644 --- a/src/_badge.scss +++ b/src/_badge.scss @@ -19,3 +19,17 @@ } } } + +@mixin styles--dark { + .badge, a.badge { + &.badgeUpdate { + --background-color: #{props.get(core.$theme, --red, --400)}; + --color: #{props.get(core.$theme, --red, --400-text)}; + } + + &.yellow { + --background-color: #{props.get(core.$theme, --yellow, --800)}; + --color: #{props.get(core.$theme, --yellow, --800-text)}; + } + } +} diff --git a/src/_board.scss b/src/_board.scss index 7d54a1c..eb221d2 100644 --- a/src/_board.scss +++ b/src/_board.scss @@ -4,7 +4,7 @@ @mixin styles { .wbbBoardNode__unreadIcon { - background-image: url(../images/style-6/custom/boardNewM.png); + background-image: url(../images/style-9/custom/boardNewM.png); background-position: center center; background-repeat: no-repeat; @@ -14,7 +14,7 @@ } .wbbBoardNode__defaultIcon { - background-image: url(../images/style-6/custom/boardM.png); + background-image: url(../images/style-9/custom/boardM.png); background-position: center center; background-repeat: no-repeat; diff --git a/src/_core.scss b/src/_core.scss index aeea3ce..e3a2c2e 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -15,6 +15,7 @@ @mixin styles--dark { :root { @include props.materialize(map.get(vars.$themes, --dark)); + @include props.materialize(map.values(meta.module-variables('vars')), null); @include props.materialize(map.values(meta.module-variables('vars')), 'dark'); } } diff --git a/src/_core.vars.scss b/src/_core.vars.scss index c9117b5..c188e8f 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -7,36 +7,44 @@ @use 'iro-sass/src/functions'; @use 'iro-design/src/functions' as fn; +@function light-bezier($x) { + @return easing.cubic-bezier(.3, .1, .7, 1, $x); +} + +@function dark-bezier($x) { + @return easing.cubic-bezier(.3, .1, .7, 1, $x); +} + $themes-spec: ( --light: ( --levels: ( --grays: ( - --50: (-30) .1 0, - --75: (-16) .3 0, - --100: (0) .5 0, + --50: -30 .1 0, + --75: -16 .3 0, + --100: 0 .5 0, - --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)), - --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)), - --400: (easing.cubic-bezier(.3, .1, .7, 1, math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)), + --200: (light-bezier(math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)), + --300: (light-bezier(math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)), + --400: (light-bezier(math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)), - --500: (easing.cubic-bezier(.3, .1, .7, 1, math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)), - --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)), - --700: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)), - --800: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)), + --500: (light-bezier(math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)), + --600: (light-bezier(math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)), + --700: (light-bezier(math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)), + --800: (light-bezier(math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)), --900: #000 ), --colors: ( - --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), - --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), - --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), - --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), - --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), - --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), - --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), - --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), - --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), - --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), + --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), + --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), + --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), + --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), + --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), + --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), + --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), + --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), + --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), + --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), @@ -68,56 +76,56 @@ $themes-spec: ( --dark: ( --levels: ( --grays: ( - --50: #000, - --75: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)), - --100: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)), - - --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)), - --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)), - --400: (easing.cubic-bezier(.3, .1, .7, 1, math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)), - - --500: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)), - --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)), - --700: (0) .5 0, - --800: (-16) .3 0, - --900: (-30) .1 0, + --50: 1.2 .1 0, + --75: 0.7 .2 0, + --100: 0 .4 0, + + --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 7)), + --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 7)), + --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)), + + --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 7)), + --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)), + --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)), + --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)), + --900: #fff ), --colors: ( - --100: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), - --200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), - --300: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), - --400: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), - --500: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), - --600: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), - --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), - --800: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), - --900: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), - --1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), - --1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), - --1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), - --1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), + --100: (math.div(0, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), + --200: (math.div(1, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), + --300: (math.div(2, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), + --400: (math.div(3, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), + --500: (math.div(4, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), + --600: (math.div(5, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), + --700: (math.div(6, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), + --800: (math.div(7, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), + --900: (math.div(8, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), + --1000: (math.div(9, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), + --1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), + --1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), + --1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), ), ), --palettes: ( - --base: #edddc4 --grays, + --base: #351c0e --grays, --red: oklch(36.32% 0.1302 53.73) --colors, --blue: oklch(36.32% 0.1302 273.58) --colors, --yellow: oklch(36.32% 0.1302 92.94) --colors, ), --semantic: ( - --bg-l2: --base --50, - --bg-l1: --base --75, - --bg-base: --base --100, + --bg-base: --base --75, + --bg-l1: --base --100, + --bg-l2: --base --200, --link: ( - --fg: --red --1000, - --underline: --red --400, - --fg-inv: --red --1000-text, - --active: --red --1300, - --active-inv: --red --1300-text, + --fg: --yellow --1000, + --underline: --yellow --400, + --fg-inv: --yellow --1000-text, + --active: --yellow --1300, + --active-inv: --yellow --1300-text, ) ), ) @@ -186,8 +194,8 @@ $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, $wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242)); $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); -$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6)); -$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6)); +$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7)); +$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7)); $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base)); $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800)); @@ -204,6 +212,7 @@ $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, - $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50)); $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); +$wcfSidebarBorder: props.def(--wcfSidebarBackground, transparent); $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); @@ -212,9 +221,9 @@ $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($th $wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text)); $wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900)); -$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text)); +$wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text)); $wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200)); -$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text)); +$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text)); $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); @@ -225,6 +234,8 @@ $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActi $wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink)); $wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive)); +$wcfSidebarDimmedLink: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText)); +$wcfSidebarDimmedLinkActive: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText)); $wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink)); $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive)); @@ -234,3 +245,57 @@ $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200)); $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200)); + +// + +$wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark'); +$wcfHeaderMenuBackgroundDark: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --50), 'dark'); +$wcfHeaderMenuLinkBackgroundDark: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --50), 'dark'); +$wcfHeaderMenuLinkBackgroundActiveDark: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --200), 'dark'); +$wcfHeaderMenuDropdownBackgroundDark: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --50), 'dark'); +$wcfHeaderMenuDropdownBorderDark: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --50), 'dark'); +$wcfHeaderMenuDropdownBackgroundActiveDark: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --200), 'dark'); + +$wcfNavigationBackgroundDark: props.def(--wcfNavigationBackground, props.get($theme, --bg-base), 'dark'); +$wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base, --500), 'dark'); +$wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark'); +$wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark'); + +$wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark'); +$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark'); +$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark'); +$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark'); + +$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark'); +$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark'); +$wcfFooterLinkDark: props.def(--wcfFooterLink, props.get($theme, --base, --700), 'dark'); +$wcfFooterLinkActiveDark: props.def(--wcfFooterLinkActive, props.get($theme, --base, --700), 'dark'); + +$wcfFooterCopyrightBackgroundDark: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --50), 'dark'); +$wcfFooterCopyrightTextDark: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --500), 'dark'); +$wcfFooterCopyrightLinkDark: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --700), 'dark'); +$wcfFooterCopyrightLinkActiveDark: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --700), 'dark'); + +$wcfButtonBackgroundDark: props.def(--wcfButtonBackground, props.get($theme, --base, --300), 'dark'); +$wcfButtonTextDark: props.def(--wcfButtonText, props.get($theme, --base, --300-text), 'dark'); +$wcfButtonBackgroundActiveDark: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'dark'); +$wcfButtonTextActiveDark: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'dark'); + +$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900), 'dark'); +$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text), 'dark'); +$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'dark'); +$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'dark'); + +$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark'); +$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark'); + +$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark'); +$wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark'); +$wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark'); +$wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); +$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); + +$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark'); +$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark'); +$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark'); +$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --yellow, --1200-text), 'dark'); diff --git a/src/_footer.scss b/src/_footer.scss index 714a1cf..54a0500 100644 --- a/src/_footer.scss +++ b/src/_footer.scss @@ -7,3 +7,9 @@ } } } + +@mixin styles--dark { + .pageFooter { + border-block-start: 1px solid rgba(#fff, .1); + } +} diff --git a/src/_header.scss b/src/_header.scss index 28448a0..94ac3d4 100644 --- a/src/_header.scss +++ b/src/_header.scss @@ -1,6 +1,6 @@ @mixin styles { .pageHeader { - background-image: url(../images/style-6/custom/header.jpeg); + background-image: url(../images/style-9/custom/header.jpeg); background-repeat: repeat-x; } diff --git a/src/_sidebar.scss b/src/_sidebar.scss index b8cfc32..e200106 100644 --- a/src/_sidebar.scss +++ b/src/_sidebar.scss @@ -4,14 +4,6 @@ @use 'common'; @mixin styles { - .boxesSidebarLeft{ - margin-inline-end: 30px; - } - - .boxesSidebarRight { - margin-inline-start: 30px; - } - .boxesSidebarLeft, .boxesSidebarRight { .box { border-radius: 0; @@ -46,14 +38,6 @@ } @media screen and (max-width: 1024px) { - .boxesSidebarLeft{ - margin-inline-end: 0; - } - - .boxesSidebarRight { - margin-inline-start: 0; - } - .boxesSidebarLeft, .boxesSidebarRight { .box { border-radius: 0; diff --git a/src/dark.scss b/src/dark.scss index 060f4ba..6013f6e 100644 --- a/src/dark.scss +++ b/src/dark.scss @@ -4,4 +4,10 @@ @use 'core'; @use 'common'; +@use 'footer'; +@use 'badge'; + @include core.styles--dark; + +@include footer.styles--dark; +@include badge.styles--dark; -- cgit v1.2.3-70-g09d2