CSS · 47948 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 --success-fg: #1a7f37;
25 --danger-fg: #cf222e;
26 --shithub-mark: var(--danger-fg);
27 }
28
29 [data-theme="dark"] {
30 --canvas-default: #0d1117;
31 --canvas-subtle: #161b22;
32 --canvas-inset: #010409;
33 --fg-default: #f0f6fc;
34 --fg-muted: #9198a1;
35 --border-default: #3d444d;
36 --border-muted: #232a33;
37 --accent-fg: #4493f8;
38 --accent-emphasis: #1f6feb;
39 --success-fg: #3fb950;
40 --danger-fg: #f85149;
41 }
42
43 [data-theme="high-contrast"] {
44 --canvas-default: #000000;
45 --canvas-subtle: #0a0c10;
46 --canvas-inset: #000000;
47 --fg-default: #ffffff;
48 --fg-muted: #d9dee3;
49 --border-default: #7a828e;
50 --border-muted: #525964;
51 --accent-fg: #71b7ff;
52 --accent-emphasis: #409eff;
53 --success-fg: #4ed162;
54 --danger-fg: #ff6a69;
55 }
56
57 * { box-sizing: border-box; }
58
59 html, body {
60 margin: 0;
61 padding: 0;
62 background: var(--canvas-default);
63 color: var(--fg-default);
64 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
65 font-size: 16px;
66 line-height: 1.5;
67 }
68
69 a {
70 color: var(--accent-fg);
71 text-decoration: none;
72 }
73 a:hover { text-decoration: underline; }
74
75 code {
76 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
77 font-size: 0.875em;
78 background: var(--canvas-subtle);
79 padding: 0.1em 0.35em;
80 border-radius: 4px;
81 }
82
83 /* ========== Nav ========== */
84
85 .shithub-body {
86 min-height: 100vh;
87 display: flex;
88 flex-direction: column;
89 }
90
91 .shithub-nav {
92 display: flex;
93 align-items: center;
94 gap: 1.5rem;
95 padding: 0.75rem 1.25rem;
96 background: var(--canvas-subtle);
97 border-bottom: 1px solid var(--border-default);
98 }
99
100 .shithub-nav-brand {
101 display: flex;
102 align-items: center;
103 gap: 0.5rem;
104 color: var(--fg-default);
105 font-weight: 600;
106 letter-spacing: -0.01em;
107 }
108 .shithub-nav-brand:hover { text-decoration: none; }
109 .shithub-nav-brand svg { color: var(--shithub-mark); }
110
111 .shithub-nav-links {
112 display: flex;
113 gap: 1rem;
114 flex: 1;
115 }
116 .shithub-nav-links a {
117 color: var(--fg-default);
118 font-size: 0.9rem;
119 }
120
121 .shithub-nav-actions {
122 display: flex;
123 gap: 0.5rem;
124 align-items: center;
125 }
126
127 /* User-menu dropdown — uses native <details>/<summary> so it works without JS. */
128 .shithub-user-menu { position: relative; }
129 .shithub-user-menu > summary {
130 list-style: none;
131 display: inline-flex;
132 align-items: center;
133 gap: 0.5rem;
134 padding: 0.25rem 0.6rem;
135 border: 1px solid var(--border-default);
136 border-radius: 6px;
137 background: transparent;
138 cursor: pointer;
139 font-size: 0.875rem;
140 color: var(--fg-default);
141 }
142 .shithub-user-menu > summary::-webkit-details-marker { display: none; }
143 .shithub-user-menu-avatar {
144 width: 24px;
145 height: 24px;
146 border-radius: 50%;
147 display: block;
148 background: var(--canvas-default);
149 }
150 .shithub-user-menu-name { font-weight: 500; }
151 .shithub-user-menu-panel {
152 position: absolute;
153 right: 0;
154 top: calc(100% + 0.35rem);
155 min-width: 220px;
156 background: var(--canvas-default);
157 border: 1px solid var(--border-default);
158 border-radius: 6px;
159 padding: 0.4rem 0;
160 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
161 z-index: 50;
162 display: flex;
163 flex-direction: column;
164 }
165 .shithub-user-menu-header {
166 padding: 0.5rem 0.85rem;
167 font-size: 0.8rem;
168 color: var(--fg-muted);
169 border-bottom: 1px solid var(--border-default);
170 margin-bottom: 0.25rem;
171 }
172 .shithub-user-menu-panel a,
173 .shithub-user-menu-signout button {
174 display: block;
175 text-align: left;
176 width: 100%;
177 padding: 0.45rem 0.85rem;
178 background: transparent;
179 border: 0;
180 color: var(--fg-default);
181 font-size: 0.875rem;
182 cursor: pointer;
183 }
184 .shithub-user-menu-panel a:hover,
185 .shithub-user-menu-signout button:hover {
186 background: var(--canvas-subtle);
187 text-decoration: none;
188 }
189 .shithub-user-menu-signout { margin: 0; padding: 0; border-top: 1px solid var(--border-default); margin-top: 0.25rem; }
190
191 .hello-greeting {
192 margin: 1rem auto 1.5rem;
193 padding: 0.85rem 1rem;
194 border: 1px solid var(--border-default);
195 border-radius: 6px;
196 background: var(--canvas-subtle);
197 max-width: 32rem;
198 text-align: left;
199 }
200 .hello-greeting p { margin: 0 0 0.5rem; }
201 .hello-quicklinks { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; }
202
203 .shithub-button {
204 display: inline-flex;
205 align-items: center;
206 padding: 0.4rem 0.85rem;
207 border-radius: 6px;
208 font-size: 0.875rem;
209 font-weight: 500;
210 border: 1px solid transparent;
211 cursor: pointer;
212 }
213 .shithub-button-ghost {
214 color: var(--fg-default);
215 border-color: var(--border-default);
216 background: transparent;
217 }
218 .shithub-button-primary {
219 color: #fff;
220 background: var(--accent-emphasis);
221 border-color: var(--accent-emphasis);
222 }
223 .shithub-button-primary:hover { text-decoration: none; opacity: 0.92; }
224
225 /* ========== Main + Footer ========== */
226
227 .shithub-main {
228 flex: 1;
229 width: 100%;
230 }
231
232 .shithub-footer {
233 border-top: 1px solid var(--border-default);
234 background: var(--canvas-subtle);
235 padding: 1.25rem;
236 font-size: 0.85rem;
237 color: var(--fg-muted);
238 }
239 .shithub-footer-inner {
240 max-width: 1200px;
241 margin: 0 auto;
242 display: flex;
243 justify-content: space-between;
244 align-items: center;
245 gap: 1rem;
246 }
247 .shithub-footer-brand {
248 display: flex;
249 align-items: center;
250 gap: 0.4rem;
251 color: var(--fg-default);
252 }
253 .shithub-footer-brand svg { color: var(--shithub-mark); }
254 .shithub-footer-meta { color: var(--fg-muted); margin-left: 0.5rem; font-size: 0.8rem; }
255 .shithub-footer-links { display: flex; gap: 1rem; }
256
257 /* ========== Hello page ========== */
258
259 .hello {
260 max-width: 640px;
261 margin: 4rem auto;
262 padding: 2rem 1.5rem;
263 text-align: center;
264 }
265 .hello-logo {
266 margin: 0 auto 1.5rem;
267 width: 160px;
268 height: 160px;
269 color: var(--shithub-mark);
270 }
271 .hello-logo svg { width: 100%; height: 100%; }
272 .hello-title {
273 font-size: 2.75rem;
274 margin: 0 0 0.5rem;
275 letter-spacing: -0.02em;
276 }
277 .hello-tagline {
278 color: var(--fg-muted);
279 font-size: 1.15rem;
280 margin: 0 0 2rem;
281 }
282 .hello-meta {
283 display: grid;
284 grid-template-columns: max-content 1fr;
285 gap: 0.25rem 1rem;
286 max-width: 24rem;
287 margin: 0 auto 2rem;
288 padding: 1rem 1.5rem;
289 background: var(--canvas-subtle);
290 border: 1px solid var(--border-default);
291 border-radius: 6px;
292 text-align: left;
293 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
294 font-size: 0.875rem;
295 }
296 .hello-meta dt { color: var(--fg-muted); }
297 .hello-meta dd { margin: 0; }
298 .hello-status {
299 color: var(--fg-muted);
300 margin: 0 auto 2rem;
301 max-width: 36rem;
302 }
303 .hello-links {
304 display: flex;
305 justify-content: center;
306 gap: 1rem;
307 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
308 font-size: 0.875rem;
309 }
310
311 /* ========== Error pages ========== */
312
313 .error-page {
314 max-width: 540px;
315 margin: 6rem auto;
316 padding: 2rem 1.5rem;
317 text-align: center;
318 }
319 .error-glyph {
320 display: inline-flex;
321 width: 64px; height: 64px;
322 align-items: center; justify-content: center;
323 border-radius: 50%;
324 background: var(--canvas-subtle);
325 color: var(--danger-fg);
326 margin-bottom: 1.5rem;
327 }
328 .error-glyph svg { width: 32px; height: 32px; }
329 .error-status {
330 margin: 0;
331 font-size: 4rem;
332 letter-spacing: -0.04em;
333 color: var(--fg-default);
334 }
335 .error-title {
336 margin: 0 0 0.75rem;
337 font-size: 1.4rem;
338 font-weight: 500;
339 }
340 .error-detail {
341 color: var(--fg-muted);
342 margin: 0 0 2rem;
343 max-width: 36rem;
344 margin-left: auto;
345 margin-right: auto;
346 }
347 .error-hint a {
348 display: inline-block;
349 padding: 0.5rem 1rem;
350 border: 1px solid var(--border-default);
351 border-radius: 6px;
352 color: var(--fg-default);
353 }
354 .error-hint a:hover { text-decoration: none; background: var(--canvas-subtle); }
355 .error-request-id {
356 margin-top: 2rem;
357 color: var(--fg-muted);
358 font-size: 0.8rem;
359 }
360
361 /* ----- auth (S05) ----- */
362 .shithub-auth {
363 max-width: 28rem;
364 margin: 3rem auto;
365 padding: 2rem;
366 background: var(--canvas-default);
367 border: 1px solid var(--border-default);
368 border-radius: 8px;
369 }
370 .shithub-auth h1 {
371 margin: 0 0 1.5rem;
372 font-size: 1.5rem;
373 }
374 .shithub-auth form { display: grid; gap: 1rem; }
375 .shithub-auth label { display: grid; gap: 0.25rem; font-weight: 500; }
376 .shithub-auth input[type=text],
377 .shithub-auth input[type=email],
378 .shithub-auth input[type=password] {
379 font: inherit;
380 padding: 0.5rem 0.75rem;
381 border: 1px solid var(--border-default);
382 border-radius: 6px;
383 background: var(--canvas-subtle);
384 }
385 .shithub-auth-aside {
386 margin: 1.5rem 0 0;
387 text-align: center;
388 color: var(--fg-muted);
389 font-size: 0.9rem;
390 }
391 .shithub-flash {
392 margin: 0 0 1rem;
393 padding: 0.75rem 1rem;
394 border-radius: 6px;
395 border: 1px solid var(--border-default);
396 }
397 .shithub-flash-error { background: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.3); }
398 .shithub-flash-notice { background: rgba(56, 139, 253, 0.1); border-color: rgba(56, 139, 253, 0.3); }
399
400 /* ----- 2FA (S06) ----- */
401 .shithub-auth-wide { max-width: 32rem; }
402 .shithub-2fa-steps { margin: 0 0 1.5rem; padding-left: 1.25rem; }
403 .shithub-2fa-steps li { margin: 0.25rem 0; }
404 .shithub-2fa-qr {
405 display: flex;
406 justify-content: center;
407 margin: 1rem 0;
408 padding: 1rem;
409 background: #ffffff;
410 border-radius: 6px;
411 border: 1px solid var(--border-default);
412 }
413 .shithub-2fa-secret {
414 text-align: center;
415 font-family: monospace;
416 margin: 0 0 1.5rem;
417 color: var(--fg-muted);
418 }
419 .shithub-recovery-codes {
420 list-style: none;
421 margin: 1rem 0;
422 padding: 1rem;
423 display: grid;
424 grid-template-columns: repeat(2, 1fr);
425 gap: 0.5rem;
426 background: var(--canvas-subtle);
427 border-radius: 6px;
428 font-family: monospace;
429 font-size: 1.05em;
430 }
431 .shithub-recovery-codes li code { background: transparent; padding: 0; }
432 .shithub-button-danger { background: rgba(248, 81, 73, 0.15); border-color: rgba(248, 81, 73, 0.4); }
433
434 /* ----- SSH keys (S07) ----- */
435 .shithub-key-list { list-style: none; padding: 0; margin: 1rem 0 2rem; }
436 .shithub-key-row {
437 display: flex;
438 justify-content: space-between;
439 align-items: flex-start;
440 gap: 1rem;
441 padding: 0.75rem;
442 border: 1px solid var(--border-default);
443 border-radius: 6px;
444 margin-bottom: 0.5rem;
445 }
446 .shithub-key-meta { margin-left: 0.75rem; color: var(--fg-muted); font-size: 0.85rem; }
447 .shithub-key-fp { display: block; margin-top: 0.25rem; font-size: 0.85rem; word-break: break-all; }
448 .shithub-key-last { display: block; margin-top: 0.25rem; color: var(--fg-muted); font-size: 0.8rem; }
449 .shithub-key-empty { color: var(--fg-muted); margin: 1rem 0 2rem; }
450
451 /* ----- profile (S09) ----- */
452 .shithub-profile { max-width: 56rem; margin: 2rem auto; padding: 0 1rem; }
453 .shithub-profile-header { display: flex; gap: 1.5rem; align-items: flex-start; }
454 .shithub-profile-avatar { width: 200px; height: 200px; border-radius: 50%; background: var(--canvas-subtle); border: 1px solid var(--border-default); }
455 .shithub-profile-id h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
456 .shithub-profile-handle { margin: 0; color: var(--fg-muted); }
457 .shithub-profile-pronouns { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: 0.9rem; }
458 .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; }
459 .shithub-profile-id .shithub-button { margin-top: 0.75rem; display: inline-block; }
460 .shithub-profile-bio { margin: 1.5rem 0; font-size: 1.05rem; }
461 .shithub-profile-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 1rem 0; }
462 .shithub-profile-meta dt { color: var(--fg-muted); font-weight: 500; }
463 .shithub-profile-meta dd { margin: 0; }
464 .shithub-profile-pinned, .shithub-profile-contributions, .shithub-profile-readme { margin: 2rem 0; }
465 .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); }
466 .shithub-empty { color: var(--fg-muted); font-style: italic; padding: 1rem; background: var(--canvas-subtle); border-radius: 6px; }
467 .shithub-profile-unavailable h1 { color: var(--fg-muted); }
468
469 /* ----- settings shell (S10) ----- */
470 .shithub-settings-page {
471 max-width: 64rem;
472 margin: 2rem auto;
473 padding: 0 1rem;
474 display: grid;
475 grid-template-columns: 220px 1fr;
476 gap: 2rem;
477 align-items: start;
478 }
479 .shithub-settings-side { font-size: 0.9rem; }
480 .shithub-settings-side-title {
481 margin: 0 0 0.75rem;
482 font-size: 1.5rem;
483 font-weight: 400;
484 padding-bottom: 0.5rem;
485 border-bottom: 1px solid var(--border-default);
486 }
487 .shithub-settings-side nav ul {
488 list-style: none;
489 padding: 0;
490 margin: 0 0 1rem;
491 }
492 .shithub-settings-side nav li {
493 border-radius: 6px;
494 }
495 .shithub-settings-side nav li.active {
496 background: var(--canvas-subtle);
497 border-left: 2px solid var(--accent-emphasis);
498 }
499 .shithub-settings-side nav li a {
500 display: block;
501 padding: 0.4rem 0.75rem;
502 color: var(--fg-default);
503 text-decoration: none;
504 border-radius: 6px;
505 }
506 .shithub-settings-side nav li a:hover { background: var(--canvas-subtle); }
507 .shithub-settings-side nav li.active a { font-weight: 500; }
508 .shithub-settings-side-group {
509 margin: 1.25rem 0 0.5rem;
510 padding-top: 0.75rem;
511 border-top: 1px solid var(--border-default);
512 font-size: 0.75rem;
513 font-weight: 600;
514 text-transform: uppercase;
515 letter-spacing: 0.05em;
516 color: var(--fg-muted);
517 }
518 .shithub-settings-danger { color: #cf222e; }
519
520 .shithub-settings-content { min-width: 0; }
521 .shithub-settings-content > h1 {
522 margin: 0 0 1.5rem;
523 padding-bottom: 0.75rem;
524 border-bottom: 1px solid var(--border-default);
525 font-size: 1.5rem;
526 font-weight: 400;
527 }
528 .shithub-settings-section {
529 margin: 0 0 2rem;
530 padding-bottom: 1.5rem;
531 border-bottom: 1px solid var(--border-muted, var(--border-default));
532 }
533 .shithub-settings-section:last-child { border-bottom: none; }
534 .shithub-settings-section h2 {
535 margin: 0 0 0.5rem;
536 font-size: 1rem;
537 font-weight: 600;
538 }
539 .shithub-settings-section p { margin: 0 0 1rem; color: var(--fg-muted); }
540 .shithub-settings-section form { display: grid; gap: 0.85rem; max-width: 32rem; }
541 .shithub-settings-section label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
542 .shithub-settings-section input[type=text],
543 .shithub-settings-section input[type=email],
544 .shithub-settings-section input[type=password],
545 .shithub-settings-section input[type=url],
546 .shithub-settings-section textarea,
547 .shithub-settings-section select {
548 font: inherit;
549 padding: 0.5rem 0.75rem;
550 border: 1px solid var(--border-default);
551 border-radius: 6px;
552 background: var(--canvas-subtle);
553 }
554 .shithub-settings-section textarea { min-height: 4rem; resize: vertical; }
555 .shithub-settings-section .shithub-button { justify-self: start; }
556
557 .shithub-settings-danger-zone {
558 border: 1px solid rgba(207, 34, 46, 0.4);
559 border-radius: 6px;
560 padding: 1rem 1.25rem;
561 background: rgba(207, 34, 46, 0.04);
562 }
563 .shithub-settings-danger-zone h2 { color: #cf222e; }
564
565 .shithub-settings-section label small {
566 font-weight: 400;
567 color: var(--fg-muted);
568 font-size: 0.8rem;
569 }
570
571 .shithub-profile-edit {
572 display: grid;
573 grid-template-columns: minmax(0, 1fr) 220px;
574 gap: 2rem;
575 align-items: start;
576 }
577 .shithub-profile-edit-form { margin: 0; padding: 0; border: none; }
578 .shithub-profile-edit-aside h2 { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 600; }
579 .shithub-profile-edit-avatar {
580 width: 200px;
581 height: 200px;
582 border-radius: 50%;
583 border: 1px solid var(--border-default);
584 background: var(--canvas-subtle);
585 display: block;
586 }
587 .shithub-empty-note {
588 margin: 0.5rem 0 0;
589 font-size: 0.8rem;
590 color: var(--fg-muted);
591 }
592 .shithub-profile-edit-aside form {
593 margin: 0.75rem 0 0;
594 display: grid;
595 gap: 0.5rem;
596 }
597 .shithub-profile-edit-upload span {
598 display: block;
599 font-size: 0.85rem;
600 font-weight: 500;
601 margin-bottom: 0.25rem;
602 }
603 .shithub-profile-edit-upload input[type=file] {
604 font-size: 0.85rem;
605 }
606
607 @media (max-width: 720px) {
608 .shithub-settings-page {
609 grid-template-columns: 1fr;
610 }
611 .shithub-profile-edit {
612 grid-template-columns: 1fr;
613 }
614 }
615
616 /* ----- theme picker (S10) ----- */
617 .shithub-theme-grid {
618 border: none;
619 padding: 0;
620 margin: 0 0 1rem;
621 display: grid;
622 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
623 gap: 0.75rem;
624 }
625 .shithub-theme-grid legend {
626 padding: 0;
627 margin: 0 0 0.5rem;
628 font-size: 0.85rem;
629 font-weight: 500;
630 }
631 .shithub-theme-card {
632 display: grid;
633 gap: 0.25rem;
634 padding: 0.85rem 1rem;
635 border: 1px solid var(--border-default);
636 border-radius: 8px;
637 background: var(--canvas-subtle);
638 cursor: pointer;
639 position: relative;
640 transition: border-color 120ms;
641 }
642 .shithub-theme-card:hover { border-color: var(--accent-emphasis); }
643 .shithub-theme-card.active {
644 border-color: var(--accent-emphasis);
645 box-shadow: 0 0 0 1px var(--accent-emphasis) inset;
646 }
647 .shithub-theme-card input[type=radio] {
648 position: absolute;
649 top: 0.6rem;
650 right: 0.6rem;
651 }
652 .shithub-theme-card-title {
653 font-weight: 600;
654 font-size: 0.95rem;
655 }
656 .shithub-theme-card-desc {
657 font-size: 0.8rem;
658 color: var(--fg-muted);
659 }
660
661 /* ----- emails (S10) ----- */
662 .shithub-email-list {
663 list-style: none;
664 padding: 0;
665 margin: 1rem 0 0;
666 display: grid;
667 gap: 0.5rem;
668 }
669 .shithub-email-row {
670 display: flex;
671 justify-content: space-between;
672 align-items: center;
673 gap: 1rem;
674 padding: 0.75rem 1rem;
675 border: 1px solid var(--border-default);
676 border-radius: 6px;
677 background: var(--canvas-subtle);
678 }
679 .shithub-email-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
680 .shithub-email-addr { background: transparent; padding: 0; font-weight: 500; }
681 .shithub-email-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
682 .shithub-email-actions form { display: inline; }
683 .shithub-pill {
684 font-size: 0.7rem;
685 padding: 0.1rem 0.5rem;
686 border-radius: 999px;
687 border: 1px solid var(--border-default);
688 text-transform: uppercase;
689 letter-spacing: 0.04em;
690 font-weight: 600;
691 }
692 .shithub-pill-primary { background: rgba(56, 139, 253, 0.15); border-color: rgba(56, 139, 253, 0.4); }
693 .shithub-pill-verified { background: rgba(63, 185, 80, 0.15); border-color: rgba(63, 185, 80, 0.4); }
694 .shithub-pill-unverified { background: rgba(187, 128, 9, 0.15); border-color: rgba(187, 128, 9, 0.4); }
695
696 /* ----- notifications (S10) ----- */
697 .shithub-notif-form { display: grid; gap: 0.75rem; max-width: 36rem; }
698 .shithub-notif-row {
699 display: grid;
700 grid-template-columns: max-content 1fr;
701 gap: 0.75rem;
702 padding: 0.75rem 1rem;
703 border: 1px solid var(--border-default);
704 border-radius: 6px;
705 background: var(--canvas-subtle);
706 align-items: start;
707 }
708 .shithub-notif-row.required { background: rgba(56, 139, 253, 0.06); }
709 .shithub-notif-row strong { display: block; font-size: 0.95rem; }
710 .shithub-notif-row small { display: block; color: var(--fg-muted); font-size: 0.85rem; }
711
712 .shithub-session-meta {
713 display: grid;
714 grid-template-columns: max-content 1fr;
715 gap: 0.25rem 1rem;
716 margin: 0;
717 }
718 .shithub-session-meta dt { color: var(--fg-muted); font-weight: 500; }
719 .shithub-session-meta dd { margin: 0; word-break: break-all; }
720
721 /* ----- repo create + empty home (S11) ----- */
722 .shithub-repo-new {
723 max-width: 56rem;
724 margin: 2rem auto;
725 padding: 0 1rem;
726 }
727 .shithub-repo-new h1 {
728 margin: 0 0 0.5rem;
729 font-size: 1.5rem;
730 font-weight: 400;
731 }
732 .shithub-repo-new-lede {
733 margin: 0 0 1.5rem;
734 color: var(--fg-muted);
735 padding-bottom: 1rem;
736 border-bottom: 1px solid var(--border-default);
737 }
738 .shithub-repo-new-form {
739 display: grid;
740 gap: 1.25rem;
741 max-width: 36rem;
742 }
743 .shithub-repo-new-form label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
744 .shithub-repo-new-form input[type=text],
745 .shithub-repo-new-form select {
746 font: inherit;
747 padding: 0.5rem 0.75rem;
748 border: 1px solid var(--border-default);
749 border-radius: 6px;
750 background: var(--canvas-subtle);
751 }
752 .shithub-repo-new-form em { color: #cf222e; font-style: normal; }
753 .shithub-repo-new-form small { font-weight: 400; color: var(--fg-muted); font-size: 0.8rem; }
754
755 .shithub-repo-new-visibility, .shithub-repo-new-init {
756 border: none;
757 padding: 0;
758 margin: 0;
759 display: grid;
760 gap: 0.5rem;
761 }
762 .shithub-repo-new-visibility legend, .shithub-repo-new-init legend {
763 padding: 0;
764 font-size: 0.85rem;
765 font-weight: 600;
766 margin-bottom: 0.5rem;
767 }
768 .shithub-repo-new-vis-card,
769 .shithub-repo-new-init-row {
770 display: grid;
771 grid-template-columns: max-content 1fr;
772 gap: 0.75rem;
773 padding: 0.75rem 1rem;
774 border: 1px solid var(--border-default);
775 border-radius: 6px;
776 background: var(--canvas-subtle);
777 }
778 .shithub-repo-new-vis-card.active { border-color: var(--accent-emphasis); }
779 .shithub-repo-new-vis-card strong,
780 .shithub-repo-new-init-row strong { display: block; font-size: 0.95rem; }
781 .shithub-repo-new-vis-card small,
782 .shithub-repo-new-init-row small { display: block; color: var(--fg-muted); font-size: 0.85rem; }
783
784 .shithub-repo-empty {
785 max-width: 56rem;
786 margin: 2rem auto;
787 padding: 0 1rem;
788 }
789 .shithub-repo-empty-head h1 {
790 margin: 0 0 0.5rem;
791 font-size: 1.4rem;
792 font-weight: 400;
793 display: flex;
794 align-items: center;
795 gap: 0.4rem;
796 }
797 .shithub-repo-empty-sep { color: var(--fg-muted); }
798 .shithub-repo-empty-desc {
799 margin: 0 0 1rem;
800 color: var(--fg-muted);
801 }
802 .shithub-pill-private { background: rgba(187, 128, 9, 0.15); border-color: rgba(187, 128, 9, 0.4); }
803 .shithub-repo-empty-quickstart {
804 margin-top: 1rem;
805 padding: 1.25rem;
806 border: 1px solid var(--border-default);
807 border-radius: 8px;
808 background: var(--canvas-subtle);
809 }
810 .shithub-repo-empty-quickstart h2 { margin: 0 0 0.5rem; font-size: 1rem; }
811 .shithub-repo-empty-quickstart h3 { margin: 1.25rem 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
812 .shithub-repo-empty-clone { display: grid; gap: 0.5rem; margin: 0.75rem 0; }
813 .shithub-repo-empty-clone label { display: grid; grid-template-columns: 70px 1fr; gap: 0.5rem; align-items: center; }
814 .shithub-repo-empty-clone span { font-size: 0.8rem; color: var(--fg-muted); font-weight: 600; }
815 .shithub-repo-empty-clone input {
816 font: inherit;
817 font-family: monospace;
818 font-size: 0.85rem;
819 padding: 0.5rem 0.75rem;
820 border: 1px solid var(--border-default);
821 border-radius: 6px;
822 background: var(--canvas-default);
823 }
824 .shithub-repo-empty-quickstart pre {
825 padding: 0.75rem 1rem;
826 border: 1px solid var(--border-default);
827 border-radius: 6px;
828 background: var(--canvas-default);
829 font-size: 0.85rem;
830 overflow-x: auto;
831 }
832
833 /* Populated-repo placeholder (S17 will replace with real tree view) */
834 .shithub-repo-populated {
835 max-width: 56rem;
836 margin: 2rem auto;
837 padding: 0 1rem;
838 }
839 .shithub-repo-populated-head h1 {
840 margin: 0 0 0.5rem;
841 font-size: 1.4rem;
842 font-weight: 400;
843 display: flex;
844 align-items: center;
845 gap: 0.4rem;
846 }
847 .shithub-repo-populated-sep { color: var(--fg-muted); }
848 .shithub-repo-populated-desc { margin: 0 0 1rem; color: var(--fg-muted); }
849 .shithub-repo-headcommit {
850 margin-top: 1rem;
851 padding: 0.85rem 1rem;
852 border: 1px solid var(--border-default);
853 border-radius: 8px;
854 background: var(--canvas-subtle);
855 }
856 .shithub-repo-headcommit-meta {
857 display: flex;
858 flex-wrap: wrap;
859 gap: 0.75rem;
860 font-size: 0.85rem;
861 color: var(--fg-muted);
862 align-items: center;
863 }
864 .shithub-repo-headcommit-branch {
865 font-weight: 600;
866 color: var(--fg-default);
867 padding: 0.1rem 0.5rem;
868 border: 1px solid var(--border-default);
869 border-radius: 999px;
870 background: var(--canvas-default);
871 font-size: 0.75rem;
872 }
873 .shithub-repo-headcommit-oid { font-family: monospace; }
874 .shithub-repo-headcommit-author { color: var(--fg-default); }
875 .shithub-repo-headcommit-subject { margin: 0.5rem 0 0; font-size: 0.95rem; }
876 .shithub-repo-headcommit-other-branch p { margin: 0; font-size: 0.9rem; color: var(--fg-muted); }
877 .shithub-repo-populated-clone {
878 margin-top: 1rem;
879 display: grid;
880 gap: 0.5rem;
881 }
882 .shithub-repo-populated-clone label { display: grid; grid-template-columns: 70px 1fr; gap: 0.5rem; align-items: center; }
883 .shithub-repo-populated-clone span { font-size: 0.8rem; color: var(--fg-muted); font-weight: 600; }
884 .shithub-repo-populated-clone input {
885 font: inherit;
886 font-family: monospace;
887 font-size: 0.85rem;
888 padding: 0.5rem 0.75rem;
889 border: 1px solid var(--border-default);
890 border-radius: 6px;
891 background: var(--canvas-default);
892 }
893 .shithub-repo-populated-note { margin-top: 1rem; font-size: 0.8rem; color: var(--fg-muted); }
894
895 /* ========== Code tab (S17) ========== */
896 .shithub-code, .shithub-blob, .shithub-finder {
897 max-width: 64rem;
898 margin: 1.5rem auto;
899 padding: 0 1rem;
900 }
901 .shithub-code-head {
902 display: flex;
903 align-items: center;
904 justify-content: space-between;
905 margin-bottom: 1rem;
906 padding-bottom: 0.5rem;
907 border-bottom: 1px solid var(--border-default);
908 }
909 .shithub-code-crumbs { font-size: 1rem; }
910 .shithub-code-crumbs a { color: var(--fg-default); }
911 .shithub-code-sep { color: var(--fg-muted); margin: 0 0.25rem; }
912 .shithub-code-actions { display: flex; gap: 0.5rem; align-items: center; }
913
914 .shithub-ref-switcher { position: relative; }
915 .shithub-ref-switcher > summary {
916 list-style: none;
917 display: inline-flex;
918 align-items: center;
919 padding: 0.3rem 0.7rem;
920 border: 1px solid var(--border-default);
921 border-radius: 6px;
922 cursor: pointer;
923 font-size: 0.875rem;
924 }
925 .shithub-ref-switcher > summary::-webkit-details-marker { display: none; }
926 .shithub-ref-panel {
927 position: absolute;
928 z-index: 30;
929 top: calc(100% + 0.4rem);
930 left: 0;
931 min-width: 220px;
932 max-height: 360px;
933 overflow-y: auto;
934 background: var(--canvas-default);
935 border: 1px solid var(--border-default);
936 border-radius: 6px;
937 padding: 0.5rem;
938 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
939 }
940 .shithub-ref-panel a {
941 display: block;
942 padding: 0.3rem 0.4rem;
943 color: var(--fg-default);
944 font-size: 0.875rem;
945 }
946 .shithub-ref-panel strong { display: block; margin: 0.4rem 0 0.2rem; font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; }
947
948 .shithub-tree {
949 width: 100%;
950 border-collapse: collapse;
951 font-size: 0.9rem;
952 }
953 .shithub-tree td {
954 padding: 0.4rem 0.5rem;
955 border-bottom: 1px solid var(--border-default);
956 }
957 .shithub-tree-icon { width: 24px; color: var(--fg-muted); }
958 .shithub-tree-icon svg { display: block; }
959 .shithub-tree-name a { color: var(--fg-default); }
960 .shithub-tree-size { width: 100px; text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
961 .shithub-tree-symlink, .shithub-tree-submodule { color: var(--fg-muted); font-style: italic; font-size: 0.8rem; }
962
963 .shithub-readme {
964 margin-top: 2rem;
965 padding: 1.25rem;
966 border: 1px solid var(--border-default);
967 border-radius: 6px;
968 background: var(--canvas-subtle);
969 }
970 .shithub-readme h1, .shithub-readme h2 { border-bottom: 1px solid var(--border-default); padding-bottom: 0.3rem; }
971 .shithub-readme code { font-family: monospace; padding: 0.1em 0.3em; background: var(--canvas-default); border-radius: 3px; }
972 .shithub-readme pre code { padding: 0; background: none; }
973 .shithub-readme-plain { white-space: pre-wrap; }
974
975 .shithub-blob-meta { color: var(--fg-muted); font-size: 0.85rem; margin-right: 0.5rem; }
976 .shithub-blob-too-large, .shithub-blob-binary {
977 padding: 1rem;
978 border: 1px dashed var(--border-default);
979 border-radius: 6px;
980 text-align: center;
981 color: var(--fg-muted);
982 }
983 .shithub-blob-image { text-align: center; padding: 1rem; background: var(--canvas-subtle); border-radius: 6px; }
984 .shithub-blob-image img { max-width: 100%; max-height: 80vh; }
985 .shithub-blob-source { overflow-x: auto; }
986 .shithub-blob-source .chroma { font-size: 0.85rem; }
987 .shithub-blob-markdown { padding: 1rem; }
988 .shithub-button-disabled { opacity: 0.5; pointer-events: none; }
989
990 .shithub-finder-form { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }
991 .shithub-finder-form input { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; flex: 1; }
992 .shithub-finder-results { list-style: none; padding: 0; }
993 .shithub-finder-results li { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-default); font-family: monospace; font-size: 0.875rem; }
994
995 /* ========== Commits + Commit + Blame (S18) ========== */
996 .shithub-avatar-sm {
997 display: inline-block;
998 width: 20px;
999 height: 20px;
1000 border-radius: 50%;
1001 vertical-align: middle;
1002 margin-right: 0.4rem;
1003 }
1004 .shithub-identicon {
1005 background: linear-gradient(135deg, #cce, #ecc);
1006 }
1007 .shithub-commits-filter {
1008 display: flex;
1009 gap: 0.5rem;
1010 align-items: end;
1011 flex-wrap: wrap;
1012 margin: 1rem 0;
1013 }
1014 .shithub-commits-filter input {
1015 padding: 0.3rem 0.5rem;
1016 border: 1px solid var(--border-default);
1017 border-radius: 6px;
1018 font: inherit;
1019 }
1020 .shithub-commits-list { list-style: none; padding: 0; margin: 0; }
1021 .shithub-commits-row {
1022 display: grid;
1023 grid-template-columns: 220px 1fr;
1024 gap: 0.75rem;
1025 padding: 0.6rem 0.5rem;
1026 border-bottom: 1px solid var(--border-default);
1027 align-items: start;
1028 }
1029 .shithub-commits-author { color: var(--fg-muted); font-size: 0.875rem; }
1030 .shithub-commits-meta { display: flex; flex-direction: column; gap: 0.2rem; }
1031 .shithub-commits-subject { color: var(--fg-default); font-weight: 500; }
1032 .shithub-commits-sha { color: var(--fg-muted); font-size: 0.8rem; }
1033 .shithub-pager { display: flex; gap: 1rem; padding: 1rem 0; }
1034
1035 .shithub-commit-view { max-width: 64rem; margin: 1.5rem auto; padding: 0 1rem; }
1036 .shithub-commit-meta {
1037 margin-top: 1rem;
1038 padding: 1rem;
1039 border: 1px solid var(--border-default);
1040 border-radius: 6px;
1041 background: var(--canvas-subtle);
1042 }
1043 .shithub-commit-subject { margin: 0 0 0.5rem; font-size: 1.2rem; }
1044 .shithub-commit-body { margin: 0.75rem 0; font-family: monospace; font-size: 0.9rem; line-height: 1.4; }
1045 .shithub-commit-people { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.75rem 0; font-size: 0.875rem; }
1046 .shithub-commit-actor { display: inline-flex; align-items: center; gap: 0.4rem; }
1047 .shithub-commit-role { color: var(--fg-muted); font-weight: 500; }
1048 .shithub-commit-refs { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; font-size: 0.875rem; }
1049 .shithub-commit-refs dt { color: var(--fg-muted); }
1050 .shithub-commit-refs dd { margin: 0; font-family: monospace; }
1051
1052 .shithub-commit-files { margin-top: 1.5rem; }
1053 .shithub-commit-files-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
1054 .shithub-commit-files-table th, .shithub-commit-files-table td {
1055 padding: 0.4rem 0.6rem;
1056 border-bottom: 1px solid var(--border-default);
1057 text-align: left;
1058 }
1059 .shithub-num-col { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
1060 .shithub-add { color: #22863a; }
1061 .shithub-del { color: #cb2431; }
1062 .shithub-status-A { color: #22863a; font-weight: 600; }
1063 .shithub-status-M { color: #b08800; font-weight: 600; }
1064 .shithub-status-D { color: #cb2431; font-weight: 600; }
1065 .shithub-status-R { color: #6f42c1; font-weight: 600; }
1066 .shithub-status-C { color: #0366d6; font-weight: 600; }
1067
1068 .shithub-blame-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 0.85rem; }
1069 .shithub-blame-chunk-header td {
1070 padding: 0.4rem 0.6rem;
1071 background: var(--canvas-subtle);
1072 border-top: 1px solid var(--border-default);
1073 font-family: var(--shithub-font-default, sans-serif);
1074 font-size: 0.8rem;
1075 color: var(--fg-muted);
1076 display: flex;
1077 gap: 0.4rem;
1078 align-items: center;
1079 }
1080 .shithub-blame-lineno { width: 50px; text-align: right; padding-right: 0.5rem; color: var(--fg-muted); }
1081 .shithub-blame-lineno a { color: inherit; }
1082 .shithub-blame-content pre { margin: 0; white-space: pre; }
1083 .shithub-blame-too-large {
1084 padding: 1rem;
1085 border: 1px dashed var(--border-default);
1086 border-radius: 6px;
1087 text-align: center;
1088 color: var(--fg-muted);
1089 }
1090
1091 /* ========== Diff renderer (S19) ========== */
1092 .shithub-commit-files-head {
1093 display: flex;
1094 align-items: center;
1095 justify-content: space-between;
1096 margin-bottom: 0.5rem;
1097 }
1098 .shithub-diff-toggles { display: flex; gap: 0.25rem; }
1099 .shithub-diff-body { margin-top: 1rem; }
1100 .shithub-diff-file {
1101 margin-top: 1rem;
1102 border: 1px solid var(--border-default);
1103 border-radius: 6px;
1104 overflow: hidden;
1105 }
1106 .shithub-diff-file-head {
1107 display: flex;
1108 align-items: center;
1109 justify-content: space-between;
1110 gap: 0.75rem;
1111 padding: 0.5rem 0.75rem;
1112 background: var(--canvas-subtle);
1113 border-bottom: 1px solid var(--border-default);
1114 font-size: 0.875rem;
1115 }
1116 .shithub-diff-file-action { color: var(--fg-muted); font-style: italic; }
1117 .shithub-diff-binary, .shithub-diff-image, .shithub-diff-empty, .shithub-diff-truncated {
1118 padding: 1rem;
1119 text-align: center;
1120 color: var(--fg-muted);
1121 }
1122 .shithub-diff-file-toolarge { padding: 0.5rem 0.75rem; }
1123 .shithub-diff-file-toolarge > summary { cursor: pointer; color: var(--fg-muted); }
1124 .shithub-diff-table {
1125 width: 100%;
1126 border-collapse: collapse;
1127 font-family: monospace;
1128 font-size: 0.85rem;
1129 table-layout: fixed;
1130 }
1131 .shithub-diff-table td { padding: 0 0.5rem; vertical-align: top; }
1132 .shithub-diff-table pre { margin: 0; white-space: pre; }
1133 .shithub-diff-lineno {
1134 width: 50px;
1135 text-align: right;
1136 color: var(--fg-muted);
1137 user-select: none;
1138 background: var(--canvas-subtle);
1139 }
1140 .shithub-diff-content { width: auto; }
1141 .shithub-diff-add { background: rgba(46, 160, 67, 0.10); }
1142 .shithub-diff-del { background: rgba(248, 81, 73, 0.10); }
1143 .shithub-diff-add .shithub-diff-content { background: rgba(46, 160, 67, 0.05); }
1144 .shithub-diff-del .shithub-diff-content { background: rgba(248, 81, 73, 0.05); }
1145 .shithub-diff-pad { background: var(--canvas-subtle); }
1146 .shithub-diff-hunk-head td {
1147 padding: 0.4rem 0.75rem;
1148 background: var(--canvas-default);
1149 border-top: 1px solid var(--border-default);
1150 border-bottom: 1px solid var(--border-default);
1151 color: var(--fg-muted);
1152 }
1153 .shithub-diff-split td.shithub-diff-content {
1154 width: 50%;
1155 border-left: 1px solid var(--border-default);
1156 }
1157
1158 /* ========== Branches/Tags/Compare/Settings (S20) ========== */
1159 .shithub-branches, .shithub-tags, .shithub-compare, .shithub-settings-branches {
1160 max-width: 64rem;
1161 margin: 1.5rem auto;
1162 padding: 0 1rem;
1163 }
1164 .shithub-branches-filter { display: flex; gap: 0.4rem; }
1165 .shithub-branches-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
1166 .shithub-branches-table th, .shithub-branches-table td {
1167 padding: 0.5rem 0.75rem;
1168 text-align: left;
1169 border-bottom: 1px solid var(--border-default);
1170 }
1171 .shithub-branches-subject { color: var(--fg-default); }
1172 .shithub-compare-summary { padding: 0.75rem 1rem; background: var(--canvas-subtle); border-radius: 6px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
1173 .shithub-compare-empty { padding: 1.5rem; text-align: center; color: var(--fg-muted); border: 1px dashed var(--border-default); border-radius: 6px; }
1174 .shithub-compare-commits { margin-top: 1.5rem; }
1175 .shithub-settings-branches form label { display: block; margin: 0.5rem 0; }
1176 .shithub-settings-branches form input[type=text],
1177 .shithub-settings-branches form select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; min-width: 280px; }
1178
1179 /* ========== Issues / Labels / Milestones (S21) ========== */
1180 .shithub-issues, .shithub-issue-view, .shithub-issue-new, .shithub-labels, .shithub-milestones {
1181 max-width: 64rem;
1182 margin: 1.5rem auto;
1183 padding: 0 1rem;
1184 }
1185 .shithub-issues-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
1186 .shithub-issues-actions { display: flex; gap: 0.4rem; }
1187 .shithub-issues-filter { display: flex; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); margin: 1rem 0; }
1188 .shithub-issues-tab { color: var(--fg-muted); padding: 0.25rem 0; border-bottom: 2px solid transparent; }
1189 .shithub-issues-tab-active { color: var(--fg-default); border-bottom-color: var(--accent-emphasis, #0969da); font-weight: 600; }
1190 .shithub-issues-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; vertical-align: middle; margin-right: 0.25rem; }
1191 .shithub-issues-dot-open { background: #1a7f37; }
1192 .shithub-issues-dot-closed { background: #8250df; }
1193 .shithub-issues-list { list-style: none; padding: 0; margin: 0; }
1194 .shithub-issues-row {
1195 display: flex; gap: 0.75rem; align-items: flex-start;
1196 padding: 0.75rem 0.5rem;
1197 border-bottom: 1px solid var(--border-default);
1198 }
1199 .shithub-issues-state { font-size: 1.1rem; line-height: 1.2; }
1200 .shithub-issues-state-open { color: #1a7f37; }
1201 .shithub-issues-state-closed { color: #8250df; }
1202 .shithub-issues-body { flex: 1; }
1203 .shithub-issues-title { font-weight: 600; color: var(--fg-default); }
1204 .shithub-issues-title:hover { color: var(--accent-emphasis, #0969da); }
1205 .shithub-issues-meta { color: var(--fg-muted); font-size: 0.85rem; margin-top: 0.2rem; }
1206 .shithub-issues-assignees { font-size: 0.85rem; }
1207 .shithub-issues-empty { color: var(--fg-muted); padding: 2rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
1208 .shithub-issue-num { color: var(--fg-muted); font-weight: 400; margin-left: 0.5rem; }
1209 .shithub-issue-title { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
1210 .shithub-issue-meta { color: var(--fg-muted); margin: 0.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
1211 .shithub-issue-grid { display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; }
1212 @media (max-width: 768px) { .shithub-issue-grid { grid-template-columns: 1fr; } }
1213 .shithub-comment {
1214 border: 1px solid var(--border-default);
1215 border-radius: 6px;
1216 margin-bottom: 1rem;
1217 background: var(--canvas-default);
1218 }
1219 .shithub-comment-head {
1220 padding: 0.5rem 0.75rem;
1221 background: var(--canvas-subtle);
1222 border-bottom: 1px solid var(--border-default);
1223 font-size: 0.9rem;
1224 color: var(--fg-muted);
1225 }
1226 .shithub-comment-body { padding: 0.75rem; }
1227 .shithub-event { color: var(--fg-muted); font-size: 0.85rem; padding: 0.4rem 0.75rem; border-left: 2px solid var(--border-default); margin-left: 0.75rem; }
1228 .shithub-event-kind { text-transform: lowercase; }
1229 .shithub-comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
1230 .shithub-comment-form textarea, .shithub-issue-form textarea, .shithub-issue-form input[type=text] {
1231 font: inherit; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; width: 100%;
1232 resize: vertical;
1233 }
1234 .shithub-issue-form { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
1235 .shithub-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
1236 .shithub-form-row span { font-weight: 600; font-size: 0.9rem; }
1237 .shithub-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
1238 .shithub-issue-sidebar section { padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); }
1239 .shithub-issue-sidebar h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 0 0 0.5rem; }
1240 .shithub-issue-signedout { color: var(--fg-muted); padding: 1rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
1241 .shithub-label {
1242 display: inline-block;
1243 font-size: 0.75rem;
1244 padding: 0.1rem 0.5rem;
1245 border-radius: 1rem;
1246 color: #1f2328;
1247 font-weight: 500;
1248 margin: 0 0.15rem;
1249 }
1250 .shithub-label-pick { display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0; }
1251 .shithub-assignee-form { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.5rem; }
1252 .shithub-assignee-form input[type=text] { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; }
1253 .shithub-labels-list, .shithub-milestones-list { list-style: none; padding: 0; }
1254 .shithub-labels-row, .shithub-milestones-row {
1255 padding: 0.75rem 0;
1256 border-bottom: 1px solid var(--border-default);
1257 display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
1258 }
1259 .shithub-label-form, .shithub-milestone-form { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0; }
1260 .shithub-label-form input, .shithub-milestone-form input, .shithub-milestone-form textarea {
1261 padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1262 }
1263 .shithub-button-danger { color: #cf222e; }
1264 .shithub-error { padding: 0.75rem; background: #ffebe9; border: 1px solid #ffcecb; border-radius: 6px; color: #82061e; margin-bottom: 1rem; }
1265 .shithub-muted { color: var(--fg-muted); }
1266
1267 /* ========== Pull Requests (S22) ========== */
1268 .shithub-pulls, .shithub-pull-view {
1269 max-width: 64rem;
1270 margin: 1.5rem auto;
1271 padding: 0 1rem;
1272 }
1273 .shithub-pull-head { margin-bottom: 0.75rem; }
1274 .shithub-pull-merged { background: #8250df22; color: #8250df; }
1275 .shithub-pull-tabs {
1276 display: flex; gap: 1.5rem;
1277 border-bottom: 1px solid var(--border-default);
1278 margin: 0.75rem 0 1rem;
1279 }
1280 .shithub-pull-tab {
1281 color: var(--fg-muted);
1282 padding: 0.4rem 0;
1283 border-bottom: 2px solid transparent;
1284 }
1285 .shithub-pull-tab-active {
1286 color: var(--fg-default);
1287 border-bottom-color: var(--accent-emphasis, #0969da);
1288 font-weight: 600;
1289 }
1290 .shithub-pull-grid { display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; }
1291 @media (max-width: 768px) { .shithub-pull-grid { grid-template-columns: 1fr; } }
1292 .shithub-pull-merge { padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 6px; }
1293 .shithub-pull-merge h3 { font-size: 0.85rem; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.5rem; }
1294 .shithub-pull-state-clean { color: #1a7f37; font-weight: 600; }
1295 .shithub-pull-state-dirty { color: #cf222e; font-weight: 600; }
1296 .shithub-pull-state-behind { color: #9a6700; }
1297 .shithub-pull-state-unknown { color: var(--fg-muted); }
1298 .shithub-pull-merge-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
1299 .shithub-pull-merge-form select { padding: 0.4rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit; }
1300 .shithub-pull-state-form { margin-top: 0.5rem; }
1301 .shithub-pull-refs { display: flex; gap: 0.4rem; align-items: flex-end; }
1302 .shithub-pull-refs label { flex: 1; }
1303 .shithub-pull-arrow { font-size: 1.4rem; padding: 0 0.4rem; align-self: center; }
1304 .shithub-pull-commits { list-style: none; padding: 0; }
1305 .shithub-pull-commits li {
1306 padding: 0.4rem 0; border-bottom: 1px solid var(--border-default);
1307 display: flex; gap: 0.6rem; align-items: baseline;
1308 }
1309
1310 /* ========== PR Reviews (S23) ========== */
1311 .shithub-pull-reviews, .shithub-pull-reviewers {
1312 border-top: 1px solid var(--border-default);
1313 padding: 0.6rem 0;
1314 }
1315 .shithub-pull-reviews h3, .shithub-pull-reviewers h3 {
1316 font-size: 0.85rem; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.4rem;
1317 }
1318 .shithub-pull-reviews-list, .shithub-pull-reviewers-list {
1319 list-style: none; padding: 0; margin: 0; font-size: 0.9rem;
1320 }
1321 .shithub-pull-reviews-list li { padding: 0.2rem 0; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: baseline; }
1322 .shithub-pull-review-state { font-weight: 600; }
1323 .shithub-pull-review-approve .shithub-pull-review-state { color: #1a7f37; }
1324 .shithub-pull-review-request_changes .shithub-pull-review-state { color: #cf222e; }
1325 .shithub-pull-review-comment .shithub-pull-review-state { color: var(--fg-muted); }
1326 .shithub-pull-review-dismissed { opacity: 0.5; text-decoration: line-through; }
1327 .shithub-pull-request-reviewer summary, .shithub-pull-submit-review summary {
1328 margin: 0.5rem 0 0.25rem;
1329 }
1330 .shithub-pull-review-form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0; }
1331 .shithub-pull-review-form textarea, .shithub-pull-review-form select {
1332 padding: 0.4rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1333 }
1334 .shithub-pull-threads { margin-top: 1.5rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 6px; }
1335 .shithub-pull-thread-file { padding: 0.4rem 0; border-bottom: 1px solid var(--border-default); }
1336 .shithub-pull-thread-file:last-child { border-bottom: none; }
1337 .shithub-pull-thread-file summary { cursor: pointer; font-weight: 600; }
1338 .shithub-pull-thread { padding: 0.5rem; border-left: 3px solid var(--border-default); margin: 0.5rem 0; }
1339 .shithub-pull-thread-outdated { opacity: 0.6; border-left-color: #9a6700; }
1340 .shithub-pull-thread-resolved { opacity: 0.7; border-left-color: #1a7f37; }
1341 .shithub-pull-thread-actions { display: flex; gap: 0.3rem; margin-top: 0.4rem; flex-wrap: wrap; }
1342 .shithub-pull-thread-actions textarea, .shithub-pull-thread-actions input[type=text] {
1343 padding: 0.3rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1344 }
1345 .shithub-pull-add-comment summary { margin-top: 0.5rem; }
1346 .shithub-pull-add-comment form { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0; }
1347 .shithub-pull-add-comment input, .shithub-pull-add-comment textarea {
1348 padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; font: inherit;
1349 }
1350
1351 /* ========== PR Checks tab (S24) ========== */
1352 .shithub-pull-checks { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
1353 .shithub-pull-check-suite {
1354 border: 1px solid var(--border-default);
1355 border-radius: 6px;
1356 padding: 0.75rem;
1357 }
1358 .shithub-pull-check-suite h3 {
1359 display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
1360 font-size: 1rem; margin: 0 0 0.5rem;
1361 }
1362 .shithub-pull-check-app { font-family: var(--mono, monospace); font-size: 0.85rem; color: var(--fg-muted); }
1363 .shithub-pull-check-suite-status { font-size: 0.8rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--canvas-subtle); }
1364 .shithub-pull-check-runs { list-style: none; padding: 0; margin: 0; }
1365 .shithub-pull-check-run {
1366 display: flex; gap: 0.5rem; align-items: baseline;
1367 padding: 0.3rem 0; border-bottom: 1px solid var(--border-default);
1368 flex-wrap: wrap;
1369 }
1370 .shithub-pull-check-run:last-child { border-bottom: none; }
1371 .shithub-pull-check-status-completed { color: #1a7f37; }
1372 .shithub-pull-check-status-in_progress { color: #9a6700; }
1373 .shithub-pull-check-status-queued { color: var(--fg-muted); }
1374 .shithub-pull-check-status-pending { color: var(--fg-muted); }
1375 .shithub-pull-check-conclusion {
1376 font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px;
1377 text-transform: lowercase;
1378 }
1379 .shithub-pull-check-conclusion-success { background: #1a7f3722; color: #1a7f37; }
1380 .shithub-pull-check-conclusion-failure { background: #cf222e22; color: #cf222e; }
1381 .shithub-pull-check-conclusion-neutral { background: #d0d7de44; color: var(--fg-muted); }
1382 .shithub-pull-check-conclusion-cancelled,
1383 .shithub-pull-check-conclusion-skipped,
1384 .shithub-pull-check-conclusion-stale { color: var(--fg-muted); background: var(--canvas-subtle); }
1385 .shithub-pull-check-conclusion-timed_out { background: #9a670022; color: #9a6700; }
1386 .shithub-pull-check-conclusion-action_required { background: #cf222e22; color: #cf222e; font-weight: 600; }
1387
1388 /* S26 — stars / watchers list pages */
1389 .shithub-social { padding: 1rem 0; }
1390 .shithub-social-list { list-style: none; padding: 0; margin: 1rem 0; }
1391 .shithub-social-list li {
1392 display: flex; gap: 0.6rem; align-items: baseline;
1393 padding: 0.5rem 0; border-bottom: 1px solid var(--border-default);
1394 }
1395 .shithub-social-list li:last-child { border-bottom: none; }
1396 .shithub-social-list small { color: var(--fg-muted); }
1397 .shithub-meta { color: var(--fg-muted); margin: 0.25rem 0 1rem; }
1398 .shithub-empty { color: var(--fg-muted); padding: 1rem; }
1399 .shithub-pagination {
1400 display: flex; gap: 0.5rem; padding: 1rem 0;
1401 }