diff options
author | Volpeon <git@volpeon.ink> | 2024-12-09 22:35:52 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-12-09 22:35:52 +0100 |
commit | 4b9a93628683410c81bb359682ac6b13c94d73ed (patch) | |
tree | d2d3e023a68ba7d5c4b6a588cd5c07c1724364aa /src | |
parent | Update (diff) | |
download | furbase-design-2024-4b9a93628683410c81bb359682ac6b13c94d73ed.tar.gz furbase-design-2024-4b9a93628683410c81bb359682ac6b13c94d73ed.tar.bz2 furbase-design-2024-4b9a93628683410c81bb359682ac6b13c94d73ed.zip |
Update
Diffstat (limited to 'src')
-rw-r--r-- | src/_badge.scss | 15 | ||||
-rw-r--r-- | src/_board.scss | 16 | ||||
-rw-r--r-- | src/_common.vars.scss | 11 | ||||
-rw-r--r-- | src/_footer.scss | 9 | ||||
-rw-r--r-- | src/_header.scss | 5 | ||||
-rw-r--r-- | src/_rank.scss | 5 | ||||
-rw-r--r-- | src/_sidebar.scss | 30 | ||||
-rw-r--r-- | src/light.scss | 6 |
8 files changed, 94 insertions, 3 deletions
diff --git a/src/_badge.scss b/src/_badge.scss new file mode 100644 index 0000000..b13dbc9 --- /dev/null +++ b/src/_badge.scss | |||
@@ -0,0 +1,15 @@ | |||
1 | @use 'iro-sass/src/props'; | ||
2 | |||
3 | @use 'common'; | ||
4 | |||
5 | @mixin styles { | ||
6 | .badge, a.badge { | ||
7 | padding-inline: 8px; | ||
8 | border-radius: 10em; | ||
9 | } | ||
10 | |||
11 | .badge.badgeUpdate, a.badge.badgeUpdate { | ||
12 | --background-color: #{props.get(common.$vlpnLink)}; | ||
13 | --color: #{props.get(common.$vlpnLinkFg)}; | ||
14 | } | ||
15 | } | ||
diff --git a/src/_board.scss b/src/_board.scss index 90b2768..7e8be12 100644 --- a/src/_board.scss +++ b/src/_board.scss | |||
@@ -23,6 +23,16 @@ | |||
23 | } | 23 | } |
24 | } | 24 | } |
25 | 25 | ||
26 | .wbbBoardNode__lastPostAvatar .userAvatarImage { | ||
27 | inline-size: 32px; | ||
28 | block-size: 32px; | ||
29 | } | ||
30 | |||
31 | .wbbBoardSeparator { | ||
32 | block-size: 1px; | ||
33 | background-color: var(--wcfContentBorderInner); | ||
34 | } | ||
35 | |||
26 | .tabularListColumns { | 36 | .tabularListColumns { |
27 | &::before { | 37 | &::before { |
28 | content: ""; | 38 | content: ""; |
@@ -38,4 +48,10 @@ | |||
38 | } | 48 | } |
39 | } | 49 | } |
40 | } | 50 | } |
51 | |||
52 | .tabularListRow.divider { | ||
53 | + li:not(.divider) { | ||
54 | border-block-start-width: 3px; | ||
55 | } | ||
56 | } | ||
41 | } | 57 | } |
diff --git a/src/_common.vars.scss b/src/_common.vars.scss index 47c32d5..54066e8 100644 --- a/src/_common.vars.scss +++ b/src/_common.vars.scss | |||
@@ -3,7 +3,9 @@ | |||
3 | @use 'core'; | 3 | @use 'core'; |
4 | 4 | ||
5 | $vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000)); | 5 | $vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000)); |
6 | $vlpnLinkFg: props.def(--vlpnLinkFg, props.get(core.$theme, --red, --1000-text)); | ||
6 | $vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300)); | 7 | $vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300)); |
8 | $vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get(core.$theme, --red, --1300-text)); | ||
7 | 9 | ||
8 | $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); | 10 | $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); |
9 | $wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800)); | 11 | $wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800)); |
@@ -19,6 +21,7 @@ $wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base | |||
19 | $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800)); | 21 | $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800)); |
20 | 22 | ||
21 | $wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75)); | 23 | $wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75)); |
24 | $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); | ||
22 | 25 | ||
23 | $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100)); | 26 | $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100)); |
24 | $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800)); | 27 | $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800)); |
@@ -33,20 +36,22 @@ $wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$the | |||
33 | $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50)); | 36 | $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50)); |
34 | $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50)); | 37 | $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50)); |
35 | 38 | ||
36 | $wcfSidebarBackground: props.def(--wcfSidebarBackground, transparent); | 39 | $wcfSidebarBackground: props.def(--wcfSidebarBackground, props.get($wcfContentBackground)); |
37 | 40 | ||
38 | $wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200)); | 41 | $wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200)); |
39 | $wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text)); | 42 | $wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text)); |
40 | $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500)); | 43 | $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500)); |
41 | $wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text)); | 44 | $wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text)); |
42 | 45 | ||
43 | $wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --500)); | 46 | $wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --600)); |
44 | $wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --500-text)); | 47 | $wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --600-text)); |
45 | $wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --base, --800)); | 48 | $wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --base, --800)); |
46 | $wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --base, --800-text)); | 49 | $wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --base, --800-text)); |
47 | 50 | ||
48 | $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); | 51 | $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); |
49 | 52 | ||
53 | $wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground)); | ||
54 | |||
50 | $wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink)); | 55 | $wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink)); |
51 | $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive)); | 56 | $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive)); |
52 | 57 | ||
diff --git a/src/_footer.scss b/src/_footer.scss new file mode 100644 index 0000000..714a1cf --- /dev/null +++ b/src/_footer.scss | |||
@@ -0,0 +1,9 @@ | |||
1 | @mixin styles { | ||
2 | .boxesFooterBoxes { | ||
3 | a { | ||
4 | &:hover { | ||
5 | text-decoration: underline; | ||
6 | } | ||
7 | } | ||
8 | } | ||
9 | } | ||
diff --git a/src/_header.scss b/src/_header.scss index 1f3abc7..1d601c7 100644 --- a/src/_header.scss +++ b/src/_header.scss | |||
@@ -13,4 +13,9 @@ | |||
13 | padding-block: 0; | 13 | padding-block: 0; |
14 | } | 14 | } |
15 | } | 15 | } |
16 | |||
17 | .userPanel > ul > li > a > fa-icon { | ||
18 | --font-size: 18px; | ||
19 | --icon-size: 24px; | ||
20 | } | ||
16 | } | 21 | } |
diff --git a/src/_rank.scss b/src/_rank.scss new file mode 100644 index 0000000..4cd4c5c --- /dev/null +++ b/src/_rank.scss | |||
@@ -0,0 +1,5 @@ | |||
1 | @mixin styles { | ||
2 | .userRankImage > img { | ||
3 | vertical-align: bottom; | ||
4 | } | ||
5 | } | ||
diff --git a/src/_sidebar.scss b/src/_sidebar.scss index d220678..3d1689a 100644 --- a/src/_sidebar.scss +++ b/src/_sidebar.scss | |||
@@ -28,5 +28,35 @@ | |||
28 | } | 28 | } |
29 | } | 29 | } |
30 | } | 30 | } |
31 | |||
32 | a { | ||
33 | &:hover { | ||
34 | text-decoration: underline; | ||
35 | } | ||
36 | } | ||
37 | } | ||
38 | |||
39 | @media screen and (min-width: 545px) and (max-width: 1024px) { | ||
40 | .boxesSidebarLeft{ | ||
41 | margin-inline-end: 0; | ||
42 | } | ||
43 | |||
44 | .boxesSidebarRight { | ||
45 | margin-inline-start: 0; | ||
46 | } | ||
47 | |||
48 | .boxesSidebarLeft, .boxesSidebarRight { | ||
49 | .box { | ||
50 | border-radius: 0; | ||
51 | |||
52 | &:not(:first-child) { | ||
53 | padding-start: 20px 10px; | ||
54 | |||
55 | &::before { | ||
56 | display: none; | ||
57 | } | ||
58 | } | ||
59 | } | ||
60 | } | ||
31 | } | 61 | } |
32 | } | 62 | } |
diff --git a/src/light.scss b/src/light.scss index 4ab586a..f3115d2 100644 --- a/src/light.scss +++ b/src/light.scss | |||
@@ -8,6 +8,9 @@ | |||
8 | @use 'sidebar'; | 8 | @use 'sidebar'; |
9 | @use 'board'; | 9 | @use 'board'; |
10 | @use 'avatar'; | 10 | @use 'avatar'; |
11 | @use 'badge'; | ||
12 | @use 'rank'; | ||
13 | @use 'footer'; | ||
11 | 14 | ||
12 | @include core.styles--light; | 15 | @include core.styles--light; |
13 | @include common.styles; | 16 | @include common.styles; |
@@ -16,3 +19,6 @@ | |||
16 | @include sidebar.styles; | 19 | @include sidebar.styles; |
17 | @include board.styles; | 20 | @include board.styles; |
18 | @include avatar.styles; | 21 | @include avatar.styles; |
22 | @include badge.styles; | ||
23 | @include rank.styles; | ||
24 | @include footer.styles; | ||