1@layer reset, layout, components, accents;
2
3@layer reset {
4  *, *::before, *::after { box-sizing: border-box; }
5  html { overflow-x: clip; }
6  * { scrollbar-width: thin; scrollbar-color: var(--highlight) transparent; }
7  *::-webkit-scrollbar { width: 6px; height: 6px; }
8  *::-webkit-scrollbar-track { background: none; }
9  *::-webkit-scrollbar-thumb { background: var(--highlight); border-radius: 3px; }
10}
11
12@layer layout {
13  body {
14    font-family: var(--font-body);
15    max-width: 860px;
16    margin: 0 auto;
17    padding: 0;
18    background: var(--background);
19    color: var(--primary);
20  }
21
22  header {
23    padding: .75rem 1rem;
24    margin-bottom: .75rem;
25  }
26
27  header ul {
28    list-style: none;
29    margin: 0;
30    padding: 0;
31    display: flex;
32    align-items: center;
33    gap: .25rem;
34    font-size: 1.2rem;
35    min-width: 0;
36  }
37
38  header li {
39    white-space: nowrap;
40    overflow: hidden;
41    text-overflow: ellipsis;
42    min-width: 0;
43  }
44
45  header li:first-child { flex-shrink: 0; }
46  header li:last-child { flex-shrink: 1; }
47
48  header li + li::before {
49    content: '/';
50    margin-right: .25rem;
51    color: var(--secondary);
52  }
53
54  header a {
55    color: var(--primary);
56    text-decoration: none;
57  }
58
59  header a:hover {
60    color: var(--emphasized);
61    text-decoration: underline;
62    text-underline-offset: 3px;
63  }
64
65  main > h1, main > p { padding-inline: 1rem; }
66  main > h1 { margin-bottom: .75rem; }
67  main > p { margin-top: 0; }
68  main > article { padding: 0 1rem; }
69
70  footer {
71    padding: 1rem;
72    margin-top: 2rem;
73    color: var(--secondary);
74    font-size: .875rem;
75    text-align: center;
76  }
77
78  footer a { color: var(--blue); text-decoration: none; }
79  footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
80}
81
82@layer components {
83  /* Repo list */
84  .repo-list { display: flex; flex-direction: column; }
85
86  .repo-card {
87    display: flex;
88    flex-direction: column;
89    gap: .5rem;
90    padding: 1rem 1.25rem;
91    text-decoration: none;
92    color: inherit;
93  }
94
95  .repo-card:hover { background: var(--highlight); }
96  .repo-name { font-size: 1.1rem; font-weight: 600; color: var(--emphasized); }
97  .repo-desc { color: var(--primary); }
98  .repo-meta { display: flex; justify-content: space-between; color: var(--secondary); }
99
100  /* Repo nav items */
101  .repo-nav-item {
102    display: flex;
103    align-items: center;
104    gap: 1rem;
105    padding: 0 1rem;
106    min-height: 50px;
107    text-decoration: none;
108    color: var(--primary);
109    font-family: var(--font-mono);
110    border-top: 1px solid var(--secondary);
111  }
112
113  .repo-nav-item + .repo-nav-item { border-top: 1px solid var(--highlight); }
114  .repo-nav-item:last-child { border-bottom: 1px solid var(--secondary); }
115  .repo-nav-item:active { background-color: var(--highlight); }
116  .repo-nav-item:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
117  .repo-nav-item-meta { margin-left: auto; color: var(--secondary); }
118  .repo-nav-item-arrow { color: var(--secondary); }
119
120  /* Tag info */
121  .tag-info {
122    display: grid;
123    grid-template-columns: max-content 1fr;
124    gap: .2rem 1.5rem;
125    font-family: var(--font-mono);
126    margin: 1.5rem 1rem 1.5rem;
127  }
128
129  .tag-info dt { color: var(--secondary); }
130  .tag-info dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
131  .tag-info a { color: var(--primary); text-decoration: none; }
132  .tag-info a:hover { text-decoration: underline; text-underline-offset: 3px; }
133
134  .message {
135    font-family: var(--font-mono);
136    padding: 1rem;
137    margin: 0;
138    background: var(--highlight);
139    white-space: pre-wrap;
140    word-break: break-all;
141    color: var(--primary);
142  }
143
144  /* Branch / tag lists */
145  .branch-list, .tag-list { display: flex; flex-direction: column; }
146
147  .branch-row, .tag-row {
148    display: flex;
149    justify-content: space-between;
150    align-items: baseline;
151    padding: .75rem 1rem;
152    text-decoration: none;
153    color: inherit;
154    font-family: var(--font-mono);
155  }
156
157  .branch-row:hover, .tag-row:hover { background: var(--highlight); }
158
159  .branch-name, .tag-name {
160    overflow: hidden;
161    text-overflow: ellipsis;
162    white-space: nowrap;
163    min-width: 0;
164  }
165
166  .branch-default { color: var(--secondary); margin-right: 1rem; }
167
168  .branch-date, .tag-date {
169    display: flex;
170    align-items: baseline;
171    flex-shrink: 0;
172    color: var(--secondary);
173    padding-left: 1rem;
174  }
175
176  /* Commit log */
177  .commit-log { display: flex; flex-direction: column; }
178
179  .commit-row {
180    display: grid;
181    grid-template-columns: 5rem 1fr;
182    grid-template-rows: auto auto;
183    gap: .15rem 1rem;
184    padding: .75rem 1rem;
185    text-decoration: none;
186    color: inherit;
187    font-family: var(--font-mono);
188  }
189
190  .commit-row:hover { background: var(--highlight); }
191  .commit-sha { color: var(--secondary); grid-row: 1; }
192  .commit-parent, .commit-ref-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
193
194  .commit-message {
195    color: var(--primary);
196    grid-row: 1;
197    overflow: hidden;
198    text-overflow: ellipsis;
199    white-space: nowrap;
200  }
201
202  .commit-meta {
203    display: flex;
204    justify-content: space-between;
205    color: var(--secondary);
206    grid-column: 2;
207    grid-row: 2;
208    min-width: 0;
209  }
210
211  .commit-meta span:first-child {
212    overflow: hidden;
213    text-overflow: ellipsis;
214    white-space: nowrap;
215    min-width: 0;
216  }
217
218  .commit-meta span:last-child { flex-shrink: 0; padding-left: 1rem; }
219
220  /* Commit graph layout */
221  .commit-graph-layout {
222    display: flex;
223    align-items: flex-start;
224  }
225
226  .commit-graph-svg {
227    flex-shrink: 0;
228    max-width: 10rem;
229    padding-left: 1rem;
230    overflow-x: auto;
231  }
232
233  .commit-graph-svg > svg {
234    display: block;
235  }
236
237  .commit-graph-rows {
238    flex: 1;
239    display: flex;
240    flex-direction: column;
241    min-width: 0;
242  }
243
244  .commit-graph-row {
245    height: 40px;
246    display: flex;
247    align-items: center;
248    gap: 1rem;
249    padding: 0 1rem 0 .75rem;
250    text-decoration: none;
251    color: inherit;
252    font-family: var(--font-mono);
253  }
254
255  .commit-graph-row:hover { background: var(--highlight); }
256
257  .commit-graph-row .commit-message {
258    flex: 1;
259    overflow: hidden;
260    text-overflow: ellipsis;
261    white-space: nowrap;
262  }
263
264  .commit-date {
265    flex-shrink: 0;
266    color: var(--secondary);
267  }
268
269  .commit-ref-branch { color: var(--blue); }
270  .commit-ref-tag { color: var(--violet); }
271  .tag-info .commit-ref-branch { color: var(--blue); }
272  .tag-info .commit-ref-tag { color: var(--violet); }
273
274  /* Diff stat */
275  .diff-stat-type {
276    flex-shrink: 0;
277    width: 1rem;
278    text-align: center;
279  }
280
281  .diff-stat-path {
282    flex: 1;
283    min-width: 0;
284    overflow: hidden;
285    text-overflow: ellipsis;
286    white-space: nowrap;
287    color: var(--primary);
288  }
289
290  .diff-stat-A { color: var(--green); }
291  .diff-stat-D { color: var(--red); }
292  .diff-stat-M { color: var(--blue); }
293  .diff-stat-R { color: var(--violet); }
294
295  /* Inline diff */
296  .diff-files {
297    margin: 0 0 1rem;
298  }
299
300  .diff-line { display: flex; gap: 1rem; }
301  .diff-line > span { white-space: pre; }
302
303  .diff-line-marker {
304    flex-shrink: 0;
305    width: 1rem;
306    text-align: center;
307  }
308
309  .diff-hunks { padding: 0; margin: 0; }
310
311  .diff-hunk {
312    font-family: var(--font-mono);
313    line-height: 1.45;
314    margin: 0;
315    padding: .75rem 1rem;
316    overflow-x: auto;
317    overflow-y: hidden;
318    tab-size: 4;
319    border-bottom: 1px solid var(--highlight);
320  }
321
322  .diff-line-ctx { color: var(--secondary); }
323  .diff-line-\+ { color: var(--green); }
324  .diff-line-- { color: var(--red); }
325
326  /* Pagination */
327  .pagination { display: flex; justify-content: space-between; padding: .75rem 1rem; font-size: 1rem; font-family: var(--font-mono); }
328  .pagination a, .pagination span { flex: 1; text-align: center; }
329  .pagination a { color: var(--secondary); text-decoration: none; }
330  .pagination a:hover span:not(.pagination-sym) { text-decoration: underline; text-underline-offset: 3px; }
331
332  @media (max-width: 640px) {
333    .commit-graph-row .commit-sha,
334    .commit-graph-row .commit-date {
335      display: none;
336    }
337  }
338
339  /* Details / summary */
340  details { border-top: 1px solid var(--highlight); }
341  details:first-of-type { border-top: 1px solid var(--secondary); }
342  details:last-of-type { border-bottom: 1px solid var(--highlight); }
343
344  summary {
345    cursor: pointer;
346    display: flex;
347    align-items: center;
348    gap: 1rem;
349    padding: 0 1rem;
350    min-height: 50px;
351    font-family: var(--font-mono);
352    background: var(--highlight);
353  }
354
355  .summary-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
356
357  details[open] summary { color: var(--emphasized); }
358  summary::after { content: '[+]'; color: var(--secondary); }
359  summary:not(:has(span))::after { margin-left: auto; }
360  details[open] summary::after { content: '[-]'; }
361  summary span { color: var(--secondary); margin-left: auto; }
362
363  details > *:not(summary) { padding: .75rem 1rem; margin-bottom: 0; }
364  details > ul { list-style: none; padding: 0; margin: 0; }
365  details ul li + li { border-top: 1px solid var(--highlight); }
366
367  details ul li {
368    display: flex;
369    align-items: center;
370    gap: 1rem;
371    min-height: 50px;
372    padding: 0 1rem;
373    color: var(--secondary);
374    font-family: var(--font-mono);
375  }
376
377  details ul li:has(a),
378  details ul li:has(button) { padding: 0; }
379
380  details ul li a,
381  details ul li button {
382    display: flex;
383    align-items: center;
384    gap: 1rem;
385    padding: 0 1rem;
386    min-height: 50px;
387    width: 100%;
388    text-align: left;
389    text-decoration: none;
390    color: inherit;
391    background: transparent;
392    border: none;
393    cursor: pointer;
394    font-family: var(--font-mono);
395    font-size: 1rem;
396  }
397
398  details ul li a:active { background-color: var(--highlight); }
399
400  details ul li a:hover span:first-child,
401  details ul li button:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
402
403  details ul li a.see-all span:first-child { color: var(--secondary); }
404
405  /* First span grows; truncates on overflow */
406  details ul li a span:first-child,
407  details ul li button span:first-child {
408    flex: 1;
409    min-width: 0;
410    overflow: hidden;
411    text-overflow: ellipsis;
412    white-space: nowrap;
413    color: var(--primary);
414  }
415
416  /* Clone rows: URL animates on copy */
417  details ul li button span:first-child { transition: opacity .1s; }
418  details ul li button span:nth-child(2) {
419    flex-shrink: 0;
420    min-width: 4rem;
421    text-align: right;
422    color: var(--secondary);
423  }
424
425  /* Branch/tag rows: remaining spans fixed right */
426  details ul li a span:not(:first-child) { flex-shrink: 0; color: var(--secondary); }
427}
428
429@layer accents {
430  .branch-name { color: var(--blue); }
431  .tag-name { color: var(--violet); }
432  .archive-link { color: var(--orange); }
433  .commit-sha { color: var(--cyan); }
434}