style(ui): 优化话题列表界面样式

- 为话题列表头部添加 z-index 层级控制
- 调整话题列表头部间距和内边距
- 设置话题列表数据项颜色、字体大小和粗细
- 将话题列表数据项设为大写字母并添加背景透明效果
- 为默认话题列表项添加圆角边框
- 重新定位批量选择控件位置并更新样式
- 更新批量选择按钮的圆角样式
- 新增自定义背景图片和容器样式
- 为主题卡片渐变背景替换为线性渐变效果
- 调整主题卡片悬停状态下的背景色和阴影效果
- 为主题卡片添加左侧边框高亮效果
- 移除废弃的主题卡片相关样式代码

scss/desktop-horizon-fixes.scss

@@ -3,6 +3,7 @@
   .topic-list-header {
     position: relative;
     top: 0;
+    z-index: 2;
   }
 
   .topic-author-avatar-data {
@@ -28,18 +29,29 @@
 }
 
 .topic-list-header {
+  position: relative;
+  margin-bottom: 0.35rem;
+
   tr {
     border: none;
   }
 
   .topic-list-data {
-    padding: 0;
+    padding: 0.25rem 0;
+    color: var(--primary-600);
+    font-size: var(--font-down-2);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    background: transparent;
 
     &:not(.default) {
       display: none;
     }
 
     &.default {
+      border-radius: var(--d-border-radius);
+
       .bulk-select,
       span:not(.bulk-select-topics, .d-button-label) {
         display: none;
@@ -50,16 +62,22 @@
   // bulk select
   .bulk-select-topics {
     position: absolute;
-    right: 0;
+    right: 0.25rem;
-    background: var(--secondary);
+    top: 50%;
-    border-radius: 0 0 0 var(--d-border-radius);
+    transform: translateY(-50%);
+    background: color-mix(in srgb, var(--d-content-background) 88%, white 12%);
+    border: 1px solid var(--primary-200);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px -12px rgb(10 18 35 / 35%);
     display: flex;
     gap: 0.5rem;
-    margin: 0.5rem;
+    margin: 0;
+    padding: 0.25rem;
 
     button {
       white-space: nowrap;
       margin: 0;
+      border-radius: 999px;
     }
   }
 }

scss/self.scss

@@ -0,0 +1,35 @@
+@use "lib/viewport";
+
+#main-outlet {
+  @if $home_bg_image != "" {
+    background-image: url($home_bg_image);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+.container.list-container{
+  position: relative;
+}
+
+.container.list-container::before{
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff9;
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(10px);
+}
+
+.list-controls{
+  border-radius: var(--d-border-radius);
+}
+
+#list-area{
+  background-color: unset !important;
+}

scss/topic-cards.scss

@@ -68,7 +68,7 @@
 
 .topic-list-body .topic-list-item {
   position: relative;
-  background: var(--d-content-background);
+  background: linear-gradient(45deg, var(--d-sidebar-active-background), #ffffff63);
   box-shadow:
     0 10px 30px -18px rgb(10 18 35 / 38%),
     0 6px 16px -10px var(--topic-card-shadow);
@@ -155,11 +155,10 @@
 
   &:hover {
     .discourse-no-touch & {
-      background: var(--d-content-background);
+      background: var(--d-sidebar-active-background);
-      box-shadow:
+      box-shadow: 4px 5px 3px 1px #0003, 0 8px 20px -10px var(--topic-card-shadow);
-        0 16px 34px -18px rgb(10 18 35 / 52%),
-        0 8px 20px -10px var(--topic-card-shadow);
       transform: translateY(-1px);
+      border-left: 5px solid var(--d-button-danger-icon-color);
     }
   }
 
@@ -764,33 +763,3 @@ body.user-messages-page {
   display: inline-flex;
   position: relative;
 }
-
-#main-outlet {
-  @if $home_bg_image != "" {
-    background-image: url($home_bg_image);
-    background-size: cover;
-    background-position: center;
-  }
-}
-
-.container.list-container{
-  position: relative;
-}
-
-.container.list-container::before{
-  position: absolute;
-  content: "";
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #fff9;
-  border-radius: var(--d-border-radius);
-  backdrop-filter: blur(10px);
-}
-
-#list-area{
-  background-color: unset !important;
-}