feat: semantic accent colors on summary cards, infrastructure label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
2026-03-14 11:59:38 -07:00
parent a6902e8d6c
commit 2c4b212ae6
2 changed files with 36 additions and 23 deletions
+15 -5
View File
@@ -995,24 +995,34 @@ tr.clickable:hover td:first-child {
.summary-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--card-accent, var(--border));
border-radius: var(--radius-lg);
padding: 1.125rem 1.25rem;
transition: border-color 0.2s;
transition: border-color 0.2s, border-left-color 0.2s;
}
.summary-card:hover {
border-color: rgba(34, 211, 238, 0.18);
border-color: var(--card-accent, var(--border));
border-left-color: var(--card-accent, var(--border));
}
.summary-card-label {
font-size: 0.68rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.summary-card-icon {
font-size: 0.85rem;
opacity: 0.7;
}
.summary-card-value {
font-family: var(--font-display);
font-size: 2rem;