gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 10:53:39 +00:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

Replace $base-overlay-background

Browse Source
This commit is contained in:
diondiondion 2025-09-04 15:17:59 +02:00
parent a05127667b
commit 2e88cc30fb
5 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/styles/mastodon-light/css_variables.scss
View File

@ -46,6 +46,9 @@
--clr-text-on-success-strong: var(--clr-white);
--clr-text-disabled: var(--clr-grey-300);
--clr-text-on-disabled: var(--clr-grey-200);
--clr-text-bookmark-highlight: var(--clr-text-error);
--clr-text-favourite-highlight: var(--clr-text-warning);
--clr-text-on-media: var(--clr-white);
/* BACKGROUND TOKENS */
@ -67,8 +70,11 @@
var(--clr-bg-primary),
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
)};
--clr-bg-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-bg-primary);
--clr-bg-inverted: var(--clr-grey-950);
--clr-bg-media: var(--clr-black);
--clr-bg-overlay: var(--clr-bg-primary);
--clr-bg-disabled: var(--clr-grey-400);
--clr-bg-accent-subtle-base: var(--clr-indigo-600);
--clr-bg-accent-subtle-strength: 12%;

2
app/javascript/styles/mastodon-light/variables.scss
View File

@ -12,8 +12,6 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz
@use '../mastodon/variables' with (
$base-overlay-background: $white,
$ui-base-color: hsl(255deg, 25%, 88%),
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
$ui-secondary-color: hsl(240deg, 16%, 19%),

1
app/javascript/styles/mastodon/_variables.scss
View File

@ -15,7 +15,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;

20
app/javascript/styles/mastodon/components.scss
View File

@ -3453,7 +3453,7 @@ a.account__display-name {
.columns-area__panels__pane--overlay {
pointer-events: auto;
background: color.change($base-overlay-background, $alpha: 0.5);
background: rgb(from var(--clr-bg-overlay) r g b / 50%);
z-index: 3;
.columns-area__panels__pane__inner {
@ -3990,10 +3990,6 @@ a.account__display-name {
border-radius: 10px;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: color.change(
$base-overlay-background,
$alpha: 0
);
-webkit-tap-highlight-color: transparent;
}
@ -4431,7 +4427,7 @@ a.status-card {
top: 0;
inset-inline-start: 0;
z-index: 0;
background: $base-overlay-background;
background: var(--clr-bg-primary);
&--hidden {
display: none;
@ -4999,7 +4995,7 @@ a.status-card {
.video-error-cover {
align-items: center;
background: $base-overlay-background;
background: var(--clr-bg-primary);
color: var(--clr-text-primary);
cursor: pointer;
display: flex;
@ -5457,7 +5453,7 @@ a.status-card {
.upload-area {
align-items: center;
background: color.change($base-overlay-background, $alpha: 0.8);
background: rgb(from var(--clr-bg-overlay) r g b / 80%);
display: flex;
height: 100vh;
justify-content: center;
@ -6123,7 +6119,7 @@ a.status-card {
inset-inline-end: 0;
bottom: 0;
opacity: 0.9;
background: $base-overlay-background;
background: var(--clr-bg-overlay);
transition: background 0.5s;
}
@ -7505,7 +7501,7 @@ a.status-card {
top: 0;
inset-inline-start: 0;
z-index: -2;
background: $base-overlay-background;
background: var(--clr-bg-overlay);
&--hidden {
display: none;
@ -7768,7 +7764,7 @@ a.status-card {
height: 100%;
z-index: 4;
border: 0;
background: $base-overlay-background;
background: var(--clr-bg-overlay);
color: var(--clr-text-secondary);
transition: none;
pointer-events: none;
@ -8353,7 +8349,7 @@ noscript {
inset-inline-start: 0;
width: 100%;
height: 100%;
background: color.change($base-overlay-background, $alpha: 0.5);
background: rgb(from var(--clr-bg-overlay) r g b / 50%);
}
.focal-point {

3
app/javascript/styles/mastodon/css_variables.scss
View File

@ -54,6 +54,7 @@
--clr-text-on-disabled: var(--clr-grey-400);
--clr-text-bookmark-highlight: var(--clr-text-error);
--clr-text-favourite-highlight: var(--clr-text-warning);
--clr-text-on-media: var(--clr-white);
/* BACKGROUND TOKENS */
@ -79,6 +80,8 @@
--clr-bg-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-grey-800);
--clr-bg-inverted: var(--clr-grey-50);
--clr-bg-media: var(--clr-black);
--clr-bg-overlay: var(--clr-bg-primary);
--clr-bg-disabled: var(--clr-grey-700);
--clr-bg-accent-subtle-base: var(--clr-indigo-400);
--clr-bg-accent-subtle-strength: 10%;