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

Switch palette to graphite & orange
All checks were successful
Deploy / deploy (push) Successful in 27s
Details

Browse source 
Replaces the slate/indigo palette with a warmer graphite base and an
orange accent (#e07a35), per user's pick from a side-by-side comparison
of five directions. Same token structure, same contrast bar (all pairs
still >= 4.5:1) — only the hex values changed, across dashboard, login
and settings plus the three embedded favicons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-26 08:20:40 -07:00
parent 339b9f3310
commit 018bc58bbf
3 changed files with 45 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

42
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='%237aa2f7'/><path d='M40 32 L72 50 L40 68 Z' fill='%230f1319'/></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='%23e07a35'/><path d='M40 32 L72 50 L40 68 Z' fill='%23121110'/></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: #0f1319; --bg: #121110;
--surface: #161b23; --surface: #1a1816;
--surface-2: #1c222c; --surface-2: #211e1b;
--border: #262e3a; --border: #2c2823;
--border-lt: #333d4d; --border-lt: #3a342c;
/* ── Text (all ≥ 5:1 on every surface above) ── */ /* ── Text (all ≥ 4.5:1 on every surface above) ── */
--text: #e6ebf2; --text: #f0ebe4;
--text-2: #a8b3c4; --text-2: #b8ada0;
--text-3: #8592a6; --text-3: #948879;
/* ── Accent + semantics ── */ /* ── Accent + semantics ── */
--accent: #7aa2f7; --accent: #e07a35;
--accent-dim: rgba(122,162,247,0.12); --accent-dim: rgba(224,122,53,0.12);
--ok: #4ade80; --ok: #8bc48a;
--ok-dim: rgba(74,222,128,0.12); --ok-dim: rgba(139,196,138,0.12);
--warn: #fbbf24; --warn: #e0c458;
--warn-dim: rgba(251,191,36,0.12); --warn-dim: rgba(224,196,88,0.12);
--danger: #f87171; --danger: #e08a6e;
--danger-dim: rgba(248,113,113,0.1); --danger-dim: rgba(224,138,110,0.1);
/* ── 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(248,113,113,0.35); } .svc-pill.down { color: var(--danger); border-color: rgba(224,138,110,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); }
@ -516,7 +516,7 @@
font-size: var(--fs-xs); font-size: var(--fs-xs);
min-width: 0; min-width: 0;
} }
.indexer-item.down { border-color: rgba(248,113,113,0.3); } .indexer-item.down { border-color: rgba(224,138,110,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) ────────────────────────────────── */
@ -589,7 +589,7 @@
/* ── Errors ─────────────────────────────────────────── */ /* ── Errors ─────────────────────────────────────────── */
.error { .error {
background: var(--danger-dim); background: var(--danger-dim);
border: 1px solid rgba(248,113,113,0.35); border: 1px solid rgba(224,138,110,0.35);
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(--danger);

24
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='%237aa2f7'/><path d='M40 32 L72 50 L40 68 Z' fill='%230f1319'/></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='%23e07a35'/><path d='M40 32 L72 50 L40 68 Z' fill='%23121110'/></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: #0f1319; --bg: #121110;
--surface: #161b23; --surface: #1a1816;
--surface-2: #1c222c; --surface-2: #211e1b;
--border: #262e3a; --border: #2c2823;
--text: #e6ebf2; --text: #f0ebe4;
--text-2: #a8b3c4; --text-2: #b8ada0;
--text-3: #8592a6; --text-3: #948879;
--accent: #7aa2f7; --accent: #e07a35;
--danger: #f87171; --danger: #e08a6e;
--danger-dim: rgba(248,113,113,0.1); --danger-dim: rgba(224,138,110,0.1);
--fs-xs: 0.75rem; --fs-xs: 0.75rem;
--fs-sm: 0.8125rem; --fs-sm: 0.8125rem;
--fs-base: 0.9375rem; --fs-base: 0.9375rem;
@ -95,7 +95,7 @@
.error-msg { .error-msg {
background: var(--danger-dim); background: var(--danger-dim);
border: 1px solid rgba(248,113,113,0.35); border: 1px solid rgba(224,138,110,0.35);
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(--danger);

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='%237aa2f7'/><path d='M40 32 L72 50 L40 68 Z' fill='%230f1319'/></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='%23e07a35'/><path d='M40 32 L72 50 L40 68 Z' fill='%23121110'/></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: #0f1319; --bg: #121110;
--surface: #161b23; --surface: #1a1816;
--surface-2: #1c222c; --surface-2: #211e1b;
--border: #262e3a; --border: #2c2823;
--border-lt: #333d4d; --border-lt: #3a342c;
--text: #e6ebf2; --text: #f0ebe4;
--text-2: #a8b3c4; --text-2: #b8ada0;
--text-3: #8592a6; --text-3: #948879;
--accent: #7aa2f7; --accent: #e07a35;
--ok: #4ade80; --ok: #8bc48a;
--danger: #f87171; --danger: #e08a6e;
--fs-xs: 0.75rem; --fs-xs: 0.75rem;
--fs-sm: 0.8125rem; --fs-sm: 0.8125rem;
--fs-base: 0.9375rem; --fs-base: 0.9375rem;