From 04e7efac3f2ebb4336c48335720611120eae19ba Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 3 Aug 2023 20:39:45 +0200
Subject: [PATCH] Change design of hidden media overlay (again) in web UI
 (#26330)

---
 app/javascript/styles/mastodon/components.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 76928ba1fa..f46ac68531 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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);
+      }
+    }
   }
 }