/* * cserver.cmeta.install - page styling. * * Everything is scoped under #cxi, because this page renders inside two very * different documents: the engine's internal cserver ships no CSS whatsoever * (a bare white page), while the cPlatform loads Bootstrap 5.3 and puts a * `dark-theme` class on . Scoping keeps this file from leaking into the * platform's chrome, and the variables below let the same rules serve both * themes. * * Two selectors switch to the dark palette, and BOTH are needed: * * #cxi.dark install.js, from the theme the server sent for a * signed-in user. * body.dark-theme #cxi the platform's own class, for an anonymous visitor * the server tells us nothing about. * * The second is not a nicety. This file is pulled in from inside * {% block content %}, so install.js registers its DOMContentLoaded handler * BEFORE the platform's own handler further down base.html - the one that adds * `dark-theme`. Handlers run in registration order, so when install.js looked * for the class it was not there yet and every anonymous visitor got the light * palette painted onto the platform's dark page: #1c2024 text on #0b0e14, * a contrast ratio of 1.18. CSS has no such ordering problem - the moment the * class lands the palette follows. * * It also outranks the light class: `body.dark-theme #cxi` is (0,1,1,1) * against `#cxi.light`'s (0,1,1,0), so a stale `.light` from that race cannot * win. The platform removes `dark-theme` for a user who chose light, so the * two never contradict each other. */ #cxi { --bg: #ffffff; --fg: #1c2024; --muted: #5b6570; --line: #dfe3e8; --panel: #f7f8fa; --panel-2: #eef1f4; --accent: #b8442a; --accent-fg: #ffffff; --code-bg: #23262b; --code-fg: #eceff3; --code-com: #8b98a5; --chip-bg: #ffffff; /* Links sitting ON the terminal background. That background is dark in both themes, so this stays the same in both - unlike --accent, whose light-theme value (#b8442a) scored 2.82 against it and was the one genuinely hard-to-read thing on the page. #f0785a clears 4.5 on both #23262b and #0e1013. */ --code-link: #f0785a; /* 1120 rather than 1000: at 1000 the nine OS chips wrap onto three lines and the ten compute chips onto two, leaving a single orphan on each. Past ~1060 both settle (2 lines and 1), and the prose still stops well short of a full-bleed line length on a wide monitor. */ max-width: 1120px; margin: 0 auto; padding: 18px 16px 60px; color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.55; box-sizing: border-box; } #cxi.dark, body.dark-theme #cxi { --bg: #14161a; --fg: #e6e9ed; --muted: #9aa4b0; --line: #333941; --panel: #1c1f24; --panel-2: #23272e; --accent: #e2603f; --accent-fg: #14161a; --code-bg: #0e1013; --code-fg: #e6e9ed; --code-com: #79838f; --chip-bg: #22262c; } #cxi *, #cxi *::before, #cxi *::after { box-sizing: inherit; } /* The `hidden` attribute is only a UA-level `display: none`, so ANY author rule that sets display beats it - and `.cxi-row { display: flex }` does exactly that. Without this, simple mode set hidden on every advanced row and every one of them still rendered. Needs !important because the rules it has to outrank are equally specific author rules. */ #cxi [hidden] { display: none !important; } /* ---------- header ---------- Everything in the page shares one left and right edge with the picker below it. Prose used to be clamped to 70ch, which on a wide screen left the intro ending less than halfway across while the matrix under it ran the full width - the two read as misaligned rather than as one column. */ #cxi-head { margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } #cxi-h1 { margin: 0 0 10px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; } #cxi-lede { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; } #cxi-lede b { font-weight: 600; } #cxi-sub { margin: 14px 0 0; color: var(--muted); } #cxi-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } /* One card per destination: the name people scan for, and a few words saying what they would find there. */ .cxi-link { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); text-decoration: none; line-height: 1.35; transition: border-color .12s, background .12s; } .cxi-link:hover { border-color: var(--accent); background: var(--panel-2); } .cxi-link b { font-size: 13.5px; font-weight: 600; color: var(--accent); } .cxi-link span { font-size: 12px; color: var(--muted); } .cxi-badge { align-self: center; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 20px; font-size: 12px; color: var(--muted); } /* ---------- the picker ---------- */ #cxi-matrix { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); } .cxi-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); } .cxi-row:last-child { border-bottom: 0; } .cxi-key { flex: 0 0 190px; padding: 12px 14px; background: var(--panel-2); border-right: 1px solid var(--line); font-weight: 600; font-size: 14px; display: flex; flex-direction: column; justify-content: center; } .cxi-hint { display: block; font-weight: 400; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; } .cxi-opts { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--bg); align-items: center; } /* A single option: a real