internal/web/static/style.css
732 lines · 21705 bytes
1/* gitbay stylesheet. One file, light and dark via prefers-color-scheme.
2 Tokens first; components use tokens only. No external requests. */
3
4:root {
5 /* declare native light+dark support: correct form controls and
6 scrollbars per scheme, and opt out of browser auto-darkening */
7 color-scheme: light dark;
8
9 /* palette */
10 --bg: #ffffff;
11 --fg: #1f2328;
12 --muted: #667079;
13 --faint: #eceff1; /* hairlines, row separators */
14 --line: #d7dde2; /* control borders, card edges */
15 --surface: #f6f8fa; /* cards, code, table hover */
16 --accent: #0b6c80; /* sea blue: links, active tab, primary */
17 --accent-fg: #ffffff; /* text on accent */
18 --ok: #1a7f37;
19 --warn: #9a6700;
20 --bad: #cf222e;
21 --done: #8250df; /* merged */
22 --neutral: #667079;
23 --code-bg: #f6f8fa;
24
25 /* type */
26 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
27 "Helvetica Neue", Arial, sans-serif;
28 --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
29 "Liberation Mono", monospace;
30 --fs-0: 0.8rem; /* 12.8px: chips, fine print */
31 --fs-1: 0.866rem; /* ~13px: metadata, mono in tables */
32 --fs-2: 0.933rem; /* 14px: dense table text */
33 --fs-3: 1rem; /* 15px: body */
34 --fs-4: 1.135rem; /* ~17px: h2 */
35 --fs-5: 1.335rem; /* ~20px: h1 */
36
37 /* spacing */
38 --sp-1: 0.25rem;
39 --sp-2: 0.5rem;
40 --sp-3: 0.75rem;
41 --sp-4: 1rem;
42 --sp-5: 1.5rem;
43 --sp-6: 2.5rem;
44
45 /* radii */
46 --r-sm: 4px;
47 --r-md: 6px;
48 --r-lg: 8px;
49 --r-pill: 999px;
50}
51@media (prefers-color-scheme: dark) {
52 :root {
53 --bg: #0d1117;
54 --fg: #e6edf3;
55 --muted: #8d96a0;
56 --faint: #1d242c;
57 --line: #30363d;
58 --surface: #161b22;
59 --accent: #58b7c9;
60 --accent-fg: #06272e;
61 --ok: #3fb950;
62 --warn: #d29922;
63 --bad: #f85149;
64 --done: #a371f7;
65 --neutral: #8d96a0;
66 --code-bg: #161b22;
67 }
68}
69
70* { box-sizing: border-box; }
71html { font-size: 15px; }
72body {
73 margin: 0;
74 background: var(--bg);
75 color: var(--fg);
76 font: var(--fs-3)/1.6 var(--sans);
77 min-height: 100vh;
78 display: flex;
79 flex-direction: column;
80}
81main { flex: 1; }
82
83a { color: var(--accent); text-decoration: none; }
84a:hover { text-decoration: underline; }
85
86h1 { font-size: var(--fs-5); font-weight: 600; line-height: 1.3;
87 margin: var(--sp-5) 0 var(--sp-3); letter-spacing: -0.01em; }
88h2 { font-size: var(--fs-4); font-weight: 600; line-height: 1.35;
89 margin: var(--sp-5) 0 var(--sp-3); }
90h3 { font-size: var(--fs-3); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
91
92code, pre, .code, td.mode, td.size {
93 font-family: var(--mono);
94 font-size: var(--fs-1);
95}
96
97/* layout: one shared container aligns header, content, and footer */
98.container {
99 max-width: 64rem;
100 margin: 0 auto;
101 padding: 0 var(--sp-5);
102}
103header {
104 border-bottom: 1px solid var(--faint);
105 padding: var(--sp-3) 0;
106}
107a.site {
108 font-weight: 650;
109 color: var(--fg);
110 letter-spacing: -0.01em;
111 display: inline-flex;
112 align-items: center;
113 gap: var(--sp-2);
114}
115a.site:hover { text-decoration: none; color: var(--accent); }
116a.site svg.mark { display: block; }
117main.container {
118 width: 100%;
119 padding-top: var(--sp-3);
120 padding-bottom: var(--sp-6);
121}
122
123/* tables */
124table { border-collapse: collapse; width: 100%; }
125td {
126 padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
127 border-bottom: 1px solid var(--faint);
128 vertical-align: top;
129 font-size: var(--fs-2);
130}
131td:last-child { padding-right: 0; }
132td.size, td.mode { color: var(--muted); white-space: nowrap; }
133
134/* repo header */
135.repohead { margin-bottom: var(--sp-4); }
136h1.repotitle { margin: var(--sp-4) 0 var(--sp-1); font-weight: 400; }
137h1.repotitle a { color: var(--fg); }
138h1.repotitle a:last-of-type { font-weight: 650; }
139h1.repotitle a:hover { color: var(--accent); text-decoration: none; }
140h1.repotitle .sep { color: var(--muted); margin: 0 0.15em; }
141.repohead .desc { margin: 0 0 var(--sp-2); }
142
143/* repo tabs */
144nav.tabs {
145 display: flex;
146 flex-wrap: wrap;
147 gap: var(--sp-1);
148 border-bottom: 1px solid var(--faint);
149 margin-top: var(--sp-3);
150}
151nav.tabs a {
152 color: var(--muted);
153 padding: var(--sp-1) var(--sp-2);
154 border-radius: var(--r-md) var(--r-md) 0 0;
155 border-bottom: 2px solid transparent;
156 margin-bottom: -1px;
157 font-size: var(--fs-2);
158}
159nav.tabs a:hover { color: var(--fg); background: var(--surface); text-decoration: none; }
160nav.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 550; }
161
162.clone { color: var(--muted); font-size: var(--fs-2); }
163.clone code {
164 background: var(--surface);
165 border: 1px solid var(--faint);
166 padding: 0.15rem 0.5rem;
167 border-radius: var(--r-sm);
168}
169
170/* path bar on tree and blob pages */
171.pathbar {
172 display: flex;
173 flex-wrap: wrap;
174 align-items: center;
175 gap: var(--sp-2) var(--sp-3);
176 margin: var(--sp-3) 0;
177 font-size: var(--fs-2);
178}
179.pathbar .spacer { flex: 1; }
180.refchip {
181 display: inline-flex;
182 align-items: center;
183 gap: 0.3rem;
184 background: var(--surface);
185 border: 1px solid var(--faint);
186 border-radius: var(--r-md);
187 padding: 0.1rem 0.55rem;
188 font-family: var(--mono);
189 font-size: var(--fs-1);
190 color: var(--fg);
191}
192.pathbar .crumbs strong { color: var(--fg); }
193
194/* file and refs tables: bordered cards, rows inside */
195table.tree, table.refs {
196 border: 1px solid var(--line);
197 border-radius: var(--r-lg);
198 border-collapse: separate;
199 border-spacing: 0;
200 overflow: hidden;
201 margin-bottom: var(--sp-4);
202}
203table.tree td, table.refs td {
204 padding: var(--sp-2) var(--sp-4);
205 border-bottom: 1px solid var(--faint);
206}
207table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; }
208table.tree tr:hover td, table.refs tr:hover td { background: var(--surface); }
209table.tree td.name { width: 100%; }
210table.tree td.name a { color: var(--fg); }
211table.tree td.name a:hover { color: var(--accent); }
212table.tree td.size { text-align: right; }
213table.tree td.empty, table.refs td.empty, li.empty, ul.loglist li.empty { color: var(--muted); }
214
215/* refs page */
216table.refs td.name { width: 100%; }
217table.refs td.sha { color: var(--muted); }
218
219/* card header (README) */
220.cardhead {
221 font-family: var(--mono);
222 font-size: var(--fs-1);
223 color: var(--muted);
224 border-bottom: 1px solid var(--faint);
225 margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4);
226 padding: var(--sp-2) var(--sp-5);
227 background: var(--surface);
228 border-radius: var(--r-lg) var(--r-lg) 0 0;
229}
230
231/* log */
232ul.loglist {
233 list-style: none;
234 margin: var(--sp-3) 0;
235 padding: 0;
236 border: 1px solid var(--line);
237 border-radius: var(--r-lg);
238 overflow: hidden;
239}
240ul.loglist li {
241 display: flex;
242 align-items: baseline;
243 gap: var(--sp-3);
244 padding: var(--sp-2) var(--sp-4);
245 border-bottom: 1px solid var(--faint);
246}
247ul.loglist li:last-child { border-bottom: none; }
248ul.loglist li:hover { background: var(--surface); }
249ul.loglist .commitmain { flex: 1; min-width: 0; }
250ul.loglist p { margin: 0; }
251ul.loglist .subject a { color: var(--fg); font-weight: 550; }
252ul.loglist .subject a:hover { color: var(--accent); }
253ul.loglist .commitside {
254 display: flex;
255 align-items: baseline;
256 gap: var(--sp-2);
257 white-space: nowrap;
258}
259p.pager { margin-top: var(--sp-4); }
260
261/* commit page */
262.commithead p { margin: var(--sp-1) 0; }
263.commithead h2 { margin-bottom: var(--sp-1); }
264code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
265.empty-note { color: var(--muted); }
266.crumbs { color: var(--muted); font-size: var(--fs-2); }
267.desc, td.desc { color: var(--muted); }
268.error { color: var(--bad); }
269.meta { color: var(--muted); font-size: var(--fs-1); }
270svg.icon { vertical-align: -0.125em; }
271.lede { font-size: var(--fs-3); margin: var(--sp-2) 0; }
272
273/* repo listings (index, owner pages): responsive card grid */
274.repogrid {
275 display: grid;
276 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
277 gap: var(--sp-3);
278 margin: var(--sp-3) 0 var(--sp-5);
279}
280.repogrid .empty { color: var(--muted); grid-column: 1 / -1; }
281.repocard {
282 display: flex;
283 flex-direction: column;
284 gap: var(--sp-1);
285 border: 1px solid var(--line);
286 border-radius: var(--r-lg);
287 padding: var(--sp-3) var(--sp-4);
288 min-width: 0;
289}
290.repocard p { margin: 0; }
291.repocard .reponame {
292 font-weight: 550;
293 overflow: hidden;
294 text-overflow: ellipsis;
295 white-space: nowrap;
296}
297.repocard .desc {
298 font-size: var(--fs-2);
299 display: -webkit-box;
300 -webkit-line-clamp: 2;
301 -webkit-box-orient: vertical;
302 overflow: hidden;
303}
304.repocard .meta { margin-top: auto; padding-top: var(--sp-1); }
305.repocard .reponame .sep { color: var(--muted); margin: 0 0.1em; }
306
307/* owner profile header */
308.profilehead {
309 border-bottom: 1px solid var(--faint);
310 padding-bottom: var(--sp-4);
311 margin-bottom: var(--sp-4);
312}
313.profilehead h1 { margin: var(--sp-4) 0 var(--sp-1); }
314.profilehead .lede { margin: 0 0 var(--sp-1); }
315.profilehead .meta { margin: var(--sp-1) 0 0; }
316h2 .count { color: var(--muted); font-weight: 400; font-size: var(--fs-2); }
317
318/* heading row with actions on the right */
319.headrow {
320 display: flex;
321 align-items: baseline;
322 gap: var(--sp-4);
323 flex-wrap: wrap;
324}
325.headrow .spacer { flex: 1; }
326
327/* member and org chips on owner pages */
328a.memberchip {
329 display: inline-block;
330 border: 1px solid var(--line);
331 border-radius: var(--r-pill);
332 padding: 0.05rem 0.6rem;
333 color: var(--fg);
334 font-size: var(--fs-1);
335 margin: 0 0.15rem 0.15rem 0;
336}
337a.memberchip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
338a.memberchip .role { color: var(--muted); }
339
340/* landing page */
341.landing { max-width: 44rem; padding: var(--sp-6) 0; }
342.landing h1 { font-size: 1.8rem; margin-bottom: var(--sp-3); }
343.landing .lede { font-size: var(--fs-4); color: var(--muted); line-height: 1.7; margin: 0 0 var(--sp-4); }
344pre.quickstart {
345 background: var(--code-bg);
346 border: 1px solid var(--faint);
347 border-radius: var(--r-md);
348 padding: var(--sp-3) var(--sp-4);
349 overflow-x: auto;
350 margin: 0 0 var(--sp-4);
351}
352.landing .explorelink { font-weight: 550; }
353
354/* index toolbar */
355p.toolbar { color: var(--muted); font-size: var(--fs-2); margin-top: var(--sp-4); }
356form.inline { display: inline; }
357button.linklike {
358 background: none;
359 border: none;
360 color: var(--accent);
361 padding: 0;
362 font: inherit;
363 font-size: var(--fs-2);
364 cursor: pointer;
365}
366button.linklike:hover { text-decoration: underline; filter: none; }
367
368/* cards: README, comments */
369.readme, .code {
370 border: 1px solid var(--faint);
371 border-radius: var(--r-lg);
372 padding: var(--sp-4) var(--sp-5);
373 margin-top: var(--sp-4);
374 overflow-x: auto;
375}
376/* chroma emits inline styles for a light background; pin code blocks to
377 light colors in both schemes so unstyled tokens stay legible. */
378.code { background: #f8f8f8; color: #1a1a1a; padding: var(--sp-3) var(--sp-4); color-scheme: light; }
379.code pre { margin: 0; background: transparent !important; }
380@media (prefers-color-scheme: dark) {
381 .code { border-color: var(--line); }
382}
383
384/* rendered markdown / org / html */
385.rendered { max-width: 100%; overflow-wrap: anywhere; }
386.rendered pre {
387 background: var(--code-bg);
388 border: 1px solid var(--faint);
389 padding: var(--sp-3) var(--sp-4);
390 border-radius: var(--r-md);
391 overflow-x: auto;
392}
393.rendered code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: var(--r-sm); }
394.rendered pre code { background: transparent; padding: 0; }
395.rendered blockquote {
396 border-left: 3px solid var(--line);
397 margin-left: 0;
398 padding-left: var(--sp-4);
399 color: var(--muted);
400}
401.rendered img { max-width: 100%; }
402.rendered h1, .rendered h2 { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-1); }
403
404pre.message {
405 background: var(--code-bg);
406 border: 1px solid var(--faint);
407 padding: var(--sp-3) var(--sp-4);
408 border-radius: var(--r-md);
409 white-space: pre-wrap;
410 overflow-wrap: anywhere;
411}
412
413/* diffs */
414details.difffold summary {
415 cursor: pointer;
416 display: flex;
417 align-items: baseline;
418 gap: var(--sp-3);
419 margin: var(--sp-5) 0 var(--sp-2);
420}
421details.difffold summary h3 { display: inline; margin: 0; }
422details.difffold summary .add { color: var(--ok); }
423details.difffold summary .del { color: var(--bad); }
424pre.diff {
425 background: var(--code-bg);
426 border: 1px solid var(--faint);
427 padding: var(--sp-3) var(--sp-4);
428 border-radius: var(--r-md);
429 overflow-x: auto;
430 line-height: 1.5;
431}
432pre.diff .add { color: var(--ok); }
433pre.diff .del { color: var(--bad); }
434pre.diff .hunk { color: var(--accent); }
435pre.diff .meta { color: var(--muted); }
436
437/* badges: signature and check states. Semantic colors stay distinct:
438 green verified/success, amber pending/stale, red bad/failure, muted
439 unsigned. */
440.badge, .chip {
441 --chip: var(--neutral);
442 display: inline-block;
443 padding: 0.05rem 0.55rem;
444 border-radius: var(--r-pill);
445 font-size: var(--fs-0);
446 font-weight: 500;
447 line-height: 1.5;
448 color: var(--chip);
449 border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
450 background: color-mix(in srgb, var(--chip) 7%, transparent);
451 white-space: nowrap;
452 vertical-align: middle;
453}
454.chip-open { --chip: var(--ok); }
455.chip-closed { --chip: var(--bad); }
456.chip-merged, .chip-done { --chip: var(--done); }
457.chip-neutral, .chip-source_gone { --chip: var(--neutral); }
458.chip-stale { --chip: var(--warn); }
459.chip.label { font-weight: 500; }
460.chip.topic { --chip: var(--accent); }
461.repohead .topics { margin: 0 0 var(--sp-2); }
462.badge-verified { --chip: var(--ok); }
463.badge-unsigned { --chip: var(--neutral); }
464.badge-signed_unknown_key { --chip: var(--warn); }
465.badge-signed_email_mismatch { --chip: var(--bad); }
466.badge-signed_key_expired { --chip: var(--warn); }
467.badge-signed_key_revoked { --chip: var(--bad); }
468.badge-bad_signature { --chip: var(--bad); }
469.badge.check-success { --chip: var(--ok); }
470.badge.check-pending { --chip: var(--warn); }
471.badge.check-failure, .badge.check-error { --chip: var(--bad); }
472span.check-success { color: var(--ok); }
473span.check-pending { color: var(--warn); }
474span.check-failure, span.check-error { color: var(--bad); }
475
476/* issue and MR listings */
477.listhead {
478 display: flex;
479 align-items: baseline;
480 gap: var(--sp-4);
481 flex-wrap: wrap;
482}
483.listhead h2 { margin-bottom: var(--sp-2); }
484nav.filters { display: flex; gap: var(--sp-1); }
485nav.filters a {
486 color: var(--muted);
487 font-size: var(--fs-2);
488 padding: 0.05rem var(--sp-2);
489 border-radius: var(--r-pill);
490}
491nav.filters a:hover { color: var(--fg); background: var(--surface); text-decoration: none; }
492nav.filters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
493
494ul.issuelist {
495 list-style: none;
496 margin: var(--sp-2) 0;
497 padding: 0;
498 border: 1px solid var(--line);
499 border-radius: var(--r-lg);
500 overflow: hidden;
501}
502ul.issuelist li {
503 display: flex;
504 align-items: baseline;
505 gap: var(--sp-3);
506 padding: var(--sp-3) var(--sp-4);
507 border-bottom: 1px solid var(--faint);
508}
509ul.issuelist li:last-child { border-bottom: none; }
510ul.issuelist li:hover { background: var(--surface); }
511ul.issuelist li.empty { display: block; color: var(--muted); }
512ul.issuelist .issuemain { flex: 1; min-width: 0; }
513ul.issuelist p { margin: 0; }
514ul.issuelist .title a { color: var(--fg); font-weight: 550; }
515ul.issuelist .title a:hover { color: var(--accent); }
516
517/* releases */
518article.release {
519 border: 1px solid var(--line);
520 border-radius: var(--r-lg);
521 padding: var(--sp-3) var(--sp-4);
522 margin: var(--sp-4) 0;
523}
524.releasehead h3 { margin: 0 0 var(--sp-1); }
525.releasehead .meta { margin: 0 0 var(--sp-2); }
526table.assets { margin-top: var(--sp-2); }
527table.assets td.size { color: var(--muted); white-space: nowrap; text-align: right; }
528table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--fs-1); }
529
530/* milestones */
531ul.milestonelist {
532 list-style: none;
533 margin: var(--sp-2) 0;
534 padding: 0;
535 border: 1px solid var(--line);
536 border-radius: var(--r-lg);
537 overflow: hidden;
538}
539ul.milestonelist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
540ul.milestonelist li:last-child { border-bottom: none; }
541ul.milestonelist li.empty { color: var(--muted); }
542ul.milestonelist p { margin: 0; }
543ul.milestonelist .title { font-weight: 550; }
544.progress {
545 height: 6px;
546 background: var(--faint);
547 border-radius: var(--r-pill);
548 margin-top: var(--sp-2);
549 overflow: hidden;
550 max-width: 24rem;
551}
552.progress .bar { height: 100%; background: var(--ok); }
553.listhead .spacer { flex: 1; }
554
555/* issue / MR detail */
556h2.issuetitle { margin-bottom: var(--sp-1); font-size: var(--fs-5); }
557.issuenumber { color: var(--muted); font-weight: 400; }
558.issuemeta { color: var(--muted); font-size: var(--fs-2); margin-top: 0; }
559.review { font-size: var(--fs-2); }
560
561/* comment cards; discussion stays at a readable measure */
562article.comment, form.commentform {
563 max-width: 48rem;
564}
565article.comment {
566 border: 1px solid var(--faint);
567 border-radius: var(--r-lg);
568 margin: var(--sp-4) 0;
569}
570article.comment .commenthead {
571 background: var(--surface);
572 border-bottom: 1px solid var(--faint);
573 border-radius: var(--r-lg) var(--r-lg) 0 0;
574 padding: var(--sp-2) var(--sp-4);
575 font-size: var(--fs-2);
576}
577article.comment .commenthead .when { color: var(--muted); }
578article.comment .rendered { padding: 0 var(--sp-4); }
579article.comment .rendered > :first-child { margin-top: var(--sp-3); }
580article.comment .rendered > :last-child { margin-bottom: var(--sp-3); }
581form.commentform { margin: var(--sp-4) 0; }
582
583/* review threads under diff lines */
584.thread {
585 border: 1px solid var(--faint);
586 border-left: 3px solid var(--accent);
587 border-radius: var(--r-md);
588 padding: var(--sp-2) var(--sp-4);
589 margin: var(--sp-2) 0 var(--sp-2) var(--sp-6);
590}
591.thread.resolved { border-left-color: var(--ok); opacity: 0.75; }
592.thread.stale { border-left-color: var(--warn); }
593.thread p.commenthead { font-size: var(--fs-2); margin: var(--sp-2) 0 0; }
594.thread .when { color: var(--muted); }
595.thread .rendered p { margin: var(--sp-1) 0; }
596.thread .threadstate { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-1) 0 0; }
597
598/* forms */
599input, textarea, button, select { font: inherit; color: inherit; }
600input[type="text"], input:not([type]), textarea {
601 background: var(--bg);
602 border: 1px solid var(--line);
603 border-radius: var(--r-md);
604 padding: var(--sp-2) var(--sp-3);
605}
606textarea { width: 100%; resize: vertical; }
607textarea[name="content"] { font-family: var(--mono); font-size: var(--fs-1); }
608input:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
609button {
610 background: var(--accent);
611 color: var(--accent-fg);
612 border: none;
613 border-radius: var(--r-md);
614 padding: var(--sp-1) var(--sp-3);
615 font-weight: 500;
616 cursor: pointer;
617}
618button:hover { filter: brightness(1.08); }
619
620/* 404 */
621.notfound { text-align: center; padding: var(--sp-6) 0; }
622.notfound .bigcode {
623 font-family: var(--mono);
624 font-size: 4rem;
625 color: var(--faint);
626 -webkit-text-stroke: 1px var(--line);
627 margin: 0;
628 line-height: 1;
629}
630.notfound h1 { margin-top: var(--sp-3); }
631
632/* footer */
633footer {
634 border-top: 1px solid var(--faint);
635 padding: var(--sp-4) 0;
636 color: var(--muted);
637 font-size: var(--fs-1);
638}
639footer p { margin: 0; }
640footer a { color: var(--muted); text-decoration: underline; }
641footer a:hover { color: var(--accent); }
642
643/* search */
644form.searchform {
645 display: flex;
646 gap: var(--sp-2);
647 margin: var(--sp-3) 0 var(--sp-4);
648}
649form.searchform input[type="search"] { flex: 1; max-width: 32rem; }
650form.searchform.compact { margin: 0; }
651form.searchform.compact input[type="search"] {
652 padding: var(--sp-1) var(--sp-3);
653 font-size: var(--fs-2);
654 min-width: 18rem;
655}
656ul.matchlist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
657ul.matchlist li { margin-bottom: var(--sp-3); }
658ul.matchlist .matchpath { font-family: var(--mono); font-size: var(--fs-1); }
659pre.matchline {
660 background: var(--code-bg);
661 border: 1px solid var(--faint);
662 border-radius: var(--r-md);
663 padding: var(--sp-1) var(--sp-3);
664 margin: var(--sp-1) 0 0;
665 overflow-x: auto;
666}
667pre.matchline mark {
668 background: color-mix(in srgb, var(--warn) 25%, transparent);
669 color: inherit;
670 border-radius: 2px;
671}
672
673/* blame */
674.blame {
675 border: 1px solid var(--line);
676 border-radius: var(--rad-2, 6px);
677 overflow: hidden;
678}
679.blamehunk {
680 display: flex;
681 gap: var(--sp-3);
682 border-top: 1px solid var(--line);
683 align-items: flex-start;
684}
685.blamehunk:first-child { border-top: none; }
686.blameinfo {
687 flex: none;
688 width: 17rem;
689 padding: var(--sp-2) var(--sp-3);
690 min-width: 0;
691}
692.blameinfo .subject {
693 margin: 0;
694 font-size: var(--fs-1);
695 white-space: nowrap;
696 overflow: hidden;
697 text-overflow: ellipsis;
698}
699.blameinfo .meta { margin: 0; font-size: var(--fs-1); color: var(--muted); }
700.blamecode {
701 flex: 1;
702 margin: 0;
703 padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
704 overflow-x: auto;
705 border-left: 1px solid var(--line);
706 align-self: stretch;
707}
708.lineno {
709 display: inline-block;
710 min-width: 3.5em;
711 padding-right: 1em;
712 text-align: right;
713 color: var(--muted);
714 user-select: none;
715}
716
717/* mobile */
718@media (max-width: 40rem) {
719 .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
720 main.container { padding-top: var(--sp-2); }
721 .repogrid { grid-template-columns: 1fr; }
722 .thread { margin-left: var(--sp-3); }
723 table.tree td.mode { display: none; }
724 .readme, .code { padding: var(--sp-3); }
725 .blamehunk { flex-direction: column; gap: 0; }
726 .blameinfo { width: auto; }
727 .blamecode { border-left: none; padding-left: var(--sp-3); width: 100%; }
728 .cardhead {
729 margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-3);
730 padding: var(--sp-2) var(--sp-3);
731 }
732}