pgit.css
1/* ==== CSS VARIABLES ==== */
2:root {
3 --line-height: 1.3rem;
4 --grid-height: 0.65rem;
5
6 /* Dark theme defaults (overridden by vars.css) */
7 --bg-color: #282a36;
8 --text-color: #f8f8f2;
9 --border: #6272a4;
10 --link-color: #8be9fd;
11 --hover: #ff79c6;
12 --visited: #8be9fd;
13 --white: #f2f2f2;
14 --white-light: #f2f2f2;
15 --white-dark: #e8e8e8;
16 --grey: #414558;
17 --grey-light: #6a708e;
18 --code: #414558;
19 --pre: #252525;
20 --blockquote: #bd93f9;
21 --blockquote-bg: #353548;
22 --text-red: #ff5555;
23 --text-green: #50fa7b;
24}
25
26/* ==== BASE RESET ==== */
27*,
28::before,
29::after {
30 box-sizing: border-box;
31}
32
33::-moz-focus-inner {
34 border-style: none;
35 padding: 0;
36}
37
38:-moz-focusring {
39 outline: 1px dotted ButtonText;
40}
41
42:-moz-ui-invalid {
43 box-shadow: none;
44}
45
46html {
47 background-color: var(--bg-color);
48 color: var(--text-color);
49 font-size: 16px;
50 line-height: var(--line-height);
51 font-family:
52 -apple-system,
53 BlinkMacSystemFont,
54 "Segoe UI",
55 Roboto,
56 Oxygen,
57 Ubuntu,
58 Cantarell,
59 "Fira Sans",
60 "Droid Sans",
61 "Helvetica Neue",
62 Arial,
63 sans-serif,
64 "Apple Color Emoji",
65 "Segoe UI Emoji",
66 "Segoe UI Symbol";
67 -webkit-text-size-adjust: 100%;
68 -moz-tab-size: 4;
69 tab-size: 4;
70}
71
72body {
73 margin: 0 auto;
74 max-width: 900px;
75}
76
77img {
78 max-width: 100%;
79 height: auto;
80}
81
82b,
83strong {
84 font-weight: bold;
85}
86
87code,
88kbd,
89samp,
90pre {
91 font-family: monospace;
92}
93
94code,
95kbd,
96samp {
97 border: 2px solid var(--code);
98}
99
100pre>code {
101 background-color: inherit;
102 padding: 0;
103 border: none;
104 border-radius: 0;
105}
106
107code {
108 font-size: 90%;
109 border-radius: 0.3rem;
110 padding: 0.025rem 0.3rem;
111}
112
113pre {
114 font-size: 0.8rem;
115 border-radius: 1px;
116 padding: var(--line-height);
117 overflow-x: auto;
118 background-color: var(--pre);
119 border: 1px solid var(--border);
120}
121
122small {
123 font-size: 0.8rem;
124}
125
126h1,
127h2,
128h3,
129h4 {
130 margin: 0;
131 padding: 0;
132 border: 0;
133 font-style: normal;
134 font-weight: inherit;
135 font-size: inherit;
136 font-family: monospace;
137}
138
139path {
140 fill: var(--text-color);
141 stroke: var(--text-color);
142}
143
144hr {
145 color: inherit;
146 border: 0;
147 height: 2px;
148 background: var(--grey);
149 margin: calc(var(--grid-height) - 2px) auto;
150 margin-top: calc(var(--line-height) * 2);
151}
152
153a {
154 text-decoration: none;
155 color: var(--link-color);
156}
157
158a:hover,
159a:visited:hover {
160 text-decoration: underline;
161}
162
163a:visited {
164 color: var(--visited);
165}
166
167section {
168 margin-bottom: 1.4rem;
169}
170
171section:last-child {
172 margin-bottom: 0;
173}
174
175header {
176 margin: 1rem auto;
177}
178
179p {
180 margin-top: var(--line-height);
181 margin-bottom: var(--line-height);
182}
183
184article {
185 overflow-wrap: break-word;
186}
187
188blockquote {
189 border-left: 5px solid var(--blockquote);
190 background-color: var(--blockquote-bg);
191 padding: var(--grid-height);
192 margin: var(--line-height) 0;
193}
194
195blockquote>p {
196 margin: 0;
197}
198
199blockquote code {
200 border: 1px solid var(--blockquote);
201}
202
203ul,
204ol {
205 padding: 0 15px;
206 list-style-position: inside;
207 list-style-type: square;
208 margin: var(--grid-height) 0;
209}
210
211ol ul,
212ol ol,
213ul ol,
214ul ul {
215 padding: 0 0 0 var(--line-height);
216 margin: 0;
217}
218
219li {
220 margin: var(--grid-height) 0;
221 padding: 0;
222}
223
224li::marker {
225 line-height: 0;
226 color: var(--grey-light);
227}
228
229table {
230 border-collapse: collapse;
231 margin: var(--line-height) 0;
232}
233
234th,
235td {
236 border: 1px solid var(--white);
237 padding: var(--grid-height);
238}
239
240footer {
241 text-align: center;
242 margin-bottom: calc(var(--line-height) * 3);
243}
244
245dt {
246 font-weight: bold;
247}
248
249dd {
250 margin-left: 0;
251}
252
253dd:not(:last-child) {
254 margin-bottom: 0.5rem;
255}
256
257figure {
258 margin: 0;
259}
260
261sup {
262 line-height: 0;
263}
264
265/* ==== LAYOUT PATTERNS ==== */
266.stack {
267 display: flex;
268 flex-direction: column;
269 gap: var(--grid-height);
270}
271
272.stack--lg {
273 gap: var(--line-height);
274}
275
276.cluster {
277 display: flex;
278 align-items: center;
279 gap: var(--grid-height);
280}
281
282.cluster--xs {
283 gap: 0.25rem;
284}
285
286.split {
287 display: flex;
288 justify-content: space-between;
289 align-items: center;
290}
291
292.split--start {
293 align-items: flex-start;
294}
295
296/* ==== SITE COMPONENTS ==== */
297
298/* ==== VIEW TRANSITIONS ==== */
299@view-transition {
300 navigation: auto;
301}
302
303/* Smooth cross-fade for view transitions */
304::view-transition-old(root) {
305 animation: fade-out 150ms ease-out forwards;
306}
307
308::view-transition-new(root) {
309 animation: fade-in 150ms ease-in forwards;
310}
311
312@keyframes fade-out {
313 from {
314 opacity: 1;
315 }
316
317 to {
318 opacity: 0;
319 }
320}
321
322@keyframes fade-in {
323 from {
324 opacity: 0;
325 }
326
327 to {
328 opacity: 1;
329 }
330}
331
332/* Prevent flash during HTMX swaps */
333.htmx-swapping {
334 opacity: 1;
335}
336
337.htmx-settling {
338 animation: htmx-fade-in 100ms ease-in;
339}
340
341@keyframes htmx-fade-in {
342 from {
343 opacity: 0.8;
344 }
345
346 to {
347 opacity: 1;
348 }
349}
350
351/* Site Header */
352.site-header {
353 display: flex;
354 flex-direction: column;
355}
356
357.site-header__title {
358 font-size: 1rem;
359 font-weight: bold;
360 line-height: var(--line-height);
361 text-transform: uppercase;
362 display: flex;
363 gap: var(--grid-height);
364 padding: 0;
365 margin: 0;
366}
367
368.site-header__desc {
369 font-style: italic;
370 color: var(--grey-light);
371 margin-top: var(--grid-height);
372}
373
374.site-header__desc>p {
375 padding: 0;
376 margin: 0;
377}
378
379/* Navigation */
380.nav-menu {
381 display: flex;
382 align-items: center;
383 gap: 1.5rem;
384 margin: 1rem 0;
385 border-bottom: 1px solid var(--border);
386 padding-bottom: 0.5rem;
387 flex-wrap: wrap;
388}
389
390.nav-menu a,
391.nav-menu span.active {
392 color: var(--grey-light);
393 font-weight: 600;
394 text-transform: uppercase;
395 font-size: 0.9rem;
396 text-decoration: none;
397 padding-bottom: 0.4rem;
398 border-bottom: 2px solid transparent;
399 transition: all 0.2s ease;
400}
401
402.nav-menu a:hover,
403.nav-menu span.active {
404 color: var(--text-color);
405 border-bottom: 2px solid var(--link-color);
406}
407
408.nav-menu span.font-bold {
409 color: var(--text-color);
410 font-weight: 600;
411 text-transform: uppercase;
412 font-size: 0.9rem;
413 padding-bottom: 0.4rem;
414 border-bottom: 2px solid transparent;
415}
416
417/* Ref Selector Dropdown */
418.nav-menu__ref-selector {
419 margin-left: auto;
420 position: relative;
421}
422
423.nav-menu__ref-selector summary {
424 color: var(--grey-light);
425 font-weight: 600;
426 text-transform: uppercase;
427 font-size: 0.9rem;
428 padding-bottom: 0.4rem;
429 border-bottom: 2px solid transparent;
430 cursor: pointer;
431 list-style: none;
432 display: flex;
433 align-items: center;
434 gap: 0.25rem;
435}
436
437.nav-menu__ref-selector summary:hover {
438 color: var(--text-color);
439}
440
441.nav-menu__ref-selector summary::-webkit-details-marker {
442 display: none;
443}
444
445.nav-menu__ref-selector summary::after {
446 content: "▼";
447 font-size: 0.7rem;
448}
449
450.nav-menu__ref-selector[open] summary::after {
451 content: "▲";
452}
453
454.ref-selector__dropdown {
455 position: absolute;
456 top: 100%;
457 right: 0;
458 min-width: 150px;
459 background-color: var(--bg-color);
460 border: 1px solid var(--border);
461 border-radius: 4px;
462 padding: 0.5rem 0;
463 margin-top: 0.25rem;
464 z-index: 100;
465 max-height: 300px;
466 overflow-y: auto;
467}
468
469.ref-selector__dropdown a {
470 display: block;
471 padding: 0.25rem 1rem;
472 color: var(--text-color);
473 font-weight: 600;
474 text-transform: uppercase;
475 font-size: 0.9rem;
476 text-decoration: none;
477 border-bottom: none;
478 padding-bottom: 0.25rem;
479}
480
481.ref-selector__dropdown a:hover {
482 background-color: var(--pre);
483 color: var(--link-color);
484 text-decoration: none;
485}
486
487/* Last Commit Bar (summary page) */
488.last-commit-bar {
489 display: flex;
490 justify-content: space-between;
491 align-items: center;
492 margin-top: var(--grid-height);
493 margin-bottom: var(--grid-height);
494 font-size: 0.8rem;
495 color: var(--grey-light);
496}
497
498.last-commit-bar__info {
499 display: flex;
500 align-items: center;
501 gap: 0.25rem;
502 overflow: hidden;
503 text-overflow: ellipsis;
504 white-space: nowrap;
505}
506
507.last-commit-bar__info svg {
508 color: var(--white);
509}
510
511.last-commit-bar__info a {
512 color: var(--white);
513}
514
515.last-commit-bar__info a:hover {
516 color: var(--hover);
517}
518
519.last-commit-bar__time {
520 font-family: monospace;
521}
522
523/* Commit List */
524.commit-list {
525 display: flex;
526 flex-direction: column;
527}
528
529.commit-list__count {
530 margin-bottom: var(--grid-height);
531}
532
533/* Commit Item */
534.commit-item {
535 transition: background-color 0.2s ease;
536 padding: 0 0.5rem;
537 margin: 0 -0.5rem;
538}
539
540.commit-item:hover {
541 background: var(--pre);
542}
543
544.commit-item__header {
545 display: flex;
546 justify-content: space-between;
547 align-items: flex-start;
548 margin-bottom: var(--grid-height);
549}
550
551.commit-item__content {
552 flex: 1;
553 margin-right: 1rem;
554}
555
556
557.commit-item__message {
558 margin: 0;
559 display: inline-block;
560 white-space: break-spaces;
561 font-weight: bold;
562 font-size: 1rem;
563 line-height: var(--line-height);
564 transform: translateX(-1.25rem);
565}
566
567.commit-item__message a {
568 color: var(--text-color);
569}
570
571.commit-item__message>svg {
572 width: 1rem;
573 margin-right: 0.25rem;
574 transform: translateY(25%);
575}
576
577.commit-item__meta {
578 display: flex;
579 align-items: center;
580 gap: 0.25rem;
581 font-size: 0.8rem;
582 color: var(--grey-light);
583}
584
585.commit-item__actions {
586 display: flex;
587 flex-direction: column;
588 align-items: flex-end;
589}
590
591.commit-item__hash {
592 font-family: monospace;
593 font-size: 0.8rem;
594 font-weight: bold;
595}
596
597.commit-item__hash a {
598 color: var(--text-color);
599 text-decoration: none;
600}
601
602.commit-item__hash a:hover {
603 text-decoration: underline;
604}
605
606.commit-item__refs {
607 display: flex;
608 flex-wrap: wrap;
609 justify-content: flex-end;
610}
611
612.commit-item__ref {
613 font-family: monospace;
614 font-size: 0.8rem;
615}
616
617/* Page Title */
618.page-title {
619 font-size: 1rem;
620 font-weight: bold;
621 line-height: var(--line-height);
622 margin-top: calc(var(--line-height) * 2);
623 margin-bottom: var(--line-height);
624 text-transform: uppercase;
625 color: var(--white-dark);
626}
627
628/* File List (Tree View) */
629.file-list__row {
630 display: flex;
631 justify-content: space-between;
632 align-items: center;
633 gap: var(--line-height);
634 padding: 0 var(--grid-height);
635}
636
637.file-list__row:last-child {
638 border-bottom: none;
639}
640
641.file-list__path {
642 flex: 1;
643 display: flex;
644 align-items: center;
645 gap: var(--grid-height);
646 text-wrap: wrap;
647}
648
649.file-list__meta {
650 display: flex;
651 align-items: center;
652 gap: var(--grid-height);
653}
654
655.file-list__commit {
656 flex: 1;
657}
658
659.file-list__size {
660 width: 60px;
661 text-align: right;
662}
663
664/* Metadata Grid (Commit Detail) */
665.metadata {
666 display: grid;
667 grid-template-columns: max-content 1fr;
668 gap: 0.5rem 1.5rem;
669 align-items: center;
670 background-color: var(--pre);
671 padding: 1rem;
672 border-radius: 4px;
673 border: 1px solid var(--grey);
674 font-size: 0.8rem;
675 margin-bottom: calc(var(--line-height) * 2);
676}
677
678.metadata__label {
679 color: var(--grey-light);
680 text-align: right;
681 font-weight: 600;
682 text-transform: uppercase;
683 font-size: 0.8rem;
684}
685
686.metadata__value {
687 color: var(--text-color);
688}
689
690.metadata__value--code {
691 font-family: monospace;
692}
693
694/* Diff Styles */
695.diff-file__header {
696 display: flex;
697 justify-content: space-between;
698 align-items: center;
699 font-family: monospace;
700 padding: var(--grid-height) 0;
701 position: sticky;
702 top: 0;
703 left: 0;
704 background-color: var(--bg-color);
705 border-bottom: 2px solid var(--grey);
706 border-top: 1px solid var(--grey);
707 padding: 0 1rem;
708 margin: 2rem 0 0 0;
709 z-index: 10;
710 font-weight: bold;
711 height: 48px;
712}
713
714.diff-stat--add {
715 color: #50fa7b;
716 font-weight: bold;
717}
718
719.diff-stat--del {
720 color: #ff5555;
721 font-weight: bold;
722}
723
724/* File Header - uses commit-item classes for consistent styling with log page */
725.file-header {
726 margin: 1rem 0;
727}
728
729.file-header .commit-item__header {
730 margin-bottom: 0;
731}
732
733/* Box Component */
734.box {
735 margin: 1rem 0;
736 padding: var(--grid-height);
737 border: 1px solid var(--border);
738 border-radius: 4px;
739}
740
741.box__title {
742 font-size: 1rem;
743 font-weight: bold;
744 line-height: var(--line-height);
745 margin-bottom: var(--grid-height);
746 text-transform: uppercase;
747}
748
749.box__stats {
750 margin-top: var(--grid-height);
751}
752
753/* Clone URL */
754.clone-url {
755 text-align: left;
756 margin-bottom: calc(var(--line-height) * 1.5);
757}
758
759.clone-url__label {
760 color: var(--grey-light);
761 font-size: 0.8rem;
762 font-weight: 600;
763 text-transform: uppercase;
764}
765
766.clone-url__command {
767 color: var(--text-color);
768 font-size: 0.9rem;
769 font-family: monospace;
770}
771
772/* Breadcrumb */
773.breadcrumb {
774 font-size: 1rem;
775 font-weight: bold;
776 line-height: var(--line-height);
777 margin-bottom: var(--grid-height);
778 text-transform: none;
779}
780
781.breadcrumb__current {
782 font-weight: bold;
783}
784
785/* Content Heading */
786.content-heading {
787 font-size: 1rem;
788 font-weight: bold;
789 line-height: var(--line-height);
790 margin-top: var(--line-height);
791 margin-bottom: var(--line-height);
792 text-transform: none;
793 color: var(--white-dark);
794}
795
796/* ==== MARKDOWN CONTENT ==== */
797.markdown {
798 overflow-wrap: break-word;
799}
800
801/* Headings */
802.markdown h1,
803.markdown h2,
804.markdown h3,
805.markdown h4 {
806 margin: 0;
807 padding: 0;
808 font-family: monospace;
809 font-weight: bold;
810 line-height: var(--line-height);
811 text-transform: uppercase;
812}
813
814.markdown h1 {
815 font-size: var(--line-height);
816 margin-top: var(--line-height);
817 margin-bottom: var(--grid-height);
818}
819
820.markdown h2,
821.markdown h3,
822.markdown h4 {
823 font-size: 1rem;
824 margin-top: var(--line-height);
825 margin-bottom: var(--line-height);
826 color: var(--white-dark);
827}
828
829.markdown h1 a,
830.markdown h2 a,
831.markdown h3 a,
832.markdown h4 a {
833 color: var(--grey-light);
834 text-decoration: none;
835}
836
837.markdown h1 a:hover,
838.markdown h2 a:hover,
839.markdown h3 a:hover,
840.markdown h4 a:hover {
841 text-decoration: underline;
842}
843
844/* Code inline */
845.markdown code {
846 font-family: monospace;
847 font-size: 90%;
848 border: 2px solid var(--code);
849 border-radius: 0.3rem;
850 padding: 0.025rem 0.3rem;
851 background-color: transparent;
852 text-transform: none;
853}
854
855/* Code blocks */
856.markdown pre {
857 font-family: monospace;
858 font-size: 0.8rem;
859 border-radius: 1px;
860 padding: var(--line-height);
861 overflow-x: auto;
862 background-color: var(--pre);
863 border: 1px solid var(--border);
864}
865
866.markdown pre>code {
867 background-color: inherit;
868 padding: 0;
869 border: none;
870 border-radius: 0;
871}
872
873/* Paragraphs */
874.markdown p {
875 margin-top: var(--line-height);
876 margin-bottom: var(--line-height);
877}
878
879/* Lists */
880.markdown ul,
881.markdown ol {
882 padding: 0 15px;
883 list-style-position: inside;
884 list-style-type: square;
885 margin: var(--grid-height) 0;
886}
887
888.markdown li {
889 margin: var(--grid-height) 0;
890 padding: 0;
891}
892
893.markdown li::marker {
894 line-height: 0;
895 color: var(--grey-light);
896}
897
898/* Nested lists */
899.markdown ol ul,
900.markdown ol ol,
901.markdown ul ol,
902.markdown ul ul {
903 padding: 0 0 0 var(--line-height);
904 margin: 0;
905}
906
907/* Blockquotes */
908.markdown blockquote {
909 border-left: 5px solid var(--blockquote);
910 background-color: var(--blockquote-bg);
911 padding: var(--grid-height);
912 margin: var(--line-height) 0;
913}
914
915.markdown blockquote>p {
916 margin: 0;
917}
918
919.markdown blockquote code {
920 border: 1px solid var(--blockquote);
921}
922
923/* Tables */
924.markdown table {
925 border-collapse: collapse;
926 margin: var(--line-height) 0;
927}
928
929.markdown th,
930.markdown td {
931 border: 1px solid var(--white);
932 padding: var(--grid-height);
933}
934
935/* Horizontal rules */
936.markdown hr {
937 color: inherit;
938 border: 0;
939 height: 2px;
940 background: var(--grey);
941 margin: calc(var(--grid-height) - 2px) auto;
942}
943
944/* Images */
945.markdown img {
946 max-width: 100%;
947 height: auto;
948}
949
950/* Strong/Emphasis */
951.markdown strong {
952 font-weight: bold;
953}
954
955.markdown em {
956 font-style: italic;
957}
958
959/* Links */
960.markdown a {
961 color: var(--link-color);
962 text-decoration: none;
963}
964
965.markdown a:hover {
966 text-decoration: underline;
967}
968
969.markdown a:visited {
970 color: var(--visited);
971}
972
973/* ==== RESPONSIVE MEDIA QUERIES ==== */
974
975@media only screen and (max-width: 40em) {
976 body {
977 padding: 0 var(--grid-height);
978 }
979
980 header {
981 margin: 0;
982 }
983
984 /* Stack navigation on mobile */
985 .nav-menu {
986 flex-wrap: wrap;
987 gap: 0.75rem;
988 }
989
990 /* Hide ref selector on mobile */
991 .nav-menu__ref-selector {
992 display: none;
993 }
994
995 /* Commit list adjustments */
996 .commit-item__header {
997 flex-direction: column;
998 gap: var(--grid-height);
999 }
1000
1001 .commit-item__content {
1002 margin-right: 0;
1003 width: 100%;
1004 }
1005
1006 .commit-item__actions {
1007 align-items: flex-start;
1008 width: 100%;
1009 }
1010
1011 /* File list adjustments */
1012 .file-list__row {
1013 flex-direction: column;
1014 align-items: flex-start;
1015 gap: var(--grid-height);
1016 }
1017
1018 .file-list__path {
1019 width: 100%;
1020 }
1021
1022 .file-list__meta {
1023 width: 100%;
1024 justify-content: space-between;
1025 }
1026
1027 /* Hide tree commit info on small screens */
1028 .file-list__commit {
1029 display: none;
1030 }
1031
1032 /* Metadata grid becomes vertical */
1033 .metadata {
1034 grid-template-columns: 1fr;
1035 gap: 0.25rem;
1036 }
1037
1038 .metadata__label {
1039 text-align: left;
1040 margin-top: 0.5rem;
1041 }
1042
1043 .metadata__label:first-child {
1044 margin-top: 0;
1045 }
1046
1047 /* Diff file header */
1048 .diff-file__header {
1049 flex-direction: column;
1050 align-items: flex-start;
1051 height: auto;
1052 padding: var(--grid-height);
1053 gap: var(--grid-height);
1054 }
1055
1056 /* Last commit bar */
1057 .last-commit-bar {
1058 flex-direction: column;
1059 align-items: flex-start;
1060 gap: 0;
1061 }
1062
1063 .last-commit-bar__info,
1064 .last-commit-bar__time {
1065 line-height: var(--line-height);
1066 margin: 0;
1067 padding: 0;
1068 }
1069
1070 .last-commit-bar__info {
1071 white-space: normal;
1072 }
1073
1074 /* Issue detail title row becomes column on mobile */
1075 .issue-detail__title-row {
1076 flex-direction: column;
1077 }
1078
1079 .issue-detail__status {
1080 align-self: flex-start;
1081 }
1082}
1083
1084@media only screen and (max-width: 900px) {
1085
1086 .file-list_row {
1087 padding: 0 var(--grid-height);
1088 padding-top: var(--grid-height);
1089 }
1090
1091 /* Hide tree commit column on medium screens */
1092 .file-list__commit {
1093 display: none;
1094 }
1095
1096 .file-list__size {
1097 display: none;
1098 }
1099}
1100
1101/* Commit Message (in commit detail page) */
1102.commit-message {
1103 margin: 0;
1104 margin-bottom: calc(var(--line-height) * 2);
1105 white-space: break-spaces;
1106 font-size: 1rem;
1107 line-height: var(--line-height);
1108 text-transform: none;
1109}
1110
1111.commit-message__summary {
1112 font-weight: 700;
1113 margin-bottom: var(--line-height);
1114}
1115
1116.commit-message__body {
1117 font-weight: 400;
1118}
1119
1120/* File List Summary (in commit page) */
1121.file-list-summary {
1122 margin-top: var(--grid-height);
1123}
1124
1125.file-list-summary__item {
1126 margin: var(--grid-height) 0;
1127}
1128
1129/* ==== ISSUES PAGES ==== */
1130
1131/* Issues List Page */
1132.issues-page {
1133 margin-top: var(--line-height);
1134}
1135
1136.issues-header {
1137 border-bottom: 1px solid var(--border);
1138 margin-bottom: 0.5rem;
1139}
1140
1141.issues-header h1 {
1142 font-size: 1rem;
1143 font-weight: bold;
1144 text-transform: uppercase;
1145 margin-bottom: var(--grid-height);
1146}
1147
1148/* Issues Navigation - matches top-level nav-menu */
1149.issues-nav {
1150 display: flex;
1151 align-items: center;
1152 gap: 1.5rem;
1153 margin: 1rem 0;
1154 flex-wrap: wrap;
1155}
1156
1157.issues-nav a,
1158.issues-nav span.active {
1159 color: var(--grey-light);
1160 font-weight: 600;
1161 text-transform: uppercase;
1162 font-size: 0.9rem;
1163 text-decoration: none;
1164 padding-bottom: 0.4rem;
1165 border-bottom: 2px solid transparent;
1166 transition: all 0.2s ease;
1167}
1168
1169.issues-nav a:hover,
1170.issues-nav span.active {
1171 color: var(--text-color);
1172 border-bottom: 2px solid var(--link-color);
1173}
1174
1175/* Label Selector Dropdown */
1176.issues-nav__label-selector {
1177 margin-left: auto;
1178 position: relative;
1179}
1180
1181.issues-nav__label-selector summary {
1182 color: var(--grey-light);
1183 font-weight: 600;
1184 text-transform: uppercase;
1185 font-size: 0.9rem;
1186 padding-bottom: 0.4rem;
1187 border-bottom: 2px solid transparent;
1188 cursor: pointer;
1189 list-style: none;
1190 display: flex;
1191 align-items: center;
1192 gap: 0.25rem;
1193}
1194
1195.issues-nav__label-selector summary:hover {
1196 color: var(--text-color);
1197}
1198
1199.issues-nav__label-selector summary::-webkit-details-marker {
1200 display: none;
1201}
1202
1203.issues-nav__label-selector summary::after {
1204 content: "▼";
1205 font-size: 0.7rem;
1206}
1207
1208.issues-nav__label-selector[open] summary::after {
1209 content: "▲";
1210}
1211
1212.label-selector__dropdown {
1213 position: absolute;
1214 top: 100%;
1215 right: 0;
1216 min-width: 150px;
1217 background-color: var(--bg-color);
1218 border: 1px solid var(--border);
1219 border-radius: 4px;
1220 padding: 0.5rem 0;
1221 margin-top: 0.25rem;
1222 z-index: 100;
1223 max-height: 300px;
1224 overflow-y: auto;
1225}
1226
1227.label-selector__dropdown a {
1228 display: block;
1229 padding: 0.25rem 1rem;
1230 color: var(--text-color);
1231 font-weight: 600;
1232 text-transform: uppercase;
1233 font-size: 0.9rem;
1234 text-decoration: none;
1235 border-bottom: none;
1236 padding-bottom: 0.25rem;
1237}
1238
1239.label-selector__dropdown a:hover {
1240 background-color: var(--pre);
1241 color: var(--link-color);
1242 text-decoration: none;
1243}
1244
1245.issues-list {
1246 display: flex;
1247 flex-direction: column;
1248}
1249
1250.issue-item {
1251 display: flex;
1252 justify-content: space-between;
1253 align-items: flex-start;
1254 padding: 0.25rem 0.5rem;
1255 transition: background-color 0.2s ease;
1256 margin: 0 -0.5rem;
1257}
1258
1259.issue-item:hover {
1260 background-color: var(--pre);
1261}
1262
1263.issue-item__main {
1264 flex: 1;
1265 margin-right: 1rem;
1266 display: flex;
1267 flex-direction: column;
1268 gap: 0.1rem;
1269}
1270
1271.issue-item__title {
1272 color: var(--text-color) !important;
1273 font-size: 1rem;
1274 font-weight: bold;
1275 text-decoration: none;
1276 display: block;
1277 line-height: var(--line-height);
1278}
1279
1280.issue-item__title:hover {
1281 text-decoration: underline;
1282}
1283
1284.issue-meta {
1285 color: var(--grey-light);
1286 font-family: monospace;
1287 font-size: 0.8rem;
1288 line-height: var(--line-height);
1289}
1290
1291.issue-item__stats {
1292 display: flex;
1293 flex-direction: column;
1294 align-items: flex-end;
1295 text-align: right;
1296 font-size: 0.8rem;
1297 color: var(--grey-light);
1298 line-height: var(--line-height);
1299}
1300
1301.issue-date {
1302 white-space: nowrap;
1303}
1304
1305.issue-labels-text {
1306 color: var(--grey-light);
1307}
1308
1309.no-issues {
1310 color: var(--grey-light);
1311 font-style: italic;
1312 padding: var(--line-height) 0;
1313}
1314
1315/* Issue Detail Page */
1316.issue-detail {}
1317
1318.issue-detail__header {
1319 margin-bottom: var(--line-height);
1320 padding-bottom: var(--grid-height);
1321 border-bottom: 1px solid var(--border);
1322}
1323
1324.issue-detail__title-row {
1325 display: flex;
1326 justify-content: space-between;
1327 align-items: flex-start;
1328 margin-bottom: var(--grid-height);
1329}
1330
1331.issue-detail__title {
1332 font-size: 1rem;
1333 font-weight: bold;
1334 line-height: var(--line-height);
1335 margin: 0 1rem 0 0;
1336 flex: 1;
1337 word-wrap: break-word;
1338 overflow-wrap: break-word;
1339}
1340
1341.issue-detail__status {
1342 font-size: 0.9rem;
1343 font-weight: 600;
1344 text-transform: uppercase;
1345 white-space: nowrap;
1346 flex-shrink: 0;
1347}
1348
1349.issue-detail__status--open {
1350 color: var(--text-red);
1351}
1352
1353.issue-detail__status--closed {
1354 color: var(--text-green);
1355}
1356
1357.issue-detail__meta {
1358 display: flex;
1359 gap: 0.5rem;
1360 align-items: center;
1361 font-size: 0.8rem;
1362 color: var(--grey-light);
1363 flex-wrap: wrap;
1364}
1365
1366.issue-detail__labels {
1367 font-size: 0.9rem;
1368}
1369
1370.issue-detail__labels>span:first-child {
1371 color: var(--grey-light);
1372 margin-right: 0.5rem;
1373}
1374
1375.issue-label:not(:last-child)::after {
1376 content: "•";
1377 margin: 0 0.4rem;
1378 color: var(--grey-light);
1379}
1380
1381.issue-description {
1382 margin-bottom: var(--line-height);
1383}
1384
1385.issue-comment {
1386 padding: var(--grid-height);
1387 border: 1px solid var(--border);
1388 border-radius: 4px;
1389 margin-bottom: var(--grid-height);
1390 background: var(--background);
1391}
1392
1393.issue-comment__header {
1394 display: flex;
1395 justify-content: space-between;
1396 align-items: center;
1397 margin-bottom: var(--grid-height);
1398 padding-bottom: var(--grid-height);
1399 border-bottom: 1px solid var(--grey);
1400 font-size: 0.9rem;
1401}
1402
1403.issue-comment__author {
1404 font-weight: bold;
1405 color: var(--text-color);
1406}
1407
1408.issue-comment__date {
1409 color: var(--grey-light);
1410 font-size: 0.8rem;
1411}
1412
1413.issue-comment__meta {
1414 display: flex;
1415 align-items: center;
1416 gap: 0.5rem;
1417}
1418
1419.issue-comment__id {
1420 color: var(--grey-light);
1421 font-size: 0.8rem;
1422 font-family: monospace;
1423}
1424
1425.issue-comment__id::after {
1426 content: " · ";
1427 margin-left: 0.25rem;
1428}
1429
1430.issue-comment__body {
1431 line-height: var(--line-height);
1432}
1433
1434.issue-comments h3 {
1435 font-size: 1rem;
1436 font-weight: bold;
1437 text-transform: uppercase;
1438 margin: var(--line-height) 0 var(--grid-height);
1439 color: var(--white-dark);
1440}