summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-12-09 18:48:23 +0100
committerVolpeon <git@volpeon.ink>2024-12-09 18:48:23 +0100
commit99bc6e962af22ac9d343434f61aa24b286892466 (patch)
tree96ef2f5929528bd820905e401df536f93f1b9c8a /src
parentInit (diff)
downloadfurbase-design-2024-99bc6e962af22ac9d343434f61aa24b286892466.tar.gz
furbase-design-2024-99bc6e962af22ac9d343434f61aa24b286892466.tar.bz2
furbase-design-2024-99bc6e962af22ac9d343434f61aa24b286892466.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_avatar.scss5
-rw-r--r--src/_board.scss21
-rw-r--r--src/_common.vars.scss52
-rw-r--r--src/_core.vars.scss37
-rw-r--r--src/_sidebar.scss32
-rw-r--r--src/light.scss6
6 files changed, 143 insertions, 10 deletions
diff --git a/src/_avatar.scss b/src/_avatar.scss
new file mode 100644
index 0000000..767ca38
--- /dev/null
+++ b/src/_avatar.scss
@@ -0,0 +1,5 @@
1@mixin styles {
2 .userAvatarImage {
3 border-radius: 20%;
4 }
5}
diff --git a/src/_board.scss b/src/_board.scss
new file mode 100644
index 0000000..6a4244e
--- /dev/null
+++ b/src/_board.scss
@@ -0,0 +1,21 @@
1@mixin styles {
2 .wbbBoardNode__unreadIcon {
3 background-image: url(../images/style-6/custom/boardNewM.png);
4 background-position: center center;
5 background-repeat: no-repeat;
6
7 fa-icon {
8 visibility: hidden;
9 }
10 }
11
12 .wbbBoardNode__defaultIcon {
13 background-image: url(../images/style-6/custom/boardM.png);
14 background-position: center center;
15 background-repeat: no-repeat;
16
17 fa-icon {
18 visibility: hidden;
19 }
20 }
21}
diff --git a/src/_common.vars.scss b/src/_common.vars.scss
index 36008f9..47c32d5 100644
--- a/src/_common.vars.scss
+++ b/src/_common.vars.scss
@@ -2,7 +2,59 @@
2 2
3@use 'core'; 3@use 'core';
4 4
5$vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000));
6$vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300));
7
5$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); 8$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600));
6$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800)); 9$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800));
7$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get(core.$theme, --base, --800)); 10$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get(core.$theme, --base, --800));
8$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get(core.$theme, --base, --700)); 11$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get(core.$theme, --base, --700));
12$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get(core.$theme, --base, --800));
13$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get(core.$theme, --base, --800));
14$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get(core.$theme, --base, --700));
15
16$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get(core.$theme, --base, --100));
17$wcfNavigationText: props.def(--wcfNavigationText, props.get(core.$theme, --base, --500));
18$wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base, --800));
19$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800));
20
21$wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75));
22
23$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100));
24$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800));
25
26$wcfFooterBackground: props.def(--wcfFooterBackground, props.get(core.$theme, --base, --700));
27$wcfFooterText: props.def(--wcfFooterText, props.get(core.$theme, --base, --100));
28$wcfFooterLink: props.def(--wcfFooterLink, props.get(core.$theme, --base, --75));
29$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get(core.$theme, --base, --75));
30
31$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get(core.$theme, --base, --800));
32$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$theme, --base, --75));
33$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50));
34$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50));
35
36$wcfSidebarBackground: props.def(--wcfSidebarBackground, transparent);
37
38$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200));
39$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text));
40$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500));
41$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text));
42
43$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --500));
44$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --500-text));
45$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --base, --800));
46$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --base, --800-text));
47
48$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
49
50$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
51$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
52
53$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
54$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
55
56$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
57$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
58
59$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
60$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 65ebb65..40f98b0 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -9,24 +9,41 @@ $themes-spec: (
9 --light: ( 9 --light: (
10 --levels: ( 10 --levels: (
11 --grays: ( 11 --grays: (
12 --50: (-16) .8 0, 12 --50: (-30) .1 0,
13 --75: (-8) .9 0, 13 --75: (-16) .3 0,
14 --100: (0) 1 0, 14 --100: (0) .5 0,
15 15
16 --200: (easing.cubic-bezier(.2, .1, .7, 1, math.div(1, 7)) * 87) (1 + 1 * math.div(1, 7)) (-30 * math.div(1, 7)), 16 --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)),
17 --300: (easing.cubic-bezier(.2, .1, .7, 1, math.div(2, 7)) * 87) (1 + 1 * math.div(2, 7)) (-30 * math.div(2, 7)), 17 --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)),
18 --400: (easing.cubic-bezier(.2, .1, .7, 1, math.div(3, 7)) * 87) (1 + 1 * math.div(3, 7)) (-30 * math.div(3, 7)), 18 --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)),
19 19
20 --500: (easing.cubic-bezier(.2, .1, .7, 1, math.div(4, 7)) * 87) (1 + 1 * math.div(4, 7)) (-30 * math.div(4, 7)), 20 --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)),
21 --600: (easing.cubic-bezier(.2, .1, .7, 1, math.div(5, 7)) * 87) (1 + 1 * math.div(5, 7)) (-30 * math.div(5, 7)), 21 --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)),
22 --700: (easing.cubic-bezier(.2, .1, .7, 1, math.div(6, 7)) * 87) (1 + 1 * math.div(6, 7)) (-30 * math.div(6, 7)), 22 --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)),
23 --800: (easing.cubic-bezier(.2, .1, .7, 1, math.div(7, 7)) * 87) (1 + 1 * math.div(7, 7)) (-30 * math.div(7, 7)), 23 --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)),
24 --900: #000 24 --900: #000
25 ), 25 ),
26
27 --colors: (
28 --100: (math.div(0, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
29 --200: (math.div(1, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
30 --300: (math.div(2, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
31 --400: (math.div(3, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
32 --500: (math.div(4, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
33 --600: (math.div(5, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
34 --700: (math.div(6, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
35 --800: (math.div(7, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
36 --900: (math.div(8, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
37 --1000: (math.div(9, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
38 --1100: (math.div(10, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
39 --1200: (math.div(11, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
40 --1300: (math.div(12, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
41 ),
26 ), 42 ),
27 43
28 --palettes: ( 44 --palettes: (
29 --base: #edddc4 --grays, 45 --base: #edddc4 --grays,
46 --red: #731601 --colors,
30 ), 47 ),
31 ), 48 ),
32); 49);
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
new file mode 100644
index 0000000..d220678
--- /dev/null
+++ b/src/_sidebar.scss
@@ -0,0 +1,32 @@
1@use 'iro-sass/src/props';
2
3@use 'core';
4
5@mixin styles {
6 .boxesSidebarLeft{
7 margin-inline-end: 30px;
8 }
9
10 .boxesSidebarRight {
11 margin-inline-start: 30px;
12 }
13
14 .boxesSidebarLeft, .boxesSidebarRight {
15 .box {
16 border-radius: 0;
17
18 &:not(:first-child) {
19 margin-block-start: 0;
20 padding-block-start: 10px;
21
22 &::before {
23 content: "";
24 display: block;
25 block-size: 1px;
26 margin-block-end: 30px;
27 background-color: props.get(core.$theme, --base, --200);
28 }
29 }
30 }
31 }
32}
diff --git a/src/light.scss b/src/light.scss
index 2f9abdc..4ab586a 100644
--- a/src/light.scss
+++ b/src/light.scss
@@ -5,8 +5,14 @@
5@use 'common'; 5@use 'common';
6 6
7@use 'header'; 7@use 'header';
8@use 'sidebar';
9@use 'board';
10@use 'avatar';
8 11
9@include core.styles--light; 12@include core.styles--light;
10@include common.styles; 13@include common.styles;
11 14
12@include header.styles; 15@include header.styles;
16@include sidebar.styles;
17@include board.styles;
18@include avatar.styles;