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