diff options
author | Volpeon <git@volpeon.ink> | 2024-12-10 17:12:20 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-12-10 17:12:20 +0100 |
commit | a9888043fcd37389e1e14e65eb2b3ab7b4a708bb (patch) | |
tree | 24da08a3f54627641adb9102267a02ebfcbff435 | |
parent | Refactoring (diff) | |
download | furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.tar.gz furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.tar.bz2 furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.zip |
Dark mode mainly
-rw-r--r-- | src/_badge.scss | 14 | ||||
-rw-r--r-- | src/_board.scss | 4 | ||||
-rw-r--r-- | src/_core.scss | 1 | ||||
-rw-r--r-- | src/_core.vars.scss | 183 | ||||
-rw-r--r-- | src/_footer.scss | 6 | ||||
-rw-r--r-- | src/_header.scss | 2 | ||||
-rw-r--r-- | src/_sidebar.scss | 16 | ||||
-rw-r--r-- | src/dark.scss | 6 |
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; | ||