/* ----------------------------------------------------------- Base / Modern defaults - Uses Tailwind-inspired color tokens via CSS variables - Honors prefers-color-scheme - Roboto Mono stack (assumes @import added in ) - Keeps original selector behavior compatible ----------------------------------------------------------- */ :root { /* Tailwind palette tokens (light) */ --bg: #ffffff; /* white */ --text: #0f172a; /* slate-900 */ --muted: #475569; /* slate-600 */ --rule: #64748b; /* slate-500 */ --link: #2563eb; /* blue-600 */ --link-hover: #1d4ed8; /* blue-700 */ --target-bg: #d4d4d4; /* neutral-300 */ --row-hover: #f1f5f9; /* slate-100 */ --blob-link: #475569; /* slate-600 */ --add: #16a34a; /* green-600 */ --add-alt: #059669; /* emerald-600 (hover alt) */ --del: #dc2626; /* red-600 */ --del-alt: #b91c1c; /* red-700 */ /* Typography */ --font-mono: "Roboto Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-weight-normal: 400; /* Spacing (em-based so it scales with font size) */ --space-x: 0.4em; /* Focus ring */ --focus-ring: 2px solid #38bdf8; /* sky-400 */ } /* Dark scheme */ @media (prefers-color-scheme: dark) { :root { --bg: #020617; /* slate-950 */ --text: #cbd5e1; /* slate-300 */ --muted: #a1a1aa; /* zinc-400 */ --rule: #1f2937; /* gray-800 */ --link: #56c8ff; /* custom-ish: close to sky-300/blue-300 vibe */ --link-hover: #7dd3fc; /* sky-300 */ --target-bg: #0b1220; /* between slate-900 & 950 */ --row-hover: #0f172a; /* slate-900 */ --blob-link: #9ca3af; /* gray-400 */ --add: #22c55e; /* green-500 */ --add-alt: #10b981; /* emerald-500 */ --del: #ef4444; /* red-500 */ --del-alt: #dc2626; /* red-600 */ } } /* Inform the UA that we support both color schemes for native widgets */ :root { color-scheme: light dark; } /* Minimal modern reset for this scope */ *, *::before, *::after { box-sizing: border-box; } html:focus-within { scroll-behavior: smooth; } /* Respect user motion preferences for any future animations */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- Body & type ------------------------------------------------------------------ */ body { color: var(--text); background-color: var(--bg); font-family: var(--font-mono); font-weight: var(--font-weight-normal); font-size: 12px; line-height: 1.2; margin: 25px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; text-wrap: pretty; /* modern CSS for nicer wrapping */ } /* Headings: preserve original sizing & margins */ :where(h1, h2, h3, h4, h5, h6) { font-size: 1em; margin: 0; } /* Alignments */ :where(img, h1, h2) { vertical-align: middle; } /* Images */ img { border: 0; max-inline-size: 100%; block-size: auto; } /* Links */ a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: from-font; } a:hover { color: var(--link-hover); } a.d, a.h, a.i, a.line { text-decoration: none; } /* Target highlight */ a:target { background-color: var(--target-bg); } /* Accessible focus styles without changing layout */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; text-decoration: none; } /* Blob links */ #blob a { color: var(--blob-link); } #blob a:hover { color: var(--link); text-decoration: none; } /* Tables */ table thead td { font-weight: bold; } table td { padding-block: 0; padding-inline: var(--space-x); } /* Content tables */ #content table td { vertical-align: top; white-space: nowrap; } /* Hover rows (preserved selectors) */ #branches tr:hover td, #tags tr:hover td, #index tr:hover td, #log tr:hover td, #files tr:hover td { background-color: var(--row-hover); } /* Allow wrap on specific columns (preserving nth-child targets) */ #index tr td:nth-child(2), #tags tr td:nth-child(3), #branches tr td:nth-child(3), #log tr td:nth-child(2) { white-space: normal; } /* Numeric alignment */ td.num { text-align: right; } /* Descriptions / secondary text */ .desc { color: var(--muted); } /* Horizontal rule */ hr { border: 0; border-top: 1px solid var(--rule); height: 1px; margin-block: 1rem; } /* Pre/code */ pre { font-family: var(--font-mono); overflow-x: auto; tab-size: 4; } /* Diff-ish colors (A/H/I/D classes kept) */ pre a.h { color: #0891b2; } /* cyan-600 (light) / close to #00cdcd in dark via vars below */ .A, span.i, pre a.i { color: var(--add); } .D, span.d, pre a.d { color: var(--del); } /* Hover: keep no-underline */ pre a.h:hover, pre a.i:hover, pre a.d:hover { text-decoration: none; } /* Slight dark-mode tweaks matching originals via variables */ @media (prefers-color-scheme: dark) { pre a.h { color: #22d3ee; } /* cyan-400 */ .A, span.i, pre a.i { color: var(--add-alt); } .D, span.d, pre a.d { color: var(--del-alt); } /* When targeting inside blob in dark, nudge contrast */ #blob a:target { color: #e5e7eb; } /* gray-200 */ }