mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-06 20:02:49 +08:00
refactor(chat): 聊天界面字体大小统一使用 CSS 变量 (#194)
将 chat.css 中硬编码的 font-size 改为 --font-size-xs/sm/md/lg/xl 变量，支持统一字体缩放。 Thanks @h91312 for the contribution!
This commit is contained in:
h91312
@@ -51,7 +51,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
@@ -101,7 +101,7 @@
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
font-size: 15px;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
@@ -139,7 +139,7 @@
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -192,20 +192,20 @@
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary));
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chat-workspace-agent-title {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-workspace-path {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -261,7 +261,7 @@
|
||||
}
|
||||
|
||||
.chat-workspace-section-title {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
@@ -311,7 +311,7 @@
|
||||
}
|
||||
|
||||
.chat-workspace-core-name {
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
@@ -320,7 +320,7 @@
|
||||
}
|
||||
|
||||
.chat-workspace-core-status {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -387,7 +387,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.chat-workspace-editor-pane {
|
||||
@@ -409,7 +409,7 @@
|
||||
|
||||
.chat-workspace-current-file {
|
||||
min-width: 0;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
@@ -427,7 +427,7 @@
|
||||
|
||||
.chat-workspace-editor-meta {
|
||||
padding: 10px 16px 0;
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
min-height: 18px;
|
||||
}
|
||||
@@ -442,7 +442,7 @@
|
||||
padding: 14px 16px 18px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.65;
|
||||
font-family: 'Cascadia Code', 'SF Mono', Consolas, monospace;
|
||||
}
|
||||
@@ -452,7 +452,7 @@
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 14px 16px 18px;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
@@ -475,7 +475,7 @@
|
||||
border: 1px dashed var(--border-primary);
|
||||
border-radius: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.6;
|
||||
background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
|
||||
}
|
||||
@@ -551,7 +551,7 @@
|
||||
|
||||
.msg.msg-system {
|
||||
align-self: center;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-muted, #999);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
max-width: 100%;
|
||||
@@ -571,7 +571,7 @@
|
||||
.msg-bubble {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -692,7 +692,7 @@
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 8px 0;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.msg-ai .msg-bubble th,
|
||||
@@ -761,7 +761,7 @@
|
||||
height: auto !important;
|
||||
background: none !important;
|
||||
animation: none !important;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
@@ -806,7 +806,7 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 1.5;
|
||||
background: var(--bg-secondary, var(--bg-card));
|
||||
color: var(--text-primary);
|
||||
@@ -861,7 +861,7 @@
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-lg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -875,7 +875,7 @@
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* 断连提示：细条 + 中性色，与聊天区融合，不抢视觉焦点 */
|
||||
/* 断连提示 */
|
||||
.chat-disconnect-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -884,7 +884,7 @@
|
||||
padding: 4px 10px;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
@@ -994,7 +994,7 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
@@ -1009,7 +1009,7 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 3px;
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1022,7 +1022,7 @@
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.chat-session-del {
|
||||
@@ -1030,7 +1030,7 @@
|
||||
border: none;
|
||||
color: var(--text-muted, #999);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-lg);
|
||||
padding: 0 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
@@ -1049,7 +1049,7 @@
|
||||
.chat-session-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted, #999);
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
@@ -1100,7 +1100,7 @@
|
||||
}
|
||||
|
||||
.cmd-group-title {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted, #888);
|
||||
padding: 6px 8px 2px;
|
||||
@@ -1115,7 +1115,7 @@
|
||||
padding: 7px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
@@ -1126,7 +1126,7 @@
|
||||
.cmd-name {
|
||||
color: var(--accent);
|
||||
font-family: 'SF Mono', monospace;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
@@ -1186,7 +1186,7 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1218,7 +1218,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 4px;
|
||||
padding: 0 4px;
|
||||
@@ -1228,16 +1228,16 @@
|
||||
.msg-ai .msg-meta { justify-content: flex-start; }
|
||||
|
||||
.msg-meta .msg-time {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.msg-meta .msg-tokens {
|
||||
font-size: 10px;
|
||||
font-size: var(--font-size-xs);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.msg-meta .msg-duration {
|
||||
font-size: 10px;
|
||||
font-size: var(--font-size-xs);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@@ -1323,7 +1323,7 @@
|
||||
max-width: 200px;
|
||||
}
|
||||
.msg-file-size {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1342,7 +1342,7 @@
|
||||
}
|
||||
.msg-tool-item > summary {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
list-style: none;
|
||||
}
|
||||
@@ -1364,7 +1364,7 @@
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.msg-tool-title {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@@ -1389,7 +1389,7 @@
|
||||
background: var(--accent-muted, rgba(99, 102, 241, 0.08));
|
||||
border: 1px solid var(--accent-border, rgba(99, 102, 241, 0.2));
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
@@ -1401,7 +1401,7 @@
|
||||
}
|
||||
.chat-guide-content b {
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
.chat-guide-content p {
|
||||
margin: 4px 0 0;
|
||||
@@ -1413,7 +1413,7 @@
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-xl);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
@@ -1524,9 +1524,9 @@
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-primary);
|
||||
}
|
||||
.chat-hosted-label { font-weight: 600; font-size: 14px; }
|
||||
.chat-hosted-label { font-weight: 600; font-size: var(--font-size-md); }
|
||||
.chat-hosted-badge {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
@@ -1555,12 +1555,12 @@
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
.hosted-agent-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-xl);
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 8px;
|
||||
@@ -1583,7 +1583,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
font-size: var(--font-size-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
.hosted-agent-switch input { display: none; }
|
||||
@@ -1613,7 +1613,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 2px 0;
|
||||
}
|
||||
.hosted-agent-tag { color: var(--text-tertiary); }
|
||||
@@ -1624,7 +1624,7 @@
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.hosted-agent-advanced-title {
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
@@ -1632,15 +1632,15 @@
|
||||
}
|
||||
/* 滑块控件 */
|
||||
.ha-slider-group { padding: 4px 0; }
|
||||
.ha-slider-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.ha-slider-val { font-weight: 700; color: var(--accent); font-size: 14px; }
|
||||
.ha-slider-label { font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.ha-slider-val { font-weight: 700; color: var(--accent); font-size: var(--font-size-md); }
|
||||
.ha-slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: var(--bg-tertiary); border-radius: 3px; outline: none; cursor: pointer; }
|
||||
.ha-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
|
||||
.ha-slider:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.ha-slider-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
|
||||
.ha-slider-ticks { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
|
||||
/* 定时器 */
|
||||
.ha-timer-group { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
|
||||
.ha-timer-header { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
|
||||
.ha-timer-header { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); color: var(--text-secondary); }
|
||||
.ha-toggle { display: inline-flex; cursor: pointer; }
|
||||
.ha-toggle input { display: none; }
|
||||
.ha-toggle-track { width: 34px; height: 18px; border-radius: 9px; background: var(--bg-tertiary); position: relative; transition: background 0.2s; }
|
||||
@@ -1652,7 +1652,7 @@
|
||||
.ha-countdown { margin-top: 8px; }
|
||||
.ha-countdown-bar { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
|
||||
.ha-countdown-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success, #22c55e)); border-radius: 3px; transition: width 1s linear; }
|
||||
.ha-countdown-text { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; display: block; text-align: right; }
|
||||
.ha-countdown-text { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; display: block; text-align: right; }
|
||||
.hosted-agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.hosted-agent-actions {
|
||||
display: flex;
|
||||
@@ -1667,7 +1667,7 @@
|
||||
.hosted-agent-footer {
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.msg-hosted {
|
||||
@@ -1675,6 +1675,6 @@
|
||||
border: 1px dashed rgba(148, 163, 184, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user