Fix ops button colors hidden until hover

Core styles.css ships a global button { background: var(--accent);
color: #fff } primary rule. The ops overrides reset background to
var(--surface) (white) but inherited color: #fff, leaving white text
on a white background until the hover rule swapped color to accent.

Explicitly sets color on .card-actions / .row-actions / .form-actions
buttons and reshapes .toolbar so the "+ 新增" stays primary (filled
accent) and .secondary toolbar buttons get the white-with-accent-hover
treatment.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
caoqianming 2026-05-19 11:27:21 +08:00
parent d616829988
commit c5983ab5c3
1 changed files with 31 additions and 3 deletions

View File

@ -55,14 +55,27 @@ main.ops-main {
height: 26px;
padding: 0 10px;
font-size: 12px;
border: 1px solid var(--border);
background: var(--surface);
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
cursor: pointer;
}
.toolbar button:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.toolbar button.secondary {
background: var(--surface);
color: var(--text-2);
border-color: var(--border);
}
.toolbar button.secondary:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--surface);
}
.ops-segment-list {
@ -187,6 +200,7 @@ main.ops-main {
font-size: 11px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
}
@ -310,16 +324,24 @@ main.ops-main {
padding: 0 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
}
.row-actions button:hover {
border-color: var(--accent);
color: var(--accent);
}
.row-actions button.danger {
border-color: var(--danger);
color: var(--danger);
background: var(--surface);
}
.row-actions button.danger:hover {
background: rgba(239, 68, 68, 0.06);
color: var(--danger);
}
.row-edit,
@ -399,9 +421,15 @@ main.ops-main {
padding: 4px 12px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
}
.form-actions button:hover {
border-color: var(--accent);
color: var(--accent);
}
.form-actions button[type="submit"] {
border-color: var(--accent);
color: var(--accent);
@ -409,7 +437,7 @@ main.ops-main {
.form-actions button[type="submit"]:hover {
background: var(--accent);
color: white;
color: #fff;
}
.config-table {