feat(scrollbar): customize chat content scrollbar styles for better v… (#445)

* feat(scrollbar): customize chat content scrollbar styles for better visibility

* feat(scrollbar): add custom scrollbar styles for Firefox in chat content

* feat(scrollbar): add custom scrollbar styles for dark mode in Firefox

Author: LyaQanYi

static/css/dark-mode.css

@@ -318,12 +318,21 @@ html #chat-container {
 }
 
 /* ===== 暗色模式：滚动条 ===== */
+/* Firefox 滚动条 */
+[data-theme="dark"] #chat-content-wrapper {
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(25, 25, 25, 0.95);
+}
+
+[data-theme="dark"] #chat-content-wrapper:hover {
+  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(25, 25, 25, 0.95);
+}
+
 [data-theme="dark"] #chat-content-wrapper::-webkit-scrollbar {
   width: 6px;
 }
 
 [data-theme="dark"] #chat-content-wrapper::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(25, 25, 25, 0.95);
 }
 
 [data-theme="dark"] #chat-content-wrapper::-webkit-scrollbar-thumb {

static/css/index.css

@@ -348,6 +348,31 @@ button * {
     visibility: visible;
     background: rgba(249, 249, 249, 0.7);
     /* Fluent Design 背景层 */
+    /* Firefox 滚动条 */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.15) rgba(249, 249, 249, 0.95);
+}
+
+#chat-content-wrapper:hover {
+    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(249, 249, 249, 0.95);
+}
+
+/* 聊天内容滚动条 - 防止透明窗口中滚动条轨道穿透桌面 */
+#chat-content-wrapper::-webkit-scrollbar {
+    width: 6px;
+}
+
+#chat-content-wrapper::-webkit-scrollbar-track {
+    background: rgba(249, 249, 249, 0.95);
+}
+
+#chat-content-wrapper::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+}
+
+#chat-content-wrapper::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.25);
 }
 
 /* 切换按钮样式 - 更醒目的设计 */

templates/viewer.html

@@ -114,6 +114,23 @@
             background: #fff;
         }
 
+        #chat-content-wrapper::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        #chat-content-wrapper::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.95);
+        }
+
+        #chat-content-wrapper::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.15);
+            border-radius: 3px;
+        }
+
+        #chat-content-wrapper::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.25);
+        }
+
         #toggle-chat-btn {
             pointer-events: auto;
             position: absolute;