From 99bc6e962af22ac9d343434f61aa24b286892466 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 9 Dec 2024 18:48:23 +0100 Subject: Update --- src/_avatar.scss | 5 +++++ src/_board.scss | 21 +++++++++++++++++++++ src/_common.vars.scss | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/_core.vars.scss | 37 ++++++++++++++++++++++++++---------- src/_sidebar.scss | 32 +++++++++++++++++++++++++++++++ src/light.scss | 6 ++++++ 6 files changed, 143 insertions(+), 10 deletions(-) create mode 100644 src/_avatar.scss create mode 100644 src/_board.scss create mode 100644 src/_sidebar.scss 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 @@ +@mixin styles { + .userAvatarImage { + border-radius: 20%; + } +} 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 @@ +@mixin styles { + .wbbBoardNode__unreadIcon { + background-image: url(../images/style-6/custom/boardNewM.png); + background-position: center center; + background-repeat: no-repeat; + + fa-icon { + visibility: hidden; + } + } + + .wbbBoardNode__defaultIcon { + background-image: url(../images/style-6/custom/boardM.png); + background-position: center center; + background-repeat: no-repeat; + + fa-icon { + visibility: hidden; + } + } +} 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 @@ @use 'core'; +$vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000)); +$vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300)); + $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); $wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800)); $wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get(core.$theme, --base, --800)); $wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get(core.$theme, --base, --700)); +$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get(core.$theme, --base, --800)); +$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get(core.$theme, --base, --800)); +$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get(core.$theme, --base, --700)); + +$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get(core.$theme, --base, --100)); +$wcfNavigationText: props.def(--wcfNavigationText, props.get(core.$theme, --base, --500)); +$wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base, --800)); +$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800)); + +$wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75)); + +$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100)); +$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800)); + +$wcfFooterBackground: props.def(--wcfFooterBackground, props.get(core.$theme, --base, --700)); +$wcfFooterText: props.def(--wcfFooterText, props.get(core.$theme, --base, --100)); +$wcfFooterLink: props.def(--wcfFooterLink, props.get(core.$theme, --base, --75)); +$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get(core.$theme, --base, --75)); + +$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get(core.$theme, --base, --800)); +$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$theme, --base, --75)); +$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50)); +$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50)); + +$wcfSidebarBackground: props.def(--wcfSidebarBackground, transparent); + +$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200)); +$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text)); +$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500)); +$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text)); + +$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --500)); +$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --500-text)); +$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --base, --800)); +$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --base, --800-text)); + +$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); + +$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)); + +$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)); 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: ( --light: ( --levels: ( --grays: ( - --50: (-16) .8 0, - --75: (-8) .9 0, - --100: (0) 1 0, + --50: (-30) .1 0, + --75: (-16) .3 0, + --100: (0) .5 0, - --200: (easing.cubic-bezier(.2, .1, .7, 1, math.div(1, 7)) * 87) (1 + 1 * math.div(1, 7)) (-30 * math.div(1, 7)), - --300: (easing.cubic-bezier(.2, .1, .7, 1, math.div(2, 7)) * 87) (1 + 1 * math.div(2, 7)) (-30 * math.div(2, 7)), - --400: (easing.cubic-bezier(.2, .1, .7, 1, math.div(3, 7)) * 87) (1 + 1 * math.div(3, 7)) (-30 * math.div(3, 7)), + --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)), + --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)), + --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)), - --500: (easing.cubic-bezier(.2, .1, .7, 1, math.div(4, 7)) * 87) (1 + 1 * math.div(4, 7)) (-30 * math.div(4, 7)), - --600: (easing.cubic-bezier(.2, .1, .7, 1, math.div(5, 7)) * 87) (1 + 1 * math.div(5, 7)) (-30 * math.div(5, 7)), - --700: (easing.cubic-bezier(.2, .1, .7, 1, math.div(6, 7)) * 87) (1 + 1 * math.div(6, 7)) (-30 * math.div(6, 7)), - --800: (easing.cubic-bezier(.2, .1, .7, 1, math.div(7, 7)) * 87) (1 + 1 * math.div(7, 7)) (-30 * math.div(7, 7)), + --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)), + --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)), + --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)), + --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)), --900: #000 ), + + --colors: ( + --100: (math.div(0, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), + ), ), --palettes: ( --base: #edddc4 --grays, + --red: #731601 --colors, ), ), ); 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 @@ +@use 'iro-sass/src/props'; + +@use 'core'; + +@mixin styles { + .boxesSidebarLeft{ + margin-inline-end: 30px; + } + + .boxesSidebarRight { + margin-inline-start: 30px; + } + + .boxesSidebarLeft, .boxesSidebarRight { + .box { + border-radius: 0; + + &:not(:first-child) { + margin-block-start: 0; + padding-block-start: 10px; + + &::before { + content: ""; + display: block; + block-size: 1px; + margin-block-end: 30px; + background-color: props.get(core.$theme, --base, --200); + } + } + } + } +} 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 @@ @use 'common'; @use 'header'; +@use 'sidebar'; +@use 'board'; +@use 'avatar'; @include core.styles--light; @include common.styles; @include header.styles; +@include sidebar.styles; +@include board.styles; +@include avatar.styles; -- cgit v1.2.3-70-g09d2