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