serversdown/terra-view
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

style(portal): warm, solid light mode — paper bg + defined cards

Browse Source 
Light mode was washed out. Switch the background to warm paper (#f7f5ef), make
panels solid white (no longer translucent/ghostly) with a warm hairline border
and a grounded two-layer shadow, and warm the text ink. Light-specific hover
shadow (the dark one is invisible on paper). Also fix two dark-only reds — the
alarm banner and active-event text now use var(--lvl-bad) so they read on both
themes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-06-11 20:34:31 +00:00
parent f760e81309
commit 505c2e3ca5
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/portal/base.html
+18 -14
View File
@@ -48,24 +48,28 @@
--lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
--m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
}
/* ---- light ---- */
/* ---- light (warm paper) ---- */
html[data-theme="light"] {
--bg: #eef1f8;
--grid: rgba(20, 42, 102, 0.05);
--aurora-1: rgba(120, 150, 220, 0.22);
--aurora-2: rgba(244, 139, 28, 0.10);
--text: #16203a;
--text-dim: #5d6b86;
--border: rgba(20, 42, 102, 0.13);
--border-bright: rgba(20, 42, 102, 0.22);
--panel-a: rgba(255, 255, 255, 0.92);
--panel-b: rgba(248, 250, 254, 0.85);
--panel-inset: rgba(255, 255, 255, 0.6);
--panel-shadow: 0 18px 40px -28px rgba(40, 55, 95, 0.35);
--header-bg: rgba(244, 246, 251, 0.80);
--bg: #f7f5ef; /* warm paper */
--grid: rgba(92, 78, 52, 0.05); /* warm faint grid */
--aurora-1: rgba(120, 140, 205, 0.15); /* soft cool wash */
--aurora-2: rgba(244, 139, 28, 0.12); /* brand warmth */
--text: #2a2620; /* warm charcoal ink */
--text-dim: #7c756a; /* warm muted */
--border: rgba(60, 50, 35, 0.15);
--border-bright: rgba(60, 50, 35, 0.12);
--panel-a: #ffffff; /* solid — no longer ghostly */
--panel-b: #fbfaf5;
--panel-inset: rgba(255, 255, 255, 0.9);
--panel-shadow: 0 14px 30px -16px rgba(60, 50, 35, 0.26), 0 2px 6px -2px rgba(60, 50, 35, 0.08);
--header-bg: rgba(247, 245, 239, 0.85);
--lvl-ok: #16a34a; --lvl-warn: #d97706; --lvl-bad: #dc2626;
--m-lp: #2563eb; --m-lmax: #dc2626; --m-l1: #9333ea; --m-l10: #d97706;
}
/* On light, the hover-lift shadow wants warm depth (the dark one is invisible on paper). */
html[data-theme="light"] .panel-hover:hover {
box-shadow: 0 22px 44px -20px rgba(60, 50, 35, 0.30), 0 0 0 1px var(--accent-glow);
}
html, body { height: 100%; }
body {