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