mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-06 15:02:20 +02:00
Léo
03d55dfe3c
static/style.css was 47,530 lines. It is now nine files under static/css/: tokens.css holds the :root custom properties, light theme and density classes, and style-part-01..08 carry the rest in their original order. Nothing was rewritten; every line moved verbatim and the <link> order in index.html reproduces the original file byte for byte. Cut points are brace-depth zero and outside block comments, so no rule or comment is split. All 47,531 source lines are accounted for across the fragments. The computed-style baseline recorded before the split is reproduced exactly, which is the evidence that the cascade is unchanged rather than an argument that it should be. Three things the split broke and this fixes: - The harness self-test swapped two conflicting .attach-strip blocks inside style.css to prove the digest is order-sensitive. It rewrote one hardcoded URL, so with the file gone it silently measured an unmodified page. It now searches every stylesheet, rewrites whichever holds the pair, and fails loudly if none does. - Four tests asserted the cache-bust token by matching /static/style.css?v=. They check the real invariant now, that every app stylesheet shares one token with app.js, through stylesheet_cache_version(). - The three panel stylesheets carried their own tokens, so a browser could hold half an old cascade and half a new one. All app stylesheets now bust together.
179 lines
6.5 KiB
CSS
179 lines
6.5 KiB
CSS
/* Fragment 1/9 of the former static/style.css.
|
|
*
|
|
* This is a mechanical, order-preserving slice: rules were moved verbatim
|
|
* and this file's position in the <link> order of static/index.html is what
|
|
* keeps the cascade identical. Reordering the links, or moving a rule between
|
|
* fragments, can change which of two competing declarations wins.
|
|
*
|
|
* static/index.html and the PRECACHE list in static/sw.js must list every
|
|
* fragment in the same order. tests/test_static_stylesheet_manifest.py and
|
|
* tests/test_css_computed_style_snapshot.py both fail if that drifts.
|
|
*/
|
|
/* ============================================ */
|
|
/* Odysseus UI — Consolidated Stylesheet */
|
|
/* ============================================ */
|
|
|
|
|
|
/* ── Variables ──
|
|
*
|
|
* Theme-public variables (override via theme.js or custom themes):
|
|
* Core: --bg, --fg, --panel, --border, --red
|
|
* Syntax: --hl-keyword, --hl-string, --hl-comment, --hl-function,
|
|
* --hl-number, --hl-builtin, --hl-variable, --hl-params,
|
|
* --hl-bg, --hl-fg
|
|
* Accents: --accent-primary, --accent-error (set by theme.js)
|
|
* Semantic: --color-error, --color-success, --color-warning, --color-danger,
|
|
* --color-accent, --color-muted, --color-muted-alt
|
|
*/
|
|
|
|
:root {
|
|
/* Core palette */
|
|
--bg: #282c34;
|
|
--fg: #9cdef2;
|
|
--panel: #111;
|
|
--border: #355a66;
|
|
--red: #e06c75;
|
|
/* Were `var(--green)` / `var(--warn)` — self-referential, so they
|
|
resolved to invalid and every site fell back to its own literal
|
|
(or, for sites with no fallback, painted as transparent/inherit).
|
|
Anchor them to real hex so the token layer actually works. */
|
|
--green: #50fa7b;
|
|
--warn: #f0ad4e;
|
|
|
|
/* Syntax highlighting */
|
|
--hl-bg: #1e2228;
|
|
--hl-fg: #9cdef2;
|
|
--hl-keyword: #c678dd;
|
|
--hl-string: #e5c07b;
|
|
--hl-comment: #828997;
|
|
--hl-function: #61afef;
|
|
--hl-number: #d19a66;
|
|
--hl-builtin: #56b6c2;
|
|
--hl-variable: #abb2bf;
|
|
--hl-params: #a8c0d4;
|
|
|
|
/* Semantic colors */
|
|
--color-error: #ff4444;
|
|
--color-error-light: #ff6666;
|
|
--color-success: #4caf50;
|
|
--color-warning: #f0ad4e;
|
|
--color-danger: #c0392b;
|
|
--color-recording: #ff3b30;
|
|
--color-recording-hover: #d63031;
|
|
--color-muted: #888;
|
|
--color-muted-alt: #6b7280;
|
|
--color-accent: #00aaff;
|
|
--color-agent-active: #00ff00;
|
|
--color-brand-blue: #3b82f6;
|
|
--color-blind-orange: #ff9800;
|
|
--color-save-green: var(--color-success);
|
|
--color-link-hover: #66c7ff;
|
|
--color-subheader: #6b8a94;
|
|
--select-bg: var(--bg);
|
|
--select-fg: var(--fg);
|
|
--select-option-bg: color-mix(in srgb, var(--panel) 74%, var(--bg));
|
|
--select-option-fg: var(--fg);
|
|
--select-option-active-bg: color-mix(in srgb, var(--accent, var(--red)) 24%, var(--panel));
|
|
/* Warm accent — used by the Goals/Today UI in Notes. Lives as a token so
|
|
themes can override without touching the goal CSS. */
|
|
--accent-warm: #d19a66;
|
|
}
|
|
|
|
:root.light {
|
|
--bg: #f5f5f5;
|
|
--fg: #2b2b2b;
|
|
--panel: #fff;
|
|
--border: #bbb;
|
|
--hl-bg: #f9f9f9;
|
|
--hl-fg: #2b2b2b;
|
|
--hl-keyword: #7928a1;
|
|
--hl-string: #986801;
|
|
--hl-comment: #6a737d;
|
|
--hl-function: #005cc5;
|
|
--hl-number: #986801;
|
|
--hl-builtin: #0070a0;
|
|
--hl-variable: #383a42;
|
|
--hl-params: #4a4f5c;
|
|
--select-bg: #eaeaea;
|
|
--select-fg: var(--fg);
|
|
--select-option-bg: var(--panel);
|
|
--select-option-fg: var(--fg);
|
|
--select-option-active-bg: color-mix(in srgb, var(--red) 16%, var(--panel));
|
|
}
|
|
|
|
/* ── Reset & Base ── */
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { overflow-x: hidden; height: 100%; margin: 0; overscroll-behavior: none; }
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
/* Keep the base padding transition for older layout paths that still adjust
|
|
the body directly. Edge docks reserve workspace room on the flex panes
|
|
below so left + right docks can coexist without skewing the whole body. */
|
|
transition: padding-left 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
padding-right 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
font-family: var(--font-family, 'Fira Code', monospace);
|
|
display: flex;
|
|
height: 100%;
|
|
height: 100dvh; /* dynamic viewport height — adapts when mobile keyboard opens */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Self-hosted Fira Code font */
|
|
@font-face { font-family: 'Fira Code'; font-weight: 300; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Fira Code'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Fira Code'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-SemiBold.woff2') format('woff2'); }
|
|
|
|
/* GohuFont is the default UI face across themes; keep the shipped font local
|
|
so the default is available before custom-font discovery completes. */
|
|
@font-face { font-family: 'GohuFont'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/custom/GohuFont.ttf') format('truetype'); }
|
|
|
|
/* Self-hosted OpenDyslexic — dyslexia-friendly accessibility font option (SIL OFL 1.1) */
|
|
@font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2'); }
|
|
@font-face { font-family: 'OpenDyslexic'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2'); }
|
|
|
|
/* Code block baseline */
|
|
pre, code, .hljs {
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
@supports selector(::-webkit-scrollbar) {
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--panel);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--red);
|
|
border-radius: 4px;
|
|
border: 2px solid var(--panel);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: color-mix(in srgb, var(--red) 80%, white);
|
|
}
|
|
}
|
|
|
|
html {
|
|
scrollbar-color: var(--red) var(--panel);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
/* Utility */
|
|
.red-text { color: var(--red); }
|
|
|
|
/* ── Density Overrides ── */
|
|
|
|
:root.density-compact { font-size: 13px; }
|
|
:root.density-compact .msg { padding: 6px 10px; margin-bottom: 4px; }
|
|
:root.density-compact .list-item { padding: 4px 8px; }
|
|
:root.density-compact .sidebar .section { padding: 0; }
|
|
:root.density-spacious { font-size: 16px; }
|
|
:root.density-spacious .msg { padding: 14px 18px; margin-bottom: 12px; }
|
|
:root.density-spacious .list-item { padding: 8px 12px; }
|
|
:root.density-spacious .sidebar .section { padding: 0; }
|