/* One stylesheet for both pages: the landing page and the control panel are the same site, and a second theme to keep in sync would drift within a month. Light and dark both hang off [data-theme] on , set before the first paint by static/theme.js. It used to be a bare prefers-color-scheme media query with no toggle, on the reasoning that a toggle needs somewhere to remember the choice and this page has no session to put it in — which was half right. The panel's whole user model is a git-tracked text file (admin/users.conf), so there is genuinely nowhere server-side to write a preference, and adding a mutable per-user store for a colour would be a database concern this box doesn't otherwise have. So the choice lives in localStorage and nowhere else: it is per-browser here, unlike the other three apps where it follows the account. That's the deviation, it's deliberate, and the switch says as much rather than implying it travels. */ :root { /* Native scrollbars, date pickers and select popups, which no stylesheet reaches. Stated per theme now that the device no longer decides. */ color-scheme: light; --bg: #f6f7fb; --bg-soft: #ffffff; --line: rgba(17, 24, 39, 0.08); --line-strong: rgba(17, 24, 39, 0.16); --ink: #111827; --ink-soft: #5b6579; --ink-faint: #8a93a6; --accent: #4f46e5; --accent-ink: #ffffff; --good: #16a34a; --bad: #dc2626; --warn: #d97706; /* Warmth, and only for that: the landing page's promises and its sign-off. Deliberately not `--warn`, which is the same family and means something — a panel that borrows its alert colour to look friendly is a panel whose alerts stop reading as alerts. */ --warm: #b45309; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.18); --radius: 16px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* The same colours as bare channels, for anything that needs one at an alpha: `rgba(var(--accent-rgb), 0.12)`. Not `color-mix()` and not `rgb(from …)` — both want Chromium 111, and the estate is read on a TV browser years short of it, where a colour the engine can't parse is a dropped declaration, not a fallback. See the head of apps/rasoi/web/css/rasoi-theme.css. Move a hex above and move its triple with it. */ --bg-soft-rgb: 255, 255, 255; --ink-rgb: 17, 24, 39; --ink-faint-rgb: 138, 147, 166; --accent-rgb: 79, 70, 229; --good-rgb: 22, 163, 74; --bad-rgb: 220, 38, 38; --warn-rgb: 217, 119, 6; --warm-rgb: 180, 83, 9; /* The accent pulled towards the ink, so a pale accent stays a word you can read and a dark one doesn't disappear. Four strengths because four things ask for it; the percentage in the name is what it was mixed at. */ --accent-ink-70: #3c38ac; --accent-ink-75: #403ab6; --accent-ink-78: #413cbb; --accent-ink-80: #433dbf; --accent-line-45: rgba(73, 66, 212, 0.494); /* accent 45% on --line */ --accent-good-40: #2d7e88; /* accent 40% on --good — the signed-in mark */ /* The middle of the capability ramp — see the block above .plot for what the four bands are. Ends are `--accent` and `--ink-faint`; these two are the accent mixed 70% and 42% towards the faint ink. */ --tier-2: #615dd2; --tier-3: #7173c0; } /* The same values the media query used to carry — this is a change of trigger, not of design. `system` still means the device: theme.js resolves it and sets the attribute, so the device stays the default and the choice can outrank it. */ :root[data-theme="dark"] { --bg: #0b0d13; --bg-soft: #141822; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --ink: #eef1f7; --ink-soft: #a5adbf; --ink-faint: #767f92; --accent: #818cf8; --accent-ink: #0b0d13; --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --warm: #e9a765; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7); --bg-soft-rgb: 20, 24, 34; --ink-rgb: 238, 241, 247; --ink-faint-rgb: 118, 127, 146; --accent-rgb: 129, 140, 248; --good-rgb: 74, 222, 128; --bad-rgb: 248, 113, 113; --warn-rgb: 251, 191, 36; --warm-rgb: 233, 167, 101; --accent-ink-70: #a2aaf8; --accent-ink-75: #9ca5f8; --accent-ink-78: #99a2f8; --accent-ink-80: #97a0f8; --accent-line-45: rgba(140, 150, 249, 0.494); --accent-good-40: #60bdb0; --tier-2: #7e88d9; --tier-3: #7b84bd; color-scheme: dark; } * { box-sizing: border-box; } /* The whole admin page is sections toggled with the `hidden` attribute, and a class that sets `display` beats the browser's own `[hidden] { display: none }` — which shows up as every state of the page rendering at once. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Two soft blobs behind everything. Fixed and non-interactive, so nothing on the page has to account for them. */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42rem 42rem at 12% -10%, rgba(var(--accent-rgb), 0.22), transparent 60%), radial-gradient(34rem 34rem at 92% 8%, rgba(var(--good-rgb), 0.14), transparent 62%); filter: blur(4px); } a { color: inherit; } h1, h2 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; } .wrap { max-width: 60rem; margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem) 4rem; } .mono { font-family: var(--mono); font-size: 0.86em; } .muted { color: var(--ink-soft); } /* The counterpart to .muted, for one item in a list of otherwise-quiet ones: the instance of an app that isn't answering, among the ones that are. */ .bad { color: var(--bad); } /* The same, one step down: something the scrape or the check *said*, on a row that is otherwise fine. "1 of 2 instances did not answer" is not a failure — the numbers arrived — but it is why they are lower than they should be, and in red it reads as the app being down. */ .warn { color: var(--warn); } .small { font-size: 0.82rem; } /* ------------------------------------------------------------- landing --- */ .eyebrow { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .hero { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .hero h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 700; } .lede { max-width: 34rem; margin: 0.9rem 0 0; font-size: 1.05rem; color: var(--ink-soft); } /* ------------------------------------------------------------ catalogue --- Each tile is coloured by the app it links to: --accent and --accent-2 come from the catalogue entry, and everything below is written in terms of those two. Nothing here names a specific app — and neither does this file name where they arrive from, which is two places. Served by the app, they are a nonced