From a4b452e177a6677fb842e69a64d28f9be787fe37 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 5 Jan 2023 13:30:19 +0800
Subject: [PATCH] Switch back to blur effect for spoilers

The SVG filter is too heavy for mobile browsers
---
 src/components/status.css | 42 +++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index d194e187..07dc04c9 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -182,30 +182,56 @@
   gap: 8px;
   align-items: center;
 }
-.status .content-container.has-spoiler .spoiler ~ * {
-  /* filter: blur(6px) invert(0.5); */
-  filter: url(#spoiler);
+.status
+  .content-container.has-spoiler
+  .spoiler
+  ~ *:not(.media-container, .card),
+.status .content-container.has-spoiler .spoiler ~ .card .meta-container {
+  filter: blur(6px) invert(0.5);
+  /* filter: url(#spoiler); */
   text-rendering: optimizeSpeed;
   image-rendering: crisp-edges;
   image-rendering: pixelated;
-  transform: translate3d(-5px, -5px, 0);
+  /* transform: translate3d(-5px, -5px, 0); */
   pointer-events: none;
   user-select: none;
   contain: layout;
 }
-@media (prefers-color-scheme: dark) {
-  .status .content-container.has-spoiler .spoiler ~ * {
+.status .content-container.has-spoiler .spoiler ~ .media-container .media > *,
+.status .content-container.has-spoiler .spoiler ~ .card > img {
+  filter: blur(32px);
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+  animation: none !important;
+}
+/* @media (prefers-color-scheme: dark) {
+  .status
+    .content-container.has-spoiler
+    .spoiler
+    ~ *:not(.media-container, .card),
+  .status .content-container.has-spoiler .spoiler ~ .card .meta-container {
     filter: url(#spoiler-dark);
   }
-}
+} */
 .status .content-container.show-spoiler .spoiler {
   border-style: dotted;
 }
-.status .content-container.show-spoiler .spoiler ~ * {
+.status
+  .content-container.show-spoiler
+  .spoiler
+  ~ *:not(.media-container, .card),
+.status .content-container.show-spoiler .spoiler ~ .card .meta-container {
   filter: none !important;
   transform: none;
   pointer-events: auto;
   user-select: auto;
+  text-rendering: auto;
+  image-rendering: auto;
+}
+.status .content-container.show-spoiler .spoiler ~ .media-container .media > *,
+.status .content-container.show-spoiler .spoiler ~ .card > img {
+  filter: none;
+  image-rendering: auto;
 }
 
 .timeline-deck .status .content {