Mercurial

comparison hg-web/src/index.css @ 231:09a96dcb2b4c hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[merge] Join existing hg-web branch head
author MrJuneJune <me@mrjunejune.com>
date Sun, 02 Aug 2026 16:50:48 -0700
parents 70de0c80d093
children
comparison
equal deleted inserted replaced
217:7ef4c9d2a72d 231:09a96dcb2b4c
1 /* ===========================================
2 Component Styles
3 Import base.css before this file
4 =========================================== */
5
6 /* ===========================================
7 App Layout
8 =========================================== */
9 .app-container {
10 max-width: 1200px;
11 margin: 0 auto;
12 padding: 40px 20px;
13 }
14
15 /* ===========================================
16 Header
17 =========================================== */
1 .header { 18 .header {
19 display: flex;
20 align-items: center;
21 margin-bottom: 24px;
22 gap: 15px;
23 }
24
25 .header-icon {
26 width: 32px;
27 height: 32px;
28 opacity: 0.8;
29 cursor: pointer;
30 }
31
32 .header h1 {
33 margin: 0;
34 font-size: 24px;
35 font-weight: 600;
36 color: var(--text-primary);
37 }
38
39 .header h1 a {
40 color: inherit;
41 text-decoration: none;
42 }
43
44 .header-subtitle {
45 color: var(--text-secondary);
46 margin: 0;
47 font-size: 14px;
48 }
49
50 /* ===========================================
51 Navigation Tabs
52 =========================================== */
53 .nav-tabs {
54 display: flex;
55 gap: 8px;
56 margin-bottom: 24px;
2 border-bottom: 1px solid var(--border); 57 border-bottom: 1px solid var(--border);
3 padding-bottom: 1rem; 58 padding-bottom: 8px;
4 margin-bottom: 2rem; 59 }
5 } 60
6 61 .nav-tab {
7 .header h1 { 62 display: flex;
8 margin-bottom: 0.5rem; 63 align-items: center;
9 } 64 gap: 8px;
10 65 padding: 8px 16px;
11 .header .description {
12 color: var(--secondary);
13 font-size: 0.95rem;
14 }
15
16 .clone-info {
17 background: var(--code-bg);
18 border: 1px solid var(--border);
19 border-radius: 6px; 66 border-radius: 6px;
20 padding: 1rem; 67 background: transparent;
21 margin-bottom: 2rem; 68 border: 1px solid transparent;
22 } 69 color: var(--text-secondary);
23 70 cursor: pointer;
24 .clone-info code { 71 font-size: 14px;
25 background: none; 72 transition: all 0.2s;
26 color: var(--fg); 73 }
27 font-size: 0.95rem; 74
28 } 75 .nav-tab:hover {
29 76 background: var(--bg-subtle);
77 color: var(--text-primary);
78 }
79
80 .nav-tab.active {
81 background: var(--bg-subtle);
82 border-color: var(--border);
83 color: var(--text-primary);
84 font-weight: 500;
85 }
86
87 .nav-tab svg {
88 color: var(--text-secondary);
89 }
90
91 /* ===========================================
92 Landing Page
93 =========================================== */
94 .landing-grid {
95 display: grid;
96 grid-template-columns: 1fr 1fr;
97 gap: 24px;
98 }
99
100 @media (max-width: 768px) {
101 .landing-grid {
102 grid-template-columns: 1fr;
103 }
104 }
105
106 .landing-section {
107 background: var(--bg);
108 border: 1px solid var(--border);
109 border-radius: 8px;
110 overflow: hidden;
111 }
112
113 .landing-section-header {
114 display: flex;
115 justify-content: space-between;
116 align-items: center;
117 padding: 12px 16px;
118 background: var(--bg-subtle);
119 border-bottom: 1px solid var(--border);
120 }
121
122 .landing-section-title {
123 display: flex;
124 align-items: center;
125 gap: 8px;
126 font-weight: 600;
127 font-size: 14px;
128 color: var(--text-primary);
129 }
130
131 .landing-section-title svg {
132 color: var(--text-secondary);
133 }
134
135 .landing-section-link {
136 font-size: 12px;
137 color: var(--accent);
138 text-decoration: none;
139 padding: 4px 8px;
140 border-radius: 4px;
141 transition: background 0.2s;
142 }
143
144 .landing-section-link:hover {
145 background: var(--bg-subtle);
146 text-decoration: underline;
147 }
148
149 .landing-section-content {
150 padding: 0;
151 }
152
153 /* ===========================================
154 Directory Items (Landing Preview)
155 =========================================== */
156 .dir-item {
157 display: flex;
158 align-items: center;
159 padding: 10px 16px;
160 border-bottom: 1px solid var(--border);
161 font-size: 14px;
162 cursor: pointer;
163 transition: background 0.1s;
164 }
165
166 .dir-item:last-child {
167 border-bottom: none;
168 }
169
170 .dir-item:hover {
171 background: var(--hover);
172 }
173
174 .dir-item-icon {
175 margin-right: 12px;
176 opacity: 0.7;
177 }
178
179 .dir-item-icon img {
180 width: 18px;
181 height: 18px;
182 }
183
184 .dir-item-name {
185 color: var(--text-primary);
186 }
187
188 .dir-item-name:hover {
189 color: var(--accent);
190 }
191
192 /* ===========================================
193 Page Header (Graph Page)
194 =========================================== */
195 .page-header {
196 display: flex;
197 align-items: center;
198 gap: 12px;
199 margin-bottom: 16px;
200 }
201
202 .back-button {
203 display: flex;
204 align-items: center;
205 gap: 6px;
206 padding: 6px 12px;
207 background: var(--bg-subtle);
208 border: 1px solid var(--border);
209 border-radius: 6px;
210 color: var(--text-secondary);
211 cursor: pointer;
212 font-size: 13px;
213 transition: all 0.2s;
214 }
215
216 .back-button:hover {
217 background: var(--hover);
218 color: var(--text-primary);
219 }
220
221 .page-title {
222 font-size: 18px;
223 font-weight: 600;
224 color: var(--text-primary);
225 }
226
227 /* ===========================================
228 Graph Params
229 =========================================== */
230 .graph-params {
231 display: flex;
232 gap: 12px;
233 margin-bottom: 16px;
234 font-size: 12px;
235 color: var(--text-secondary);
236 }
237
238 .graph-param {
239 display: flex;
240 align-items: center;
241 gap: 6px;
242 padding: 4px 8px;
243 background: var(--bg-subtle);
244 border-radius: 4px;
245 }
246
247 .graph-param-label {
248 font-weight: 500;
249 }
250
251 .graph-param-value {
252 font-family: monospace;
253 color: var(--accent);
254 }
255
256 /* ===========================================
257 Graph Component
258 =========================================== */
259 .graph-container {
260 background: var(--bg);
261 color: var(--text-primary);
262 font-family: "More Thin", sans-serif;
263 border-radius: 6px;
264 border: 1px solid var(--border);
265 overflow: hidden;
266 }
267
268 .graph-wrapper {
269 display: flex;
270 align-items: flex-start;
271 max-height: 600px;
272 overflow-y: auto;
273 position: relative;
274 }
275
276 .graph-canvas-column {
277 flex-shrink: 0;
278 position: sticky;
279 left: 0;
280 z-index: 1;
281 border-right: 1px solid var(--border);
282 }
283
284 .graph-details-column {
285 flex-grow: 1;
286 overflow-x: hidden;
287 }
288
289 .graph-row {
290 width: 100%;
291 height: 40px;
292 display: flex;
293 flex-direction: column;
294 justify-content: center;
295 padding: 0 12px;
296 background: transparent;
297 color: inherit;
298 text-align: left;
299 border: 0;
300 border-bottom: 1px solid var(--border);
301 font-size: 12px;
302 cursor: pointer;
303 transition: background-color 0.1s;
304 }
305
306 .graph-row:hover {
307 background: var(--hover);
308 }
309
310 .graph-row:focus-visible {
311 outline: 2px solid var(--accent);
312 outline-offset: -2px;
313 background: var(--hover);
314 }
315
316 .graph-row-meta {
317 display: flex;
318 gap: 10px;
319 margin-bottom: 2px;
320 align-items: center;
321 }
322
323 .graph-hash {
324 color: var(--accent);
325 font-family: monospace;
326 }
327
328 .graph-user {
329 color: var(--text-secondary);
330 font-weight: 500;
331 }
332
333 .graph-branch {
334 color: var(--text-secondary);
335 font-size: 10px;
336 background: var(--bg-subtle);
337 padding: 1px 6px;
338 border-radius: 3px;
339 }
340
341 .graph-desc {
342 color: var(--text-primary);
343 white-space: nowrap;
344 overflow: hidden;
345 text-overflow: ellipsis;
346 display: flex;
347 align-items: center;
348 gap: 6px;
349 }
350
351 .graph-badge-tip {
352 background: var(--success);
353 color: #fff;
354 padding: 0 4px;
355 border-radius: 2px;
356 font-size: 10px;
357 font-weight: bold;
358 flex-shrink: 0;
359 }
360
361 .graph-badge-tag {
362 background: var(--accent);
363 color: #fff;
364 padding: 0 4px;
365 border-radius: 2px;
366 font-size: 10px;
367 font-weight: bold;
368 flex-shrink: 0;
369 }
370
371 .graph-loading-row {
372 height: 40px;
373 display: flex;
374 align-items: center;
375 justify-content: center;
376 color: var(--text-secondary);
377 font-size: 12px;
378 }
379
380 /* ===========================================
381 Changeset Detail
382 =========================================== */
383 .changeset-paper {
384 background: var(--bg);
385 border: 1px solid var(--border);
386 border-radius: 6px;
387 padding: 24px;
388 }
389
390 .changeset-heading,
391 .changeset-meta,
392 .changeset-parents,
393 .changeset-files,
394 .changeset-labels {
395 display: flex;
396 align-items: center;
397 flex-wrap: wrap;
398 gap: 10px;
399 }
400
401 .changeset-heading {
402 justify-content: space-between;
403 margin-bottom: 12px;
404 }
405
406 .changeset-heading code {
407 overflow-wrap: anywhere;
408 }
409
410 .changeset-paper h2 {
411 margin-bottom: 8px;
412 }
413
414 .changeset-meta {
415 color: var(--text-secondary);
416 justify-content: space-between;
417 margin-bottom: 16px;
418 }
419
420 .changeset-branch,
421 .changeset-labels span {
422 background: var(--bg-subtle);
423 border: 1px solid var(--border);
424 border-radius: 999px;
425 padding: 2px 8px;
426 font-size: 12px;
427 }
428
429 .changeset-labels,
430 .changeset-parents,
431 .changeset-files {
432 margin: 12px 0;
433 }
434
435 .changeset-parents button {
436 border: 0;
437 background: transparent;
438 color: var(--accent);
439 cursor: pointer;
440 font-family: monospace;
441 }
442
443 .changeset-parents button:hover {
444 text-decoration: underline;
445 }
446
447 .changeset-parents button:focus-visible {
448 outline: 2px solid var(--accent);
449 outline-offset: 2px;
450 }
451
452 .changeset-files code {
453 display: inline-flex;
454 align-items: center;
455 gap: 6px;
456 overflow-wrap: anywhere;
457 }
458
459 .changeset-file-status {
460 color: var(--text-secondary);
461 font-size: 10px;
462 text-transform: uppercase;
463 }
464
465 .changeset-file-status.status-added {
466 color: var(--success);
467 }
468
469 .changeset-file-status.status-removed {
470 color: var(--danger);
471 }
472
473 .changeset-diff {
474 margin-top: 24px;
475 }
476
477 .changeset-diff h3 {
478 margin-bottom: 10px;
479 }
480
481 .side-by-side-diff {
482 margin-bottom: 18px;
483 overflow-x: auto;
484 border: 1px solid var(--border);
485 border-radius: 6px;
486 background: var(--bg-code);
487 }
488
489 .diff-file-header {
490 padding: 9px 12px;
491 border-bottom: 1px solid var(--border);
492 background: var(--bg-subtle);
493 font-family: monospace;
494 font-weight: 600;
495 }
496
497 .diff-column-headings {
498 display: grid;
499 grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr);
500 min-width: 760px;
501 border-bottom: 1px solid var(--border);
502 color: var(--text-secondary);
503 font-size: 12px;
504 font-weight: 600;
505 text-transform: uppercase;
506 }
507
508 .diff-column-headings span {
509 padding: 6px 12px;
510 }
511
512 .diff-column-headings span + span {
513 border-left: 1px solid var(--border);
514 }
515
516 .diff-grid {
517 display: grid;
518 grid-template-columns: 52px minmax(328px, 1fr) 52px minmax(328px, 1fr);
519 min-width: 760px;
520 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
521 font-size: 12px;
522 line-height: 1.5;
523 }
524
525 .diff-side-number,
526 .diff-side-code {
527 min-height: 22px;
528 border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
529 }
530
531 .diff-side-number {
532 padding: 2px 8px;
533 color: var(--text-secondary);
534 text-align: right;
535 user-select: none;
536 border-right: 1px solid var(--border);
537 }
538
539 .diff-side-code {
540 display: block;
541 margin: 0;
542 padding: 2px 10px;
543 border-radius: 0;
544 background: transparent;
545 white-space: pre;
546 }
547
548 .diff-column-divider {
549 border-left: 1px solid var(--border);
550 }
551
552 .diff-add {
553 background: color-mix(in srgb, var(--success) 18%, transparent);
554 }
555
556 .diff-remove {
557 background: color-mix(in srgb, var(--danger) 18%, transparent);
558 }
559
560 .diff-empty {
561 background: color-mix(in srgb, var(--bg-subtle) 70%, transparent);
562 }
563
564 .diff-meta {
565 color: var(--text-secondary);
566 background: var(--bg-subtle);
567 }
568
569 .diff-range-row {
570 grid-column: 1 / -1;
571 padding: 4px 10px;
572 color: var(--accent);
573 background: var(--bg-subtle);
574 border-bottom: 1px solid var(--border);
575 white-space: pre;
576 }
577
578 /* ===========================================
579 Common States
580 =========================================== */
581 .empty-state {
582 padding: 40px;
583 text-align: center;
584 color: var(--text-secondary);
585 }
586
587 .loading-state {
588 padding: 40px;
589 text-align: center;
590 color: var(--text-secondary);
591 }
592
593 .error-message {
594 padding: 15px;
595 border: 1px solid var(--danger-border);
596 background: var(--danger-bg);
597 color: var(--danger);
598 border-radius: 6px;
599 margin-bottom: 20px;
600 }
601
602 /* ===========================================
603 Repository Browser
604 =========================================== */
605 .repo-container {
606 font-family: "More Thin", sans-serif;
607 max-width: 980px;
608 margin: 40px auto;
609 color: var(--text-primary);
610 padding: 0 20px;
611 }
612
613 /* Clone Box */
614 .clone-box {
615 background: var(--bg-subtle);
616 border: 1px solid var(--border);
617 border-radius: 6px;
618 padding: 12px 16px;
619 margin-bottom: 24px;
620 display: flex;
621 justify-content: space-between;
622 align-items: center;
623 }
624
625 .clone-label {
626 font-weight: 600;
627 font-size: 13px;
628 margin-right: 10px;
629 color: var(--text-primary);
630 }
631
632 .clone-url {
633 font-family: "More Thin", sans-serif;
634 background: var(--bg);
635 border: 1px solid var(--border);
636 padding: 4px 8px;
637 border-radius: 4px;
638 font-size: 12px;
639 color: var(--text-secondary);
640 flex-grow: 1;
641 }
642
643 /* Breadcrumb */
30 .breadcrumb { 644 .breadcrumb {
31 margin-bottom: 1.5rem; 645 display: flex;
32 font-size: 0.95rem; 646 align-items: center;
647 font-size: 14px;
648 margin-bottom: 16px;
649 color: var(--text-secondary);
650 padding: 8px 0;
33 } 651 }
34 652
35 .breadcrumb a { 653 .breadcrumb a {
36 color: var(--link); 654 color: var(--accent);
655 text-decoration: none;
656 border-radius: 4px;
657 padding: 2px 6px;
37 } 658 }
38 659
39 .breadcrumb a:hover { 660 .breadcrumb a:hover {
661 background: var(--bg-subtle);
40 text-decoration: underline; 662 text-decoration: underline;
41 } 663 }
42 664
43 .breadcrumb span { 665 .breadcrumb .separator {
44 color: var(--secondary); 666 margin: 0 4px;
45 margin: 0 0.5rem; 667 color: var(--text-secondary);
46 } 668 opacity: 0.5;
47 669 }
48 .file-list { 670
671 .breadcrumb .nav-item.active {
672 font-weight: 600;
673 color: var(--text-primary);
674 padding: 2px 6px;
675 }
676
677 /* File List */
678 .file-list-container {
49 border: 1px solid var(--border); 679 border: 1px solid var(--border);
50 border-radius: 6px; 680 border-radius: 6px;
51 overflow: hidden; 681 overflow: hidden;
52 } 682 background: var(--bg);
53 683 }
54 .file-item { 684
55 display: flex; 685 .file-header {
56 align-items: center; 686 background: var(--bg-subtle);
57 padding: 0.75rem 1rem;
58 border-bottom: 1px solid var(--border); 687 border-bottom: 1px solid var(--border);
59 transition: background-color 0.2s; 688 padding: 12px 16px;
60 } 689 font-size: 13px;
61 690 font-weight: 600;
62 .file-item:last-child { 691 color: var(--text-secondary);
692 }
693
694 .file-row {
695 display: flex;
696 align-items: center;
697 padding: 10px 16px;
698 border-bottom: 1px solid var(--border);
699 transition: background 0.1s;
700 }
701
702 .file-row:last-child {
63 border-bottom: none; 703 border-bottom: none;
64 } 704 }
65 705
66 .file-item:hover { 706 .file-row:hover {
67 background: var(--hover); 707 background: var(--hover);
68 } 708 }
69 709
70 .file-item .icon { 710 .file-row .icon img {
71 margin-right: 0.75rem;
72 font-size: 1.2rem;
73 width: 20px; 711 width: 20px;
712 height: 20px;
713 vertical-align: middle;
714 margin-right: 12px;
715 }
716
717 .file-row .name a {
718 color: var(--text-primary);
719 text-decoration: none;
720 font-size: 14px;
721 }
722
723 .file-row .name a:hover {
724 color: var(--accent);
725 text-decoration: underline;
726 }
727
728 /* Readme */
729 .readme-section {
730 margin-top: 32px;
731 border: 1px solid var(--border);
732 border-radius: 6px;
733 }
734
735 .readme-header {
736 background: var(--bg-subtle);
737 padding: 10px 16px;
738 font-size: 12px;
739 font-weight: 600;
740 border-bottom: 1px solid var(--border);
741 display: flex;
742 align-items: center;
743 gap: 8px;
744 }
745
746 .readme-content {
747 padding: 32px;
748 background: var(--bg);
749 overflow-x: auto;
750 color: var(--text-primary);
751 }
752
753 /* File Viewer Modal */
754 .file-viewer-overlay {
755 position: fixed;
756 inset: 0;
757 background: var(--overlay);
758 display: flex;
759 justify-content: center;
760 align-items: center;
761 z-index: 1000;
762 padding: 20px;
763 }
764
765 .file-viewer {
766 background: var(--bg);
767 border: 1px solid var(--border);
768 border-radius: 6px;
769 width: 100%;
770 max-width: 900px;
771 max-height: 90vh;
772 display: flex;
773 flex-direction: column;
774 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
775 }
776
777 .file-viewer-header {
778 display: flex;
779 align-items: center;
780 justify-content: space-between;
781 padding: 12px 16px;
782 background: var(--bg-subtle);
783 border-bottom: 1px solid var(--border);
784 border-radius: 6px 6px 0 0;
785 }
786
787 .file-viewer-title {
788 font-weight: 600;
789 font-size: 14px;
790 color: var(--text-primary);
791 display: flex;
792 align-items: center;
793 gap: 8px;
794 }
795
796 .file-viewer-close {
797 background: transparent;
798 border: none;
799 cursor: pointer;
800 padding: 4px;
801 border-radius: 4px;
802 display: flex;
803 align-items: center;
804 justify-content: center;
805 }
806
807 .file-viewer-close:hover {
808 background: var(--hover);
809 }
810
811 .file-viewer-close img {
812 width: 16px;
813 height: 16px;
814 opacity: 0.7;
815 }
816
817 .file-viewer-actions {
818 display: flex;
819 align-items: center;
820 gap: 12px;
821 }
822
823 .file-viewer-actions a {
824 font-size: 13px;
825 }
826
827 .file-viewer-content {
828 overflow: auto;
829 flex: 1;
830 }
831
832 .static-file-viewer {
833 max-width: 1100px;
834 }
835
836 .static-file-preview {
837 min-height: 240px;
838 padding: 20px;
839 display: flex;
840 align-items: center;
841 justify-content: center;
842 background: var(--bg-subtle);
843 }
844
845 .static-file-image,
846 .static-file-video {
847 display: block;
848 max-width: 100%;
849 max-height: 75vh;
850 object-fit: contain;
851 }
852
853 .static-file-audio {
854 width: min(100%, 640px);
855 }
856
857 .static-file-pdf {
858 width: 100%;
859 height: 75vh;
860 border: 0;
861 background: #fff;
862 }
863
864 .file-viewer-content pre {
865 margin: 0;
866 padding: 16px;
867 background: var(--bg-code);
868 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
869 font-size: 13px;
870 line-height: 1.5;
871 overflow-x: auto;
872 }
873
874 .file-viewer-content code {
875 background: transparent;
876 padding: 0;
877 }
878
879 .file-viewer-loading {
880 padding: 40px;
74 text-align: center; 881 text-align: center;
75 } 882 color: var(--text-secondary);
76 883 }
77 .file-item .name { 884
885 .file-viewer-line-numbers {
886 display: inline-block;
887 user-select: none;
888 text-align: right;
889 padding-right: 16px;
890 margin-right: 16px;
891 border-right: 1px solid var(--border);
892 color: var(--text-secondary);
893 opacity: 0.5;
894 }
895
896 /* Theme Toggle Button */
897 .theme-toggle {
898 margin-left: auto;
899 background: var(--bg-subtle);
900 border: 1px solid var(--border);
901 border-radius: 6px;
902 padding: 8px 12px;
903 cursor: pointer;
904 display: flex;
905 align-items: center;
906 gap: 6px;
907 color: var(--text-secondary);
908 font-size: 13px;
909 transition: all 0.2s;
910 }
911
912 .theme-toggle:hover {
913 background: var(--hover);
914 color: var(--text-primary);
915 }
916
917 .theme-toggle svg {
918 flex-shrink: 0;
919 }
920
921 /* Description */
922 .description {
923 color: var(--text-secondary);
924 margin: 0;
925 font-size: 14px;
926 }
927
928 /* ===========================================
929 Mobile Responsive
930 =========================================== */
931 @media (max-width: 768px) {
932 .app-container {
933 padding: 20px 15px;
934 }
935
936 .repo-container {
937 padding: 0 15px;
938 }
939
940 .file-row {
941 padding: 8px 12px;
942 }
943
944 .clone-box {
945 padding: 10px 12px;
946 flex-direction: column;
947 align-items: flex-start;
948 gap: 8px;
949 }
950 }
951
952 /* ===========================================
953 Footer
954 =========================================== */
955 .footer {
956 margin-top: 48px;
957 padding-top: 24px;
958 border-top: 1px solid var(--border);
959 }
960
961 .footer-content {
962 display: flex;
963 align-items: center;
964 justify-content: center;
965 gap: 8px;
966 padding: 16px 0;
967 color: var(--text-secondary);
968 font-size: 13px;
969 }
970
971 .footer-separator {
972 opacity: 0.5;
973 }
974
975 .footer-text {
976 color: var(--text-secondary);
977 }
978
979 .clone-box-inner {
980 display: flex;
981 align-items: center;
982 width: 100%;
983 }
984
985 /* Header content wrapper */
986 .header-content {
78 flex: 1; 987 flex: 1;
79 font-family: 'Monaco', 'Courier New', monospace; 988 }
80 font-size: 0.9rem; 989
81 } 990 .header-content h1 {
82 991 margin: 0;
83 .file-item .name a { 992 font-size: 24px;
84 color: var(--fg); 993 font-weight: 600;
85 } 994 color: var(--text-primary);
86 995 }
87 .file-item .name a:hover { 996
88 color: var(--link); 997 .header-content h1 a {
89 } 998 color: inherit;
90 999 text-decoration: none;
91 .file-item.directory .icon { 1000 }
92 color: var(--accent); 1001
93 } 1002 .header-content h1 a:hover {
94 1003 text-decoration: none;
95 .file-item.file .icon { 1004 }
96 color: var(--secondary);
97 }
98
99 .readme-section {
100 margin-top: 2rem;
101 padding-top: 2rem;
102 border-top: 1px solid var(--border);
103 }
104
105 .readme-section h2 {
106 margin-bottom: 1rem;
107 font-size: 1.5rem;
108 }
109
110 .readme-content {
111 border: 1px solid var(--border);
112 border-radius: 6px;
113 padding: 1.5rem;
114 background: var(--code-bg);
115 }
116
117 .readme-content h1 { font-size: 1.75rem; margin-top: 1.5rem; }
118 .readme-content h2 { font-size: 1.5rem; margin-top: 1.25rem; }
119 .readme-content h3 { font-size: 1.25rem; margin-top: 1rem; }
120
121 .readme-content h1:first-child,
122 .readme-content h2:first-child,
123 .readme-content h3:first-child {
124 margin-top: 0;
125 }
126
127 .readme-content ul,
128 .readme-content ol {
129 margin-left: 2rem;
130 margin-bottom: 1rem;
131 }
132
133 .readme-content li {
134 margin-bottom: 0.5rem;
135 }
136
137 .readme-content img {
138 max-width: 100%;
139 height: auto;
140 border-radius: 6px;
141 }
142
143 .empty-state {
144 text-align: center;
145 padding: 3rem 1rem;
146 color: var(--secondary);
147 }
148
149 .error-message {
150 background: var(--danger);
151 color: white;
152 padding: 1rem;
153 border-radius: 6px;
154 margin-bottom: 1rem;
155 }
156
157 /* Mobile responsive */
158 @media (max-width: 768px) {
159 main {
160 padding: 1rem;
161 }
162
163 .file-item {
164 padding: 0.5rem 0.75rem;
165 }
166
167 .file-item .name {
168 font-size: 0.85rem;
169 }
170
171 .clone-info {
172 padding: 0.75rem;
173 overflow-x: auto;
174 }
175
176 .readme-content {
177 padding: 1rem;
178 }
179 }