summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-12-10 17:12:20 +0100
committerVolpeon <git@volpeon.ink>2024-12-10 17:12:20 +0100
commita9888043fcd37389e1e14e65eb2b3ab7b4a708bb (patch)
tree24da08a3f54627641adb9102267a02ebfcbff435 /src
parentRefactoring (diff)
downloadfurbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.tar.gz
furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.tar.bz2
furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.zip
Dark mode mainly
Diffstat (limited to 'src')
-rw-r--r--src/_badge.scss14
-rw-r--r--src/_board.scss4
-rw-r--r--src/_core.scss1
-rw-r--r--src/_core.vars.scss183
-rw-r--r--src/_footer.scss6
-rw-r--r--src/_header.scss2
-rw-r--r--src/_sidebar.scss16
-rw-r--r--src/dark.scss6
8 files changed, 154 insertions, 78 deletions
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 @@
19 } 19 }
20 } 20 }
21} 21}
22
23@mixin styles--dark {
24 .badge, a.badge {
25 &.badgeUpdate {
26 --background-color: #{props.get(core.$theme, --red, --400)};
27 --color: #{props.get(core.$theme, --red, --400-text)};
28 }
29
30 &.yellow {
31 --background-color: #{props.get(core.$theme, --yellow, --800)};
32 --color: #{props.get(core.$theme, --yellow, --800-text)};
33 }
34 }
35}
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 @@
4 4
5@mixin styles { 5@mixin styles {
6 .wbbBoardNode__unreadIcon { 6 .wbbBoardNode__unreadIcon {
7 background-image: url(../images/style-6/custom/boardNewM.png); 7 background-image: url(../images/style-9/custom/boardNewM.png);
8 background-position: center center; 8 background-position: center center;
9 background-repeat: no-repeat; 9 background-repeat: no-repeat;
10 10
@@ -14,7 +14,7 @@
14 } 14 }
15 15
16 .wbbBoardNode__defaultIcon { 16 .wbbBoardNode__defaultIcon {
17 background-image: url(../images/style-6/custom/boardM.png); 17 background-image: url(../images/style-9/custom/boardM.png);
18 background-position: center center; 18 background-position: center center;
19 background-repeat: no-repeat; 19 background-repeat: no-repeat;
20 20
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 @@
15@mixin styles--dark { 15@mixin styles--dark {
16 :root { 16 :root {
17 @include props.materialize(map.get(vars.$themes, --dark)); 17 @include props.materialize(map.get(vars.$themes, --dark));
18 @include props.materialize(map.values(meta.module-variables('vars')), null);
18 @include props.materialize(map.values(meta.module-variables('vars')), 'dark'); 19 @include props.materialize(map.values(meta.module-variables('vars')), 'dark');
19 } 20 }
20} 21}
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 @@
7@use 'iro-sass/src/functions'; 7@use 'iro-sass/src/functions';
8@use 'iro-design/src/functions' as fn; 8@use 'iro-design/src/functions' as fn;
9 9
10@function light-bezier($x) {
11 @return easing.cubic-bezier(.3, .1, .7, 1, $x);
12}
13
14@function dark-bezier($x) {
15 @return easing.cubic-bezier(.3, .1, .7, 1, $x);
16}
17
10$themes-spec: ( 18$themes-spec: (
11 --light: ( 19 --light: (
12 --levels: ( 20 --levels: (
13 --grays: ( 21 --grays: (
14 --50: (-30) .1 0, 22 --50: -30 .1 0,
15 --75: (-16) .3 0, 23 --75: -16 .3 0,
16 --100: (0) .5 0, 24 --100: 0 .5 0,
17 25
18 --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)), 26 --200: (light-bezier(math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
19 --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)), 27 --300: (light-bezier(math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)),
20 --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)), 28 --400: (light-bezier(math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)),
21 29
22 --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)), 30 --500: (light-bezier(math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
23 --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)), 31 --600: (light-bezier(math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
24 --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)), 32 --700: (light-bezier(math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
25 --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)), 33 --800: (light-bezier(math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
26 --900: #000 34 --900: #000
27 ), 35 ),
28 36
29 --colors: ( 37 --colors: (
30 --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), 38 --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
31 --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), 39 --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
32 --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), 40 --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
33 --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), 41 --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
34 --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), 42 --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
35 --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), 43 --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
36 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), 44 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
37 --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), 45 --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
38 --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), 46 --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
39 --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), 47 --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
40 --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), 48 --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
41 --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), 49 --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
42 --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), 50 --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: (
68 --dark: ( 76 --dark: (
69 --levels: ( 77 --levels: (
70 --grays: ( 78 --grays: (
71 --50: #000, 79 --50: 1.2 .1 0,
72 --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)), 80 --75: 0.7 .2 0,
73 --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)), 81 --100: 0 .4 0,
74 82
75 --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)), 83 --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 7)),
76 --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)), 84 --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 7)),
77 --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)), 85 --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)),
78 86
79 --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)), 87 --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 7)),
80 --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)), 88 --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)),
81 --700: (0) .5 0, 89 --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)),
82 --800: (-16) .3 0, 90 --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)),
83 --900: (-30) .1 0, 91 --900: #fff
84 ), 92 ),
85 93
86 --colors: ( 94 --colors: (
87 --100: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), 95 --100: (math.div(0, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
88 --200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), 96 --200: (math.div(1, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
89 --300: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), 97 --300: (math.div(2, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
90 --400: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), 98 --400: (math.div(3, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
91 --500: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), 99 --500: (math.div(4, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
92 --600: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), 100 --600: (math.div(5, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
93 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), 101 --700: (math.div(6, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
94 --800: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), 102 --800: (math.div(7, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
95 --900: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), 103 --900: (math.div(8, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
96 --1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), 104 --1000: (math.div(9, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
97 --1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), 105 --1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
98 --1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), 106 --1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
99 --1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), 107 --1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
100 ), 108 ),
101 ), 109 ),
102 110
103 --palettes: ( 111 --palettes: (
104 --base: #edddc4 --grays, 112 --base: #351c0e --grays,
105 --red: oklch(36.32% 0.1302 53.73) --colors, 113 --red: oklch(36.32% 0.1302 53.73) --colors,
106 --blue: oklch(36.32% 0.1302 273.58) --colors, 114 --blue: oklch(36.32% 0.1302 273.58) --colors,
107 --yellow: oklch(36.32% 0.1302 92.94) --colors, 115 --yellow: oklch(36.32% 0.1302 92.94) --colors,
108 ), 116 ),
109 117
110 --semantic: ( 118 --semantic: (
111 --bg-l2: --base --50, 119 --bg-base: --base --75,
112 --bg-l1: --base --75, 120 --bg-l1: --base --100,
113 --bg-base: --base --100, 121 --bg-l2: --base --200,
114 122
115 --link: ( 123 --link: (
116 --fg: --red --1000, 124 --fg: --yellow --1000,
117 --underline: --red --400, 125 --underline: --yellow --400,
118 --fg-inv: --red --1000-text, 126 --fg-inv: --yellow --1000-text,
119 --active: --red --1300, 127 --active: --yellow --1300,
120 --active-inv: --red --1300-text, 128 --active-inv: --yellow --1300-text,
121 ) 129 )
122 ), 130 ),
123 ) 131 )
@@ -186,8 +194,8 @@ $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme,
186 194
187$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242)); 195$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
188$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); 196$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
189$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6)); 197$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7));
190$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6)); 198$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7));
191 199
192$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base)); 200$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
193$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800)); 201$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
@@ -204,6 +212,7 @@ $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, -
204$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50)); 212$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50));
205 213
206$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); 214$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
215$wcfSidebarBorder: props.def(--wcfSidebarBackground, transparent);
207$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); 216$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
208 217
209$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); 218$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
@@ -212,9 +221,9 @@ $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($th
212$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text)); 221$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text));
213 222
214$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900)); 223$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900));
215$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text)); 224$wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text));
216$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200)); 225$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
217$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text)); 226$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text));
218 227
219$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); 228$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
220 229
@@ -225,6 +234,8 @@ $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActi
225 234
226$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink)); 235$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
227$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive)); 236$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
237$wcfSidebarDimmedLink: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText));
238$wcfSidebarDimmedLinkActive: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText));
228 239
229$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink)); 240$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
230$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive)); 241$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
@@ -234,3 +245,57 @@ $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get
234 245
235$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200)); 246$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
236$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200)); 247$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));
248
249//
250
251$wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark');
252$wcfHeaderMenuBackgroundDark: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --50), 'dark');
253$wcfHeaderMenuLinkBackgroundDark: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --50), 'dark');
254$wcfHeaderMenuLinkBackgroundActiveDark: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --200), 'dark');
255$wcfHeaderMenuDropdownBackgroundDark: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --50), 'dark');
256$wcfHeaderMenuDropdownBorderDark: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --50), 'dark');
257$wcfHeaderMenuDropdownBackgroundActiveDark: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --200), 'dark');
258
259$wcfNavigationBackgroundDark: props.def(--wcfNavigationBackground, props.get($theme, --bg-base), 'dark');
260$wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base, --500), 'dark');
261$wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark');
262$wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark');
263
264$wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark');
265$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark');
266$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark');
267$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark');
268
269$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');
270$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');
271$wcfFooterLinkDark: props.def(--wcfFooterLink, props.get($theme, --base, --700), 'dark');
272$wcfFooterLinkActiveDark: props.def(--wcfFooterLinkActive, props.get($theme, --base, --700), 'dark');
273
274$wcfFooterCopyrightBackgroundDark: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --50), 'dark');
275$wcfFooterCopyrightTextDark: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --500), 'dark');
276$wcfFooterCopyrightLinkDark: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --700), 'dark');
277$wcfFooterCopyrightLinkActiveDark: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --700), 'dark');
278
279$wcfButtonBackgroundDark: props.def(--wcfButtonBackground, props.get($theme, --base, --300), 'dark');
280$wcfButtonTextDark: props.def(--wcfButtonText, props.get($theme, --base, --300-text), 'dark');
281$wcfButtonBackgroundActiveDark: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'dark');
282$wcfButtonTextActiveDark: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'dark');
283
284$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900), 'dark');
285$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text), 'dark');
286$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'dark');
287$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'dark');
288
289$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark');
290$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark');
291
292$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark');
293$wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark');
294$wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark');
295$wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
296$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
297
298$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark');
299$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark');
300$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark');
301$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 @@
7 } 7 }
8 } 8 }
9} 9}
10
11@mixin styles--dark {
12 .pageFooter {
13 border-block-start: 1px solid rgba(#fff, .1);
14 }
15}
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 @@
1@mixin styles { 1@mixin styles {
2 .pageHeader { 2 .pageHeader {
3 background-image: url(../images/style-6/custom/header.jpeg); 3 background-image: url(../images/style-9/custom/header.jpeg);
4 background-repeat: repeat-x; 4 background-repeat: repeat-x;
5 } 5 }
6 6
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 @@
4@use 'common'; 4@use 'common';
5 5
6@mixin styles { 6@mixin styles {
7 .boxesSidebarLeft{
8 margin-inline-end: 30px;
9 }
10
11 .boxesSidebarRight {
12 margin-inline-start: 30px;
13 }
14
15 .boxesSidebarLeft, .boxesSidebarRight { 7 .boxesSidebarLeft, .boxesSidebarRight {
16 .box { 8 .box {
17 border-radius: 0; 9 border-radius: 0;
@@ -46,14 +38,6 @@
46 } 38 }
47 39
48 @media screen and (max-width: 1024px) { 40 @media screen and (max-width: 1024px) {
49 .boxesSidebarLeft{
50 margin-inline-end: 0;
51 }
52
53 .boxesSidebarRight {
54 margin-inline-start: 0;
55 }
56
57 .boxesSidebarLeft, .boxesSidebarRight { 41 .boxesSidebarLeft, .boxesSidebarRight {
58 .box { 42 .box {
59 border-radius: 0; 43 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 @@
4@use 'core'; 4@use 'core';
5@use 'common'; 5@use 'common';
6 6
7@use 'footer';
8@use 'badge';
9
7@include core.styles--dark; 10@include core.styles--dark;
11
12@include footer.styles--dark;
13@include badge.styles--dark;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-31 16:12:14 +0000