Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-11 14:30:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Update color alpha blending to use Sass color functions

Browse Source 
Port 95111e88e3 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Alan
2025-08-18 09:55:38 -06:00
committed by Claire
parent 9871aeed20
commit 903eefd420
9 changed files with 115 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/flavours/glitch/styles/_mixins.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *;
@mixin fullwidth-gallery {
@@ -32,7 +33,7 @@
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
h4 {
text-transform: uppercase;

16
app/javascript/flavours/glitch/styles/accounts.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *;
@use 'functions' as *;
@@ -161,7 +162,7 @@
.nothing-here {
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
color: $darker-text-color;
font-size: 14px;
font-weight: 500;
@@ -205,8 +206,8 @@
.information-badge,
.simple_form .recommended,
.simple_form .not_recommended {
background-color: rgba($ui-secondary-color, 0.1);
border: 1px solid rgba($ui-secondary-color, 0.5);
background-color: color.change($ui-secondary-color, $alpha: 0.1);
border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
}
.account-role {
@@ -239,8 +240,9 @@
.information-badge {
&.superapp {
background-color: rgba($success-green, 0.1);
border-color: rgba($success-green, 0.5);
color: $success-green;
background-color: color.change($success-green, $alpha: 0.1);
border-color: color.change($success-green, $alpha: 0.5);
}
}
@@ -307,8 +309,8 @@
}
.verified {
border: 1px solid rgba($valid-value-color, 0.5);
background: rgba($valid-value-color, 0.25);
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
background: color.change($valid-value-color, $alpha: 0.25);
a {
color: $valid-value-color;

3
app/javascript/flavours/glitch/styles/admin.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
@use 'sass:math';
@use 'functions' as *;
@use 'variables' as *;
@@ -1276,7 +1277,7 @@ a.name-tag,
}
path:first-child {
fill: rgba($highlight-text-color, 0.25) !important;
fill: color.change($highlight-text-color, $alpha: 0.25) !important;
fill-opacity: 1 !important;
}

125
app/javascript/flavours/glitch/styles/components.scss
View File

@@ -311,7 +311,7 @@
&:active,
&:focus-visible {
color: lighten($action-button-color, 7%);
background-color: rgba($action-button-color, 0.15);
background-color: color.change($action-button-color, $alpha: 0.15);
}
&:focus-visible {
@@ -331,7 +331,7 @@
&:active,
&:focus-visible {
color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
background-color: color.change($lighter-text-color, $alpha: 0.15);
}
&:focus-visible {
@@ -361,14 +361,14 @@
&.overlayed {
box-sizing: content-box;
background: rgba($black, 0.65);
background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter;
color: rgba($white, 0.7);
color: color.change($white, $alpha: 0.7);
border-radius: 4px;
padding: 2px;
&:hover {
background: rgba($black, 0.9);
background: color.change($black, $alpha: 0.9);
}
}
@@ -391,7 +391,7 @@
border-color: $valid-value-color;
color: $valid-value-color;
transition: none;
background-color: rgba($valid-value-color, 0.15);
background-color: color.change($valid-value-color, $alpha: 0.15);
}
}
@@ -411,7 +411,7 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
background-color: color.change($lighter-text-color, $alpha: 0.15);
}
&:focus-visible {
@@ -618,7 +618,7 @@ body > [data-popper-placement] {
&__warning {
color: $inverted-text-color;
background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
@@ -694,7 +694,7 @@ body > [data-popper-placement] {
.spoiler-input__input {
padding: 12px 12px - 5px;
background: rgba($ui-highlight-color, 0.05);
background: color.change($ui-highlight-color, $alpha: 0.05);
color: $highlight-text-color;
}
@@ -1487,7 +1487,7 @@ body > [data-popper-placement] {
.focusable {
&:focus-visible {
outline: 0;
background: rgba($ui-highlight-color, 0.05);
background: color.change($ui-highlight-color, $alpha: 0.05);
box-shadow: inset 0 0 0 2px $ui-button-focus-outline-color;
}
}
@@ -1746,10 +1746,10 @@ body > [data-popper-placement] {
.notification-ungrouped--direct,
.notification-group--direct,
.notification-group--annual-report {
background: rgba($ui-highlight-color, 0.05);
background: color.change($ui-highlight-color, $alpha: 0.05);
&:focus {
background: rgba($ui-highlight-color, 0.1);
background: color.change($ui-highlight-color, $alpha: 0.1);
}
}
@@ -2082,7 +2082,7 @@ body > [data-popper-placement] {
&__domain-pill {
display: inline-flex;
background: rgba($highlight-text-color, 0.2);
background: color.change($highlight-text-color, $alpha: 0.2);
border-radius: 4px;
border: 0;
color: $highlight-text-color;
@@ -2143,7 +2143,7 @@ body > [data-popper-placement] {
&__handle {
border: 2px dashed $highlight-text-color;
background: rgba($highlight-text-color, 0.1);
background: color.change($highlight-text-color, $alpha: 0.1);
padding: 12px 8px;
color: $highlight-text-color;
border-radius: 4px;
@@ -3348,7 +3348,7 @@ a.account__display-name {
.columns-area__panels__pane--overlay {
pointer-events: auto;
background: rgba($base-overlay-background, 0.5);
background: color.change($base-overlay-background, $alpha: 0.5);
z-index: 3;
.columns-area__panels__pane__inner {
@@ -3885,7 +3885,10 @@ a.account__display-name {
border-radius: 10px;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: rgba($base-overlay-background, 0);
-webkit-tap-highlight-color: color.change(
$base-overlay-background,
$alpha: 0
);
-webkit-tap-highlight-color: transparent;
}
@@ -4157,7 +4160,7 @@ input.glitch-setting-text {
cursor: pointer;
& > div {
background: rgba($base-shadow-color, 0.6);
background: color.change($base-shadow-color, $alpha: 0.6);
border-radius: 8px;
padding: 12px 9px;
backdrop-filter: $backdrop-blur-filter;
@@ -4487,7 +4490,7 @@ a.status-card {
z-index: 1;
&.active {
box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3);
&::before {
display: block;
@@ -4503,8 +4506,8 @@ a.status-card {
z-index: 1;
background: radial-gradient(
ellipse,
rgba($ui-highlight-color, 0.23) 0%,
rgba($ui-highlight-color, 0) 60%
color.change($ui-highlight-color, $alpha: 0.23) 0%,
color.change($ui-highlight-color, $alpha: 0) 60%
);
}
}
@@ -4598,7 +4601,7 @@ a.status-card {
&.active {
.column-header__icon {
color: $highlight-text-color;
text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4);
}
}
@@ -4987,7 +4990,7 @@ a.status-card {
font-size: 14px;
&__label {
background-color: rgba($black, 0.45);
background-color: color.change($black, $alpha: 0.45);
backdrop-filter: $backdrop-blur-filter;
border-radius: 8px;
padding: 12px 16px;
@@ -5007,7 +5010,7 @@ a.status-card {
&:hover,
&:focus {
.spoiler-button__overlay__label {
background-color: rgba($black, 0.9);
background-color: color.change($black, $alpha: 0.9);
}
}
}
@@ -5398,7 +5401,7 @@ a.status-card {
.upload-area {
align-items: center;
background: rgba($base-overlay-background, 0.8);
background: color.change($base-overlay-background, $alpha: 0.8);
display: flex;
height: 100vh;
justify-content: center;
@@ -5433,7 +5436,7 @@ a.status-card {
z-index: -1;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2);
}
.upload-area__content {
@@ -6176,7 +6179,7 @@ a.status-card {
align-items: center;
.icon-button {
color: rgba($white, 0.7);
color: color.change($white, $alpha: 0.7);
padding: 8px;
.icon {
@@ -6189,11 +6192,11 @@ a.status-card {
&:focus,
&:active {
color: $white;
background-color: rgba($white, 0.15);
background-color: color.change($white, $alpha: 0.15);
}
&:focus {
background-color: rgba($white, 0.3);
background-color: color.change($white, $alpha: 0.3);
}
}
}
@@ -6234,7 +6237,7 @@ a.status-card {
background: transparent;
box-sizing: border-box;
border: 0;
color: rgba($white, 0.7);
color: color.change($white, $alpha: 0.7);
cursor: pointer;
display: flex;
align-items: center;
@@ -6288,11 +6291,11 @@ a.status-card {
&:focus,
&:active {
color: $white;
background-color: rgba($white, 0.15);
background-color: color.change($white, $alpha: 0.15);
}
&:focus {
background-color: rgba($white, 0.3);
background-color: color.change($white, $alpha: 0.3);
}
&.active {
@@ -6301,11 +6304,11 @@ a.status-card {
&:hover,
&:focus,
&:active {
background: rgba($highlight-text-color, 0.15);
background: color.change($highlight-text-color, $alpha: 0.15);
}
&:focus {
background: rgba($highlight-text-color, 0.3);
background: color.change($highlight-text-color, $alpha: 0.3);
}
}
@@ -6315,11 +6318,11 @@ a.status-card {
&:hover,
&:focus,
&:active {
background: rgba($gold-star, 0.15);
background: color.change($gold-star, $alpha: 0.15);
}
&:focus {
background: rgba($gold-star, 0.3);
background: color.change($gold-star, $alpha: 0.3);
}
}
@@ -7223,7 +7226,7 @@ img.modal-warning {
display: block;
color: $white;
border: 0;
background: rgba($black, 0.65);
background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter;
padding: 3px 12px;
border-radius: 99px;
@@ -7247,7 +7250,7 @@ img.modal-warning {
text-align: center;
color: $white;
border: 0;
background: rgba($black, 0.65);
background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter;
padding: 3px 8px;
border-radius: 4px;
@@ -7269,7 +7272,7 @@ img.modal-warning {
}
.media-gallery__alt__popover {
background: rgba($black, 0.65);
background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter;
border-radius: 4px;
box-shadow: var(--dropdown-shadow);
@@ -7291,7 +7294,7 @@ img.modal-warning {
p {
font-size: 15px;
line-height: 20px;
color: rgba($white, 0.85);
color: color.change($white, $alpha: 0.85);
white-space: pre-line;
}
}
@@ -7771,8 +7774,8 @@ img.modal-warning {
box-sizing: border-box;
background: linear-gradient(
0deg,
rgba($base-shadow-color, 0.85) 0,
rgba($base-shadow-color, 0.45) 60%,
color.change($base-shadow-color, $alpha: 0.85) 0,
color.change($base-shadow-color, $alpha: 0.45) 60%,
transparent
);
padding: 0 15px;
@@ -7868,7 +7871,7 @@ img.modal-warning {
flex: 0 0 auto;
background: transparent;
border: 0;
color: rgba($white, 0.75);
color: color.change($white, $alpha: 0.75);
font-weight: 500;
&:active,
@@ -7932,7 +7935,7 @@ img.modal-warning {
&::before {
content: '';
width: 50px;
background: rgba($white, 0.35);
background: color.change($white, $alpha: 0.35);
border-radius: 4px;
display: block;
position: absolute;
@@ -7964,7 +7967,7 @@ img.modal-warning {
margin-inline-start: -6px;
transform: translate(0, -50%);
background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
opacity: 0;
.no-reduce-motion & {
@@ -8002,7 +8005,7 @@ img.modal-warning {
&::before {
content: '';
width: 100%;
background: rgba($white, 0.35);
background: color.change($white, $alpha: 0.35);
border-radius: 4px;
display: block;
position: absolute;
@@ -8021,7 +8024,7 @@ img.modal-warning {
}
&__buffer {
background: rgba($white, 0.2);
background: color.change($white, $alpha: 0.2);
}
&__handle {
@@ -8034,7 +8037,7 @@ img.modal-warning {
top: 10px;
margin-inline-start: -6px;
background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
.no-reduce-motion & {
transition: opacity 0.1s ease;
@@ -8058,7 +8061,7 @@ img.modal-warning {
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
background: rgba($base-shadow-color, 0.45);
background: color.change($base-shadow-color, $alpha: 0.45);
backdrop-filter: $backdrop-blur-filter;
color: $white;
border-radius: 8px;
@@ -8391,7 +8394,7 @@ noscript {
inset-inline-start: 0;
width: 100%;
height: 100%;
background: rgba($base-overlay-background, 0.5);
background: color.change($base-overlay-background, $alpha: 0.5);
}
.focal-point {
@@ -8413,7 +8416,7 @@ noscript {
transform: translate(-50%, -50%);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35);
pointer-events: none;
}
}
@@ -8656,7 +8659,7 @@ noscript {
}
.verified {
border: 1px solid rgba($valid-value-color, 0.5);
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
margin-top: -1px;
margin-inline: -1px;
@@ -8876,7 +8879,7 @@ noscript {
width: 50px;
path:first-child {
fill: rgba($highlight-text-color, 0.25) !important;
fill: color.change($highlight-text-color, $alpha: 0.25) !important;
fill-opacity: 1 !important;
}
@@ -8901,7 +8904,7 @@ noscript {
.trends__item__sparkline {
path:first-child {
fill: rgba($gold-star, 0.25) !important;
fill: color.change($gold-star, $alpha: 0.25) !important;
}
path:last-child {
@@ -10072,7 +10075,7 @@ noscript {
margin-bottom: 5px;
border-radius: 8px;
border: 1px solid $highlight-text-color;
background: rgba($highlight-text-color, 0.15);
background: color.change($highlight-text-color, $alpha: 0.15);
overflow: hidden;
flex-shrink: 0;
@@ -10127,7 +10130,7 @@ noscript {
}
.button-tertiary {
background: rgba($ui-base-color, 0.15);
background: color.change($ui-base-color, $alpha: 0.15);
backdrop-filter: blur(8px);
}
}
@@ -10144,7 +10147,7 @@ noscript {
.warning-banner {
border: 1px solid $warning-red;
background: rgba($warning-red, 0.15);
background: color.change($warning-red, $alpha: 0.15);
&__message {
h1 {
@@ -10479,13 +10482,13 @@ noscript {
padding: 15px;
margin: 0;
color: $white;
background: rgba($black, 0.85);
background: color.change($black, $alpha: 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
border-radius: 8px;
box-shadow:
0 10px 15px -3px rgba($base-shadow-color, 0.25),
0 4px 6px -4px rgba($base-shadow-color, 0.25);
0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25);
cursor: default;
font-size: 15px;
line-height: 21px;
@@ -10523,7 +10526,7 @@ noscript {
&:hover,
&:focus,
&:active {
background: rgba($ui-base-color, 0.85);
background: color.change($ui-base-color, $alpha: 0.85);
}
}
@@ -10621,7 +10624,7 @@ noscript {
padding: 16px 0;
padding-bottom: 0;
border-bottom: 1px solid var(--background-border-color);
background: rgba($ui-highlight-color, 0.05);
background: color.change($ui-highlight-color, $alpha: 0.05);
&__header {
display: flex;

10
app/javascript/flavours/glitch/styles/css_variables.scss
View File

@@ -6,10 +6,10 @@
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
--dropdown-shadow:
0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
--modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
--modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)};
--background-color: #{darken($ui-base-color, 8%)};
@@ -21,7 +21,9 @@
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
--avatar-border-radius: 8px;
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.35)});
--overlay-icon-shadow: drop-shadow(
0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
);
--error-background-color: #{darken($error-red, 16%)};
--error-active-background-color: #{darken($error-red, 12%)};
--on-error-color: #fff;

23
app/javascript/flavours/glitch/styles/forms.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *;
@use 'functions' as *;
@@ -732,20 +733,20 @@ code {
text-align: center;
&.notice {
border: 1px solid rgba($valid-value-color, 0.5);
background: rgba($valid-value-color, 0.25);
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
background: color.change($valid-value-color, $alpha: 0.25);
color: $valid-value-color;
}
&.warning {
border: 1px solid rgba($gold-star, 0.5);
background: rgba($gold-star, 0.25);
border: 1px solid color.change($gold-star, $alpha: 0.5);
background: color.change($gold-star, $alpha: 0.25);
color: $gold-star;
}
&.alert {
border: 1px solid rgba($error-value-color, 0.5);
background: rgba($error-value-color, 0.1);
border: 1px solid color.change($error-value-color, $alpha: 0.5);
background: color.change($error-value-color, $alpha: 0.1);
color: $error-value-color;
}
@@ -965,7 +966,7 @@ code {
padding: 4px;
margin-inline-end: 10px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
display: inline-block;
svg {
@@ -988,10 +989,10 @@ code {
.simple_form {
.warning {
box-sizing: border-box;
background: rgba($error-value-color, 0.5);
background: color.change($error-value-color, $alpha: 0.5);
color: $primary-text-color;
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;
@@ -1350,7 +1351,7 @@ code {
width: 100%;
height: 100%;
position: absolute;
background: rgba($error-value-color, 0.25);
background: color.change($error-value-color, $alpha: 0.25);
z-index: 2;
border-radius: 8px;
}

22
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View File

@@ -16,7 +16,7 @@
.status-card__actions button,
.status-card__actions a {
color: rgba($white, 0.8);
color: color.change($white, $alpha: 0.8);
&:hover,
&:active,
@@ -298,14 +298,14 @@
.simple_form {
.warning {
box-shadow: none;
background: rgba($error-red, 0.5);
background: color.change($error-red, $alpha: 0.5);
text-shadow: none;
}
.recommended {
border-color: $ui-highlight-color;
color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1);
background-color: color.change($ui-highlight-color, $alpha: 0.1);
}
input[type='text'],
@@ -327,7 +327,7 @@
.compose-form .compose-form__warning {
border-color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1);
background-color: color.change($ui-highlight-color, $alpha: 0.1);
&,
a {
@@ -374,6 +374,14 @@
}
}
.status__wrapper-direct {
background-color: color.change($ui-highlight-color, $alpha: 0.1);
&:focus {
background-color: color.change($ui-highlight-color, $alpha: 0.15);
}
}
// Glitch-soc-specific changes
.pillbar-button {
@@ -486,8 +494,8 @@
}
.inline-follow-suggestions {
background-color: rgba($ui-highlight-color, 0.1);
border-bottom-color: rgba($ui-highlight-color, 0.3);
background-color: color.change($ui-highlight-color, $alpha: 0.1);
border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
}
.inline-follow-suggestions__body__scrollable__card {
@@ -561,7 +569,7 @@ a.sparkline {
@supports not selector(::-webkit-scrollbar) {
html {
scrollbar-color: rgba($action-button-color, 0.25)
scrollbar-color: color.change($action-button-color, $alpha: 0.25)
var(--background-border-color);
}
}

5
app/javascript/flavours/glitch/styles/polls.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *;
@use 'functions' as *;
@@ -212,7 +213,7 @@
&:active,
&:focus {
background-color: rgba($dark-text-color, 0.1);
background-color: color.change($dark-text-color, $alpha: 0.1);
}
}
@@ -231,7 +232,7 @@
background: rgba(darken($ui-primary-color, 14%), 0.7);
&.leading {
background: rgba($ui-highlight-color, 0.5);
background: color.change($ui-highlight-color, $alpha: 0.5);
}
}
}

3
app/javascript/flavours/glitch/styles/widgets.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *;
@use 'functions' as *;
@@ -16,7 +17,7 @@
padding: 15px;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
}
& > a {