CSS · 82841 bytes Raw Blame History
1 /* SPDX-License-Identifier: AGPL-3.0-or-later */
2 /*
3 * shithub — base styles.
4 *
5 * S02 layers our own chrome over the Primer CSS that ships in
6 * /static/primer/primer.css. We pull a small set of token overrides so the
7 * theme system (light / dark / auto / high-contrast) drives everything via
8 * CSS custom properties.
9 *
10 * Color tokens follow Primer's naming so most of these become migration
11 * candidates as Primer's primitives stabilize.
12 */
13
14 :root {
15 --canvas-default: #ffffff;
16 --canvas-subtle: #f6f8fa;
17 --canvas-inset: #eaeef2;
18 --fg-default: #1f2328;
19 --fg-muted: #59636e;
20 --border-default: #d0d7de;
21 --border-muted: #d8dee4;
22 --accent-fg: #0969da;
23 --accent-emphasis: #0969da;
24 --accent-subtle: #fff8c5; /* GitHub's "you-are-here" line highlight */
25 --success-fg: #1a7f37;
26 --danger-fg: #cf222e;
27 --shithub-mark: var(--danger-fg);
28 }
29
30 [data-theme="dark"] {
31 --canvas-default: #0d1117;
32 --canvas-subtle: #161b22;
33 --canvas-inset: #010409;
34 --fg-default: #f0f6fc;
35 --fg-muted: #9198a1;
36 --border-default: #3d444d;
37 --border-muted: #232a33;
38 --accent-fg: #4493f8;
39 --accent-emphasis: #1f6feb;
40 --accent-subtle: rgba(187, 128, 9, 0.15); /* dark-mode :target wash */
41 --success-fg: #3fb950;
42 --danger-fg: #f85149;
43 }
44
45 [data-theme="high-contrast"] {
46 --canvas-default: #000000;
47 --canvas-subtle: #0a0c10;
48 --canvas-inset: #000000;
49 --fg-default: #ffffff;
50 --fg-muted: #d9dee3;
51 --border-default: #7a828e;
52 --border-muted: #525964;
53 --accent-fg: #71b7ff;
54 --accent-emphasis: #409eff;
55 --accent-subtle: rgba(255, 215, 0, 0.25);
56 --success-fg: #4ed162;
57 --danger-fg: #ff6a69;
58 }
59
60 * { box-sizing: border-box; }
61
62 html, body {
63 margin: 0;
64 padding: 0;
65 background: var(--canvas-default);
66 color: var(--fg-default);
67 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
68 font-size: 16px;
69 line-height: 1.5;
70 }
71
72 a {
73 color: var(--accent-fg);
74 text-decoration: none;
75 }
76 a:hover { text-decoration: underline; }
77
78 code {
79 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
80 font-size: 0.875em;
81 background: var(--canvas-subtle);
82 padding: 0.1em 0.35em;
83 border-radius: 4px;
84 }
85
86 /* ========== Nav ========== */
87
88 .shithub-body {
89 min-height: 100vh;
90 display: flex;
91 flex-direction: column;
92 }
93
94 .shithub-nav {
95 display: flex;
96 align-items: center;
97 gap: 1.5rem;
98 padding: 0.75rem 1.25rem;
99 background: var(--canvas-subtle);
100 border-bottom: 1px solid var(--border-default);
101 }
102
103 .shithub-nav-brand {
104 display: flex;
105 align-items: center;
106 gap: 0.5rem;
107 color: var(--fg-default);
108 font-weight: 600;
109 letter-spacing: -0.01em;
110 }
111 .shithub-nav-brand:hover { text-decoration: none; }
112 .shithub-nav-brand svg { color: var(--shithub-mark); }
113
114 .shithub-nav-links {
115 display: flex;
116 gap: 1rem;
117 flex: 1;
118 }
119 .shithub-nav-links a {
120 color: var(--fg-default);
121 font-size: 0.9rem;
122 }
123
124 .shithub-nav-actions {
125 display: flex;
126 gap: 0.5rem;
127 align-items: center;
128 }
129
130 /* User-menu dropdown — uses native <details>/<summary> so it works without JS. */
131 .shithub-user-menu { position: relative; }
132 .shithub-user-menu > summary {
133 list-style: none;
134 display: inline-flex;
135 align-items: center;
136 gap: 0.5rem;
137 padding: 0.25rem 0.6rem;
138 border: 1px solid var(--border-default);
139 border-radius: 6px;
140 background: transparent;
141 cursor: pointer;
142 font-size: 0.875rem;
143 color: var(--fg-default);
144 }
145 .shithub-user-menu > summary::-webkit-details-marker { display: none; }
146 .shithub-user-menu-avatar {
147 width: 24px;
148 height: 24px;
149 border-radius: 50%;
150 display: block;
151 background: var(--canvas-default);
152 }
153 .shithub-user-menu-name { font-weight: 500; }
154 .shithub-user-menu-panel {
155 position: absolute;
156 right: 0;
157 top: calc(100% + 0.35rem);
158 min-width: 220px;
159 background: var(--canvas-default);
160 border: 1px solid var(--border-default);
161 border-radius: 6px;
162 padding: 0.4rem 0;
163 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
164 z-index: 50;
165 display: flex;
166 flex-direction: column;
167 }
168 .shithub-user-menu-header {
169 padding: 0.5rem 0.85rem;
170 font-size: 0.8rem;
171 color: var(--fg-muted);
172 border-bottom: 1px solid var(--border-default);
173 margin-bottom: 0.25rem;
174 }
175 .shithub-user-menu-panel a,
176 .shithub-user-menu-signout button {
177 display: block;
178 text-align: left;
179 width: 100%;
180 padding: 0.45rem 0.85rem;
181 background: transparent;
182 border: 0;
183 color: var(--fg-default);
184 font-size: 0.875rem;
185 cursor: pointer;
186 }
187 .shithub-user-menu-panel a:hover,
188 .shithub-user-menu-signout button:hover {
189 background: var(--canvas-subtle);
190 text-decoration: none;
191 }
192 .shithub-user-menu-signout { margin: 0; padding: 0; border-top: 1px solid var(--border-default); margin-top: 0.25rem; }
193
194 .hello-greeting {
195 margin: 1rem auto 1.5rem;
196 padding: 0.85rem 1rem;
197 border: 1px solid var(--border-default);
198 border-radius: 6px;
199 background: var(--canvas-subtle);
200 max-width: 32rem;
201 text-align: left;
202 }
203 .hello-greeting p { margin: 0 0 0.5rem; }
204 .hello-quicklinks { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; }
205
206 .shithub-button {
207 display: inline-flex;
208 align-items: center;
209 justify-content: center;
210 gap: 0.35rem;
211 padding: 0.4rem 0.85rem;
212 border-radius: 6px;
213 font-size: 0.875rem;
214 font-weight: 500;
215 border: 1px solid transparent;
216 cursor: pointer;
217 }
218 .shithub-button-small {
219 padding: 0.25rem 0.7rem;
220 font-size: 0.75rem;
221 }
222 .shithub-button-ghost {
223 color: var(--fg-default);
224 border-color: var(--border-default);
225 background: transparent;
226 }
227 .shithub-button-primary {
228 color: #fff;
229 background: var(--accent-emphasis);
230 border-color: var(--accent-emphasis);
231 }
232 .shithub-button-primary:hover { text-decoration: none; opacity: 0.92; }
233
234 /* ========== Main + Footer ========== */
235
236 .shithub-main {
237 flex: 1;
238 width: 100%;
239 }
240
241 .shithub-footer {
242 border-top: 1px solid var(--border-default);
243 background: var(--canvas-subtle);
244 padding: 1.25rem;
245 font-size: 0.85rem;
246 color: var(--fg-muted);
247 }
248 .shithub-footer-inner {
249 max-width: 1200px;
250 margin: 0 auto;
251 display: flex;
252 justify-content: space-between;
253 align-items: center;
254 gap: 1rem;
255 }
256 .shithub-footer-brand {
257 display: flex;
258 align-items: center;
259 gap: 0.4rem;
260 color: var(--fg-default);
261 }
262 .shithub-footer-brand svg { color: var(--shithub-mark); }
263 .shithub-footer-meta { color: var(--fg-muted); margin-left: 0.5rem; font-size: 0.8rem; }
264 .shithub-footer-links { display: flex; gap: 1rem; }
265
266 /* ========== Hello page ========== */
267
268 .hello {
269 max-width: 640px;
270 margin: 4rem auto;
271 padding: 2rem 1.5rem;
272 text-align: center;
273 }
274 .hello-logo {
275 margin: 0 auto 1.5rem;
276 width: 160px;
277 height: 160px;
278 color: var(--shithub-mark);
279 }
280 .hello-logo svg { width: 100%; height: 100%; }
281 .hello-title {
282 font-size: 2.75rem;
283 margin: 0 0 0.5rem;
284 letter-spacing: -0.02em;
285 }
286 .hello-tagline {
287 color: var(--fg-muted);
288 font-size: 1.15rem;
289 margin: 0 0 2rem;
290 }
291 .hello-meta {
292 display: grid;
293 grid-template-columns: max-content 1fr;
294 gap: 0.25rem 1rem;
295 max-width: 24rem;
296 margin: 0 auto 2rem;
297 padding: 1rem 1.5rem;
298 background: var(--canvas-subtle);
299 border: 1px solid var(--border-default);
300 border-radius: 6px;
301 text-align: left;
302 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
303 font-size: 0.875rem;
304 }
305 .hello-meta dt { color: var(--fg-muted); }
306 .hello-meta dd { margin: 0; }
307 .hello-status {
308 color: var(--fg-muted);
309 margin: 0 auto 2rem;
310 max-width: 36rem;
311 }
312 .hello-links {
313 display: flex;
314 justify-content: center;
315 gap: 1rem;
316 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
317 font-size: 0.875rem;
318 }
319
320 /* ========== Landing (anonymous home) ========== */
321
322 .shithub-landing-pitch {
323 max-width: 36rem;
324 margin: 0 auto 2rem;
325 font-size: 1.05rem;
326 line-height: 1.55;
327 }
328
329 .shithub-landing-features {
330 list-style: none;
331 margin: 0 auto 2rem;
332 padding: 0;
333 max-width: 60rem;
334 display: grid;
335 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
336 gap: 1rem;
337 text-align: left;
338 }
339 .shithub-landing-features li {
340 border: 1px solid var(--border-default);
341 border-radius: 6px;
342 padding: 0.85rem 1rem;
343 background: var(--canvas-subtle);
344 }
345 .shithub-landing-features li strong {
346 display: block;
347 margin-bottom: 0.25rem;
348 font-size: 0.95rem;
349 }
350 .shithub-landing-features li span {
351 color: var(--fg-muted);
352 font-size: 0.875rem;
353 line-height: 1.4;
354 }
355
356 .shithub-landing-cta {
357 display: flex;
358 justify-content: center;
359 flex-wrap: wrap;
360 gap: 0.75rem;
361 margin: 0 auto 1.5rem;
362 }
363 .shithub-landing-cta a {
364 display: inline-block;
365 padding: 0.5rem 1rem;
366 border-radius: 6px;
367 text-decoration: none;
368 font-weight: 500;
369 font-size: 0.95rem;
370 }
371 .shithub-landing-cta-primary {
372 background: var(--accent-fg, #1f6feb);
373 color: #ffffff;
374 border: 1px solid transparent;
375 }
376 .shithub-landing-cta-primary:hover { filter: brightness(1.1); }
377 .shithub-landing-cta-secondary {
378 background: transparent;
379 color: var(--fg-default);
380 border: 1px solid var(--border-default);
381 }
382 .shithub-landing-cta-secondary:hover { background: var(--canvas-subtle); }
383
384 .shithub-landing-honest {
385 max-width: 36rem;
386 margin: 0 auto 2rem;
387 color: var(--fg-muted);
388 font-size: 0.9rem;
389 line-height: 1.5;
390 }
391
392 /* ========== Error pages ========== */
393
394 .error-page {
395 max-width: 540px;
396 margin: 6rem auto;
397 padding: 2rem 1.5rem;
398 text-align: center;
399 }
400 .error-glyph {
401 display: inline-flex;
402 width: 64px; height: 64px;
403 align-items: center; justify-content: center;
404 border-radius: 50%;
405 background: var(--canvas-subtle);
406 color: var(--danger-fg);
407 margin-bottom: 1.5rem;
408 }
409 .error-glyph svg { width: 32px; height: 32px; }
410 .error-status {
411 margin: 0;
412 font-size: 4rem;
413 letter-spacing: -0.04em;
414 color: var(--fg-default);
415 }
416 .error-title {
417 margin: 0 0 0.75rem;
418 font-size: 1.4rem;
419 font-weight: 500;
420 }
421 .error-detail {
422 color: var(--fg-muted);
423 margin: 0 0 2rem;
424 max-width: 36rem;
425 margin-left: auto;
426 margin-right: auto;
427 }
428 .error-hint a {
429 display: inline-block;
430 padding: 0.5rem 1rem;
431 border: 1px solid var(--border-default);
432 border-radius: 6px;
433 color: var(--fg-default);
434 }
435 .error-hint a:hover { text-decoration: none; background: var(--canvas-subtle); }
436 .error-request-id {
437 margin-top: 2rem;
438 color: var(--fg-muted);
439 font-size: 0.8rem;
440 }
441
442 /* ----- auth (S05) ----- */
443 .shithub-auth {
444 max-width: 28rem;
445 margin: 3rem auto;
446 padding: 2rem;
447 background: var(--canvas-default);
448 border: 1px solid var(--border-default);
449 border-radius: 8px;
450 }
451 .shithub-auth h1 {
452 margin: 0 0 1.5rem;
453 font-size: 1.5rem;
454 }
455 .shithub-auth form { display: grid; gap: 1rem; }
456 .shithub-auth label { display: grid; gap: 0.25rem; font-weight: 500; }
457 .shithub-auth input[type=text],
458 .shithub-auth input[type=email],
459 .shithub-auth input[type=password] {
460 font: inherit;
461 padding: 0.5rem 0.75rem;
462 border: 1px solid var(--border-default);
463 border-radius: 6px;
464 background: var(--canvas-subtle);
465 }
466 .shithub-auth-aside {
467 margin: 1.5rem 0 0;
468 text-align: center;
469 color: var(--fg-muted);
470 font-size: 0.9rem;
471 }
472 .shithub-flash {
473 margin: 0 0 1rem;
474 padding: 0.75rem 1rem;
475 border-radius: 6px;
476 border: 1px solid var(--border-default);
477 }
478 .shithub-flash-error { background: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.3); }
479 .shithub-flash-notice { background: rgba(56, 139, 253, 0.1); border-color: rgba(56, 139, 253, 0.3); }
480
481 /* ----- 2FA (S06) ----- */
482 .shithub-auth-wide { max-width: 32rem; }
483 .shithub-2fa-steps { margin: 0 0 1.5rem; padding-left: 1.25rem; }
484 .shithub-2fa-steps li { margin: 0.25rem 0; }
485 .shithub-2fa-qr {
486 display: flex;
487 justify-content: center;
488 margin: 1rem 0;
489 padding: 1rem;
490 background: #ffffff;
491 border-radius: 6px;
492 border: 1px solid var(--border-default);
493 }
494 .shithub-2fa-secret {
495 text-align: center;
496 font-family: monospace;
497 margin: 0 0 1.5rem;
498 color: var(--fg-muted);
499 }
500 .shithub-recovery-codes {
501 list-style: none;
502 margin: 1rem 0;
503 padding: 1rem;
504 display: grid;
505 grid-template-columns: repeat(2, 1fr);
506 gap: 0.5rem;
507 background: var(--canvas-subtle);
508 border-radius: 6px;
509 font-family: monospace;
510 font-size: 1.05em;
511 }
512 .shithub-recovery-codes li code { background: transparent; padding: 0; }
513 .shithub-button-danger { background: rgba(248, 81, 73, 0.15); border-color: rgba(248, 81, 73, 0.4); }
514
515 /* ----- SSH keys (S07) ----- */
516 .shithub-key-list { list-style: none; padding: 0; margin: 1rem 0 2rem; }
517 .shithub-key-row {
518 display: flex;
519 justify-content: space-between;
520 align-items: flex-start;
521 gap: 1rem;
522 padding: 0.75rem;
523 border: 1px solid var(--border-default);
524 border-radius: 6px;
525 margin-bottom: 0.5rem;
526 }
527 .shithub-key-meta { margin-left: 0.75rem; color: var(--fg-muted); font-size: 0.85rem; }
528 .shithub-key-fp { display: block; margin-top: 0.25rem; font-size: 0.85rem; word-break: break-all; }
529 .shithub-key-last { display: block; margin-top: 0.25rem; color: var(--fg-muted); font-size: 0.8rem; }
530 .shithub-key-empty { color: var(--fg-muted); margin: 1rem 0 2rem; }
531
532 /* ----- profile (S09) ----- */
533 .shithub-profile { max-width: 56rem; margin: 2rem auto; padding: 0 1rem; }
534 .shithub-profile-header { display: flex; gap: 1.5rem; align-items: flex-start; }
535 .shithub-profile-avatar { width: 200px; height: 200px; border-radius: 50%; background: var(--canvas-subtle); border: 1px solid var(--border-default); }
536 .shithub-profile-id h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
537 .shithub-profile-handle { margin: 0; color: var(--fg-muted); }
538 .shithub-profile-pronouns { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: 0.9rem; }
539 .shithub-profile-you { margin-left: 0.5rem; padding: 0.1rem 0.4rem; background: var(--canvas-subtle); border: 1px solid var(--border-default); border-radius: 6px; font-size: 0.7rem; color: var(--fg-muted); vertical-align: middle; }
540 .shithub-profile-id .shithub-button { margin-top: 0.75rem; display: inline-block; }
541 .shithub-profile-bio { margin: 1.5rem 0; font-size: 1.05rem; }
542 .shithub-profile-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 1rem 0; }
543 .shithub-profile-meta dt { color: var(--fg-muted); font-weight: 500; }
544 .shithub-profile-meta dd { margin: 0; }
545 .shithub-profile-pinned, .shithub-profile-contributions, .shithub-profile-readme { margin: 2rem 0; }
546 .shithub-profile-pinned h2, .shithub-profile-contributions h2, .shithub-profile-readme h2 { font-size: 1.1rem; margin: 0 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-default); }
547 .shithub-empty { color: var(--fg-muted); font-style: italic; padding: 1rem; background: var(--canvas-subtle); border-radius: 6px; }
548 .shithub-profile-unavailable h1 { color: var(--fg-muted); }
549
550 /* ----- settings shell (S10) ----- */
551 .shithub-settings-page {
552 max-width: 64rem;
553 margin: 2rem auto;
554 padding: 0 1rem;
555 display: grid;
556 grid-template-columns: 220px 1fr;
557 gap: 2rem;
558 align-items: start;
559 }
560 .shithub-settings-side { font-size: 0.9rem; }
561 .shithub-settings-side-title {
562 margin: 0 0 0.75rem;
563 font-size: 1.5rem;
564 font-weight: 400;
565 padding-bottom: 0.5rem;
566 border-bottom: 1px solid var(--border-default);
567 }
568 .shithub-settings-side nav ul {
569 list-style: none;
570 padding: 0;
571 margin: 0 0 1rem;
572 }
573 .shithub-settings-side nav li {
574 border-radius: 6px;
575 }
576 .shithub-settings-side nav li.active {
577 background: var(--canvas-subtle);
578 border-left: 2px solid var(--accent-emphasis);
579 }
580 .shithub-settings-side nav li a {
581 display: block;
582 padding: 0.4rem 0.75rem;
583 color: var(--fg-default);
584 text-decoration: none;
585 border-radius: 6px;
586 }
587 .shithub-settings-side nav li a:hover { background: var(--canvas-subtle); }
588 .shithub-settings-side nav li.active a { font-weight: 500; }
589 .shithub-settings-side-group {
590 margin: 1.25rem 0 0.5rem;
591 padding-top: 0.75rem;
592 border-top: 1px solid var(--border-default);
593 font-size: 0.75rem;
594 font-weight: 600;
595 text-transform: uppercase;
596 letter-spacing: 0.05em;
597 color: var(--fg-muted);
598 }
599 .shithub-settings-danger { color: #cf222e; }
600
601 .shithub-settings-content { min-width: 0; }
602 .shithub-settings-content > h1 {
603 margin: 0 0 1.5rem;
604 padding-bottom: 0.75rem;
605 border-bottom: 1px solid var(--border-default);
606 font-size: 1.5rem;
607 font-weight: 400;
608 }
609 .shithub-settings-section {
610 margin: 0 0 2rem;
611 padding-bottom: 1.5rem;
612 border-bottom: 1px solid var(--border-muted, var(--border-default));
613 }
614 .shithub-settings-section:last-child { border-bottom: none; }
615 .shithub-settings-section h2 {
616 margin: 0 0 0.5rem;
617 font-size: 1rem;
618 font-weight: 600;
619 }
620 .shithub-settings-section p { margin: 0 0 1rem; color: var(--fg-muted); }
621 .shithub-settings-section form { display: grid; gap: 0.85rem; max-width: 32rem; }
622 .shithub-settings-section label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
623 .shithub-settings-section input[type=text],
624 .shithub-settings-section input[type=email],
625 .shithub-settings-section input[type=password],
626 .shithub-settings-section input[type=url],
627 .shithub-settings-section textarea,
628 .shithub-settings-section select {
629 font: inherit;
630 padding: 0.5rem 0.75rem;
631 border: 1px solid var(--border-default);
632 border-radius: 6px;
633 background: var(--canvas-subtle);
634 }
635 .shithub-settings-section textarea { min-height: 4rem; resize: vertical; }
636 .shithub-settings-section .shithub-button { justify-self: start; }
637
638 .shithub-settings-danger-zone {
639 border: 1px solid rgba(207, 34, 46, 0.4);
640 border-radius: 6px;
641 padding: 1rem 1.25rem;
642 background: rgba(207, 34, 46, 0.04);
643 }
644 .shithub-settings-danger-zone h2 { color: #cf222e; }
645
646 .shithub-settings-section label small {
647 font-weight: 400;
648 color: var(--fg-muted);
649 font-size: 0.8rem;
650 }
651
652 .shithub-profile-edit {
653 display: grid;
654 grid-template-columns: minmax(0, 1fr) 220px;
655 gap: 2rem;
656 align-items: start;
657 }
658 .shithub-profile-edit-form { margin: 0; padding: 0; border: none; }
659 .shithub-profile-edit-aside h2 { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 600; }
660 .shithub-profile-edit-avatar {
661 width: 200px;
662 height: 200px;
663 border-radius: 50%;
664 border: 1px solid var(--border-default);
665 background: var(--canvas-subtle);
666 display: block;
667 }
668 .shithub-empty-note {
669 margin: 0.5rem 0 0;
670 font-size: 0.8rem;
671 color: var(--fg-muted);
672 }
673 .shithub-profile-edit-aside form {
674 margin: 0.75rem 0 0;
675 display: grid;
676 gap: 0.5rem;
677 }
678 .shithub-profile-edit-upload span {
679 display: block;
680 font-size: 0.85rem;
681 font-weight: 500;
682 margin-bottom: 0.25rem;
683 }
684 .shithub-profile-edit-upload input[type=file] {
685 font-size: 0.85rem;
686 }
687
688 @media (max-width: 720px) {
689 .shithub-settings-page {
690 grid-template-columns: 1fr;
691 }
692 .shithub-profile-edit {
693 grid-template-columns: 1fr;
694 }
695 }
696
697 /* ----- theme picker (S10) ----- */
698 .shithub-theme-grid {
699 border: none;
700 padding: 0;
701 margin: 0 0 1rem;
702 display: grid;
703 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
704 gap: 0.75rem;
705 }
706 .shithub-theme-grid legend {
707 padding: 0;
708 margin: 0 0 0.5rem;
709 font-size: 0.85rem;
710 font-weight: 500;
711 }
712 .shithub-theme-card {
713 display: grid;
714 gap: 0.25rem;
715 padding: 0.85rem 1rem;
716 border: 1px solid var(--border-default);
717 border-radius: 8px;
718 background: var(--canvas-subtle);
719 cursor: pointer;
720 position: relative;
721 transition: border-color 120ms;
722 }
723 .shithub-theme-card:hover { border-color: var(--accent-emphasis); }
724 .shithub-theme-card.active {
725 border-color: var(--accent-emphasis);
726 box-shadow: 0 0 0 1px var(--accent-emphasis) inset;
727 }
728 .shithub-theme-card input[type=radio] {
729 position: absolute;
730 top: 0.6rem;
731 right: 0.6rem;
732 }
733 .shithub-theme-card-title {
734 font-weight: 600;
735 font-size: 0.95rem;
736 }
737 .shithub-theme-card-desc {
738 font-size: 0.8rem;
739 color: var(--fg-muted);
740 }
741
742 /* ----- emails (S10) ----- */
743 .shithub-email-list {
744 list-style: none;
745 padding: 0;
746 margin: 1rem 0 0;
747 display: grid;
748 gap: 0.5rem;
749 }
750 .shithub-email-row {
751 display: flex;
752 justify-content: space-between;
753 align-items: center;
754 gap: 1rem;
755 padding: 0.75rem 1rem;
756 border: 1px solid var(--border-default);
757 border-radius: 6px;
758 background: var(--canvas-subtle);
759 }
760 .shithub-email-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
761 .shithub-email-addr { background: transparent; padding: 0; font-weight: 500; }
762 .shithub-email-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
763 .shithub-email-actions form { display: inline; }
764 .shithub-pill {
765 font-size: 0.7rem;
766 padding: 0.1rem 0.5rem;
767 border-radius: 999px;
768 border: 1px solid var(--border-default);
769 text-transform: uppercase;
770 letter-spacing: 0.04em;
771 font-weight: 600;
772 }
773 .shithub-pill-primary { background: rgba(56, 139, 253, 0.15); border-color: rgba(56, 139, 253, 0.4); }
774 .shithub-pill-verified { background: rgba(63, 185, 80, 0.15); border-color: rgba(63, 185, 80, 0.4); }
775 .shithub-pill-unverified { background: rgba(187, 128, 9, 0.15); border-color: rgba(187, 128, 9, 0.4); }
776
777 /* ----- notifications (S10) ----- */
778 .shithub-notif-form { display: grid; gap: 0.75rem; max-width: 36rem; }
779 .shithub-notif-row {
780 display: grid;
781 grid-template-columns: max-content 1fr;
782 gap: 0.75rem;
783 padding: 0.75rem 1rem;
784 border: 1px solid var(--border-default);
785 border-radius: 6px;
786 background: var(--canvas-subtle);
787 align-items: start;
788 }
789 .shithub-notif-row.required { background: rgba(56, 139, 253, 0.06); }
790 .shithub-notif-row strong { display: block; font-size: 0.95rem; }
791 .shithub-notif-row small { display: block; color: var(--fg-muted); font-size: 0.85rem; }
792
793 .shithub-session-meta {
794 display: grid;
795 grid-template-columns: max-content 1fr;
796 gap: 0.25rem 1rem;
797 margin: 0;
798 }
799 .shithub-session-meta dt { color: var(--fg-muted); font-weight: 500; }
800 .shithub-session-meta dd { margin: 0; word-break: break-all; }
801
802 /* ----- repo create + empty home (S11) ----- */
803 .shithub-repo-new {
804 max-width: 56rem;
805 margin: 2rem auto;
806 padding: 0 1rem;
807 }
808 .shithub-repo-new h1 {
809 margin: 0 0 0.5rem;
810 font-size: 1.5rem;
811 font-weight: 400;
812 }
813 .shithub-repo-new-lede {
814 margin: 0 0 1.5rem;
815 color: var(--fg-muted);
816 padding-bottom: 1rem;
817 border-bottom: 1px solid var(--border-default);
818 }
819 .shithub-repo-new-form {
820 display: grid;
821 gap: 1.25rem;
822 max-width: 36rem;
823 }
824 .shithub-repo-new-form label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
825 .shithub-repo-new-form input[type=text],
826 .shithub-repo-new-form select {
827 font: inherit;
828 padding: 0.5rem 0.75rem;
829 border: 1px solid var(--border-default);
830 border-radius: 6px;
831 background: var(--canvas-subtle);
832 }
833 .shithub-repo-new-form em { color: #cf222e; font-style: normal; }
834 .shithub-repo-new-form small { font-weight: 400; color: var(--fg-muted); font-size: 0.8rem; }
835
836 .shithub-repo-new-visibility, .shithub-repo-new-init {
837 border: none;
838 padding: 0;
839 margin: 0;
840 display: grid;
841 gap: 0.5rem;
842 }
843 .shithub-repo-new-visibility legend, .shithub-repo-new-init legend {
844 padding: 0;
845 font-size: 0.85rem;
846 font-weight: 600;
847 margin-bottom: 0.5rem;
848 }
849 .shithub-repo-new-vis-card,
850 .shithub-repo-new-init-row {
851 display: grid;
852 grid-template-columns: max-content 1fr;
853 gap: 0.75rem;
854 padding: 0.75rem 1rem;
855 border: 1px solid var(--border-default);
856 border-radius: 6px;
857 background: var(--canvas-subtle);
858 }
859 .shithub-repo-new-vis-card.active { border-color: var(--accent-emphasis); }
860 .shithub-repo-new-vis-card strong,
861 .shithub-repo-new-init-row strong { display: block; font-size: 0.95rem; }
862 .shithub-repo-new-vis-card small,
863 .shithub-repo-new-init-row small { display: block; color: var(--fg-muted); font-size: 0.85rem; }
864
865 .shithub-repo-empty {
866 max-width: 56rem;
867 margin: 0;
868 padding: 0;
869 }
870 .shithub-repo-empty-desc {
871 margin: 0 0 1rem;
872 color: var(--fg-muted);
873 }
874 .shithub-pill-private { background: rgba(187, 128, 9, 0.15); border-color: rgba(187, 128, 9, 0.4); }
875 .shithub-repo-empty-quickstart {
876 margin-top: 1rem;
877 padding: 1.25rem;
878 border: 1px solid var(--border-default);
879 border-radius: 8px;
880 background: var(--canvas-subtle);
881 }
882 .shithub-repo-empty-quickstart h2 { margin: 0 0 0.5rem; font-size: 1rem; }
883 .shithub-repo-empty-quickstart h3 { margin: 1.25rem 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
884 .shithub-repo-empty-clone { display: grid; gap: 0.5rem; margin: 0.75rem 0; }
885 .shithub-repo-empty-clone label { display: grid; grid-template-columns: 70px 1fr; gap: 0.5rem; align-items: center; }
886 .shithub-repo-empty-clone span { font-size: 0.8rem; color: var(--fg-muted); font-weight: 600; }
887 .shithub-repo-empty-clone input {
888 font: inherit;
889 font-family: monospace;
890 font-size: 0.85rem;
891 padding: 0.5rem 0.75rem;
892 border: 1px solid var(--border-default);
893 border-radius: 6px;
894 background: var(--canvas-default);
895 }
896 .shithub-repo-empty-quickstart pre {
897 padding: 0.75rem 1rem;
898 border: 1px solid var(--border-default);
899 border-radius: 6px;
900 background: var(--canvas-default);
901 font-size: 0.85rem;
902 overflow-x: auto;
903 }
904
905 /* Populated-repo placeholder (S17 will replace with real tree view) */
906 .shithub-repo-populated {
907 max-width: 56rem;
908 margin: 2rem auto;
909 padding: 0 1rem;
910 }
911 .shithub-repo-populated-head h1 {
912 margin: 0 0 0.5rem;
913 font-size: 1.4rem;
914 font-weight: 400;
915 display: flex;
916 align-items: center;
917 gap: 0.4rem;
918 }
919 .shithub-repo-populated-sep { color: var(--fg-muted); }
920 .shithub-repo-populated-desc { margin: 0 0 1rem; color: var(--fg-muted); }
921 .shithub-repo-headcommit {
922 margin-top: 1rem;
923 padding: 0.85rem 1rem;
924 border: 1px solid var(--border-default);
925 border-radius: 8px;
926 background: var(--canvas-subtle);
927 }
928 .shithub-repo-headcommit-meta {
929 display: flex;
930 flex-wrap: wrap;
931 gap: 0.75rem;
932 font-size: 0.85rem;
933 color: var(--fg-muted);
934 align-items: center;
935 }
936 .shithub-repo-headcommit-branch {
937 font-weight: 600;
938 color: var(--fg-default);
939 padding: 0.1rem 0.5rem;
940 border: 1px solid var(--border-default);
941 border-radius: 999px;
942 background: var(--canvas-default);
943 font-size: 0.75rem;
944 }
945 .shithub-repo-headcommit-oid { font-family: monospace; }
946 .shithub-repo-headcommit-author { color: var(--fg-default); }
947 .shithub-repo-headcommit-subject { margin: 0.5rem 0 0; font-size: 0.95rem; }
948 .shithub-repo-headcommit-other-branch p { margin: 0; font-size: 0.9rem; color: var(--fg-muted); }
949 .shithub-repo-populated-clone {
950 margin-top: 1rem;
951 display: grid;
952 gap: 0.5rem;
953 }
954 .shithub-repo-populated-clone label { display: grid; grid-template-columns: 70px 1fr; gap: 0.5rem; align-items: center; }
955 .shithub-repo-populated-clone span { font-size: 0.8rem; color: var(--fg-muted); font-weight: 600; }
956 .shithub-repo-populated-clone input {
957 font: inherit;
958 font-family: monospace;
959 font-size: 0.85rem;
960 padding: 0.5rem 0.75rem;
961 border: 1px solid var(--border-default);
962 border-radius: 6px;
963 background: var(--canvas-default);
964 }
965 .shithub-repo-populated-note { margin-top: 1rem; font-size: 0.8rem; color: var(--fg-muted); }
966
967 /* ========== Code tab (S17) ========== */
968 /* The repo-page wrapper drives the outer width — every code/blob/list
969 view now gets the same wide container with consistent gutters,
970 matching GitHub's full-width code layout. The inner sections used
971 to set their own max-widths and pinched the layout into a narrow
972 column. */
973 .shithub-repo-page {
974 max-width: 1280px;
975 margin: 1rem auto 2rem;
976 padding: 0 1.25rem;
977 }
978 .shithub-code, .shithub-blob, .shithub-finder {
979 margin: 0;
980 padding: 0;
981 }
982 /* Code body (tree + blob source) sits in a bordered panel so it
983 reads as a distinct surface — matches the panelled "Code" view in
984 the GitHub reference screenshots. */
985 .shithub-blob-source {
986 border: 1px solid var(--border-default);
987 border-radius: 6px;
988 background: var(--canvas-subtle);
989 overflow-x: auto;
990 }
991 .shithub-blob-source { background: var(--canvas-default); }
992 .shithub-code-head {
993 display: flex;
994 align-items: center;
995 justify-content: space-between;
996 gap: 0.75rem;
997 margin-bottom: 0.75rem;
998 flex-wrap: wrap;
999 }
1000 .shithub-code-crumbs { font-size: 1rem; }
1001 .shithub-code-crumbs a { color: var(--fg-default); }
1002 .shithub-code-sep { color: var(--fg-muted); margin: 0 0.25rem; }
1003 .shithub-code-actions {
1004 display: flex;
1005 gap: 0.5rem;
1006 align-items: center;
1007 min-width: min(100%, 420px);
1008 justify-content: flex-end;
1009 flex: 1 1 360px;
1010 }
1011 .shithub-code-primary-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
1012 .shithub-code-count { color: var(--fg-muted); display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
1013 .shithub-go-to-file {
1014 display: inline-grid;
1015 grid-template-columns: 16px minmax(0, 1fr) auto;
1016 align-items: center;
1017 gap: 0.45rem;
1018 min-width: min(100%, 220px);
1019 height: 32px;
1020 padding: 0 0.55rem;
1021 border: 1px solid var(--border-default);
1022 border-radius: 6px;
1023 background: var(--canvas-default);
1024 color: var(--fg-muted);
1025 font-size: 0.875rem;
1026 }
1027 .shithub-go-to-file:hover {
1028 border-color: var(--accent-fg);
1029 text-decoration: none;
1030 }
1031 .shithub-go-to-file span {
1032 overflow: hidden;
1033 text-overflow: ellipsis;
1034 white-space: nowrap;
1035 }
1036 .shithub-go-to-file kbd {
1037 min-width: 1.25rem;
1038 padding: 0 0.3rem;
1039 border: 1px solid var(--border-default);
1040 border-radius: 4px;
1041 color: var(--fg-muted);
1042 background: var(--canvas-subtle);
1043 font: 0.75rem ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
1044 text-align: center;
1045 }
1046
1047 .shithub-ref-switcher { position: relative; }
1048 .shithub-ref-switcher > summary {
1049 list-style: none;
1050 display: inline-flex;
1051 align-items: center;
1052 gap: 0.35rem;
1053 padding: 0.3rem 0.7rem;
1054 border: 1px solid var(--border-default);
1055 border-radius: 6px;
1056 cursor: pointer;
1057 font-size: 0.875rem;
1058 }
1059 .shithub-ref-switcher > summary::-webkit-details-marker { display: none; }
1060 .shithub-ref-panel {
1061 position: absolute;
1062 z-index: 30;
1063 top: calc(100% + 0.4rem);
1064 left: 0;
1065 min-width: 220px;
1066 max-height: 360px;
1067 overflow-y: auto;
1068 background: var(--canvas-default);
1069 border: 1px solid var(--border-default);
1070 border-radius: 6px;
1071 padding: 0.5rem;
1072 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
1073 }
1074 .shithub-ref-panel a {
1075 display: block;
1076 padding: 0.3rem 0.4rem;
1077 color: var(--fg-default);
1078 font-size: 0.875rem;
1079 }
1080 .shithub-ref-panel strong { display: block; margin: 0.4rem 0 0.2rem; font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; }
1081
1082 .shithub-clone-dropdown { position: relative; }
1083 .shithub-clone-dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; height: 32px; white-space: nowrap; }
1084 .shithub-clone-dropdown > summary svg:last-child { width: 12px; height: 12px; }
1085 .shithub-clone-dropdown > summary::-webkit-details-marker { display: none; }
1086 .shithub-clone-panel {
1087 position: absolute;
1088 z-index: 30;
1089 top: calc(100% + 0.4rem);
1090 right: 0;
1091 min-width: 320px;
1092 background: var(--canvas-default);
1093 border: 1px solid var(--border-default);
1094 border-radius: 6px;
1095 padding: 0.75rem;
1096 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
1097 }
1098 .shithub-clone-row + .shithub-clone-row { margin-top: 0.6rem; }
1099 .shithub-clone-row label { display: block; font-size: 0.75rem; color: var(--fg-muted); margin-bottom: 0.25rem; }
1100 .shithub-clone-input { display: flex; gap: 0.4rem; }
1101 .shithub-clone-input input {
1102 flex: 1;
1103 padding: 0.3rem 0.5rem;
1104 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1105 font-size: 0.8rem;
1106 border: 1px solid var(--border-default);
1107 border-radius: 4px;
1108 background: var(--canvas-subtle);
1109 color: var(--fg-default);
1110 }
1111 .shithub-clone-input button { padding: 0.3rem 0.5rem; }
1112 .shithub-clone-hint { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--fg-muted); }
1113
1114 /* Profile sub-nav (S30) — Overview / Repositories / Stars tabs. */
1115 .shithub-profile-tabs {
1116 display: flex;
1117 gap: 0.25rem;
1118 margin: 1rem 0 1.25rem;
1119 border-bottom: 1px solid var(--border-default);
1120 }
1121 .shithub-profile-tab {
1122 display: inline-flex;
1123 align-items: center;
1124 gap: 0.4rem;
1125 padding: 0.6rem 0.85rem;
1126 color: var(--fg-default);
1127 border-bottom: 2px solid transparent;
1128 font-size: 0.9rem;
1129 text-decoration: none;
1130 position: relative;
1131 bottom: -1px;
1132 }
1133 .shithub-profile-tab:hover { background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
1134 .shithub-profile-tab.is-active { border-bottom-color: var(--accent-emphasis, #fd8c73); font-weight: 600; }
1135 .shithub-tab-count {
1136 display: inline-block;
1137 padding: 0.05rem 0.45rem;
1138 border-radius: 999px;
1139 background: var(--canvas-subtle);
1140 border: 1px solid var(--border-default);
1141 font-size: 0.75rem;
1142 color: var(--fg-muted);
1143 }
1144
1145 /* Repositories tab list. */
1146 .shithub-repo-list { list-style: none; padding: 0; margin: 0; }
1147 .shithub-repo-list-row {
1148 padding: 1rem 0;
1149 border-bottom: 1px solid var(--border-default);
1150 }
1151 .shithub-repo-list-name { margin: 0; font-size: 1.1rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
1152 .shithub-repo-list-name a { color: var(--accent-fg, #4493f8); }
1153 .shithub-repo-list-meta { color: var(--fg-muted); font-size: 0.8rem; display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 0; }
1154 .shithub-pill-archived { background: #ffd35a; color: #3b2300; }
1155
1156 .shithub-repo-header { margin-bottom: 1.25rem; }
1157 .shithub-repo-header-inner {
1158 display: flex;
1159 align-items: center;
1160 justify-content: space-between;
1161 gap: 1rem;
1162 padding: 0.25rem 0 0.75rem;
1163 }
1164 .shithub-repo-page-title { font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
1165 .shithub-repo-page-title a { color: var(--accent-fg, #4493f8); }
1166 .shithub-repo-page-title .shithub-repo-name { font-weight: 600; }
1167 .shithub-repo-title-icon { color: var(--fg-muted); display: inline-flex; align-items: center; }
1168 .shithub-repo-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
1169 .shithub-repo-action-form { margin: 0; }
1170 .shithub-repo-action {
1171 display: inline-flex;
1172 align-items: center;
1173 gap: 0.35rem;
1174 min-height: 32px;
1175 padding: 0 0.7rem;
1176 border: 1px solid var(--border-default);
1177 border-radius: 6px;
1178 color: var(--fg-default);
1179 background: var(--canvas-subtle);
1180 font-size: 0.875rem;
1181 font-weight: 600;
1182 line-height: 20px;
1183 white-space: nowrap;
1184 cursor: pointer;
1185 }
1186 .shithub-repo-action:hover { text-decoration: none; background: var(--canvas-inset); }
1187 button.shithub-repo-action {
1188 font-family: inherit;
1189 }
1190 .shithub-repo-action.is-active {
1191 color: var(--accent-fg);
1192 }
1193 .shithub-repo-action-label { color: inherit; }
1194 .shithub-repo-action .shithub-counter {
1195 color: var(--fg-muted);
1196 font-weight: 600;
1197 font-size: 0.75rem;
1198 padding: 0 0.35rem;
1199 min-width: 1.25rem;
1200 border-radius: 999px;
1201 background: rgba(110, 118, 129, 0.18);
1202 }
1203 .shithub-repo-action-menu { position: relative; }
1204 .shithub-repo-action-menu > summary { list-style: none; }
1205 .shithub-repo-action-menu > summary::-webkit-details-marker { display: none; }
1206 .shithub-repo-action-button svg:last-child {
1207 width: 12px;
1208 height: 12px;
1209 color: var(--fg-muted);
1210 }
1211 .shithub-repo-action-popover {
1212 position: absolute;
1213 right: 0;
1214 top: calc(100% + 0.4rem);
1215 z-index: 20;
1216 width: min(340px, calc(100vw - 2rem));
1217 padding: 0.5rem 0;
1218 border: 1px solid var(--border-default);
1219 border-radius: 8px;
1220 background: var(--canvas-default);
1221 box-shadow: 0 16px 32px rgba(1, 4, 9, 0.2);
1222 }
1223 .shithub-repo-action-popover strong {
1224 display: block;
1225 padding: 0.45rem 0.85rem 0.55rem;
1226 border-bottom: 1px solid var(--border-muted);
1227 }
1228 .shithub-repo-action-option-form { margin: 0; }
1229 .shithub-repo-action-option {
1230 width: 100%;
1231 display: grid;
1232 grid-template-columns: 16px minmax(0, 1fr);
1233 gap: 0.6rem;
1234 padding: 0.65rem 0.85rem;
1235 border: 0;
1236 border-bottom: 1px solid var(--border-muted);
1237 background: transparent;
1238 color: var(--fg-default);
1239 font: inherit;
1240 text-align: left;
1241 cursor: pointer;
1242 }
1243 .shithub-repo-action-option:hover { background: var(--canvas-subtle); }
1244 .shithub-repo-action-radio {
1245 width: 14px;
1246 height: 14px;
1247 margin-top: 0.25rem;
1248 border: 1px solid var(--border-default);
1249 border-radius: 50%;
1250 }
1251 .shithub-repo-action-option.is-selected .shithub-repo-action-radio {
1252 border-color: var(--accent-emphasis);
1253 box-shadow: inset 0 0 0 3px var(--canvas-default);
1254 background: var(--accent-emphasis);
1255 }
1256 .shithub-repo-action-option-title {
1257 display: block;
1258 font-weight: 600;
1259 }
1260 .shithub-repo-action-option-description {
1261 display: block;
1262 margin-top: 0.15rem;
1263 color: var(--fg-muted);
1264 font-size: 0.78rem;
1265 line-height: 1.35;
1266 }
1267 .shithub-repo-action-popover-link {
1268 display: block;
1269 padding: 0.55rem 0.85rem 0.35rem;
1270 color: var(--fg-muted);
1271 font-size: 0.82rem;
1272 }
1273 .shithub-repo-subnav {
1274 display: flex;
1275 gap: 0.25rem;
1276 margin: 0;
1277 border-bottom: 1px solid var(--border-default);
1278 flex-wrap: wrap;
1279 }
1280 .shithub-repo-subnav-tab {
1281 display: inline-flex;
1282 align-items: center;
1283 gap: 0.4rem;
1284 padding: 0.55rem 0.85rem;
1285 color: var(--fg-default);
1286 border-bottom: 2px solid transparent;
1287 font-size: 0.9rem;
1288 text-decoration: none;
1289 position: relative;
1290 bottom: -1px;
1291 }
1292 .shithub-repo-subnav-tab:hover { background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
1293 .shithub-repo-subnav-tab.is-active { border-bottom-color: var(--accent-emphasis, #fd8c73); font-weight: 600; }
1294
1295 /* New-repo owner picker (S30) */
1296 .shithub-repo-new-owner-row { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
1297 .shithub-repo-new-owner select { padding: 0.4rem 0.5rem; }
1298 .shithub-repo-new-sep { font-size: 1.5rem; color: var(--fg-muted); padding-bottom: 0.4rem; }
1299
1300 .shithub-repo-content-grid {
1301 display: grid;
1302 grid-template-columns: minmax(0, 1fr) 296px;
1303 gap: 1.5rem;
1304 align-items: start;
1305 }
1306 .shithub-repo-main { min-width: 0; }
1307 .shithub-tree-panel {
1308 border: 1px solid var(--border-default);
1309 border-radius: 6px;
1310 background: var(--canvas-default);
1311 overflow: hidden;
1312 }
1313 .shithub-tree-commit {
1314 display: flex;
1315 justify-content: space-between;
1316 align-items: center;
1317 gap: 1rem;
1318 padding: 0.75rem 1rem;
1319 background: var(--canvas-subtle);
1320 border-bottom: 1px solid var(--border-default);
1321 font-size: 0.9rem;
1322 }
1323 .shithub-tree-commit-message,
1324 .shithub-tree-commit-meta {
1325 display: flex;
1326 align-items: center;
1327 gap: 0.5rem;
1328 min-width: 0;
1329 }
1330 .shithub-tree-commit-message .shithub-avatar-sm {
1331 margin-right: 0;
1332 }
1333 .shithub-tree-commit-subject,
1334 .shithub-tree-row-commit a {
1335 overflow: hidden;
1336 text-overflow: ellipsis;
1337 white-space: nowrap;
1338 }
1339 .shithub-tree-commit-subject {
1340 color: var(--fg-default);
1341 min-width: 0;
1342 }
1343 .shithub-tree-commit-meta { color: var(--fg-muted); flex: 0 0 auto; }
1344 .shithub-tree-commit-meta a {
1345 color: var(--fg-muted);
1346 }
1347 .shithub-tree-commit-count {
1348 display: inline-flex;
1349 align-items: center;
1350 gap: 0.35rem;
1351 font-weight: 600;
1352 }
1353 .shithub-tree {
1354 width: 100%;
1355 border-collapse: collapse;
1356 font-size: 0.9rem;
1357 background: var(--canvas-default);
1358 table-layout: fixed;
1359 }
1360 .shithub-tree td {
1361 padding: 0.5rem 0.75rem;
1362 border-bottom: 1px solid var(--border-default);
1363 vertical-align: middle;
1364 }
1365 .shithub-tree tr:last-child td { border-bottom: 0; }
1366 .shithub-tree-icon { width: 36px; color: var(--fg-muted); padding-right: 0; }
1367 .shithub-tree-icon svg { display: block; }
1368 .shithub-tree-name {
1369 width: 34%;
1370 font-weight: 600;
1371 }
1372 .shithub-tree-name a { color: var(--fg-default); }
1373 .shithub-tree-row-commit {
1374 width: auto;
1375 color: var(--fg-muted);
1376 }
1377 .shithub-tree-row-commit a {
1378 display: block;
1379 color: var(--fg-muted);
1380 }
1381 .shithub-tree-row-time {
1382 width: 120px;
1383 color: var(--fg-muted);
1384 text-align: right;
1385 white-space: nowrap;
1386 }
1387 .shithub-tree-symlink, .shithub-tree-submodule { color: var(--fg-muted); font-style: italic; font-size: 0.8rem; }
1388 @media (max-width: 760px) {
1389 .shithub-code-actions {
1390 flex: 1 1 100%;
1391 justify-content: stretch;
1392 }
1393 .shithub-go-to-file {
1394 flex: 1 1 auto;
1395 }
1396 .shithub-tree-commit {
1397 align-items: flex-start;
1398 flex-direction: column;
1399 }
1400 .shithub-tree-commit-meta {
1401 flex-wrap: wrap;
1402 }
1403 .shithub-tree-name {
1404 width: auto;
1405 }
1406 .shithub-tree-row-commit,
1407 .shithub-tree-row-time {
1408 display: none;
1409 }
1410 }
1411
1412 /* Code-view layout: 2/3 main column + 1/3 About sidebar, mirroring
1413 the GitHub repo home layout. Single-column on narrow viewports so
1414 the sidebar drops below the tree on mobile. The S39 hardening pass
1415 replaces the previous single-centered-column layout that wasted
1416 the right rail. */
1417 .shithub-repo-with-sidebar {
1418 display: grid;
1419 grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
1420 gap: 1.5rem;
1421 align-items: start;
1422 }
1423 .shithub-repo-main {
1424 min-width: 0; /* let the grid item shrink so children with overflow-x scroll instead of forcing the column wider */
1425 }
1426 @media (max-width: 1024px) {
1427 .shithub-repo-with-sidebar {
1428 grid-template-columns: 1fr;
1429 }
1430 }
1431
1432 .shithub-repo-about {
1433 border-top: 1px solid var(--border-default);
1434 padding-top: 1rem;
1435 font-size: 0.875rem;
1436 --language-color-primary: #00add8;
1437 }
1438 @media (min-width: 1025px) {
1439 .shithub-repo-about {
1440 border-top: none;
1441 padding-top: 0;
1442 }
1443 }
1444 .shithub-border-grid-row {
1445 border-top: 1px solid var(--border-default);
1446 padding: 1rem 0;
1447 }
1448 .shithub-border-grid-row:first-child {
1449 border-top: 0;
1450 padding-top: 0;
1451 }
1452 .shithub-repo-about-heading,
1453 .shithub-repo-about-section-heading {
1454 display: flex;
1455 align-items: center;
1456 justify-content: space-between;
1457 gap: 0.75rem;
1458 margin: 0 0 0.75rem;
1459 color: var(--fg-default);
1460 font-size: 1rem;
1461 font-weight: 600;
1462 line-height: 1.5;
1463 }
1464 .shithub-repo-about-heading h2 {
1465 margin: 0;
1466 font-size: 1rem;
1467 }
1468 .shithub-repo-about-heading a {
1469 color: var(--fg-muted);
1470 display: inline-flex;
1471 }
1472 .shithub-repo-about-desc {
1473 margin: 0 0 1rem;
1474 color: var(--fg-default);
1475 font-size: 1rem;
1476 line-height: 1.5;
1477 }
1478 .shithub-repo-topics {
1479 display: flex;
1480 flex-wrap: wrap;
1481 gap: 0.4rem;
1482 margin: 0 0 1rem;
1483 }
1484 .shithub-topic {
1485 display: inline-flex;
1486 padding: 0.18rem 0.55rem;
1487 border-radius: 999px;
1488 background: color-mix(in srgb, var(--accent-fg, #4493f8) 12%, transparent);
1489 color: var(--accent-fg, #4493f8);
1490 font-size: 0.75rem;
1491 font-weight: 600;
1492 }
1493 .shithub-repo-about-list,
1494 .shithub-repo-about-stats,
1495 .shithub-language-list {
1496 list-style: none;
1497 padding: 0;
1498 margin: 0;
1499 }
1500 .shithub-repo-about-list li,
1501 .shithub-repo-about-stats li,
1502 .shithub-language-list li {
1503 display: flex;
1504 align-items: center;
1505 gap: 0.5rem;
1506 min-width: 0;
1507 margin: 0.5rem 0;
1508 color: var(--fg-muted);
1509 }
1510 .shithub-repo-about-list svg,
1511 .shithub-repo-about-stats svg {
1512 color: var(--fg-muted);
1513 flex: 0 0 auto;
1514 }
1515 .shithub-repo-about-list span,
1516 .shithub-repo-about-stats strong,
1517 .shithub-language-list span:nth-child(2) {
1518 color: var(--fg-default);
1519 }
1520 .shithub-repo-about-stats {
1521 margin-top: 0.75rem;
1522 }
1523 .shithub-repo-about-stats a {
1524 color: var(--fg-muted);
1525 display: inline-flex;
1526 align-items: center;
1527 gap: 0.5rem;
1528 }
1529 .shithub-repo-about-stats a:hover,
1530 .shithub-repo-report:hover,
1531 .shithub-repo-contributor:hover {
1532 color: var(--accent-fg);
1533 text-decoration: none;
1534 }
1535 .shithub-repo-report {
1536 display: inline-block;
1537 margin-top: 0.5rem;
1538 color: var(--fg-muted);
1539 }
1540 .shithub-repo-about-section-heading {
1541 margin-bottom: 0.5rem;
1542 }
1543 .shithub-repo-section-count {
1544 min-width: 1.25rem;
1545 padding: 0 0.35rem;
1546 border-radius: 999px;
1547 background: var(--neutral-muted);
1548 color: var(--fg-default);
1549 font-size: 0.75rem;
1550 font-weight: 600;
1551 line-height: 1.5;
1552 text-align: center;
1553 }
1554 .shithub-repo-contributors {
1555 display: flex;
1556 flex-direction: column;
1557 gap: 0.5rem;
1558 }
1559 .shithub-repo-contributor {
1560 display: inline-flex;
1561 align-items: center;
1562 gap: 0.5rem;
1563 color: var(--fg-default);
1564 font-weight: 600;
1565 }
1566 .shithub-repo-contributor img {
1567 width: 32px;
1568 height: 32px;
1569 border-radius: 50%;
1570 }
1571 .shithub-repo-contributor-identicon {
1572 width: 32px;
1573 height: 32px;
1574 border-radius: 50%;
1575 flex: 0 0 auto;
1576 }
1577 .shithub-language-bar {
1578 display: flex;
1579 overflow: hidden;
1580 height: 0.5rem;
1581 margin: 0.5rem 0 0.75rem;
1582 border-radius: 999px;
1583 background: var(--border-muted);
1584 }
1585 .shithub-language-bar span {
1586 display: block;
1587 min-width: 2px;
1588 }
1589 .shithub-language-list {
1590 display: flex;
1591 flex-wrap: wrap;
1592 gap: 0.25rem 1rem;
1593 }
1594 .shithub-language-list li {
1595 margin: 0;
1596 gap: 0.35rem;
1597 font-size: 0.75rem;
1598 }
1599 .shithub-language-dot {
1600 width: 0.75rem;
1601 height: 0.75rem;
1602 border-radius: 50%;
1603 flex: 0 0 auto;
1604 }
1605
1606 .shithub-readme {
1607 margin-top: 1rem;
1608 padding: 0;
1609 border: 1px solid var(--border-default);
1610 border-radius: 6px;
1611 background: var(--canvas-default);
1612 overflow: hidden;
1613 }
1614 .shithub-readme-head {
1615 display: flex;
1616 align-items: center;
1617 min-height: 48px;
1618 padding: 0 1rem;
1619 border-bottom: 1px solid var(--border-default);
1620 overflow-x: auto;
1621 }
1622 .shithub-readme-tabs {
1623 display: flex;
1624 align-items: stretch;
1625 gap: 1.25rem;
1626 min-width: 0;
1627 }
1628 .shithub-readme-tab {
1629 display: inline-flex;
1630 align-items: center;
1631 gap: 0.45rem;
1632 margin-bottom: -1px;
1633 padding: 0.85rem 0 0.78rem;
1634 border-bottom: 2px solid transparent;
1635 color: var(--fg-muted);
1636 font-size: 0.85rem;
1637 font-weight: 600;
1638 text-decoration: none;
1639 white-space: nowrap;
1640 }
1641 .shithub-readme-tab:hover {
1642 color: var(--fg-default);
1643 text-decoration: none;
1644 }
1645 .shithub-readme-tab.is-active {
1646 border-bottom-color: var(--accent-emphasis, #fd8c73);
1647 color: var(--fg-default);
1648 }
1649 .shithub-readme-body { padding: 2rem; }
1650 .markdown-body {
1651 color: var(--fg-default);
1652 font-size: 0.875rem;
1653 line-height: 1.5;
1654 overflow-wrap: break-word;
1655 }
1656 .markdown-body > :first-child { margin-top: 0; }
1657 .markdown-body > :last-child { margin-bottom: 0; }
1658 .markdown-body p,
1659 .markdown-body blockquote,
1660 .markdown-body ul,
1661 .markdown-body ol,
1662 .markdown-body dl,
1663 .markdown-body table,
1664 .markdown-body pre,
1665 .markdown-body details {
1666 margin-top: 0;
1667 margin-bottom: 1rem;
1668 }
1669 .markdown-body h1,
1670 .markdown-body h2 {
1671 margin-top: 1.5rem;
1672 margin-bottom: 1rem;
1673 padding-bottom: 0.3em;
1674 border-bottom: 1px solid var(--border-default);
1675 }
1676 .markdown-body h1 { font-size: 2em; }
1677 .markdown-body h2 { font-size: 1.5em; }
1678 .markdown-body h3 { font-size: 1.25em; }
1679 .markdown-body h1,
1680 .markdown-body h2,
1681 .markdown-body h3,
1682 .markdown-body h4,
1683 .markdown-body h5,
1684 .markdown-body h6 {
1685 font-weight: 600;
1686 line-height: 1.25;
1687 }
1688 .markdown-body hr {
1689 height: 0.25em;
1690 padding: 0;
1691 margin: 1.5rem 0;
1692 background: var(--border-default);
1693 border: 0;
1694 }
1695 .markdown-body img {
1696 max-width: 100%;
1697 box-sizing: content-box;
1698 }
1699 .markdown-body [align="center"] { text-align: center; }
1700 .markdown-body [align="right"] { text-align: right; }
1701 .markdown-body [align="left"] { text-align: left; }
1702 .shithub-readme code { font-family: monospace; padding: 0.1em 0.3em; background: var(--canvas-default); border-radius: 3px; }
1703 .shithub-readme pre code { padding: 0; background: none; }
1704 .shithub-readme-plain { white-space: pre-wrap; }
1705
1706 @media (max-width: 900px) {
1707 .shithub-repo-header-inner { align-items: flex-start; flex-direction: column; }
1708 .shithub-repo-content-grid { grid-template-columns: 1fr; }
1709 .shithub-tree-commit { align-items: flex-start; flex-direction: column; }
1710 }
1711
1712 .shithub-blob-meta { color: var(--fg-muted); font-size: 0.85rem; margin-right: 0.5rem; }
1713 /* Blob source: a row-per-line <table>. We render the gutter + code
1714 ourselves and feed Chroma only token spans (no <pre>, no <table>)
1715 so the chrome is consistent across lexers and the no-lexer fallback,
1716 per the S33 viewer refactor. Forgejo / Gitea use the same shape.
1717 The reasoning is robustness: chroma's own table mode has rules we
1718 can't fully override (cell padding, line-number `<a>` styles), and
1719 they leak whenever a lexer changes its emit shape. Owning the table
1720 makes the layout immune to that drift. */
1721 .shithub-blob-source .chroma { padding: 0; background: var(--canvas-default); }
1722 .shithub-blob-source .chroma a { color: inherit; text-decoration: none; }
1723 .shithub-blob-lines {
1724 width: 100%;
1725 border-collapse: collapse;
1726 border-spacing: 0;
1727 margin: 0;
1728 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
1729 font-size: 0.825rem;
1730 line-height: 20px;
1731 tab-size: 4;
1732 }
1733 /* Gutter cell. width:1% + white-space:nowrap forces shrink-to-fit:
1734 the cell sizes itself to the max line-number width and no wider.
1735 text-align:right keeps the digit flush against the divider. */
1736 .shithub-blob-lines td.shithub-blob-lnum {
1737 width: 1%;
1738 min-width: 2.5rem;
1739 padding: 0 12px;
1740 background: var(--canvas-subtle);
1741 border-right: 1px solid var(--border-default);
1742 color: var(--fg-muted);
1743 text-align: right;
1744 user-select: none;
1745 white-space: nowrap;
1746 vertical-align: top;
1747 }
1748 .shithub-blob-lines td.shithub-blob-lnum a {
1749 color: inherit;
1750 display: block;
1751 }
1752 /* Code cell. white-space:pre preserves indentation; the wrapper
1753 handles horizontal scroll for long lines. */
1754 .shithub-blob-lines td.shithub-blob-lcode {
1755 padding: 0 12px;
1756 vertical-align: top;
1757 white-space: pre;
1758 }
1759 .shithub-blob-lines td.shithub-blob-lcode .shithub-blob-line {
1760 display: inline-block;
1761 min-width: 100%;
1762 }
1763 /* Hover surfaces the row; :target highlights the line referenced by
1764 #L<n> in the URL (browsers handle scrolling). */
1765 .shithub-blob-lines tr:hover td.shithub-blob-lcode {
1766 background: var(--canvas-subtle);
1767 }
1768 .shithub-blob-lines tr:target td.shithub-blob-lcode,
1769 .shithub-blob-lines tr:target td.shithub-blob-lnum {
1770 background: var(--accent-subtle, #fff8c5);
1771 }
1772 .shithub-blob-too-large, .shithub-blob-binary {
1773 padding: 1rem;
1774 border: 1px dashed var(--border-default);
1775 border-radius: 6px;
1776 text-align: center;
1777 color: var(--fg-muted);
1778 }
1779 .shithub-blob-image { text-align: center; padding: 1rem; background: var(--canvas-subtle); border-radius: 6px; }
1780 .shithub-blob-image img { max-width: 100%; max-height: 80vh; }
1781 .shithub-blob-source { overflow-x: auto; }
1782 .shithub-blob-source .chroma { font-size: 0.85rem; }
1783 .shithub-blob-markdown { padding: 1rem; }
1784 .shithub-button-disabled { opacity: 0.5; pointer-events: none; }
1785
1786 .shithub-finder-form { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }
1787 .shithub-finder-form input { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; flex: 1; }
1788 .shithub-finder-results { list-style: none; padding: 0; }
1789 .shithub-finder-results li { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-default); font-family: monospace; font-size: 0.875rem; }
1790
1791 /* ========== Commits + Commit + Blame (S18) ========== */
1792 .shithub-avatar-sm {
1793 display: inline-block;
1794 width: 20px;
1795 height: 20px;
1796 border-radius: 50%;
1797 vertical-align: middle;
1798 margin-right: 0.4rem;
1799 }
1800 .shithub-identicon {
1801 background: linear-gradient(135deg, #cce, #ecc);
1802 }
1803 .shithub-commits-filter {
1804 display: flex;
1805 gap: 0.5rem;
1806 align-items: end;
1807 flex-wrap: wrap;
1808 margin: 1rem 0;
1809 }
1810 .shithub-commits-filter input {
1811 padding: 0.3rem 0.5rem;
1812 border: 1px solid var(--border-default);
1813 border-radius: 6px;
1814 font: inherit;
1815 }
1816 .shithub-commits-list { list-style: none; padding: 0; margin: 0; }
1817 .shithub-commits-row {
1818 display: grid;
1819 grid-template-columns: 220px 1fr;
1820 gap: 0.75rem;
1821 padding: 0.6rem 0.5rem;
1822 border-bottom: 1px solid var(--border-default);
1823 align-items: start;
1824 }
1825 .shithub-commits-author { color: var(--fg-muted); font-size: 0.875rem; }
1826 .shithub-commits-meta { display: flex; flex-direction: column; gap: 0.2rem; }
1827 .shithub-commits-subject { color: var(--fg-default); font-weight: 500; }
1828 .shithub-commits-sha { color: var(--fg-muted); font-size: 0.8rem; }
1829 .shithub-pager { display: flex; gap: 1rem; padding: 1rem 0; }
1830
1831 .shithub-commit-view { max-width: 64rem; margin: 1.5rem auto; padding: 0 1rem; }
1832 .shithub-commit-meta {
1833 margin-top: 1rem;
1834 padding: 1rem;
1835 border: 1px solid var(--border-default);
1836 border-radius: 6px;
1837 background: var(--canvas-subtle);
1838 }
1839 .shithub-commit-subject { margin: 0 0 0.5rem; font-size: 1.2rem; }
1840 .shithub-commit-body { margin: 0.75rem 0; font-family: monospace; font-size: 0.9rem; line-height: 1.4; }
1841 .shithub-commit-people { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.75rem 0; font-size: 0.875rem; }
1842 .shithub-commit-actor { display: inline-flex; align-items: center; gap: 0.4rem; }
1843 .shithub-commit-role { color: var(--fg-muted); font-weight: 500; }
1844 .shithub-commit-refs { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; font-size: 0.875rem; }
1845 .shithub-commit-refs dt { color: var(--fg-muted); }
1846 .shithub-commit-refs dd { margin: 0; font-family: monospace; }
1847
1848 .shithub-commit-files { margin-top: 1.5rem; }
1849 .shithub-commit-files-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
1850 .shithub-commit-files-table th, .shithub-commit-files-table td {
1851 padding: 0.4rem 0.6rem;
1852 border-bottom: 1px solid var(--border-default);
1853 text-align: left;
1854 }
1855 .shithub-num-col { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
1856 .shithub-add { color: #22863a; }
1857 .shithub-del { color: #cb2431; }
1858 .shithub-status-A { color: #22863a; font-weight: 600; }
1859 .shithub-status-M { color: #b08800; font-weight: 600; }
1860 .shithub-status-D { color: #cb2431; font-weight: 600; }
1861 .shithub-status-R { color: #6f42c1; font-weight: 600; }
1862 .shithub-status-C { color: #0366d6; font-weight: 600; }
1863
1864 .shithub-blame-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 0.85rem; }
1865 .shithub-blame-chunk-header td {
1866 padding: 0.4rem 0.6rem;
1867 background: var(--canvas-subtle);
1868 border-top: 1px solid var(--border-default);
1869 font-family: var(--shithub-font-default, sans-serif);
1870 font-size: 0.8rem;
1871 color: var(--fg-muted);
1872 display: flex;
1873 gap: 0.4rem;
1874 align-items: center;
1875 }
1876 .shithub-blame-lineno { width: 50px; text-align: right; padding-right: 0.5rem; color: var(--fg-muted); }
1877 .shithub-blame-lineno a { color: inherit; }
1878 .shithub-blame-content pre { margin: 0; white-space: pre; }
1879 .shithub-blame-too-large {
1880 padding: 1rem;
1881 border: 1px dashed var(--border-default);
1882 border-radius: 6px;
1883 text-align: center;
1884 color: var(--fg-muted);
1885 }
1886
1887 /* ========== Diff renderer (S19) ========== */
1888 .shithub-commit-files-head {
1889 display: flex;
1890 align-items: center;
1891 justify-content: space-between;
1892 margin-bottom: 0.5rem;
1893 }
1894 .shithub-diff-toggles { display: flex; gap: 0.25rem; }
1895 .shithub-diff-body { margin-top: 1rem; }
1896 .shithub-diff-file {
1897 margin-top: 1rem;
1898 border: 1px solid var(--border-default);
1899 border-radius: 6px;
1900 overflow: hidden;
1901 }
1902 .shithub-diff-file-head {
1903 display: flex;
1904 align-items: center;
1905 justify-content: space-between;
1906 gap: 0.75rem;
1907 padding: 0.5rem 0.75rem;
1908 background: var(--canvas-subtle);
1909 border-bottom: 1px solid var(--border-default);
1910 font-size: 0.875rem;
1911 }
1912 .shithub-diff-file-action { color: var(--fg-muted); font-style: italic; }
1913 .shithub-diff-binary, .shithub-diff-image, .shithub-diff-empty, .shithub-diff-truncated {
1914 padding: 1rem;
1915 text-align: center;
1916 color: var(--fg-muted);
1917 }
1918 .shithub-diff-file-toolarge { padding: 0.5rem 0.75rem; }
1919 .shithub-diff-file-toolarge > summary { cursor: pointer; color: var(--fg-muted); }
1920 .shithub-diff-table {
1921 width: 100%;
1922 border-collapse: collapse;
1923 font-family: monospace;
1924 font-size: 0.85rem;
1925 table-layout: fixed;
1926 }
1927 .shithub-diff-table td { padding: 0 0.5rem; vertical-align: top; }
1928 .shithub-diff-table pre { margin: 0; white-space: pre; }
1929 .shithub-diff-lineno {
1930 width: 50px;
1931 text-align: right;
1932 color: var(--fg-muted);
1933 user-select: none;
1934 background: var(--canvas-subtle);
1935 }
1936 .shithub-diff-content { width: auto; }
1937 .shithub-diff-add { background: rgba(46, 160, 67, 0.10); }
1938 .shithub-diff-del { background: rgba(248, 81, 73, 0.10); }
1939 .shithub-diff-add .shithub-diff-content { background: rgba(46, 160, 67, 0.05); }
1940 .shithub-diff-del .shithub-diff-content { background: rgba(248, 81, 73, 0.05); }
1941 .shithub-diff-pad { background: var(--canvas-subtle); }
1942 .shithub-diff-hunk-head td {
1943 padding: 0.4rem 0.75rem;
1944 background: var(--canvas-default);
1945 border-top: 1px solid var(--border-default);
1946 border-bottom: 1px solid var(--border-default);
1947 color: var(--fg-muted);
1948 }
1949 .shithub-diff-split td.shithub-diff-content {
1950 width: 50%;
1951 border-left: 1px solid var(--border-default);
1952 }
1953
1954 /* ========== Branches/Tags/Compare/Settings (S20) ========== */
1955 .shithub-branches, .shithub-tags, .shithub-compare, .shithub-settings-branches {
1956 max-width: 64rem;
1957 margin: 1.5rem auto;
1958 padding: 0 1rem;
1959 }
1960 .shithub-branches-filter { display: flex; gap: 0.4rem; }
1961 .shithub-branches-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
1962 .shithub-branches-table th, .shithub-branches-table td {
1963 padding: 0.5rem 0.75rem;
1964 text-align: left;
1965 border-bottom: 1px solid var(--border-default);
1966 }
1967 .shithub-branches-subject { color: var(--fg-default); }
1968 .shithub-compare-summary { padding: 0.75rem 1rem; background: var(--canvas-subtle); border-radius: 6px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
1969 .shithub-compare-empty { padding: 1.5rem; text-align: center; color: var(--fg-muted); border: 1px dashed var(--border-default); border-radius: 6px; }
1970 .shithub-compare-commits { margin-top: 1.5rem; }
1971 .shithub-settings-branches form label { display: block; margin: 0.5rem 0; }
1972 .shithub-settings-branches form input[type=text],
1973 .shithub-settings-branches form select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; min-width: 280px; }
1974
1975 /* ========== Issues / Labels / Milestones (S21) ========== */
1976 .shithub-issues, .shithub-issue-view, .shithub-issue-new, .shithub-labels, .shithub-milestones {
1977 margin: 0;
1978 padding: 0;
1979 }
1980 .shithub-issues-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
1981 .shithub-issues-actions { display: flex; gap: 0.4rem; }
1982 .shithub-issues-filter { display: flex; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); margin: 1rem 0; }
1983 .shithub-issues-tab { color: var(--fg-muted); padding: 0.25rem 0; border-bottom: 2px solid transparent; }
1984 .shithub-issues-tab-active { color: var(--fg-default); border-bottom-color: var(--accent-emphasis, #0969da); font-weight: 600; }
1985 .shithub-issues-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; vertical-align: middle; margin-right: 0.25rem; }
1986 .shithub-issues-dot-open { background: #1a7f37; }
1987 .shithub-issues-dot-closed { background: #8250df; }
1988 .shithub-issues-list { list-style: none; padding: 0; margin: 0; }
1989 .shithub-issues-row {
1990 display: flex; gap: 0.75rem; align-items: flex-start;
1991 padding: 0.75rem 0.5rem;
1992 border-bottom: 1px solid var(--border-default);
1993 }
1994 .shithub-issues-state { font-size: 1.1rem; line-height: 1.2; }
1995 .shithub-issues-state-open { color: #1a7f37; }
1996 .shithub-issues-state-closed { color: #8250df; }
1997 .shithub-issues-body { flex: 1; }
1998 .shithub-issues-title { font-weight: 600; color: var(--fg-default); }
1999 .shithub-issues-title:hover { color: var(--accent-emphasis, #0969da); }
2000 .shithub-issues-meta { color: var(--fg-muted); font-size: 0.85rem; margin-top: 0.2rem; }
2001 .shithub-issues-assignees { font-size: 0.85rem; }
2002 .shithub-issues-empty { color: var(--fg-muted); padding: 2rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
2003 .shithub-issue-num { color: var(--fg-muted); font-weight: 400; margin-left: 0.5rem; }
2004 .shithub-issue-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--border-default); padding-bottom: 0.75rem; }
2005 .shithub-issue-title { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin: 0; }
2006 .shithub-issue-head-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
2007 .shithub-issue-meta { color: var(--fg-muted); margin: 0.75rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
2008 .shithub-issue-meta .shithub-pill, .shithub-comment-form .shithub-button, .shithub-sidebar-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; }
2009 .shithub-issue-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; }
2010 @media (max-width: 900px) { .shithub-issue-grid { grid-template-columns: 1fr; } }
2011 .shithub-comment {
2012 border: 1px solid var(--border-default);
2013 border-radius: 6px;
2014 margin-bottom: 1rem;
2015 background: var(--canvas-default);
2016 }
2017 .shithub-comment-head {
2018 padding: 0.5rem 0.75rem;
2019 background: var(--canvas-subtle);
2020 border-bottom: 1px solid var(--border-default);
2021 font-size: 0.9rem;
2022 color: var(--fg-muted);
2023 }
2024 .shithub-comment-body { padding: 0.75rem; }
2025 .shithub-event {
2026 color: var(--fg-muted);
2027 font-size: 0.85rem;
2028 display: flex;
2029 align-items: center;
2030 gap: 0.5rem;
2031 padding: 0.55rem 0;
2032 margin: 0 0 1rem 1.2rem;
2033 position: relative;
2034 }
2035 .shithub-event::before {
2036 content: "";
2037 position: absolute;
2038 top: -1rem;
2039 bottom: -1rem;
2040 left: 0.6rem;
2041 border-left: 2px solid var(--border-default);
2042 z-index: 0;
2043 }
2044 .shithub-event-icon {
2045 width: 1.3rem;
2046 height: 1.3rem;
2047 border: 1px solid var(--border-default);
2048 border-radius: 50%;
2049 background: var(--canvas-default);
2050 color: var(--fg-muted);
2051 display: inline-flex;
2052 align-items: center;
2053 justify-content: center;
2054 position: relative;
2055 z-index: 1;
2056 flex: 0 0 auto;
2057 }
2058 .shithub-event-icon svg { width: 0.8rem; height: 0.8rem; }
2059 .shithub-event-linked .shithub-event-icon { color: var(--fg-muted); }
2060 .shithub-event a { font-weight: 600; }
2061 .shithub-comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
2062 .shithub-comment-form textarea, .shithub-issue-form textarea, .shithub-issue-form input[type=text] {
2063 font: inherit; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; width: 100%;
2064 resize: vertical;
2065 }
2066 .shithub-issue-form { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
2067 .shithub-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
2068 .shithub-form-row span { font-weight: 600; font-size: 0.9rem; }
2069 .shithub-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
2070 .shithub-form-actions-start { justify-content: flex-start; }
2071 .shithub-issue-sidebar section { padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); position: relative; }
2072 .shithub-sidebar-heading { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
2073 .shithub-issue-sidebar h3 { font-size: 0.85rem; color: var(--fg-muted); margin: 0; }
2074 .shithub-sidebar-icon, .shithub-sidebar-editor > summary {
2075 color: var(--fg-muted);
2076 display: inline-flex;
2077 align-items: center;
2078 justify-content: center;
2079 width: 1.25rem;
2080 height: 1.25rem;
2081 cursor: pointer;
2082 }
2083 .shithub-sidebar-editor > summary { list-style: none; }
2084 .shithub-sidebar-editor > summary::-webkit-details-marker { display: none; }
2085 .shithub-popover {
2086 position: absolute;
2087 right: 0;
2088 top: 2rem;
2089 z-index: 20;
2090 min-width: 17rem;
2091 display: flex;
2092 flex-direction: column;
2093 gap: 0.55rem;
2094 padding: 0.75rem;
2095 background: var(--canvas-default);
2096 border: 1px solid var(--border-default);
2097 border-radius: 8px;
2098 box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
2099 }
2100 .shithub-popover input[type=text], .shithub-popover select {
2101 font: inherit;
2102 width: 100%;
2103 padding: 0.45rem 0.5rem;
2104 border: 1px solid var(--border-default);
2105 border-radius: 6px;
2106 background: var(--canvas-default);
2107 color: var(--fg-default);
2108 }
2109 .shithub-inline-form { display: inline; }
2110 .shithub-link-button {
2111 border: 0;
2112 padding: 0;
2113 background: transparent;
2114 color: var(--accent-emphasis, #0969da);
2115 font: inherit;
2116 cursor: pointer;
2117 display: inline-flex;
2118 gap: 0.35rem;
2119 align-items: center;
2120 }
2121 .shithub-sidebar-button { width: 100%; }
2122 .shithub-participant { display: inline-block; margin: 0 0.35rem 0.35rem 0; }
2123 .shithub-issue-actions form { margin: 0.25rem 0; }
2124 .shithub-issue-signedout { color: var(--fg-muted); padding: 1rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
2125 .shithub-label {
2126 display: inline-block;
2127 font-size: 0.75rem;
2128 padding: 0.1rem 0.5rem;
2129 border-radius: 1rem;
2130 color: #1f2328;
2131 font-weight: 500;
2132 margin: 0 0.15rem;
2133 }
2134 .shithub-label-pick { display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0; }
2135 .shithub-assignee-form { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.5rem; }
2136 .shithub-assignee-form input[type=text] { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; }
2137 .shithub-labels-list, .shithub-milestones-list { list-style: none; padding: 0; }
2138 .shithub-labels-row, .shithub-milestones-row {
2139 padding: 0.75rem 0;
2140 border-bottom: 1px solid var(--border-default);
2141 display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
2142 }
2143 .shithub-label-form, .shithub-milestone-form { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0; }
2144 .shithub-label-form input, .shithub-milestone-form input, .shithub-milestone-form textarea {
2145 padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
2146 }
2147 .shithub-button-danger { color: #cf222e; }
2148 .shithub-error { padding: 0.75rem; background: #ffebe9; border: 1px solid #ffcecb; border-radius: 6px; color: #82061e; margin-bottom: 1rem; }
2149 .shithub-muted { color: var(--fg-muted); }
2150
2151 /* ========== Pull Requests (S22) ========== */
2152 .shithub-pulls, .shithub-pull-view {
2153 max-width: 64rem;
2154 margin: 1.5rem auto;
2155 padding: 0 1rem;
2156 }
2157 .shithub-pull-head { margin-bottom: 0.75rem; }
2158 .shithub-pull-merged { background: #8250df22; color: #8250df; }
2159 .shithub-pull-tabs {
2160 display: flex; gap: 1.5rem;
2161 border-bottom: 1px solid var(--border-default);
2162 margin: 0.75rem 0 1rem;
2163 }
2164 .shithub-pull-tab {
2165 color: var(--fg-muted);
2166 padding: 0.4rem 0;
2167 border-bottom: 2px solid transparent;
2168 }
2169 .shithub-pull-tab-active {
2170 color: var(--fg-default);
2171 border-bottom-color: var(--accent-emphasis, #0969da);
2172 font-weight: 600;
2173 }
2174 .shithub-pull-grid { display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; }
2175 @media (max-width: 768px) { .shithub-pull-grid { grid-template-columns: 1fr; } }
2176 .shithub-pull-merge { padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 6px; }
2177 .shithub-pull-merge h3 { font-size: 0.85rem; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.5rem; }
2178 .shithub-pull-state-clean { color: #1a7f37; font-weight: 600; }
2179 .shithub-pull-state-dirty { color: #cf222e; font-weight: 600; }
2180 .shithub-pull-state-behind { color: #9a6700; }
2181 .shithub-pull-state-unknown { color: var(--fg-muted); }
2182 .shithub-pull-merge-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
2183 .shithub-pull-merge-form select { padding: 0.4rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit; }
2184 .shithub-pull-state-form { margin-top: 0.5rem; }
2185 .shithub-pull-refs { display: flex; gap: 0.4rem; align-items: flex-end; }
2186 .shithub-pull-refs label { flex: 1; }
2187 .shithub-pull-arrow { font-size: 1.4rem; padding: 0 0.4rem; align-self: center; }
2188 .shithub-pull-commits { list-style: none; padding: 0; }
2189 .shithub-pull-commits li {
2190 padding: 0.4rem 0; border-bottom: 1px solid var(--border-default);
2191 display: flex; gap: 0.6rem; align-items: baseline;
2192 }
2193
2194 /* ========== PR Reviews (S23) ========== */
2195 .shithub-pull-reviews, .shithub-pull-reviewers {
2196 border-top: 1px solid var(--border-default);
2197 padding: 0.6rem 0;
2198 }
2199 .shithub-pull-reviews h3, .shithub-pull-reviewers h3 {
2200 font-size: 0.85rem; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.4rem;
2201 }
2202 .shithub-pull-reviews-list, .shithub-pull-reviewers-list {
2203 list-style: none; padding: 0; margin: 0; font-size: 0.9rem;
2204 }
2205 .shithub-pull-reviews-list li { padding: 0.2rem 0; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: baseline; }
2206 .shithub-pull-review-state { font-weight: 600; }
2207 .shithub-pull-review-approve .shithub-pull-review-state { color: #1a7f37; }
2208 .shithub-pull-review-request_changes .shithub-pull-review-state { color: #cf222e; }
2209 .shithub-pull-review-comment .shithub-pull-review-state { color: var(--fg-muted); }
2210 .shithub-pull-review-dismissed { opacity: 0.5; text-decoration: line-through; }
2211 .shithub-pull-request-reviewer summary, .shithub-pull-submit-review summary {
2212 margin: 0.5rem 0 0.25rem;
2213 }
2214 .shithub-pull-review-form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0; }
2215 .shithub-pull-review-form textarea, .shithub-pull-review-form select {
2216 padding: 0.4rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
2217 }
2218 .shithub-pull-threads { margin-top: 1.5rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 6px; }
2219 .shithub-pull-thread-file { padding: 0.4rem 0; border-bottom: 1px solid var(--border-default); }
2220 .shithub-pull-thread-file:last-child { border-bottom: none; }
2221 .shithub-pull-thread-file summary { cursor: pointer; font-weight: 600; }
2222 .shithub-pull-thread { padding: 0.5rem; border-left: 3px solid var(--border-default); margin: 0.5rem 0; }
2223 .shithub-pull-thread-outdated { opacity: 0.6; border-left-color: #9a6700; }
2224 .shithub-pull-thread-resolved { opacity: 0.7; border-left-color: #1a7f37; }
2225 .shithub-pull-thread-actions { display: flex; gap: 0.3rem; margin-top: 0.4rem; flex-wrap: wrap; }
2226 .shithub-pull-thread-actions textarea, .shithub-pull-thread-actions input[type=text] {
2227 padding: 0.3rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
2228 }
2229 .shithub-pull-add-comment summary { margin-top: 0.5rem; }
2230 .shithub-pull-add-comment form { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0; }
2231 .shithub-pull-add-comment input, .shithub-pull-add-comment textarea {
2232 padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
2233 }
2234
2235 /* ========== PR Checks tab (S24) ========== */
2236 .shithub-pull-checks { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
2237 .shithub-pull-check-suite {
2238 border: 1px solid var(--border-default);
2239 border-radius: 6px;
2240 padding: 0.75rem;
2241 }
2242 .shithub-pull-check-suite h3 {
2243 display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
2244 font-size: 1rem; margin: 0 0 0.5rem;
2245 }
2246 .shithub-pull-check-app { font-family: var(--mono, monospace); font-size: 0.85rem; color: var(--fg-muted); }
2247 .shithub-pull-check-suite-status { font-size: 0.8rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--canvas-subtle); }
2248 .shithub-pull-check-runs { list-style: none; padding: 0; margin: 0; }
2249 .shithub-pull-check-run {
2250 display: flex; gap: 0.5rem; align-items: baseline;
2251 padding: 0.3rem 0; border-bottom: 1px solid var(--border-default);
2252 flex-wrap: wrap;
2253 }
2254 .shithub-pull-check-run:last-child { border-bottom: none; }
2255 .shithub-pull-check-status-completed { color: #1a7f37; }
2256 .shithub-pull-check-status-in_progress { color: #9a6700; }
2257 .shithub-pull-check-status-queued { color: var(--fg-muted); }
2258 .shithub-pull-check-status-pending { color: var(--fg-muted); }
2259 .shithub-pull-check-conclusion {
2260 font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px;
2261 text-transform: lowercase;
2262 }
2263 .shithub-pull-check-conclusion-success { background: #1a7f3722; color: #1a7f37; }
2264 .shithub-pull-check-conclusion-failure { background: #cf222e22; color: #cf222e; }
2265 .shithub-pull-check-conclusion-neutral { background: #d0d7de44; color: var(--fg-muted); }
2266 .shithub-pull-check-conclusion-cancelled,
2267 .shithub-pull-check-conclusion-skipped,
2268 .shithub-pull-check-conclusion-stale { color: var(--fg-muted); background: var(--canvas-subtle); }
2269 .shithub-pull-check-conclusion-timed_out { background: #9a670022; color: #9a6700; }
2270 .shithub-pull-check-conclusion-action_required { background: #cf222e22; color: #cf222e; font-weight: 600; }
2271
2272 /* S26 — stars / watchers / forks list pages */
2273 .shithub-social { max-width: 1012px; margin: 0 auto; padding: 1.5rem 0; }
2274 .shithub-social-subhead {
2275 display: flex;
2276 align-items: baseline;
2277 gap: 0.75rem;
2278 padding-bottom: 0.85rem;
2279 border-bottom: 1px solid var(--border-default);
2280 }
2281 .shithub-social-subhead h1 {
2282 margin: 0;
2283 font-size: 1.55rem;
2284 font-weight: 400;
2285 }
2286 .shithub-social-subhead p { margin: 0; color: var(--fg-muted); }
2287 .shithub-social-tabnav {
2288 display: flex;
2289 gap: 0.25rem;
2290 margin: 1rem 0;
2291 border-bottom: 1px solid var(--border-default);
2292 }
2293 .shithub-social-tabnav a,
2294 .shithub-social-tabnav span {
2295 display: inline-flex;
2296 align-items: center;
2297 gap: 0.35rem;
2298 padding: 0.55rem 0.85rem;
2299 color: var(--fg-default);
2300 border-bottom: 2px solid transparent;
2301 position: relative;
2302 bottom: -1px;
2303 }
2304 .shithub-social-tabnav a:hover { text-decoration: none; background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
2305 .shithub-social-tabnav .is-active { border-bottom-color: var(--accent-emphasis); font-weight: 600; }
2306 .shithub-social-tabnav .is-disabled { color: var(--fg-muted); }
2307 .shithub-social-list {
2308 list-style: none;
2309 padding: 0;
2310 margin: 1rem 0;
2311 border: 1px solid var(--border-default);
2312 border-radius: 6px;
2313 background: var(--canvas-default);
2314 }
2315 .shithub-social-list li {
2316 display: grid;
2317 grid-template-columns: 40px minmax(0, 1fr) auto;
2318 gap: 0.85rem;
2319 align-items: center;
2320 padding: 1rem;
2321 border-bottom: 1px solid var(--border-muted);
2322 }
2323 .shithub-social-list li:last-child { border-bottom: none; }
2324 .shithub-social-avatar,
2325 .shithub-social-avatar img {
2326 display: block;
2327 width: 40px;
2328 height: 40px;
2329 border-radius: 50%;
2330 }
2331 .shithub-social-avatar img { border: 1px solid var(--border-muted); }
2332 .shithub-social-person {
2333 min-width: 0;
2334 display: grid;
2335 gap: 0.1rem;
2336 }
2337 .shithub-social-person strong { font-size: 1rem; }
2338 .shithub-social-person span,
2339 .shithub-social-time,
2340 .shithub-social-meta {
2341 color: var(--fg-muted);
2342 font-size: 0.875rem;
2343 }
2344 .shithub-social-meta {
2345 display: flex;
2346 align-items: center;
2347 justify-content: end;
2348 gap: 0.75rem;
2349 flex-wrap: wrap;
2350 }
2351 .shithub-social-meta span {
2352 display: inline-flex;
2353 align-items: center;
2354 gap: 0.25rem;
2355 }
2356 .shithub-social-fork-badges {
2357 display: flex;
2358 gap: 0.35rem;
2359 flex-wrap: wrap;
2360 margin-top: 0.25rem;
2361 }
2362 .shithub-social-blank {
2363 margin: 1rem 0;
2364 padding: 2.5rem 1.5rem;
2365 border: 1px solid var(--border-default);
2366 border-radius: 6px;
2367 text-align: center;
2368 color: var(--fg-muted);
2369 }
2370 .shithub-social-blank svg {
2371 width: 24px;
2372 height: 24px;
2373 color: var(--fg-muted);
2374 margin-bottom: 0.75rem;
2375 }
2376 .shithub-social-blank h2 {
2377 margin: 0 0 0.4rem;
2378 color: var(--fg-default);
2379 font-size: 1.25rem;
2380 font-weight: 600;
2381 }
2382 .shithub-social-blank p {
2383 max-width: 520px;
2384 margin: 0 auto;
2385 }
2386 @media (max-width: 700px) {
2387 .shithub-social-list li {
2388 grid-template-columns: 40px minmax(0, 1fr);
2389 }
2390 .shithub-social-time,
2391 .shithub-social-meta {
2392 grid-column: 2;
2393 justify-content: start;
2394 }
2395 }
2396 .shithub-meta { color: var(--fg-muted); margin: 0.25rem 0 1rem; }
2397 .shithub-empty { color: var(--fg-muted); padding: 1rem; }
2398 .shithub-pagination {
2399 display: flex; gap: 0.5rem; padding: 1rem 0;
2400 }
2401
2402 /* S28 — search */
2403 .shithub-nav-search {
2404 position: relative;
2405 flex: 1 1 22rem;
2406 display: flex;
2407 align-items: center;
2408 max-width: 32rem;
2409 margin: 0 1rem;
2410 }
2411 .shithub-nav-search-icon {
2412 position: absolute;
2413 left: 0.65rem;
2414 top: 50%;
2415 transform: translateY(-50%);
2416 color: var(--fg-muted);
2417 line-height: 0;
2418 pointer-events: none;
2419 }
2420 .shithub-nav-search input {
2421 width: 100%;
2422 min-height: 2rem;
2423 padding: 0.35rem 2rem 0.35rem 2rem;
2424 border: 1px solid var(--border-default);
2425 border-radius: 6px;
2426 background: var(--canvas-default);
2427 color: var(--fg-default);
2428 font-size: 0.85rem;
2429 }
2430 .shithub-nav-search-key {
2431 position: absolute;
2432 right: 0.55rem;
2433 top: 50%;
2434 transform: translateY(-50%);
2435 min-width: 1rem;
2436 padding: 0 0.25rem;
2437 border: 1px solid var(--border-default);
2438 border-radius: 4px;
2439 color: var(--fg-muted);
2440 font-size: 0.75rem;
2441 line-height: 1.15rem;
2442 text-align: center;
2443 pointer-events: none;
2444 }
2445 .shithub-search-page {
2446 padding: 1.5rem 1rem 3rem;
2447 }
2448 .shithub-search-shell {
2449 display: grid;
2450 grid-template-columns: 220px minmax(0, 1fr);
2451 gap: 2rem;
2452 max-width: 1280px;
2453 margin: 0 auto;
2454 }
2455 .shithub-search-sidebar {
2456 padding-top: 3.35rem;
2457 }
2458 .shithub-search-sidebar h2 {
2459 margin: 0 0 0.55rem;
2460 font-size: 0.875rem;
2461 font-weight: 600;
2462 }
2463 .shithub-search-filter-list {
2464 display: flex;
2465 flex-direction: column;
2466 }
2467 .shithub-search-filter {
2468 display: flex;
2469 align-items: center;
2470 justify-content: space-between;
2471 gap: 0.75rem;
2472 min-height: 2.25rem;
2473 padding: 0.4rem 0.65rem;
2474 border-radius: 6px;
2475 color: var(--fg-default);
2476 font-size: 0.875rem;
2477 }
2478 .shithub-search-filter:hover {
2479 background: var(--canvas-subtle);
2480 text-decoration: none;
2481 }
2482 .shithub-search-filter.is-selected {
2483 background: var(--canvas-subtle);
2484 font-weight: 600;
2485 }
2486 .shithub-search-filter.is-selected::before {
2487 content: "";
2488 width: 4px;
2489 align-self: stretch;
2490 margin: -0.4rem 0 -0.4rem -0.65rem;
2491 border-radius: 6px 0 0 6px;
2492 background: var(--accent-emphasis);
2493 }
2494 .shithub-search-filter-label {
2495 display: inline-flex;
2496 align-items: center;
2497 gap: 0.45rem;
2498 min-width: 0;
2499 }
2500 .shithub-search-filter-label svg {
2501 color: var(--fg-muted);
2502 flex: 0 0 auto;
2503 }
2504 .shithub-search-filter-count {
2505 color: var(--fg-muted);
2506 font-size: 0.75rem;
2507 }
2508 .shithub-search-results {
2509 min-width: 0;
2510 }
2511 .shithub-search-query-form {
2512 display: flex;
2513 gap: 0.5rem;
2514 margin-bottom: 1.25rem;
2515 }
2516 .shithub-search-query-form input[type=text] {
2517 flex: 1;
2518 min-height: 2.35rem;
2519 padding: 0.45rem 0.75rem;
2520 border: 1px solid var(--border-default);
2521 border-radius: 6px;
2522 background: var(--canvas-default);
2523 color: var(--fg-default);
2524 font-size: 0.875rem;
2525 }
2526 .shithub-search-results-head {
2527 display: flex;
2528 align-items: center;
2529 justify-content: space-between;
2530 gap: 1rem;
2531 padding-bottom: 0.9rem;
2532 border-bottom: 1px solid var(--border-default);
2533 }
2534 .shithub-search-results-head h1 {
2535 margin: 0;
2536 font-size: 1.25rem;
2537 line-height: 1.3;
2538 }
2539 .shithub-search-sort {
2540 position: relative;
2541 flex: 0 0 auto;
2542 }
2543 .shithub-search-sort > summary {
2544 list-style: none;
2545 display: inline-flex;
2546 align-items: center;
2547 min-height: 2rem;
2548 padding: 0.35rem 0.75rem;
2549 border: 1px solid var(--border-default);
2550 border-radius: 6px;
2551 background: var(--canvas-subtle);
2552 color: var(--fg-default);
2553 cursor: pointer;
2554 font-size: 0.875rem;
2555 font-weight: 500;
2556 }
2557 .shithub-search-sort > summary::-webkit-details-marker { display: none; }
2558 .shithub-search-sort > div {
2559 position: absolute;
2560 right: 0;
2561 top: calc(100% + 0.4rem);
2562 z-index: 20;
2563 min-width: 190px;
2564 padding: 0.35rem 0;
2565 border: 1px solid var(--border-default);
2566 border-radius: 6px;
2567 background: var(--canvas-default);
2568 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
2569 }
2570 .shithub-search-sort span {
2571 display: block;
2572 padding: 0.45rem 0.75rem;
2573 font-size: 0.875rem;
2574 }
2575 .shithub-search-result-list {
2576 list-style: none;
2577 padding: 0;
2578 margin: 0;
2579 }
2580 .shithub-search-result {
2581 display: flex;
2582 gap: 0.75rem;
2583 justify-content: space-between;
2584 padding: 1rem 0;
2585 border-bottom: 1px solid var(--border-default);
2586 }
2587 .shithub-search-result-main {
2588 min-width: 0;
2589 }
2590 .shithub-search-result h2 {
2591 display: flex;
2592 align-items: center;
2593 gap: 0.45rem;
2594 margin: 0;
2595 font-size: 1rem;
2596 line-height: 1.35;
2597 font-weight: 600;
2598 }
2599 .shithub-search-result h2 svg {
2600 flex: 0 0 auto;
2601 color: var(--fg-muted);
2602 }
2603 .shithub-search-result p {
2604 margin: 0.35rem 0 0;
2605 color: var(--fg-default);
2606 font-size: 0.875rem;
2607 }
2608 .shithub-search-result-path {
2609 color: var(--fg-muted) !important;
2610 }
2611 .shithub-search-avatar,
2612 .shithub-search-user-avatar {
2613 border-radius: 50%;
2614 background: var(--canvas-subtle);
2615 flex: 0 0 auto;
2616 }
2617 .shithub-search-result-meta {
2618 display: flex;
2619 gap: 0.5rem;
2620 flex-wrap: wrap;
2621 align-items: center;
2622 padding: 0;
2623 margin: 0.65rem 0 0;
2624 color: var(--fg-muted);
2625 list-style: none;
2626 font-size: 0.75rem;
2627 }
2628 .shithub-search-result-meta li {
2629 display: inline-flex;
2630 align-items: center;
2631 gap: 0.25rem;
2632 }
2633 .shithub-search-result-meta li + li::before {
2634 content: "";
2635 width: 3px;
2636 height: 3px;
2637 margin-right: 0.15rem;
2638 border-radius: 50%;
2639 background: var(--fg-muted);
2640 opacity: 0.7;
2641 }
2642 .shithub-search-star {
2643 align-self: flex-start;
2644 color: var(--fg-default);
2645 border-color: var(--border-default);
2646 background: var(--canvas-subtle);
2647 }
2648 .shithub-search-state {
2649 display: inline-flex;
2650 align-items: center;
2651 line-height: 0;
2652 }
2653 .shithub-search-state-open svg { color: var(--success-fg); }
2654 .shithub-search-state-closed svg { color: #8250df; }
2655 .shithub-search-state-pr svg { color: var(--accent-fg); }
2656 .shithub-search-user-result {
2657 justify-content: flex-start;
2658 }
2659 .shithub-search-code-preview {
2660 margin: 0.75rem 0 0;
2661 padding: 0.65rem 0.75rem;
2662 border: 1px solid var(--border-default);
2663 border-radius: 6px;
2664 background: var(--canvas-subtle);
2665 color: var(--fg-default);
2666 overflow-x: auto;
2667 }
2668 .shithub-search-code-preview code {
2669 padding: 0;
2670 background: transparent;
2671 }
2672 .shithub-search-empty,
2673 .shithub-search-blank {
2674 padding: 2rem 0;
2675 color: var(--fg-muted);
2676 }
2677 .shithub-search-blank h1 {
2678 margin: 0 0 0.4rem;
2679 color: var(--fg-default);
2680 font-size: 1.25rem;
2681 }
2682 .shithub-search-blank p {
2683 margin: 0;
2684 }
2685 .shithub-search-pagination {
2686 display: flex;
2687 justify-content: center;
2688 gap: 0.5rem;
2689 padding: 1.5rem 0 0;
2690 }
2691 .shithub-quick-dropdown { padding: 0.5rem; }
2692 .shithub-quick-section { padding: 0.25rem 0; border-bottom: 1px solid var(--border-default); }
2693 .shithub-quick-section:last-of-type { border-bottom: none; }
2694 .shithub-quick-section h3 { font-size: 0.7rem; text-transform: uppercase; color: var(--fg-muted); margin: 0.25rem 0; }
2695 .shithub-quick-section ul { list-style: none; padding: 0; margin: 0; }
2696 .shithub-quick-section li { padding: 0.25rem 0; }
2697 .shithub-quick-footer { padding: 0.5rem 0; border-top: 1px solid var(--border-default); text-align: center; }
2698 @media (max-width: 760px) {
2699 .shithub-nav-search {
2700 order: 3;
2701 flex-basis: 100%;
2702 max-width: none;
2703 margin: 0;
2704 }
2705 .shithub-search-page {
2706 padding: 1rem;
2707 }
2708 .shithub-search-shell {
2709 grid-template-columns: 1fr;
2710 gap: 1rem;
2711 }
2712 .shithub-search-sidebar {
2713 padding-top: 0;
2714 }
2715 .shithub-search-filter-list {
2716 flex-direction: row;
2717 gap: 0.25rem;
2718 overflow-x: auto;
2719 padding-bottom: 0.25rem;
2720 }
2721 .shithub-search-filter {
2722 flex: 0 0 auto;
2723 }
2724 .shithub-search-filter.is-selected::before {
2725 display: none;
2726 }
2727 .shithub-search-query-form,
2728 .shithub-search-results-head,
2729 .shithub-search-result {
2730 align-items: stretch;
2731 flex-direction: column;
2732 }
2733 .shithub-search-star {
2734 align-self: flex-start;
2735 }
2736 }
2737
2738 /* S34 — admin impersonation banner. Sticky-top, loud red so the
2739 admin can't lose track of "I am viewing as someone else right
2740 now." Position: fixed-on-scroll keeps it visible no matter where
2741 on the page they navigate. */
2742 .shithub-imp-banner {
2743 position: sticky;
2744 top: 0;
2745 z-index: 100;
2746 background: var(--danger-fg);
2747 color: #ffffff;
2748 padding: 0.5rem 1rem;
2749 text-align: center;
2750 font-size: 0.875rem;
2751 }
2752 .shithub-imp-banner .shithub-button {
2753 background: rgba(0, 0, 0, 0.25);
2754 color: #ffffff;
2755 border: 1px solid rgba(255, 255, 255, 0.4);
2756 }
2757 .shithub-imp-write { background: #ffd33d; color: #1a1f24; padding: 0 0.4em; border-radius: 4px; font-weight: 600; }
2758 .shithub-imp-read { background: rgba(255, 255, 255, 0.2); padding: 0 0.4em; border-radius: 4px; }