[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>

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);
+      }
+    }
   }
 }