internal/web/static/style.css
1061 lines · 32696 bytes
1/* gitbay stylesheet, Carbon-school: black shell, sharp lines, one blue.
2 One file, light and dark via prefers-color-scheme. Tokens first;
3 components use tokens only. No external requests: IBM Plex is served
4 from this origin. */
5
6@font-face {
7 font-family: "IBM Plex Sans";
8 font-style: normal;
9 font-weight: 400 600;
10 font-display: swap;
11 src: url(/static/fonts/plex-sans.woff2) format("woff2");
12}
13@font-face {
14 font-family: "IBM Plex Mono";
15 font-style: normal;
16 font-weight: 400;
17 font-display: swap;
18 src: url(/static/fonts/plex-mono-400.woff2) format("woff2");
19}
20@font-face {
21 font-family: "IBM Plex Mono";
22 font-style: normal;
23 font-weight: 500;
24 font-display: swap;
25 src: url(/static/fonts/plex-mono-500.woff2) format("woff2");
26}
27
28:root {
29 /* declare native light+dark support: correct form controls and
30 scrollbars per scheme, and opt out of browser auto-darkening */
31 color-scheme: light dark;
32
33 /* palette (Carbon g10) */
34 --bg: #f4f4f4;
35 --fg: #161616;
36 --muted: #525252;
37 --faint: #ececec; /* hairlines, row separators */
38 --line: #e0e0e0; /* control borders, tile edges */
39 --surface: #ffffff; /* tiles, cards */
40 --hover: #f0f2f8; /* row hover on tiles */
41 --accent: #0f62fe; /* blue-60: links, active nav, primary */
42 --accent-fg: #ffffff; /* text on accent */
43 --ok: #198038;
44 --warn: #8e6a00;
45 --bad: #da1e28;
46 --done: #8a3ffc; /* merged */
47 --neutral: #525252;
48 --code-bg: #f4f4f4;
49 /* the shell is ink in both schemes */
50 --shell-bg: #161616;
51 --shell-fg: #f4f4f4;
52 --shell-muted: #c6c6c6;
53 --shell-line: #161616;
54
55 /* type */
56 --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
57 Roboto, "Helvetica Neue", Arial, sans-serif;
58 --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
59 Consolas, "Liberation Mono", monospace;
60 --fs-0: 0.8rem; /* 12.8px: chips, fine print */
61 --fs-1: 0.866rem; /* ~13px: metadata, mono in tables */
62 --fs-2: 0.933rem; /* 14px: dense table text */
63 --fs-3: 1rem; /* 15px: body */
64 --fs-4: 1.135rem; /* ~17px: h2 */
65 --fs-5: 1.335rem; /* ~20px: h1 */
66
67 /* spacing */
68 --sp-1: 0.25rem;
69 --sp-2: 0.5rem;
70 --sp-3: 0.75rem;
71 --sp-4: 1rem;
72 --sp-5: 1.5rem;
73 --sp-6: 2.5rem;
74
75 /* radii: sharp everywhere; only tags stay pills */
76 --r-sm: 0;
77 --r-md: 0;
78 --r-lg: 0;
79 --r-pill: 999px;
80}
81@media (prefers-color-scheme: dark) {
82 :root {
83 /* Carbon g100 */
84 --bg: #161616;
85 --fg: #f4f4f4;
86 --muted: #a8a8a8;
87 --faint: #2a2a2a;
88 --line: #393939;
89 --surface: #262626;
90 --hover: #2e3440;
91 --accent: #78a9ff; /* blue-40 reads on dark grounds */
92 --accent-fg: #161616;
93 --ok: #42be65;
94 --warn: #d2a106;
95 --bad: #fa4d56;
96 --done: #a56eff;
97 --neutral: #a8a8a8;
98 --code-bg: #131313;
99 --shell-line: #393939;
100 }
101}
102
103* { box-sizing: border-box; }
104html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
105body {
106 margin: 0;
107 background: var(--bg);
108 color: var(--fg);
109 font: var(--fs-3)/1.6 var(--sans);
110 min-height: 100vh;
111 display: flex;
112 flex-direction: column;
113}
114main { flex: 1; }
115
116a { color: var(--accent); text-decoration: none; }
117a:hover { text-decoration: underline; }
118
119h1 { font-size: var(--fs-5); font-weight: 600; line-height: 1.3;
120 margin: var(--sp-5) 0 var(--sp-3); letter-spacing: -0.01em; }
121h2 { font-size: var(--fs-4); font-weight: 600; line-height: 1.35;
122 margin: var(--sp-5) 0 var(--sp-3); }
123h3 { font-size: var(--fs-3); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
124
125code, pre, .code, td.mode, td.size {
126 font-family: var(--mono);
127 font-size: var(--fs-1);
128}
129
130/* layout: one shared container aligns header, content, and footer */
131.container {
132 max-width: 64rem;
133 margin: 0 auto;
134 padding: 0 var(--sp-5);
135}
136/* the shell: an ink bar in both schemes, Carbon UI-shell style. Scoped
137 to the page header so cards with their own <header> stay untouched. */
138body > header {
139 background: var(--shell-bg);
140 border-bottom: 1px solid var(--shell-line);
141 padding: 0;
142 position: sticky;
143 top: 0;
144 z-index: 30;
145}
146a.site {
147 font-weight: 600;
148 color: var(--shell-fg);
149 letter-spacing: -0.01em;
150 display: inline-flex;
151 align-items: center;
152 gap: var(--sp-2);
153 padding: 0 var(--sp-4);
154}
155a.site:hover { text-decoration: none; color: #ffffff; }
156a.site svg.mark { display: block; }
157a.site svg.mark rect { fill: #0f62fe; }
158a.site svg.mark path { stroke: #ffffff; }
159nav.topnav {
160 display: flex;
161 align-items: center;
162 gap: 0;
163 height: 3rem;
164}
165nav.topnav .spacer { flex: 1; }
166/* the avatar square is the only nav item in the shell; everything else
167 lives in the rail */
168a.avatar {
169 width: 2rem;
170 height: 2rem;
171 margin-right: var(--sp-3);
172 display: inline-flex;
173 align-items: center;
174 justify-content: center;
175 background: var(--accent);
176 color: #ffffff;
177 font-size: var(--fs-2);
178 font-weight: 600;
179 flex: none;
180}
181a.avatar:hover { text-decoration: none; filter: brightness(1.12); }
182a.avatar.guest { background: #393939; color: #f4f4f4; }
183
184/* the rail: persistent navigation, global links first, repo sections
185 below them, the signed-in user pinned to the bottom */
186.shell { display: flex; flex: 1; align-items: stretch; }
187.siderail {
188 flex: none;
189 width: 13.5rem;
190 background: var(--surface);
191 border-right: 1px solid var(--line);
192 position: sticky;
193 top: 3rem;
194 height: calc(100vh - 3rem);
195 display: flex;
196 flex-direction: column;
197}
198.railmain { flex: 1; overflow-y: auto; padding: var(--sp-3) 0; }
199.railfoot {
200 flex: none;
201 border-top: 1px solid var(--line);
202 padding: var(--sp-2) 0;
203 background: var(--surface);
204}
205.siderail a, .siderail button.linklike {
206 display: flex;
207 align-items: center;
208 gap: var(--sp-2);
209 width: 100%;
210 text-align: left;
211 color: var(--fg);
212 font-size: var(--fs-2);
213 padding: 0.4rem var(--sp-4);
214 border-left: 3px solid transparent;
215 line-height: 1.35;
216}
217.siderail a:hover, .siderail button.linklike:hover {
218 background: var(--hover);
219 text-decoration: none;
220 color: var(--fg);
221}
222.siderail a.active {
223 border-left-color: var(--accent);
224 background: var(--hover);
225 font-weight: 600;
226}
227.siderail .glabel {
228 display: block;
229 font-size: var(--fs-0);
230 color: var(--muted);
231 letter-spacing: 0.04em;
232 padding: 0 var(--sp-4);
233 margin: var(--sp-4) 0 var(--sp-1);
234}
235.siderail .glabel:not(.sub) {
236 color: var(--fg);
237 font-weight: 600;
238 border-top: 1px solid var(--line);
239 padding-top: var(--sp-3);
240 overflow-wrap: anywhere;
241}
242.siderail .glabel.sub { margin-top: var(--sp-2); }
243.siderail .railuser { font-weight: 600; }
244.siderail .avatar.sm {
245 width: 1.25rem;
246 height: 1.25rem;
247 margin: 0;
248 font-size: var(--fs-0);
249 background: var(--accent);
250 color: #ffffff;
251}
252main.container {
253 width: 100%;
254 min-width: 0;
255 flex: 1;
256 margin: 0;
257 max-width: 66rem;
258 padding-top: var(--sp-4);
259 padding-bottom: var(--sp-6);
260}
261@media (max-width: 52rem) {
262 /* the rail folds into a wrapping strip above the content */
263 .shell { display: block; }
264 .siderail {
265 width: auto;
266 height: auto;
267 position: static;
268 flex-direction: row;
269 flex-wrap: wrap;
270 align-items: center;
271 border-right: none;
272 border-bottom: 1px solid var(--line);
273 }
274 .railmain, .railfoot {
275 display: flex;
276 flex-wrap: wrap;
277 align-items: center;
278 overflow: visible;
279 padding: var(--sp-1) var(--sp-2);
280 border-top: none;
281 }
282 .railmain { flex: 1 1 auto; }
283 .siderail a, .siderail button.linklike {
284 width: auto;
285 border-left: none;
286 border-bottom: 3px solid transparent;
287 padding: var(--sp-1) var(--sp-2);
288 }
289 .siderail a.active { border-left: none; border-bottom-color: var(--accent); background: none; }
290 .siderail .glabel { display: none; }
291}
292
293/* tables */
294table { border-collapse: collapse; width: 100%; }
295td {
296 padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
297 border-bottom: 1px solid var(--faint);
298 vertical-align: top;
299 font-size: var(--fs-2);
300}
301td:last-child { padding-right: 0; }
302td.size, td.mode { color: var(--muted); white-space: nowrap; }
303
304/* repo header */
305.repohead { margin-bottom: var(--sp-4); }
306h1.repotitle { margin: var(--sp-4) 0 var(--sp-1); font-weight: 400; }
307h1.repotitle a { color: var(--fg); }
308h1.repotitle a:last-of-type { font-weight: 650; }
309h1.repotitle a:hover { color: var(--accent); text-decoration: none; }
310h1.repotitle .sep { color: var(--muted); margin: 0 0.15em; }
311form.pinform { display: inline; margin-left: var(--sp-2); vertical-align: middle; }
312button.pinbtn {
313 background: none;
314 border: 1px solid var(--line);
315 border-radius: var(--r-pill);
316 color: var(--muted);
317 font-size: var(--fs-0);
318 padding: 0.05rem 0.55rem;
319 cursor: pointer;
320}
321button.pinbtn:hover { border-color: var(--accent); color: var(--accent); filter: none; }
322button.pinbtn.pinned { color: var(--accent); border-color: var(--accent); }
323a.chip.label:hover, a.chip.topic:hover { text-decoration: none; filter: brightness(1.15); }
324.repohead .desc { margin: 0 0 var(--sp-2); }
325
326/* repo rail: grouped vertical navigation on the left */
327nav.tabs { display: flex; flex-direction: column; margin-top: var(--sp-1); }
328nav.tabs .glabel {
329 font-size: var(--fs-0);
330 color: var(--muted);
331 letter-spacing: 0.04em;
332 margin: var(--sp-4) 0 var(--sp-1);
333}
334nav.tabs .glabel:first-child { margin-top: 0; }
335nav.tabs a {
336 color: var(--fg);
337 padding: 0.32rem var(--sp-3);
338 font-size: var(--fs-2);
339 border-left: 3px solid transparent;
340}
341nav.tabs a:hover { background: var(--hover); text-decoration: none; }
342nav.tabs a.active {
343 border-left-color: var(--accent);
344 background: var(--surface);
345 font-weight: 600;
346}
347@media (max-width: 52rem) {
348 /* the rail folds back into a wrapping strip on narrow screens */
349 main.container:has(> nav.tabs) { display: block; }
350 nav.tabs { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-1); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); position: static; }
351 nav.tabs .glabel { display: none; }
352 nav.tabs a { border-left: none; border-bottom: 3px solid transparent; padding: var(--sp-1) var(--sp-2); }
353 nav.tabs a.active { border-bottom-color: var(--accent); background: none; }
354}
355
356.clone { color: var(--muted); font-size: var(--fs-2); }
357.clone code {
358 background: var(--code-bg);
359 border: 1px solid var(--line);
360 padding: 0.15rem 0.5rem;
361 border-radius: var(--r-sm);
362}
363
364/* path bar on tree and blob pages */
365.pathbar {
366 display: flex;
367 flex-wrap: wrap;
368 align-items: center;
369 gap: var(--sp-2) var(--sp-3);
370 margin: var(--sp-3) 0;
371 font-size: var(--fs-2);
372}
373.pathbar .spacer { flex: 1; }
374.refchip {
375 display: inline-flex;
376 align-items: center;
377 gap: 0.3rem;
378 background: var(--surface);
379 border: 1px solid var(--faint);
380 border-radius: var(--r-md);
381 padding: 0.1rem 0.55rem;
382 font-family: var(--mono);
383 font-size: var(--fs-1);
384 color: var(--fg);
385}
386.pathbar .crumbs strong { color: var(--fg); }
387details.refmenu { position: relative; }
388details.refmenu summary { cursor: pointer; list-style: none; }
389details.refmenu summary::-webkit-details-marker { display: none; }
390details.refmenu summary::after { content: " ▾"; color: var(--muted); }
391details.refmenu .refdrop {
392 position: absolute;
393 z-index: 10;
394 top: calc(100% + 4px);
395 left: 0;
396 min-width: 12rem;
397 max-height: 20rem;
398 overflow-y: auto;
399 background: var(--bg);
400 border: 1px solid var(--line);
401 border-radius: var(--r-md);
402 box-shadow: 0 4px 16px rgba(0,0,0,0.12);
403 padding: var(--sp-1) 0;
404}
405details.refmenu .refdrop a {
406 display: block;
407 padding: var(--sp-1) var(--sp-3);
408 color: var(--fg);
409 font-family: var(--mono);
410 font-size: var(--fs-1);
411}
412details.refmenu .refdrop a:hover { background: var(--hover); text-decoration: none; }
413details.refmenu .refdrop a.allrefs { color: var(--accent); font-family: var(--sans); border-top: 1px solid var(--faint); margin-top: var(--sp-1); }
414
415/* file and refs tables: bordered cards, rows inside */
416table.tree, table.refs {
417 background: var(--surface);
418 border: 1px solid var(--line);
419 border-radius: var(--r-lg);
420 border-collapse: separate;
421 border-spacing: 0;
422 overflow: hidden;
423 margin-bottom: var(--sp-4);
424}
425table.tree td, table.refs td {
426 padding: var(--sp-2) var(--sp-4);
427 border-bottom: 1px solid var(--faint);
428}
429table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; }
430table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); }
431table.tree tr.cols th {
432 text-align: left;
433 font-weight: 500;
434 font-size: var(--fs-1);
435 color: var(--muted);
436 padding: var(--sp-1) var(--sp-4);
437 border-bottom: 1px solid var(--line);
438 background: var(--bg);
439}
440table.tree tr.cols:hover th { background: var(--bg); }
441table.tree th.size { text-align: right; }
442table.tree td.name { width: 100%; }
443table.tree td.name a { color: var(--fg); }
444table.tree td.name a:hover { color: var(--accent); }
445table.tree td.size { text-align: right; }
446table.tree td.empty, table.refs td.empty, li.empty, ul.loglist li.empty { color: var(--muted); }
447
448/* refs page */
449table.refs td.name { width: 100%; }
450table.refs td.sha { color: var(--muted); }
451
452/* card header (README) */
453.cardhead {
454 font-family: var(--mono);
455 font-size: var(--fs-1);
456 color: var(--muted);
457 border-bottom: 1px solid var(--faint);
458 margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4);
459 padding: var(--sp-2) var(--sp-5);
460 background: var(--bg);
461 border-radius: var(--r-lg) var(--r-lg) 0 0;
462}
463
464/* log */
465ul.loglist {
466 list-style: none;
467 margin: var(--sp-3) 0;
468 padding: 0;
469 background: var(--surface);
470 border: 1px solid var(--line);
471 border-radius: var(--r-lg);
472 overflow: hidden;
473}
474ul.loglist li {
475 display: flex;
476 align-items: baseline;
477 gap: var(--sp-3);
478 padding: var(--sp-2) var(--sp-4);
479 border-bottom: 1px solid var(--faint);
480}
481ul.loglist li:last-child { border-bottom: none; }
482ul.loglist li:hover { background: var(--hover); }
483ul.loglist .commitmain { flex: 1; min-width: 0; }
484ul.loglist p { margin: 0; }
485ul.loglist .subject a { color: var(--fg); font-weight: 550; }
486ul.loglist .subject a:hover { color: var(--accent); }
487ul.loglist .commitside {
488 display: flex;
489 align-items: baseline;
490 gap: var(--sp-2);
491 white-space: nowrap;
492}
493p.pager { margin-top: var(--sp-4); }
494
495/* commit page */
496.commithead p { margin: var(--sp-1) 0; }
497.commithead h2 { margin-bottom: var(--sp-1); }
498code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
499.empty-note { color: var(--muted); }
500.crumbs { color: var(--muted); font-size: var(--fs-2); }
501.desc, td.desc { color: var(--muted); }
502.error { color: var(--bad); }
503.meta { color: var(--muted); font-size: var(--fs-1); }
504svg.icon { vertical-align: -0.125em; }
505.lede { font-size: var(--fs-3); margin: var(--sp-2) 0; }
506
507/* repo listings (explore, owner pages, dashboard): one row per repo */
508ul.repolist {
509 list-style: none;
510 margin: var(--sp-3) 0 var(--sp-5);
511 padding: 0;
512 background: var(--surface);
513 border: 1px solid var(--line);
514 border-radius: var(--r-lg);
515 overflow: hidden;
516}
517ul.repolist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
518/* pinned repos: a compact wrap of name pills, no description or meta */
519ul.pinlist {
520 list-style: none;
521 margin: var(--sp-3) 0 var(--sp-5);
522 padding: 0;
523 display: flex;
524 flex-wrap: wrap;
525 gap: var(--sp-2);
526}
527ul.pinlist li {
528 background: var(--surface);
529 border: 1px solid var(--line);
530 border-radius: var(--r-md);
531 padding: var(--sp-1) var(--sp-3);
532}
533ul.pinlist li:hover { background: var(--hover); }
534ul.pinlist li a { color: var(--fg); }
535ul.pinlist li a:hover { color: var(--accent); text-decoration: none; }
536ul.pinlist .sep { color: var(--muted); margin: 0 0.15em; }
537ul.repolist li:last-child { border-bottom: none; }
538ul.repolist li:hover { background: var(--hover); }
539ul.repolist li.empty { color: var(--muted); }
540ul.repolist p { margin: 0; }
541ul.repolist .reponame { font-size: var(--fs-3); }
542ul.repolist .reponame a { color: var(--fg); }
543ul.repolist .reponame a strong { color: var(--accent); font-weight: 600; }
544ul.repolist .reponame .sep { color: var(--muted); margin: 0 0.1em; }
545ul.repolist .desc { margin-top: 0.1rem; }
546ul.repolist .topics { margin-top: var(--sp-1); }
547ul.repolist .meta { margin-top: var(--sp-1); }
548
549/* owner profile header */
550.profilehead {
551 border-bottom: 1px solid var(--faint);
552 padding-bottom: var(--sp-4);
553 margin-bottom: var(--sp-4);
554}
555.profilehead h1 { margin: var(--sp-4) 0 var(--sp-1); }
556.profilehead .lede { margin: 0 0 var(--sp-1); }
557.profilehead .meta { margin: var(--sp-1) 0 0; }
558h2 .count { color: var(--muted); font-weight: 400; font-size: var(--fs-2); }
559
560/* activity graph: 53 week columns x 7 day rows, accent-tinted levels */
561.actgraph-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
562.actgraph { display: flex; gap: 3px; width: max-content; }
563.actweek { display: flex; flex-direction: column; gap: 3px; }
564.actday {
565 width: 11px;
566 height: 11px;
567 border-radius: 2px;
568 background: var(--faint);
569}
570.actday.pad { background: transparent; }
571.actday.l1 { background: color-mix(in srgb, var(--accent) 25%, var(--bg)); }
572.actday.l2 { background: color-mix(in srgb, var(--accent) 50%, var(--bg)); }
573.actday.l3 { background: color-mix(in srgb, var(--accent) 75%, var(--bg)); }
574.actday.l4 { background: var(--accent); }
575
576/* heading row with actions on the right */
577.headrow {
578 display: flex;
579 align-items: baseline;
580 gap: var(--sp-4);
581 flex-wrap: wrap;
582}
583.headrow .spacer { flex: 1; }
584
585/* member and org chips on owner pages */
586a.memberchip {
587 display: inline-block;
588 border: 1px solid var(--line);
589 border-radius: var(--r-pill);
590 padding: 0.05rem 0.6rem;
591 color: var(--fg);
592 font-size: var(--fs-1);
593 margin: 0 0.15rem 0.15rem 0;
594}
595a.memberchip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
596a.memberchip .role { color: var(--muted); }
597
598/* landing page */
599.landing { max-width: 44rem; padding: var(--sp-6) 0; }
600.landing h1 { font-size: 1.8rem; margin-bottom: var(--sp-3); }
601.landing .lede { font-size: var(--fs-4); color: var(--muted); line-height: 1.7; margin: 0 0 var(--sp-4); }
602pre.quickstart {
603 background: var(--code-bg);
604 border: 1px solid var(--line);
605 border-radius: var(--r-md);
606 padding: var(--sp-3) var(--sp-4);
607 overflow-x: auto;
608 margin: 0 0 var(--sp-4);
609}
610.landing .explorelink { font-weight: 550; }
611
612/* index toolbar */
613p.toolbar { color: var(--muted); font-size: var(--fs-2); margin-top: var(--sp-4); }
614form.inline { display: inline; }
615button.linklike {
616 background: none;
617 border: none;
618 color: var(--accent);
619 padding: 0;
620 font: inherit;
621 font-size: var(--fs-2);
622 cursor: pointer;
623}
624button.linklike:hover { text-decoration: underline; filter: none; }
625
626/* cards: README, comments */
627.readme, .code {
628 background: var(--surface);
629 border: 1px solid var(--line);
630 border-radius: var(--r-lg);
631 padding: var(--sp-4) var(--sp-5);
632 margin-top: var(--sp-4);
633 overflow-x: auto;
634}
635/* Highlighting is class-based with a palette per scheme, so code blocks
636 follow the site's own colors. */
637.code { background: var(--code-bg); color: var(--fg); padding: var(--sp-3) var(--sp-4); border-color: var(--line); }
638.code pre { margin: 0; background: transparent !important; }
639@media (prefers-color-scheme: dark) {
640 .code { border-color: var(--line); }
641}
642
643/* rendered markdown / org / html */
644.rendered { max-width: 100%; overflow-wrap: anywhere; }
645.rendered pre {
646 background: var(--code-bg);
647 border: 1px solid var(--line);
648 padding: var(--sp-3) var(--sp-4);
649 border-radius: var(--r-md);
650 overflow-x: auto;
651}
652.rendered code {
653 background: var(--code-bg);
654 border: 1px solid var(--line);
655 padding: 0.05rem 0.3rem;
656 border-radius: var(--r-sm);
657}
658.rendered pre code { background: transparent; border: none; padding: 0; }
659.rendered blockquote {
660 border-left: 3px solid var(--line);
661 margin-left: 0;
662 padding-left: var(--sp-4);
663 color: var(--muted);
664}
665.rendered img { max-width: 100%; }
666.rendered h1, .rendered h2 { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-1); }
667.rendered table {
668 border-collapse: collapse;
669 margin: var(--sp-3) 0;
670 display: block;
671 max-width: 100%;
672 overflow-x: auto;
673}
674.rendered th, .rendered td {
675 border: 1px solid var(--line);
676 padding: var(--sp-1) var(--sp-3);
677 text-align: left;
678 overflow-wrap: normal; /* scroll the table, don't shatter words */
679}
680.rendered th { background: var(--surface); font-weight: 600; }
681.blobimage { text-align: center; }
682.blobimage img {
683 max-width: 100%;
684 border: 1px solid var(--faint);
685 border-radius: var(--r-md);
686 background: var(--surface);
687}
688
689pre.message {
690 background: var(--code-bg);
691 border: 1px solid var(--line);
692 padding: var(--sp-3) var(--sp-4);
693 border-radius: var(--r-md);
694 white-space: pre-wrap;
695 overflow-wrap: anywhere;
696}
697
698/* diffs */
699details.difffold summary {
700 cursor: pointer;
701 display: flex;
702 align-items: baseline;
703 gap: var(--sp-3);
704 margin: var(--sp-5) 0 var(--sp-2);
705 list-style: none;
706}
707details.difffold summary::-webkit-details-marker { display: none; }
708/* flex summaries lose the native disclosure marker; draw our own */
709details.difffold summary::before { content: "▸"; color: var(--muted); }
710details.difffold[open] summary::before { content: "▾"; }
711details.difffold summary h3 { display: inline; margin: 0; }
712details.difffold summary .add { color: var(--ok); }
713details.difffold summary .del { color: var(--bad); }
714pre.diff {
715 background: var(--code-bg);
716 border: 1px solid var(--line);
717 padding: var(--sp-3) var(--sp-4);
718 border-radius: var(--r-md);
719 overflow-x: auto;
720 line-height: 1.5;
721}
722pre.diff .add { color: var(--ok); }
723pre.diff .del { color: var(--bad); }
724pre.diff .hunk { color: var(--accent); }
725pre.diff .meta { color: var(--muted); }
726
727/* badges: signature and check states. Semantic colors stay distinct:
728 green verified/success, amber pending/stale, red bad/failure, muted
729 unsigned. */
730.badge, .chip {
731 --chip: var(--neutral);
732 display: inline-block;
733 padding: 0.05rem 0.55rem;
734 border-radius: var(--r-pill);
735 font-size: var(--fs-0);
736 font-weight: 500;
737 line-height: 1.5;
738 color: var(--chip);
739 border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
740 background: color-mix(in srgb, var(--chip) 7%, transparent);
741 white-space: nowrap;
742 vertical-align: middle;
743}
744.chip-open { --chip: var(--ok); }
745.chip-closed { --chip: var(--bad); }
746.chip-merged, .chip-done { --chip: var(--done); }
747.chip-neutral, .chip-source_gone { --chip: var(--neutral); }
748.chip-stale { --chip: var(--warn); }
749.chip.label { font-weight: 500; }
750.chip.topic { --chip: var(--accent); }
751.repohead .topics { margin: 0 0 var(--sp-2); }
752.repohead .mirrorline { margin: 0 0 var(--sp-2); }
753.mirrorerr { color: var(--bad); }
754.badge-verified { --chip: var(--ok); }
755.badge-unsigned { --chip: var(--neutral); }
756.badge-signed_unknown_key { --chip: var(--warn); }
757.badge-signed_email_mismatch { --chip: var(--bad); }
758.badge-signed_key_expired { --chip: var(--warn); }
759.badge-signed_key_revoked { --chip: var(--bad); }
760.badge-bad_signature { --chip: var(--bad); }
761.badge.check-success { --chip: var(--ok); }
762.badge.check-pending { --chip: var(--warn); }
763.badge.check-failure, .badge.check-error { --chip: var(--bad); }
764.badge.check-running, .chip.check-running { --chip: var(--warn); }
765.chip.check-success { --chip: var(--ok); }
766.chip.check-pending { --chip: var(--warn); }
767.chip.check-failure { --chip: var(--bad); }
768pre.buildlog { max-height: 40rem; overflow: auto; }
769span.check-success { color: var(--ok); }
770span.check-pending { color: var(--warn); }
771span.check-failure, span.check-error { color: var(--bad); }
772
773/* issue and MR listings */
774.listhead {
775 display: flex;
776 align-items: baseline;
777 gap: var(--sp-4);
778 flex-wrap: wrap;
779}
780.listhead h2 { margin-bottom: var(--sp-2); }
781nav.filters { display: flex; gap: var(--sp-1); }
782nav.filters a {
783 color: var(--muted);
784 font-size: var(--fs-2);
785 padding: 0.05rem var(--sp-2);
786 border-radius: var(--r-pill);
787}
788nav.filters a:hover { color: var(--fg); background: var(--hover); text-decoration: none; }
789nav.filters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
790
791ul.issuelist {
792 list-style: none;
793 margin: var(--sp-2) 0;
794 padding: 0;
795 background: var(--surface);
796 border: 1px solid var(--line);
797 border-radius: var(--r-lg);
798 overflow: hidden;
799}
800ul.issuelist li {
801 display: flex;
802 align-items: baseline;
803 gap: var(--sp-3);
804 padding: var(--sp-3) var(--sp-4);
805 border-bottom: 1px solid var(--faint);
806}
807ul.issuelist li:last-child { border-bottom: none; }
808ul.issuelist li:hover { background: var(--hover); }
809ul.issuelist li.empty { display: block; color: var(--muted); }
810ul.issuelist .issuemain { flex: 1; min-width: 0; }
811ul.issuelist p { margin: 0; }
812ul.issuelist .title a { color: var(--fg); font-weight: 550; }
813ul.issuelist .title a:hover { color: var(--accent); }
814
815/* releases */
816article.release {
817 background: var(--surface);
818 border: 1px solid var(--line);
819 border-radius: var(--r-lg);
820 padding: var(--sp-3) var(--sp-4);
821 margin: var(--sp-4) 0;
822}
823.releasehead { background: none; border: 0; padding: 0; }
824.releasehead h3 { margin: 0 0 var(--sp-1); }
825.releasehead .meta { margin: 0 0 var(--sp-2); }
826table.assets { margin-top: var(--sp-2); }
827table.assets td.size { color: var(--muted); white-space: nowrap; text-align: right; }
828table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--fs-1); }
829
830/* milestones */
831ul.milestonelist {
832 list-style: none;
833 margin: var(--sp-2) 0;
834 padding: 0;
835 border: 1px solid var(--line);
836 border-radius: var(--r-lg);
837 overflow: hidden;
838}
839ul.milestonelist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
840ul.milestonelist li:last-child { border-bottom: none; }
841ul.milestonelist li.empty { color: var(--muted); }
842ul.milestonelist p { margin: 0; }
843ul.milestonelist .title { font-weight: 550; }
844.progress {
845 height: 6px;
846 background: var(--faint);
847 border-radius: var(--r-pill);
848 margin-top: var(--sp-2);
849 overflow: hidden;
850 max-width: 24rem;
851}
852.progress .bar { height: 100%; background: var(--ok); }
853.listhead .spacer { flex: 1; }
854
855/* issue / MR detail */
856h2.issuetitle { margin-bottom: var(--sp-1); font-size: var(--fs-5); }
857.issuenumber { color: var(--muted); font-weight: 400; }
858.issuemeta { color: var(--muted); font-size: var(--fs-2); margin-top: 0; }
859.review { font-size: var(--fs-2); }
860
861/* comment cards; discussion stays at a readable measure */
862article.comment, form.commentform {
863 max-width: 48rem;
864}
865article.comment {
866 border: 1px solid var(--faint);
867 border-radius: var(--r-lg);
868 margin: var(--sp-4) 0;
869}
870article.comment .commenthead {
871 background: var(--surface);
872 border-bottom: 1px solid var(--faint);
873 border-radius: var(--r-lg) var(--r-lg) 0 0;
874 padding: var(--sp-2) var(--sp-4);
875 font-size: var(--fs-2);
876}
877article.comment .commenthead .when { color: var(--muted); }
878article.comment .rendered { padding: 0 var(--sp-4); }
879article.comment .rendered > :first-child { margin-top: var(--sp-3); }
880article.comment .rendered > :last-child { margin-bottom: var(--sp-3); }
881form.commentform { margin: var(--sp-4) 0; }
882details.editbox { margin: var(--sp-2) 0; max-width: 48rem; }
883details.editbox summary { cursor: pointer; color: var(--muted); font-size: var(--fs-2); }
884details.editbox summary:hover { color: var(--accent); }
885details.editbox input[type="text"] { width: 100%; }
886.syscomment {
887 max-width: 48rem;
888 color: var(--muted);
889 font-size: var(--fs-2);
890 margin: var(--sp-3) 0;
891 padding-left: var(--sp-4);
892 border-left: 3px solid var(--faint);
893}
894.syscomment p { display: inline; margin: 0; }
895
896/* review threads under diff lines */
897.thread {
898 border: 1px solid var(--faint);
899 border-left: 3px solid var(--accent);
900 border-radius: var(--r-md);
901 padding: var(--sp-2) var(--sp-4);
902 margin: var(--sp-2) 0 var(--sp-2) var(--sp-6);
903}
904.thread.resolved { border-left-color: var(--ok); opacity: 0.75; }
905.thread.stale { border-left-color: var(--warn); }
906.thread p.commenthead { font-size: var(--fs-2); margin: var(--sp-2) 0 0; }
907.thread .when { color: var(--muted); }
908.thread .rendered p { margin: var(--sp-1) 0; }
909.thread .threadstate { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-1) 0 0; }
910
911/* forms */
912input, textarea, button, select { font: inherit; color: inherit; }
913input[type="text"], input:not([type]), textarea {
914 background: var(--bg);
915 border: 1px solid var(--line);
916 border-radius: var(--r-md);
917 padding: var(--sp-2) var(--sp-3);
918}
919textarea { width: 100%; resize: vertical; }
920textarea[name="content"] { font-family: var(--mono); font-size: var(--fs-1); }
921input:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
922button {
923 background: var(--accent);
924 color: var(--accent-fg);
925 border: none;
926 border-radius: var(--r-md);
927 padding: var(--sp-1) var(--sp-3);
928 font-weight: 500;
929 cursor: pointer;
930}
931button:hover { filter: brightness(1.08); }
932
933/* 404 */
934.notfound { text-align: center; padding: var(--sp-6) 0; }
935.notfound .bigcode {
936 font-family: var(--mono);
937 font-size: 4rem;
938 color: var(--faint);
939 -webkit-text-stroke: 1px var(--line);
940 margin: 0;
941 line-height: 1;
942}
943.notfound h1 { margin-top: var(--sp-3); }
944
945/* footer */
946footer {
947 border-top: 1px solid var(--faint);
948 padding: var(--sp-4) 0;
949 color: var(--muted);
950 font-size: var(--fs-1);
951}
952footer p { margin: 0; }
953footer a { color: var(--muted); text-decoration: underline; }
954footer a:hover { color: var(--accent); }
955
956/* search */
957form.searchform {
958 display: flex;
959 gap: var(--sp-2);
960 margin: var(--sp-3) 0 var(--sp-4);
961}
962form.searchform input[type="search"] { flex: 1; max-width: 32rem; }
963form.searchform.compact { margin: 0; }
964form.searchform.compact input[type="search"] {
965 padding: var(--sp-1) var(--sp-3);
966 font-size: var(--fs-2);
967 min-width: 18rem;
968}
969ul.matchlist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
970ul.matchlist li { margin-bottom: var(--sp-3); }
971ul.matchlist .matchpath { font-family: var(--mono); font-size: var(--fs-1); }
972pre.matchline {
973 background: var(--code-bg);
974 border: 1px solid var(--faint);
975 border-radius: var(--r-md);
976 padding: var(--sp-1) var(--sp-3);
977 margin: var(--sp-1) 0 0;
978 overflow-x: auto;
979}
980pre.matchline mark {
981 background: color-mix(in srgb, var(--warn) 25%, transparent);
982 color: inherit;
983 border-radius: 2px;
984}
985
986/* wiki */
987.wikilayout { display: flex; gap: var(--sp-5); align-items: flex-start; }
988.wikipage { flex: 1; min-width: 0; }
989.wikinav { flex: none; width: 13rem; padding-top: var(--sp-4); }
990.wikinav ul { list-style: none; margin: var(--sp-1) 0 var(--sp-4); padding: 0; }
991.wikinav li a { display: block; padding: 0.15rem 0; color: var(--fg); }
992.wikinav li a:hover { color: var(--accent); text-decoration: none; }
993.wikinav li a.active { color: var(--accent); font-weight: 550; }
994@media (max-width: 40rem) {
995 /* Column direction + the desktop align-items:flex-start lets .wikipage
996 take its content's intrinsic width, overflowing the viewport (and
997 triggering iOS font inflation). Stretch pins it to the container. */
998 .wikilayout { flex-direction: column; align-items: stretch; }
999 .wikinav { width: auto; padding-top: 0; }
1000}
1001
1002/* blame */
1003.blame {
1004 border: 1px solid var(--line);
1005 border-radius: var(--rad-2, 6px);
1006 overflow: hidden;
1007}
1008.blamehunk {
1009 display: flex;
1010 gap: var(--sp-3);
1011 border-top: 1px solid var(--line);
1012 align-items: flex-start;
1013}
1014.blamehunk:first-child { border-top: none; }
1015.blameinfo {
1016 flex: none;
1017 width: 17rem;
1018 padding: var(--sp-2) var(--sp-3);
1019 min-width: 0;
1020}
1021.blameinfo .subject {
1022 margin: 0;
1023 font-size: var(--fs-1);
1024 white-space: nowrap;
1025 overflow: hidden;
1026 text-overflow: ellipsis;
1027}
1028.blameinfo .meta { margin: 0; font-size: var(--fs-1); color: var(--muted); }
1029.blamecode {
1030 flex: 1;
1031 margin: 0;
1032 padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
1033 overflow-x: auto;
1034 border-left: 1px solid var(--line);
1035 align-self: stretch;
1036}
1037.lineno {
1038 display: inline-block;
1039 min-width: 3.5em;
1040 padding-right: 1em;
1041 text-align: right;
1042 color: var(--muted);
1043 user-select: none;
1044}
1045
1046/* mobile */
1047@media (max-width: 40rem) {
1048 .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
1049 main.container { padding-top: var(--sp-2); }
1050 .repogrid { grid-template-columns: 1fr; }
1051 .thread { margin-left: var(--sp-3); }
1052 table.tree td.mode, table.tree th.mode { display: none; }
1053 .readme, .code { padding: var(--sp-3); }
1054 .blamehunk { flex-direction: column; gap: 0; }
1055 .blameinfo { width: auto; }
1056 .blamecode { border-left: none; padding-left: var(--sp-3); width: 100%; }
1057 .cardhead {
1058 margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-3);
1059 padding: var(--sp-2) var(--sp-3);
1060 }
1061}