From 35c9e21b382b6cc4c23cc70c84795e641eb9bd9f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Dec 2024 08:56:39 +0100 Subject: Update --- src/_board.scss | 1 + src/_common.scss | 4 ++-- src/_common.vars.scss | 16 +++++++++------- src/_header.scss | 19 ++++++++++++++++++- src/_reaction.scss | 12 ++++++++++++ src/_sidebar.scss | 2 +- src/_thread.scss | 13 ++++++++++++- src/light.scss | 2 ++ 8 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 src/_reaction.scss (limited to 'src') diff --git a/src/_board.scss b/src/_board.scss index 42c29b3..7d54a1c 100644 --- a/src/_board.scss +++ b/src/_board.scss @@ -39,6 +39,7 @@ inline-size: 4px; align-self: stretch; margin-inline-end: 10px; + margin-block: 5px; border-radius: 1em; } diff --git a/src/_common.scss b/src/_common.scss index 1fb1b4a..c8b7ac7 100644 --- a/src/_common.scss +++ b/src/_common.scss @@ -17,9 +17,9 @@ a { &.externalURL { &::after { - content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 448.24495 475.32944' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' style='fill:rgba(0, 0, 0, 0.6)'%3E%3Cg transform='translate(-103.34385,-250.74099)'%3E%3Cpath d='m 362.34591,600.76542 c 1.85533,44.50908 41.88334,140.71565 -47.42641,123.19868 -50.08356,-9.82325 -43.71543,-62.88501 -94.28571,-91.3691 -44.27547,-24.93849 -106.43941,-0.77422 -116.56344,-67.96739 -8.680708,-57.61385 62.53411,-57.45254 101.25015,-65.9717 40.67094,-8.94931 77.25463,-32.61376 119.31921,-9.10013 15.29687,8.55078 18.38485,13.69335 23.50855,27.42529 5.19051,13.91099 13.08775,57.15783 14.19765,83.78435 z' /%3E%3Cpath d='m 220.08554,304.62871 c 25.20461,0.74654 28.03421,44.05659 18.17059,83.99322 -9.8619,39.92972 -41.57472,76.82491 -67.29273,62.95974 -25.71798,-13.86517 -46.4858,-54.86728 -29.43432,-92.1802 17.05149,-37.31291 49.49203,-55.63362 78.55646,-54.77276 z' /%3E%3Cpath d='m 433.18835,257.16951 c 25.03458,9.9586 -9.51054,52.82766 -30.55032,82.68647 -26.55145,37.68073 -61.09715,75.2478 -89.64873,59.757 -28.35911,-15.38638 -42.66295,-81.84832 -0.18797,-116.27884 34.13193,-27.66759 81.43753,-41.65849 120.38702,-26.16463 z' /%3E%3Cpath d='m 520.58168,322.69968 c 19.27491,29.29984 17.85102,66.51049 -1.02595,110.52262 -21.08022,49.14909 -87.89653,64.4922 -117.45413,32.42553 -22.56325,-24.47858 -2.54297,-57.9454 41.82165,-108.08173 29.71755,-33.58373 56.32042,-65.78229 76.65843,-34.86642 z' /%3E%3Cpath d='m 432.0617,621.28699 c -36.11098,-23.76565 -4.16665,-61.24589 27.98825,-85.22793 44.28586,-33.02964 74.64459,-39.17167 86.46652,-14.93478 13.00988,26.67231 -1.15679,59.53949 -18.24241,80.59874 -24.40084,30.07578 -70.56113,36.44578 -96.21236,19.56397 z' /%3E%3C/g%3E%3C/svg%3E%0A"); + content: url("data:image/svg+xml,%3Csvg width='.8em' height='.8em' viewBox='0 0 448.24495 475.32944' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' style='fill:rgba(0, 0, 0, 0.6)'%3E%3Cg transform='translate(-103.34385,-250.74099)'%3E%3Cpath d='m 362.34591,600.76542 c 1.85533,44.50908 41.88334,140.71565 -47.42641,123.19868 -50.08356,-9.82325 -43.71543,-62.88501 -94.28571,-91.3691 -44.27547,-24.93849 -106.43941,-0.77422 -116.56344,-67.96739 -8.680708,-57.61385 62.53411,-57.45254 101.25015,-65.9717 40.67094,-8.94931 77.25463,-32.61376 119.31921,-9.10013 15.29687,8.55078 18.38485,13.69335 23.50855,27.42529 5.19051,13.91099 13.08775,57.15783 14.19765,83.78435 z' /%3E%3Cpath d='m 220.08554,304.62871 c 25.20461,0.74654 28.03421,44.05659 18.17059,83.99322 -9.8619,39.92972 -41.57472,76.82491 -67.29273,62.95974 -25.71798,-13.86517 -46.4858,-54.86728 -29.43432,-92.1802 17.05149,-37.31291 49.49203,-55.63362 78.55646,-54.77276 z' /%3E%3Cpath d='m 433.18835,257.16951 c 25.03458,9.9586 -9.51054,52.82766 -30.55032,82.68647 -26.55145,37.68073 -61.09715,75.2478 -89.64873,59.757 -28.35911,-15.38638 -42.66295,-81.84832 -0.18797,-116.27884 34.13193,-27.66759 81.43753,-41.65849 120.38702,-26.16463 z' /%3E%3Cpath d='m 520.58168,322.69968 c 19.27491,29.29984 17.85102,66.51049 -1.02595,110.52262 -21.08022,49.14909 -87.89653,64.4922 -117.45413,32.42553 -22.56325,-24.47858 -2.54297,-57.9454 41.82165,-108.08173 29.71755,-33.58373 56.32042,-65.78229 76.65843,-34.86642 z' /%3E%3Cpath d='m 432.0617,621.28699 c -36.11098,-23.76565 -4.16665,-61.24589 27.98825,-85.22793 44.28586,-33.02964 74.64459,-39.17167 86.46652,-14.93478 13.00988,26.67231 -1.15679,59.53949 -18.24241,80.59874 -24.40084,30.07578 -70.56113,36.44578 -96.21236,19.56397 z' /%3E%3C/g%3E%3C/svg%3E%0A"); margin-inline-start: .3em; - vertical-align: -.15em; + vertical-align: middle; } } } diff --git a/src/_common.vars.scss b/src/_common.vars.scss index dc81923..7b3116b 100644 --- a/src/_common.vars.scss +++ b/src/_common.vars.scss @@ -5,13 +5,14 @@ $vlpnBg: props.def(--vlpnBg, props.get(core.$theme, --base, --75)); $vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000)); +$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get(core.$theme, --red, --400)); $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)); $wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px); -$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); +$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --700)); $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)); @@ -27,6 +28,7 @@ $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$t $wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242)); $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); $wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6)); +$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6)); $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100)); $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800)); @@ -45,15 +47,15 @@ $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.g $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); -$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200)); -$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text)); +$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --100)); +$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --100-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, --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)); +$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --red, --800)); +$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --red, --800-text)); +$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --red, --1200)); +$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --red, --1200-text)); $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); diff --git a/src/_header.scss b/src/_header.scss index 1d601c7..28448a0 100644 --- a/src/_header.scss +++ b/src/_header.scss @@ -1,8 +1,10 @@ @mixin styles { - .pageHeaderFacade { + .pageHeader { background-image: url(../images/style-6/custom/header.jpeg); background-repeat: repeat-x; + } + .pageHeaderFacade { > .layoutBoundary { padding-block: 0; } @@ -18,4 +20,19 @@ --font-size: 18px; --icon-size: 24px; } + + @media screen and (max-width: 1024px) { + .pageHeaderLogo { + > a { + display: block; + height: auto; + padding-inline-start: 0; + margin-inline-start: -6px; + } + + .pageHeaderLogoSmall { + max-height: 50px; + } + } + } } diff --git a/src/_reaction.scss b/src/_reaction.scss new file mode 100644 index 0000000..82a9231 --- /dev/null +++ b/src/_reaction.scss @@ -0,0 +1,12 @@ + @mixin styles { + .messageFooter { + .reactionType { + inline-size: 30px; + block-size: 30px; + } + } + + .reactionSummary { + gap: 15px; + } + } diff --git a/src/_sidebar.scss b/src/_sidebar.scss index f271885..5957d3a 100644 --- a/src/_sidebar.scss +++ b/src/_sidebar.scss @@ -41,7 +41,7 @@ } } - @media screen and (min-width: 545px) and (max-width: 1024px) { + @media screen and (max-width: 1024px) { .boxesSidebarLeft{ margin-inline-end: 0; } diff --git a/src/_thread.scss b/src/_thread.scss index 012bbf4..5217447 100644 --- a/src/_thread.scss +++ b/src/_thread.scss @@ -18,9 +18,20 @@ } } - .messageContent { + .messageText, + .messageSignature { + a { + text-decoration: underline; + text-decoration-color: props.get(common.$vlpnLinkUnderline); + } + a:hover { text-decoration: underline; + text-decoration-color: currentColor; } } + + .quoteBoxTitle a { + text-decoration: none; + } } diff --git a/src/light.scss b/src/light.scss index 64fd7bd..87ba99f 100644 --- a/src/light.scss +++ b/src/light.scss @@ -11,6 +11,7 @@ @use 'avatar'; @use 'badge'; @use 'rank'; +@use 'reaction'; @use 'footer'; @include core.styles--light; @@ -23,4 +24,5 @@ @include avatar.styles; @include badge.styles; @include rank.styles; +@include reaction.styles; @include footer.styles; -- cgit v1.2.3-70-g09d2