From 99bc6e962af22ac9d343434f61aa24b286892466 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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
(limited to 'src')
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