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

Improve clr-bg-media

Browse Source
This commit is contained in:
diondiondion 2025-10-24 11:58:17 +02:00
parent beaf22fbf0
commit 52e7db1ea5
4 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,7 +75,12 @@
--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-media-base: var(--clr-black);
--clr-bg-media-strength: 65%;
--clr-bg-media: #{utils.css-alpha(
var(--clr-bg-media-base),
var(--clr-bg-media-strength)
)};
--clr-bg-overlay: var(--clr-bg-primary);
--clr-bg-disabled: var(--clr-grey-400);
--clr-bg-accent-subtle-base: var(--clr-indigo-600);

8
app/javascript/styles/mastodon/admin.scss
View File

@ -2064,10 +2064,10 @@ a.sparkline {
top: 5px;
right: 5px;
color: var(--clr-text-on-media);
border: 0;
outline: 1px solid var(--clr-border-media);
background-color: rgb(from var(--clr-bg-media) r g b / 45%);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
outline: 1px solid var(--clr-border-media);
border: 0;
padding: 3px 12px;
border-radius: 99px;
font-size: 14px;
@ -2076,7 +2076,7 @@ a.sparkline {
&:hover,
&:focus {
background-color: rgb(from var(--clr-bg-media) r g b / 90%);
background-color: rgb(from var(--clr-bg-media-base) r g b / 90%);
}
}

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

@ -339,9 +339,9 @@
&.overlayed {
--default-icon-color: rgb(from var(--clr-text-on-media) r g b / 70%);
--default-bg-color: rgb(from var(--clr-bg-media) r g b / 65%);
--default-bg-color: var(--clr-bg-media);
--hover-icon-color: var(--clr-text-accent);
--hover-bg-color: rgb(from var(--clr-bg-media) r g b / 90%);
--hover-bg-color: rgb(from var(--clr-bg-media-base) r g b / 90%);
box-sizing: content-box;
backdrop-filter: $backdrop-blur-filter;
@ -697,7 +697,7 @@ body > [data-popper-placement] {
.icon-button {
flex: 0 0 auto;
color: var(--clr-text-on-media);
background: rgb(from var(--clr-bg-media) r g b / 65%);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border-radius: 6px;
font-size: 12px;
@ -4887,7 +4887,7 @@ a.status-card {
font-size: 14px;
&__label {
background-color: rgb(from var(--clr-bg-media) r g b / 65%);
background-color: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border-radius: 8px;
padding: 12px 16px;
@ -4907,7 +4907,7 @@ a.status-card {
&:hover,
&:focus {
.spoiler-button__overlay__label {
background-color: rgb(from var(--clr-bg-media) r g b / 90%);
background-color: rgb(from var(--clr-bg-media-base) r g b / 90%);
}
}
}
@ -6923,9 +6923,9 @@ a.status-card {
&__pill {
display: block;
color: var(--clr-text-on-media);
border: 0;
background: rgb(from var(--clr-bg-media) r g b / 65%);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border: 0;
padding: 3px 12px;
border-radius: 99px;
font-size: 14px;
@ -6948,9 +6948,9 @@ a.status-card {
display: block;
text-align: center;
color: var(--clr-text-on-media);
border: 0;
background: rgb(from var(--clr-bg-media) r g b / 65%);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border: 0;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
@ -6972,7 +6972,7 @@ a.status-card {
.info-tooltip {
color: var(--clr-text-on-media);
background: rgb(from var(--clr-bg-media) r g b / 65%);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border-radius: 4px;
box-shadow: var(--dropdown-shadow);
@ -7190,7 +7190,7 @@ a.status-card {
.icon {
color: var(--clr-text-on-media);
filter: drop-shadow(0 0 6px var(--clr-bg-media));
filter: drop-shadow(0 0 6px var(--clr-bg-media-base));
}
}
@ -7448,8 +7448,8 @@ a.status-card {
box-sizing: border-box;
background: linear-gradient(
0deg,
rgb(from var(--clr-bg-media) r g b / 85%) 0,
rgb(from var(--clr-bg-media) r g b / 45%) 60%,
rgb(from var(--clr-bg-media-base) r g b / 85%) 0,
rgb(from var(--clr-bg-media-base) r g b / 45%) 60%,
transparent
);
padding: 0 15px;
@ -7731,9 +7731,9 @@ a.status-card {
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
background: rgb(from var(--clr-bg-media) r g b / 45%);
backdrop-filter: $backdrop-blur-filter;
color: var(--clr-text-on-media);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border-radius: 8px;
padding: 16px 24px;
display: flex;

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

@ -85,7 +85,12 @@
--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-media-base: var(--clr-black);
--clr-bg-media-strength: 65%;
--clr-bg-media: #{utils.css-alpha(
var(--clr-bg-media-base),
var(--clr-bg-media-strength)
)};
--clr-bg-overlay: var(--clr-bg-primary);
--clr-bg-disabled: var(--clr-grey-700);
--clr-bg-accent-subtle-base: var(--clr-indigo-400);