From a78c6ef282e63efc94d09d65541e3cab49d47765 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Dec 2024 09:37:25 +0100 Subject: Update --- src/_badge.scss | 15 +++++++++++---- src/_common.vars.scss | 5 +++++ src/_core.vars.scss | 30 ++++++++++++++++-------------- src/_gallery.scss | 5 +++++ src/_rank.scss | 2 +- src/_reaction.scss | 12 ++++++++---- src/light.scss | 2 ++ 7 files changed, 48 insertions(+), 23 deletions(-) create mode 100644 src/_gallery.scss diff --git a/src/_badge.scss b/src/_badge.scss index b13dbc9..f18a9fb 100644 --- a/src/_badge.scss +++ b/src/_badge.scss @@ -1,15 +1,22 @@ @use 'iro-sass/src/props'; @use 'common'; +@use 'core'; @mixin styles { .badge, a.badge { padding-inline: 8px; border-radius: 10em; - } + vertical-align: baseline; - .badge.badgeUpdate, a.badge.badgeUpdate { - --background-color: #{props.get(common.$vlpnLink)}; - --color: #{props.get(common.$vlpnLinkFg)}; + &.badgeUpdate { + --background-color: #{props.get(common.$vlpnLink)}; + --color: #{props.get(common.$vlpnLinkFg)}; + } + + &.yellow { + --background-color: #{props.get(core.$theme, --yellow, --800)}; + --color: #{props.get(core.$theme, --yellow, --800-text)}; + } } } diff --git a/src/_common.vars.scss b/src/_common.vars.scss index 7b3116b..d01b17a 100644 --- a/src/_common.vars.scss +++ b/src/_common.vars.scss @@ -10,6 +10,8 @@ $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)); +$vlpnSmileySize: props.def(--vlpnSmileySize, 28px); + $wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px); $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --700)); @@ -72,3 +74,6 @@ $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLink $wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink)); $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive)); + +$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get(core.$theme, --blue, --200)); +$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get(core.$theme, --blue, --1200)); diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 40f98b0..3c6aba8 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -25,25 +25,27 @@ $themes-spec: ( ), --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))), + --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), + --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), + --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), + --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), + --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), + --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), + --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), + --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), + --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), + --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), + --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), + --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), + --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), ), ), --palettes: ( --base: #edddc4 --grays, - --red: #731601 --colors, + --red: oklch(36.32% 0.1302 53.73) --colors, + --blue: oklch(36.4% 0.1302 273.58) --colors, + --yellow: oklch(36.32% 0.1302 92.94) --colors, ), ), ); diff --git a/src/_gallery.scss b/src/_gallery.scss new file mode 100644 index 0000000..c436309 --- /dev/null +++ b/src/_gallery.scss @@ -0,0 +1,5 @@ +@mixin styles { + .galleryNewImageBadge { + box-shadow: none; + } +} diff --git a/src/_rank.scss b/src/_rank.scss index fac2663..cd6e3cd 100644 --- a/src/_rank.scss +++ b/src/_rank.scss @@ -1,5 +1,5 @@ @mixin styles { .userRankImage > img { - + vertical-align: baseline; } } diff --git a/src/_reaction.scss b/src/_reaction.scss index 82a9231..1e09849 100644 --- a/src/_reaction.scss +++ b/src/_reaction.scss @@ -1,12 +1,16 @@ - @mixin styles { +@use 'iro-sass/src/props'; + +@use 'common'; + +@mixin styles { .messageFooter { .reactionType { - inline-size: 30px; - block-size: 30px; + inline-size: props.get(common.$vlpnSmileySize); + block-size: props.get(common.$vlpnSmileySize); } } .reactionSummary { gap: 15px; } - } +} diff --git a/src/light.scss b/src/light.scss index 87ba99f..325a0c6 100644 --- a/src/light.scss +++ b/src/light.scss @@ -13,6 +13,7 @@ @use 'rank'; @use 'reaction'; @use 'footer'; +@use 'gallery'; @include core.styles--light; @include common.styles; @@ -26,3 +27,4 @@ @include rank.styles; @include reaction.styles; @include footer.styles; +@include gallery.styles; -- cgit v1.2.3-70-g09d2