A container registry that uses the AT Protocol for manifest storage and S3 for blob storage.
atcr.io
docker
container
atproto
go
1:root {
2 --primary: #0066cc;
3 --primary-dark: #0052a3;
4 --secondary: #6c757d;
5 --success: #28a745;
6 --success-bg: #d4edda;
7 --warning: #ffc107;
8 --warning-bg: #fff3cd;
9 --danger: #dc3545;
10 --danger-bg: #f8d7da;
11 --bg: #ffffff;
12 --fg: #1a1a1a;
13 --border-dark: #666;
14 --border: #e0e0e0;
15 --code-bg: #f5f5f5;
16 --hover-bg: #f9f9f9;
17 --star: #fbbf24;
18
19 /* Hero section colors */
20 --hero-bg-start: #f8f9fa;
21 --hero-bg-end: #e9ecef;
22
23 /* Terminal colors */
24 --terminal-bg: var(--fg);
25 --terminal-header-bg: #2d2d2d;
26 --terminal-text: var(--border);
27 --terminal-prompt: #4ec9b0;
28 --terminal-comment: #6a9955;
29}
30
31* {
32 margin: 0;
33 padding: 0;
34 box-sizing: border-box;
35}
36
37body {
38 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
39 background: var(--bg);
40 color: var(--fg);
41 line-height: 1.6;
42}
43
44.container {
45 max-width: 1200px;
46 margin: 0 auto;
47 padding: 20px;
48}
49
50/* Navigation */
51.navbar {
52 background: var(--fg);
53 color:var(--bg);
54 padding: 1rem 2rem;
55 display: flex;
56 justify-content: space-between;
57 align-items: center;
58 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
59}
60
61.nav-brand a {
62 color:var(--bg);
63 text-decoration: none;
64 font-size: 1.5rem;
65 font-weight: bold;
66}
67
68.nav-brand .at-protocol {
69 color: var(--primary);
70}
71
72.nav-search {
73 flex: 1;
74 max-width: 400px;
75 margin: 0 2rem;
76}
77
78.nav-search input {
79 width: 100%;
80 padding: 0.5rem 1rem;
81 border: none;
82 border-radius: 4px;
83 font-size: 0.95rem;
84}
85
86.nav-links {
87 display: flex;
88 gap: 1rem;
89 align-items: center;
90}
91
92.nav-links a {
93 color:var(--fg);
94 text-decoration: none;
95 padding: 0.5rem 1rem;
96}
97
98.nav-links a:hover {
99 background:var(--secondary);
100 border-radius: 4px;
101}
102
103/* User dropdown */
104.user-dropdown {
105 position: relative;
106}
107
108.user-menu-btn {
109 display: flex;
110 align-items: center;
111 gap: 0.5rem;
112 background: transparent;
113 color:var(--bg);
114 border: none;
115 padding: 0.5rem;
116 cursor: pointer;
117 border-radius: 4px;
118 transition: background 0.2s;
119}
120
121.user-menu-btn:hover {
122 background:var(--secondary);
123}
124
125.user-avatar {
126 width: 32px;
127 height: 32px;
128 border-radius: 50%;
129 object-fit: cover;
130}
131
132.user-avatar-placeholder {
133 width: 32px;
134 height: 32px;
135 border-radius: 50%;
136 background: var(--primary);
137 display: flex;
138 align-items: center;
139 justify-content: center;
140 font-weight: bold;
141 text-transform: uppercase;
142}
143
144/* Profile page avatars */
145.profile-avatar {
146 width: 80px;
147 height: 80px;
148 border-radius: 50%;
149 object-fit: cover;
150}
151
152.profile-avatar-placeholder {
153 width: 80px;
154 height: 80px;
155 border-radius: 50%;
156 background: var(--primary);
157 display: flex;
158 align-items: center;
159 justify-content: center;
160 font-weight: bold;
161 font-size: 2rem;
162 text-transform: uppercase;
163 color: var(--bg);
164}
165
166.user-profile {
167 display: flex;
168 align-items: center;
169 gap: 1rem;
170 margin-bottom: 2rem;
171}
172
173.user-profile h1 {
174 font-size: 1.8rem;
175 margin: 0;
176}
177
178.user-handle {
179 color: var(--bg);
180 font-size: 0.95rem;
181}
182
183.dropdown-arrow {
184 transition: transform 0.2s;
185}
186
187.user-menu-btn[aria-expanded="true"] .dropdown-arrow {
188 transform: rotate(180deg);
189}
190
191.dropdown-menu {
192 position: absolute;
193 top: calc(100% + 0.5rem);
194 right: 0;
195 background:var(--bg);
196 border: 1px solid var(--border);
197 border-radius: 8px;
198 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
199 min-width: 200px;
200 overflow: hidden;
201 z-index: 1000;
202}
203
204.dropdown-menu[hidden] {
205 display: none;
206}
207
208.dropdown-item {
209 display: block;
210 width: 100%;
211 padding: 0.75rem 1rem;
212 text-align: left;
213 color: var(--fg);
214 text-decoration: none;
215 border: none;
216 background:var(--bg);
217 cursor: pointer;
218 transition: background 0.2s;
219 font-size: 0.95rem;
220}
221
222.dropdown-item:hover {
223 background: var(--hover-bg);
224}
225
226.dropdown-divider {
227 margin: 0;
228 border: none;
229 border-top: 1px solid var(--border);
230}
231
232.logout-btn {
233 color: var(--danger);
234 font-weight: 500;
235}
236
237/* Buttons */
238button, .btn, .btn-primary, .btn-secondary {
239 padding: 0.5rem 1rem;
240 background: var(--primary);
241 color:var(--bg);
242 border: none;
243 border-radius: 4px;
244 cursor: pointer;
245 text-decoration: none;
246 display: inline-block;
247 font-size: 0.95rem;
248 transition: opacity 0.2s;
249}
250
251button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover {
252 opacity: 0.9;
253}
254
255/* Override nav-links color for primary button */
256.nav-links .btn-primary {
257 color: var(--bg);
258}
259
260.btn-secondary {
261 background: var(--secondary);
262}
263
264.btn-link {
265 background: transparent;
266 color:var(--bg);
267 text-decoration: underline;
268}
269
270.delete-btn {
271 background: var(--danger);
272 padding: 0.25rem 0.5rem;
273 font-size: 0.85rem;
274}
275
276.copy-btn {
277 padding: 0.25rem 0.75rem;
278 background: var(--primary);
279 font-size: 0.85rem;
280}
281
282/* Cards */
283.push-card, .repository-card {
284 border: 1px solid var(--border);
285 border-radius: 8px;
286 padding: 1rem;
287 margin-bottom: 1rem;
288 background:var(--bg);
289 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
290}
291
292.push-header {
293 display: flex;
294 gap: 1rem;
295 align-items: flex-start;
296 margin-bottom: 0.75rem;
297}
298
299.push-user {
300 color: var(--primary);
301 text-decoration: none;
302 font-weight: 500;
303}
304
305.push-user:hover {
306 text-decoration: underline;
307}
308
309.push-separator {
310 color: var(--border-dark);
311 margin: 0 0.25rem;
312}
313
314.push-repo {
315 font-weight: 500;
316 color: var(--primary);
317 text-decoration: none;
318}
319
320.push-repo:hover {
321 color: var(--primary);
322 text-decoration: underline;
323}
324
325.push-tag {
326 color: var(--secondary);
327}
328
329.push-details {
330 color: var(--border-dark);
331 font-size: 0.9rem;
332 margin-bottom: 0.75rem;
333}
334
335.digest {
336 font-family: 'Monaco', 'Courier New', monospace;
337 font-size: 0.85rem;
338 background: var(--code-bg);
339 padding: 0.1rem 0.3rem;
340 border-radius: 3px;
341 max-width: 200px;
342 overflow: hidden;
343 text-overflow: ellipsis;
344 white-space: nowrap;
345 display: inline-block;
346 vertical-align: middle;
347 position: relative;
348}
349
350/* Digest with copy button container */
351.digest-container {
352 display: inline-flex;
353 align-items: center;
354 gap: 0.5rem;
355}
356
357/* Digest tooltip on hover - using title attribute for native browser tooltip */
358.digest {
359 cursor: default;
360}
361
362/* Digest copy button */
363.digest-copy-btn {
364 background: transparent;
365 border: 1px solid var(--border);
366 color: var(--secondary);
367 padding: 0.1rem 0.4rem;
368 font-size: 0.75rem;
369 border-radius: 3px;
370 cursor: pointer;
371 transition: all 0.2s;
372 display: inline-flex;
373 align-items: center;
374}
375
376.digest-copy-btn:hover {
377 background: var(--hover-bg);
378 border-color: var(--primary);
379 color: var(--primary);
380}
381
382.separator {
383 color: var(--border);
384}
385
386/* Push card icon and layout */
387.push-icon {
388 width: 48px;
389 height: 48px;
390 border-radius: 8px;
391 object-fit: cover;
392 flex-shrink: 0;
393}
394
395.push-icon-placeholder {
396 width: 48px;
397 height: 48px;
398 border-radius: 8px;
399 background: var(--primary);
400 display: flex;
401 align-items: center;
402 justify-content: center;
403 font-weight: bold;
404 font-size: 1.5rem;
405 text-transform: uppercase;
406 color: var(--bg);
407 flex-shrink: 0;
408}
409
410.push-info {
411 flex: 1;
412 min-width: 0;
413}
414
415.push-title-row {
416 display: flex;
417 justify-content: space-between;
418 align-items: center;
419 gap: 1rem;
420 margin-bottom: 0.25rem;
421}
422
423.push-title {
424 font-size: 1.1rem;
425 flex: 1;
426}
427
428.push-description {
429 color: var(--border-dark);
430 font-size: 0.9rem;
431 line-height: 1.4;
432 margin: 0.25rem 0 0 0;
433}
434
435/* Push stats */
436.push-stats {
437 display: flex;
438 gap: 1rem;
439 align-items: center;
440 flex-shrink: 0;
441}
442
443.push-stat {
444 display: flex;
445 align-items: center;
446 gap: 0.35rem;
447 color: var(--border-dark);
448 font-size: 0.9rem;
449}
450
451.push-stat .star-icon {
452 color: var(--star);
453 font-size: 1rem;
454}
455
456.push-stat .pull-icon {
457 color: var(--primary);
458 font-size: 1rem;
459}
460
461.push-stat .stat-count {
462 font-weight: 600;
463 color: var(--fg);
464}
465
466/* Repository Cards */
467.repo-header {
468 padding: 1rem;
469 cursor: pointer;
470 display: flex;
471 gap: 1rem;
472 align-items: flex-start;
473 background: var(--hover-bg);
474 border-radius: 8px 8px 0 0;
475 margin: -1rem -1rem 0 -1rem;
476}
477
478.repo-header:hover {
479 background: var(--hover-bg);
480}
481
482.repo-icon {
483 width: 48px;
484 height: 48px;
485 border-radius: 8px;
486 object-fit: cover;
487 flex-shrink: 0;
488}
489
490.repo-info {
491 flex: 1;
492 min-width: 0;
493}
494
495.repo-title-row {
496 display: flex;
497 align-items: center;
498 gap: 0.75rem;
499 margin-bottom: 0.25rem;
500}
501
502.repo-header h2 {
503 font-size: 1.3rem;
504 margin: 0;
505}
506
507.repo-title-link {
508 color: var(--fg);
509 text-decoration: none;
510}
511
512.repo-title-link:hover {
513 color: var(--primary);
514 text-decoration: underline;
515}
516
517.repo-badge {
518 display: inline-flex;
519 align-items: center;
520 padding: 0.2rem 0.6rem;
521 font-size: 0.75rem;
522 font-weight: 500;
523 border-radius: 12px;
524 white-space: nowrap;
525}
526
527.license-badge {
528 background: var(--code-bg);
529 color: var(--primary);
530 border: 1px solid #90caf9;
531}
532
533/* Clickable license badges */
534a.license-badge {
535 text-decoration: none;
536 cursor: pointer;
537 transition: all 0.2s ease;
538}
539
540a.license-badge:hover {
541 background: var(--primary);
542 color: var(--bg);
543 border-color: var(--primary);
544 transform: translateY(-1px);
545 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
546}
547
548.version-badge {
549 background: #f3e5f5;
550 color: #7b1fa2;
551 border: 1px solid #ba68c8;
552}
553
554.repo-description {
555 color: var(--border-dark);
556 font-size: 0.95rem;
557 margin: 0.25rem 0 0.5rem 0;
558 line-height: 1.4;
559}
560
561.repo-stats {
562 color:var(--border-dark);
563 font-size: 0.9rem;
564 display: flex;
565 gap: 0.5rem;
566 align-items: center;
567 flex-wrap: wrap;
568}
569
570.repo-link {
571 color: var(--primary);
572 text-decoration: none;
573 font-weight: 500;
574}
575
576.repo-link:hover {
577 text-decoration: underline;
578}
579
580.expand-btn {
581 background: transparent;
582 color: var(--fg);
583 padding: 0.25rem 0.5rem;
584 font-size: 1.2rem;
585}
586
587.repo-details {
588 padding-top: 1rem;
589}
590
591.tags-section, .manifests-section {
592 margin-bottom: 1.5rem;
593}
594
595.tags-section h3, .manifests-section h3 {
596 font-size: 1.1rem;
597 margin-bottom: 0.5rem;
598 color: var(--secondary);
599}
600
601.tag-row, .manifest-row {
602 display: flex;
603 gap: 1rem;
604 align-items: center;
605 padding: 0.5rem;
606 border-bottom: 1px solid var(--border);
607}
608
609.tag-row:last-child, .manifest-row:last-child {
610 border-bottom: none;
611}
612
613.tag-name {
614 font-weight: 500;
615 min-width: 100px;
616}
617
618.tag-arrow {
619 color: var(--border-dark);
620}
621
622/* Note: .tag-digest and .manifest-digest styling now handled by .digest class above */
623
624/* Settings Page */
625.settings-page {
626 max-width: 800px;
627 margin: 0 auto;
628}
629
630.settings-section {
631 background:var(--bg);
632 border: 1px solid var(--border);
633 border-radius: 8px;
634 padding: 1.5rem;
635 margin-bottom: 1.5rem;
636 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
637}
638
639.settings-section h2 {
640 font-size: 1.3rem;
641 margin-bottom: 1rem;
642 padding-bottom: 0.5rem;
643 border-bottom: 2px solid var(--border);
644}
645
646.form-group {
647 margin-bottom: 1rem;
648}
649
650.form-group label {
651 display: block;
652 margin-bottom: 0.5rem;
653 font-weight: 500;
654 color: var(--secondary);
655}
656
657.form-group input,
658.form-group select {
659 width: 100%;
660 padding: 0.5rem;
661 border: 1px solid var(--border);
662 border-radius: 4px;
663 font-size: 1rem;
664}
665
666.form-group small {
667 display: block;
668 margin-top: 0.25rem;
669 color: var(--border-dark);
670 font-size: 0.85rem;
671}
672
673.info-row {
674 margin-bottom: 0.75rem;
675}
676
677.info-row strong {
678 display: inline-block;
679 min-width: 150px;
680 color: var(--secondary);
681}
682
683/* Modal */
684.modal-overlay {
685 position: fixed;
686 top: 0;
687 left: 0;
688 right: 0;
689 bottom: 0;
690 background: rgba(0, 0, 0, 0.6);
691 display: flex;
692 justify-content: center;
693 align-items: center;
694 z-index: 1000;
695}
696
697.modal-content {
698 background: var(--bg);
699 padding: 2rem;
700 border-radius: 8px;
701 max-width: 800px;
702 max-height: 80vh;
703 overflow-y: auto;
704 position: relative;
705 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
706}
707
708.modal-close {
709 position: absolute;
710 top: 1rem;
711 right: 1rem;
712 background: none;
713 border: none;
714 font-size: 1.5rem;
715 cursor: pointer;
716 color: var(--secondary);
717}
718
719.modal-close:hover {
720 color: var(--fg);
721}
722
723.manifest-json {
724 background: var(--code-bg);
725 padding: 1rem;
726 border-radius: 4px;
727 overflow-x: auto;
728 font-family: 'Monaco', 'Courier New', monospace;
729 font-size: 0.85rem;
730 border: 1px solid var(--border);
731}
732
733/* Loading and Empty States */
734.loading {
735 text-align: center;
736 padding: 2rem;
737 color: var(--border-dark);
738}
739
740.empty-state {
741 text-align: center;
742 padding: 3rem 2rem;
743 background: var(--hover-bg);
744 border-radius: 8px;
745 border: 1px solid var(--border);
746}
747
748.empty-state p {
749 margin-bottom: 1rem;
750 font-size: 1.1rem;
751 color: var(--secondary);
752}
753
754.empty-state pre {
755 background: var(--code-bg);
756 padding: 1rem;
757 border-radius: 4px;
758 display: inline-block;
759}
760
761.empty-message {
762 color: var(--border-dark);
763 font-style: italic;
764 padding: 1rem;
765}
766
767/* Status Messages / Callouts */
768.note {
769 background: var(--warning-bg);
770 border-left: 4px solid var(--warning);
771 padding: 1rem;
772 margin: 1rem 0;
773}
774
775.success {
776 background: var(--success-bg);
777 border-left: 4px solid var(--success);
778 padding: 1rem;
779 margin: 1rem 0;
780}
781
782.error {
783 background: var(--danger-bg);
784 border-left: 4px solid var(--danger);
785 padding: 1rem;
786 margin: 1rem 0;
787}
788
789/* Load More Button */
790.load-more {
791 width: 100%;
792 margin-top: 1rem;
793 background: var(--secondary);
794}
795
796/* Login Page */
797.login-page {
798 max-width: 450px;
799 margin: 4rem auto;
800 padding: 2rem;
801}
802
803.login-page h1 {
804 font-size: 2rem;
805 margin-bottom: 0.5rem;
806 text-align: center;
807}
808
809.login-page > p {
810 text-align: center;
811 color: var(--secondary);
812 margin-bottom: 2rem;
813}
814
815.login-form {
816 background:var(--bg);
817 padding: 2rem;
818 border-radius: 8px;
819 border: 1px solid var(--border);
820 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
821}
822
823.login-form .form-group {
824 margin-bottom: 1.5rem;
825}
826
827.login-form label {
828 display: block;
829 margin-bottom: 0.5rem;
830 font-weight: 500;
831}
832
833.login-form input[type="text"] {
834 width: 100%;
835 padding: 0.75rem;
836 border: 1px solid var(--border);
837 border-radius: 4px;
838 font-size: 1rem;
839}
840
841.login-form input[type="text"]:focus {
842 outline: none;
843 border-color: var(--primary);
844}
845
846.btn-large {
847 width: 100%;
848 padding: 0.75rem 1.5rem;
849 font-size: 1rem;
850 font-weight: 500;
851}
852
853.login-help {
854 text-align: center;
855 margin-top: 2rem;
856 color: var(--secondary);
857}
858
859.login-help a {
860 color: var(--primary);
861 text-decoration: none;
862}
863
864.login-help a:hover {
865 text-decoration: underline;
866}
867
868/* Repository Page */
869.repository-page {
870 /* Let container's max-width (1200px) control page width */
871 margin: 0 auto;
872}
873
874.repository-header {
875 background:var(--bg);
876 border: 1px solid var(--border);
877 border-radius: 8px;
878 padding: 2rem;
879 margin-bottom: 2rem;
880 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
881}
882
883.repo-hero {
884 display: flex;
885 gap: 1.5rem;
886 align-items: flex-start;
887 margin-bottom: 1.5rem;
888}
889
890.repo-hero-icon {
891 width: 80px;
892 height: 80px;
893 border-radius: 12px;
894 object-fit: cover;
895 flex-shrink: 0;
896}
897
898.repo-hero-icon-placeholder {
899 width: 80px;
900 height: 80px;
901 border-radius: 12px;
902 background: var(--primary);
903 display: flex;
904 align-items: center;
905 justify-content: center;
906 font-weight: bold;
907 font-size: 2.5rem;
908 text-transform: uppercase;
909 color: var(--bg);
910 flex-shrink: 0;
911}
912
913.repo-hero-info {
914 flex: 1;
915}
916
917.repo-hero-info h1 {
918 font-size: 2rem;
919 margin: 0 0 0.5rem 0;
920}
921
922.owner-link {
923 color: var(--primary);
924 text-decoration: none;
925}
926
927.owner-link:hover {
928 text-decoration: underline;
929}
930
931.repo-separator {
932 color: var(--border-dark);
933 margin: 0 0.25rem;
934}
935
936.repo-name {
937 color: var(--fg);
938}
939
940.repo-hero-description {
941 color: var(--border-dark);
942 font-size: 1.1rem;
943 line-height: 1.5;
944 margin: 0.5rem 0 0 0;
945}
946
947.repo-actions {
948 margin-top: 1.5rem;
949}
950
951.star-btn {
952 display: inline-flex;
953 align-items: center;
954 gap: 0.5rem;
955 padding: 0.5rem 1rem;
956 background: var(--bg);
957 border: 2px solid var(--border);
958 border-radius: 6px;
959 font-size: 1rem;
960 cursor: pointer;
961 transition: all 0.2s ease;
962 color: var(--fg);
963}
964
965.star-btn:hover:not(:disabled) {
966 border-color: var(--primary);
967 background: var(--hover-bg);
968}
969
970.star-btn:disabled {
971 opacity: 0.6;
972 cursor: not-allowed;
973}
974
975.star-btn.starred {
976 border-color:var(--star);
977 background: var(--code-bg);
978}
979
980.star-btn.starred:hover:not(:disabled) {
981 background: var(--hover-bg);
982}
983
984.star-icon {
985 font-size: 1.25rem;
986 line-height: 1;
987 transition: transform 0.2s ease;
988 color:var(--star);
989}
990
991.star-btn:hover:not(:disabled) .star-icon {
992 transform: scale(1.1);
993}
994
995.star-count {
996 font-weight: 600;
997 color: var(--fg);
998}
999
1000.repo-metadata {
1001 display: flex;
1002 gap: 1rem;
1003 align-items: center;
1004 flex-wrap: wrap;
1005 margin-bottom: 1.5rem;
1006 padding-top: 1rem;
1007 border-top: 1px solid var(--border);
1008}
1009
1010.metadata-badge {
1011 display: inline-flex;
1012 align-items: center;
1013 padding: 0.3rem 0.75rem;
1014 font-size: 0.85rem;
1015 font-weight: 500;
1016 border-radius: 16px;
1017 white-space: nowrap;
1018}
1019
1020.metadata-link {
1021 color: var(--primary);
1022 text-decoration: none;
1023 font-weight: 500;
1024}
1025
1026.metadata-link:hover {
1027 text-decoration: underline;
1028}
1029
1030.pull-command-section {
1031 padding-top: 1rem;
1032 border-top: 1px solid var(--border);
1033}
1034
1035.pull-command-section h3 {
1036 font-size: 1rem;
1037 margin-bottom: 0.75rem;
1038 color: var(--secondary);
1039}
1040
1041.repo-section {
1042 background:var(--bg);
1043 border: 1px solid var(--border);
1044 border-radius: 8px;
1045 padding: 1.5rem;
1046 margin-bottom: 2rem;
1047 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
1048}
1049
1050.repo-section h2 {
1051 font-size: 1.5rem;
1052 margin-bottom: 1rem;
1053 padding-bottom: 0.5rem;
1054 border-bottom: 2px solid var(--border);
1055}
1056
1057.tags-list, .manifests-list {
1058 display: flex;
1059 flex-direction: column;
1060 gap: 1rem;
1061}
1062
1063.tag-item, .manifest-item {
1064 border: 1px solid var(--border);
1065 border-radius: 6px;
1066 padding: 1rem;
1067 background: var(--hover-bg);
1068}
1069
1070.tag-item-header, .manifest-item-header {
1071 display: flex;
1072 justify-content: space-between;
1073 align-items: center;
1074 margin-bottom: 0.5rem;
1075}
1076
1077.tag-name-large {
1078 font-size: 1.2rem;
1079 font-weight: 600;
1080 color: var(--primary);
1081}
1082
1083.tag-timestamp {
1084 color: var(--border-dark);
1085 font-size: 0.9rem;
1086}
1087
1088.tag-item-details {
1089 margin-bottom: 0.75rem;
1090}
1091
1092.manifest-item-details {
1093 display: flex;
1094 gap: 0.5rem;
1095 align-items: center;
1096 color: var(--border-dark);
1097 font-size: 0.9rem;
1098 margin-top: 0.5rem;
1099}
1100
1101/* Offline manifest badge */
1102.offline-badge {
1103 display: inline-block;
1104 padding: 0.25rem 0.5rem;
1105 background: var(--warning-bg);
1106 color: var(--warning);
1107 border: 1px solid var(--warning);
1108 border-radius: 4px;
1109 font-size: 0.85rem;
1110 font-weight: 600;
1111 margin-left: 0.5rem;
1112}
1113
1114/* Checking manifest badge (health check in progress) */
1115.checking-badge {
1116 display: inline-block;
1117 padding: 0.25rem 0.5rem;
1118 background: #e3f2fd;
1119 color: #1976d2;
1120 border: 1px solid #1976d2;
1121 border-radius: 4px;
1122 font-size: 0.85rem;
1123 font-weight: 600;
1124 margin-left: 0.5rem;
1125}
1126
1127/* Hide offline manifests by default */
1128.manifest-item[data-reachable="false"] {
1129 display: none;
1130}
1131
1132/* Show offline manifests when toggle is checked */
1133.manifests-list.show-offline .manifest-item[data-reachable="false"] {
1134 display: block;
1135 opacity: 0.6;
1136}
1137
1138/* Show offline images toggle styling */
1139.show-offline-toggle {
1140 display: flex;
1141 align-items: center;
1142 gap: 0.5rem;
1143 cursor: pointer;
1144 user-select: none;
1145}
1146
1147.show-offline-toggle input[type="checkbox"] {
1148 cursor: pointer;
1149}
1150
1151.show-offline-toggle span {
1152 font-size: 0.9rem;
1153 color: var(--border-dark);
1154}
1155
1156.manifest-detail-label {
1157 font-weight: 500;
1158 color: var(--secondary);
1159}
1160
1161/* Multi-architecture badges */
1162.badge-multi {
1163 display: inline-flex;
1164 align-items: center;
1165 padding: 0.25rem 0.6rem;
1166 font-size: 0.75rem;
1167 font-weight: 600;
1168 border-radius: 12px;
1169 background: var(--primary);
1170 color: var(--bg);
1171 white-space: nowrap;
1172 margin-left: 0.5rem;
1173}
1174
1175.platform-badge {
1176 display: inline-flex;
1177 align-items: center;
1178 padding: 0.2rem 0.5rem;
1179 font-size: 0.75rem;
1180 font-weight: 500;
1181 border-radius: 4px;
1182 background: var(--code-bg);
1183 color: var(--fg);
1184 border: 1px solid var(--border);
1185 white-space: nowrap;
1186 font-family: 'Monaco', 'Courier New', monospace;
1187}
1188
1189.platforms-inline {
1190 display: flex;
1191 flex-wrap: wrap;
1192 gap: 0.5rem;
1193 align-items: center;
1194}
1195
1196.manifest-type {
1197 display: inline-flex;
1198 align-items: center;
1199 gap: 0.35rem;
1200 font-size: 0.9rem;
1201 font-weight: 500;
1202 color: var(--secondary);
1203}
1204
1205.platform-count {
1206 color: var(--border-dark);
1207 font-size: 0.85rem;
1208 font-style: italic;
1209}
1210
1211.text-muted {
1212 color: var(--border-dark);
1213 font-style: italic;
1214}
1215
1216/* Featured Repositories Section */
1217.featured-section {
1218 margin-bottom: 3rem;
1219}
1220
1221.featured-section h1 {
1222 font-size: 1.8rem;
1223 margin-bottom: 1.5rem;
1224}
1225
1226.featured-grid {
1227 display: grid;
1228 grid-template-columns: repeat(3, 1fr);
1229 gap: 1.5rem;
1230 margin-bottom: 2rem;
1231}
1232
1233.featured-card {
1234 border: 1px solid var(--border);
1235 border-radius: 8px;
1236 padding: 1.5rem;
1237 background: var(--bg);
1238 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
1239 transition: all 0.2s ease;
1240 text-decoration: none;
1241 color: var(--fg);
1242 display: flex;
1243 flex-direction: column;
1244 justify-content: space-between;
1245 min-height: 180px;
1246}
1247
1248.featured-card:hover {
1249 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
1250 border-color: var(--primary);
1251 transform: translateY(-2px);
1252}
1253
1254.featured-header {
1255 display: flex;
1256 gap: 1rem;
1257 align-items: flex-start;
1258 margin-bottom: 1rem;
1259}
1260
1261.featured-icon {
1262 width: 48px;
1263 height: 48px;
1264 border-radius: 8px;
1265 object-fit: cover;
1266 flex-shrink: 0;
1267}
1268
1269.featured-icon-placeholder {
1270 width: 48px;
1271 height: 48px;
1272 border-radius: 8px;
1273 background: var(--primary);
1274 display: flex;
1275 align-items: center;
1276 justify-content: center;
1277 font-weight: bold;
1278 font-size: 1.5rem;
1279 text-transform: uppercase;
1280 color:var(--bg);
1281 flex-shrink: 0;
1282}
1283
1284.featured-info {
1285 flex: 1;
1286 min-width: 0;
1287}
1288
1289.featured-title {
1290 font-size: 1.1rem;
1291 font-weight: 600;
1292 margin-bottom: 0.5rem;
1293 line-height: 1.3;
1294}
1295
1296.featured-owner {
1297 color: var(--primary);
1298}
1299
1300.featured-separator {
1301 color: var(--border-dark);
1302 margin: 0 0.25rem;
1303}
1304
1305.featured-name {
1306 color: var(--fg);
1307}
1308
1309.featured-description {
1310 color: var(--border-dark);
1311 font-size: 0.9rem;
1312 line-height: 1.4;
1313 margin: 0;
1314 overflow: hidden;
1315 text-overflow: ellipsis;
1316 display: -webkit-box;
1317 -webkit-line-clamp: 2;
1318 -webkit-box-orient: vertical;
1319 line-clamp: 2;
1320}
1321
1322.featured-stats {
1323 display: flex;
1324 gap: 1.5rem;
1325 align-items: center;
1326 padding-top: 0.75rem;
1327 border-top: 1px solid var(--border);
1328}
1329
1330.featured-stat {
1331 display: flex;
1332 align-items: center;
1333 gap: 0.5rem;
1334 color: var(--border-dark);
1335 font-size: 0.95rem;
1336}
1337
1338.featured-stat .star-icon {
1339 color: var(--star);
1340 font-size: 1.1rem;
1341}
1342
1343.featured-stat .pull-icon {
1344 color: var(--primary);
1345 font-size: 1.1rem;
1346}
1347
1348.featured-stat .stat-count {
1349 font-weight: 600;
1350 color: var(--fg);
1351}
1352
1353/* Hero Section */
1354.hero-section {
1355 background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
1356 padding: 4rem 2rem;
1357 border-bottom: 1px solid var(--border);
1358}
1359
1360.hero-content {
1361 max-width: 900px;
1362 margin: 0 auto;
1363 text-align: center;
1364}
1365
1366.hero-title {
1367 font-size: 3rem;
1368 font-weight: 700;
1369 margin-bottom: 1.5rem;
1370 color: var(--fg);
1371 line-height: 1.2;
1372}
1373
1374.hero-subtitle {
1375 font-size: 1.2rem;
1376 color: var(--border-dark);
1377 margin-bottom: 3rem;
1378 line-height: 1.6;
1379}
1380
1381.hero-terminal {
1382 max-width: 600px;
1383 margin: 0 auto 2.5rem;
1384 background: var(--terminal-bg);
1385 border-radius: 8px;
1386 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
1387 overflow: hidden;
1388}
1389
1390.terminal-header {
1391 background: var(--terminal-header-bg);
1392 padding: 0.75rem 1rem;
1393 display: flex;
1394 gap: 0.5rem;
1395 align-items: center;
1396}
1397
1398.terminal-dot {
1399 width: 12px;
1400 height: 12px;
1401 border-radius: 50%;
1402 background: var(--border-dark);
1403}
1404
1405.terminal-dot:nth-child(1) {
1406 background: #ff5f56;
1407}
1408
1409.terminal-dot:nth-child(2) {
1410 background: #ffbd2e;
1411}
1412
1413.terminal-dot:nth-child(3) {
1414 background: #27c93f;
1415}
1416
1417.terminal-content {
1418 padding: 1.5rem;
1419 margin: 0;
1420 font-family: 'Monaco', 'Courier New', monospace;
1421 font-size: 0.95rem;
1422 line-height: 1.8;
1423 color: var(--terminal-text);
1424 overflow-x: auto;
1425}
1426
1427.terminal-prompt {
1428 color: var(--terminal-prompt);
1429 font-weight: bold;
1430}
1431
1432.terminal-comment {
1433 color: var(--terminal-comment);
1434 font-style: italic;
1435}
1436
1437.hero-actions {
1438 display: flex;
1439 gap: 1rem;
1440 justify-content: center;
1441 margin-bottom: 4rem;
1442}
1443
1444.btn-hero-primary,
1445.btn-hero-secondary {
1446 padding: 0.9rem 2rem;
1447 font-size: 1.1rem;
1448 font-weight: 600;
1449 border-radius: 6px;
1450 text-decoration: none;
1451 transition: all 0.2s ease;
1452 display: inline-block;
1453}
1454
1455.btn-hero-primary {
1456 background: var(--primary);
1457 color: var(--bg);
1458 border: 2px solid var(--primary);
1459}
1460
1461.btn-hero-primary:hover {
1462 background: var(--primary-dark);
1463 border-color: var(--primary-dark);
1464 transform: translateY(-2px);
1465 box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
1466}
1467
1468.btn-hero-secondary {
1469 background: transparent;
1470 color: var(--primary);
1471 border: 2px solid var(--primary);
1472}
1473
1474.btn-hero-secondary:hover {
1475 background: var(--primary);
1476 color: var(--bg);
1477 transform: translateY(-2px);
1478}
1479
1480.hero-benefits {
1481 max-width: 1000px;
1482 margin: 0 auto;
1483 display: grid;
1484 grid-template-columns: repeat(3, 1fr);
1485 gap: 2rem;
1486}
1487
1488.benefit-card {
1489 background: var(--bg);
1490 border: 1px solid var(--border);
1491 border-radius: 8px;
1492 padding: 2rem 1.5rem;
1493 text-align: center;
1494 transition: all 0.2s ease;
1495}
1496
1497.benefit-card:hover {
1498 border-color: var(--primary);
1499 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1500 transform: translateY(-4px);
1501}
1502
1503.benefit-icon {
1504 font-size: 3rem;
1505 margin-bottom: 1rem;
1506 line-height: 1;
1507}
1508
1509.benefit-card h3 {
1510 font-size: 1.2rem;
1511 margin-bottom: 0.75rem;
1512 color: var(--fg);
1513}
1514
1515.benefit-card p {
1516 color: var(--border-dark);
1517 font-size: 0.95rem;
1518 line-height: 1.5;
1519 margin: 0;
1520}
1521
1522/* Install Page */
1523.install-page {
1524 max-width: 800px;
1525 margin: 0 auto;
1526 padding: 2rem 1rem;
1527}
1528
1529.install-section {
1530 margin: 2rem 0;
1531}
1532
1533.install-section h2 {
1534 margin-bottom: 1rem;
1535 color: var(--fg);
1536}
1537
1538.install-section h3 {
1539 margin: 1.5rem 0 0.5rem;
1540 color: var(--border-dark);
1541 font-size: 1.1rem;
1542}
1543
1544.code-block {
1545 background: var(--code-bg);
1546 border: 1px solid var(--border);
1547 border-radius: 4px;
1548 padding: 1rem;
1549 margin: 0.5rem 0 1rem;
1550 overflow-x: auto;
1551}
1552
1553.code-block code {
1554 font-family: 'Monaco', 'Menlo', monospace;
1555 font-size: 0.9rem;
1556 line-height: 1.5;
1557 white-space: pre-wrap;
1558}
1559
1560.platform-tabs {
1561 display: flex;
1562 gap: 0.5rem;
1563 border-bottom: 2px solid var(--border);
1564 margin-bottom: 1rem;
1565}
1566
1567.platform-tab {
1568 padding: 0.5rem 1rem;
1569 cursor: pointer;
1570 border: none;
1571 background: none;
1572 font-size: 1rem;
1573 color: var(--border-dark);
1574 transition: all 0.2s;
1575}
1576
1577.platform-tab:hover {
1578 color: var(--fg);
1579}
1580
1581.platform-tab.active {
1582 color: var(--primary);
1583 border-bottom: 2px solid var(--primary);
1584 margin-bottom: -2px;
1585}
1586
1587.platform-content {
1588 display: none;
1589}
1590
1591.platform-content.active {
1592 display: block;
1593}
1594
1595/* Responsive */
1596@media (max-width: 768px) {
1597 .navbar {
1598 flex-direction: column;
1599 gap: 1rem;
1600 }
1601
1602 .nav-search {
1603 max-width: 100%;
1604 margin: 0;
1605 }
1606
1607 .push-details {
1608 flex-wrap: wrap;
1609 }
1610
1611 .tag-row, .manifest-row {
1612 flex-wrap: wrap;
1613 }
1614
1615 .login-page {
1616 margin: 2rem auto;
1617 padding: 1rem;
1618 }
1619
1620 .repo-hero {
1621 flex-direction: column;
1622 }
1623
1624 .repo-hero-info h1 {
1625 font-size: 1.5rem;
1626 }
1627
1628 .tag-item-header {
1629 flex-direction: column;
1630 align-items: flex-start;
1631 gap: 0.5rem;
1632 }
1633
1634 .manifest-item-details {
1635 flex-direction: column;
1636 align-items: flex-start;
1637 }
1638
1639 .featured-grid {
1640 grid-template-columns: 1fr;
1641 gap: 1rem;
1642 }
1643
1644 .featured-card {
1645 min-height: auto;
1646 }
1647
1648 .hero-section {
1649 padding: 3rem 1.5rem;
1650 }
1651
1652 .hero-title {
1653 font-size: 2rem;
1654 }
1655
1656 .hero-subtitle {
1657 font-size: 1rem;
1658 margin-bottom: 2rem;
1659 }
1660
1661 .hero-terminal {
1662 margin-bottom: 2rem;
1663 }
1664
1665 .terminal-content {
1666 font-size: 0.85rem;
1667 padding: 1rem;
1668 }
1669
1670 .hero-actions {
1671 flex-direction: column;
1672 margin-bottom: 3rem;
1673 }
1674
1675 .btn-hero-primary,
1676 .btn-hero-secondary {
1677 width: 100%;
1678 text-align: center;
1679 }
1680
1681 .hero-benefits {
1682 grid-template-columns: 1fr;
1683 gap: 1.5rem;
1684 }
1685}
1686
1687@media (max-width: 1024px) and (min-width: 769px) {
1688 .featured-grid {
1689 grid-template-columns: repeat(2, 1fr);
1690 }
1691
1692 .hero-benefits {
1693 grid-template-columns: repeat(3, 1fr);
1694 }
1695}
1696
1697/* README and Repository Layout */
1698.repo-content-layout {
1699 display: grid;
1700 grid-template-columns: 1fr 450px;
1701 gap: 2rem;
1702 margin-top: 2rem;
1703}
1704
1705.readme-section {
1706 background: var(--bg);
1707 border: 1px solid var(--border);
1708 border-radius: 8px;
1709 padding: 2rem;
1710}
1711
1712.readme-section h2 {
1713 margin-bottom: 1.5rem;
1714 padding-bottom: 0.5rem;
1715 border-bottom: 2px solid var(--border);
1716}
1717
1718.readme-content {
1719 overflow-wrap: break-word;
1720}
1721
1722.repo-sidebar {
1723 display: flex;
1724 flex-direction: column;
1725 gap: 1.5rem;
1726}
1727
1728/* Markdown Styling */
1729.markdown-body {
1730 font-size: 1rem;
1731 line-height: 1.6;
1732 word-wrap: break-word;
1733}
1734
1735.markdown-body h1,
1736.markdown-body h2,
1737.markdown-body h3,
1738.markdown-body h4,
1739.markdown-body h5,
1740.markdown-body h6 {
1741 margin-top: 1.5rem;
1742 margin-bottom: 1rem;
1743 font-weight: 600;
1744 line-height: 1.25;
1745}
1746
1747.markdown-body h1 {
1748 font-size: 2rem;
1749 border-bottom: 1px solid var(--border);
1750 padding-bottom: 0.3rem;
1751}
1752
1753.markdown-body h2 {
1754 font-size: 1.5rem;
1755 border-bottom: 1px solid var(--border);
1756 padding-bottom: 0.3rem;
1757}
1758
1759.markdown-body h3 {
1760 font-size: 1.25rem;
1761}
1762
1763.markdown-body h4 {
1764 font-size: 1rem;
1765}
1766
1767.markdown-body h5 {
1768 font-size: 0.875rem;
1769}
1770
1771.markdown-body h6 {
1772 font-size: 0.85rem;
1773 color: var(--secondary);
1774}
1775
1776.markdown-body p {
1777 margin-bottom: 1rem;
1778}
1779
1780.markdown-body ul,
1781.markdown-body ol {
1782 margin-bottom: 1rem;
1783 padding-left: 2rem;
1784}
1785
1786.markdown-body li {
1787 margin-bottom: 0.25rem;
1788}
1789
1790.markdown-body li > p {
1791 margin-bottom: 0.5rem;
1792}
1793
1794.markdown-body a {
1795 color: var(--primary);
1796 text-decoration: none;
1797}
1798
1799.markdown-body a:hover {
1800 text-decoration: underline;
1801}
1802
1803.markdown-body code {
1804 background: var(--code-bg);
1805 padding: 0.2rem 0.4rem;
1806 border-radius: 3px;
1807 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
1808 font-size: 0.9em;
1809}
1810
1811.markdown-body pre {
1812 background: var(--code-bg);
1813 padding: 1rem;
1814 border-radius: 6px;
1815 overflow-x: auto;
1816 margin-bottom: 1rem;
1817}
1818
1819.markdown-body pre code {
1820 background: none;
1821 padding: 0;
1822 font-size: 0.875rem;
1823}
1824
1825.markdown-body blockquote {
1826 padding: 0 1rem;
1827 margin-bottom: 1rem;
1828 color: var(--secondary);
1829 border-left: 4px solid var(--border);
1830}
1831
1832.markdown-body table {
1833 border-collapse: collapse;
1834 width: 100%;
1835 margin-bottom: 1rem;
1836}
1837
1838.markdown-body table th,
1839.markdown-body table td {
1840 padding: 0.5rem 1rem;
1841 border: 1px solid var(--border);
1842 text-align: left;
1843}
1844
1845.markdown-body table th {
1846 background: var(--code-bg);
1847 font-weight: 600;
1848}
1849
1850.markdown-body table tr:nth-child(even) {
1851 background: var(--hover-bg);
1852}
1853
1854.markdown-body img {
1855 max-width: 100%;
1856 height: auto;
1857 margin: 1rem 0;
1858}
1859
1860.markdown-body hr {
1861 height: 0.25rem;
1862 margin: 1.5rem 0;
1863 background: var(--border);
1864 border: 0;
1865}
1866
1867/* Task lists */
1868.markdown-body input[type="checkbox"] {
1869 margin-right: 0.5rem;
1870}
1871
1872.markdown-body .task-list-item {
1873 list-style-type: none;
1874}
1875
1876.markdown-body .task-list-item input {
1877 margin: 0 0.2rem 0.25rem -1.6rem;
1878 vertical-align: middle;
1879}
1880
1881/* Responsive Layout */
1882@media (max-width: 1024px) {
1883 .repo-content-layout {
1884 grid-template-columns: 1fr;
1885 }
1886
1887 .repo-sidebar {
1888 order: -1; /* Show sidebar first on mobile */
1889 }
1890}
1891
1892@media (max-width: 768px) {
1893 .readme-section {
1894 padding: 1rem;
1895 }
1896
1897 .markdown-body h1 {
1898 font-size: 1.5rem;
1899 }
1900
1901 .markdown-body h2 {
1902 font-size: 1.25rem;
1903 }
1904
1905 .markdown-body pre {
1906 padding: 0.75rem;
1907 }
1908}