Change design of hidden media overlay (again) in web UI (#26330)

app/javascript/styles/mastodon/components.scss

@@ -4249,16 +4249,19 @@ a.status-card {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba($black, 0.5);
+    background: transparent;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     border: 0;
-    border-radius: 4px;
     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;
@@ -4272,6 +4275,13 @@ a.status-card {
       font-weight: 400;
       font-size: 13px;
     }
+
+    &:hover,
+    &:focus {
+      .spoiler-button__overlay__label {
+        background-color: rgba($black, 0.9);
+      }
+    }
   }
 }