From ff29cd0652814f014467213d0db218d55cdade2a Mon Sep 17 00:00:00 2001
From: shiran <2488252513@qq.com>
Date: Fri, 20 Feb 2026 21:39:22 +0800
Subject: [PATCH 1/3] =?UTF-8?q?style(ui):=20=E6=B7=BB=E5=8A=A0=E6=A2=A6?=
 =?UTF-8?q?=E5=B9=BB=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=E5=92=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=AF=9D=E9=A2=98=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增梦幻发光效果变量和动画实现
- 为主题背景添加浮动光晕装饰元素
- 重构话题卡片渐变背景和交互效果
- 实现卡片悬停时的平滑变换动画
- 添加响应式设计和可访问性支持
- 优化主题样式层级和渲染性能
---
 scss/main.scss        | 63 +++++++++++++++++++++++++++++++++++++++++++
 scss/topic-cards.scss | 61 +++++++++++++++++++++++++++++++++++++----
 2 files changed, 119 insertions(+), 5 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index 130f022..cf80bec 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -2,6 +2,9 @@
 
 :root {
   --main-grid-gap: 0.5em;
+  --dream-glow-a: oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.45) h / 0.18);
+  --dream-glow-b: oklch(from var(--accent-color) calc(l * 1.2) calc(c * 0.35) calc(h + 26deg) / 0.14);
+  --dream-glow-c: oklch(from var(--accent-color) calc(l * 0.95) calc(c * 0.4) calc(h - 20deg) / 0.12);
 }
 
 html:not(:has(.has-full-page-chat)) {
@@ -14,12 +17,72 @@ html:not(:has(.has-full-page-chat)) {
 
 body {
   -webkit-font-smoothing: antialiased;
+  position: relative;
 
   @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
 
+body:not(.has-full-page-chat, .wizard)::before,
+body:not(.has-full-page-chat, .wizard)::after {
+  content: "";
+  position: fixed;
+  width: min(42vw, 32rem);
+  aspect-ratio: 1 / 1;
+  border-radius: 999px;
+  filter: blur(48px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body:not(.has-full-page-chat, .wizard)::before {
+  top: 5rem;
+  left: -8rem;
+  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 65%);
+  animation: dreamy-float-a 18s ease-in-out infinite alternate;
+}
+
+body:not(.has-full-page-chat, .wizard)::after {
+  right: -6rem;
+  bottom: 2rem;
+  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 62%);
+  animation: dreamy-float-b 22s ease-in-out infinite alternate;
+}
+
+.d-header-wrap,
+#main-outlet-wrapper,
+.sidebar-wrapper,
+.sidebar-hamburger-dropdown {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes dreamy-float-a {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(3rem, -1.5rem, 0) scale(1.08);
+  }
+}
+
+@keyframes dreamy-float-b {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(-2.5rem, 2rem, 0) scale(1.1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body:not(.has-full-page-chat, .wizard)::before,
+  body:not(.has-full-page-chat, .wizard)::after {
+    animation: none;
+  }
+}
+
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index de96b7b..0ecc788 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -4,6 +4,17 @@
   --d-border-radius-small: calc(var(--d-border-radius) * 0.5);
 }
 
+@keyframes dreamy-card-shimmer {
+  from {
+    transform: translateX(-18%);
+    opacity: 0.35;
+  }
+  to {
+    transform: translateX(18%);
+    opacity: 0.65;
+  }
+}
+
 .topic-list .topic-list-item-separator {
   display: none;
 }
@@ -68,7 +79,12 @@
 
 .topic-list-body .topic-list-item {
   position: relative;
-  background: linear-gradient(45deg, var(--d-sidebar-active-background), #ffffff63);
+  background:
+    linear-gradient(
+      135deg,
+      oklch(from var(--d-content-background) calc(l * 0.995) c h) 0%,
+      oklch(from var(--d-content-background) calc(l * 1.02) calc(c * 0.65) h) 100%
+    );
   box-shadow:
     0 10px 30px -18px rgb(10 18 35 / 38%),
     0 6px 16px -10px var(--topic-card-shadow);
@@ -83,8 +99,11 @@
   grid-gap: var(--space-3);
   border-radius: var(--d-border-radius);
   cursor: pointer;
+  overflow: hidden;
   transition:
-    all 0.2s ease;
+    box-shadow 0.25s ease,
+    transform 0.25s ease,
+    background-color 0.25s ease;
 
   &::before {
     content: "";
@@ -92,10 +111,40 @@
     inset: 0;
     border-radius: inherit;
     padding: 1px;
+    background:
+      radial-gradient(
+        120% 100% at 0% 0%,
+        oklch(from var(--accent-color) calc(l * 1.15) calc(c * 0.5) h / 0.42),
+        transparent 56%
+      ),
+      radial-gradient(
+        120% 90% at 100% 100%,
+        oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.42) calc(h + 18deg) / 0.28),
+        transparent 58%
+      );
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
   }
 
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -35% -20%;
+    background: linear-gradient(
+      112deg,
+      transparent 30%,
+      oklch(from var(--accent-color) calc(l * 1.16) calc(c * 0.28) h / 0.1) 48%,
+      transparent 66%
+    );
+    pointer-events: none;
+    mix-blend-mode: screen;
+    animation: dreamy-card-shimmer 9s ease-in-out infinite alternate;
+  }
+
   &.has-replies {
     grid-template-areas:
       "creator title title title status"
@@ -155,9 +204,11 @@
 
   &:hover {
     .discourse-no-touch & {
-      background: var(--d-sidebar-active-background);
-      box-shadow: 4px 5px 3px 1px #0003, 0 8px 20px -10px var(--topic-card-shadow);
-      border-left: 5px solid var(--d-button-danger-icon-color);
+      background: oklch(from var(--d-content-background) calc(l * 1.03) calc(c * 0.75) h);
+      box-shadow:
+        0 16px 34px -18px rgb(10 18 35 / 45%),
+        0 8px 20px -10px var(--topic-card-shadow);
+      transform: translateY(-2px);
     }
   }
 

From 10639d6ddf210958263fa879c06a7a2f338ff220 Mon Sep 17 00:00:00 2001
From: shiran <2488252513@qq.com>
Date: Fri, 20 Feb 2026 21:48:19 +0800
Subject: [PATCH 2/3] =?UTF-8?q?style(topic-cards):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E8=AF=9D=E9=A2=98=E5=8D=A1=E7=89=87=E6=82=AC=E5=81=9C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除旧的背景渐变效果，改用 --active_color 变量
- 简化阴影效果，从双层阴影改为单层阴影
- 添加左侧边框以增强视觉效果
- 移除悬停时的垂直位移变换效果
---
 scss/topic-cards.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 0ecc788..1846560 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -204,11 +204,9 @@
 
   &:hover {
     .discourse-no-touch & {
-      background: oklch(from var(--d-content-background) calc(l * 1.03) calc(c * 0.75) h);
-      box-shadow:
-        0 16px 34px -18px rgb(10 18 35 / 45%),
-        0 8px 20px -10px var(--topic-card-shadow);
-      transform: translateY(-2px);
+      background: var(--active_color);
+      box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, .2), 0 8px 20px -10px var(--topic-card-shadow);
+      border-left: 5px solid #0007;
     }
   }
 

From baf01610e45cca598f911b9621d7e5e69c089d7e Mon Sep 17 00:00:00 2001
From: shiran <2488252513@qq.com>
Date: Fri, 20 Feb 2026 21:54:43 +0800
Subject: [PATCH 3/3] =?UTF-8?q?style(theme):=20=E6=9B=B4=E6=96=B0=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换梦幻光效变量为基于三级颜色的新配色方案
- 调整模糊滤镜强度从48px增加到56px
- 修改径向渐变透明度值以优化视觉层次
- 在列表容器中添加隔离层以改善渲染性能
- 更新话题卡片背景渐变使用RGB颜色变量
- 调整阴影效果和透明度以增强深度感
- 优化选中状态边框颜色使用三级颜色变量
- 添加悬停状态变换效果提升交互体验
---
 scss/main.scss        | 11 +++++------
 scss/self.scss        | 29 +++++++++++++++++++++--------
 scss/topic-cards.scss | 27 +++++++++++++++++----------
 3 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index cf80bec..5a21448 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -2,9 +2,8 @@
 
 :root {
   --main-grid-gap: 0.5em;
-  --dream-glow-a: oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.45) h / 0.18);
-  --dream-glow-b: oklch(from var(--accent-color) calc(l * 1.2) calc(c * 0.35) calc(h + 26deg) / 0.14);
-  --dream-glow-c: oklch(from var(--accent-color) calc(l * 0.95) calc(c * 0.4) calc(h - 20deg) / 0.12);
+  --dream-glow-a: rgb(var(--tertiary-rgb) / 0.24);
+  --dream-glow-b: rgb(var(--tertiary-rgb) / 0.18);
 }
 
 html:not(:has(.has-full-page-chat)) {
@@ -31,7 +30,7 @@ body:not(.has-full-page-chat, .wizard)::after {
   width: min(42vw, 32rem);
   aspect-ratio: 1 / 1;
   border-radius: 999px;
-  filter: blur(48px);
+  filter: blur(56px);
   pointer-events: none;
   z-index: 0;
 }
@@ -39,14 +38,14 @@ body:not(.has-full-page-chat, .wizard)::after {
 body:not(.has-full-page-chat, .wizard)::before {
   top: 5rem;
   left: -8rem;
-  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 65%);
+  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 62%);
   animation: dreamy-float-a 18s ease-in-out infinite alternate;
 }
 
 body:not(.has-full-page-chat, .wizard)::after {
   right: -6rem;
   bottom: 2rem;
-  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 62%);
+  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 58%);
   animation: dreamy-float-b 22s ease-in-out infinite alternate;
 }
 
diff --git a/scss/self.scss b/scss/self.scss
index a2de10e..01311c9 100644
--- a/scss/self.scss
+++ b/scss/self.scss
@@ -11,6 +11,7 @@
 
 .container.list-container{
   position: relative;
+  isolation: isolate;
 }
 
 .container.list-container::before{
@@ -22,14 +23,26 @@
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: #fff9;
+  background:
+    linear-gradient(
+      180deg,
+      rgb(var(--secondary-rgb) / 0.46) 0%,
+      rgb(var(--secondary-rgb) / 0.34) 100%
+    );
   border-radius: var(--d-border-radius);
-  backdrop-filter: blur(10px);
-  box-shadow: #00000077 0 0 19px 0;
+  backdrop-filter: blur(8px);
+  box-shadow: rgb(0 0 0 / 28%) 0 10px 26px -16px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.container.list-container > * {
+  position: relative;
+  z-index: 1;
 }
 
 .topic-list-header{
-  background-color: unset;
+  background-color: transparent;
 }
 .list-controls, .search-container{
   border-radius: var(--d-border-radius);
@@ -41,13 +54,13 @@
 }
 
 #list-area{
-  background-color: unset !important;
+  background-color: transparent;
 }
 
 .regular.ember-view{
-  background-color: #ffffffa8 !important;
+  background-color: rgb(var(--secondary-rgb) / 0.58);
   border-radius: var(--d-border-radius);
-  backdrop-filter: blur(16px);
-  box-shadow: #00000077 0 0 19px 0;
+  backdrop-filter: blur(10px);
+  box-shadow: rgb(0 0 0 / 24%) 0 10px 24px -14px;
   padding: 24px;
 }
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 1846560..8541556 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -82,8 +82,8 @@
   background:
     linear-gradient(
       135deg,
-      oklch(from var(--d-content-background) calc(l * 0.995) c h) 0%,
-      oklch(from var(--d-content-background) calc(l * 1.02) calc(c * 0.65) h) 100%
+      rgb(var(--secondary-rgb) / 0.96) 0%,
+      rgb(var(--tertiary-rgb) / 0.08) 100%
     );
   box-shadow:
     0 10px 30px -18px rgb(10 18 35 / 38%),
@@ -114,12 +114,12 @@
     background:
       radial-gradient(
         120% 100% at 0% 0%,
-        oklch(from var(--accent-color) calc(l * 1.15) calc(c * 0.5) h / 0.42),
+        rgb(var(--tertiary-rgb) / 0.38),
         transparent 56%
       ),
       radial-gradient(
         120% 90% at 100% 100%,
-        oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.42) calc(h + 18deg) / 0.28),
+        rgb(var(--tertiary-rgb) / 0.22),
         transparent 58%
       );
     -webkit-mask:
@@ -137,7 +137,7 @@
     background: linear-gradient(
       112deg,
       transparent 30%,
-      oklch(from var(--accent-color) calc(l * 1.16) calc(c * 0.28) h / 0.1) 48%,
+      rgb(var(--tertiary-rgb) / 0.16) 48%,
       transparent 66%
     );
     pointer-events: none;
@@ -204,17 +204,24 @@
 
   &:hover {
     .discourse-no-touch & {
-      background: var(--active_color);
-      box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, .2), 0 8px 20px -10px var(--topic-card-shadow);
-      border-left: 5px solid #0007;
+      background:
+        linear-gradient(
+          135deg,
+          rgb(var(--secondary-rgb) / 0.99) 0%,
+          rgb(var(--tertiary-rgb) / 0.14) 100%
+        );
+      box-shadow:
+        0 16px 34px -18px rgb(10 18 35 / 45%),
+        0 8px 20px -10px var(--topic-card-shadow);
+      transform: translateY(-2px);
     }
   }
 
   &.selected {
     box-shadow:
       0 14px 32px -14px rgb(10 18 35 / 48%),
-      0 0 0 2px oklch(from var(--accent-color) l calc(c * 0.45) h / 0.28),
-      0 0 0 8px oklch(from var(--accent-color) l calc(c * 0.2) h / 0.14);
+      0 0 0 2px rgb(var(--tertiary-rgb) / 0.28),
+      0 0 0 8px rgb(var(--tertiary-rgb) / 0.14);
   }
 
   &.excerpt-expanded {