CSS · 75837 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 { display: flex; gap: 0.5rem; align-items: center; }
1004 .shithub-code-primary-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
1005 .shithub-code-count { color: var(--fg-muted); display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
1006
1007 .shithub-ref-switcher { position: relative; }
1008 .shithub-ref-switcher > summary {
1009 list-style: none;
1010 display: inline-flex;
1011 align-items: center;
1012 gap: 0.35rem;
1013 padding: 0.3rem 0.7rem;
1014 border: 1px solid var(--border-default);
1015 border-radius: 6px;
1016 cursor: pointer;
1017 font-size: 0.875rem;
1018 }
1019 .shithub-ref-switcher > summary::-webkit-details-marker { display: none; }
1020 .shithub-ref-panel {
1021 position: absolute;
1022 z-index: 30;
1023 top: calc(100% + 0.4rem);
1024 left: 0;
1025 min-width: 220px;
1026 max-height: 360px;
1027 overflow-y: auto;
1028 background: var(--canvas-default);
1029 border: 1px solid var(--border-default);
1030 border-radius: 6px;
1031 padding: 0.5rem;
1032 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
1033 }
1034 .shithub-ref-panel a {
1035 display: block;
1036 padding: 0.3rem 0.4rem;
1037 color: var(--fg-default);
1038 font-size: 0.875rem;
1039 }
1040 .shithub-ref-panel strong { display: block; margin: 0.4rem 0 0.2rem; font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; }
1041
1042 .shithub-clone-dropdown { position: relative; }
1043 .shithub-clone-dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
1044 .shithub-clone-dropdown > summary::-webkit-details-marker { display: none; }
1045 .shithub-clone-panel {
1046 position: absolute;
1047 z-index: 30;
1048 top: calc(100% + 0.4rem);
1049 right: 0;
1050 min-width: 320px;
1051 background: var(--canvas-default);
1052 border: 1px solid var(--border-default);
1053 border-radius: 6px;
1054 padding: 0.75rem;
1055 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
1056 }
1057 .shithub-clone-row + .shithub-clone-row { margin-top: 0.6rem; }
1058 .shithub-clone-row label { display: block; font-size: 0.75rem; color: var(--fg-muted); margin-bottom: 0.25rem; }
1059 .shithub-clone-input { display: flex; gap: 0.4rem; }
1060 .shithub-clone-input input {
1061 flex: 1;
1062 padding: 0.3rem 0.5rem;
1063 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1064 font-size: 0.8rem;
1065 border: 1px solid var(--border-default);
1066 border-radius: 4px;
1067 background: var(--canvas-subtle);
1068 color: var(--fg-default);
1069 }
1070 .shithub-clone-input button { padding: 0.3rem 0.5rem; }
1071 .shithub-clone-hint { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--fg-muted); }
1072
1073 /* Profile sub-nav (S30) — Overview / Repositories / Stars tabs. */
1074 .shithub-profile-tabs {
1075 display: flex;
1076 gap: 0.25rem;
1077 margin: 1rem 0 1.25rem;
1078 border-bottom: 1px solid var(--border-default);
1079 }
1080 .shithub-profile-tab {
1081 display: inline-flex;
1082 align-items: center;
1083 gap: 0.4rem;
1084 padding: 0.6rem 0.85rem;
1085 color: var(--fg-default);
1086 border-bottom: 2px solid transparent;
1087 font-size: 0.9rem;
1088 text-decoration: none;
1089 position: relative;
1090 bottom: -1px;
1091 }
1092 .shithub-profile-tab:hover { background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
1093 .shithub-profile-tab.is-active { border-bottom-color: var(--accent-emphasis, #fd8c73); font-weight: 600; }
1094 .shithub-tab-count {
1095 display: inline-block;
1096 padding: 0.05rem 0.45rem;
1097 border-radius: 999px;
1098 background: var(--canvas-subtle);
1099 border: 1px solid var(--border-default);
1100 font-size: 0.75rem;
1101 color: var(--fg-muted);
1102 }
1103
1104 /* Repositories tab list. */
1105 .shithub-repo-list { list-style: none; padding: 0; margin: 0; }
1106 .shithub-repo-list-row {
1107 padding: 1rem 0;
1108 border-bottom: 1px solid var(--border-default);
1109 }
1110 .shithub-repo-list-name { margin: 0; font-size: 1.1rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
1111 .shithub-repo-list-name a { color: var(--accent-fg, #4493f8); }
1112 .shithub-repo-list-meta { color: var(--fg-muted); font-size: 0.8rem; display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 0; }
1113 .shithub-pill-archived { background: #ffd35a; color: #3b2300; }
1114
1115 .shithub-repo-header { margin-bottom: 1.25rem; }
1116 .shithub-repo-header-inner {
1117 display: flex;
1118 align-items: center;
1119 justify-content: space-between;
1120 gap: 1rem;
1121 padding: 0.25rem 0 0.75rem;
1122 }
1123 .shithub-repo-page-title { font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
1124 .shithub-repo-page-title a { color: var(--accent-fg, #4493f8); }
1125 .shithub-repo-page-title .shithub-repo-name { font-weight: 600; }
1126 .shithub-repo-title-icon { color: var(--fg-muted); display: inline-flex; align-items: center; }
1127 .shithub-repo-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
1128 .shithub-repo-action {
1129 display: inline-flex;
1130 align-items: center;
1131 gap: 0.35rem;
1132 padding: 0.35rem 0.7rem;
1133 border: 1px solid var(--border-default);
1134 border-radius: 6px;
1135 color: var(--fg-default);
1136 background: var(--canvas-subtle);
1137 font-size: 0.875rem;
1138 font-weight: 600;
1139 }
1140 .shithub-repo-action span {
1141 color: var(--fg-muted);
1142 font-weight: 600;
1143 padding-left: 0.35rem;
1144 border-left: 1px solid var(--border-default);
1145 }
1146 .shithub-repo-subnav {
1147 display: flex;
1148 gap: 0.25rem;
1149 margin: 0;
1150 border-bottom: 1px solid var(--border-default);
1151 flex-wrap: wrap;
1152 }
1153 .shithub-repo-subnav-tab {
1154 display: inline-flex;
1155 align-items: center;
1156 gap: 0.4rem;
1157 padding: 0.55rem 0.85rem;
1158 color: var(--fg-default);
1159 border-bottom: 2px solid transparent;
1160 font-size: 0.9rem;
1161 text-decoration: none;
1162 position: relative;
1163 bottom: -1px;
1164 }
1165 .shithub-repo-subnav-tab:hover { background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
1166 .shithub-repo-subnav-tab.is-active { border-bottom-color: var(--accent-emphasis, #fd8c73); font-weight: 600; }
1167
1168 /* New-repo owner picker (S30) */
1169 .shithub-repo-new-owner-row { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
1170 .shithub-repo-new-owner select { padding: 0.4rem 0.5rem; }
1171 .shithub-repo-new-sep { font-size: 1.5rem; color: var(--fg-muted); padding-bottom: 0.4rem; }
1172
1173 .shithub-repo-content-grid {
1174 display: grid;
1175 grid-template-columns: minmax(0, 1fr) 296px;
1176 gap: 1.5rem;
1177 align-items: start;
1178 }
1179 .shithub-repo-main { min-width: 0; }
1180 .shithub-tree-panel {
1181 border: 1px solid var(--border-default);
1182 border-radius: 6px;
1183 background: var(--canvas-default);
1184 overflow: hidden;
1185 }
1186 .shithub-tree-commit {
1187 display: flex;
1188 justify-content: space-between;
1189 align-items: center;
1190 gap: 1rem;
1191 padding: 0.75rem 1rem;
1192 background: var(--canvas-subtle);
1193 border-bottom: 1px solid var(--border-default);
1194 font-size: 0.9rem;
1195 }
1196 .shithub-tree-commit-message,
1197 .shithub-tree-commit-meta {
1198 display: flex;
1199 align-items: center;
1200 gap: 0.5rem;
1201 min-width: 0;
1202 }
1203 .shithub-tree-commit-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1204 .shithub-tree-commit-meta { color: var(--fg-muted); flex: 0 0 auto; }
1205 .shithub-tree {
1206 width: 100%;
1207 border-collapse: collapse;
1208 font-size: 0.9rem;
1209 background: var(--canvas-default);
1210 }
1211 .shithub-tree td {
1212 padding: 0.5rem 0.75rem;
1213 border-bottom: 1px solid var(--border-default);
1214 }
1215 .shithub-tree tr:last-child td { border-bottom: 0; }
1216 .shithub-tree-icon { width: 24px; color: var(--fg-muted); }
1217 .shithub-tree-icon svg { display: block; }
1218 .shithub-tree-name a { color: var(--fg-default); }
1219 .shithub-tree-size { width: 100px; text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
1220 .shithub-tree-symlink, .shithub-tree-submodule { color: var(--fg-muted); font-style: italic; font-size: 0.8rem; }
1221
1222 /* Code-view layout: 2/3 main column + 1/3 About sidebar, mirroring
1223 the GitHub repo home layout. Single-column on narrow viewports so
1224 the sidebar drops below the tree on mobile. The S39 hardening pass
1225 replaces the previous single-centered-column layout that wasted
1226 the right rail. */
1227 .shithub-repo-with-sidebar {
1228 display: grid;
1229 grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
1230 gap: 1.5rem;
1231 align-items: start;
1232 }
1233 .shithub-repo-main {
1234 min-width: 0; /* let the grid item shrink so children with overflow-x scroll instead of forcing the column wider */
1235 }
1236 @media (max-width: 1024px) {
1237 .shithub-repo-with-sidebar {
1238 grid-template-columns: 1fr;
1239 }
1240 }
1241
1242 .shithub-repo-about {
1243 border-top: 1px solid var(--border-default);
1244 padding-top: 1rem;
1245 font-size: 0.875rem;
1246 }
1247 @media (min-width: 1025px) {
1248 .shithub-repo-about {
1249 border-top: none;
1250 padding-top: 0;
1251 }
1252 }
1253 .shithub-repo-about-heading {
1254 font-size: 1rem;
1255 font-weight: 600;
1256 margin: 0 0 0.5rem;
1257 display: flex;
1258 align-items: center;
1259 justify-content: space-between;
1260 }
1261 .shithub-repo-about-desc {
1262 margin: 0 0 0.75rem;
1263 color: var(--fg-default);
1264 line-height: 1.4;
1265 }
1266 .shithub-repo-about-empty {
1267 color: var(--fg-muted);
1268 font-style: italic;
1269 }
1270 .shithub-repo-about-topics {
1271 list-style: none;
1272 margin: 0 0 1rem;
1273 padding: 0;
1274 display: flex;
1275 flex-wrap: wrap;
1276 gap: 0.4rem;
1277 }
1278 .shithub-pill-topic {
1279 background: var(--accent-subtle, #ddf4ff);
1280 color: var(--accent-fg, #0969da);
1281 text-decoration: none;
1282 padding: 0.15rem 0.6rem;
1283 border-radius: 9999px;
1284 font-size: 0.8rem;
1285 }
1286 .shithub-pill-topic:hover { text-decoration: underline; }
1287
1288 .shithub-repo-about-meta {
1289 list-style: none;
1290 margin: 0 0 1.25rem;
1291 padding: 0;
1292 }
1293 .shithub-repo-about-meta li {
1294 display: flex;
1295 align-items: center;
1296 gap: 0.5rem;
1297 padding: 0.25rem 0;
1298 color: var(--fg-muted);
1299 }
1300 .shithub-repo-about-meta li svg { color: var(--fg-muted); flex-shrink: 0; }
1301 .shithub-repo-about-meta li span { color: var(--fg-default); }
1302
1303 .shithub-repo-about-section {
1304 border-top: 1px solid var(--border-default);
1305 padding-top: 0.75rem;
1306 margin-top: 0.75rem;
1307 }
1308 .shithub-repo-about-section h3 {
1309 font-size: 0.85rem;
1310 font-weight: 600;
1311 margin: 0 0 0.5rem;
1312 text-transform: none;
1313 }
1314 .shithub-repo-about-section p { margin: 0; }
1315
1316 .shithub-readme {
1317 margin-top: 1rem;
1318 padding: 0;
1319 border: 1px solid var(--border-default);
1320 border-radius: 6px;
1321 background: var(--canvas-default);
1322 overflow: hidden;
1323 }
1324 .shithub-readme-head {
1325 display: flex;
1326 align-items: center;
1327 gap: 0.45rem;
1328 padding: 0.75rem 1rem;
1329 border-bottom: 1px solid var(--border-default);
1330 font-weight: 600;
1331 }
1332 .shithub-readme-body { padding: 1rem; }
1333 .shithub-readme h1, .shithub-readme h2 { border-bottom: 1px solid var(--border-default); padding-bottom: 0.3rem; }
1334 .shithub-readme code { font-family: monospace; padding: 0.1em 0.3em; background: var(--canvas-default); border-radius: 3px; }
1335 .shithub-readme pre code { padding: 0; background: none; }
1336 .shithub-readme-plain { white-space: pre-wrap; }
1337
1338 .shithub-repo-about { font-size: 0.9rem; }
1339 .shithub-repo-about-heading {
1340 display: flex;
1341 justify-content: space-between;
1342 align-items: center;
1343 gap: 0.75rem;
1344 margin-bottom: 0.75rem;
1345 }
1346 .shithub-repo-about-heading h2 { font-size: 1rem; margin: 0; }
1347 .shithub-repo-about-heading a { color: var(--fg-muted); display: inline-flex; }
1348 .shithub-repo-about-desc { margin: 0 0 0.85rem; font-size: 1rem; line-height: 1.45; }
1349 .shithub-repo-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
1350 .shithub-topic {
1351 display: inline-flex;
1352 padding: 0.18rem 0.55rem;
1353 border-radius: 999px;
1354 background: color-mix(in srgb, var(--accent-fg, #4493f8) 12%, transparent);
1355 color: var(--accent-fg, #4493f8);
1356 font-size: 0.8rem;
1357 font-weight: 600;
1358 }
1359 .shithub-repo-about-list {
1360 list-style: none;
1361 padding: 0.85rem 0 0;
1362 margin: 0;
1363 border-top: 1px solid var(--border-default);
1364 color: var(--fg-muted);
1365 }
1366 .shithub-repo-about-list li {
1367 display: flex;
1368 align-items: center;
1369 gap: 0.55rem;
1370 margin: 0.55rem 0;
1371 }
1372 .shithub-repo-about-list svg { flex: 0 0 auto; }
1373 @media (max-width: 900px) {
1374 .shithub-repo-header-inner { align-items: flex-start; flex-direction: column; }
1375 .shithub-repo-content-grid { grid-template-columns: 1fr; }
1376 .shithub-tree-commit { align-items: flex-start; flex-direction: column; }
1377 }
1378
1379 .shithub-blob-meta { color: var(--fg-muted); font-size: 0.85rem; margin-right: 0.5rem; }
1380 /* Blob source: a row-per-line <table>. We render the gutter + code
1381 ourselves and feed Chroma only token spans (no <pre>, no <table>)
1382 so the chrome is consistent across lexers and the no-lexer fallback,
1383 per the S33 viewer refactor. Forgejo / Gitea use the same shape.
1384 The reasoning is robustness: chroma's own table mode has rules we
1385 can't fully override (cell padding, line-number `<a>` styles), and
1386 they leak whenever a lexer changes its emit shape. Owning the table
1387 makes the layout immune to that drift. */
1388 .shithub-blob-source .chroma { padding: 0; background: var(--canvas-default); }
1389 .shithub-blob-source .chroma a { color: inherit; text-decoration: none; }
1390 .shithub-blob-lines {
1391 width: 100%;
1392 border-collapse: collapse;
1393 border-spacing: 0;
1394 margin: 0;
1395 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
1396 font-size: 0.825rem;
1397 line-height: 20px;
1398 tab-size: 4;
1399 }
1400 /* Gutter cell. width:1% + white-space:nowrap forces shrink-to-fit:
1401 the cell sizes itself to the max line-number width and no wider.
1402 text-align:right keeps the digit flush against the divider. */
1403 .shithub-blob-lines td.shithub-blob-lnum {
1404 width: 1%;
1405 min-width: 2.5rem;
1406 padding: 0 12px;
1407 background: var(--canvas-subtle);
1408 border-right: 1px solid var(--border-default);
1409 color: var(--fg-muted);
1410 text-align: right;
1411 user-select: none;
1412 white-space: nowrap;
1413 vertical-align: top;
1414 }
1415 .shithub-blob-lines td.shithub-blob-lnum a {
1416 color: inherit;
1417 display: block;
1418 }
1419 /* Code cell. white-space:pre preserves indentation; the wrapper
1420 handles horizontal scroll for long lines. */
1421 .shithub-blob-lines td.shithub-blob-lcode {
1422 padding: 0 12px;
1423 vertical-align: top;
1424 white-space: pre;
1425 }
1426 .shithub-blob-lines td.shithub-blob-lcode .shithub-blob-line {
1427 display: inline-block;
1428 min-width: 100%;
1429 }
1430 /* Hover surfaces the row; :target highlights the line referenced by
1431 #L<n> in the URL (browsers handle scrolling). */
1432 .shithub-blob-lines tr:hover td.shithub-blob-lcode {
1433 background: var(--canvas-subtle);
1434 }
1435 .shithub-blob-lines tr:target td.shithub-blob-lcode,
1436 .shithub-blob-lines tr:target td.shithub-blob-lnum {
1437 background: var(--accent-subtle, #fff8c5);
1438 }
1439 .shithub-blob-too-large, .shithub-blob-binary {
1440 padding: 1rem;
1441 border: 1px dashed var(--border-default);
1442 border-radius: 6px;
1443 text-align: center;
1444 color: var(--fg-muted);
1445 }
1446 .shithub-blob-image { text-align: center; padding: 1rem; background: var(--canvas-subtle); border-radius: 6px; }
1447 .shithub-blob-image img { max-width: 100%; max-height: 80vh; }
1448 .shithub-blob-source { overflow-x: auto; }
1449 .shithub-blob-source .chroma { font-size: 0.85rem; }
1450 .shithub-blob-markdown { padding: 1rem; }
1451 .shithub-button-disabled { opacity: 0.5; pointer-events: none; }
1452
1453 .shithub-finder-form { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }
1454 .shithub-finder-form input { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; flex: 1; }
1455 .shithub-finder-results { list-style: none; padding: 0; }
1456 .shithub-finder-results li { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-default); font-family: monospace; font-size: 0.875rem; }
1457
1458 /* ========== Commits + Commit + Blame (S18) ========== */
1459 .shithub-avatar-sm {
1460 display: inline-block;
1461 width: 20px;
1462 height: 20px;
1463 border-radius: 50%;
1464 vertical-align: middle;
1465 margin-right: 0.4rem;
1466 }
1467 .shithub-identicon {
1468 background: linear-gradient(135deg, #cce, #ecc);
1469 }
1470 .shithub-commits-filter {
1471 display: flex;
1472 gap: 0.5rem;
1473 align-items: end;
1474 flex-wrap: wrap;
1475 margin: 1rem 0;
1476 }
1477 .shithub-commits-filter input {
1478 padding: 0.3rem 0.5rem;
1479 border: 1px solid var(--border-default);
1480 border-radius: 6px;
1481 font: inherit;
1482 }
1483 .shithub-commits-list { list-style: none; padding: 0; margin: 0; }
1484 .shithub-commits-row {
1485 display: grid;
1486 grid-template-columns: 220px 1fr;
1487 gap: 0.75rem;
1488 padding: 0.6rem 0.5rem;
1489 border-bottom: 1px solid var(--border-default);
1490 align-items: start;
1491 }
1492 .shithub-commits-author { color: var(--fg-muted); font-size: 0.875rem; }
1493 .shithub-commits-meta { display: flex; flex-direction: column; gap: 0.2rem; }
1494 .shithub-commits-subject { color: var(--fg-default); font-weight: 500; }
1495 .shithub-commits-sha { color: var(--fg-muted); font-size: 0.8rem; }
1496 .shithub-pager { display: flex; gap: 1rem; padding: 1rem 0; }
1497
1498 .shithub-commit-view { max-width: 64rem; margin: 1.5rem auto; padding: 0 1rem; }
1499 .shithub-commit-meta {
1500 margin-top: 1rem;
1501 padding: 1rem;
1502 border: 1px solid var(--border-default);
1503 border-radius: 6px;
1504 background: var(--canvas-subtle);
1505 }
1506 .shithub-commit-subject { margin: 0 0 0.5rem; font-size: 1.2rem; }
1507 .shithub-commit-body { margin: 0.75rem 0; font-family: monospace; font-size: 0.9rem; line-height: 1.4; }
1508 .shithub-commit-people { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.75rem 0; font-size: 0.875rem; }
1509 .shithub-commit-actor { display: inline-flex; align-items: center; gap: 0.4rem; }
1510 .shithub-commit-role { color: var(--fg-muted); font-weight: 500; }
1511 .shithub-commit-refs { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; font-size: 0.875rem; }
1512 .shithub-commit-refs dt { color: var(--fg-muted); }
1513 .shithub-commit-refs dd { margin: 0; font-family: monospace; }
1514
1515 .shithub-commit-files { margin-top: 1.5rem; }
1516 .shithub-commit-files-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
1517 .shithub-commit-files-table th, .shithub-commit-files-table td {
1518 padding: 0.4rem 0.6rem;
1519 border-bottom: 1px solid var(--border-default);
1520 text-align: left;
1521 }
1522 .shithub-num-col { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
1523 .shithub-add { color: #22863a; }
1524 .shithub-del { color: #cb2431; }
1525 .shithub-status-A { color: #22863a; font-weight: 600; }
1526 .shithub-status-M { color: #b08800; font-weight: 600; }
1527 .shithub-status-D { color: #cb2431; font-weight: 600; }
1528 .shithub-status-R { color: #6f42c1; font-weight: 600; }
1529 .shithub-status-C { color: #0366d6; font-weight: 600; }
1530
1531 .shithub-blame-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 0.85rem; }
1532 .shithub-blame-chunk-header td {
1533 padding: 0.4rem 0.6rem;
1534 background: var(--canvas-subtle);
1535 border-top: 1px solid var(--border-default);
1536 font-family: var(--shithub-font-default, sans-serif);
1537 font-size: 0.8rem;
1538 color: var(--fg-muted);
1539 display: flex;
1540 gap: 0.4rem;
1541 align-items: center;
1542 }
1543 .shithub-blame-lineno { width: 50px; text-align: right; padding-right: 0.5rem; color: var(--fg-muted); }
1544 .shithub-blame-lineno a { color: inherit; }
1545 .shithub-blame-content pre { margin: 0; white-space: pre; }
1546 .shithub-blame-too-large {
1547 padding: 1rem;
1548 border: 1px dashed var(--border-default);
1549 border-radius: 6px;
1550 text-align: center;
1551 color: var(--fg-muted);
1552 }
1553
1554 /* ========== Diff renderer (S19) ========== */
1555 .shithub-commit-files-head {
1556 display: flex;
1557 align-items: center;
1558 justify-content: space-between;
1559 margin-bottom: 0.5rem;
1560 }
1561 .shithub-diff-toggles { display: flex; gap: 0.25rem; }
1562 .shithub-diff-body { margin-top: 1rem; }
1563 .shithub-diff-file {
1564 margin-top: 1rem;
1565 border: 1px solid var(--border-default);
1566 border-radius: 6px;
1567 overflow: hidden;
1568 }
1569 .shithub-diff-file-head {
1570 display: flex;
1571 align-items: center;
1572 justify-content: space-between;
1573 gap: 0.75rem;
1574 padding: 0.5rem 0.75rem;
1575 background: var(--canvas-subtle);
1576 border-bottom: 1px solid var(--border-default);
1577 font-size: 0.875rem;
1578 }
1579 .shithub-diff-file-action { color: var(--fg-muted); font-style: italic; }
1580 .shithub-diff-binary, .shithub-diff-image, .shithub-diff-empty, .shithub-diff-truncated {
1581 padding: 1rem;
1582 text-align: center;
1583 color: var(--fg-muted);
1584 }
1585 .shithub-diff-file-toolarge { padding: 0.5rem 0.75rem; }
1586 .shithub-diff-file-toolarge > summary { cursor: pointer; color: var(--fg-muted); }
1587 .shithub-diff-table {
1588 width: 100%;
1589 border-collapse: collapse;
1590 font-family: monospace;
1591 font-size: 0.85rem;
1592 table-layout: fixed;
1593 }
1594 .shithub-diff-table td { padding: 0 0.5rem; vertical-align: top; }
1595 .shithub-diff-table pre { margin: 0; white-space: pre; }
1596 .shithub-diff-lineno {
1597 width: 50px;
1598 text-align: right;
1599 color: var(--fg-muted);
1600 user-select: none;
1601 background: var(--canvas-subtle);
1602 }
1603 .shithub-diff-content { width: auto; }
1604 .shithub-diff-add { background: rgba(46, 160, 67, 0.10); }
1605 .shithub-diff-del { background: rgba(248, 81, 73, 0.10); }
1606 .shithub-diff-add .shithub-diff-content { background: rgba(46, 160, 67, 0.05); }
1607 .shithub-diff-del .shithub-diff-content { background: rgba(248, 81, 73, 0.05); }
1608 .shithub-diff-pad { background: var(--canvas-subtle); }
1609 .shithub-diff-hunk-head td {
1610 padding: 0.4rem 0.75rem;
1611 background: var(--canvas-default);
1612 border-top: 1px solid var(--border-default);
1613 border-bottom: 1px solid var(--border-default);
1614 color: var(--fg-muted);
1615 }
1616 .shithub-diff-split td.shithub-diff-content {
1617 width: 50%;
1618 border-left: 1px solid var(--border-default);
1619 }
1620
1621 /* ========== Branches/Tags/Compare/Settings (S20) ========== */
1622 .shithub-branches, .shithub-tags, .shithub-compare, .shithub-settings-branches {
1623 max-width: 64rem;
1624 margin: 1.5rem auto;
1625 padding: 0 1rem;
1626 }
1627 .shithub-branches-filter { display: flex; gap: 0.4rem; }
1628 .shithub-branches-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
1629 .shithub-branches-table th, .shithub-branches-table td {
1630 padding: 0.5rem 0.75rem;
1631 text-align: left;
1632 border-bottom: 1px solid var(--border-default);
1633 }
1634 .shithub-branches-subject { color: var(--fg-default); }
1635 .shithub-compare-summary { padding: 0.75rem 1rem; background: var(--canvas-subtle); border-radius: 6px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
1636 .shithub-compare-empty { padding: 1.5rem; text-align: center; color: var(--fg-muted); border: 1px dashed var(--border-default); border-radius: 6px; }
1637 .shithub-compare-commits { margin-top: 1.5rem; }
1638 .shithub-settings-branches form label { display: block; margin: 0.5rem 0; }
1639 .shithub-settings-branches form input[type=text],
1640 .shithub-settings-branches form select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; min-width: 280px; }
1641
1642 /* ========== Issues / Labels / Milestones (S21) ========== */
1643 .shithub-issues, .shithub-issue-view, .shithub-issue-new, .shithub-labels, .shithub-milestones {
1644 margin: 0;
1645 padding: 0;
1646 }
1647 .shithub-issues-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
1648 .shithub-issues-actions { display: flex; gap: 0.4rem; }
1649 .shithub-issues-filter { display: flex; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); margin: 1rem 0; }
1650 .shithub-issues-tab { color: var(--fg-muted); padding: 0.25rem 0; border-bottom: 2px solid transparent; }
1651 .shithub-issues-tab-active { color: var(--fg-default); border-bottom-color: var(--accent-emphasis, #0969da); font-weight: 600; }
1652 .shithub-issues-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; vertical-align: middle; margin-right: 0.25rem; }
1653 .shithub-issues-dot-open { background: #1a7f37; }
1654 .shithub-issues-dot-closed { background: #8250df; }
1655 .shithub-issues-list { list-style: none; padding: 0; margin: 0; }
1656 .shithub-issues-row {
1657 display: flex; gap: 0.75rem; align-items: flex-start;
1658 padding: 0.75rem 0.5rem;
1659 border-bottom: 1px solid var(--border-default);
1660 }
1661 .shithub-issues-state { font-size: 1.1rem; line-height: 1.2; }
1662 .shithub-issues-state-open { color: #1a7f37; }
1663 .shithub-issues-state-closed { color: #8250df; }
1664 .shithub-issues-body { flex: 1; }
1665 .shithub-issues-title { font-weight: 600; color: var(--fg-default); }
1666 .shithub-issues-title:hover { color: var(--accent-emphasis, #0969da); }
1667 .shithub-issues-meta { color: var(--fg-muted); font-size: 0.85rem; margin-top: 0.2rem; }
1668 .shithub-issues-assignees { font-size: 0.85rem; }
1669 .shithub-issues-empty { color: var(--fg-muted); padding: 2rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
1670 .shithub-issue-num { color: var(--fg-muted); font-weight: 400; margin-left: 0.5rem; }
1671 .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; }
1672 .shithub-issue-title { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin: 0; }
1673 .shithub-issue-head-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
1674 .shithub-issue-meta { color: var(--fg-muted); margin: 0.75rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
1675 .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; }
1676 .shithub-issue-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; }
1677 @media (max-width: 900px) { .shithub-issue-grid { grid-template-columns: 1fr; } }
1678 .shithub-comment {
1679 border: 1px solid var(--border-default);
1680 border-radius: 6px;
1681 margin-bottom: 1rem;
1682 background: var(--canvas-default);
1683 }
1684 .shithub-comment-head {
1685 padding: 0.5rem 0.75rem;
1686 background: var(--canvas-subtle);
1687 border-bottom: 1px solid var(--border-default);
1688 font-size: 0.9rem;
1689 color: var(--fg-muted);
1690 }
1691 .shithub-comment-body { padding: 0.75rem; }
1692 .shithub-event {
1693 color: var(--fg-muted);
1694 font-size: 0.85rem;
1695 display: flex;
1696 align-items: center;
1697 gap: 0.5rem;
1698 padding: 0.55rem 0;
1699 margin: 0 0 1rem 1.2rem;
1700 position: relative;
1701 }
1702 .shithub-event::before {
1703 content: "";
1704 position: absolute;
1705 top: -1rem;
1706 bottom: -1rem;
1707 left: 0.6rem;
1708 border-left: 2px solid var(--border-default);
1709 z-index: 0;
1710 }
1711 .shithub-event-icon {
1712 width: 1.3rem;
1713 height: 1.3rem;
1714 border: 1px solid var(--border-default);
1715 border-radius: 50%;
1716 background: var(--canvas-default);
1717 color: var(--fg-muted);
1718 display: inline-flex;
1719 align-items: center;
1720 justify-content: center;
1721 position: relative;
1722 z-index: 1;
1723 flex: 0 0 auto;
1724 }
1725 .shithub-event-icon svg { width: 0.8rem; height: 0.8rem; }
1726 .shithub-event-linked .shithub-event-icon { color: var(--fg-muted); }
1727 .shithub-event a { font-weight: 600; }
1728 .shithub-comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
1729 .shithub-comment-form textarea, .shithub-issue-form textarea, .shithub-issue-form input[type=text] {
1730 font: inherit; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; width: 100%;
1731 resize: vertical;
1732 }
1733 .shithub-issue-form { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
1734 .shithub-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
1735 .shithub-form-row span { font-weight: 600; font-size: 0.9rem; }
1736 .shithub-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
1737 .shithub-form-actions-start { justify-content: flex-start; }
1738 .shithub-issue-sidebar section { padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); position: relative; }
1739 .shithub-sidebar-heading { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
1740 .shithub-issue-sidebar h3 { font-size: 0.85rem; color: var(--fg-muted); margin: 0; }
1741 .shithub-sidebar-icon, .shithub-sidebar-editor > summary {
1742 color: var(--fg-muted);
1743 display: inline-flex;
1744 align-items: center;
1745 justify-content: center;
1746 width: 1.25rem;
1747 height: 1.25rem;
1748 cursor: pointer;
1749 }
1750 .shithub-sidebar-editor > summary { list-style: none; }
1751 .shithub-sidebar-editor > summary::-webkit-details-marker { display: none; }
1752 .shithub-popover {
1753 position: absolute;
1754 right: 0;
1755 top: 2rem;
1756 z-index: 20;
1757 min-width: 17rem;
1758 display: flex;
1759 flex-direction: column;
1760 gap: 0.55rem;
1761 padding: 0.75rem;
1762 background: var(--canvas-default);
1763 border: 1px solid var(--border-default);
1764 border-radius: 8px;
1765 box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
1766 }
1767 .shithub-popover input[type=text], .shithub-popover select {
1768 font: inherit;
1769 width: 100%;
1770 padding: 0.45rem 0.5rem;
1771 border: 1px solid var(--border-default);
1772 border-radius: 6px;
1773 background: var(--canvas-default);
1774 color: var(--fg-default);
1775 }
1776 .shithub-inline-form { display: inline; }
1777 .shithub-link-button {
1778 border: 0;
1779 padding: 0;
1780 background: transparent;
1781 color: var(--accent-emphasis, #0969da);
1782 font: inherit;
1783 cursor: pointer;
1784 display: inline-flex;
1785 gap: 0.35rem;
1786 align-items: center;
1787 }
1788 .shithub-sidebar-button { width: 100%; }
1789 .shithub-participant { display: inline-block; margin: 0 0.35rem 0.35rem 0; }
1790 .shithub-issue-actions form { margin: 0.25rem 0; }
1791 .shithub-issue-signedout { color: var(--fg-muted); padding: 1rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
1792 .shithub-label {
1793 display: inline-block;
1794 font-size: 0.75rem;
1795 padding: 0.1rem 0.5rem;
1796 border-radius: 1rem;
1797 color: #1f2328;
1798 font-weight: 500;
1799 margin: 0 0.15rem;
1800 }
1801 .shithub-label-pick { display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0; }
1802 .shithub-assignee-form { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.5rem; }
1803 .shithub-assignee-form input[type=text] { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; }
1804 .shithub-labels-list, .shithub-milestones-list { list-style: none; padding: 0; }
1805 .shithub-labels-row, .shithub-milestones-row {
1806 padding: 0.75rem 0;
1807 border-bottom: 1px solid var(--border-default);
1808 display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
1809 }
1810 .shithub-label-form, .shithub-milestone-form { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0; }
1811 .shithub-label-form input, .shithub-milestone-form input, .shithub-milestone-form textarea {
1812 padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1813 }
1814 .shithub-button-danger { color: #cf222e; }
1815 .shithub-error { padding: 0.75rem; background: #ffebe9; border: 1px solid #ffcecb; border-radius: 6px; color: #82061e; margin-bottom: 1rem; }
1816 .shithub-muted { color: var(--fg-muted); }
1817
1818 /* ========== Pull Requests (S22) ========== */
1819 .shithub-pulls, .shithub-pull-view {
1820 max-width: 64rem;
1821 margin: 1.5rem auto;
1822 padding: 0 1rem;
1823 }
1824 .shithub-pull-head { margin-bottom: 0.75rem; }
1825 .shithub-pull-merged { background: #8250df22; color: #8250df; }
1826 .shithub-pull-tabs {
1827 display: flex; gap: 1.5rem;
1828 border-bottom: 1px solid var(--border-default);
1829 margin: 0.75rem 0 1rem;
1830 }
1831 .shithub-pull-tab {
1832 color: var(--fg-muted);
1833 padding: 0.4rem 0;
1834 border-bottom: 2px solid transparent;
1835 }
1836 .shithub-pull-tab-active {
1837 color: var(--fg-default);
1838 border-bottom-color: var(--accent-emphasis, #0969da);
1839 font-weight: 600;
1840 }
1841 .shithub-pull-grid { display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; }
1842 @media (max-width: 768px) { .shithub-pull-grid { grid-template-columns: 1fr; } }
1843 .shithub-pull-merge { padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 6px; }
1844 .shithub-pull-merge h3 { font-size: 0.85rem; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.5rem; }
1845 .shithub-pull-state-clean { color: #1a7f37; font-weight: 600; }
1846 .shithub-pull-state-dirty { color: #cf222e; font-weight: 600; }
1847 .shithub-pull-state-behind { color: #9a6700; }
1848 .shithub-pull-state-unknown { color: var(--fg-muted); }
1849 .shithub-pull-merge-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
1850 .shithub-pull-merge-form select { padding: 0.4rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit; }
1851 .shithub-pull-state-form { margin-top: 0.5rem; }
1852 .shithub-pull-refs { display: flex; gap: 0.4rem; align-items: flex-end; }
1853 .shithub-pull-refs label { flex: 1; }
1854 .shithub-pull-arrow { font-size: 1.4rem; padding: 0 0.4rem; align-self: center; }
1855 .shithub-pull-commits { list-style: none; padding: 0; }
1856 .shithub-pull-commits li {
1857 padding: 0.4rem 0; border-bottom: 1px solid var(--border-default);
1858 display: flex; gap: 0.6rem; align-items: baseline;
1859 }
1860
1861 /* ========== PR Reviews (S23) ========== */
1862 .shithub-pull-reviews, .shithub-pull-reviewers {
1863 border-top: 1px solid var(--border-default);
1864 padding: 0.6rem 0;
1865 }
1866 .shithub-pull-reviews h3, .shithub-pull-reviewers h3 {
1867 font-size: 0.85rem; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.4rem;
1868 }
1869 .shithub-pull-reviews-list, .shithub-pull-reviewers-list {
1870 list-style: none; padding: 0; margin: 0; font-size: 0.9rem;
1871 }
1872 .shithub-pull-reviews-list li { padding: 0.2rem 0; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: baseline; }
1873 .shithub-pull-review-state { font-weight: 600; }
1874 .shithub-pull-review-approve .shithub-pull-review-state { color: #1a7f37; }
1875 .shithub-pull-review-request_changes .shithub-pull-review-state { color: #cf222e; }
1876 .shithub-pull-review-comment .shithub-pull-review-state { color: var(--fg-muted); }
1877 .shithub-pull-review-dismissed { opacity: 0.5; text-decoration: line-through; }
1878 .shithub-pull-request-reviewer summary, .shithub-pull-submit-review summary {
1879 margin: 0.5rem 0 0.25rem;
1880 }
1881 .shithub-pull-review-form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0; }
1882 .shithub-pull-review-form textarea, .shithub-pull-review-form select {
1883 padding: 0.4rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1884 }
1885 .shithub-pull-threads { margin-top: 1.5rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 6px; }
1886 .shithub-pull-thread-file { padding: 0.4rem 0; border-bottom: 1px solid var(--border-default); }
1887 .shithub-pull-thread-file:last-child { border-bottom: none; }
1888 .shithub-pull-thread-file summary { cursor: pointer; font-weight: 600; }
1889 .shithub-pull-thread { padding: 0.5rem; border-left: 3px solid var(--border-default); margin: 0.5rem 0; }
1890 .shithub-pull-thread-outdated { opacity: 0.6; border-left-color: #9a6700; }
1891 .shithub-pull-thread-resolved { opacity: 0.7; border-left-color: #1a7f37; }
1892 .shithub-pull-thread-actions { display: flex; gap: 0.3rem; margin-top: 0.4rem; flex-wrap: wrap; }
1893 .shithub-pull-thread-actions textarea, .shithub-pull-thread-actions input[type=text] {
1894 padding: 0.3rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1895 }
1896 .shithub-pull-add-comment summary { margin-top: 0.5rem; }
1897 .shithub-pull-add-comment form { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0; }
1898 .shithub-pull-add-comment input, .shithub-pull-add-comment textarea {
1899 padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1900 }
1901
1902 /* ========== PR Checks tab (S24) ========== */
1903 .shithub-pull-checks { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
1904 .shithub-pull-check-suite {
1905 border: 1px solid var(--border-default);
1906 border-radius: 6px;
1907 padding: 0.75rem;
1908 }
1909 .shithub-pull-check-suite h3 {
1910 display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
1911 font-size: 1rem; margin: 0 0 0.5rem;
1912 }
1913 .shithub-pull-check-app { font-family: var(--mono, monospace); font-size: 0.85rem; color: var(--fg-muted); }
1914 .shithub-pull-check-suite-status { font-size: 0.8rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--canvas-subtle); }
1915 .shithub-pull-check-runs { list-style: none; padding: 0; margin: 0; }
1916 .shithub-pull-check-run {
1917 display: flex; gap: 0.5rem; align-items: baseline;
1918 padding: 0.3rem 0; border-bottom: 1px solid var(--border-default);
1919 flex-wrap: wrap;
1920 }
1921 .shithub-pull-check-run:last-child { border-bottom: none; }
1922 .shithub-pull-check-status-completed { color: #1a7f37; }
1923 .shithub-pull-check-status-in_progress { color: #9a6700; }
1924 .shithub-pull-check-status-queued { color: var(--fg-muted); }
1925 .shithub-pull-check-status-pending { color: var(--fg-muted); }
1926 .shithub-pull-check-conclusion {
1927 font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px;
1928 text-transform: lowercase;
1929 }
1930 .shithub-pull-check-conclusion-success { background: #1a7f3722; color: #1a7f37; }
1931 .shithub-pull-check-conclusion-failure { background: #cf222e22; color: #cf222e; }
1932 .shithub-pull-check-conclusion-neutral { background: #d0d7de44; color: var(--fg-muted); }
1933 .shithub-pull-check-conclusion-cancelled,
1934 .shithub-pull-check-conclusion-skipped,
1935 .shithub-pull-check-conclusion-stale { color: var(--fg-muted); background: var(--canvas-subtle); }
1936 .shithub-pull-check-conclusion-timed_out { background: #9a670022; color: #9a6700; }
1937 .shithub-pull-check-conclusion-action_required { background: #cf222e22; color: #cf222e; font-weight: 600; }
1938
1939 /* S26 — stars / watchers / forks list pages */
1940 .shithub-social { max-width: 1012px; margin: 0 auto; padding: 1.5rem 0; }
1941 .shithub-social-subhead {
1942 display: flex;
1943 align-items: baseline;
1944 gap: 0.75rem;
1945 padding-bottom: 0.85rem;
1946 border-bottom: 1px solid var(--border-default);
1947 }
1948 .shithub-social-subhead h1 {
1949 margin: 0;
1950 font-size: 1.55rem;
1951 font-weight: 400;
1952 }
1953 .shithub-social-subhead p { margin: 0; color: var(--fg-muted); }
1954 .shithub-social-tabnav {
1955 display: flex;
1956 gap: 0.25rem;
1957 margin: 1rem 0;
1958 border-bottom: 1px solid var(--border-default);
1959 }
1960 .shithub-social-tabnav a,
1961 .shithub-social-tabnav span {
1962 display: inline-flex;
1963 align-items: center;
1964 gap: 0.35rem;
1965 padding: 0.55rem 0.85rem;
1966 color: var(--fg-default);
1967 border-bottom: 2px solid transparent;
1968 position: relative;
1969 bottom: -1px;
1970 }
1971 .shithub-social-tabnav a:hover { text-decoration: none; background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
1972 .shithub-social-tabnav .is-active { border-bottom-color: var(--accent-emphasis); font-weight: 600; }
1973 .shithub-social-tabnav .is-disabled { color: var(--fg-muted); }
1974 .shithub-social-list {
1975 list-style: none;
1976 padding: 0;
1977 margin: 1rem 0;
1978 border: 1px solid var(--border-default);
1979 border-radius: 6px;
1980 background: var(--canvas-default);
1981 }
1982 .shithub-social-list li {
1983 display: grid;
1984 grid-template-columns: 40px minmax(0, 1fr) auto;
1985 gap: 0.85rem;
1986 align-items: center;
1987 padding: 1rem;
1988 border-bottom: 1px solid var(--border-muted);
1989 }
1990 .shithub-social-list li:last-child { border-bottom: none; }
1991 .shithub-social-avatar,
1992 .shithub-social-avatar img {
1993 display: block;
1994 width: 40px;
1995 height: 40px;
1996 border-radius: 50%;
1997 }
1998 .shithub-social-avatar img { border: 1px solid var(--border-muted); }
1999 .shithub-social-person {
2000 min-width: 0;
2001 display: grid;
2002 gap: 0.1rem;
2003 }
2004 .shithub-social-person strong { font-size: 1rem; }
2005 .shithub-social-person span,
2006 .shithub-social-time,
2007 .shithub-social-meta {
2008 color: var(--fg-muted);
2009 font-size: 0.875rem;
2010 }
2011 .shithub-social-meta {
2012 display: flex;
2013 align-items: center;
2014 justify-content: end;
2015 gap: 0.75rem;
2016 flex-wrap: wrap;
2017 }
2018 .shithub-social-meta span {
2019 display: inline-flex;
2020 align-items: center;
2021 gap: 0.25rem;
2022 }
2023 .shithub-social-fork-badges {
2024 display: flex;
2025 gap: 0.35rem;
2026 flex-wrap: wrap;
2027 margin-top: 0.25rem;
2028 }
2029 .shithub-social-blank {
2030 margin: 1rem 0;
2031 padding: 2.5rem 1.5rem;
2032 border: 1px solid var(--border-default);
2033 border-radius: 6px;
2034 text-align: center;
2035 color: var(--fg-muted);
2036 }
2037 .shithub-social-blank svg {
2038 width: 24px;
2039 height: 24px;
2040 color: var(--fg-muted);
2041 margin-bottom: 0.75rem;
2042 }
2043 .shithub-social-blank h2 {
2044 margin: 0 0 0.4rem;
2045 color: var(--fg-default);
2046 font-size: 1.25rem;
2047 font-weight: 600;
2048 }
2049 .shithub-social-blank p {
2050 max-width: 520px;
2051 margin: 0 auto;
2052 }
2053 @media (max-width: 700px) {
2054 .shithub-social-list li {
2055 grid-template-columns: 40px minmax(0, 1fr);
2056 }
2057 .shithub-social-time,
2058 .shithub-social-meta {
2059 grid-column: 2;
2060 justify-content: start;
2061 }
2062 }
2063 .shithub-meta { color: var(--fg-muted); margin: 0.25rem 0 1rem; }
2064 .shithub-empty { color: var(--fg-muted); padding: 1rem; }
2065 .shithub-pagination {
2066 display: flex; gap: 0.5rem; padding: 1rem 0;
2067 }
2068
2069 /* S28 — search */
2070 .shithub-nav-search {
2071 position: relative;
2072 flex: 1 1 22rem;
2073 display: flex;
2074 align-items: center;
2075 max-width: 32rem;
2076 margin: 0 1rem;
2077 }
2078 .shithub-nav-search-icon {
2079 position: absolute;
2080 left: 0.65rem;
2081 top: 50%;
2082 transform: translateY(-50%);
2083 color: var(--fg-muted);
2084 line-height: 0;
2085 pointer-events: none;
2086 }
2087 .shithub-nav-search input {
2088 width: 100%;
2089 min-height: 2rem;
2090 padding: 0.35rem 2rem 0.35rem 2rem;
2091 border: 1px solid var(--border-default);
2092 border-radius: 6px;
2093 background: var(--canvas-default);
2094 color: var(--fg-default);
2095 font-size: 0.85rem;
2096 }
2097 .shithub-nav-search-key {
2098 position: absolute;
2099 right: 0.55rem;
2100 top: 50%;
2101 transform: translateY(-50%);
2102 min-width: 1rem;
2103 padding: 0 0.25rem;
2104 border: 1px solid var(--border-default);
2105 border-radius: 4px;
2106 color: var(--fg-muted);
2107 font-size: 0.75rem;
2108 line-height: 1.15rem;
2109 text-align: center;
2110 pointer-events: none;
2111 }
2112 .shithub-search-page {
2113 padding: 1.5rem 1rem 3rem;
2114 }
2115 .shithub-search-shell {
2116 display: grid;
2117 grid-template-columns: 220px minmax(0, 1fr);
2118 gap: 2rem;
2119 max-width: 1280px;
2120 margin: 0 auto;
2121 }
2122 .shithub-search-sidebar {
2123 padding-top: 3.35rem;
2124 }
2125 .shithub-search-sidebar h2 {
2126 margin: 0 0 0.55rem;
2127 font-size: 0.875rem;
2128 font-weight: 600;
2129 }
2130 .shithub-search-filter-list {
2131 display: flex;
2132 flex-direction: column;
2133 }
2134 .shithub-search-filter {
2135 display: flex;
2136 align-items: center;
2137 justify-content: space-between;
2138 gap: 0.75rem;
2139 min-height: 2.25rem;
2140 padding: 0.4rem 0.65rem;
2141 border-radius: 6px;
2142 color: var(--fg-default);
2143 font-size: 0.875rem;
2144 }
2145 .shithub-search-filter:hover {
2146 background: var(--canvas-subtle);
2147 text-decoration: none;
2148 }
2149 .shithub-search-filter.is-selected {
2150 background: var(--canvas-subtle);
2151 font-weight: 600;
2152 }
2153 .shithub-search-filter.is-selected::before {
2154 content: "";
2155 width: 4px;
2156 align-self: stretch;
2157 margin: -0.4rem 0 -0.4rem -0.65rem;
2158 border-radius: 6px 0 0 6px;
2159 background: var(--accent-emphasis);
2160 }
2161 .shithub-search-filter-label {
2162 display: inline-flex;
2163 align-items: center;
2164 gap: 0.45rem;
2165 min-width: 0;
2166 }
2167 .shithub-search-filter-label svg {
2168 color: var(--fg-muted);
2169 flex: 0 0 auto;
2170 }
2171 .shithub-search-filter-count {
2172 color: var(--fg-muted);
2173 font-size: 0.75rem;
2174 }
2175 .shithub-search-results {
2176 min-width: 0;
2177 }
2178 .shithub-search-query-form {
2179 display: flex;
2180 gap: 0.5rem;
2181 margin-bottom: 1.25rem;
2182 }
2183 .shithub-search-query-form input[type=text] {
2184 flex: 1;
2185 min-height: 2.35rem;
2186 padding: 0.45rem 0.75rem;
2187 border: 1px solid var(--border-default);
2188 border-radius: 6px;
2189 background: var(--canvas-default);
2190 color: var(--fg-default);
2191 font-size: 0.875rem;
2192 }
2193 .shithub-search-results-head {
2194 display: flex;
2195 align-items: center;
2196 justify-content: space-between;
2197 gap: 1rem;
2198 padding-bottom: 0.9rem;
2199 border-bottom: 1px solid var(--border-default);
2200 }
2201 .shithub-search-results-head h1 {
2202 margin: 0;
2203 font-size: 1.25rem;
2204 line-height: 1.3;
2205 }
2206 .shithub-search-sort {
2207 position: relative;
2208 flex: 0 0 auto;
2209 }
2210 .shithub-search-sort > summary {
2211 list-style: none;
2212 display: inline-flex;
2213 align-items: center;
2214 min-height: 2rem;
2215 padding: 0.35rem 0.75rem;
2216 border: 1px solid var(--border-default);
2217 border-radius: 6px;
2218 background: var(--canvas-subtle);
2219 color: var(--fg-default);
2220 cursor: pointer;
2221 font-size: 0.875rem;
2222 font-weight: 500;
2223 }
2224 .shithub-search-sort > summary::-webkit-details-marker { display: none; }
2225 .shithub-search-sort > div {
2226 position: absolute;
2227 right: 0;
2228 top: calc(100% + 0.4rem);
2229 z-index: 20;
2230 min-width: 190px;
2231 padding: 0.35rem 0;
2232 border: 1px solid var(--border-default);
2233 border-radius: 6px;
2234 background: var(--canvas-default);
2235 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
2236 }
2237 .shithub-search-sort span {
2238 display: block;
2239 padding: 0.45rem 0.75rem;
2240 font-size: 0.875rem;
2241 }
2242 .shithub-search-result-list {
2243 list-style: none;
2244 padding: 0;
2245 margin: 0;
2246 }
2247 .shithub-search-result {
2248 display: flex;
2249 gap: 0.75rem;
2250 justify-content: space-between;
2251 padding: 1rem 0;
2252 border-bottom: 1px solid var(--border-default);
2253 }
2254 .shithub-search-result-main {
2255 min-width: 0;
2256 }
2257 .shithub-search-result h2 {
2258 display: flex;
2259 align-items: center;
2260 gap: 0.45rem;
2261 margin: 0;
2262 font-size: 1rem;
2263 line-height: 1.35;
2264 font-weight: 600;
2265 }
2266 .shithub-search-result h2 svg {
2267 flex: 0 0 auto;
2268 color: var(--fg-muted);
2269 }
2270 .shithub-search-result p {
2271 margin: 0.35rem 0 0;
2272 color: var(--fg-default);
2273 font-size: 0.875rem;
2274 }
2275 .shithub-search-result-path {
2276 color: var(--fg-muted) !important;
2277 }
2278 .shithub-search-avatar,
2279 .shithub-search-user-avatar {
2280 border-radius: 50%;
2281 background: var(--canvas-subtle);
2282 flex: 0 0 auto;
2283 }
2284 .shithub-search-result-meta {
2285 display: flex;
2286 gap: 0.5rem;
2287 flex-wrap: wrap;
2288 align-items: center;
2289 padding: 0;
2290 margin: 0.65rem 0 0;
2291 color: var(--fg-muted);
2292 list-style: none;
2293 font-size: 0.75rem;
2294 }
2295 .shithub-search-result-meta li {
2296 display: inline-flex;
2297 align-items: center;
2298 gap: 0.25rem;
2299 }
2300 .shithub-search-result-meta li + li::before {
2301 content: "";
2302 width: 3px;
2303 height: 3px;
2304 margin-right: 0.15rem;
2305 border-radius: 50%;
2306 background: var(--fg-muted);
2307 opacity: 0.7;
2308 }
2309 .shithub-search-star {
2310 align-self: flex-start;
2311 color: var(--fg-default);
2312 border-color: var(--border-default);
2313 background: var(--canvas-subtle);
2314 }
2315 .shithub-search-state {
2316 display: inline-flex;
2317 align-items: center;
2318 line-height: 0;
2319 }
2320 .shithub-search-state-open svg { color: var(--success-fg); }
2321 .shithub-search-state-closed svg { color: #8250df; }
2322 .shithub-search-state-pr svg { color: var(--accent-fg); }
2323 .shithub-search-user-result {
2324 justify-content: flex-start;
2325 }
2326 .shithub-search-code-preview {
2327 margin: 0.75rem 0 0;
2328 padding: 0.65rem 0.75rem;
2329 border: 1px solid var(--border-default);
2330 border-radius: 6px;
2331 background: var(--canvas-subtle);
2332 color: var(--fg-default);
2333 overflow-x: auto;
2334 }
2335 .shithub-search-code-preview code {
2336 padding: 0;
2337 background: transparent;
2338 }
2339 .shithub-search-empty,
2340 .shithub-search-blank {
2341 padding: 2rem 0;
2342 color: var(--fg-muted);
2343 }
2344 .shithub-search-blank h1 {
2345 margin: 0 0 0.4rem;
2346 color: var(--fg-default);
2347 font-size: 1.25rem;
2348 }
2349 .shithub-search-blank p {
2350 margin: 0;
2351 }
2352 .shithub-search-pagination {
2353 display: flex;
2354 justify-content: center;
2355 gap: 0.5rem;
2356 padding: 1.5rem 0 0;
2357 }
2358 .shithub-quick-dropdown { padding: 0.5rem; }
2359 .shithub-quick-section { padding: 0.25rem 0; border-bottom: 1px solid var(--border-default); }
2360 .shithub-quick-section:last-of-type { border-bottom: none; }
2361 .shithub-quick-section h3 { font-size: 0.7rem; text-transform: uppercase; color: var(--fg-muted); margin: 0.25rem 0; }
2362 .shithub-quick-section ul { list-style: none; padding: 0; margin: 0; }
2363 .shithub-quick-section li { padding: 0.25rem 0; }
2364 .shithub-quick-footer { padding: 0.5rem 0; border-top: 1px solid var(--border-default); text-align: center; }
2365 @media (max-width: 760px) {
2366 .shithub-nav-search {
2367 order: 3;
2368 flex-basis: 100%;
2369 max-width: none;
2370 margin: 0;
2371 }
2372 .shithub-search-page {
2373 padding: 1rem;
2374 }
2375 .shithub-search-shell {
2376 grid-template-columns: 1fr;
2377 gap: 1rem;
2378 }
2379 .shithub-search-sidebar {
2380 padding-top: 0;
2381 }
2382 .shithub-search-filter-list {
2383 flex-direction: row;
2384 gap: 0.25rem;
2385 overflow-x: auto;
2386 padding-bottom: 0.25rem;
2387 }
2388 .shithub-search-filter {
2389 flex: 0 0 auto;
2390 }
2391 .shithub-search-filter.is-selected::before {
2392 display: none;
2393 }
2394 .shithub-search-query-form,
2395 .shithub-search-results-head,
2396 .shithub-search-result {
2397 align-items: stretch;
2398 flex-direction: column;
2399 }
2400 .shithub-search-star {
2401 align-self: flex-start;
2402 }
2403 }
2404
2405 /* S34 — admin impersonation banner. Sticky-top, loud red so the
2406 admin can't lose track of "I am viewing as someone else right
2407 now." Position: fixed-on-scroll keeps it visible no matter where
2408 on the page they navigate. */
2409 .shithub-imp-banner {
2410 position: sticky;
2411 top: 0;
2412 z-index: 100;
2413 background: var(--danger-fg);
2414 color: #ffffff;
2415 padding: 0.5rem 1rem;
2416 text-align: center;
2417 font-size: 0.875rem;
2418 }
2419 .shithub-imp-banner .shithub-button {
2420 background: rgba(0, 0, 0, 0.25);
2421 color: #ffffff;
2422 border: 1px solid rgba(255, 255, 255, 0.4);
2423 }
2424 .shithub-imp-write { background: #ffd33d; color: #1a1f24; padding: 0 0.4em; border-radius: 4px; font-weight: 600; }
2425 .shithub-imp-read { background: rgba(255, 255, 255, 0.2); padding: 0 0.4em; border-radius: 4px; }