refactor(theme): 工作区/连接侧栏/命令面板颜色语义变量化（徽章文本按 -fg 分流）
This commit is contained in:
Bill committed
1 parent
606ee0fa02
commit
83384b7233
3 files changed
+56
-56
No files matched your search
@@ -50,24 +50,24 @@
|
||||
flex: 1 1 auto;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.commands-clear-btn {
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 11px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.commands-clear-btn:hover {
|
||||
color: #cf6679 !important;
|
||||
color: var(--ot-danger-fg, #cf6679) !important;
|
||||
}
|
||||
|
||||
.commands-empty {
|
||||
padding: 20px 8px;
|
||||
text-align: center;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
|
||||
.commands-row-sub {
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -120,7 +120,7 @@
|
||||
.commands-row-del {
|
||||
flex: 0 0 auto;
|
||||
display: none;
|
||||
color: #9a9a9a;
|
||||
color: var(--ot-text-muted, #9a9a9a);
|
||||
}
|
||||
|
||||
.commands-row:hover .commands-row-del {
|
||||
@@ -128,7 +128,7 @@
|
||||
}
|
||||
|
||||
.commands-row-del:hover {
|
||||
color: #cf6679 !important;
|
||||
color: var(--ot-danger-fg, #cf6679) !important;
|
||||
}
|
||||
|
||||
/* ---- add-library modal ---- */
|
||||
@@ -141,7 +141,7 @@
|
||||
/* IPC/store failure during save: shown inside the dialog (in the app's danger
|
||||
colour) so a failed save is visible instead of a silent no-op. */
|
||||
.commands-save-error {
|
||||
color: #f85149;
|
||||
color: var(--ot-danger-fg, #f85149);
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -70,15 +70,15 @@
|
||||
.connections-group-count {
|
||||
flex: 0 0 auto;
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
background: var(--ot-hover, rgba(255, 255, 255, 0.08));
|
||||
border-radius: 9px;
|
||||
padding: 0 7px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.connections-collapse .ant-collapse-item {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid var(--ot-border, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.connections-collapse .ant-collapse-item:last-child {
|
||||
@@ -129,7 +129,7 @@
|
||||
|
||||
.connections-row-sub {
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -143,8 +143,8 @@
|
||||
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));
|
||||
}
|
||||
|
||||
.connections-row-actions {
|
||||
@@ -159,12 +159,12 @@
|
||||
}
|
||||
|
||||
.connections-row-actions .ant-btn {
|
||||
color: #9a9a9a;
|
||||
color: var(--ot-text-muted, #9a9a9a);
|
||||
}
|
||||
|
||||
.connections-row-actions .ant-btn-text: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));
|
||||
}
|
||||
|
||||
/* ---------- empty state ---------- */
|
||||
@@ -172,7 +172,7 @@
|
||||
.connections-empty {
|
||||
padding: 28px 8px;
|
||||
text-align: center;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
@@ -186,14 +186,14 @@
|
||||
}
|
||||
|
||||
.connections-form-section {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid var(--ot-border, rgba(255, 255, 255, 0.08));
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.connections-form-section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
color: var(--ot-text-secondary, rgba(255, 255, 255, 0.55));
|
||||
letter-spacing: 0.5px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
@@ -207,12 +207,12 @@
|
||||
}
|
||||
|
||||
.connections-switch-label {
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
color: var(--ot-text, rgba(255, 255, 255, 0.88));
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.connections-switch-hint {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: var(--ot-text-muted, rgba(255, 255, 255, 0.45));
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@@ -245,7 +245,7 @@
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: #cf6679;
|
||||
color: var(--ot-danger-fg, #cf6679);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -255,7 +255,7 @@
|
||||
.connections-empty-create {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
@@ -263,7 +263,7 @@
|
||||
}
|
||||
|
||||
.connections-empty-create:hover {
|
||||
color: #ffffff;
|
||||
color: var(--ot-text, #ffffff);
|
||||
background: var(--chrome-hover);
|
||||
}
|
||||
|
||||
@@ -292,15 +292,15 @@
|
||||
flex: 1 1 auto;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.connections-section-count {
|
||||
flex: 0 0 auto;
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
background: var(--ot-hover, rgba(255, 255, 255, 0.08));
|
||||
border-radius: 9px;
|
||||
padding: 0 7px;
|
||||
line-height: 18px;
|
||||
@@ -308,7 +308,7 @@
|
||||
|
||||
.connections-section-empty {
|
||||
padding: 10px 8px;
|
||||
color: #6a6a6a;
|
||||
color: var(--ot-text-muted, #6a6a6a);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -332,7 +332,7 @@
|
||||
}
|
||||
|
||||
.connections-local-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(121, 121, 121, 0.45);
|
||||
background: var(--ot-scrollbar, rgba(121, 121, 121, 0.45));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -370,8 +370,8 @@
|
||||
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));
|
||||
}
|
||||
|
||||
/* recent sessions */
|
||||
@@ -386,7 +386,7 @@
|
||||
.connections-recent-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
@@ -422,7 +422,7 @@
|
||||
.connections-recent-time {
|
||||
flex: 0 0 auto;
|
||||
font-size: 11px;
|
||||
color: #6a6a6a;
|
||||
color: var(--ot-text-muted, #6a6a6a);
|
||||
}
|
||||
|
||||
/* [M5] command history/library sidebar section fills the rest of the list. */
|
||||
|
||||
@@ -79,10 +79,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
background: #1f1f1f;
|
||||
background: var(--ot-surface-raised, #1f1f1f);
|
||||
border: 1px solid var(--chrome-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
box-shadow: 0 8px 24px var(--ot-shadow, rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
|
||||
.workspace-flyout-item {
|
||||
@@ -93,7 +93,7 @@
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: var(--ot-text, rgba(255, 255, 255, 0.85));
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
@@ -102,7 +102,7 @@
|
||||
|
||||
.workspace-flyout-item:hover {
|
||||
background: var(--chrome-hover);
|
||||
color: #ffffff;
|
||||
color: var(--ot-text, #ffffff);
|
||||
}
|
||||
|
||||
.workspace-flyout-divider {
|
||||
@@ -177,8 +177,8 @@
|
||||
--dv-tabs-and-actions-container-height: 28px;
|
||||
--dv-tab-divider-color: transparent;
|
||||
/* Pane split dividers: soft slate band at rest, accent blue on hover/drag. */
|
||||
--dv-sash-color: rgba(148, 163, 184, 0.28);
|
||||
--dv-active-sash-color: rgba(59, 142, 234, 0.75);
|
||||
--dv-sash-color: var(--ot-border, rgba(148, 163, 184, 0.28));
|
||||
--dv-active-sash-color: var(--ot-info, rgba(59, 142, 234, 0.75));
|
||||
/* Tab surfaces. Dockview paints tabs through group-scoped rules that
|
||||
outspecify our .dv-tab rules, so theme the tabs via the vars those rules
|
||||
consume — otherwise the abyss defaults (dark navy) leak onto light themes. */
|
||||
@@ -276,13 +276,13 @@
|
||||
}
|
||||
|
||||
.workspace-empty-title {
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.workspace-empty-hint {
|
||||
color: #6a6a6a;
|
||||
color: var(--ot-text-muted, #6a6a6a);
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -339,13 +339,13 @@
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
z-index: 4;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.workspace-terminal-monitor-toggle: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));
|
||||
}
|
||||
|
||||
/* ---- SSH bottom file browser (M8, FileZilla-style resizable bottom panel) ----
|
||||
@@ -553,13 +553,13 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
.workspace-bcast-pop-empty {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.workspace-bcast-pop-hint {
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
line-height: 1.4;
|
||||
border-top: 1px solid var(--chrome-border);
|
||||
padding-top: 6px;
|
||||
@@ -658,7 +658,7 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
}
|
||||
|
||||
.workspace-template-time {
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@@ -666,7 +666,7 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
.workspace-template-empty {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
}
|
||||
|
||||
/* ---- SSH connect flow modals ---- */
|
||||
@@ -702,7 +702,7 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
}
|
||||
|
||||
.hostkey-changed-title {
|
||||
color: #ff4d4f;
|
||||
color: var(--ot-danger-fg, #ff4d4f);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -722,7 +722,7 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
.connections-mode-title {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4px;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
padding: 10px 14px 2px;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -736,7 +736,7 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
}
|
||||
.commands-mode-badge-text {
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
color: var(--ot-text-muted, #8a8a8a);
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.commands-mode-badge-tag {
|
||||
@@ -747,10 +747,10 @@ body.ssh-resizing .ssh-bottom-divider {
|
||||
line-height: 16px;
|
||||
}
|
||||
.commands-mode-badge--terminal .commands-mode-badge-tag {
|
||||
color: #4cc38a;
|
||||
background: rgba(76, 195, 138, 0.14);
|
||||
color: var(--ot-success-fg, #4cc38a);
|
||||
background: color-mix(in srgb, var(--ot-success, #3fb950) 14%, transparent);
|
||||
}
|
||||
.commands-mode-badge--ssh .commands-mode-badge-tag {
|
||||
color: #6aa9ff;
|
||||
background: rgba(106, 169, 255, 0.14);
|
||||
color: var(--ot-info-fg, #6aa9ff);
|
||||
background: color-mix(in srgb, var(--ot-info, #58a6ff) 14%, transparent);
|
||||
}
|
||||
Reference in new issue
Block a user