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