up

templates/chat.html

@@ -8,17 +8,24 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --bg:        #0f1117;
-      --surface:   #1a1d27;
-      --surface2:  #252836;
-      --border:    #2e3148;
-      --accent:    #6c63ff;
-      --accent-h:  #7c74ff;
-      --text:      #e8eaf6;
-      --text-dim:  #8892b0;
-      --user-bg:   #2a2d3e;
-      --ai-bg:     #1e2132;
-      --danger:    #ff6b6b;
+      --bg:        #f6f8fc;
+      --surface:   #ffffff;
+      --surface2:  #eef2f8;
+      --border:    #d8deea;
+      --accent:    #5b5ce2;
+      --accent-h:  #4b4dcc;
+      --text:      #172033;
+      --text-dim:  #667085;
+      --user-bg:   #eef2ff;
+      --ai-bg:     #ffffff;
+      --danger:    #dc2626;
+      --on-accent: #ffffff;
+      --accent-soft: rgba(91,92,226,.10);
+      --accent-border: rgba(91,92,226,.24);
+      --code-bg:   #f3f5fa;
+      --overlay:   rgba(15,23,42,.25);
+      --shadow:    0 18px 60px rgba(15,23,42,.16);
+      --scrollbar-thumb: #c8d2e3;
       --radius:    12px;
       --font:      'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
     }
@@ -52,7 +59,7 @@
       width: 100%;
       background: var(--accent);
       border: none;
-      color: #fff;
+      color: var(--on-accent);
       border-radius: 9px;
       padding: 10px 14px;
       font-size: 0.88rem;
@@ -67,7 +74,7 @@
     }
     #convList::-webkit-scrollbar { width: 5px; }
     #convList::-webkit-scrollbar-track { background: transparent; }
-    #convList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    #convList::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
     .conv-empty {
       padding: 14px 10px;
       color: var(--text-dim);
@@ -155,7 +162,7 @@
     #btnClear:hover { border-color: var(--danger); color: var(--danger); }
     #btnPreset:hover, #btnSearch:hover { border-color: var(--accent); color: var(--accent); }
     #btnSearch.active {
-      background: rgba(108,99,255,.14);
+      background: var(--accent-soft);
       border-color: var(--accent);
       color: var(--accent);
     }
@@ -169,7 +176,7 @@
     }
     #messages::-webkit-scrollbar { width: 5px; }
     #messages::-webkit-scrollbar-track { background: transparent; }
-    #messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    #messages::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
 
     .msg-row {
       display: flex;
@@ -204,7 +211,7 @@
     }
     .msg-row.user .bubble {
       background: var(--user-bg);
-      border-color: rgba(108,99,255,.35);
+      border-color: var(--accent-border);
     }
 
     /* 气泡内图片预览 */
@@ -218,7 +225,7 @@
 
     /* 代码块 */
     .bubble pre {
-      background: #12141f;
+      background: var(--code-bg);
       border: 1px solid var(--border);
       border-radius: 8px;
       padding: 12px 14px;
@@ -227,6 +234,13 @@
       margin: 8px 0;
     }
     .bubble code { font-family: 'Fira Code', Consolas, monospace; }
+    .bubble :not(pre) > code {
+      background: var(--code-bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 1px 4px;
+      font-size: .88em;
+    }
 
     /* 打字光标 */
     .typing-cursor::after {
@@ -317,14 +331,14 @@
       display: flex; align-items: center; justify-content: center;
       cursor: pointer; transition: all .15s; flex-shrink: 0;
     }
-    .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(108,99,255,.08); }
+    .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
 
     #btnSend {
       width: 42px; height: 42px;
       border-radius: 10px;
       border: none;
       background: var(--accent);
-      color: #fff;
+      color: var(--on-accent);
       display: flex; align-items: center; justify-content: center;
       cursor: pointer; flex-shrink: 0;
       transition: background .15s, transform .1s;
@@ -350,7 +364,7 @@
       z-index: 10;
       align-items: center;
       justify-content: center;
-      background: rgba(0,0,0,.45);
+      background: var(--overlay);
       padding: 20px;
     }
     #presetModal.show { display: flex; }
@@ -360,7 +374,7 @@
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 18px;
-      box-shadow: 0 18px 60px rgba(0,0,0,.35);
+      box-shadow: var(--shadow);
     }
     .preset-dialog h2 {
       font-size: 1rem;
@@ -404,7 +418,7 @@
     #btnSavePreset {
       background: var(--accent);
       border-color: var(--accent);
-      color: #fff;
+      color: var(--on-accent);
     }
     #btnClearPreset:hover { border-color: var(--danger); color: var(--danger); }