diff --git a/CLAUDE.md b/CLAUDE.md index 25ce703..c6dbb59 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -42,6 +42,17 @@ the user's Unraid home server. Server-side project directory is still named `SCRIPT_NAME` subpath. Server-rendered config (timezone, script root) reaches JS through `
`, never string-interpolated into a script block. + - **No `style="..."` attributes for anything static.** A one-off tweak + (button height, a margin, a font size) belongs in the matching + `static/css/*.css` file, scoped with a structural selector (an + adjacent-sibling or `:last-child` rule tied to the surrounding markup) + or a small modifier class — not inline on the element. The only + legitimate inline `style=` left in `dashboard.html` are per-request + computed values Jinja has to interpolate (a meter's `width: {{ pct + }}%`, a colour chosen by threshold) and JS-toggled initial visibility + (`display:none` on something `dashboard.js` reveals) — those can't + live in a static stylesheet. Everything else should read as a class + name, not a value. - **`static/css/base.css`** — the single source of truth for the design tokens, shared by all three templates: surfaces, a 6-step `--fs-*` type scale, semantic colours, and `--tap: 44px` for minimum touch targets. diff --git a/static/css/dashboard.css b/static/css/dashboard.css index 88d82b6..06fd4da 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -131,6 +131,9 @@ main { } .row.cols-3 { grid-template-columns: repeat(3, 1fr); } .row.cols-2 { grid-template-columns: repeat(2, 1fr); } +/* A section with two stacked rows (Watch insights) needs the same gap + between them as the grid uses between columns. */ +.row + .row { margin-top: var(--gap); } /* ── Card ───────────────────────────────────────────── */ .card { @@ -193,13 +196,13 @@ main { border-top: 1px solid var(--border); } .stream:first-child { border-top: none; padding-top: 0; } -.stream-icon { font-size: var(--fs-base); flex-shrink: 0; } +.stream-icon { font-size: var(--fs-lg); flex-shrink: 0; } .stream-info { min-width: 0; flex: 1; } .stream-title { - font-size: var(--fs-sm); font-weight: 600; + font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.stream-user { font-size: var(--fs-xs); color: var(--text-3); } +.stream-user { font-size: var(--fs-sm); color: var(--text-3); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; @@ -242,6 +245,10 @@ dl.stats { margin: 0; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } +/* Only the Downloads card stacks stats below the hero figure/sub block — + give that pairing breathing room without affecting stats blocks that + open a card (Sonarr/Radarr put dl.stats right after the search bar). */ +.card-body > [aria-live="polite"] + dl.stats { margin-top: 0.9rem; } dl.stats > div { background: var(--surface-2); border: 1px solid var(--border); @@ -595,6 +602,8 @@ dd.is-accent { color: var(--accent); } } .empty { color: var(--text-3); font-size: var(--fs-sm); } +/* Storage card's usage note trails the meter with no room to spare below it. */ +.meter-legend + .empty { margin-bottom: 0; } /* ── Errors ─────────────────────────────────────────── */ .error { diff --git a/templates/dashboard.html b/templates/dashboard.html index d509b23..4e952be 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -130,7 +130,7 @@ -Container disk usage ({{ unraid.mount }}). Set UNRAID_API_KEY for full array stats.
Container disk usage ({{ unraid.mount }}). Set UNRAID_API_KEY for full array stats.