From fbcc1f6e2208be183559124715414b192463a730 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 20 Apr 2023 19:10:07 +0800
Subject: [PATCH] Remove blur from media modal background

---
 src/app.css              | 3 +--
 src/components/media.jsx | 8 ++++----
 src/index.css            | 2 ++
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index bae2fb42..6f507e8a 100644
--- a/src/app.css
+++ b/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 {
diff --git a/src/components/media.jsx b/src/components/media.jsx
index 8dc0e923..0b32e053 100644
--- a/src/components/media.jsx
+++ b/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 {
diff --git a/src/index.css b/src/index.css
index a2cfc9ba..fb6051ad 100644
--- a/src/index.css
+++ b/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);