From 03ae73bdc5e26c3d8a2a37b7d4f4100dc7fea965 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 3 Aug 2023 20:39:45 +0200 Subject: [PATCH] [Glitch] Change design of hidden media overlay (again) in web UI Port 04e7efac3f2ebb4336c48335720611120eae19ba to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/components/misc.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index 064d500d5a..40fd159879 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -1345,7 +1345,7 @@ button.icon-button.active i.fa-retweet { display: flex; align-items: center; justify-content: center; - background: rgba($black, 0.5); + background: transparent; width: 100%; height: 100%; padding: 0; @@ -1354,6 +1354,10 @@ button.icon-button.active i.fa-retweet { color: $white; &__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; align-items: center; justify-content: center; @@ -1367,6 +1371,13 @@ button.icon-button.active i.fa-retweet { font-weight: 400; font-size: 13px; } + + &:hover, + &:focus { + .spoiler-button__overlay__label { + background-color: rgba($black, 0.9); + } + } } }