[Glitch] Change design of hidden media overlay (again) in web UI

Port 04e7efac3f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2023-08-03 20:39:45 +02:00 committed by Claire
parent 8247df3a8d
commit 03ae73bdc5
1 changed files with 12 additions and 1 deletions

View File

@ -1345,7 +1345,7 @@ button.icon-button.active i.fa-retweet {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba($black, 0.5); background: transparent;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
@ -1354,6 +1354,10 @@ button.icon-button.active i.fa-retweet {
color: $white; color: $white;
&__label { &__label {
background-color: rgba($black, 0.45);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
border-radius: 6px;
padding: 10px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1367,6 +1371,13 @@ button.icon-button.active i.fa-retweet {
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
} }
&:hover,
&:focus {
.spoiler-button__overlay__label {
background-color: rgba($black, 0.9);
}
}
} }
} }