refactor(theme): global/terminal 硬编码颜色收敛进 --ot-* 语义变量(含滚动条/阴影/浮层,铁律例外保留)

This commit is contained in:
Bill committed 2026-10-16 20:25:35 +08:00
1 parent 79bea68c13
commit 606ee0fa02
2 files changed
+43 -19

No files matched your search

+28 -4
View File
@@ -13,6 +13,30 @@
--chrome-tab-ring-hover: rgba(255, 255, 255, 0.2);
--chrome-tab-fg: #98a2ab;
--chrome-tab-fg-hover: #d0d0d0;
/* Semantic layer; overwritten per theme by applyChromeTheme() via
semanticVars() — these dark values are the pre-JS fallback (and the
zero-regression dark branch). */
--ot-text: #cccccc;
--ot-text-secondary: rgba(204, 204, 204, 0.78);
--ot-text-muted: #8a8a8a;
--ot-surface: rgba(204, 204, 204, 0.05);
--ot-surface-raised: rgba(24, 26, 31, 0.85);
--ot-hover: rgba(255, 255, 255, 0.08);
--ot-border: rgba(255, 255, 255, 0.16);
--ot-border-strong: rgba(255, 255, 255, 0.16);
--ot-success: #3fb950;
--ot-success-fg: #3fb950;
--ot-danger: #f85149;
--ot-danger-fg: #f85149;
--ot-warning: #d29922;
--ot-warning-fg: #d29922;
--ot-info: #58a6ff;
--ot-info-fg: #58a6ff;
--ot-scrollbar: rgba(125, 145, 170, 0.5);
--ot-scrollbar-active: rgba(150, 172, 200, 0.7);
--ot-shadow: rgba(0, 0, 0, 0.45);
--ot-focus-ring: rgba(59, 142, 234, 0.2);
color-scheme: dark;
}
html,
@@ -32,7 +56,7 @@ body,
tracks + arrow buttons that look broken on the dark surface. */
* {
scrollbar-width: thin;
scrollbar-color: rgba(125, 145, 170, 0.5) transparent;
scrollbar-color: var(--ot-scrollbar, rgba(125, 145, 170, 0.5)) transparent;
}
*::-webkit-scrollbar {
@@ -45,7 +69,7 @@ body,
}
*::-webkit-scrollbar-thumb {
background: rgba(125, 145, 170, 0.5);
background: var(--ot-scrollbar, rgba(125, 145, 170, 0.5));
border: 3px solid transparent;
border-radius: 6px;
background-clip: padding-box;
@@ -53,7 +77,7 @@ body,
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(150, 172, 200, 0.7);
background: var(--ot-scrollbar-active, rgba(150, 172, 200, 0.7));
border: 3px solid transparent;
background-clip: padding-box;
}
@@ -134,7 +158,7 @@ button {
overflow: auto;
white-space: pre-wrap;
font-size: 12px;
color: #ff6b6b;
color: var(--ot-danger-fg, #ff6b6b);
}
.panel-error-retry {
+15 -15
View File
@@ -40,7 +40,7 @@
so it reads as a soft slate bar, never a white line. */
.terminal-view .xterm-viewport {
scrollbar-width: thin;
scrollbar-color: rgba(125, 145, 170, 0.5) transparent;
scrollbar-color: var(--ot-scrollbar, rgba(125, 145, 170, 0.5)) transparent;
}
.terminal-view .xterm-viewport::-webkit-scrollbar {
@@ -52,7 +52,7 @@
}
.terminal-view .xterm-viewport::-webkit-scrollbar-thumb {
background: rgba(125, 145, 170, 0.5);
background: var(--ot-scrollbar, rgba(125, 145, 170, 0.5));
border: 3px solid transparent;
border-radius: 6px;
background-clip: padding-box;
@@ -60,7 +60,7 @@
}
.terminal-view .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: rgba(150, 172, 200, 0.7);
background: var(--ot-scrollbar-active, rgba(150, 172, 200, 0.7));
border: 3px solid transparent;
background-clip: padding-box;
}
@@ -147,7 +147,7 @@
border: 1px solid var(--chrome-border);
border-radius: 8px;
background: var(--chrome-bg-deep);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
box-shadow: 0 6px 20px var(--ot-shadow, rgba(0, 0, 0, 0.4));
font-size: 12px;
color: var(--chrome-fg);
user-select: none;
@@ -210,7 +210,7 @@
gap: 2px;
padding: 2px;
border-radius: 6px;
background: rgba(24, 26, 31, 0.85);
background: var(--ot-surface-raised, rgba(24, 26, 31, 0.85));
border: 1px solid var(--chrome-border);
/* Hidden until the terminal is hovered — it must not sit over the output. */
opacity: 0;
@@ -234,14 +234,14 @@
border: none;
border-radius: 4px;
background: transparent;
color: #8a8a8a;
color: var(--ot-text-muted, #8a8a8a);
font-size: 12px;
cursor: pointer;
}
.term-rec-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
color: var(--ot-text, #ffffff);
background: var(--ot-hover, rgba(255, 255, 255, 0.1));
}
.term-rec-btn.is-recording {
@@ -278,7 +278,7 @@
background: var(--chrome-bg);
border: 1px solid var(--chrome-border);
border-radius: 8px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
box-shadow: 0 8px 28px var(--ot-shadow, rgba(0, 0, 0, 0.55));
user-select: none;
box-sizing: border-box;
}
@@ -308,8 +308,8 @@
.term-suggest-item:hover,
.term-suggest-item.is-active {
background: rgba(59, 142, 234, 0.18);
color: #ffffff;
background: var(--ot-focus-ring, rgba(59, 142, 234, 0.18));
color: var(--ot-text, #ffffff);
}
.term-suggest-cmd {
@@ -327,14 +327,14 @@
line-height: 1;
padding: 2px 5px;
border-radius: 4px;
color: #9a9a9a;
background: rgba(255, 255, 255, 0.08);
color: var(--ot-text-muted, #9a9a9a);
background: var(--ot-hover, rgba(255, 255, 255, 0.08));
}
.term-suggest-hint {
flex: 0 0 auto;
font-size: 11px;
color: #8a8a8a;
color: var(--ot-text-muted, #8a8a8a);
opacity: 0.9;
padding-top: 4px;
line-height: 13px;
@@ -416,7 +416,7 @@
border: none;
border-radius: 4px;
background: var(--chrome-accent);
color: #fff;
color: var(--tab-accent-fg, #fff);
font: inherit;
cursor: pointer;
}