fix: adapt admin monitor cards to dark theme

This commit is contained in:
JOJO 2026-04-05 01:22:22 +08:00
parent 0c213b0a9f
commit 7812d58a64

View File

@ -1273,16 +1273,16 @@ const applyThemeOption = (theme: ThemeKey) => {
max-width: 640px; max-width: 640px;
padding: 28px 32px; padding: 28px 32px;
border-radius: 26px; border-radius: 26px;
border: 1px solid var(--claude-border); border: 1px solid var(--theme-control-border, var(--claude-border));
background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 243, 234, 0.92)); background: linear-gradient(145deg, var(--theme-surface-soft), var(--theme-surface-muted));
box-shadow: var(--claude-shadow); box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 18px;
} }
.admin-monitor-panel.secondary { .admin-monitor-panel.secondary {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 243, 234, 0.92)); background: linear-gradient(145deg, var(--theme-surface-muted), var(--theme-surface-soft));
} }
.admin-monitor-heading { .admin-monitor-heading {
@ -1305,19 +1305,19 @@ const applyThemeOption = (theme: ThemeKey) => {
.admin-monitor-desc { .admin-monitor-desc {
margin: 0; margin: 0;
color: rgba(70, 56, 40, 0.82); color: var(--claude-text-secondary);
max-width: 460px; max-width: 460px;
} }
.admin-monitor-chip { .admin-monitor-chip {
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
border: 1px solid rgba(61, 57, 41, 0.15); border: 1px solid var(--theme-chip-border, var(--claude-border));
font-size: 12px; font-size: 12px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--claude-text-secondary); color: var(--claude-text-secondary);
background: rgba(255, 255, 255, 0.65); background: var(--theme-chip-bg, var(--claude-panel));
} }
.admin-monitor-eyebrow { .admin-monitor-eyebrow {
@ -1336,8 +1336,8 @@ const applyThemeOption = (theme: ThemeKey) => {
.admin-monitor-tag { .admin-monitor-tag {
padding: 6px 14px; padding: 6px 14px;
border-radius: 999px; border-radius: 999px;
border: 1px dashed rgba(61, 57, 41, 0.18); border: 1px dashed var(--theme-chip-border, var(--claude-border));
background: rgba(255, 255, 255, 0.8); background: var(--theme-chip-bg, var(--claude-panel));
font-size: 13px; font-size: 13px;
color: var(--claude-text-secondary); color: var(--claude-text-secondary);
} }
@ -1364,7 +1364,7 @@ const applyThemeOption = (theme: ThemeKey) => {
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
box-shadow: 0 14px 28px rgba(61, 57, 41, 0.18); box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
cursor: pointer; cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease; transition: transform 0.18s ease, box-shadow 0.18s ease;
display: inline-flex; display: inline-flex;
@ -1375,18 +1375,18 @@ const applyThemeOption = (theme: ThemeKey) => {
.admin-monitor-button.ghost { .admin-monitor-button.ghost {
background: transparent; background: transparent;
color: var(--claude-text); color: var(--claude-text);
border: 1px dashed rgba(61, 57, 41, 0.25); border: 1px dashed var(--theme-chip-border, var(--claude-border));
box-shadow: none; box-shadow: none;
} }
.admin-monitor-button:hover { .admin-monitor-button:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(61, 57, 41, 0.24); box-shadow: var(--theme-shadow-mid, var(--claude-shadow));
} }
.admin-monitor-button:active { .admin-monitor-button:active {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 12px 20px rgba(61, 57, 41, 0.2); box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
} }
.admin-monitor-hint { .admin-monitor-hint {