style: sidebar UX polish — unified dividers, letter-spacing, contrast, font floor
- Unify sidebar dividers: one dashed style + --sidebar-rule token (replaces 4 old tokens) - Remove total-line border from invoice/value/summary groups (keep monthly only) - Add --text-spacing-money: 0.05em token (was hardcoded 0.02em) for price readability - Bump 6 font sizes from 8-10px to 0.6875rem (11px minimum floor) - Darken --muted: Dark #9e9588→#b0a99f (6.6:1), Light #6a6157→#554e46 (6.5:1) - Remove opacity on 9 text elements that were double-muting with --muted color - Normalize divider weight across themes: Dark/Light 75%, Glass 0.16 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -97,10 +97,8 @@
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.group-label-sections {
|
||||
opacity: 0.6;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
@@ -206,7 +204,7 @@
|
||||
max-width: none;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
.section-title-tag { font-size: 0.9375rem; font-weight: 400; opacity: 0.6; }
|
||||
.section-title-tag { font-size: 0.9375rem; font-weight: 400; }
|
||||
.section-subtitle {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
@@ -496,8 +494,8 @@
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
}
|
||||
.pill-toggle label .pill-price small { font-size: 0.875rem; opacity: 0.6; }
|
||||
.pill-toggle label .pill-desc { font-size: 0.875rem; opacity: 0.7; }
|
||||
.pill-toggle label .pill-price small { font-size: 0.875rem; }
|
||||
.pill-toggle label .pill-desc { font-size: 0.875rem; }
|
||||
.pill-toggle label .pill-savings {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
@@ -1015,7 +1013,7 @@
|
||||
with _m IDs and synced by update() via syncEl/syncClass.
|
||||
─────────────────────────────────────────────────────────────── */
|
||||
.sidebar {
|
||||
--sidebar-rule-color: var(--sidebar-line-rule);
|
||||
--sidebar-rule-color: var(--sidebar-rule);
|
||||
--sidebar-copy-size: 0.84375rem;
|
||||
--sidebar-copy-line: 1.5;
|
||||
--sidebar-note-size: 0.78125rem;
|
||||
@@ -1114,7 +1112,7 @@
|
||||
.sidebar-focus-client-label {
|
||||
display: block;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--ink) 62%, var(--muted));
|
||||
@@ -1173,7 +1171,7 @@
|
||||
flex: 0 0 auto;
|
||||
min-height: 12px;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
@@ -1189,7 +1187,7 @@
|
||||
color: var(--muted);
|
||||
line-height: var(--sidebar-copy-line);
|
||||
padding: var(--space-stack-tight) var(--space-xs);
|
||||
border-bottom: var(--border-thin) var(--sidebar-line-rule-style) var(--sidebar-rule-color);
|
||||
border-bottom: var(--border-thin) var(--sidebar-rule-style) var(--sidebar-rule-color);
|
||||
border-left: var(--border-medium) solid transparent;
|
||||
border-radius: 2px;
|
||||
transition: background var(--transition-fast, 150ms) ease,
|
||||
@@ -1208,7 +1206,7 @@
|
||||
color: var(--text-money);
|
||||
font-size: var(--sidebar-copy-size);
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: var(--text-spacing-money);
|
||||
flex: 0 0 auto;
|
||||
padding-left: var(--space-sm);
|
||||
text-align: right;
|
||||
@@ -1216,7 +1214,7 @@
|
||||
.sidebar-line .lbl-icon { margin-right: var(--space-sm); opacity: 0.82; }
|
||||
.sidebar-mrr-label {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
@@ -1242,7 +1240,6 @@
|
||||
height: 15px;
|
||||
}
|
||||
.sidebar-line-opportunity {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
.sidebar-line-opportunity .val {
|
||||
color: var(--amber);
|
||||
@@ -1353,7 +1350,6 @@
|
||||
}
|
||||
#nudgeCounter {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.nudge-nav-btn {
|
||||
background: var(--surface-ghost);
|
||||
@@ -1501,7 +1497,7 @@
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 8px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -1723,7 +1719,7 @@
|
||||
color: var(--muted);
|
||||
font-family: 'DM Mono', monospace;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: var(--text-spacing-money);
|
||||
padding: var(--space-xs) 0 var(--space-stack) var(--space-2xl);
|
||||
}
|
||||
.sl-sub-row {
|
||||
@@ -1755,8 +1751,8 @@
|
||||
}
|
||||
|
||||
/* Per-user cost section */
|
||||
.per-user-cost-sub { display: inline-block; font-size: 0.625rem; opacity: 0.6; font-weight: 400; margin-top: 3px; }
|
||||
.sidebar-note-mono { font-size: var(--sidebar-mono-size); padding: 2px 0 6px; font-family: 'DM Mono', monospace; line-height: 1.45; }
|
||||
.per-user-cost-sub { display: inline-block; font-size: 0.6875rem; font-weight: 400; margin-top: 3px; }
|
||||
.sidebar-note-mono { font-size: var(--sidebar-mono-size); padding: 2px 0 6px; font-family: 'DM Mono', monospace; line-height: 1.65; }
|
||||
|
||||
/* VS Comparison block */
|
||||
.vs-comparison-wrap {
|
||||
@@ -1777,7 +1773,7 @@
|
||||
margin-top: var(--space-stack);
|
||||
padding-top: var(--space-md);
|
||||
border-top: var(--border-thin) solid var(--border);
|
||||
line-height: 1.6;
|
||||
line-height: 1.75;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -1814,23 +1810,26 @@
|
||||
/* Sidebar utility classes — !important overrides .sidebar-line .val compound selector */
|
||||
.sl-muted { color: var(--muted) !important; font-size: 0.6875rem; }
|
||||
.sl-discount-val { color: var(--green) !important; }
|
||||
.sl-discount-detail { font-size: 0.7rem; opacity: 0.7; }
|
||||
.sl-discount-detail { font-size: 0.75rem; }
|
||||
.sl-hst-val { color: var(--text-money) !important; font-size: var(--sidebar-copy-size); }
|
||||
.sidebar-line-discount { border-bottom-style: dashed; border-bottom-color: var(--sidebar-rule-color); opacity: 0.8; }
|
||||
.sidebar-line-discount { opacity: 0.8; }
|
||||
.sidebar-line.sidebar-line-hst {
|
||||
margin-top: 0;
|
||||
padding-top: var(--space-stack-tight);
|
||||
padding-bottom: var(--space-stack-tight);
|
||||
border-top: var(--border-thin) var(--sidebar-line-rule-style) var(--sidebar-rule-color);
|
||||
border-top: var(--border-thin) var(--sidebar-rule-style) var(--sidebar-rule-color);
|
||||
border-bottom: none;
|
||||
}
|
||||
.sidebar-line.sidebar-line-total {
|
||||
font-weight: 600;
|
||||
margin-top: var(--space-sm);
|
||||
border-top: var(--border-medium) solid color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
padding-top: var(--space-stack-roomy);
|
||||
}
|
||||
.sidebar-group--monthly .sidebar-line.sidebar-line-total {
|
||||
border-top: var(--border-medium) var(--sidebar-rule-style) var(--sidebar-rule-color);
|
||||
}
|
||||
.sidebar-line.sidebar-line-total .val {
|
||||
font-size: 1.1em;
|
||||
font-weight: 700;
|
||||
@@ -1840,7 +1839,7 @@
|
||||
font-size: 0.7em;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: var(--text-spacing-money);
|
||||
}
|
||||
.sl-hst-toggle {
|
||||
justify-content: flex-start;
|
||||
@@ -1989,7 +1988,7 @@
|
||||
}
|
||||
.quote-notes-label {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 10px;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
@@ -2016,7 +2015,6 @@
|
||||
}
|
||||
.quote-notes-input::placeholder {
|
||||
color: var(--muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ── EXPORT BUTTONS ─────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user