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

29
templates/login.html
View file

@ -4,22 +4,22 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in — Media Centre</title> <title>Sign in — 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #121110; --bg: #141416;
--surface: #1a1816; --surface: #1a1a1d;
--surface-2: #211e1b; --surface-2: #202024;
--border: #2c2823; --border: #2c2c31;
--text: #f0ebe4; --text: #edecf1;
--text-2: #b8ada0; --text-2: #a8a7b0;
--text-3: #948879; --text-3: #7c7b84;
--accent: #e07a35; --accent: #7c86ff;
--danger: #e08a6e; --danger: #dc5b52;
--danger-dim: rgba(224,138,110,0.1); --danger-dim: rgba(220,91,82,0.14);
--fs-xs: 0.75rem; --fs-xs: 0.75rem;
--fs-sm: 0.8125rem; --fs-sm: 0.8125rem;
--fs-base: 0.9375rem; --fs-base: 0.9375rem;
@ -94,11 +94,12 @@
input::placeholder { color: var(--text-3); } input::placeholder { color: var(--text-3); }
.error-msg { .error-msg {
background: var(--danger-dim); background: var(--surface-2);
border: 1px solid rgba(224,138,110,0.35); border: 1px solid var(--border);
border-left: 3px solid var(--danger);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
padding: 0.7rem 0.85rem; padding: 0.7rem 0.85rem;
color: var(--danger); color: var(--text-2);
font-size: var(--fs-sm); font-size: var(--fs-sm);
margin-bottom: 1rem; margin-bottom: 1rem;
} }

24
templates/settings.html
View file

@ -4,23 +4,23 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings — Media Centre</title> <title>Settings — 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #121110; --bg: #141416;
--surface: #1a1816; --surface: #1a1a1d;
--surface-2: #211e1b; --surface-2: #202024;
--border: #2c2823; --border: #2c2c31;
--border-lt: #3a342c; --border-lt: #38383f;
--text: #f0ebe4; --text: #edecf1;
--text-2: #b8ada0; --text-2: #a8a7b0;
--text-3: #948879; --text-3: #7c7b84;
--accent: #e07a35; --accent: #7c86ff;
--ok: #8bc48a; --ok: #68b98a;
--danger: #e08a6e; --danger: #dc5b52;
--fs-xs: 0.75rem; --fs-xs: 0.75rem;
--fs-sm: 0.8125rem; --fs-sm: 0.8125rem;
--fs-base: 0.9375rem; --fs-base: 0.9375rem;