main
1/* -----------------------------------------------------------
2 Base / Modern defaults
3 - Uses Tailwind-inspired color tokens via CSS variables
4 - Honors prefers-color-scheme
5 - Roboto Mono stack (assumes @import added in <head>)
6 - Keeps original selector behavior compatible
7----------------------------------------------------------- */
8
9:root {
10 /* Tailwind palette tokens (light) */
11 --bg: #ffffff; /* white */
12 --text: #0f172a; /* slate-900 */
13 --muted: #475569; /* slate-600 */
14 --rule: #64748b; /* slate-500 */
15 --link: #2563eb; /* blue-600 */
16 --link-hover: #1d4ed8; /* blue-700 */
17 --target-bg: #d4d4d4; /* neutral-300 */
18 --row-hover: #f1f5f9; /* slate-100 */
19 --blob-link: #475569; /* slate-600 */
20
21 --add: #16a34a; /* green-600 */
22 --add-alt: #059669; /* emerald-600 (hover alt) */
23 --del: #dc2626; /* red-600 */
24 --del-alt: #b91c1c; /* red-700 */
25
26 /* Typography */
27 --font-mono: "Roboto Mono", ui-monospace, "Cascadia Code", "Source Code Pro",
28 Menlo, Consolas, "DejaVu Sans Mono", monospace;
29 --font-weight-normal: 400;
30
31 /* Spacing (em-based so it scales with font size) */
32 --space-x: 0.4em;
33
34 /* Focus ring */
35 --focus-ring: 2px solid #38bdf8; /* sky-400 */
36}
37
38/* Dark scheme */
39@media (prefers-color-scheme: dark) {
40 :root {
41 --bg: #020617; /* slate-950 */
42 --text: #cbd5e1; /* slate-300 */
43 --muted: #a1a1aa; /* zinc-400 */
44 --rule: #1f2937; /* gray-800 */
45 --link: #56c8ff; /* custom-ish: close to sky-300/blue-300 vibe */
46 --link-hover: #7dd3fc; /* sky-300 */
47 --target-bg: #0b1220; /* between slate-900 & 950 */
48 --row-hover: #0f172a; /* slate-900 */
49 --blob-link: #9ca3af; /* gray-400 */
50
51 --add: #22c55e; /* green-500 */
52 --add-alt: #10b981; /* emerald-500 */
53 --del: #ef4444; /* red-500 */
54 --del-alt: #dc2626; /* red-600 */
55 }
56}
57
58/* Inform the UA that we support both color schemes for native widgets */
59:root { color-scheme: light dark; }
60
61/* Minimal modern reset for this scope */
62*,
63*::before,
64*::after { box-sizing: border-box; }
65
66html:focus-within { scroll-behavior: smooth; }
67
68/* Respect user motion preferences for any future animations */
69@media (prefers-reduced-motion: reduce) {
70 * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
71 transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
72}
73
74/* ----------------------------------------------------------------
75 Body & type
76------------------------------------------------------------------ */
77body {
78 color: var(--text);
79 background-color: var(--bg);
80 font-family: var(--font-mono);
81 font-weight: var(--font-weight-normal);
82 font-size: 12px;
83 line-height: 1.2;
84 margin: 25px;
85 text-rendering: optimizeLegibility;
86 -webkit-font-smoothing: antialiased;
87 text-wrap: pretty; /* modern CSS for nicer wrapping */
88}
89
90/* Headings: preserve original sizing & margins */
91:where(h1, h2, h3, h4, h5, h6) {
92 font-size: 1em;
93 margin: 0;
94}
95
96/* Alignments */
97:where(img, h1, h2) { vertical-align: middle; }
98
99/* Images */
100img { border: 0; max-inline-size: 100%; block-size: auto; }
101
102/* Links */
103a {
104 color: var(--link);
105 text-underline-offset: 2px;
106 text-decoration-thickness: from-font;
107}
108a:hover { color: var(--link-hover); }
109
110a.d,
111a.h,
112a.i,
113a.line { text-decoration: none; }
114
115/* Target highlight */
116a:target { background-color: var(--target-bg); }
117
118/* Accessible focus styles without changing layout */
119a:focus-visible,
120button:focus-visible,
121[tabindex]:focus-visible {
122 outline: var(--focus-ring);
123 outline-offset: 2px;
124 text-decoration: none;
125}
126
127/* Blob links */
128#blob a { color: var(--blob-link); }
129#blob a:hover {
130 color: var(--link);
131 text-decoration: none;
132}
133
134/* Tables */
135table thead td { font-weight: bold; }
136table td { padding-block: 0; padding-inline: var(--space-x); }
137
138/* Content tables */
139#content table td {
140 vertical-align: top;
141 white-space: nowrap;
142}
143
144/* Hover rows (preserved selectors) */
145#branches tr:hover td,
146#tags tr:hover td,
147#index tr:hover td,
148#log tr:hover td,
149#files tr:hover td {
150 background-color: var(--row-hover);
151}
152
153/* Allow wrap on specific columns (preserving nth-child targets) */
154#index tr td:nth-child(2),
155#tags tr td:nth-child(3),
156#branches tr td:nth-child(3),
157#log tr td:nth-child(2) {
158 white-space: normal;
159}
160
161/* Numeric alignment */
162td.num { text-align: right; }
163
164/* Descriptions / secondary text */
165.desc { color: var(--muted); }
166
167/* Horizontal rule */
168hr {
169 border: 0;
170 border-top: 1px solid var(--rule);
171 height: 1px;
172 margin-block: 1rem;
173}
174
175/* Pre/code */
176pre {
177 font-family: var(--font-mono);
178 overflow-x: auto;
179 tab-size: 4;
180}
181
182/* Diff-ish colors (A/H/I/D classes kept) */
183pre a.h { color: #0891b2; } /* cyan-600 (light) / close to #00cdcd in dark via vars below */
184
185.A,
186span.i,
187pre a.i {
188 color: var(--add);
189}
190
191.D,
192span.d,
193pre a.d {
194 color: var(--del);
195}
196
197/* Hover: keep no-underline */
198pre a.h:hover,
199pre a.i:hover,
200pre a.d:hover { text-decoration: none; }
201
202/* Slight dark-mode tweaks matching originals via variables */
203@media (prefers-color-scheme: dark) {
204 pre a.h { color: #22d3ee; } /* cyan-400 */
205 .A,
206 span.i,
207 pre a.i { color: var(--add-alt); }
208 .D,
209 span.d,
210 pre a.d { color: var(--del-alt); }
211 /* When targeting inside blob in dark, nudge contrast */
212 #blob a:target { color: #e5e7eb; } /* gray-200 */
213}