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-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-bg-primary); --clr-bg-elevated: var(--clr-bg-primary);
--clr-bg-inverted: var(--clr-grey-950); --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-overlay: var(--clr-bg-primary);
--clr-bg-disabled: var(--clr-grey-400); --clr-bg-disabled: var(--clr-grey-400);
--clr-bg-accent-subtle-base: var(--clr-indigo-600); --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; top: 5px;
right: 5px; right: 5px;
color: var(--clr-text-on-media); color: var(--clr-text-on-media);
border: 0; background: var(--clr-bg-media);
outline: 1px solid var(--clr-border-media);
background-color: rgb(from var(--clr-bg-media) r g b / 45%);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
outline: 1px solid var(--clr-border-media);
border: 0;
padding: 3px 12px; padding: 3px 12px;
border-radius: 99px; border-radius: 99px;
font-size: 14px; font-size: 14px;
@ -2076,7 +2076,7 @@ a.sparkline {
&:hover, &:hover,
&:focus { &: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 { &.overlayed {
--default-icon-color: rgb(from var(--clr-text-on-media) r g b / 70%); --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-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; box-sizing: content-box;
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
@ -697,7 +697,7 @@ body > [data-popper-placement] {
.icon-button { .icon-button {
flex: 0 0 auto; flex: 0 0 auto;
color: var(--clr-text-on-media); 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; backdrop-filter: $backdrop-blur-filter;
border-radius: 6px; border-radius: 6px;
font-size: 12px; font-size: 12px;
@ -4887,7 +4887,7 @@ a.status-card {
font-size: 14px; font-size: 14px;
&__label { &__label {
background-color: rgb(from var(--clr-bg-media) r g b / 65%); background-color: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
border-radius: 8px; border-radius: 8px;
padding: 12px 16px; padding: 12px 16px;
@ -4907,7 +4907,7 @@ a.status-card {
&:hover, &:hover,
&:focus { &:focus {
.spoiler-button__overlay__label { .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 { &__pill {
display: block; display: block;
color: var(--clr-text-on-media); color: var(--clr-text-on-media);
border: 0; background: var(--clr-bg-media);
background: rgb(from var(--clr-bg-media) r g b / 65%);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
border: 0;
padding: 3px 12px; padding: 3px 12px;
border-radius: 99px; border-radius: 99px;
font-size: 14px; font-size: 14px;
@ -6948,9 +6948,9 @@ a.status-card {
display: block; display: block;
text-align: center; text-align: center;
color: var(--clr-text-on-media); color: var(--clr-text-on-media);
border: 0; background: var(--clr-bg-media);
background: rgb(from var(--clr-bg-media) r g b / 65%);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
border: 0;
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
@ -6972,7 +6972,7 @@ a.status-card {
.info-tooltip { .info-tooltip {
color: var(--clr-text-on-media); 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; backdrop-filter: $backdrop-blur-filter;
border-radius: 4px; border-radius: 4px;
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
@ -7190,7 +7190,7 @@ a.status-card {
.icon { .icon {
color: var(--clr-text-on-media); 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; box-sizing: border-box;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgb(from var(--clr-bg-media) r g b / 85%) 0, rgb(from var(--clr-bg-media-base) 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 / 45%) 60%,
transparent transparent
); );
padding: 0 15px; padding: 0 15px;
@ -7731,9 +7731,9 @@ a.status-card {
top: 50%; top: 50%;
inset-inline-start: 50%; inset-inline-start: 50%;
transform: translate(-50%, -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); color: var(--clr-text-on-media);
background: var(--clr-bg-media);
backdrop-filter: $backdrop-blur-filter;
border-radius: 8px; border-radius: 8px;
padding: 16px 24px; padding: 16px 24px;
display: flex; 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-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-grey-800); --clr-bg-elevated: var(--clr-grey-800);
--clr-bg-inverted: var(--clr-grey-50); --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-overlay: var(--clr-bg-primary);
--clr-bg-disabled: var(--clr-grey-700); --clr-bg-disabled: var(--clr-grey-700);
--clr-bg-accent-subtle-base: var(--clr-indigo-400); --clr-bg-accent-subtle-base: var(--clr-indigo-400);