internal/web/static/style.css
878 lines · 27706 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; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
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; }
152form.pinform { display: inline; margin-left: var(--sp-2); vertical-align: middle; }
153button.pinbtn {
154 background: none;
155 border: 1px solid var(--line);
156 border-radius: var(--r-pill);
157 color: var(--muted);
158 font-size: var(--fs-0);
159 padding: 0.05rem 0.55rem;
160 cursor: pointer;
161}
162button.pinbtn:hover { border-color: var(--accent); color: var(--accent); filter: none; }
163button.pinbtn.pinned { color: var(--accent); border-color: var(--accent); }
164a.chip.label:hover, a.chip.topic:hover { text-decoration: none; filter: brightness(1.15); }
165.repohead .desc { margin: 0 0 var(--sp-2); }
166
167/* repo tabs */
168nav.tabs {
169 display: flex;
170 flex-wrap: wrap;
171 gap: var(--sp-1);
172 border-bottom: 1px solid var(--faint);
173 margin-top: var(--sp-3);
174}
175nav.tabs a {
176 color: var(--muted);
177 padding: var(--sp-1) var(--sp-2);
178 border-radius: var(--r-md) var(--r-md) 0 0;
179 border-bottom: 2px solid transparent;
180 margin-bottom: -1px;
181 font-size: var(--fs-2);
182}
183nav.tabs a:hover { color: var(--fg); background: var(--surface); text-decoration: none; }
184nav.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 550; }
185
186.clone { color: var(--muted); font-size: var(--fs-2); }
187.clone code {
188 background: var(--surface);
189 border: 1px solid var(--faint);
190 padding: 0.15rem 0.5rem;
191 border-radius: var(--r-sm);
192}
193
194/* path bar on tree and blob pages */
195.pathbar {
196 display: flex;
197 flex-wrap: wrap;
198 align-items: center;
199 gap: var(--sp-2) var(--sp-3);
200 margin: var(--sp-3) 0;
201 font-size: var(--fs-2);
202}
203.pathbar .spacer { flex: 1; }
204.refchip {
205 display: inline-flex;
206 align-items: center;
207 gap: 0.3rem;
208 background: var(--surface);
209 border: 1px solid var(--faint);
210 border-radius: var(--r-md);
211 padding: 0.1rem 0.55rem;
212 font-family: var(--mono);
213 font-size: var(--fs-1);
214 color: var(--fg);
215}
216.pathbar .crumbs strong { color: var(--fg); }
217details.refmenu { position: relative; }
218details.refmenu summary { cursor: pointer; list-style: none; }
219details.refmenu summary::-webkit-details-marker { display: none; }
220details.refmenu summary::after { content: " ▾"; color: var(--muted); }
221details.refmenu .refdrop {
222 position: absolute;
223 z-index: 10;
224 top: calc(100% + 4px);
225 left: 0;
226 min-width: 12rem;
227 max-height: 20rem;
228 overflow-y: auto;
229 background: var(--bg);
230 border: 1px solid var(--line);
231 border-radius: var(--r-md);
232 box-shadow: 0 4px 16px rgba(0,0,0,0.12);
233 padding: var(--sp-1) 0;
234}
235details.refmenu .refdrop a {
236 display: block;
237 padding: var(--sp-1) var(--sp-3);
238 color: var(--fg);
239 font-family: var(--mono);
240 font-size: var(--fs-1);
241}
242details.refmenu .refdrop a:hover { background: var(--surface); text-decoration: none; }
243details.refmenu .refdrop a.allrefs { color: var(--accent); font-family: var(--sans); border-top: 1px solid var(--faint); margin-top: var(--sp-1); }
244
245/* file and refs tables: bordered cards, rows inside */
246table.tree, table.refs {
247 border: 1px solid var(--line);
248 border-radius: var(--r-lg);
249 border-collapse: separate;
250 border-spacing: 0;
251 overflow: hidden;
252 margin-bottom: var(--sp-4);
253}
254table.tree td, table.refs td {
255 padding: var(--sp-2) var(--sp-4);
256 border-bottom: 1px solid var(--faint);
257}
258table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; }
259table.tree tr:hover td, table.refs tr:hover td { background: var(--surface); }
260table.tree tr.cols th {
261 text-align: left;
262 font-weight: 500;
263 font-size: var(--fs-1);
264 color: var(--muted);
265 padding: var(--sp-1) var(--sp-4);
266 border-bottom: 1px solid var(--line);
267 background: var(--surface);
268}
269table.tree tr.cols:hover th { background: var(--surface); }
270table.tree th.size { text-align: right; }
271table.tree td.name { width: 100%; }
272table.tree td.name a { color: var(--fg); }
273table.tree td.name a:hover { color: var(--accent); }
274table.tree td.size { text-align: right; }
275table.tree td.empty, table.refs td.empty, li.empty, ul.loglist li.empty { color: var(--muted); }
276
277/* refs page */
278table.refs td.name { width: 100%; }
279table.refs td.sha { color: var(--muted); }
280
281/* card header (README) */
282.cardhead {
283 font-family: var(--mono);
284 font-size: var(--fs-1);
285 color: var(--muted);
286 border-bottom: 1px solid var(--faint);
287 margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4);
288 padding: var(--sp-2) var(--sp-5);
289 background: var(--surface);
290 border-radius: var(--r-lg) var(--r-lg) 0 0;
291}
292
293/* log */
294ul.loglist {
295 list-style: none;
296 margin: var(--sp-3) 0;
297 padding: 0;
298 border: 1px solid var(--line);
299 border-radius: var(--r-lg);
300 overflow: hidden;
301}
302ul.loglist li {
303 display: flex;
304 align-items: baseline;
305 gap: var(--sp-3);
306 padding: var(--sp-2) var(--sp-4);
307 border-bottom: 1px solid var(--faint);
308}
309ul.loglist li:last-child { border-bottom: none; }
310ul.loglist li:hover { background: var(--surface); }
311ul.loglist .commitmain { flex: 1; min-width: 0; }
312ul.loglist p { margin: 0; }
313ul.loglist .subject a { color: var(--fg); font-weight: 550; }
314ul.loglist .subject a:hover { color: var(--accent); }
315ul.loglist .commitside {
316 display: flex;
317 align-items: baseline;
318 gap: var(--sp-2);
319 white-space: nowrap;
320}
321p.pager { margin-top: var(--sp-4); }
322
323/* commit page */
324.commithead p { margin: var(--sp-1) 0; }
325.commithead h2 { margin-bottom: var(--sp-1); }
326code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
327.empty-note { color: var(--muted); }
328.crumbs { color: var(--muted); font-size: var(--fs-2); }
329.desc, td.desc { color: var(--muted); }
330.error { color: var(--bad); }
331.meta { color: var(--muted); font-size: var(--fs-1); }
332svg.icon { vertical-align: -0.125em; }
333.lede { font-size: var(--fs-3); margin: var(--sp-2) 0; }
334
335/* repo listings (explore, owner pages, dashboard): one row per repo */
336ul.repolist {
337 list-style: none;
338 margin: var(--sp-3) 0 var(--sp-5);
339 padding: 0;
340 border: 1px solid var(--line);
341 border-radius: var(--r-lg);
342 overflow: hidden;
343}
344ul.repolist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
345/* pinned repos: a compact wrap of name pills, no description or meta */
346ul.pinlist {
347 list-style: none;
348 margin: var(--sp-3) 0 var(--sp-5);
349 padding: 0;
350 display: flex;
351 flex-wrap: wrap;
352 gap: var(--sp-2);
353}
354ul.pinlist li {
355 border: 1px solid var(--line);
356 border-radius: var(--r-md);
357 padding: var(--sp-1) var(--sp-3);
358}
359ul.pinlist li:hover { background: var(--surface); }
360ul.pinlist li a { color: var(--fg); }
361ul.pinlist li a:hover { color: var(--accent); text-decoration: none; }
362ul.pinlist .sep { color: var(--muted); margin: 0 0.15em; }
363ul.repolist li:last-child { border-bottom: none; }
364ul.repolist li:hover { background: var(--surface); }
365ul.repolist li.empty { color: var(--muted); }
366ul.repolist p { margin: 0; }
367ul.repolist .reponame { font-size: var(--fs-3); }
368ul.repolist .reponame a { color: var(--fg); }
369ul.repolist .reponame a strong { color: var(--accent); font-weight: 600; }
370ul.repolist .reponame .sep { color: var(--muted); margin: 0 0.1em; }
371ul.repolist .desc { margin-top: 0.1rem; }
372ul.repolist .topics { margin-top: var(--sp-1); }
373ul.repolist .meta { margin-top: var(--sp-1); }
374
375/* owner profile header */
376.profilehead {
377 border-bottom: 1px solid var(--faint);
378 padding-bottom: var(--sp-4);
379 margin-bottom: var(--sp-4);
380}
381.profilehead h1 { margin: var(--sp-4) 0 var(--sp-1); }
382.profilehead .lede { margin: 0 0 var(--sp-1); }
383.profilehead .meta { margin: var(--sp-1) 0 0; }
384h2 .count { color: var(--muted); font-weight: 400; font-size: var(--fs-2); }
385
386/* activity graph: 53 week columns x 7 day rows, accent-tinted levels */
387.actgraph-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
388.actgraph { display: flex; gap: 3px; width: max-content; }
389.actweek { display: flex; flex-direction: column; gap: 3px; }
390.actday {
391 width: 11px;
392 height: 11px;
393 border-radius: 2px;
394 background: var(--faint);
395}
396.actday.pad { background: transparent; }
397.actday.l1 { background: color-mix(in srgb, var(--accent) 25%, var(--bg)); }
398.actday.l2 { background: color-mix(in srgb, var(--accent) 50%, var(--bg)); }
399.actday.l3 { background: color-mix(in srgb, var(--accent) 75%, var(--bg)); }
400.actday.l4 { background: var(--accent); }
401
402/* heading row with actions on the right */
403.headrow {
404 display: flex;
405 align-items: baseline;
406 gap: var(--sp-4);
407 flex-wrap: wrap;
408}
409.headrow .spacer { flex: 1; }
410
411/* member and org chips on owner pages */
412a.memberchip {
413 display: inline-block;
414 border: 1px solid var(--line);
415 border-radius: var(--r-pill);
416 padding: 0.05rem 0.6rem;
417 color: var(--fg);
418 font-size: var(--fs-1);
419 margin: 0 0.15rem 0.15rem 0;
420}
421a.memberchip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
422a.memberchip .role { color: var(--muted); }
423
424/* landing page */
425.landing { max-width: 44rem; padding: var(--sp-6) 0; }
426.landing h1 { font-size: 1.8rem; margin-bottom: var(--sp-3); }
427.landing .lede { font-size: var(--fs-4); color: var(--muted); line-height: 1.7; margin: 0 0 var(--sp-4); }
428pre.quickstart {
429 background: var(--code-bg);
430 border: 1px solid var(--faint);
431 border-radius: var(--r-md);
432 padding: var(--sp-3) var(--sp-4);
433 overflow-x: auto;
434 margin: 0 0 var(--sp-4);
435}
436.landing .explorelink { font-weight: 550; }
437
438/* index toolbar */
439p.toolbar { color: var(--muted); font-size: var(--fs-2); margin-top: var(--sp-4); }
440form.inline { display: inline; }
441button.linklike {
442 background: none;
443 border: none;
444 color: var(--accent);
445 padding: 0;
446 font: inherit;
447 font-size: var(--fs-2);
448 cursor: pointer;
449}
450button.linklike:hover { text-decoration: underline; filter: none; }
451
452/* cards: README, comments */
453.readme, .code {
454 border: 1px solid var(--faint);
455 border-radius: var(--r-lg);
456 padding: var(--sp-4) var(--sp-5);
457 margin-top: var(--sp-4);
458 overflow-x: auto;
459}
460/* Highlighting is class-based with a palette per scheme, so code blocks
461 follow the site's own colors. */
462.code { background: var(--code-bg); color: var(--fg); padding: var(--sp-3) var(--sp-4); }
463.code pre { margin: 0; background: transparent !important; }
464@media (prefers-color-scheme: dark) {
465 .code { border-color: var(--line); }
466}
467
468/* rendered markdown / org / html */
469.rendered { max-width: 100%; overflow-wrap: anywhere; }
470.rendered pre {
471 background: var(--code-bg);
472 border: 1px solid var(--faint);
473 padding: var(--sp-3) var(--sp-4);
474 border-radius: var(--r-md);
475 overflow-x: auto;
476}
477.rendered code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: var(--r-sm); }
478.rendered pre code { background: transparent; padding: 0; }
479.rendered blockquote {
480 border-left: 3px solid var(--line);
481 margin-left: 0;
482 padding-left: var(--sp-4);
483 color: var(--muted);
484}
485.rendered img { max-width: 100%; }
486.rendered h1, .rendered h2 { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-1); }
487.rendered table {
488 border-collapse: collapse;
489 margin: var(--sp-3) 0;
490 display: block;
491 max-width: 100%;
492 overflow-x: auto;
493}
494.rendered th, .rendered td {
495 border: 1px solid var(--line);
496 padding: var(--sp-1) var(--sp-3);
497 text-align: left;
498 overflow-wrap: normal; /* scroll the table, don't shatter words */
499}
500.rendered th { background: var(--surface); font-weight: 600; }
501.blobimage { text-align: center; }
502.blobimage img {
503 max-width: 100%;
504 border: 1px solid var(--faint);
505 border-radius: var(--r-md);
506 background: var(--surface);
507}
508
509pre.message {
510 background: var(--code-bg);
511 border: 1px solid var(--faint);
512 padding: var(--sp-3) var(--sp-4);
513 border-radius: var(--r-md);
514 white-space: pre-wrap;
515 overflow-wrap: anywhere;
516}
517
518/* diffs */
519details.difffold summary {
520 cursor: pointer;
521 display: flex;
522 align-items: baseline;
523 gap: var(--sp-3);
524 margin: var(--sp-5) 0 var(--sp-2);
525 list-style: none;
526}
527details.difffold summary::-webkit-details-marker { display: none; }
528/* flex summaries lose the native disclosure marker; draw our own */
529details.difffold summary::before { content: "▸"; color: var(--muted); }
530details.difffold[open] summary::before { content: "▾"; }
531details.difffold summary h3 { display: inline; margin: 0; }
532details.difffold summary .add { color: var(--ok); }
533details.difffold summary .del { color: var(--bad); }
534pre.diff {
535 background: var(--code-bg);
536 border: 1px solid var(--faint);
537 padding: var(--sp-3) var(--sp-4);
538 border-radius: var(--r-md);
539 overflow-x: auto;
540 line-height: 1.5;
541}
542pre.diff .add { color: var(--ok); }
543pre.diff .del { color: var(--bad); }
544pre.diff .hunk { color: var(--accent); }
545pre.diff .meta { color: var(--muted); }
546
547/* badges: signature and check states. Semantic colors stay distinct:
548 green verified/success, amber pending/stale, red bad/failure, muted
549 unsigned. */
550.badge, .chip {
551 --chip: var(--neutral);
552 display: inline-block;
553 padding: 0.05rem 0.55rem;
554 border-radius: var(--r-pill);
555 font-size: var(--fs-0);
556 font-weight: 500;
557 line-height: 1.5;
558 color: var(--chip);
559 border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
560 background: color-mix(in srgb, var(--chip) 7%, transparent);
561 white-space: nowrap;
562 vertical-align: middle;
563}
564.chip-open { --chip: var(--ok); }
565.chip-closed { --chip: var(--bad); }
566.chip-merged, .chip-done { --chip: var(--done); }
567.chip-neutral, .chip-source_gone { --chip: var(--neutral); }
568.chip-stale { --chip: var(--warn); }
569.chip.label { font-weight: 500; }
570.chip.topic { --chip: var(--accent); }
571.repohead .topics { margin: 0 0 var(--sp-2); }
572.repohead .mirrorline { margin: 0 0 var(--sp-2); }
573.mirrorerr { color: var(--bad); }
574.badge-verified { --chip: var(--ok); }
575.badge-unsigned { --chip: var(--neutral); }
576.badge-signed_unknown_key { --chip: var(--warn); }
577.badge-signed_email_mismatch { --chip: var(--bad); }
578.badge-signed_key_expired { --chip: var(--warn); }
579.badge-signed_key_revoked { --chip: var(--bad); }
580.badge-bad_signature { --chip: var(--bad); }
581.badge.check-success { --chip: var(--ok); }
582.badge.check-pending { --chip: var(--warn); }
583.badge.check-failure, .badge.check-error { --chip: var(--bad); }
584.badge.check-running, .chip.check-running { --chip: var(--warn); }
585.chip.check-success { --chip: var(--ok); }
586.chip.check-pending { --chip: var(--warn); }
587.chip.check-failure { --chip: var(--bad); }
588pre.buildlog { max-height: 40rem; overflow: auto; }
589span.check-success { color: var(--ok); }
590span.check-pending { color: var(--warn); }
591span.check-failure, span.check-error { color: var(--bad); }
592
593/* issue and MR listings */
594.listhead {
595 display: flex;
596 align-items: baseline;
597 gap: var(--sp-4);
598 flex-wrap: wrap;
599}
600.listhead h2 { margin-bottom: var(--sp-2); }
601nav.filters { display: flex; gap: var(--sp-1); }
602nav.filters a {
603 color: var(--muted);
604 font-size: var(--fs-2);
605 padding: 0.05rem var(--sp-2);
606 border-radius: var(--r-pill);
607}
608nav.filters a:hover { color: var(--fg); background: var(--surface); text-decoration: none; }
609nav.filters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
610
611ul.issuelist {
612 list-style: none;
613 margin: var(--sp-2) 0;
614 padding: 0;
615 border: 1px solid var(--line);
616 border-radius: var(--r-lg);
617 overflow: hidden;
618}
619ul.issuelist li {
620 display: flex;
621 align-items: baseline;
622 gap: var(--sp-3);
623 padding: var(--sp-3) var(--sp-4);
624 border-bottom: 1px solid var(--faint);
625}
626ul.issuelist li:last-child { border-bottom: none; }
627ul.issuelist li:hover { background: var(--surface); }
628ul.issuelist li.empty { display: block; color: var(--muted); }
629ul.issuelist .issuemain { flex: 1; min-width: 0; }
630ul.issuelist p { margin: 0; }
631ul.issuelist .title a { color: var(--fg); font-weight: 550; }
632ul.issuelist .title a:hover { color: var(--accent); }
633
634/* releases */
635article.release {
636 border: 1px solid var(--line);
637 border-radius: var(--r-lg);
638 padding: var(--sp-3) var(--sp-4);
639 margin: var(--sp-4) 0;
640}
641.releasehead h3 { margin: 0 0 var(--sp-1); }
642.releasehead .meta { margin: 0 0 var(--sp-2); }
643table.assets { margin-top: var(--sp-2); }
644table.assets td.size { color: var(--muted); white-space: nowrap; text-align: right; }
645table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--fs-1); }
646
647/* milestones */
648ul.milestonelist {
649 list-style: none;
650 margin: var(--sp-2) 0;
651 padding: 0;
652 border: 1px solid var(--line);
653 border-radius: var(--r-lg);
654 overflow: hidden;
655}
656ul.milestonelist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
657ul.milestonelist li:last-child { border-bottom: none; }
658ul.milestonelist li.empty { color: var(--muted); }
659ul.milestonelist p { margin: 0; }
660ul.milestonelist .title { font-weight: 550; }
661.progress {
662 height: 6px;
663 background: var(--faint);
664 border-radius: var(--r-pill);
665 margin-top: var(--sp-2);
666 overflow: hidden;
667 max-width: 24rem;
668}
669.progress .bar { height: 100%; background: var(--ok); }
670.listhead .spacer { flex: 1; }
671
672/* issue / MR detail */
673h2.issuetitle { margin-bottom: var(--sp-1); font-size: var(--fs-5); }
674.issuenumber { color: var(--muted); font-weight: 400; }
675.issuemeta { color: var(--muted); font-size: var(--fs-2); margin-top: 0; }
676.review { font-size: var(--fs-2); }
677
678/* comment cards; discussion stays at a readable measure */
679article.comment, form.commentform {
680 max-width: 48rem;
681}
682article.comment {
683 border: 1px solid var(--faint);
684 border-radius: var(--r-lg);
685 margin: var(--sp-4) 0;
686}
687article.comment .commenthead {
688 background: var(--surface);
689 border-bottom: 1px solid var(--faint);
690 border-radius: var(--r-lg) var(--r-lg) 0 0;
691 padding: var(--sp-2) var(--sp-4);
692 font-size: var(--fs-2);
693}
694article.comment .commenthead .when { color: var(--muted); }
695article.comment .rendered { padding: 0 var(--sp-4); }
696article.comment .rendered > :first-child { margin-top: var(--sp-3); }
697article.comment .rendered > :last-child { margin-bottom: var(--sp-3); }
698form.commentform { margin: var(--sp-4) 0; }
699details.editbox { margin: var(--sp-2) 0; max-width: 48rem; }
700details.editbox summary { cursor: pointer; color: var(--muted); font-size: var(--fs-2); }
701details.editbox summary:hover { color: var(--accent); }
702details.editbox input[type="text"] { width: 100%; }
703.syscomment {
704 max-width: 48rem;
705 color: var(--muted);
706 font-size: var(--fs-2);
707 margin: var(--sp-3) 0;
708 padding-left: var(--sp-4);
709 border-left: 3px solid var(--faint);
710}
711.syscomment p { display: inline; margin: 0; }
712
713/* review threads under diff lines */
714.thread {
715 border: 1px solid var(--faint);
716 border-left: 3px solid var(--accent);
717 border-radius: var(--r-md);
718 padding: var(--sp-2) var(--sp-4);
719 margin: var(--sp-2) 0 var(--sp-2) var(--sp-6);
720}
721.thread.resolved { border-left-color: var(--ok); opacity: 0.75; }
722.thread.stale { border-left-color: var(--warn); }
723.thread p.commenthead { font-size: var(--fs-2); margin: var(--sp-2) 0 0; }
724.thread .when { color: var(--muted); }
725.thread .rendered p { margin: var(--sp-1) 0; }
726.thread .threadstate { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-1) 0 0; }
727
728/* forms */
729input, textarea, button, select { font: inherit; color: inherit; }
730input[type="text"], input:not([type]), textarea {
731 background: var(--bg);
732 border: 1px solid var(--line);
733 border-radius: var(--r-md);
734 padding: var(--sp-2) var(--sp-3);
735}
736textarea { width: 100%; resize: vertical; }
737textarea[name="content"] { font-family: var(--mono); font-size: var(--fs-1); }
738input:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
739button {
740 background: var(--accent);
741 color: var(--accent-fg);
742 border: none;
743 border-radius: var(--r-md);
744 padding: var(--sp-1) var(--sp-3);
745 font-weight: 500;
746 cursor: pointer;
747}
748button:hover { filter: brightness(1.08); }
749
750/* 404 */
751.notfound { text-align: center; padding: var(--sp-6) 0; }
752.notfound .bigcode {
753 font-family: var(--mono);
754 font-size: 4rem;
755 color: var(--faint);
756 -webkit-text-stroke: 1px var(--line);
757 margin: 0;
758 line-height: 1;
759}
760.notfound h1 { margin-top: var(--sp-3); }
761
762/* footer */
763footer {
764 border-top: 1px solid var(--faint);
765 padding: var(--sp-4) 0;
766 color: var(--muted);
767 font-size: var(--fs-1);
768}
769footer p { margin: 0; }
770footer a { color: var(--muted); text-decoration: underline; }
771footer a:hover { color: var(--accent); }
772
773/* search */
774form.searchform {
775 display: flex;
776 gap: var(--sp-2);
777 margin: var(--sp-3) 0 var(--sp-4);
778}
779form.searchform input[type="search"] { flex: 1; max-width: 32rem; }
780form.searchform.compact { margin: 0; }
781form.searchform.compact input[type="search"] {
782 padding: var(--sp-1) var(--sp-3);
783 font-size: var(--fs-2);
784 min-width: 18rem;
785}
786ul.matchlist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
787ul.matchlist li { margin-bottom: var(--sp-3); }
788ul.matchlist .matchpath { font-family: var(--mono); font-size: var(--fs-1); }
789pre.matchline {
790 background: var(--code-bg);
791 border: 1px solid var(--faint);
792 border-radius: var(--r-md);
793 padding: var(--sp-1) var(--sp-3);
794 margin: var(--sp-1) 0 0;
795 overflow-x: auto;
796}
797pre.matchline mark {
798 background: color-mix(in srgb, var(--warn) 25%, transparent);
799 color: inherit;
800 border-radius: 2px;
801}
802
803/* wiki */
804.wikilayout { display: flex; gap: var(--sp-5); align-items: flex-start; }
805.wikipage { flex: 1; min-width: 0; }
806.wikinav { flex: none; width: 13rem; padding-top: var(--sp-4); }
807.wikinav ul { list-style: none; margin: var(--sp-1) 0 var(--sp-4); padding: 0; }
808.wikinav li a { display: block; padding: 0.15rem 0; color: var(--fg); }
809.wikinav li a:hover { color: var(--accent); text-decoration: none; }
810.wikinav li a.active { color: var(--accent); font-weight: 550; }
811@media (max-width: 40rem) {
812 /* Column direction + the desktop align-items:flex-start lets .wikipage
813 take its content's intrinsic width, overflowing the viewport (and
814 triggering iOS font inflation). Stretch pins it to the container. */
815 .wikilayout { flex-direction: column; align-items: stretch; }
816 .wikinav { width: auto; padding-top: 0; }
817}
818
819/* blame */
820.blame {
821 border: 1px solid var(--line);
822 border-radius: var(--rad-2, 6px);
823 overflow: hidden;
824}
825.blamehunk {
826 display: flex;
827 gap: var(--sp-3);
828 border-top: 1px solid var(--line);
829 align-items: flex-start;
830}
831.blamehunk:first-child { border-top: none; }
832.blameinfo {
833 flex: none;
834 width: 17rem;
835 padding: var(--sp-2) var(--sp-3);
836 min-width: 0;
837}
838.blameinfo .subject {
839 margin: 0;
840 font-size: var(--fs-1);
841 white-space: nowrap;
842 overflow: hidden;
843 text-overflow: ellipsis;
844}
845.blameinfo .meta { margin: 0; font-size: var(--fs-1); color: var(--muted); }
846.blamecode {
847 flex: 1;
848 margin: 0;
849 padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
850 overflow-x: auto;
851 border-left: 1px solid var(--line);
852 align-self: stretch;
853}
854.lineno {
855 display: inline-block;
856 min-width: 3.5em;
857 padding-right: 1em;
858 text-align: right;
859 color: var(--muted);
860 user-select: none;
861}
862
863/* mobile */
864@media (max-width: 40rem) {
865 .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
866 main.container { padding-top: var(--sp-2); }
867 .repogrid { grid-template-columns: 1fr; }
868 .thread { margin-left: var(--sp-3); }
869 table.tree td.mode, table.tree th.mode { display: none; }
870 .readme, .code { padding: var(--sp-3); }
871 .blamehunk { flex-direction: column; gap: 0; }
872 .blameinfo { width: auto; }
873 .blamecode { border-left: none; padding-left: var(--sp-3); width: 100%; }
874 .cardhead {
875 margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-3);
876 padding: var(--sp-2) var(--sp-3);
877 }
878}