From 199f673e94d57e28fd0b235c281ef85f84aa5e51 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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(-)
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