Remove blur from media modal background

src/app.css

@@ -920,8 +920,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .media-modal-container {
   position: relative;
   width: 100%;
-  background-color: var(--backdrop-color);
-  backdrop-filter: blur(24px);
+  background-color: var(--backdrop-solid-color);
   animation: appear 0.3s var(--timing-function) both;
 }
 .media-modal-container.loading {

src/components/media.jsx

@@ -165,10 +165,10 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
         }`}
         data-formatted-duration={formattedDuration}
         data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
-        style={{
-          backgroundColor:
-            rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
-        }}
+        // style={{
+        //   backgroundColor:
+        //     rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
+        // }}
         onClick={(e) => {
           if (hoverAnimate) {
             try {

src/index.css

@@ -43,6 +43,7 @@
   --outline-hover-color: rgba(128, 128, 128, 0.7);
   --divider-color: rgba(0, 0, 0, 0.1);
   --backdrop-color: rgba(0, 0, 0, 0.05);
+  --backdrop-solid-color: #ccc;
   --img-bg-color: rgba(128, 128, 128, 0.2);
   --loader-color: #1c1e2199;
   --comment-line-color: #e5e5e5;
@@ -82,6 +83,7 @@
     --divider-color: rgba(255, 255, 255, 0.1);
     --bg-blur-color: #24252699;
     --backdrop-color: rgba(0, 0, 0, 0.5);
+    --backdrop-solid-color: #333;
     --loader-color: #f0f2f599;
     --comment-line-color: #565656;
     --drop-shadow-color: rgba(0, 0, 0, 0.5);