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