diff --git a/templates/chat.html b/templates/chat.html
index db76a64..51060bb 100644
--- a/templates/chat.html
+++ b/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); }