From 199f673e94d57e28fd0b235c281ef85f84aa5e51 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 28 Mar 2025 15:06:23 +0100 Subject: New variable organizing --- src/_board.scss | 2 +- src/_core.scss | 6 +- src/_core.vars.scss | 376 ++++++++++++++++++++++++++-------------------------- src/_footer.scss | 2 +- src/_reaction.scss | 4 +- src/_sidebar.scss | 2 +- src/_thread.scss | 11 +- 7 files changed, 202 insertions(+), 201 deletions(-) (limited to 'src') diff --git a/src/_board.scss b/src/_board.scss index eb221d2..994aba6 100644 --- a/src/_board.scss +++ b/src/_board.scss @@ -67,7 +67,7 @@ .messageGroupList { a { &:hover { - text-decoration: underline; + text-decoration-line: underline; } } } diff --git a/src/_core.scss b/src/_core.scss index cfa1e00..c212ee0 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -14,16 +14,14 @@ @mixin styles--classic { :root { + @include props.materialize(map.get(vars.$themes, --light)); @include props.materialize(map.get(vars.$themes, --classic)); - @include props.materialize(map.values(meta.module-variables('vars')), null); - @include props.materialize(map.values(meta.module-variables('vars')), 'classic'); } } @mixin styles--dark { :root { + @include props.materialize(map.get(vars.$themes, --light)); @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 43896f8..5bbe9fb 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -80,21 +80,105 @@ $themes-spec: ( ), --semantic: ( - --bg-l2: --base --50, + --bg-content: --base --50, --bg-l1: --base --75, --bg-base: --base --100, --bg-sidebar: --base --75, - --bg-nav: --base --100, --bg-footer-box: --base --100, --bg-footer: --base --700, --link: ( - --fg: --red --1100, + --fg: --red --1000, --underline: --red --500, - --fg-inv: --red --1100-text, + --fg-inv: --red --1000-text, --active: --red --1300, --active-inv: --red --1300-text, - ) + ), + + --wcfHeaderBackground: --base --700, + --wcfHeaderMenuBackground: --base --800, + --wcfHeaderMenuLinkBackground: --base --800, + --wcfHeaderMenuLinkBackgroundActive: --base --700, + --wcfHeaderMenuLink: --base --50, + --wcfHeaderMenuDropdownBackground: --base --800, + --wcfHeaderMenuDropdownBorder: --base --800, + --wcfHeaderMenuDropdownBackgroundActive: --base --700, + + --wcfNavigationBackground: --base --100, + --wcfNavigationText: --base --500, + --wcfNavigationLink: --base --800, + --wcfNavigationLinkActive: --base --800, + + --wcfHeaderSearchBoxBackground: --base --700, + --wcfHeaderSearchBoxBackgroundActive: --base --700, + + --wcfContentBackground: rgb(242, 242, 242), + --wcfContentBorderInner: rgb(224, 224, 224), + --wcfContentBorder: rgb(224, 224, 224), + --wcfContentDimmedText: rgba(#000, .7), + --wcfContentDimmedLink: rgba(#000, .7), + --wcfContentHeadlineText: --base --900, + + --wcfFooterBoxBackground: --base --100, + --wcfFooterBoxText: --base --800, + --wcfFooterBoxHeadlineText: --base --900, + --wcfFooterBoxHeadlineLink: --base --900, + --wcfFooterBoxHeadlineLinkActive: --base --900, + + --wcfFooterBackground: --base --700, + --wcfFooterText: --base --100, + --wcfFooterLink: --base --75, + --wcfFooterLinkActive: --base --75, + + --wcfFooterCopyrightBackground: --base --800, + --wcfFooterCopyrightText: --base --75, + --wcfFooterCopyrightLink: --base --50, + --wcfFooterCopyrightLinkActive: --base --50, + + --wcfSidebarBackground: --wcfContentBackground, + --wcfSidebarBorder: transparent, + --wcfSidebarHeadlineText: --wcfContentHeadlineText, + --wcfSidebarText: --wcfContentText, + --wcfSidebarDimmedText: --wcfContentDimmedText, + + --wcfButtonBackground: --base --100, + --wcfButtonText: --base --100-text, + --wcfButtonBackgroundActive: --base --700, + --wcfButtonTextActive: --base --700-text, + + --wcfButtonPrimaryBackground: --red --900, + --wcfButtonPrimaryText: --red --900-text, + --wcfButtonPrimaryBackgroundActive: --red --1200, + --wcfButtonPrimaryTextActive: --red --1200-text, + + --wcfInputBorderActive: --red --900, + + --wcfBoxShadowCard: none, + + --wcfContentContainerBackground: --bg-content, + --wcfContentContainerBorder: --wcfContentContainerBackground, + + --wcfContentLink: --link --fg, + --wcfContentLinkActive: --link --active, + + --wcfSidebarLink: --link --fg, + --wcfSidebarLinkActive: --link --active, + --wcfSidebarDimmedLink: --wcfSidebarDimmedText, + --wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText, + + --wcfFooterBoxLink: --link --fg, + --wcfFooterBoxLinkActive: --link --active, + + --wcfTabularBoxHeadline: --link --fg, + --wcfTabularBoxHeadlineActive: --link --active, + + --wcfStatusInfoBackground: --base --100, + --wcfStatusInfoBorder: --base --300, + --wcfStatusInfoText: --base --800, + + --wcfStatusSuccessBackground: --green --100, + --wcfStatusSuccessBorder: --green --300, + --wcfStatusSuccessText: --green --1100, ), ), @@ -158,7 +242,7 @@ $themes-spec: ( ), --semantic: ( - --bg-l2: --base --100, + --bg-content: --base --100, --bg-l1: --base --300, --bg-base: --base --75, --bg-sidebar: --base --100, @@ -168,11 +252,37 @@ $themes-spec: ( --link: ( --fg: --red --1200, - --underline: --red --600, + --underline: --red --700, --fg-inv: --red --1200-text, --active: --red --1300, --active-inv: --red --1300-text, - ) + ), + + --wcfContentBackground: --base --75, + --wcfContentBorderInner: --base --300, + --wcfContentBorder: --base --300, + --wcfContentHeadlineText: --base --900, + --wcfContentDimmedText: --base --700, + --wcfContentDimmedLink: --base --900, + --wcfContentText: --base --800, + + --wcfSidebarBackground: --base --75, + + --wcfTabularBoxBackgroundActive: --base --75, + + --wcfButtonBackground: --base --50, + --wcfButtonText: --base --50-text, + --wcfButtonBackgroundActive: --base --700, + --wcfButtonTextActive: --base --700-text, + + --wcfButtonPrimaryBackground: --red --1000, + --wcfButtonPrimaryText: --red --1000-text, + --wcfButtonPrimaryBackgroundActive: --red --1200, + --wcfButtonPrimaryTextActive: --red --1200-text, + + --wcfStatusSuccessBackground: --green --1000, + --wcfStatusSuccessBorder: --green --1000, + --wcfStatusSuccessText: --green --100, ), ), @@ -222,11 +332,68 @@ $themes-spec: ( --semantic: ( --bg-base: --base --75, --bg-l1: --base --100, - --bg-l2: --base --200, + --bg-content: --base --200, --bg-sidebar: --base --100, --bg-nav: --base --75, --bg-footer-box: --base --75, --bg-footer: --base --75, + + --wcfHeaderBackground: --bg-base, + --wcfHeaderMenuBackground: --base --50, + --wcfHeaderMenuLinkBackground: --base --50, + --wcfHeaderMenuLinkBackgroundActive: --base --200, + --wcfHeaderMenuLink: --base --900, + --wcfHeaderMenuDropdownBackground: --base --50, + --wcfHeaderMenuDropdownBorder: --base --50, + --wcfHeaderMenuDropdownBackgroundActive: --base --200, + + --wcfNavigationBackground: --bg-base, + --wcfNavigationText: --base --500, + --wcfNavigationLink: --base --800, + --wcfNavigationLinkActive: --base --800, + + --wcfContentBackground: --base --100, + --wcfContentBorderInner: --base --300, + --wcfContentBorder: --wcfContentBorderInnerDark, + --wcfContentDimmedText: --base --600, + --wcfContentDimmedLink: --base --900, + --wcfContentText: --base --800, + + --wcfFooterText: --base --500, + --wcfFooterLink: --base --700, + --wcfFooterLinkActive: --base --700, + + --wcfFooterCopyrightBackground: --base --50, + --wcfFooterCopyrightText: --base --500, + --wcfFooterCopyrightLink: --base --700, + --wcfFooterCopyrightLinkActive: --base --700, + + --wcfButtonBackground: --base --300, + --wcfButtonText: --base --300-text, + --wcfButtonBackgroundActive: --base --700, + --wcfButtonTextActive: --base --700-text, + + --wcfButtonPrimaryBackground: --red --900, + --wcfButtonPrimaryText: --red --900-text, + --wcfButtonPrimaryBackgroundActive: --red --1200, + --wcfButtonPrimaryTextActive: --red --1200-text, + + --wcfContentContainerBackground: --base --200, + --wcfContentContainerBorder: --wcfContentContainerBackgroundDark, + + --wcfSidebarBackground: --wcfContentBackground, + --wcfSidebarBorder: transparent, + --wcfSidebarLink: --link --fg, + --wcfSidebarLinkActive: --link --active, + --wcfSidebarText: --wcfContentTextDark, + --wcfSidebarDimmedLink: --wcfSidebarDimmedText, + --wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText, + + --wcfTabularBoxBackgroundActive: --base --100, + + --wcfStatusInfoBackground: --base --100, + --wcfStatusInfoBorder: --base --300, + --wcfStatusInfoText: --base --800, ), ) ); @@ -234,7 +401,7 @@ $themes-spec: ( $themes: (); @each $theme-name, $theme in $themes-spec { - $compiled: props.def(--colors, (), 'color'); + $compiled: props.def('', (), 'color'); @each $palette-name, $palette in map.get($theme, --palettes) { $base-color: list.nth($palette, 1); @@ -251,12 +418,22 @@ $themes: (); @each $key, $r in $ref { $re1: list.nth($r, 1); $re2: functions.list-slice($r, 2); - $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); + + @if meta.type-of($re1) == 'color' { + $res: map.merge($res, ($key: $re1)); + } @else { + $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); + } } } @else { $ref1: list.nth($ref, 1); $ref2: functions.list-slice($ref, 2); - $res: props.get($compiled, $ref1, $ref2...); + + @if meta.type-of($ref1) == 'color' { + $res: $ref1; + } @else { + $res: props.get($compiled, $ref1, $ref2...); + } } $compiled: props.merge($compiled, ( $color: $res )); @@ -266,178 +443,3 @@ $themes: (); } $theme: map.get($themes, --light); - -// - -$vlpnLink: props.def(--vlpnLink, props.get($theme, --link, --fg)); -$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get($theme, --link, --underline)); -$vlpnLinkFg: props.def(--vlpnLinkFg, props.get($theme, --link, --fg-inv)); -$vlpnLinkActive: props.def(--vlpnLinkActive, props.get($theme, --link, --active)); -$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get($theme, --link, --active-inv)); - -$vlpnSmileySize: props.def(--vlpnSmileySize, 28px); - -$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px); - -$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get($theme, --base, --700)); -$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --800)); -$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --800)); -$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --700)); -$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --800)); -$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800)); -$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700)); - -$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-nav)); -$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500)); -$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800)); -$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800)); - -$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242)); -$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); -$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7)); -$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7)); -$wcfContentHeadlineText: props.def(--wcfContentHeadlineText, props.get($theme, --base, --900)); - -$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-footer-box)); -$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800)); -$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxHeadlineText, props.get($theme, --base, --900)); -$wcfFooterBoxHeadlineLink: props.def(--wcfFooterBoxHeadlineLink, props.get($theme, --base, --900)); -$wcfFooterBoxHeadlineLinkActive: props.def(--wcfFooterBoxHeadlineLinkActive, props.get($theme, --base, --900)); - -$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --bg-footer)); -$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100)); -$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75)); -$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75)); - -$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --800)); -$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --75)); -$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --50)); -$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50)); - -$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); -$wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent); -$wcfSidebarHeadlineText: props.def(--wcfSidebarHeadlineText, props.get($wcfContentHeadlineText)); -$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); - -$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); -$wcfButtonText: props.def(--wcfButtonText, props.get($theme, --base, --100-text)); -$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700)); -$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text)); - -$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900)); -$wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text)); -$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200)); -$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text)); - -$wcfInputBorderActive: props.def(--wcfInputBorderActive, props.get($theme, --red, --900)); - -$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); - -$wcfContentContainerBackground: props.def(--wcfContentContainerBackground, props.get($theme, --bg-l2)); -$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground)); - -$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink)); -$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive)); - -$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)); - -$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink)); -$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive)); - -$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100)); -$wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300)); -$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800)); - -$wcfStatusSuccessBackground: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --100)); -$wcfStatusSuccessBorder: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --300)); -$wcfStatusSuccessText: props.def(--wcfStatusSuccessText, props.get($theme, --green, --1100)); - -// - -$wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic'); -$wcfContentBorderInnerClassic: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'classic'); -$wcfContentHeadlineTextClassic: props.def(--wcfContentHeadlineText, props.get($theme, --base, --900), 'classic'); -$wcfContentDimmedTextClassic: props.def(--wcfContentDimmedText, props.get($theme, --base, --700), 'classic'); -$wcfContentDimmedLinkClassic: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'classic'); -$wcfContentTextClassic: props.def(--wcfContentText, props.get($theme, --base, --800), 'classic'); - -$wcfSidebarBackgroundClassic: props.def(--wcfSidebarBackground, props.get($theme, --base, --75), 'classic'); - -$wcfTabularBoxBackgroundActiveClassic: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --75), 'classic'); - -$wcfButtonBackgroundClassic: props.def(--wcfButtonBackground, props.get($theme, --base, --50), 'classic'); -$wcfButtonTextClassic: props.def(--wcfButtonText, props.get($theme, --base, --50-text), 'classic'); -$wcfButtonBackgroundActiveClassic: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'classic'); -$wcfButtonTextActiveClassic: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'classic'); - -$wcfButtonPrimaryBackgroundClassic: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --1000), 'classic'); -$wcfButtonPrimaryTextClassic: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --1000-text), 'classic'); -$wcfButtonPrimaryBackgroundActiveClassic: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'classic'); -$wcfButtonPrimaryTextActiveClassic: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'classic'); - -$wcfStatusSuccessBackgroundClassic: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --1000), 'classic'); -$wcfStatusSuccessBorderClassic: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --1000), 'classic'); -$wcfStatusSuccessTextClassic: props.def(--wcfStatusSuccessText, props.get($theme, --green, --100), 'classic'); - -// - -$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, props.get($theme, --base, --100), 'dark'); -$wcfContentBorderInnerDark: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'dark'); -$wcfContentBorderDark: props.def(--wcfContentBorder, props.get($wcfContentBorderInnerDark), 'dark'); -$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, --base, --600), 'dark'); -$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark'); -$wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), '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'); - -$wcfSidebarBackgroundDark: props.def(--wcfSidebarBackground, $wcfContentBackground, 'dark'); -$wcfSidebarBorderDark: props.def(--wcfSidebarBorder, 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'); - -$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark'); - -$wcfStatusInfoBackgroundDark: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100), 'dark'); -$wcfStatusInfoBorderDark: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300), 'dark'); -$wcfStatusInfoTextDark: props.def(--wcfStatusInfoText, props.get($theme, --base, --800), 'dark'); diff --git a/src/_footer.scss b/src/_footer.scss index 54a0500..77a3e7b 100644 --- a/src/_footer.scss +++ b/src/_footer.scss @@ -2,7 +2,7 @@ .boxesFooterBoxes { a { &:hover { - text-decoration: underline; + text-decoration-line: underline; } } } diff --git a/src/_reaction.scss b/src/_reaction.scss index ecf88ad..56d719e 100644 --- a/src/_reaction.scss +++ b/src/_reaction.scss @@ -5,8 +5,8 @@ @mixin styles { .messageFooter { .reactionType { - inline-size: props.get(core.$vlpnSmileySize); - block-size: props.get(core.$vlpnSmileySize); + inline-size: 28px; + block-size: 28px; } } diff --git a/src/_sidebar.scss b/src/_sidebar.scss index 8c74988..5ddb188 100644 --- a/src/_sidebar.scss +++ b/src/_sidebar.scss @@ -28,7 +28,7 @@ a { &:hover { - text-decoration: underline; + text-decoration-line: underline; } } } diff --git a/src/_thread.scss b/src/_thread.scss index c602a87..e4feb1c 100644 --- a/src/_thread.scss +++ b/src/_thread.scss @@ -10,7 +10,7 @@ .messageSidebar { a:hover { - text-decoration: underline; + text-decoration-line: underline; } .username { @@ -21,17 +21,18 @@ .messageText, .messageSignature { a { - text-decoration: underline; - text-decoration-color: props.get(core.$vlpnLinkUnderline); + text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-color: props.get(core.$theme, --link, --underline); } a:hover { - text-decoration: underline; + text-decoration-line: underline; text-decoration-color: currentColor; } } .quoteBoxTitle a { - text-decoration: none; + text-decoration-line: none; } } -- cgit v1.2.3-70-g09d2