From da48925fffd67ea58035723544f9bf90ff34fc06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=8F=89=E6=A0=91=E6=A0=91?= <acofork@qq.com>
Date: Sat, 3 Jan 2026 20:33:46 +0800
Subject: [PATCH] =?UTF-8?q?style(styles):=20=E4=BC=98=E5=8C=96=E5=BD=A9?=
 =?UTF-8?q?=E8=99=B9=E6=A8=A1=E5=BC=8F=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E5=B9=B6=E7=AE=80=E5=8C=96=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 backdrop-filter 改为 filter 以获得更好的性能
- 添加反向旋转动画以保持媒体元素原始颜色
- 移除不必要的伪元素和定位样式
---
 src/styles/main.css | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index f9b93cfd5..1467f4e19 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2,32 +2,27 @@
 
 @layer components {
     /* Rainbow Mode Animation */
-    @keyframes rainbow-backdrop {
-        0% { backdrop-filter: hue-rotate(0deg); }
-        100% { backdrop-filter: hue-rotate(360deg); }
+    @keyframes rainbow-rotate {
+        0% { filter: hue-rotate(0deg); }
+        100% { filter: hue-rotate(360deg); }
+    }
+    @keyframes rainbow-rotate-reverse {
+        0% { filter: hue-rotate(0deg); }
+        100% { filter: hue-rotate(-360deg); }
     }
 
     html.is-rainbow-mode .card-base {
-        position: relative;
-    }
-
-    html.is-rainbow-mode .card-base::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        pointer-events: none;
-        border-radius: inherit;
-        animation: rainbow-backdrop linear infinite;
+        animation: rainbow-rotate linear infinite;
         animation-duration: var(--rainbow-duration, 5s);
     }
 
-    /* Protect images and other sensitive media from color rotation */
+    /* Reverse filter for images to keep original colors */
     html.is-rainbow-mode .card-base img,
     html.is-rainbow-mode .card-base video,
-    html.is-rainbow-mode .card-base iframe {
-        position: relative;
-        z-index: 2;
+    html.is-rainbow-mode .card-base iframe,
+    html.is-rainbow-mode .card-base .no-hue-rotate {
+        animation: rainbow-rotate-reverse linear infinite;
+        animation-duration: var(--rainbow-duration, 5s);
     }
 
     .card-base {