xRangerDEandClaude Opus 4.7
874f64c1ba
The six-tile overview grid at the top of the Statistik tab built
each KPI card as a four-property inline-styled div:
<div style="background: var(--bg-elevated); border: 1px solid
var(--border-soft); border-radius: 6px; padding: 12px;">
<div style="font-size: 11px; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.5px;">
<div style="font-size: 22px; font-weight: 600; margin-top: 4px;">
<div style="font-size: 12px; color: var(--text-secondary);
margin-top: 4px;">
Each card repeated the same ~250 chars of inline styling. Card hover
state, number alignment, future polish all required editing the
renderer.
Extracted to .stats-kpi-card + .stats-kpi-label + .stats-kpi-value
+ .stats-kpi-sub. Added two enhancements while at it:
- subtle hover state (purple-tint border + 1px lift) so the cards
feel interactive in line with the rest of the apps language
- font-variant-numeric: tabular-nums on values + subs so the
numbers align properly across the six-tile grid
Also stats-no-root for the "Download folder not found" fallback
that grid-column-spans across all 6 columns.
The remaining 22 inline styles in renderer-stats (top-streamers
bar list, activity calendar, size buckets) come in subsequent
iterations.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>