From 4b9a93628683410c81bb359682ac6b13c94d73ed Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 9 Dec 2024 22:35:52 +0100 Subject: Update --- src/_badge.scss | 15 +++++++++++++++ src/_board.scss | 16 ++++++++++++++++ src/_common.vars.scss | 11 ++++++++--- src/_footer.scss | 9 +++++++++ src/_header.scss | 5 +++++ src/_rank.scss | 5 +++++ src/_sidebar.scss | 30 ++++++++++++++++++++++++++++++ src/light.scss | 6 ++++++ 8 files changed, 94 insertions(+), 3 deletions(-) create mode 100644 src/_badge.scss create mode 100644 src/_footer.scss create mode 100644 src/_rank.scss (limited to 'src') 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 @@ +@use 'iro-sass/src/props'; + +@use 'common'; + +@mixin styles { + .badge, a.badge { + padding-inline: 8px; + border-radius: 10em; + } + + .badge.badgeUpdate, a.badge.badgeUpdate { + --background-color: #{props.get(common.$vlpnLink)}; + --color: #{props.get(common.$vlpnLinkFg)}; + } +} 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 @@ } } + .wbbBoardNode__lastPostAvatar .userAvatarImage { + inline-size: 32px; + block-size: 32px; + } + + .wbbBoardSeparator { + block-size: 1px; + background-color: var(--wcfContentBorderInner); + } + .tabularListColumns { &::before { content: ""; @@ -38,4 +48,10 @@ } } } + + .tabularListRow.divider { + + li:not(.divider) { + border-block-start-width: 3px; + } + } } 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 @@ @use 'core'; $vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000)); +$vlpnLinkFg: props.def(--vlpnLinkFg, props.get(core.$theme, --red, --1000-text)); $vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300)); +$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get(core.$theme, --red, --1300-text)); $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); $wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800)); @@ -19,6 +21,7 @@ $wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800)); $wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75)); +$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100)); $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800)); @@ -33,20 +36,22 @@ $wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$the $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); +$wcfSidebarBackground: props.def(--wcfSidebarBackground, props.get($wcfContentBackground)); $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)); +$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --600)); +$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --600-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); +$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground)); + $wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink)); $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive)); 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 @@ +@mixin styles { + .boxesFooterBoxes { + a { + &:hover { + text-decoration: underline; + } + } + } +} 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 @@ padding-block: 0; } } + + .userPanel > ul > li > a > fa-icon { + --font-size: 18px; + --icon-size: 24px; + } } 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 @@ +@mixin styles { + .userRankImage > img { + vertical-align: bottom; + } +} 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 @@ } } } + + a { + &:hover { + text-decoration: underline; + } + } + } + + @media screen and (min-width: 545px) and (max-width: 1024px) { + .boxesSidebarLeft{ + margin-inline-end: 0; + } + + .boxesSidebarRight { + margin-inline-start: 0; + } + + .boxesSidebarLeft, .boxesSidebarRight { + .box { + border-radius: 0; + + &:not(:first-child) { + padding-start: 20px 10px; + + &::before { + display: none; + } + } + } + } } } 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 @@ @use 'sidebar'; @use 'board'; @use 'avatar'; +@use 'badge'; +@use 'rank'; +@use 'footer'; @include core.styles--light; @include common.styles; @@ -16,3 +19,6 @@ @include sidebar.styles; @include board.styles; @include avatar.styles; +@include badge.styles; +@include rank.styles; +@include footer.styles; -- cgit v1.2.3-70-g09d2