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  /* === Shared patterns === */
84
85  :where(.repo-nav-item, .tree-row, details ul li a, details ul li button) {
86    display: flex;
87    align-items: center;
88    gap: 1rem;
89    padding: 0 1rem;
90    min-height: 50px;
91    font-family: var(--font-mono);
92  }
93
94  :where(.diff-stat-type, .diff-line-marker, .tree-icon, .summary-icon) {
95    flex-shrink: 0;
96    width: 1rem;
97    text-align: center;
98  }
99
100  :where(.blame-linenum, .st-linenum) {
101    min-width: 5ch;
102    text-align: right;
103    padding-right: 1.5ch;
104    color: var(--secondary);
105    user-select: none;
106  }
107
108  /* === Repo list === */
109
110  .repo-list { display: flex; flex-direction: column; }
111
112  .repo-card {
113    display: flex;
114    flex-direction: column;
115    gap: .5rem;
116    padding: 1rem 1.25rem;
117    text-decoration: none;
118    color: inherit;
119  }
120
121  .repo-card:hover { background: var(--highlight); }
122  .repo-name { font-size: 1.1rem; font-weight: 600; color: var(--emphasized); }
123  .repo-desc { color: var(--primary); }
124  .repo-meta { display: flex; justify-content: space-between; color: var(--secondary); }
125
126  /* === Nav items === */
127
128  .repo-nav-item {
129    text-decoration: none;
130    color: var(--primary);
131    border-top: 1px solid var(--secondary);
132  }
133
134  .repo-nav-item + .repo-nav-item { border-top: 1px solid var(--highlight); }
135  .repo-nav-item:last-child { border-bottom: 1px solid var(--secondary); }
136  .repo-nav-item:active { background-color: var(--highlight); }
137  .repo-nav-item:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
138  .repo-nav-item-meta { margin-left: auto; color: var(--secondary); }
139  .repo-nav-item-arrow { color: var(--secondary); }
140
141  /* === Tag info === */
142
143  .tag-info {
144    display: grid;
145    grid-template-columns: max-content 1fr;
146    gap: .2rem 1.5rem;
147    font-family: var(--font-mono);
148    margin: 1.5rem 1rem 1.5rem;
149  }
150
151  .tag-info dt { color: var(--secondary); }
152  .tag-info dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
153  .tag-info a { color: var(--primary); text-decoration: none; }
154  .tag-info a:hover { text-decoration: underline; text-underline-offset: 3px; }
155
156  .message {
157    font-family: var(--font-mono);
158    padding: 1rem;
159    margin: 0;
160    background: var(--highlight);
161    white-space: pre-wrap;
162    word-break: break-all;
163    color: var(--primary);
164  }
165
166  /* === Branch / tag lists === */
167
168  .branch-list, .tag-list { display: flex; flex-direction: column; }
169
170  .branch-row, .tag-row {
171    display: flex;
172    justify-content: space-between;
173    align-items: baseline;
174    padding: .75rem 1rem;
175    text-decoration: none;
176    color: inherit;
177    font-family: var(--font-mono);
178  }
179
180  .branch-row:hover, .tag-row:hover { background: var(--highlight); }
181
182  .branch-name, .tag-name {
183    overflow: hidden;
184    text-overflow: ellipsis;
185    white-space: nowrap;
186    min-width: 0;
187  }
188
189  .branch-default { color: var(--secondary); margin-right: 1rem; }
190
191  .branch-date, .tag-date {
192    display: flex;
193    align-items: baseline;
194    flex-shrink: 0;
195    color: var(--secondary);
196    padding-left: 1rem;
197  }
198
199  /* === Commit log === */
200
201  .commit-log { display: flex; flex-direction: column; }
202
203  .commit-row {
204    display: grid;
205    grid-template-columns: 5rem 1fr;
206    grid-template-rows: auto auto;
207    gap: .15rem 1rem;
208    padding: .75rem 1rem;
209    text-decoration: none;
210    color: inherit;
211    font-family: var(--font-mono);
212  }
213
214  .commit-row:hover { background: var(--highlight); }
215  .commit-sha { color: var(--secondary); grid-row: 1; }
216  .commit-parent, .commit-ref-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
217
218  .commit-message {
219    color: var(--primary);
220    grid-row: 1;
221    overflow: hidden;
222    text-overflow: ellipsis;
223    white-space: nowrap;
224  }
225
226  .commit-meta {
227    display: flex;
228    justify-content: space-between;
229    color: var(--secondary);
230    grid-column: 2;
231    grid-row: 2;
232    min-width: 0;
233  }
234
235  .commit-meta span:first-child {
236    overflow: hidden;
237    text-overflow: ellipsis;
238    white-space: nowrap;
239    min-width: 0;
240  }
241
242  .commit-meta span:last-child { flex-shrink: 0; padding-left: 1rem; }
243
244  /* === Commit graph === */
245
246  .commit-graph-layout { display: flex; align-items: flex-start; }
247
248  .commit-graph-svg {
249    flex-shrink: 0;
250    max-width: 10rem;
251    padding-left: 1rem;
252    overflow-x: auto;
253  }
254
255  .commit-graph-svg > svg { display: block; }
256
257  .commit-graph-rows {
258    flex: 1;
259    display: flex;
260    flex-direction: column;
261    min-width: 0;
262  }
263
264  .commit-graph-row {
265    height: 40px;
266    display: flex;
267    align-items: center;
268    gap: 1rem;
269    padding: 0 1rem 0 .75rem;
270    text-decoration: none;
271    color: inherit;
272    font-family: var(--font-mono);
273  }
274
275  .commit-graph-row:hover { background: var(--highlight); }
276
277  .commit-graph-row .commit-message {
278    flex: 1;
279    overflow: hidden;
280    text-overflow: ellipsis;
281    white-space: nowrap;
282  }
283
284  .commit-date { flex-shrink: 0; color: var(--secondary); }
285  .commit-ref-branch { color: var(--blue); }
286  .commit-ref-tag { color: var(--violet); }
287
288  /* === Diff stat === */
289
290  .diff-stat-type { text-align: center; }
291
292  .diff-stat-path {
293    flex: 1;
294    min-width: 0;
295    overflow: hidden;
296    text-overflow: ellipsis;
297    white-space: nowrap;
298    color: var(--primary);
299  }
300
301  .diff-stat-A { color: var(--green); }
302  .diff-stat-D { color: var(--red); }
303  .diff-stat-M { color: var(--blue); }
304  .diff-stat-R { color: var(--violet); }
305
306  /* === Inline diff === */
307
308  .diff-files { margin: 0 0 1rem; }
309
310  .diff-line { display: flex; gap: 1rem; }
311  .diff-line > span { white-space: pre; }
312  .diff-line-marker { text-align: center; }
313
314  .diff-hunks { padding: 0; margin: 0; }
315
316  .diff-hunk {
317    font-family: var(--font-mono);
318    line-height: 1.45;
319    margin: 0;
320    padding: .75rem 1rem;
321    overflow-x: auto;
322    overflow-y: hidden;
323    tab-size: 4;
324    border-bottom: 1px solid var(--highlight);
325  }
326
327  .diff-line-ctx { color: var(--secondary); }
328  .diff-line-\+ { color: var(--green); }
329  .diff-line-- { color: var(--red); }
330
331  /* === Pagination === */
332
333  .pagination {
334    display: flex;
335    justify-content: space-between;
336    padding: .75rem 1rem;
337    font-size: 1rem;
338    font-family: var(--font-mono);
339  }
340
341  .pagination a, .pagination span { flex: 1; text-align: center; }
342  .pagination a { color: var(--secondary); text-decoration: none; }
343  .pagination a:hover span:not(.pagination-sym) { text-decoration: underline; text-underline-offset: 3px; }
344
345  @media (max-width: 640px) {
346    .commit-graph-row .commit-sha,
347    .commit-graph-row .commit-date { display: none; }
348  }
349
350  /* === Details / summary === */
351
352  details { border-top: 1px solid var(--highlight); }
353  details:first-of-type { border-top: 1px solid var(--secondary); }
354  details:last-of-type { border-bottom: 1px solid var(--highlight); }
355
356  summary {
357    cursor: pointer;
358    display: flex;
359    align-items: center;
360    gap: 1rem;
361    padding: 0 1rem;
362    min-height: 50px;
363    font-family: var(--font-mono);
364    background: var(--highlight);
365  }
366
367  .summary-icon { height: 1rem; }
368
369  details[open] summary { color: var(--emphasized); }
370  summary::after { content: '[+]'; color: var(--secondary); }
371  summary:not(:has(span))::after { margin-left: auto; }
372  details[open] summary::after { content: '[-]'; }
373  summary span { color: var(--secondary); margin-left: auto; }
374
375  details > *:not(summary) { padding: .75rem 1rem; margin-bottom: 0; }
376  details > ul { list-style: none; padding: 0; margin: 0; }
377  details ul li + li { border-top: 1px solid var(--highlight); }
378
379  details ul li {
380    display: flex;
381    align-items: center;
382    gap: 1rem;
383    min-height: 50px;
384    padding: 0 1rem;
385    color: var(--secondary);
386    font-family: var(--font-mono);
387  }
388
389  details ul li:has(a), details ul li:has(button) { padding: 0; }
390
391  details ul li a,
392  details ul li button {
393    width: 100%;
394    text-align: left;
395    text-decoration: none;
396    color: inherit;
397    background: transparent;
398    border: none;
399    cursor: pointer;
400    font-size: 1rem;
401  }
402
403  details ul li a:active { background-color: var(--highlight); }
404
405  details ul li a:hover span:first-child,
406  details ul li button:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
407
408  details ul li a.see-all span:first-child { color: var(--secondary); }
409
410  details ul li a span:first-child,
411  details ul li button span:first-child {
412    flex: 1;
413    min-width: 0;
414    overflow: hidden;
415    text-overflow: ellipsis;
416    white-space: nowrap;
417    color: var(--primary);
418  }
419
420  details ul li button span:first-child { transition: opacity .1s; }
421
422  details ul li button span:nth-child(2) {
423    flex-shrink: 0;
424    min-width: 4rem;
425    text-align: right;
426    color: var(--secondary);
427  }
428
429  details ul li a span:not(:first-child) { flex-shrink: 0; color: var(--secondary); }
430
431  /* === Tree listing === */
432
433  .tree-list {
434    display: flex;
435    flex-direction: column;
436    border-top: 1px solid var(--secondary);
437    border-bottom: 1px solid var(--highlight);
438  }
439
440  .tree-row { text-decoration: none; color: inherit; }
441  .tree-icon { color: var(--secondary); }
442
443  .tree-name {
444    flex: 1;
445    min-width: 0;
446    overflow: hidden;
447    text-overflow: ellipsis;
448    white-space: nowrap;
449    color: var(--primary);
450  }
451
452  .tree-row:hover .tree-name { text-decoration: underline; text-underline-offset: 3px; }
453  .tree-row:active { background-color: var(--highlight); }
454  .tree-row + .tree-row { border-top: 1px solid var(--highlight); }
455  .tree-size { flex-shrink: 0; color: var(--secondary); }
456
457  /* === File view === */
458
459  .file-view > .tree-row { border-top: 1px solid var(--secondary); }
460  .file-view > .tree-row:first-child .tree-icon { color: var(--primary); }
461  .file-view > .tree-row + .repo-nav > .repo-nav-item { border-top-color: var(--highlight); }
462
463  .file-view > .repo-nav > .repo-nav-item:last-child {
464    border-bottom: 1px solid var(--secondary);
465  }
466
467  .file-view .repo-nav-item-arrow { margin-left: auto; }
468
469  .file-content { margin: 0; }
470
471  .file-content pre {
472    font-family: var(--font-mono);
473    line-height: 1.45;
474    padding: 1rem 1rem 1rem 0;
475    margin: 0;
476    overflow-x: auto;
477    overflow-y: hidden;
478    tab-size: 4;
479  }
480
481  .file-content .st-pre {
482    max-width: none;
483    white-space: pre;
484    background: transparent;
485  }
486
487  /* === Blame view === */
488
489  .blame-table {
490    font-family: var(--font-mono);
491    line-height: 1.45;
492    width: 100%;
493    border-collapse: collapse;
494  }
495
496  .blame-wrap {
497    overflow-x: auto;
498    padding: 1rem 1rem 1rem 0;
499  }
500
501  .blame-row:nth-child(even) { background: var(--highlight); }
502
503  .blame-sha {
504    width: 8ch;
505    padding: 0 .5rem 0 1rem;
506    text-align: right;
507    white-space: nowrap;
508  }
509
510  .blame-sha a { text-decoration: none; }
511  .blame-sha a:hover { text-decoration: underline; text-underline-offset: 3px; }
512
513  .blame-linenum {
514    width: 5ch;
515    padding: 0 1.5ch 0 .5ch;
516    text-align: right;
517    color: var(--secondary);
518    user-select: none;
519  }
520
521  .blame-code {
522    padding: 0 1rem 0 0;
523    white-space: pre;
524  }
525
526  /* === Syntax highlighting === */
527
528  .st-comment { color: var(--secondary); }
529  .st-string { color: var(--green); }
530  .st-keyword { color: var(--blue); }
531  .st-type { color: var(--violet); }
532  .st-constant { color: var(--orange); }
533  .st-function { color: var(--cyan); }
534  .st-variable { color: var(--primary); }
535  .st-operator { color: var(--primary); }
536  .st-entity { color: var(--violet); }
537  .st-attribute { color: var(--yellow); }
538  .st-number { color: var(--orange); }
539  .st-punctuation { color: var(--secondary); }
540  .st-tag { color: var(--blue); }
541  .st-storage { color: var(--blue); }
542  .st-support { color: var(--violet); }
543  .st-invalid { color: var(--red); }
544  .st-inserted { color: var(--green); }
545  .st-deleted { color: var(--red); }
546  .st-changed { color: var(--yellow); }
547  .st-heading { color: var(--emphasized); }
548  .st-bold { font-weight: bold; }
549  .st-italic { font-style: italic; }
550  .st-link { color: var(--blue); }
551  .st-raw { color: var(--green); }
552  .st-meta { color: var(--secondary); }
553  .st-section { color: var(--blue); }
554  .st-underline { text-decoration: underline; }
555  .st-linenum { display: inline-block; }
556}
557
558@layer accents {
559  .branch-name { color: var(--blue); }
560  .tag-name { color: var(--violet); }
561  .archive-link { color: var(--orange); }
562  .commit-sha { color: var(--cyan); }
563}