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