static/style.css 23.3 KiB raw
1
@font-face {
2
  font-family: "RethinkSans";
3
  font-style: normal;
4
  font-weight: 400 800;
5
  font-display: swap;
6
  font-optical-sizing: auto;
7
  src: url(/fonts/RethinkSans.ttf);
8
}
9
@font-face {
10
  font-family: "RethinkSans";
11
  font-style: italic;
12
  font-weight: 400 800;
13
  font-display: swap;
14
  font-optical-sizing: auto;
15
  src: url(/fonts/RethinkSans-Italic.ttf);
16
}
17
@font-face {
18
  font-family: "IBM Plex Mono";
19
  font-style: normal;
20
  font-weight: 400;
21
  font-display: swap;
22
  src: url(/fonts/IBMPlexMono-Regular.ttf) format('truetype');
23
}
24
@font-face {
25
  font-family: "IBM Plex Mono";
26
  font-style: normal;
27
  font-weight: 600;
28
  font-display: swap;
29
  src: url(/fonts/IBMPlexMono-SemiBold.ttf) format('truetype');
30
}
31
@font-face {
32
  font-family: "IBM Plex Mono";
33
  font-style: italic;
34
  font-weight: 400;
35
  font-display: swap;
36
  src: url(/fonts/IBMPlexMono-Italic.ttf) format('truetype');
37
}
38
39
:root {
40
  --fg: #112;
41
  --fg-dim: #666;
42
  --fg-headers: #222;
43
  --bg: #d3d1d1;
44
  --bg-alt: #dedddd;
45
  --border: #888;
46
  --link: #223377;
47
  --link-dim: #334477;
48
  --add-bg: #cdd6cd;
49
  --add-fg: #2e7d32;
50
  --del-bg: #d9cdcd;
51
  --del-fg: #c62828;
52
  --color-dim: #334;
53
  --color-dimmer: #666;
54
  --color-secondary: #225533;
55
  --color-highlight: #223377;
56
  --color-highlight-dim: #334477;
57
  --mono: "IBM Plex Mono", monospace;
58
  --sans: "RethinkSans", sans-serif;
59
}
60
61
* { margin: 0; padding: 0; box-sizing: border-box; }
62
63
body {
64
  font-family: var(--sans);
65
  font-size: 16px;
66
  line-height: 1.4;
67
  color: var(--fg);
68
  background: var(--bg);
69
  -webkit-font-smoothing: antialiased;
70
  -moz-osx-font-smoothing: grayscale;
71
  -webkit-text-size-adjust: 100%;
72
  text-size-adjust: 100%;
73
}
74
75
::selection {
76
  color: var(--bg);
77
  background: var(--link);
78
}
79
80
.container {
81
  margin: 0 auto;
82
  padding: 0 1rem 2rem;
83
}
84
85
code, pre, kbd { font-family: var(--mono); font-size: 0.875rem; }
86
87
a { color: var(--link); text-decoration: none; }
88
a:hover { text-decoration: underline; }
89
90
/* --- Nav --- */
91
92
.repo-nav {
93
  border-bottom: 1px solid var(--border);
94
  margin: 0 0 1rem;
95
  padding: 0.25rem 0 0;
96
  display: flex;
97
  align-items: flex-end;
98
}
99
.repo-name {
100
  display: flex;
101
  align-items: baseline;
102
  gap: 0.75rem;
103
  font-family: var(--sans);
104
  font-weight: 800;
105
  font-size: 1.25rem;
106
  margin-bottom: -1px;
107
  padding: 0.5rem 0;
108
}
109
.repo-name a { color: var(--fg); text-decoration: none; }
110
.repo-name a:hover { text-decoration: underline; }
111
.repo-name .logo-link { text-decoration: none; align-self: center; line-height: 0; }
112
.repo-name .logo-link:hover { text-decoration: none; }
113
.repo-name .logo { width: 16px; height: 16px; display: block; }
114
.repo-desc {
115
  color: var(--fg-dim);
116
  font-size: 1rem;
117
  font-weight: 400;
118
}
119
.tab {
120
  display: inline-block;
121
  padding: 0.5rem 0.75rem;
122
  color: var(--fg-dim);
123
  border: 1px solid transparent;
124
  border-bottom: none;
125
  margin-bottom: -1px;
126
  text-decoration: none;
127
  font-size: 1rem;
128
}
129
.tab:hover {
130
  color: var(--fg);
131
  text-decoration: none;
132
}
133
.tab.active {
134
  color: var(--fg);
135
  border-top: 1px solid var(--border);
136
  border-left: 1px solid var(--border);
137
  border-right: 1px solid var(--border);
138
  border-radius: 4px 4px 0 0;
139
  background: var(--bg);
140
}
141
.tab.tab-mono {
142
  font-family: var(--mono);
143
  font-size: 0.875rem;
144
}
145
.repo-nav .tab:first-of-type { margin-left: auto; }
146
.nav-auth {
147
  display: flex;
148
  align-items: center;
149
  gap: 0.75rem;
150
  margin-left: 1.5rem;
151
  align-self: flex-end;
152
  margin-bottom: 0.5rem;
153
  white-space: nowrap;
154
}
155
.repo-nav .repo-name + .nav-auth { margin-left: auto; }
156
.nav-btn { color: var(--fg); }
157
.nav-btn:hover { color: var(--fg); }
158
159
.avatar {
160
  width: 24px;
161
  height: 24px;
162
  border-radius: 50%;
163
  border: 1px solid var(--border);
164
  object-fit: cover;
165
  vertical-align: middle;
166
  margin-right: 0.25rem;
167
}
168
169
.avatar-menu {
170
  position: relative;
171
}
172
.avatar-menu summary {
173
  list-style: none;
174
  cursor: pointer;
175
  line-height: 0;
176
}
177
.avatar-menu summary::-webkit-details-marker { display: none; }
178
.avatar-dropdown {
179
  position: absolute;
180
  right: 0;
181
  z-index: 10;
182
  background: var(--bg);
183
  border: 1px solid var(--border);
184
  border-radius: 0 0 4px 4px;
185
  margin-top: 0.5rem;
186
  padding: 0.75rem 1rem 1rem;
187
  display: flex;
188
  flex-direction: column;
189
  gap: 0.5rem;
190
}
191
.avatar-dropdown .signed-in {
192
  font-family: var(--mono);
193
  font-size: 0.875rem;
194
  color: var(--fg-dim);
195
}
196
.avatar-dropdown .btn {
197
  text-align: center;
198
}
199
200
/* --- Headings --- */
201
202
h2 { font-family: var(--sans); font-weight: 500; font-size: 1rem; margin-bottom: 0.75rem; color: var(--fg-headers); }
203
h3 {
204
  font-family: var(--sans);
205
  font-weight: 600;
206
  font-size: 1rem;
207
  margin: 2rem 0 0.5rem;
208
  color: var(--fg);
209
}
210
h3:first-child { margin-top: 0; }
211
212
.empty { color: var(--fg-dim); font-style: italic; padding: 0.5rem 0.75rem; }
213
214
/* --- Tables --- */
215
216
table {
217
  width: 100%;
218
  border-collapse: collapse;
219
  margin-bottom: 1rem;
220
}
221
th, td {
222
  text-align: left;
223
  padding: 0.25rem 0.75rem;
224
  border-bottom: 1px solid var(--border);
225
}
226
th {
227
  font-size: 1rem;
228
  padding-top: 0.25rem;
229
  color: var(--fg-dim);
230
  font-weight: 600;
231
  border-bottom: none;
232
}
233
.repo-list tbody tr:hover,
234
.log-list tbody tr:hover,
235
.ref-list tbody tr:hover,
236
.diffstat-list tbody tr:hover { background: var(--bg-alt); }
237
.repo-list td:first-child { font-weight: 600; }
238
.repo-list td,
239
.log-list td,
240
.ref-list td { border-bottom: none; }
241
.repo-list th:first-child,
242
.repo-list td:first-child,
243
.log-list th:first-child,
244
.log-list td:first-child,
245
.ref-list th:first-child,
246
.ref-list td:first-child { padding-left: 0.5rem; }
247
.repo-list th:last-child,
248
.repo-list td:last-child,
249
.log-list th:last-child,
250
.log-list td:last-child,
251
.ref-list th:last-child,
252
.ref-list td:last-child { padding-right: 0.5rem; }
253
254
.hash { font-family: var(--mono); white-space: nowrap; }
255
.date { white-space: nowrap; color: var(--fg-dim); }
256
.author { color: var(--fg-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }
257
.subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
258
.mode { font-family: var(--mono); font-size: 1rem; color: var(--fg-dim); white-space: nowrap; }
259
.size { font-family: var(--mono); font-size: 0.875rem; color: var(--fg-dim); text-align: right; white-space: nowrap; }
260
261
.clone-url {
262
  background: var(--bg-alt);
263
  border: 1px solid var(--border);
264
  padding: 0.5rem 0.75rem;
265
  border-radius: 4px;
266
  margin-bottom: 1rem;
267
  font-family: var(--mono);
268
  font-size: 1rem;
269
}
270
.clone-url label { font-family: var(--sans); font-weight: bold; margin-right: 0.5rem; }
271
272
/* --- Breadcrumb --- */
273
274
.breadcrumb {
275
  font-family: var(--mono);
276
  font-size: 1rem;
277
  margin-bottom: 1rem;
278
  color: var(--fg-dim);
279
}
280
281
/* --- File view / blob --- */
282
283
.file-view {
284
  border: 1px solid var(--border);
285
  border-radius: 4px;
286
}
287
.file-view .blob-view { border: none; border-radius: 0; }
288
.file-header {
289
  display: flex;
290
  gap: 0.75rem;
291
  align-items: baseline;
292
  padding: 0.5rem 0.75rem;
293
  border-bottom: 1px solid var(--border);
294
  font-size: 1rem;
295
}
296
.file-header .file-name { font-weight: 600; flex: 1; }
297
.file-header .file-meta { color: var(--fg-dim); font-size: 0.875rem; }
298
.file-header .file-action {
299
  border-left: 1px solid var(--border);
300
  padding-left: 0.75rem;
301
  align-self: stretch;
302
  margin: -0.5rem 0;
303
  display: flex;
304
  align-items: center;
305
}
306
.file-view pre {
307
  margin: 0;
308
  padding: 1rem;
309
  font-family: var(--mono);
310
  font-size: 1rem;
311
  line-height: 1.5;
312
  white-space: pre;
313
  overflow-x: auto;
314
}
315
316
.blob-view {
317
  border: 1px solid var(--border);
318
  border-radius: 4px;
319
  overflow: auto hidden;
320
}
321
.blob-code {
322
  margin: 0;
323
  border: none;
324
  border-collapse: collapse;
325
  border-spacing: 0;
326
}
327
.blob-code td { border: none; padding: 0; vertical-align: top; line-height: 0; }
328
.blob-code tr:first-child td { padding-top: 0.5rem; }
329
.blob-code tr:last-child td { padding-bottom: 0.75rem; }
330
.blob-code pre { margin: 0; font-family: var(--mono); font-size: 1rem; line-height: 1.45; white-space: pre; display: inline; }
331
.line-num {
332
  width: 1%;
333
  min-width: 4rem;
334
  padding: 0 0.5rem;
335
  text-align: right;
336
  user-select: none;
337
  vertical-align: top;
338
}
339
.line-num a {
340
  color: var(--fg-dim);
341
  opacity: 0.4;
342
  font-family: var(--mono);
343
  font-size: 1rem;
344
  line-height: 1.45;
345
  display: inline-block;
346
}
347
.line-num a:hover { opacity: 1; text-decoration: none; }
348
.line-code { width: 100%; padding-left: 0.75rem; }
349
tr:target .line-num { background: var(--bg-alt); }
350
tr:target .line-code { background: var(--bg-alt); }
351
352
/* --- Commit view --- */
353
354
.commit-info { margin-bottom: 1.5rem; }
355
.commit-title {
356
  display: flex;
357
  align-items: baseline;
358
  gap: 1rem;
359
  margin-bottom: 0.75rem;
360
}
361
.commit-title .subject { font-family: var(--sans); font-weight: 600; font-size: 1.125rem; flex: 1; }
362
.commit-hash { font-family: var(--mono); font-size: 1rem; color: var(--fg-dim); white-space: nowrap; }
363
.commit-info .body { font-family: var(--mono); font-size: 1rem; margin: 0 0 1rem 0rem; white-space: pre-wrap; color: var(--fg); }
364
.commit-subtitle {
365
  display: flex;
366
  align-items: baseline;
367
  font-size: 1rem;
368
  color: var(--fg-dim);
369
  padding-top: 0.5rem;
370
}
371
.commit-meta { flex: 1; }
372
.commit-parents { white-space: nowrap; }
373
.commit-parents code { font-family: var(--mono); }
374
375
/* --- Diffstat --- */
376
377
.diffstat { margin-bottom: 1.5rem; }
378
.diffstat-summary {
379
  font-size: 1rem;
380
  color: var(--fg-dim);
381
  margin-bottom: 0.75rem;
382
}
383
.diffstat-list {
384
  font-size: 1rem;
385
  width: auto;
386
  border: 1px solid var(--border);
387
  border-radius: 4px;
388
}
389
.diffstat-list td { border: none; padding: 0.25rem 0.75rem; }
390
.diffstat-list td:first-child { padding-left: 0.75rem; padding-right: 0.5rem; width: 1%; }
391
.diffstat-list .name { font-family: var(--mono); }
392
.diffstat-list .stats {
393
  white-space: nowrap;
394
  font-family: var(--mono);
395
  text-align: right;
396
  width: 1%;
397
  padding-right: 0.75rem;
398
}
399
.diffstat-bar {
400
  display: inline-flex;
401
  gap: 1px;
402
  vertical-align: middle;
403
  margin-left: 0.5rem;
404
}
405
.diffstat-bar span {
406
  display: inline-block;
407
  width: 8px;
408
  height: 8px;
409
  border-radius: 1px;
410
}
411
.diff-header-stats { margin-left: auto; font-family: var(--mono); font-size: 1rem; white-space: nowrap; color: var(--fg-dim); }
412
.diffstat-bar .bar-add { background: var(--add-fg); }
413
.diffstat-bar .bar-del { background: var(--del-fg); }
414
.diffstat-bar .bar-neutral { background: #bbb; }
415
416
/* --- Status badges --- */
417
418
.status {
419
  font-family: var(--mono);
420
  font-size: 1rem;
421
  font-weight: 600;
422
  display: inline-block;
423
  padding: 0.125rem 0.5rem;
424
  border-radius: 4px;
425
  letter-spacing: 0.03em;
426
  border: 1px solid;
427
}
428
.status-A { color: var(--add-fg); border-color: var(--add-fg); }
429
.status-D { color: var(--del-fg); border-color: var(--del-fg); }
430
.status-M { color: #b08800; border-color: #b08800; }
431
.status-R { color: #6f42c1; border-color: #6f42c1; }
432
433
.add { color: var(--add-fg); }
434
.del { color: var(--del-fg); }
435
436
/* --- Diff files --- */
437
438
.diff-file {
439
  border: 1px solid var(--border);
440
  border-radius: 4px;
441
  margin-bottom: 1rem;
442
  overflow-x: auto;
443
}
444
.diff-header {
445
  display: flex;
446
  align-items: center;
447
  gap: 0.5rem;
448
  background: none;
449
  border-bottom: 1px solid var(--border);
450
  padding: 0.5rem 0.75rem;
451
  font-size: 1rem;
452
  font-weight: 500;
453
  color: var(--fg-headers);
454
}
455
.diff-header .status { font-weight: 600; font-size: 0.875rem; }
456
.diff-hunk {
457
  margin: 0;
458
  border: none;
459
  width: 100%;
460
}
461
.diff-hunk td { border: none; padding: 0; vertical-align: top; }
462
td.diff-num {
463
  width: 1%;
464
  min-width: 3rem;
465
  padding: 0 0.25rem 0 1rem;
466
  text-align: right;
467
  font-family: var(--mono);
468
  font-size: 1rem;
469
  line-height: 1.45;
470
  color: var(--fg-dim);
471
  opacity: 0.5;
472
  user-select: none;
473
}
474
td.diff-marker {
475
  padding: 0 0.25rem 0 1rem;
476
  font-family: var(--mono);
477
  font-size: 1rem;
478
  line-height: 1.45;
479
  user-select: none;
480
}
481
.diff-add .diff-num,
482
.diff-add .diff-marker { color: var(--add-fg); opacity: 0.7; }
483
.diff-del .diff-num,
484
.diff-del .diff-marker { color: var(--del-fg); opacity: 0.7; }
485
.diff-context .diff-marker { color: transparent; }
486
.diff-hunk pre { margin: 0; font-family: var(--mono); font-size: 1rem; line-height: 1.45; white-space: pre; padding: 0 0.75rem; }
487
.diff-hunk tr:first-child td { padding-top: 0.5rem; }
488
.diff-hunk tr:last-child td { padding-bottom: 0.5rem; }
489
.diff-add td { background: var(--add-bg); }
490
.diff-del td { background: var(--del-bg); }
491
.diff-sep {
492
  margin: 0.25rem 0;
493
  border-top: 1px dashed var(--border);
494
}
495
496
/* --- Pagination --- */
497
498
.pagination {
499
  display: flex;
500
  justify-content: center;
501
  padding: 0.75rem 0 0.25rem;
502
  font-size: 1rem;
503
}
504
505
.pagination a {
506
  padding: 0.35rem 0.75rem;
507
  border: 1px solid var(--border);
508
  color: var(--fg-dim);
509
  text-decoration: none;
510
}
511
512
.pagination a + a {
513
  border-left: none;
514
}
515
516
.pagination a:first-child {
517
  border-radius: 4px 0 0 4px;
518
}
519
520
.pagination a:last-child {
521
  border-radius: 0 4px 4px 0;
522
}
523
524
.pagination a:only-child {
525
  border-radius: 4px;
526
}
527
528
.pagination a:hover {
529
  color: var(--fg);
530
}
531
532
/* --- Last commit bar --- */
533
534
.last-commit {
535
  display: flex;
536
  align-items: center;
537
  gap: 0.75rem;
538
  border: 1px solid var(--border);
539
  border-radius: 4px;
540
  padding: 0.25rem 0.75rem;
541
  font-size: 0.875rem;
542
  overflow: hidden;
543
}
544
.last-commit .date {
545
  margin-left: -0.5rem;
546
}
547
548
/* --- Repo home (tree + content) --- */
549
550
.repo-home {
551
  display: grid;
552
  grid-template-columns: 280px 1fr;
553
  gap: 1.5rem;
554
  align-items: start;
555
}
556
/* --- Branch header --- */
557
558
.branch-header {
559
  display: flex;
560
  align-items: stretch;
561
  margin-left: auto;
562
  margin-bottom: 0.25rem;
563
}
564
.branch-header .branch-selector summary {
565
  border-radius: 4px 0 0 4px;
566
  border-right: none;
567
}
568
.branch-header .last-commit {
569
  border-radius: 0 4px 4px 0;
570
}
571
572
/* --- View nav (Files / Log) --- */
573
574
.view-nav {
575
  margin: 0 0 1rem;
576
  padding: 0.5rem 0;
577
  display: flex;
578
  align-items: center;
579
}
580
.view-nav .last-commit {
581
  margin-left: auto;
582
  margin-right: 1rem;
583
  text-align: right;
584
}
585
.view-nav .branch-selector {
586
  margin-right: 1.5rem;
587
}
588
589
/* --- Branch selector --- */
590
591
.branch-selector {
592
  position: relative;
593
}
594
.branch-selector summary {
595
  display: flex;
596
  align-items: center;
597
  gap: 0.5rem;
598
  border: 1px solid var(--border);
599
  border-radius: 4px;
600
  padding: 0.25rem 0.75rem;
601
  font-size: 0.875rem;
602
  font-family: var(--mono);
603
  cursor: pointer;
604
  list-style: none;
605
}
606
.branch-selector summary:hover {
607
  background: var(--bg-alt);
608
}
609
.branch-selector summary::-webkit-details-marker { display: none; }
610
.branch-selector summary::after {
611
  content: "";
612
  flex-shrink: 0;
613
  margin-left: auto;
614
  width: 0;
615
  height: 0;
616
  border-left: 4px solid transparent;
617
  border-right: 4px solid transparent;
618
  border-top: 5px solid var(--fg-dim);
619
}
620
.branch-selector[open] summary::after {
621
  border-top: none;
622
  border-bottom: 5px solid var(--fg-dim);
623
}
624
.branch-selector ul {
625
  position: absolute;
626
  z-index: 10;
627
  list-style: none;
628
  background: var(--bg);
629
  border: 1px solid var(--border);
630
  border-radius: 4px;
631
  margin-top: 0.25rem;
632
  padding: 0.25rem 0;
633
  min-width: 100%;
634
  max-height: 300px;
635
  overflow-y: auto;
636
}
637
.branch-selector li a {
638
  display: block;
639
  padding: 0.25rem 0.75rem;
640
  font-size: 0.875rem;
641
  font-family: var(--mono);
642
  text-decoration: none;
643
  white-space: nowrap;
644
}
645
.branch-selector li a:hover {
646
  background: var(--bg-alt);
647
  text-decoration: none;
648
}
649
.branch-selector li.active a {
650
  background: var(--bg-alt);
651
  font-weight: 600;
652
}
653
654
/* --- Clone selector --- */
655
656
.clone-selector {
657
  position: relative;
658
}
659
.clone-selector summary {
660
  display: flex;
661
  align-items: center;
662
  gap: 0.5rem;
663
  border: 1px solid var(--border);
664
  border-radius: 4px;
665
  padding: 0.25rem 0.75rem;
666
  font-size: 0.875rem;
667
  cursor: pointer;
668
  list-style: none;
669
}
670
.clone-selector summary:hover {
671
  background: var(--bg-alt);
672
}
673
.clone-selector summary::-webkit-details-marker { display: none; }
674
.clone-selector summary::after {
675
  content: "";
676
  flex-shrink: 0;
677
  margin-left: auto;
678
  width: 0;
679
  height: 0;
680
  border-left: 4px solid transparent;
681
  border-right: 4px solid transparent;
682
  border-top: 5px solid var(--fg-dim);
683
}
684
.clone-selector[open] summary::after {
685
  border-top: none;
686
  border-bottom: 5px solid var(--fg-dim);
687
}
688
.clone-dropdown {
689
  position: absolute;
690
  right: 0;
691
  z-index: 10;
692
  background: var(--bg);
693
  border: 1px solid var(--border);
694
  border-radius: 4px;
695
  margin-top: 0.25rem;
696
  padding: 0.75rem 1rem 1rem;
697
}
698
.clone-dropdown label {
699
  display: block;
700
  font-size: 0.875rem;
701
  color: var(--fg-dim);
702
  margin: 0 0 0.25rem;
703
}
704
.clone-dropdown label + input {
705
  margin-bottom: 1rem;
706
}
707
.clone-dropdown label + input:last-child {
708
  margin-bottom: 0;
709
}
710
.clone-dropdown input {
711
  font-family: var(--mono);
712
  font-size: 0.875rem;
713
  padding: 0.25rem 0.5rem;
714
  border: 1px solid var(--border);
715
  border-radius: 4px;
716
  background: var(--bg-alt);
717
  color: var(--fg);
718
  width: 24rem;
719
  outline: none;
720
}
721
.clone-dropdown input:focus {
722
  border-color: var(--fg);
723
}
724
725
/* --- File tree --- */
726
727
.tree-entry {
728
  display: flex;
729
  align-items: baseline;
730
  padding: 0.25rem 0.5rem;
731
  border-radius: 4px;
732
  color: var(--link);
733
  text-decoration: none;
734
}
735
.tree-entry:hover { text-decoration: none; background: var(--bg-alt); }
736
.tree-entry.active { background: var(--bg-alt); }
737
.tree-entry.active .name { font-weight: 600; }
738
.file-tree .name { white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
739
.file-tree .size { white-space: nowrap; margin-left: 0.5rem; }
740
741
.content-view { min-width: 0; }
742
.content-view h2 { font-size: 1rem; margin-bottom: 0.5rem; }
743
744
/* --- Error page --- */
745
746
.error-page {
747
  text-align: center;
748
  padding: 4rem 1rem;
749
}
750
.error-code {
751
  font-family: var(--mono);
752
  font-size: 1.125rem;
753
  font-weight: 600;
754
  color: var(--fg-dim);
755
  display: block;
756
  margin-bottom: 0.5rem;
757
}
758
.error-message {
759
  color: var(--fg);
760
  margin-bottom: 0.5rem;
761
}
762
.error-path {
763
  display: block;
764
  color: var(--fg-dim);
765
  margin-bottom: 1.5rem;
766
}
767
768
/* --- Footer --- */
769
770
footer {
771
  margin-top: 1.5rem;
772
  padding: 0.75rem 0 1.5rem;
773
  border-top: 1px solid var(--border);
774
  font-size: 0.875rem;
775
  color: var(--fg-dim);
776
}
777
778
footer p {
779
  display: flex;
780
  justify-content: space-between;
781
}
782
783
/* --- Syntax highlighting (Radiance) --- */
784
785
.language-radiance .comment { color: var(--color-dimmer); font-style: italic; }
786
.language-radiance .builtin { color: var(--color-secondary); }
787
.language-radiance .op { color: var(--color-dim); }
788
.language-radiance .access,
789
.language-radiance .delim { color: var(--color-dim); }
790
.language-radiance .keyword { color: var(--color-dim); font-weight: 600; }
791
.language-radiance .type { color: var(--color-highlight-dim); font-weight: 600; }
792
.language-radiance .ref { color: var(--color-dim); }
793
.language-radiance .string { color: var(--color-secondary); }
794
.language-radiance .number { color: var(--color-highlight); }
795
796
/* --- Syntax highlighting (Radiance IL) --- */
797
798
.language-ril .comment { color: var(--color-dimmer); font-style: italic; }
799
.language-ril .keyword,
800
.language-ril .instr { color: var(--color-dim); font-weight: 600; }
801
.language-ril .type { color: var(--color-highlight-dim); font-weight: 600; }
802
.language-ril .delim { color: var(--color-dim); }
803
.language-ril .number { color: var(--color-highlight); }
804
.language-ril .string { color: var(--color-secondary); }
805
.language-ril .reg { color: var(--color-secondary); }
806
.language-ril .symbol { color: var(--color-highlight-dim); }
807
.language-ril .label { color: var(--color-highlight-dim); font-style: italic; }
808
809
/* --- Discussions --- */
810
811
.discussions-header {
812
  display: flex;
813
  align-items: baseline;
814
  justify-content: space-between;
815
  margin-bottom: 1rem;
816
}
817
.discussions-header h2 { margin-bottom: 0; }
818
.discussions-actions {
819
  display: flex;
820
  align-items: center;
821
  gap: 0.75rem;
822
  margin-left: auto;
823
}
824
.signed-in {
825
  font-family: var(--mono);
826
  font-size: 0.875rem;
827
  color: var(--fg-dim);
828
}
829
830
.btn {
831
  display: inline-block;
832
  padding: 0.25rem 0.75rem;
833
  border: 1px solid var(--border);
834
  border-radius: 4px;
835
  font-size: 0.875rem;
836
  font-family: var(--sans);
837
  color: var(--fg);
838
  background: var(--bg);
839
  cursor: pointer;
840
  text-decoration: none;
841
}
842
.btn:hover { background: var(--bg-alt); text-decoration: none; }
843
.btn:disabled { opacity: 0.5; cursor: default; }
844
main .btn { font-size: 1rem; }
845
846
.discussion-list td { border-bottom: none; vertical-align: middle; }
847
.discussion-list tbody tr:hover { background: var(--bg-alt); }
848
.discussion-list th:first-child,
849
.discussion-list td:first-child { padding-left: 0.5rem; }
850
.discussion-list th:last-child,
851
.discussion-list td:last-child { padding-right: 0.5rem; text-align: right; }
852
.discussion-list .discussion-title a { color: var(--link); }
853
.discussion-list .avatar { width: 16px; height: 16px; margin-right: 0; }
854
.discussion-list .discussion-replies {
855
  white-space: nowrap;
856
  color: var(--fg-dim);
857
  text-align: left;
858
  width: 1%;
859
}
860
861
.discussion-comment {
862
  border: 1px solid var(--border);
863
  border-radius: 4px;
864
  margin-bottom: 1rem;
865
}
866
.topic-title {
867
  font-size: 1.125rem;
868
  font-weight: 600;
869
  margin: 1rem 0;
870
}
871
.discussion-comment-header {
872
  display: flex;
873
  align-items: center;
874
  padding: 0.75rem 0.75rem 0.5rem;
875
  font-size: 1rem;
876
  color: var(--fg);
877
}
878
.discussion-comment-date {
879
  font-size: 1rem;
880
  color: var(--fg-dim);
881
  white-space: nowrap;
882
  margin-left: 0.25rem;
883
}
884
.discussion-comment-author {
885
  display: inline-flex;
886
  align-items: center;
887
  gap: 0.25rem;
888
}
889
.discussion-comment-author a {
890
  color: var(--fg);
891
  text-decoration: none;
892
  font-weight: 600;
893
}
894
.discussion-comment-author a:hover {
895
  text-decoration: underline;
896
}
897
898
.post-body {
899
  padding: 0.25rem 0.75rem 0.75rem;
900
  font-size: 1rem;
901
  line-height: 1.5;
902
}
903
.post-body p {
904
  margin: 0.5rem 0;
905
}
906
.post-body p:first-child {
907
  margin-top: 0;
908
}
909
.post-body p:last-child {
910
  margin-bottom: 0;
911
}
912
.post-body code {
913
  background: var(--bg-alt);
914
  padding: 0.125rem 0.25rem;
915
  border-radius: 0.25rem;
916
}
917
.post-body pre {
918
  background: var(--bg-alt);
919
  padding: 0.75rem;
920
  border-radius: 0.25rem;
921
  margin: 0.5rem 0;
922
  overflow-x: auto;
923
}
924
.post-body pre code {
925
  padding: 0;
926
  background: none;
927
}
928
929
.discussion-form {
930
  margin-top: 1rem;
931
}
932
.discussion-form label {
933
  display: block;
934
  font-size: 0.875rem;
935
  font-weight: 600;
936
  margin-bottom: 0.5rem;
937
  color: var(--fg);
938
}
939
.discussion-form input[type="text"],
940
.discussion-form input[type="password"],
941
.discussion-form textarea {
942
  display: block;
943
  width: 100%;
944
  padding: 0.5rem 0.75rem;
945
  font-family: var(--sans);
946
  font-size: 1rem;
947
  border: 1px solid var(--border);
948
  border-radius: 4px;
949
  background: var(--bg-alt);
950
  color: var(--fg);
951
  margin-bottom: 1rem;
952
  outline: none;
953
}
954
.discussion-form input:focus,
955
.discussion-form textarea:focus {
956
  border-color: var(--fg);
957
}
958
.discussion-form textarea {
959
  resize: vertical;
960
  min-height: 4rem;
961
}
962
.discussion-form input:user-invalid,
963
.discussion-form textarea:user-invalid {
964
  border-color: var(--del-fg);
965
}
966
967
.form-actions {
968
  display: flex;
969
  align-items: center;
970
  gap: 1rem;
971
}
972
973
.form-error {
974
  color: var(--del-fg);
975
  font-size: 0.875rem;
976
}
977
978
.sign-in-prompt {
979
  color: var(--fg-dim);
980
  font-size: 0.875rem;
981
  padding: 0.75rem 0 0;
982
  margin: 0;
983
}
984
985
.login-page {
986
  max-width: 24rem;
987
  margin: 1rem 0 1rem 2rem;
988
}
989
990
.bsky-logo {
991
  width: 1rem;
992
  height: 1rem;
993
  vertical-align: -0.125rem;
994
}
995
996
.login-hint {
997
  color: var(--fg-dim);
998
  font-size: 0.875rem;
999
  margin-bottom: 1rem;
1000
  line-height: 1.5;
1001
}
1002
1003
/* --- Mobile --- */
1004
1005
@media (max-width: 720px) {
1006
  .container {
1007
    padding: 0 0.5rem 2rem;
1008
  }
1009
1010
1011
  .file-view pre,
1012
  .blob-code pre,
1013
  .blob-code .line-num a,
1014
  .diff-hunk pre,
1015
  td.diff-num,
1016
  td.diff-marker { font-size: 0.875rem; }
1017
1018
  .repo-home {
1019
    grid-template-columns: 1fr;
1020
  }
1021
  .repo-home .file-tree {
1022
    display: none;
1023
  }
1024
1025
  .view-nav {
1026
    flex-wrap: wrap;
1027
    gap: 0.5rem;
1028
  }
1029
  .view-nav .last-commit {
1030
    margin-left: 0;
1031
    width: 100%;
1032
  }
1033
1034
  .repo-nav {
1035
    flex-wrap: wrap;
1036
  }
1037
1038
  .desktop {
1039
    display: none;
1040
  }
1041
1042
  .commit-title {
1043
    flex-wrap: wrap;
1044
  }
1045
1046
  .diff-header {
1047
    flex-wrap: wrap;
1048
  }
1049
1050
  .discussions-header {
1051
    flex-wrap: wrap;
1052
    gap: 0.5rem;
1053
  }
1054
1055
}