internal/web/static/style.css
1880 lines · 76460 bytes
1/* gitbay stylesheet. Tokens first, on :root and again in the dark media
2 query; components use tokens only. Two accents with separate jobs:
3 blue is what you can do (links, primary buttons, focus, pressed
4 toggles), orange is where you are and what wants you (current tab,
5 rail counts, pending state, unverified signatures). Orange is never a
6 button ground. internal/web/tokens_test.go measures every token;
7 internal/web/classes_test.go checks every template class has a rule.
8 No external requests: fonts are served from this origin. */
9
10@font-face {
11 font-family: "Atkinson Hyperlegible Next";
12 font-style: normal;
13 font-weight: 400 700;
14 font-display: swap;
15 src: url(/static/fonts/atkinson-next-roman.woff2) format("woff2");
16}
17@font-face {
18 font-family: "Atkinson Hyperlegible Next";
19 font-style: italic;
20 font-weight: 400 700;
21 font-display: swap;
22 src: url(/static/fonts/atkinson-next-italic.woff2) format("woff2");
23}
24@font-face {
25 font-family: "Atkinson Hyperlegible Mono";
26 font-style: normal;
27 font-weight: 400 600;
28 font-display: swap;
29 src: url(/static/fonts/atkinson-mono-roman.woff2) format("woff2");
30}
31
32:root {
33 /* declare native light+dark support: correct form controls and
34 scrollbars per scheme, and opt out of browser auto-darkening */
35 color-scheme: light dark;
36
37 /* grounds: canvas, surface and inset are three steps, not one */
38 --canvas: #ffffff;
39 --surface: #ebedf1;
40 --inset: #ffffff;
41 --hover: #e1e4ea;
42 --line: #8d939c; /* 3.09:1 on canvas — a border you can see */
43 --faint: #d8dce2;
44
45 /* ink */
46 --fg: #1c1f24;
47 --muted: #5a6270;
48 --neutral: var(--muted);
49
50 /* blue: what you can do. --link is text, --fill is a ground; one blue
51 cannot clear 4.5:1 as text and 3:1 as a ground in both schemes. */
52 --link: #0033d6;
53 --fill: #0000f0;
54 --fill-fg: #ffffff;
55 --focus: var(--link);
56
57 /* orange: where you are, what wants you. Two cuts because the floor
58 differs by size: --mark for bars, --warn at text size. */
59 --mark: #e4572e;
60 --warn: #b8400f;
61
62 /* state */
63 --ok: #0a7536;
64 --bad: #c62828;
65 --done: #6b21a8;
66
67 /* diff row tints: enough to scan, light enough that the syntax
68 palette stays legible on them (TestSyntaxPaletteContrast) */
69 --diff-add: #e4f6ea;
70 --diff-del: #fdeaea;
71
72 /* the rail is black in both schemes: the one brand constant */
73 --shell-bg: #000000;
74 --shell-fg: #f2f2f2;
75 --shell-muted: #8f8f8f;
76 --shell-line: #1c1c1c;
77 --shell-hover: #141414;
78 --shell-mark: #ff6b3d;
79
80 /* the languages' own colours; the same in both schemes */
81 --lang-go: #00add8;
82 --lang-rust: #dea584;
83 --lang-c: #555555;
84 --lang-python: #3572a5;
85 --lang-javascript: #f1e05a;
86 --lang-typescript: #3178c6;
87 --lang-shell: #89e051;
88 --lang-ruby: #701516;
89 --lang-java: #b07219;
90 --lang-swift: #f05138;
91 --lang-html: #e34c26;
92 --lang-css: #563d7c;
93 --lang-org: #77aa99;
94 --lang-markdown: #083fa1;
95 --lang-emacs-lisp: #c065db;
96 --lang-nix: #7e7eff;
97 --lang-sql: #e38c00;
98
99 --sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont,
100 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
101 --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono",
102 SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
103
104 /* 12, 13, 14, 16, 20, 24, 32 */
105 --fs-0: 0.75rem;
106 --fs-1: 0.8125rem;
107 --fs-2: 0.875rem;
108 --fs-3: 1rem;
109 --fs-4: 1.25rem;
110 --fs-5: 1.5rem;
111 --fs-6: 2rem;
112
113 /* 4, 8, 12, 16, 24, 32, 48 */
114 --sp-1: 4px;
115 --sp-2: 8px;
116 --sp-3: 12px;
117 --sp-4: 16px;
118 --sp-5: 24px;
119 --sp-6: 32px;
120 --sp-7: 48px;
121
122 /* the rail: a column the width of one hit target, a row one tall */
123 --rail-hit: 44px;
124 --rail-strip-h: 48px;
125 --rail-mark: 24px;
126 --rail-mark-box: 32px;
127
128 /* the one page container: header content, main and footer align on it */
129 --container: 100rem;
130
131 --r-ctl: 4px; /* controls and chips */
132 --r-card: 6px; /* cards, lists, code blocks */
133 --shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
134
135 /* the native select arrow cannot be restyled, so draw our own;
136 --chev carries the stroke colour per scheme */
137 --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='%235a6270' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
138}
139@media (prefers-color-scheme: dark) {
140 :root {
141 /* the scheme in force, not just the tokens: light-dark() reads it,
142 and themedCSS repeats this block for a page stamped dark */
143 color-scheme: dark;
144
145 --canvas: #101114;
146 --surface: #212429;
147 --inset: #0b0c0e;
148 --hover: #2b2f36;
149 --line: #61666f;
150 --faint: #2f333a;
151
152 --fg: #e9eaec;
153 --muted: #a3a9b3;
154 --neutral: var(--muted);
155
156 --link: #8b9bff;
157 --fill: #4d61f0;
158 --fill-fg: #ffffff;
159 --focus: var(--link);
160
161 --mark: #ff6b3d;
162 --warn: #ff8a63;
163
164 --ok: #3fce7a;
165 --bad: #ff6b6b;
166 --done: #c084fc;
167
168 --diff-add: #0d2a18;
169 --diff-del: #2c1113;
170
171 --shell-bg: #000000;
172 --shell-fg: #f2f2f2;
173 --shell-muted: #8f8f8f;
174 --shell-line: #1c1c1c;
175 --shell-hover: #141414;
176 --shell-mark: #ff6b3d;
177
178 /* the languages' own colours; the same in both schemes */
179 --lang-go: #00add8;
180 --lang-rust: #dea584;
181 --lang-c: #555555;
182 --lang-python: #3572a5;
183 --lang-javascript: #f1e05a;
184 --lang-typescript: #3178c6;
185 --lang-shell: #89e051;
186 --lang-ruby: #701516;
187 --lang-java: #b07219;
188 --lang-swift: #f05138;
189 --lang-html: #e34c26;
190 --lang-css: #563d7c;
191 --lang-org: #77aa99;
192 --lang-markdown: #083fa1;
193 --lang-emacs-lisp: #c065db;
194 --lang-nix: #7e7eff;
195 --lang-sql: #e38c00;
196
197 --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
198 --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='%23a3a9b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
199 }
200}
201
202/* a page stamped light keeps the light scheme under a dark OS: the token
203 block above is guarded for it, and this is the other half of that */
204:root[data-theme="light"] { color-scheme: light; }
205
206/* ---- base ---- */
207* { box-sizing: border-box; }
208html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
209body {
210 margin: 0;
211 background: var(--canvas);
212 color: var(--fg);
213 font: var(--fs-3)/1.5 var(--sans);
214 min-height: 100vh;
215}
216h1, h2, h3 { line-height: 1.25; font-weight: 600; }
217h1 { font-size: var(--fs-5); margin: 0 0 var(--sp-3); text-wrap: balance; }
218h2 { font-size: var(--fs-4); margin: var(--sp-6) 0 var(--sp-3); }
219h3 { font-size: var(--fs-3); margin: var(--sp-5) 0 var(--sp-2); }
220p { margin: 0 0 var(--sp-3); }
221a { color: var(--link); text-decoration: none; }
222a:hover { text-decoration: underline; }
223/* a link inside running text is told apart by its underline: link and
224 muted text are 1.07:1 apart in dark, and colour alone is not a cue
225 (#232). Navigation, chips and buttons keep position as their cue. */
226p a, .syscomment a { text-decoration: underline; }
227/* a title or a path is the whole line: position is the cue */
228p a.button, p a.btn, p a.chip, .repotitle a, p.title a, .pathbar a, .pager a { text-decoration: none; }
229/* where a link shares its line with other text the underline is the cue
230 again, path bar or not: a crumb beside the file name, a heading that
231 names an owner, an empty-state note (#226) */
232.crumbs a, h1 a, li.empty a { text-decoration: underline; }
233a.xref { color: var(--link); text-decoration: none; }
234
235code, pre, .mono, .code, td.mode, td.size {
236 font-family: var(--mono);
237 font-size: var(--fs-1);
238}
239.mono { overflow-wrap: anywhere; }
240
241/* ---- focus: one authored ring, so keyboard position is never the
242 browser's guess ---- */
243:focus-visible {
244 outline: 2px solid var(--focus);
245 outline-offset: 2px;
246 border-radius: 1px;
247}
248/* the rail is black in both schemes and --focus is a dark blue in the
249 light one — a ring nobody could see there */
250.rail :focus-visible { outline-color: var(--shell-mark); }
251
252/* visually hidden, still read aloud */
253.vh {
254 position: absolute;
255 width: 1px; height: 1px;
256 margin: -1px; padding: 0; border: 0;
257 clip-path: inset(50%);
258 overflow: hidden;
259 white-space: nowrap;
260}
261
262/* ---- skip link: the rail runs ahead of the content in source order ---- */
263a.skip {
264 position: absolute;
265 left: var(--sp-3); top: -3rem;
266 z-index: 50;
267 display: flex;
268 align-items: center;
269 min-height: var(--rail-hit);
270 background: var(--fill);
271 color: var(--fill-fg);
272 padding: var(--sp-2) var(--sp-4);
273 font-weight: 600;
274}
275a.skip:focus { top: var(--sp-3); text-decoration: none; }
276
277/* ---- rail: one row of glyphs across the top, no labels ----
278 One strip the height of a hit target, at every width: fixed squares,
279 no wrapping and no scrolling. Every item is a square link carrying an
280 inline svg, its name in an aria-label and in a visually hidden span, so
281 the nav reads the same to a screen reader as the old text list did. */
282.rail {
283 height: var(--rail-strip-h);
284 background: var(--shell-bg);
285 color: var(--shell-fg);
286 border-bottom: 1px solid var(--shell-line);
287 display: flex;
288 flex-direction: row;
289 align-items: center;
290 padding: 0 var(--sp-1);
291}
292a.brand {
293 display: flex;
294 align-items: center;
295 justify-content: center;
296 flex: none;
297 width: var(--rail-mark-box);
298 height: var(--rail-strip-h);
299 color: var(--shell-fg);
300}
301a.brand:hover { text-decoration: none; }
302a.brand svg.mark { display: block; flex: none; width: var(--rail-mark); height: var(--rail-mark); }
303
304ul.raillist {
305 list-style: none;
306 margin: 0;
307 padding: 0;
308 display: flex;
309 align-items: center;
310 min-width: 0;
311}
312/* the spacer that holds settings, admin and the account cell at the far
313 end of the row */
314.railgap { flex: 1; }
315.railicon {
316 position: relative;
317 display: flex;
318 align-items: center;
319 justify-content: center;
320 flex: none;
321 width: var(--rail-hit);
322 height: var(--rail-strip-h);
323 padding: 0;
324 border: 0;
325 background: none;
326 color: var(--shell-fg);
327 cursor: pointer;
328}
329.railicon:hover { background: var(--shell-hover); text-decoration: none; }
330/* orange marks position along the bottom edge — the rail's only accent */
331.railicon[aria-current] {
332 background: var(--shell-hover);
333 box-shadow: inset 0 -2px 0 var(--shell-mark);
334}
335.count {
336 font-size: var(--fs-0);
337 font-weight: 600;
338 letter-spacing: 0;
339 background: var(--shell-mark);
340 color: var(--shell-bg);
341 padding: 0 5px;
342 border-radius: var(--r-ctl);
343 margin-left: auto;
344}
345/* the unread count is a badge on the bell's corner, not a trailing number */
346.railicon .count {
347 position: absolute;
348 top: 2px;
349 right: 2px;
350 margin: 0;
351 padding: 0 3px;
352 line-height: 1.35;
353}
354.railfoot {
355 flex: none;
356 display: flex;
357 align-items: center;
358 min-width: 0;
359}
360.railfoot a { color: var(--shell-fg); }
361.railfoot form { margin: 0; }
362a.railuser {
363 display: flex;
364 align-items: center;
365 justify-content: center;
366 flex: none;
367 width: var(--rail-hit);
368 height: var(--rail-strip-h);
369}
370a.railuser:hover { text-decoration: none; }
371/* the phone rail's overflow: every square .railopt hides, and log out,
372 as a labelled list under the rail. Shown only below 34rem. */
373.railmore { display: none; position: relative; }
374.railmore > summary { list-style: none; cursor: pointer; }
375.railmore > summary::-webkit-details-marker { display: none; }
376.railmore[open] > summary { background: var(--shell-hover); }
377.raildrop {
378 position: absolute;
379 top: 100%;
380 right: 0;
381 z-index: 20;
382 min-width: 12rem;
383 padding: var(--sp-1) 0;
384 background: var(--shell-bg);
385 border: 1px solid var(--shell-line);
386 border-radius: var(--r-card);
387 box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
388}
389.raildrop a, .raildrop button {
390 display: flex;
391 align-items: center;
392 /* a button's own default is centred; the rows read as one list */
393 justify-content: flex-start;
394 gap: var(--sp-3);
395 width: 100%;
396 min-height: var(--rail-hit);
397 padding: 0 var(--sp-4);
398 border: 0;
399 background: none;
400 font: inherit;
401 font-size: var(--fs-2);
402 text-align: left;
403 color: var(--shell-fg);
404 cursor: pointer;
405}
406.raildrop a:hover, .raildrop button:hover { background: var(--shell-hover); text-decoration: none; }
407.raildrop form { margin: 0; }
408.raildrop svg { flex: none; }
409a.railuser .avatar { width: var(--rail-mark); height: var(--rail-mark); }
410.avatar {
411 display: inline-grid;
412 place-items: center;
413 width: 22px; height: 22px;
414 flex: none;
415 border-radius: 50%;
416 background: var(--fill);
417 color: var(--fill-fg);
418 font-size: var(--fs-0);
419 font-weight: 600;
420}
421
422/* ---- shell: the rail above, then the pane, which fills the rest of the
423 viewport so the footer sits at the bottom of a short page ---- */
424.shell { display: flex; flex-direction: column; min-height: 100vh; }
425.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
426main.content {
427 flex: 1;
428 width: 100%;
429 padding: var(--sp-5) var(--sp-6) var(--sp-7);
430}
431/* the container is the default width and what `wide` names; reading and
432 bounded follow, so equal specificity gives them the cascade */
433main.content, main.wide, footer { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; }
434main.reading { max-width: calc(72rem + 2 * var(--sp-6)); margin: 0 auto; }
435main.bounded { max-width: calc(48rem + 2 * var(--sp-6)); margin: 0 auto; }
436footer {
437 width: 100%;
438 padding: var(--sp-4) var(--sp-6);
439 border-top: 1px solid var(--faint);
440 color: var(--muted);
441 font-size: var(--fs-1);
442}
443footer p { margin: 0; }
444footer a { color: var(--muted); text-decoration: underline; }
445footer a:hover { color: var(--link); }
446
447/* ---- repository header ---- */
448.repohead {
449 padding: var(--sp-4) 0 0;
450 border-bottom: 1px solid var(--line);
451}
452.repohead .wrap { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; padding: 0 var(--sp-6); }
453.identity { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
454.grow { flex: 1; }
455/* h1 on the repo home, p elsewhere so each page keeps its own h1 — but
456 identical in size, because the tabs sit below and navigation must not
457 move when you use it */
458.repotitle {
459 margin: 0;
460 font-size: var(--fs-4);
461 font-weight: 600;
462 line-height: 1.25;
463}
464.repotitle a { color: var(--fg); }
465.repotitle a.owner { color: var(--muted); font-weight: 400; }
466.repotitle a:hover { color: var(--link); text-decoration: none; }
467.repotitle .sep { color: var(--muted); margin: 0 2px; font-weight: 400; }
468.repodesc {
469 margin: 0 0 0 var(--sp-2);
470 color: var(--muted);
471 font-size: var(--fs-2);
472 display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
473 min-width: 0;
474}
475.repodesc a.site { color: var(--muted); }
476.repodesc a.site:hover { color: var(--link); }
477.repometa { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-1); }
478
479nav.tabs {
480 display: flex;
481 gap: var(--sp-1);
482 margin-top: var(--sp-3);
483 margin-bottom: var(--sp-4);
484 overflow-x: auto;
485 /* with overflow-y left visible the browser computes it to auto, which
486 is a vertical drag on touch; the strip scrolls sideways only */
487 overflow-y: hidden;
488 scrollbar-width: none;
489}
490nav.tabs::-webkit-scrollbar { display: none; }
491nav.tabs a {
492 display: inline-flex;
493 align-items: center;
494 gap: var(--sp-1);
495 padding: var(--sp-2) var(--sp-3) 10px;
496 color: var(--muted);
497 font-size: var(--fs-2);
498 white-space: nowrap;
499 border-bottom: 2px solid transparent;
500 margin-bottom: -1px;
501}
502nav.tabs a:hover { color: var(--fg); text-decoration: none; }
503nav.tabs a[aria-current] { color: var(--fg); font-weight: 600; border-bottom-color: var(--mark); }
504/* the profile strip draws its unlit tabs, so the underline reads as the
505 control rather than appearing only on the one you are already on.
506 --line, not --faint: the track has to be visible to be a track, and
507 at 2px --faint disappears into the canvas in both schemes. */
508nav.tabs.profiletabs a { border-bottom-color: var(--line); }
509nav.tabs.profiletabs a[aria-current] { border-bottom-color: var(--mark); }
510/* a count in a tab is plain metadata, not a badge */
511nav.tabs a i { font-style: normal; color: var(--muted); margin-left: 4px; }
512
513/* ---- page heads ---- */
514.pagehead, .listhead, .headrow {
515 display: flex;
516 align-items: center;
517 gap: var(--sp-3);
518 flex-wrap: wrap;
519 margin-bottom: var(--sp-5);
520}
521/* every child sheds its block margins, or a p.meta beside an h1 centres
522 its text inside a box the margins made taller than the heading's */
523.pagehead h1, .listhead h1, .headrow h1, .listhead h2, .headrow h2 { margin: 0; }
524.pagehead > p, .listhead > p, .headrow > p { margin: 0; }
525.pagehead .grow, .listhead .spacer, .headrow .spacer { flex: 1; }
526.issuetitle { margin: 0 0 var(--sp-2); font-size: var(--fs-5); text-wrap: balance; }
527.issuenumber { color: var(--muted); font-weight: 400; }
528.issuemeta { color: var(--muted); font-size: var(--fs-2); margin: 0 0 var(--sp-4); }
529.commithead p { margin: var(--sp-1) 0; }
530.commithead h2 { margin-top: 0; margin-bottom: var(--sp-1); }
531
532nav.filters { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
533nav.filters a {
534 display: inline-flex;
535 align-items: center;
536 height: 32px;
537 padding: 0 var(--sp-3);
538 background: var(--canvas);
539 border: 1px solid var(--line);
540 border-radius: var(--r-ctl);
541 color: var(--fg);
542 font-size: var(--fs-2);
543 font-weight: 500;
544}
545nav.filters a:hover { background: var(--hover); text-decoration: none; }
546nav.filters a.active { background: var(--surface); border-color: var(--link); color: var(--link); }
547
548form.searchform, form.logfilter, form.compareform {
549 display: flex;
550 align-items: center;
551 gap: var(--sp-2);
552 flex-wrap: wrap;
553 margin: 0 0 var(--sp-4);
554}
555form.searchform input[type="search"], form.searchform input[type="text"], form.logfilter input { flex: 1; min-width: 12rem; max-width: 32rem; }
556form.searchform.compact { margin: 0; }
557form.searchform.compact input[type="search"], form.searchform.compact input[type="text"] { min-width: 18rem; }
558form.compareform label { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }
559
560/* ---- buttons: one family, 32px tall, so a row of them lines up ---- */
561button, .button {
562 display: inline-flex;
563 align-items: center;
564 justify-content: center;
565 gap: 6px;
566 height: 32px;
567 padding: 0 var(--sp-3);
568 font: inherit;
569 font-size: var(--fs-2);
570 font-weight: 500;
571 border: 1px solid transparent;
572 border-radius: var(--r-ctl);
573 cursor: pointer;
574 text-decoration: none;
575 white-space: nowrap;
576 /* a bare <button> is the primary action of its form group */
577 background: var(--fill);
578 color: var(--fill-fg);
579}
580button:hover, .button.primary:hover { filter: brightness(1.12); text-decoration: none; }
581button.btn, .button.btn {
582 background: var(--canvas);
583 color: var(--fg);
584 border-color: var(--line);
585 filter: none;
586}
587button.btn:hover, .button.btn:hover { background: var(--hover); filter: none; text-decoration: none; }
588button.btn[aria-pressed="true"] { background: var(--surface); color: var(--link); border-color: var(--link); }
589button.linklike {
590 background: none;
591 border: 0;
592 padding: 0;
593 height: auto;
594 color: var(--link);
595 font-weight: 400;
596 filter: none;
597}
598button.linklike:hover { text-decoration: underline; filter: none; }
599button.danger, .button.danger {
600 background: var(--canvas);
601 color: var(--bad);
602 border-color: var(--bad);
603 filter: none;
604}
605/* --canvas, not --fill-fg: white on the dark scheme's --bad is 2.3:1 */
606button.danger:hover, .button.danger:hover { background: var(--bad); color: var(--canvas); filter: none; }
607button:disabled { opacity: 0.55; cursor: default; filter: none; }
608.btngroup { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
609/* a destructive button holds the way out at arm's length: 8px puts the
610 cancel's underline against the button's border */
611.btngroup:has(> button.danger) { gap: var(--sp-4); }
612form.inline { display: inline; }
613.act { text-align: right; }
614
615/* ---- forms ---- */
616/* not button: it sets its own colour above, and this rule comes later at
617 the same specificity */
618input, textarea, select { font: inherit; color: inherit; }
619input[type="text"], input[type="search"], input[type="email"],
620input[type="password"], input[type="number"], input:not([type]), textarea, select {
621 background: var(--inset);
622 color: var(--fg);
623 border: 1px solid var(--line);
624 border-radius: var(--r-ctl);
625 padding: 0 10px;
626 height: 32px;
627 font-size: var(--fs-2);
628 line-height: 1.4;
629}
630textarea {
631 width: 100%;
632 height: auto;
633 padding: 8px 10px;
634 resize: vertical;
635 line-height: 1.5;
636}
637textarea[name="content"] { font-family: var(--mono); font-size: var(--fs-1); }
638select {
639 appearance: none;
640 padding-right: 1.9rem;
641 background-image: var(--chev);
642 background-repeat: no-repeat;
643 background-position: right 0.6rem center;
644 background-size: 0.62rem;
645 cursor: pointer;
646}
647input:hover, textarea:hover, select:hover { border-color: var(--muted); }
648input[type="radio"] { accent-color: var(--fill); }
649label { display: block; font-weight: 500; font-size: var(--fs-2); margin-bottom: 4px; }
650label:has(> input[type="radio"]), label:has(> input[type="checkbox"]),
651label:has(> select) { display: inline-flex; align-items: center; gap: var(--sp-2); }
652.fieldname { display: block; font-size: var(--fs-2); font-weight: 500; }
653.hint { display: block; color: var(--muted); font-size: var(--fs-1); font-weight: 400; margin: 0 0 6px; }
654.field { margin-bottom: var(--sp-4); }
655.field input[type="text"], .field input[type="email"], .field select { width: 100%; }
656.check { display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; }
657::placeholder { color: var(--muted); opacity: 1; }
658::selection { background: var(--fill); color: var(--fill-fg); }
659/* :user-invalid, not :invalid — a required field is invalid the moment
660 the page loads, and colouring it red before anyone has typed is a
661 scolding, not a hint */
662input:user-invalid, textarea:user-invalid { border-color: var(--bad); }
663input[name="confirm"] { width: auto; margin-right: var(--sp-2); }
664
665/* A radio keeps the native control: a circle takes one answer, a square
666 takes any number, and that shape survives greyscale and colour
667 blindness. The checkbox is drawn so it matches the rest of the family. */
668input[type="checkbox"] {
669 appearance: none;
670 flex: none;
671 width: 16px;
672 height: 16px;
673 margin: 0;
674 /* an empty box has nothing but its border to announce it */
675 border: 1px solid var(--muted);
676 border-radius: var(--r-ctl);
677 background: var(--inset);
678 cursor: pointer;
679}
680input[type="checkbox"]:not(:checked):hover { border-color: var(--fg); }
681input[type="checkbox"]:checked {
682 background: var(--fill);
683 border-color: var(--fill);
684 /* the mark sits on the blue ground, so it is white in both schemes */
685 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
686 background-repeat: no-repeat;
687 background-position: center;
688 background-size: 11px;
689}
690
691/* a segmented control for a small, mutually exclusive set: real radios
692 underneath, so arrow keys and screen readers behave as they always did */
693fieldset.segmented { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
694fieldset.segmented legend { padding: 0; margin-bottom: var(--sp-2); color: var(--muted); font-size: var(--fs-2); }
695fieldset.segmented .options { display: inline-flex; }
696fieldset.segmented label { gap: 0; margin: 0; }
697fieldset.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
698fieldset.segmented span {
699 display: flex;
700 align-items: center;
701 height: 32px;
702 padding: 0 var(--sp-4);
703 border: 1px solid var(--line);
704 font-size: var(--fs-2);
705 cursor: pointer;
706}
707fieldset.segmented label + label span { border-left: 0; }
708fieldset.segmented label:first-child span { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
709fieldset.segmented label:last-child span { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
710fieldset.segmented span:hover { border-color: var(--muted); }
711fieldset.segmented input:checked + span {
712 background: var(--fill);
713 border-color: var(--fill);
714 color: var(--fill-fg);
715 font-weight: 600;
716}
717fieldset.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
718
719p.branchpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
720p.branchpick label { color: var(--muted); font-size: var(--fs-2); margin: 0; }
721p.branchpick select { flex: 1 1 12rem; }
722
723form.signupform, form.editform { max-width: 40rem; }
724form.signupform label, form.editform label { margin-bottom: 4px; }
725.editform textarea { width: 100%; }
726.editform input[name="message"] { width: 100%; }
727
728/* A previewed draft, above the textarea it came from. The orange edge is
729 "where you are and what wants you": this is not saved yet. */
730.preview {
731 margin: var(--sp-4) 0;
732 max-width: 48rem;
733 background: var(--surface);
734 border: 1px solid var(--line);
735 border-left: 3px solid var(--mark);
736 border-radius: var(--r-card);
737}
738.preview > .previewmark {
739 margin: 0;
740 padding: var(--sp-2) var(--sp-4);
741 border-bottom: 1px solid var(--line);
742 color: var(--warn);
743 font-size: var(--fs-1);
744}
745.preview > .rendered { padding: var(--sp-3) var(--sp-4); }
746.preview > .rendered > :first-child { margin-top: 0; }
747.preview > .rendered > :last-child { margin-bottom: 0; }
748.preview > .rendered:empty::before { content: "nothing to preview"; color: var(--muted); }
749
750form.commentform { margin: var(--sp-4) 0; max-width: 48rem; }
751form.commentform p:last-child { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 0; }
752
753details.editbox { margin: var(--sp-2) 0; max-width: 48rem; }
754details.editbox > summary {
755 display: inline-flex;
756 align-items: center;
757 height: 32px;
758 padding: 0 var(--sp-3);
759 background: var(--canvas);
760 border: 1px solid var(--line);
761 border-radius: var(--r-ctl);
762 color: var(--fg);
763 font-size: var(--fs-2);
764 font-weight: 500;
765 cursor: pointer;
766 list-style: none;
767}
768details.editbox > summary::-webkit-details-marker { display: none; }
769details.editbox > summary:hover { background: var(--hover); }
770details.editbox[open] > summary { margin-bottom: var(--sp-2); }
771details.editbox input[type="text"] { width: 100%; }
772
773/* ---- settings: one row per control, label then input then its own
774 button. The name stays setform because the templates carry it.
775 The label column takes the slack, so the control and the button ride
776 the right edge: a checkbox, a number and a full-width text input all
777 end on the same rule instead of the narrow ones stranding left. Its
778 14rem floor is what keeps a hint from wrapping a word to a line once
779 the control column claims its 28rem. ---- */
780form.setform {
781 display: grid;
782 grid-template-columns: minmax(14rem, 1fr) minmax(0, 28rem) auto;
783 gap: var(--sp-4);
784 align-items: start;
785 padding: var(--sp-3) 0;
786 border-bottom: 1px solid var(--faint);
787}
788form.setform label { margin-top: 6px; }
789form.setform .hint { margin: 2px 0 0; }
790form.setform input[type="text"], form.setform select { width: 100%; }
791/* a control narrower than its column is pushed to the column's end,
792 which is where a full-width input's own right edge lands */
793form.setform .check { justify-content: flex-end; }
794form.setform .num { text-align: right; }
795form.setform .num input[type="number"] { width: auto; }
796/* the third column takes the leftover width; the button keeps its own */
797form.setform > button, form.setform > .btngroup { justify-self: start; }
798form.setform.stack { grid-template-columns: 1fr; }
799form.setform.stack textarea, form.setform.stack select { width: 100%; max-width: 48rem; }
800ul.protlist { list-style: none; margin: var(--sp-2) 0; padding: 0; }
801ul.protlist li {
802 display: flex;
803 align-items: center;
804 gap: var(--sp-3);
805 padding: var(--sp-2) 0;
806 border-bottom: 1px solid var(--faint);
807}
808ul.protlist li:last-child { border-bottom: 0; }
809ul.protlist form { margin-left: auto; }
810ul.plain { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
811ul.plain li { padding: var(--sp-1) 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
812/* the email list: address and badges read left, the controls sit right,
813 so the buttons line up down the list however long an address is */
814ul.plain li > form:first-of-type { margin-left: auto; }
815
816/* ---- messages: .error and .notice are one family. The names stay
817 because e2e tests match class="error". ---- */
818.error, .notice {
819 border-left: 3px solid var(--bad);
820 background: color-mix(in srgb, var(--bad) 6%, transparent);
821 color: var(--fg);
822 border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
823 padding: var(--sp-2) var(--sp-3);
824 margin: 0 0 var(--sp-4);
825 font-size: var(--fs-2);
826}
827.notice { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, transparent); }
828.empty-note, .none, .empty, li.empty, td.empty { color: var(--muted); }
829
830/* ---- containers: one recipe for cards, lists and tables ---- */
831.card, ul.list, ul.loglist, ul.repolist, ul.issuelist,
832ul.milestonelist, .readme, .code, article.release, .blame, .teambody {
833 background: var(--surface);
834 border: 1px solid var(--line);
835 border-radius: var(--r-card);
836 overflow: hidden;
837}
838.cardhead {
839 display: flex;
840 align-items: center;
841 gap: var(--sp-3);
842 padding: var(--sp-2) var(--sp-4);
843 border-bottom: 1px solid var(--line);
844 font-size: var(--fs-1);
845 color: var(--muted);
846}
847.cardhead b { color: var(--fg); font-weight: 500; }
848.cardbody { padding: var(--sp-4) var(--sp-5); }
849ul.list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
850ul.list li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
851ul.list li:last-child { border-bottom: 0; }
852ul.list li:hover { background: var(--hover); }
853
854table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); }
855th {
856 text-align: left;
857 font-weight: 500;
858 font-size: var(--fs-1);
859 color: var(--muted);
860 padding: 6px var(--sp-4);
861 border-bottom: 1px solid var(--line);
862}
863td { padding: 7px var(--sp-4); border-bottom: 1px solid var(--faint); vertical-align: top; }
864tr:last-child td { border-bottom: 0; }
865tbody tr:hover td { background: var(--hover); }
866/* every header row a template writes, by the class it or its table
867 carries: TestHeaderRowsAreLeftAligned reads these selectors */
868tr.cols th, table.tree th, table.refs th, table.keys th, table.assets th { text-align: left; }
869tr.cols th { background: var(--canvas); }
870/* right-aligned columns keep their header with their values */
871tr.cols th.age, tr.cols th.size { text-align: right; }
872/* wide listings scroll inside their own box; the page never does. The
873 wrapper is the scroller only — the table inside carries the card. */
874.tablewrap { overflow-x: auto; max-width: 100%; }
875
876table.tree, table.refs {
877 background: var(--surface);
878 border: 1px solid var(--line);
879 border-radius: var(--r-card);
880 /* collapsed borders defeat a radius on the table itself */
881 border-collapse: separate;
882 border-spacing: 0;
883 overflow: hidden;
884 margin-bottom: var(--sp-4);
885}
886table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: 0; }
887table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); }
888td.name a { color: var(--fg); }
889td.name a:hover { color: var(--link); }
890table.tree td.name { width: 25%; white-space: nowrap; }
891table.tree td.name.dir a { color: var(--link); }
892/* the glyph stays muted in both rows: it is a shape cue, and colour here
893 goes on carrying what it already carries */
894table.tree td.name svg { color: var(--muted); vertical-align: -0.125em; margin-right: var(--sp-2); }
895table.tree th.lastcommit, table.tree td.lastcommit { width: 55%; }
896table.tree td.lastcommit {
897 max-width: 0;
898 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
899}
900table.tree td.lastcommit a {
901 color: var(--muted);
902 display: block;
903 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
904}
905table.tree td.lastcommit a:hover { color: var(--link); }
906table.tree th.age, table.tree td.age { width: 20%; }
907td.age, th.age { text-align: right; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
908td.size, td.mode { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
909table.tree th.size, table.tree td.size { text-align: right; }
910table.refs td.name { width: 100%; }
911table.refs td.sha, td.sha { color: var(--muted); }
912
913/* these tables sit flush with the page text: no outer border, and the
914 header row drops the ground and the left padding */
915table.keys, table.assets { background: none; border: 0; border-radius: 0; }
916table.keys th, table.assets th, table.keys tr.cols th { background: transparent; padding-left: 0; }
917table.keys td { padding-left: 0; }
918table.keys td.act, table.assets td.size { text-align: right; }
919/* a fingerprint or an account row is read across, not down: the cells
920 keep one line each and .tablewrap scrolls what does not fit */
921table.keys.nowrap th, table.keys.nowrap td { white-space: nowrap; }
922/* The account list types a username to confirm, which is longer than
923 the key prefixes the confirm field is sized for elsewhere. 14rem, not
924 11rem, because "type <name> to confirm" was cut mid-word for a name of
925 ordinary length; a long enough name still truncates and the field's
926 aria-label carries the instruction in full either way.
927
928 The cell is two fixed slots, each right-aligned. A form cannot span
929 table cells, so one column per control — which would let the table
930 align them — is out without form="" plumbing, and the forms hold
931 different numbers of controls: the enable form and the disabled
932 row's Promote have no confirm field. Sizing the slot instead
933 of the form is what puts every button in one column and every field
934 in another; right-aligning the cell alone left the disabled row's
935 Promote where other rows keep their field. A slot is a field, a gap
936 and a button wide, so a form that is only a button still ends on the
937 same rule. No element stands in for the controls a row lacks. */
938table.accounts { --acct-field: 14rem; --acct-btn: 6rem; }
939table.accounts td.acts { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
940table.accounts input[name="confirm"] { width: var(--acct-field); }
941table.accounts form.actions {
942 flex: none;
943 display: inline-flex;
944 /* the generic form.actions wraps and grows its button to fill; both
945 have to go, or the slot takes the button to a second line and the
946 field sits above it */
947 flex-wrap: nowrap;
948 justify-content: flex-end;
949 align-items: center;
950 gap: var(--sp-2);
951 width: calc(var(--acct-field) + var(--acct-btn) + var(--sp-2));
952 margin: 0;
953}
954/* a set width, not a minimum: it makes the slot's arithmetic exact, and
955 6rem clears the widest of Promote, Demote, Disable and Enable */
956table.accounts form.actions button { flex: none; width: var(--acct-btn); justify-content: center; }
957table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--fs-1); }
958table.assets { margin-top: var(--sp-2); }
959
960/* the tip commit is the first row of the file table */
961tr.tipbar td {
962 background: var(--surface);
963 padding: var(--sp-3) var(--sp-4);
964 border-bottom: 1px solid var(--line);
965 max-width: 0;
966}
967.tipbar .tip {
968 display: flex;
969 align-items: center;
970 gap: var(--sp-2);
971 flex-wrap: wrap;
972 min-width: 0;
973 font-size: var(--fs-2);
974}
975.tipbar .who { font-weight: 600; }
976.tipbar .subject { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
977.tipbar .subject:hover { color: var(--link); }
978.tipbar .spacer { flex: 1; }
979.tipbar .age { color: var(--muted); white-space: nowrap; }
980
981.readme { margin-top: var(--sp-5); }
982.readme .cardbody { max-width: 78ch; }
983/* the overview README caps as a card, so prose and code share an edge */
984.overview .readme { max-width: 88ch; }
985/* until every card wraps its body in .cardbody, the rendered block is
986 the body */
987.readme > .rendered { padding: var(--sp-4) var(--sp-5); }
988.code { background: var(--inset); padding: var(--sp-3) var(--sp-4); overflow-x: auto; }
989.code pre { margin: 0; background: transparent !important; border: 0; padding: 0; }
990pre.bigcode, .bigcode {
991 font-family: var(--mono);
992 /* the 404 numeral is a picture of a number, not body type */
993 font-size: 4rem;
994 color: var(--faint);
995 -webkit-text-stroke: 1px var(--line);
996 margin: 0;
997 line-height: 1;
998}
999.notfound { text-align: center; padding: var(--sp-6) 0; }
1000.notfound h1 { margin-top: var(--sp-3); }
1001
1002ul.loglist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
1003ul.loglist li {
1004 display: flex;
1005 align-items: baseline;
1006 gap: var(--sp-3);
1007 padding: var(--sp-3) var(--sp-4);
1008 border-bottom: 1px solid var(--faint);
1009}
1010ul.loglist li:last-child { border-bottom: 0; }
1011ul.loglist li:hover { background: var(--hover); }
1012ul.loglist p { margin: 0; }
1013ul.loglist .commitmain { flex: 1 1 auto; min-width: 0; }
1014ul.loglist .subject a { color: var(--fg); font-weight: 500; }
1015ul.loglist .subject a:hover { color: var(--link); }
1016ul.loglist .commitside { flex: none; display: flex; gap: var(--sp-2); align-items: center; white-space: nowrap; }
1017
1018ul.loglist.rows li { align-items: center; padding: var(--sp-2) var(--sp-4); }
1019ul.loglist.rows .commitmain { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
1020ul.loglist.rows .meta { flex: none; color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
1021
1022ul.repolist { list-style: none; margin: var(--sp-3) 0 var(--sp-5); padding: 0; }
1023ul.repolist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
1024ul.repolist li:last-child { border-bottom: 0; }
1025ul.repolist li:hover { background: var(--hover); }
1026ul.repolist p { margin: 0; }
1027ul.repolist .reponame { font-size: var(--fs-3); }
1028ul.repolist .reponame a { color: var(--fg); }
1029ul.repolist .reponame a strong { color: var(--link); font-weight: 600; }
1030ul.repolist .reponame .sep { color: var(--muted); margin: 0 2px; }
1031ul.repolist .desc { margin-top: 2px; }
1032ul.repolist .topics, ul.repolist .meta { margin-top: var(--sp-1); }
1033
1034ul.repolist.rows li { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
1035ul.repolist.rows .reponame { flex: none; font-size: var(--fs-2); }
1036ul.repolist.rows .desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-2); margin: 0; }
1037ul.repolist.rows .topics, ul.repolist.rows .meta { flex: none; margin: 0; white-space: nowrap; }
1038ul.repolist.rows .meta { font-size: var(--fs-1); }
1039
1040/* pinned repos: a compact wrap of names, no description or meta */
1041ul.pinlist { list-style: none; margin: var(--sp-3) 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
1042ul.pinlist li {
1043 background: var(--surface);
1044 border: 1px solid var(--line);
1045 border-radius: var(--r-ctl);
1046 padding: var(--sp-1) var(--sp-3);
1047}
1048ul.pinlist li:hover { background: var(--hover); }
1049ul.pinlist li a { color: var(--fg); }
1050ul.pinlist li a:hover { color: var(--link); text-decoration: none; }
1051ul.pinlist .sep { color: var(--muted); margin: 0 2px; }
1052
1053ul.issuelist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
1054ul.issuelist li {
1055 display: flex;
1056 align-items: baseline;
1057 gap: var(--sp-3);
1058 padding: var(--sp-3) var(--sp-4);
1059 border-bottom: 1px solid var(--faint);
1060}
1061ul.issuelist li:last-child { border-bottom: 0; }
1062ul.issuelist li:hover { background: var(--hover); }
1063ul.issuelist li.empty { display: block; }
1064ul.issuelist p { margin: 0; }
1065ul.issuelist .issuemain { flex: 1 1 auto; min-width: 0; }
1066ul.issuelist .issueside { display: flex; gap: var(--sp-2); align-items: center; flex: none; }
1067ul.issuelist .title a { color: var(--fg); font-weight: 500; }
1068ul.issuelist .title a:hover { color: var(--link); }
1069
1070/* one-line rows: title, labels, then the meta pushed right. Above 64rem
1071 a list is a table, not prose (desktop layout spec). */
1072ul.issuelist.rows li { align-items: center; padding: var(--sp-2) var(--sp-4); }
1073ul.issuelist.rows .issuemain { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
1074ul.issuelist.rows .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1075ul.issuelist.rows .title .chip { margin-left: var(--sp-1); }
1076ul.issuelist.rows .meta { flex: none; color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
1077ul.issuelist.rows .meta .repo { color: var(--fg); }
1078
1079ul.milestonelist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
1080ul.milestonelist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
1081ul.milestonelist li:last-child { border-bottom: 0; }
1082ul.milestonelist li:hover { background: var(--hover); }
1083ul.milestonelist p { margin: 0; }
1084ul.milestonelist .msmain { min-width: 0; }
1085ul.milestonelist .title { font-weight: 500; }
1086.progress {
1087 height: 6px;
1088 max-width: 24rem;
1089 margin-top: var(--sp-2);
1090 background: var(--faint);
1091 border-radius: var(--r-ctl);
1092 overflow: hidden;
1093}
1094.progress .bar { height: 100%; background: var(--ok); }
1095
1096article.release { padding: var(--sp-4); margin: var(--sp-4) 0; }
1097.releasehead { background: none; border: 0; padding: 0; }
1098.releasehead h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-3); }
1099.releasehead .meta { margin: 0 0 var(--sp-2); }
1100
1101ul.matchlist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
1102ul.matchlist li { margin-bottom: var(--sp-3); }
1103.matchpath { font-family: var(--mono); font-size: var(--fs-1); }
1104pre.matchline {
1105 background: var(--inset);
1106 border: 1px solid var(--line);
1107 border-radius: var(--r-card);
1108 padding: var(--sp-1) var(--sp-3);
1109 margin: var(--sp-1) 0 0;
1110 overflow-x: auto;
1111}
1112pre.matchline mark { background: color-mix(in srgb, var(--mark) 25%, transparent); color: inherit; border-radius: 2px; }
1113p.pager { margin-top: var(--sp-4); }
1114.snippetfile { margin-bottom: var(--sp-5); }
1115p.filefacts { color: var(--muted); font-size: var(--fs-1); margin: 0 0 var(--sp-3); }
1116pre.buildlog { max-height: 40rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
1117details.buildstep pre.buildlog { margin: 0; border: 0; border-radius: 0; }
1118details.buildstep summary code { overflow-wrap: anywhere; }
1119
1120/* ---- rendered prose ---- */
1121pre {
1122 background: var(--inset);
1123 border: 1px solid var(--line);
1124 border-radius: var(--r-card);
1125 padding: var(--sp-3) var(--sp-4);
1126 margin: 0 0 var(--sp-4);
1127 overflow-x: auto;
1128 font-size: var(--fs-2);
1129 line-height: 1.6;
1130}
1131code {
1132 background: var(--inset);
1133 border: 1px solid var(--faint);
1134 border-radius: var(--r-ctl);
1135 padding: 0 0.3em;
1136}
1137pre code { background: none; border: 0; padding: 0; font-size: inherit; }
1138code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
1139pre.message {
1140 white-space: pre-wrap;
1141 overflow-wrap: anywhere;
1142}
1143.rendered { max-width: 100%; overflow-wrap: anywhere; }
1144.rendered a { text-decoration: underline; }
1145.prose, .rendered > p, .rendered > ul, .rendered > ol, .rendered > blockquote { max-width: 78ch; }
1146.rendered blockquote { border-left: 3px solid var(--line); margin-left: 0; padding-left: var(--sp-4); color: var(--muted); }
1147.rendered img { max-width: 100%; }
1148.rendered h1, .rendered h2 { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-1); }
1149.rendered table { border-collapse: collapse; margin: var(--sp-3) 0; display: block; max-width: 100%; overflow-x: auto; }
1150.rendered th, .rendered td {
1151 border: 1px solid var(--line);
1152 padding: var(--sp-1) var(--sp-3);
1153 text-align: left;
1154 overflow-wrap: normal; /* scroll the table, don't shatter words */
1155}
1156.rendered th { background: var(--surface); font-weight: 600; }
1157.rendered tr:last-child td { border-bottom: 1px solid var(--line); }
1158/* GFM task lists: the box sits in the line, sized to the prose */
1159.rendered li input[type="checkbox"] { width: 0.9em; height: 0.9em; margin: 0 0.35em 0 0; vertical-align: -0.05em; background-size: 0.7em; }
1160.rendered li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.2em; }
1161.blobimage { text-align: center; }
1162.blobimage img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
1163
1164/* ---- dashboard: pinned column, tiles and queues, feed ---- */
1165.dashgrid { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
1166.dashgrid h1 { margin-top: 0; }
1167.dashgrid > aside { position: sticky; top: var(--sp-5); }
1168.dashgrid .dashmain h2 { margin-top: var(--sp-5); }
1169.dashgrid .dashmain .tiles + h2 { margin-top: 0; }
1170.colhead {
1171 margin: 0 0 var(--sp-2);
1172 font-size: var(--fs-0);
1173 font-weight: 500;
1174 letter-spacing: 0.08em;
1175 text-transform: uppercase;
1176 color: var(--muted);
1177}
1178.pins { list-style: none; margin: 0; padding: 0; font-size: var(--fs-2); }
1179.pins li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--faint); }
1180.pins li:last-child { border-bottom: 0; }
1181.pins a { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1182.pins a:hover { color: var(--link); }
1183.pins .owner { color: var(--muted); }
1184.pins .n { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; }
1185.pins .n b { font-weight: 600; color: var(--fg); }
1186.pins .n b.wants { color: var(--warn); }
1187.pins .dot { margin: 0; }
1188/* count tiles: the queues' sizes in one strip; a non-zero count is orange,
1189 what wants you */
1190.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); }
1191.tile {
1192 display: block;
1193 background: var(--surface);
1194 border: 1px solid var(--line);
1195 border-radius: var(--r-card);
1196 padding: var(--sp-3) var(--sp-4);
1197 color: var(--fg);
1198}
1199a.tile:hover { background: var(--hover); text-decoration: none; }
1200.tile b { display: block; font-size: var(--fs-5); font-weight: 600; line-height: 1.2; }
1201.tile.wants b { color: var(--warn); }
1202.tile span { font-size: var(--fs-1); color: var(--muted); }
1203.feedcol .feedline { font-size: var(--fs-2); margin-bottom: var(--sp-2); }
1204.feedcol .feedline .none { font-size: var(--fs-1); }
1205
1206/* ---- two-column: conversation and aside ---- */
1207.withaside { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
1208.withaside .mainside { min-width: 0; }
1209aside.aside { font-size: var(--fs-2); }
1210.aside .grp { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
1211.aside .grp:first-child { border-top: 0; padding-top: 0; }
1212.aside h2 {
1213 margin: 0 0 var(--sp-2);
1214 font-size: var(--fs-0);
1215 font-weight: 500;
1216 letter-spacing: 0.08em;
1217 text-transform: uppercase;
1218 color: var(--muted);
1219}
1220.aside .row { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-1); flex-wrap: wrap; }
1221.aside .row:last-child { margin-bottom: 0; }
1222/* a row's second line: when it happened, under what it happened to */
1223.aside .row .sub { flex-basis: 100%; padding-left: 14px; color: var(--muted); font-size: var(--fs-1); }
1224.aside .row:has(.sub) { margin-bottom: var(--sp-2); }
1225.aside .none { color: var(--muted); }
1226.dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--neutral); margin-right: 2px; vertical-align: middle; }
1227.dot.ok { background: var(--ok); }
1228.dot.bad { background: var(--bad); }
1229.dot.pend { background: var(--mark); }
1230.ok { color: var(--ok); }
1231.bad { color: var(--bad); }
1232form.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
1233form.actions button { flex: 1 1 auto; }
1234form.actions select, form.actions textarea { width: 100%; }
1235.feedline { margin-bottom: var(--sp-2); }
1236
1237/* ---- comments and threads ---- */
1238article.comment {
1239 max-width: 48rem;
1240 border: 1px solid var(--line);
1241 border-radius: var(--r-card);
1242 margin: var(--sp-4) 0;
1243 overflow: hidden;
1244}
1245article.comment .commenthead {
1246 display: flex;
1247 gap: var(--sp-2);
1248 flex-wrap: wrap;
1249 background: var(--surface);
1250 border-bottom: 1px solid var(--line);
1251 padding: var(--sp-2) var(--sp-4);
1252 margin: 0;
1253 font-size: var(--fs-1);
1254 color: var(--muted);
1255}
1256article.comment .commenthead b { color: var(--fg); font-weight: 500; }
1257article.comment .commenthead .when { color: var(--muted); }
1258article.comment .rendered { padding: var(--sp-3) var(--sp-4); }
1259article.comment .rendered > :first-child { margin-top: 0; }
1260article.comment .rendered > :last-child { margin-bottom: 0; }
1261a.authorlink { color: var(--fg); font-weight: 500; }
1262a.authorlink:hover { color: var(--link); }
1263
1264.syscomment {
1265 max-width: 48rem;
1266 color: var(--muted);
1267 font-size: var(--fs-1);
1268 margin: 0 0 var(--sp-4) var(--sp-3);
1269 padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
1270 border-left: 2px solid var(--faint);
1271}
1272.syscomment p { display: inline; margin: 0; }
1273
1274.thread {
1275 border: 1px solid var(--faint);
1276 border-left: 3px solid var(--link);
1277 border-radius: var(--r-ctl);
1278 padding: var(--sp-2) var(--sp-4);
1279 margin: var(--sp-2) 0 var(--sp-2) var(--sp-6);
1280}
1281.thread.resolved { border-left-color: var(--ok); opacity: 0.75; }
1282/* an unsubmitted comment is the viewer's own note, not the conversation */
1283.thread.pending { border-left-color: var(--neutral); border-left-style: dashed; }
1284.thread.stale { border-left-color: var(--warn); }
1285.thread.composing { border-left-color: var(--mark); }
1286.thread:target { outline: 2px solid var(--mark); outline-offset: 2px; }
1287.thread p.commenthead { font-size: var(--fs-2); margin: var(--sp-2) 0 0; }
1288.thread .when { color: var(--muted); }
1289.thread .rendered p { margin: var(--sp-1) 0; }
1290.thread .threadstate { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-1) 0 0; }
1291.thread details.threadreply { margin: var(--sp-2) 0 0; }
1292.thread details.threadreply > summary { color: var(--link); font-size: var(--fs-1); cursor: pointer; }
1293.thread textarea { width: 100%; }
1294.thread.composing p, .thread details.threadreply p { margin: var(--sp-2) 0 0; }
1295form.threadact { margin: var(--sp-1) 0 0; padding: 0 var(--sp-3) var(--sp-2); }
1296
1297nav.subtabs {
1298 display: flex;
1299 gap: var(--sp-4);
1300 border-bottom: 1px solid var(--line);
1301 margin: 0 0 var(--sp-4);
1302}
1303nav.subtabs a {
1304 display: inline-flex;
1305 align-items: center;
1306 gap: var(--sp-1);
1307 padding: var(--sp-2) 0 10px;
1308 color: var(--muted);
1309 font-size: var(--fs-2);
1310 border-bottom: 2px solid transparent;
1311 margin-bottom: -1px;
1312}
1313nav.subtabs a:hover { color: var(--fg); text-decoration: none; }
1314nav.subtabs a[aria-current] { color: var(--fg); font-weight: 600; border-bottom-color: var(--mark); }
1315nav.subtabs a i { font-style: normal; color: var(--muted); margin-left: 4px; }
1316
1317/* ---- diffs and code ---- */
1318p.diffstat { color: var(--muted); font-size: var(--fs-2); margin: 0 0 var(--sp-3); }
1319p.diffstat .add { color: var(--ok); }
1320p.diffstat .del { color: var(--bad); }
1321
1322details.difffold {
1323 border: 1px solid var(--line);
1324 border-radius: var(--r-card);
1325 margin: 0 0 var(--sp-3);
1326 background: var(--inset);
1327 overflow: hidden;
1328}
1329details.difffold summary {
1330 display: flex;
1331 align-items: baseline;
1332 gap: var(--sp-3);
1333 padding: var(--sp-2) var(--sp-3);
1334 background: var(--surface);
1335 font-size: var(--fs-2);
1336 cursor: pointer;
1337 list-style: none;
1338}
1339details.difffold[open] summary { border-bottom: 1px solid var(--line); }
1340details.difffold summary::-webkit-details-marker { display: none; }
1341/* flex summaries lose the native disclosure marker; draw our own */
1342details.difffold summary::before { content: "\25b8"; color: var(--muted); }
1343details.difffold[open] summary::before { content: "\25be"; }
1344details.difffold summary:hover { background: var(--hover); }
1345details.difffold summary .fpath { font-family: var(--mono); overflow-wrap: anywhere; }
1346details.difffold summary .fpath .was { color: var(--muted); }
1347details.difffold summary .fstat { margin-left: auto; font-family: var(--mono); white-space: nowrap; }
1348details.difffold summary .add { color: var(--ok); }
1349details.difffold summary .del { color: var(--bad); }
1350details.difffold > .none { padding: var(--sp-3); margin: 0; }
1351details.difffold .tablewrap { background: none; border: 0; border-radius: 0; }
1352
1353table.difftable {
1354 border-collapse: collapse;
1355 width: 100%;
1356 font-family: var(--mono);
1357 font-size: var(--fs-1);
1358 line-height: 1.5;
1359}
1360table.difftable td { border: 0; padding: 0; vertical-align: top; font-size: inherit; }
1361table.difftable tbody tr:hover td { background: none; }
1362table.difftable td.ln {
1363 width: 1%;
1364 min-width: 2.5rem;
1365 padding: 0 var(--sp-2);
1366 text-align: right;
1367 color: var(--muted);
1368 user-select: none;
1369 border-right: 1px solid var(--line);
1370 white-space: nowrap;
1371}
1372/* not .code: that class carries its own ground, which painted over the
1373 row tints */
1374table.difftable td.src { padding: 0 var(--sp-3); white-space: pre-wrap; overflow-wrap: anywhere; }
1375/* the marker is decoration, so it lives in CSS and stays out of a copied
1376 selection */
1377table.difftable tr.add td.src::before { content: "+"; color: var(--ok); }
1378table.difftable tr.del td.src::before { content: "\2212"; color: var(--bad); }
1379table.difftable tr.ctx td.src::before { content: " "; }
1380table.difftable tr.add { background: var(--diff-add); }
1381table.difftable tr.del { background: var(--diff-del); }
1382table.difftable tr.hunk td, table.difftable tr.dmeta td {
1383 color: var(--muted);
1384 padding: var(--sp-1) var(--sp-3);
1385 background: var(--surface);
1386 border-top: 1px solid var(--line);
1387 border-bottom: 1px solid var(--line);
1388}
1389table.difftable tr.hunk td.src { color: var(--link); }
1390table.difftable tr.threadrow td { padding: var(--sp-2) var(--sp-3); background: var(--canvas); }
1391/* a line number is the handle for commenting on that line; it stays a
1392 plain number until pointed at, so the gutter is not a wall of links */
1393table.difftable td.ln a.cmt { color: inherit; text-decoration: none; }
1394table.difftable td.ln a.cmt:hover,
1395table.difftable td.ln a.cmt:focus { color: var(--link); text-decoration: underline; }
1396/* A linked line: f2-n17 on a diff, L17 on a file (see issue 118). */
1397.difftable tr:target td, .code .line:has(a:target) { background: color-mix(in srgb, var(--mark) 18%, transparent); }
1398.difftable tr:target td.ln, .code .line:has(a:target) .ln { border-left: 3px solid var(--mark); }
1399/* chroma writes the highlighted spans; the container only supplies the
1400 ground and the face */
1401.chroma { font-family: var(--mono); background: none; }
1402/* chroma's own LineLink rule is dropped from the served palette: it set
1403 outline: none and hid the focus ring. This is that rule without it, on
1404 a 24px box so a line number is a target and not a glyph (#232) */
1405.chroma .lnlinks { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-decoration: none; color: inherit; }
1406.chroma .line { line-height: 24px; }
1407
1408.blamehunk { display: flex; gap: var(--sp-3); border-top: 1px solid var(--line); align-items: flex-start; }
1409.blamehunk:first-child { border-top: 0; }
1410.blameinfo { flex: none; width: 17rem; min-width: 0; padding: var(--sp-2) var(--sp-3); }
1411.blameinfo .subject { margin: 0; font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1412.blameinfo .meta { margin: 0; font-size: var(--fs-1); color: var(--muted); }
1413.blamecode {
1414 flex: 1;
1415 margin: 0;
1416 padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
1417 background: var(--inset);
1418 border: 0;
1419 border-left: 1px solid var(--line);
1420 border-radius: 0;
1421 overflow-x: auto;
1422 align-self: stretch;
1423}
1424.lineno {
1425 display: inline-block;
1426 min-width: 3.5em;
1427 padding-right: 1em;
1428 text-align: right;
1429 color: var(--muted);
1430 user-select: none;
1431}
1432
1433/* ---- chips and badges ---- */
1434.chip, .badge {
1435 --chip: var(--neutral);
1436 display: inline-block;
1437 padding: 1px 8px;
1438 border-radius: var(--r-ctl);
1439 font-size: var(--fs-0);
1440 font-weight: 500;
1441 line-height: 1.5;
1442 color: var(--chip);
1443 border: 1px solid color-mix(in srgb, var(--chip) 40%, transparent);
1444 background: color-mix(in srgb, var(--chip) 10%, var(--canvas));
1445 white-space: nowrap;
1446 vertical-align: middle;
1447}
1448.chip-open { --chip: var(--ok); }
1449.chip-closed { --chip: var(--bad); }
1450.chip-merged, .chip-done { --chip: var(--done); }
1451.chip-neutral, .chip-source_gone { --chip: var(--neutral); }
1452.chip-stale { --chip: var(--warn); }
1453.chip.topic { --chip: var(--link); }
1454.chip.topic:hover { text-decoration: none; background: color-mix(in srgb, var(--chip) 18%, transparent); }
1455/* A label carries its own colour inline, from the label's hex, as one
1456 tone per scheme: chip text is 12px, so it needs 4.5:1 against its own
1457 ground, and no single colour clears that on both canvases (#226). An
1458 old browser without light-dark() drops the declaration and the chip
1459 falls back to the neutral above. */
1460.chip.label {
1461 --chip: light-dark(var(--chip-l, var(--neutral)), var(--chip-d, var(--neutral)));
1462 font-weight: 500;
1463}
1464.badge-verified { --chip: var(--ok); }
1465.badge-unsigned { --chip: var(--neutral); }
1466.badge-signed_unknown_key, .badge-signed_key_expired { --chip: var(--warn); }
1467.badge-signed_email_mismatch, .badge-signed_key_revoked, .badge-bad_signature { --chip: var(--bad); }
1468.badge.check-success, .chip.check-success { --chip: var(--ok); }
1469.badge.check-pending, .chip.check-pending,
1470.badge.check-running, .chip.check-running { --chip: var(--warn); }
1471.badge.check-failure, .chip.check-failure,
1472.badge.check-error, .chip.check-error { --chip: var(--bad); }
1473.badge.check-cancelled, .chip.check-cancelled,
1474.badge.check-skipped, .chip.check-skipped { --chip: var(--neutral); }
1475span.check-success { color: var(--ok); }
1476span.check-pending, span.check-running { color: var(--warn); }
1477span.check-failure, span.check-error { color: var(--bad); }
1478
1479a.memberchip {
1480 display: inline-block;
1481 border: 1px solid var(--line);
1482 border-radius: var(--r-ctl);
1483 padding: 1px 8px;
1484 margin: 0 2px 2px 0;
1485 color: var(--fg);
1486 font-size: var(--fs-1);
1487}
1488a.memberchip:hover { text-decoration: none; border-color: var(--link); color: var(--link); }
1489a.memberchip .role { color: var(--muted); }
1490
1491.pathbar { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); flex-wrap: wrap; font-size: var(--fs-2); overflow-wrap: anywhere; }
1492.pathbar .spacer { flex: 1; }
1493.pathbar .actions { display: flex; align-items: center; gap: var(--sp-2); }
1494/* history · blame · raw were 21px tall and "raw" 22px wide (#232) */
1495.pathbar .actions a { display: inline-block; padding: 6px 4px; }
1496.pathbar .acts { display: flex; gap: var(--sp-2); }
1497.crumbs { color: var(--muted); }
1498.crumbs a { color: var(--link); }
1499.crumbs strong { color: var(--fg); }
1500
1501/* ---- file navigator: the directory beside a file ---- */
1502.blobgrid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
1503.blobmain { min-width: 0; }
1504.filenav { position: sticky; top: var(--sp-4); font-size: var(--fs-2); }
1505.filenav ul { list-style: none; margin: 0; padding: 0; }
1506.filenav li a {
1507 display: block;
1508 padding: 3px var(--sp-2);
1509 border-radius: var(--r-ctl);
1510 color: var(--fg);
1511 font-family: var(--mono);
1512 font-size: var(--fs-1);
1513 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
1514}
1515.filenav li a:hover { background: var(--hover); text-decoration: none; }
1516.filenav li a[aria-current] { background: var(--surface); box-shadow: inset 2px 0 0 var(--mark); font-weight: 600; }
1517.filenav li a.dir { color: var(--link); }
1518.filenav li a.up { color: var(--muted); }
1519
1520/* ---- side column: facets or sections beside a list or a form ---- */
1521.withcol { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
1522.withcol.narrow { grid-template-columns: 15rem minmax(0, 56rem); }
1523.colmain { min-width: 0; }
1524.sidecol { position: sticky; top: var(--sp-4); font-size: var(--fs-2); }
1525.sidecol .grp { margin-bottom: var(--sp-4); }
1526.sidecol ul { list-style: none; margin: 0; padding: 0; }
1527.sidecol li a {
1528 display: flex; align-items: baseline; gap: var(--sp-2);
1529 padding: 4px var(--sp-2);
1530 border-radius: var(--r-ctl);
1531 color: var(--fg);
1532}
1533.sidecol li a:hover { background: var(--hover); text-decoration: none; }
1534.sidecol li a[aria-current] { background: var(--surface); box-shadow: inset 2px 0 0 var(--mark); font-weight: 500; }
1535.sidecol li a i { margin-left: auto; font-style: normal; color: var(--muted); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
1536.sidecol form.searchform { margin-top: var(--sp-2); }
1537.sidecol form.searchform input[type="text"] { min-width: 0; width: 100%; }
1538
1539/* The column's groups sit in a disclosure. Below 62rem that is all the
1540 reader sees of the column: one closed line before the list, because a
1541 repository with two dozen labels stacked the whole vocabulary under
1542 the content it filters. Above 62rem the summary is hidden and the
1543 content shown whatever the open state, so the column is what it
1544 always was. The @supports guard is the fail-safe: an engine without
1545 ::details-content keeps a working toggle at every width instead of
1546 losing the column (#237). */
1547.sidedrop > summary {
1548 display: inline-flex;
1549 align-items: center;
1550 gap: var(--sp-2);
1551 height: 32px;
1552 padding: 0 var(--sp-3);
1553 background: var(--canvas);
1554 border: 1px solid var(--line);
1555 border-radius: var(--r-ctl);
1556 color: var(--fg);
1557 font-size: var(--fs-2);
1558 cursor: pointer;
1559 list-style: none;
1560}
1561.sidedrop[open] > summary { margin-bottom: var(--sp-3); }
1562.sidedrop > summary::-webkit-details-marker { display: none; }
1563.sidedrop > summary:hover { background: var(--hover); }
1564.sidedrop > summary::after { content: "\25be"; color: var(--muted); }
1565.sidedrop[open] > summary::after { content: "\25b4"; }
1566.sideword { font-weight: 600; }
1567/* the filters in force: where you are */
1568.sideon { color: var(--warn); }
1569/* every group came out empty, so there is nothing to open */
1570.sidedrop:not(:has(.grp)) { display: none; }
1571
1572@media (min-width: 62.01rem) {
1573 @supports selector(::details-content) {
1574 .sidedrop > summary { display: none; }
1575 .sidedrop::details-content { content-visibility: visible; }
1576 }
1577}
1578
1579/* a sticky column taller than the viewport scrolls inside itself, or its
1580 tail is unreachable once the page scrolls. Above 62rem only: below it
1581 .filenav is hidden and the other two are static. .dashpins stops being
1582 a column at 80rem and resets both properties there. */
1583@media (min-width: 62.01rem) {
1584 .filenav, .sidecol, .dashgrid > aside { max-height: calc(100vh - 2 * var(--sp-4)); overflow-y: auto; }
1585}
1586
1587.refchip {
1588 display: inline-flex;
1589 align-items: center;
1590 gap: 6px;
1591 height: 32px;
1592 padding: 0 10px;
1593 background: var(--canvas);
1594 border: 1px solid var(--line);
1595 border-radius: var(--r-ctl);
1596 font-family: var(--mono);
1597 font-size: var(--fs-2);
1598 font-weight: 500;
1599 color: var(--fg);
1600}
1601details.refmenu { position: relative; }
1602details.refmenu summary { cursor: pointer; list-style: none; }
1603details.refmenu summary::-webkit-details-marker { display: none; }
1604details.refmenu summary::after { content: " \25be"; color: var(--muted); }
1605details.refmenu .refdrop {
1606 position: absolute;
1607 z-index: 10;
1608 top: calc(100% + 4px);
1609 left: 0;
1610 min-width: 12rem;
1611 max-height: 20rem;
1612 overflow-y: auto;
1613 overscroll-behavior: contain;
1614 background: var(--canvas);
1615 border: 1px solid var(--line);
1616 border-radius: var(--r-card);
1617 box-shadow: var(--shadow);
1618 padding: var(--sp-1) 0;
1619}
1620details.refmenu .refdrop a {
1621 display: block;
1622 padding: var(--sp-1) var(--sp-3);
1623 color: var(--fg);
1624 font-family: var(--mono);
1625 font-size: var(--fs-1);
1626}
1627details.refmenu .refdrop a:hover { background: var(--hover); text-decoration: none; }
1628details.refmenu .refdrop a.allrefs {
1629 color: var(--link);
1630 font-family: var(--sans);
1631 border-top: 1px solid var(--faint);
1632 margin-top: var(--sp-1);
1633}
1634
1635/* ---- repository overview layout ---- */
1636.overview { display: block; }
1637.overviewmain { min-width: 0; }
1638/* the side column exists only above 62rem; below it .facts keeps its
1639 own two-up layout and the 40rem factgrid rule applies untouched */
1640@media (min-width: 62.01rem) {
1641 .overview.withfacts { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
1642 .overview.withfacts .facts { display: block; margin-top: 0; max-width: none; }
1643 .overview.withfacts .facts .factgrid { grid-template-columns: repeat(2, auto); }
1644 .overview.withfacts .clone pre { white-space: pre-wrap; word-break: break-all; }
1645}
1646
1647/* ---- repository facts ---- */
1648.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-4); max-width: 72rem; }
1649.facts h2 {
1650 margin: 0 0 var(--sp-2);
1651 font-size: var(--fs-1);
1652 font-weight: 500;
1653 letter-spacing: 0.08em;
1654 text-transform: uppercase;
1655 color: var(--muted);
1656}
1657.clone { margin: 0 0 var(--sp-3); }
1658.facts .about { min-width: 0; margin-bottom: var(--sp-5); }
1659.clone .fieldname { font-size: var(--fs-1); color: var(--muted); font-weight: 500; margin-bottom: 2px; }
1660.clone pre { margin-bottom: var(--sp-3); user-select: all; }
1661.factgrid { display: grid; grid-template-columns: repeat(4, auto); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-2); margin-bottom: var(--sp-3); }
1662.factgrid b { font-weight: 600; }
1663.factgrid a { color: var(--fg); }
1664.factgrid a:hover { color: var(--link); }
1665.counts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); font-size: var(--fs-2); }
1666.counts a { color: var(--fg); }
1667.counts a:hover { color: var(--link); }
1668.counts strong { font-weight: 600; }
1669.fact { color: var(--muted); }
1670.langbar { display: flex; height: 8px; margin: 0 0 var(--sp-2); border-radius: var(--r-ctl); overflow: hidden; gap: 1px; background: var(--faint); }
1671.langbar .lang { display: block; height: 100%; min-width: 2px; }
1672.langs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-1); color: var(--muted); }
1673.langs .lang-name { display: inline-flex; align-items: center; gap: var(--sp-1); }
1674.langs .dot { width: 8px; height: 8px; }
1675/* named where it reads as the language's own colour, neutral otherwise */
1676.lang { background: var(--neutral); }
1677.lang-go { background: var(--lang-go); }
1678.lang-rust { background: var(--lang-rust); }
1679.lang-c, .lang-c- { background: var(--lang-c); }
1680.lang-python { background: var(--lang-python); }
1681.lang-javascript { background: var(--lang-javascript); }
1682.lang-typescript { background: var(--lang-typescript); }
1683.lang-shell { background: var(--lang-shell); }
1684.lang-ruby { background: var(--lang-ruby); }
1685.lang-java { background: var(--lang-java); }
1686.lang-swift { background: var(--lang-swift); }
1687.lang-html { background: var(--lang-html); }
1688.lang-css { background: var(--lang-css); }
1689.lang-org { background: var(--lang-org); }
1690.lang-markdown { background: var(--lang-markdown); }
1691.lang-emacs-lisp { background: var(--lang-emacs-lisp); }
1692.lang-nix { background: var(--lang-nix); }
1693.lang-sql { background: var(--lang-sql); }
1694.contribs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-1); }
1695.contribs .label { color: var(--muted); }
1696.teambody { padding: var(--sp-3); }
1697.teambody .memberchip { margin-right: var(--sp-2); }
1698
1699/* ---- landing ---- */
1700/* the width class on main carries this too; the cap here keeps the page
1701 readable on the templates that do not set one yet */
1702.landing { max-width: 48rem; padding: var(--sp-6) 0; }
1703.landing h1 { font-size: var(--fs-6); display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
1704.landing h1 .mark { width: 32px; height: 32px; }
1705.lede { font-size: var(--fs-4); color: var(--muted); line-height: 1.5; max-width: 40rem; margin: 0 0 var(--sp-5); }
1706pre.quickstart { margin: 0 0 var(--sp-4); }
1707.shot { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: var(--sp-5) 0; }
1708.shot video { display: block; width: 100%; height: auto; }
1709.shot figcaption {
1710 border-top: 1px solid var(--line);
1711 background: var(--surface);
1712 padding: var(--sp-2) var(--sp-3);
1713 color: var(--muted);
1714 font-size: var(--fs-1);
1715}
1716.facets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin: var(--sp-5) 0; }
1717.facets h2 { font-size: var(--fs-3); margin: 0 0 var(--sp-1); }
1718.facets p { color: var(--muted); font-size: var(--fs-2); margin: 0; }
1719.routes { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0 0; }
1720
1721/* ---- profile ---- */
1722.profilehead { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
1723.profilehead h1 { margin: 0 0 var(--sp-1); }
1724.profilehead .lede { font-size: var(--fs-3); margin: 0 0 var(--sp-1); }
1725.profilehead .meta { margin: var(--sp-1) 0 0; }
1726.activity { margin-bottom: var(--sp-5); }
1727h2 .count { background: none; color: var(--muted); font-weight: 400; font-size: var(--fs-2); margin-left: var(--sp-2); padding: 0; }
1728/* 53 week columns x 7 day rows, tinted with the link blue */
1729.actgraph-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
1730.actgraph { display: flex; gap: 3px; width: max-content; padding-top: 18px; }
1731.actweek { display: flex; flex-direction: column; gap: 3px; position: relative; }
1732.actmonth { position: absolute; top: -16px; left: 0; font-size: var(--fs-0); color: var(--muted); }
1733.actday { width: 11px; height: 11px; border-radius: 2px; background: var(--faint); }
1734.actday.pad { background: transparent; }
1735.actday.l0 { background: var(--faint); }
1736.actday.l1 { background: color-mix(in srgb, var(--link) 25%, var(--canvas)); }
1737.actday.l2 { background: color-mix(in srgb, var(--link) 50%, var(--canvas)); }
1738.actday.l3 { background: color-mix(in srgb, var(--link) 75%, var(--canvas)); }
1739.actday.l4 { background: var(--link); }
1740.actlegend { display: flex; align-items: center; gap: 3px; margin-top: var(--sp-2); font-size: var(--fs-0); color: var(--muted); }
1741.actlegend span:first-child { margin-right: var(--sp-1); }
1742.actlegend span:last-child { margin-left: var(--sp-1); }
1743/* the activity log under the graph: the newest events, not the year */
1744.logsub { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
1745.ownerlog .feedline { font-size: var(--fs-2); }
1746.ownerlog .feedline .none { font-size: var(--fs-1); }
1747
1748/* ---- wiki ---- */
1749.wikilayout { display: flex; gap: var(--sp-5); align-items: flex-start; }
1750.wikipage { flex: 1; min-width: 0; }
1751.wikinav { flex: none; width: 15rem; }
1752.wikinav ul { list-style: none; margin: var(--sp-1) 0 var(--sp-4); padding: 0; }
1753.wikinav .wikidir { margin-bottom: 0; }
1754.wikinav li a {
1755 display: block;
1756 padding: 5px var(--sp-2);
1757 border-radius: var(--r-ctl);
1758 color: var(--fg);
1759 font-size: var(--fs-2);
1760}
1761.wikinav li a:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
1762.wikinav li a.active { background: var(--surface); color: var(--link); font-weight: 500; }
1763
1764/* ---- misc ---- */
1765.meta { color: var(--muted); font-size: var(--fs-1); }
1766.muted { color: var(--muted); }
1767.desc, td.desc { color: var(--muted); }
1768.spacer { flex: 1; }
1769.compact { margin: 0; }
1770.name { min-width: 0; }
1771svg.icon { vertical-align: -0.125em; }
1772.sep { color: var(--muted); }
1773.owner { color: var(--muted); }
1774.title { margin: 0; }
1775.subject { min-width: 0; }
1776.sha { font-family: var(--mono); }
1777.when { color: var(--muted); }
1778.who { font-weight: 500; }
1779.was { color: var(--muted); }
1780.role { color: var(--muted); }
1781.age { color: var(--muted); }
1782.size { color: var(--muted); }
1783.review { font-size: var(--fs-2); }
1784
1785/* ---- breakpoints ---- */
1786@media (max-width: 80rem) {
1787 .dashgrid { grid-template-columns: minmax(0, 1fr) 20rem; }
1788 /* not a column any more, so it neither sticks nor scrolls in itself */
1789 .dashgrid > .dashpins { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
1790 /* a pinned block that is not a column is the chip row (spec rule 7) */
1791 .pins { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
1792 /* the shorthand loses to .pins li:last-child, which drops the bottom
1793 border of the last chip -- and so of the second row */
1794 .pins li, .pins li:last-child { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-1) var(--sp-3); }
1795 .pins .n, .dashpins .meta { display: none; }
1796}
1797
1798@media (max-width: 62rem) {
1799 /* one column, the aside after the thread: a phone shows the
1800 description first, checks and reviewers after it (#232) */
1801 .withaside { grid-template-columns: 1fr; }
1802
1803 /* rows go back to two lines where one does not fit */
1804 ul.issuelist.rows .issuemain, ul.repolist.rows li, ul.loglist.rows .commitmain { display: block; }
1805 ul.issuelist.rows .title, ul.repolist.rows .desc { white-space: normal; }
1806 /* a nowrap meta or topic line on one of these rows forces horizontal
1807 page scroll on a phone: a long branch name, a long owner/repo#N */
1808 ul.issuelist.rows .meta, ul.loglist.rows .meta,
1809 ul.repolist.rows .meta, ul.repolist.rows .topics { white-space: normal; }
1810
1811 .dashgrid { grid-template-columns: 1fr; }
1812 .dashgrid > aside { position: static; }
1813 .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1814
1815 /* the tree page is the navigator on a phone */
1816 .blobgrid { grid-template-columns: 1fr; }
1817 .filenav { display: none; }
1818
1819 /* the column is a closed disclosure before the content: a filter you
1820 reach without scrolling the list, and nothing to scroll past when
1821 you do not want it. It leads rather than follows because it is what
1822 the list is narrowed by, not a note on one row (#237) */
1823 .withcol, .withcol.narrow { grid-template-columns: 1fr; }
1824 .sidecol { position: static; margin-bottom: var(--sp-3); }
1825 .sidecol .grp { display: inline-block; vertical-align: top; margin-right: var(--sp-5); }
1826}
1827
1828@media (max-width: 52rem) {
1829 main.content { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
1830 footer { padding: var(--sp-4); }
1831 .repohead { padding: var(--sp-3) 0 0; }
1832 .repohead .wrap { padding: 0 var(--sp-4); }
1833 /* seven tabs do not fit a phone in one row; a hidden scrollbar made the
1834 ones past the edge look absent. Two rows show all of them. */
1835 nav.tabs { flex-wrap: wrap; overflow: visible; }
1836 .facts { grid-template-columns: 1fr; }
1837 /* a phone shows the description under the name, not beside it */
1838 .repodesc { flex-basis: 100%; margin-left: 0; }
1839}
1840
1841@media (max-width: 40rem) {
1842 .facets { grid-template-columns: 1fr; gap: var(--sp-4); }
1843 .wikilayout { flex-direction: column; align-items: stretch; }
1844 .wikinav { width: auto; }
1845 form.setform { grid-template-columns: 1fr; gap: var(--sp-2); }
1846 form.setform label { margin-top: 0; }
1847 /* the commit subject is the widest thing in a file table and the one
1848 column a phone can do without: the tipbar above already names the
1849 latest commit */
1850 table.tree td.lastcommit, table.tree th.lastcommit { display: none; }
1851 table.tree td.mode, table.tree th.mode { display: none; }
1852 /* at 320px a nowrap name plus the age column overran the card by the
1853 cell padding and the card clipped the age; a long name wraps (#232) */
1854 table.tree td.name { white-space: normal; overflow-wrap: anywhere; }
1855 .clone pre { white-space: pre-wrap; word-break: break-all; }
1856 .readme .cardbody, .code { padding: var(--sp-3); }
1857 .thread { margin-left: var(--sp-3); }
1858 .blamehunk { flex-direction: column; gap: 0; }
1859 .blameinfo { width: auto; }
1860 .blamecode { border-left: 0; padding-left: var(--sp-3); width: 100%; }
1861 .factgrid { grid-template-columns: repeat(2, auto); }
1862 ul.loglist li { flex-wrap: wrap; }
1863 ul.loglist .commitside { width: 100%; justify-content: flex-start; }
1864}
1865
1866/* Nine 44px squares and the mark are 440px, so below 34rem the rail
1867 keeps six — dashboard, explore, search, notifications, More, your
1868 avatar — and the More menu holds the rest. Seven squares at 44px are
1869 308px, inside a 320px phone. Explore is one of the six because the
1870 More menu only exists for a signed-in viewer: dropping it left a
1871 signed-out phone with no route to the listing at all. Shrinking the
1872 squares instead is what this replaces: 32px was under the target
1873 every phone guideline asks for, and the count only grows. */
1874@media (max-width: 34rem) {
1875 .railopt { display: none; }
1876 .railmore { display: block; }
1877 .railicon svg { width: 20px; height: 20px; }
1878 /* the mark is a link home too, so it is a target like the rest */
1879 a.brand { width: var(--rail-hit); }
1880}