ninja_hippo/arr-summary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework dashboard color palette and fix Prowlarr card layout
All checks were successful
Deploy / deploy (push) Successful in 25s
Details

Browse source 
Switch from the warm graphite/orange theme to a cooler charcoal/indigo
palette with a red (not pink/purple) danger color, and restyle error
banners to sit on the normal card surface with an accent stripe instead
of washing the whole box in color. Also fix the Requests/Indexers row
stretching the Prowlarr card to match Ombi's longer request list,
leaving a large blank area under the indexer grid.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-26 13:26:56 -07:00
parent a30cb4a30e
commit bf10f438d2
3 changed files with 60 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

57
templates/dashboard.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Centre</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23e07a35'/><path d='M40 32 L72 50 L40 68 Z' fill='%23121110'/></svg>">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%237c86ff'/><path d='M40 32 L72 50 L40 68 Z' fill='%23141416'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -14,26 +14,26 @@
═══════════════════════════════════════════════════════ */
:root {
/* ── Surfaces ── */
--bg: #121110;
--surface: #1a1816;
--surface-2: #211e1b;
--border: #2c2823;
--border-lt: #3a342c;
--bg: #141416;
--surface: #1a1a1d;
--surface-2: #202024;
--border: #2c2c31;
--border-lt: #38383f;
/* ── Text (all ≥ 4.5:1 on every surface above) ── */
--text: #f0ebe4;
--text-2: #b8ada0;
--text-3: #948879;
--text: #edecf1;
--text-2: #a8a7b0;
--text-3: #7c7b84;
/* ── Accent + semantics ── */
--accent: #e07a35;
--accent-dim: rgba(224,122,53,0.12);
--ok: #8bc48a;
--ok-dim: rgba(139,196,138,0.12);
--warn: #e0c458;
--warn-dim: rgba(224,196,88,0.12);
--danger: #e08a6e;
--danger-dim: rgba(224,138,110,0.1);
--accent: #7c86ff;
--accent-dim: rgba(124,134,255,0.14);
--ok: #68b98a;
--ok-dim: rgba(104,185,138,0.14);
--warn: #d0a75a;
--warn-dim: rgba(208,167,90,0.14);
--danger: #dc5b52;
--danger-dim: rgba(220,91,82,0.14);
/* ── Type scale (6 steps, no one-offs) ── */
--fs-xs: 0.75rem; /* 12px — smallest permitted */
@ -131,7 +131,7 @@
transition: border-color 0.2s, color 0.2s;
}
.svc-pill:hover { border-color: var(--border-lt); color: var(--text); }
.svc-pill.down { color: var(--danger); border-color: rgba(224,138,110,0.35); }
.svc-pill.down { color: var(--danger); border-color: rgba(220,91,82,0.35); }
.svc-name { font-weight: 600; }
.svc-stat { color: var(--text-3); }
.svc-pill.down .svc-stat { color: var(--danger); }
@ -200,6 +200,7 @@
}
.row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.row.align-top { align-items: start; }
/* ── Card ───────────────────────────────────────────── */
.card {
@ -516,11 +517,18 @@
font-size: var(--fs-xs);
min-width: 0;
}
.indexer-item.down { border-color: rgba(224,138,110,0.3); }
.indexer-item.down { border-color: rgba(220,91,82,0.3); }
.indexer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
/* ── Requests (Ombi) ────────────────────────────────── */
.req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.req-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 30rem;
overflow-y: auto;
padding-right: 0.3rem;
}
.req-item {
display: flex;
align-items: center;
@ -588,11 +596,12 @@
/* ── Errors ─────────────────────────────────────────── */
.error {
background: var(--danger-dim);
border: 1px solid rgba(224,138,110,0.35);
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--danger);
border-radius: var(--radius-sm);
padding: 0.8rem 0.9rem;
color: var(--danger);
color: var(--text-2);
font-size: var(--fs-sm);
}
.error-detail { margin-top: 0.5rem; }
@ -986,7 +995,7 @@
<!-- ══ Requests + Indexers ══ -->
<section class="section" aria-labelledby="h-ops">
<h2 id="h-ops">Requests &amp; indexers</h2>
<div class="row cols-2">
<div class="row cols-2 align-top">
<!-- Ombi -->
<div class="card">