Replace $ui-base-lighter-color

This commit is contained in:
diondiondion 2025-10-23 10:42:42 +02:00
parent 1e4c61dd1f
commit 85dc277409
5 changed files with 21 additions and 15 deletions

View File

@ -11,6 +11,5 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
@use '../mastodon/variables' with (
$ui-base-color: hsl(255deg, 25%, 88%),
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
$emojis-requiring-inversion: 'chains'
);

View File

@ -15,10 +15,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz
// Tell UI to use selected colors
$ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
$ui-base-lighter-color: lighten(
$ui-base-color,
26%
) !default; // Lighter darkest
// Keep this filter a SCSS variable rather than
// a CSS Custom Property due to this Safari bug:

View File

@ -5376,7 +5376,7 @@ a.status-card {
inset-inline-start: 0;
z-index: -1;
border-radius: 4px;
background: $ui-base-color;
background: var(--clr-bg-elevated);
box-shadow: 0 0 5px var(--clr-shadow-primary);
}
@ -5389,7 +5389,7 @@ a.status-card {
color: var(--clr-text-primary);
font-size: 18px;
font-weight: 500;
border: 2px dashed $ui-base-lighter-color;
border: 2px dashed var(--clr-border-primary);
border-radius: 4px;
}

View File

@ -944,9 +944,9 @@ code {
}
.permissions-list {
border: 1px solid $ui-base-color;
border: 1px solid var(--clr-border-primary);
border-radius: 4px;
background: darken($ui-base-color, 4%);
background: var(--clr-bg-secondary);
margin-bottom: 30px;
}
@ -1229,7 +1229,6 @@ code {
align-items: center;
padding-bottom: 30px;
margin-bottom: 30px;
color: $white;
li {
flex: 0 0 auto;
@ -1238,7 +1237,7 @@ code {
.separator {
height: 2px;
background: $ui-base-lighter-color;
background: var(--clr-border-primary);
flex: 1 1 auto;
&.completed {
@ -1252,7 +1251,7 @@ code {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid $ui-base-lighter-color;
border: 2px solid var(--clr-border-primary);
flex: 0 0 auto;
display: flex;
align-items: center;

View File

@ -2,13 +2,25 @@
@use 'functions' as *;
.modal-layout {
background: darken($ui-base-color, 4%)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
repeat-x bottom fixed;
background: var(--clr-bg-accent-subtle);
display: flex;
flex-direction: column;
height: 100vh;
padding: 0;
&::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 32px;
background-color: var(--clr-bg-accent-subtle);
/* Decorative zig-zag pattern at the bottom of the page */
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');
mask-position: bottom;
mask-repeat: repeat-x;
z-index: -1;
}
}
.modal-layout__mastodon {