From 9e9ec24d566b473028c08daba32bcc6979244f15 Mon Sep 17 00:00:00 2001
From: shiran <2488252513@qq.com>
Date: Fri, 20 Feb 2026 09:36:53 +0800
Subject: [PATCH] =?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=A0=B7=E5=BC=8F=E4=BB=A5?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除话题列表项的底部边框
- 替换原有的阴影效果为更现代的多层阴影设计
- 移除卡片边框并添加渐变背景遮罩层
- 添加悬停时的变换动画和阴影过渡效果
- 优化选中状态的阴影和高亮显示
- 调整悬停和选中状态的颜色与透明度参数
---
 scss/topic-cards.scss | 50 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 56b1141..1bf62d3 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -9,11 +9,7 @@
 }
 
 .topic-list > .topic-list-body > .topic-list-item.last-visit {
-  border-bottom: 1px solid var(--primary-300);
-
-  &:hover {
-    border-color: var(--accent-color);
-  }
+  border-bottom: none;
 }
 
 .topic-list,
@@ -73,10 +69,12 @@
 .topic-list-body .topic-list-item {
   position: relative;
   background: var(--d-content-background);
-  box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+  box-shadow:
+    0 10px 30px -18px rgb(10 18 35 / 38%),
+    0 6px 16px -10px var(--topic-card-shadow);
   text-overflow: ellipsis;
   padding: var(--space-3);
-  border: 1px solid var(--primary-300);
+  border: none;
   display: grid;
   grid-template-columns: min-content min-content min-content auto min-content;
   grid-template-areas:
@@ -85,6 +83,34 @@
   grid-gap: var(--space-3);
   border-radius: var(--d-border-radius);
   cursor: pointer;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background:
+      radial-gradient(
+        120% 90% at 0% 0%,
+        oklch(from var(--accent-color) calc(l * 1.12) calc(c * 0.55) h / 0.5),
+        transparent 55%
+      ),
+      radial-gradient(
+        120% 90% at 100% 100%,
+        oklch(from var(--accent-color) calc(l * 1.05) calc(c * 0.45) h / 0.35),
+        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;
+  }
 
   &.has-replies {
     grid-template-areas:
@@ -145,15 +171,19 @@
 
   &:hover {
     .discourse-no-touch & {
-      border-color: var(--accent-color);
       background: var(--d-content-background);
+      box-shadow:
+        0 16px 34px -18px rgb(10 18 35 / 52%),
+        0 8px 20px -10px var(--topic-card-shadow);
+      transform: translateY(-1px);
     }
   }
 
   &.selected {
     box-shadow:
-      0 0 0 2px var(--accent-color),
-      0 0 12px 1px var(--topic-card-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);
   }
 
   &.excerpt-expanded {