Rework dashboard color palette and fix Prowlarr card layout
All checks were successful
Deploy / deploy (push) Successful in 25s
All checks were successful
Deploy / deploy (push) Successful in 25s
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
parent
a30cb4a30e
commit
bf10f438d2
3 changed files with 60 additions and 50 deletions
|
|
@ -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 & indexers</h2>
|
||||
<div class="row cols-2">
|
||||
<div class="row cols-2 align-top">
|
||||
|
||||
<!-- Ombi -->
|
||||
<div class="card">
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121110;
|
||||
--surface: #1a1816;
|
||||
--surface-2: #211e1b;
|
||||
--border: #2c2823;
|
||||
--text: #f0ebe4;
|
||||
--text-2: #b8ada0;
|
||||
--text-3: #948879;
|
||||
--accent: #e07a35;
|
||||
--danger: #e08a6e;
|
||||
--danger-dim: rgba(224,138,110,0.1);
|
||||
--bg: #141416;
|
||||
--surface: #1a1a1d;
|
||||
--surface-2: #202024;
|
||||
--border: #2c2c31;
|
||||
--text: #edecf1;
|
||||
--text-2: #a8a7b0;
|
||||
--text-3: #7c7b84;
|
||||
--accent: #7c86ff;
|
||||
--danger: #dc5b52;
|
||||
--danger-dim: rgba(220,91,82,0.14);
|
||||
--fs-xs: 0.75rem;
|
||||
--fs-sm: 0.8125rem;
|
||||
--fs-base: 0.9375rem;
|
||||
|
|
@ -94,11 +94,12 @@
|
|||
input::placeholder { color: var(--text-3); }
|
||||
|
||||
.error-msg {
|
||||
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.7rem 0.85rem;
|
||||
color: var(--danger);
|
||||
color: var(--text-2);
|
||||
font-size: var(--fs-sm);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121110;
|
||||
--surface: #1a1816;
|
||||
--surface-2: #211e1b;
|
||||
--border: #2c2823;
|
||||
--border-lt: #3a342c;
|
||||
--text: #f0ebe4;
|
||||
--text-2: #b8ada0;
|
||||
--text-3: #948879;
|
||||
--accent: #e07a35;
|
||||
--ok: #8bc48a;
|
||||
--danger: #e08a6e;
|
||||
--bg: #141416;
|
||||
--surface: #1a1a1d;
|
||||
--surface-2: #202024;
|
||||
--border: #2c2c31;
|
||||
--border-lt: #38383f;
|
||||
--text: #edecf1;
|
||||
--text-2: #a8a7b0;
|
||||
--text-3: #7c7b84;
|
||||
--accent: #7c86ff;
|
||||
--ok: #68b98a;
|
||||
--danger: #dc5b52;
|
||||
--fs-xs: 0.75rem;
|
||||
--fs-sm: 0.8125rem;
|
||||
--fs-base: 0.9375rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue