Knot server viewer.
knotview.srv.rbrt.fr
julien.rbrt.fr
knot
tangled
1* {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5}
6
7:root {
8 /* Light theme colors */
9 --bg-primary: #f9fafb;
10 --bg-secondary: #ffffff;
11 --bg-tertiary: #f3f4f6;
12 --bg-hover: #f3f4f6;
13 --bg-active: #dbeafe;
14
15 --text-primary: #111827;
16 --text-secondary: #4b5563;
17 --text-tertiary: #6b7280;
18 --text-heading: #111827;
19
20 --border-primary: #e5e7eb;
21 --border-secondary: #d1d5db;
22 --border-light: #f3f4f6;
23
24 --accent-primary: #3b82f6;
25 --accent-hover: #2563eb;
26 --accent-light: #dbeafe;
27
28 --success-bg: #dcfce7;
29 --success-text: #166534;
30 --success-border: #bbf7d0;
31
32 --error-bg: #fee2e2;
33 --error-text: #991b1b;
34 --error-border: #fecaca;
35
36 --code-bg: #f3f4f6;
37 --code-text: #111827;
38 --code-block-bg: #1f2937;
39 --code-block-text: #e5e7eb;
40 --code-block-border: #374151;
41 --code-block-line-numbers: #9ca3af;
42
43 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
44 --shadow-md:
45 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
46}
47
48body.dark-theme {
49 /* Dark theme colors */
50 --bg-primary: #111827;
51 --bg-secondary: #1f2937;
52 --bg-tertiary: #374151;
53 --bg-hover: #374151;
54 --bg-active: #1e3a8a;
55
56 --text-primary: #f3f4f6;
57 --text-secondary: #d1d5db;
58 --text-tertiary: #9ca3af;
59 --text-heading: #ffffff;
60
61 --border-primary: #374151;
62 --border-secondary: #4b5563;
63 --border-light: #374151;
64
65 --accent-primary: #3b82f6;
66 --accent-hover: #60a5fa;
67 --accent-light: #1e3a8a;
68
69 --success-bg: #14532d;
70 --success-text: #86efac;
71 --success-border: #166534;
72
73 --error-bg: #7f1d1d;
74 --error-text: #fecaca;
75 --error-border: #991b1b;
76
77 --code-bg: #374151;
78 --code-text: #d1d5db;
79 --code-block-bg: #1f2937;
80 --code-block-text: #e5e7eb;
81 --code-block-border: #4b5563;
82 --code-block-line-numbers: #9ca3af;
83
84 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
85 --shadow-md:
86 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
87}
88
89body {
90 font-family: InterVariable, system-ui, sans-serif, ui-sans-serif;
91 background: var(--bg-primary);
92 color: var(--text-primary);
93 font-size: 14px;
94 line-height: 1.5;
95 transition:
96 background-color 0.3s ease,
97 color 0.3s ease;
98}
99
100.container {
101 max-width: 1400px;
102 margin: 0 auto;
103 padding: 20px;
104}
105
106header {
107 background: var(--bg-secondary);
108 padding: 24px;
109 border-radius: 8px;
110 box-shadow: var(--shadow-md);
111 margin-bottom: 20px;
112 border: 1px solid var(--border-primary);
113}
114
115.header-top {
116 display: flex;
117 justify-content: space-between;
118 align-items: center;
119 margin-bottom: 20px;
120}
121
122h1 {
123 font-size: 24px;
124 margin: 0;
125 color: var(--text-heading);
126 font-weight: 600;
127}
128
129.theme-toggle {
130 background: var(--bg-tertiary);
131 border: 1px solid var(--border-primary);
132 color: var(--text-primary);
133 padding: 8px 16px;
134 border-radius: 6px;
135 cursor: pointer;
136 font-size: 14px;
137 display: flex;
138 align-items: center;
139 gap: 8px;
140 transition: all 0.15s;
141}
142
143.theme-toggle:hover {
144 background: var(--bg-hover);
145 border-color: var(--border-secondary);
146}
147
148.connection-panel {
149 display: flex;
150 gap: 12px;
151 margin-bottom: 12px;
152 flex-wrap: wrap;
153}
154
155.connection-panel input {
156 flex: 1;
157 min-width: 300px;
158 padding: 10px 14px;
159 border: 1px solid var(--border-secondary);
160 border-radius: 6px;
161 font-size: 14px;
162 background: var(--bg-secondary);
163 color: var(--text-primary);
164 transition: all 0.15s;
165}
166
167.connection-panel input:focus {
168 outline: none;
169 border-color: var(--accent-primary);
170 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
171}
172
173button {
174 padding: 10px 20px;
175 background: var(--accent-primary);
176 color: white;
177 border: none;
178 border-radius: 6px;
179 cursor: pointer;
180 font-size: 14px;
181 font-weight: 500;
182 transition: all 0.15s;
183 box-shadow: var(--shadow-sm);
184}
185
186button:hover {
187 background: var(--accent-hover);
188}
189
190button:active {
191 transform: translateY(1px);
192}
193
194button:disabled {
195 background: var(--text-tertiary);
196 cursor: not-allowed;
197 transform: none;
198}
199
200button.secondary {
201 background: var(--bg-secondary);
202 color: var(--text-secondary);
203 border: 1px solid var(--border-secondary);
204}
205
206button.secondary:hover {
207 background: var(--bg-hover);
208}
209
210.status {
211 padding: 10px 14px;
212 border-radius: 6px;
213 font-size: 13px;
214 display: none;
215 border: 1px solid transparent;
216}
217
218.status.success {
219 background: var(--success-bg);
220 color: var(--success-text);
221 border-color: var(--success-border);
222}
223
224.status.error {
225 background: var(--error-bg);
226 color: var(--error-text);
227 border-color: var(--error-border);
228}
229
230.main-content {
231 display: flex;
232 gap: 20px;
233 align-items: flex-start;
234}
235
236.sidebar {
237 width: 300px;
238 background: var(--bg-secondary);
239 border-radius: 8px;
240 border: 1px solid var(--border-primary);
241 box-shadow: var(--shadow-md);
242 flex-shrink: 0;
243}
244
245.sidebar h2 {
246 font-size: 16px;
247 font-weight: 600;
248 padding: 16px 20px;
249 border-bottom: 1px solid var(--border-primary);
250 color: var(--text-heading);
251 display: flex;
252 align-items: center;
253 justify-content: space-between;
254}
255
256.repo-info {
257 padding: 20px;
258}
259
260.repo-info h3 {
261 font-size: 14px;
262 font-weight: 600;
263 margin-bottom: 12px;
264 color: var(--text-tertiary);
265}
266
267.repo-info .label {
268 font-size: 12px;
269 color: var(--text-tertiary);
270 margin-bottom: 4px;
271 font-weight: 500;
272 text-transform: uppercase;
273 letter-spacing: 0.5px;
274}
275
276.repo-info .value {
277 font-size: 13px;
278 color: var(--text-primary);
279 margin-bottom: 12px;
280 font-family: IBMPlexMono, ui-monospace, monospace;
281}
282
283.clone-url {
284 display: flex;
285 align-items: center;
286 gap: 8px;
287 background: var(--bg-tertiary);
288 padding: 8px 12px;
289 border-radius: 6px;
290 border: 1px solid var(--border-primary);
291 margin-bottom: 12px;
292}
293
294.clone-url code {
295 flex: 1;
296 font-size: 12px;
297 color: var(--text-secondary);
298 overflow: hidden;
299 text-overflow: ellipsis;
300}
301
302.copy-btn {
303 padding: 4px 8px;
304 font-size: 11px;
305 min-width: 50px;
306}
307
308.copy-btn:hover {
309 background: var(--accent-hover);
310}
311
312.branches-section {
313 border-top: 1px solid var(--border-primary);
314}
315
316.branch-list {
317 max-height: 300px;
318 overflow-y: auto;
319}
320
321.branch-item {
322 padding: 10px 20px;
323 cursor: pointer;
324 transition: background 0.15s;
325 border-bottom: 1px solid var(--border-light);
326 font-size: 13px;
327 color: var(--text-secondary);
328 display: flex;
329 align-items: center;
330 gap: 8px;
331}
332
333.branch-item:hover {
334 background: var(--bg-hover);
335}
336
337.branch-item.active {
338 background: var(--accent-light);
339 color: var(--accent-primary);
340 font-weight: 500;
341}
342
343.viewer {
344 flex: 1;
345 background: var(--bg-secondary);
346 border-radius: 8px;
347 border: 1px solid var(--border-primary);
348 box-shadow: var(--shadow-md);
349 overflow: hidden;
350}
351
352.breadcrumb {
353 padding: 16px 20px;
354 border-bottom: 1px solid var(--border-primary);
355 font-size: 13px;
356 color: var(--text-tertiary);
357 background: var(--bg-tertiary);
358 display: flex;
359 align-items: center;
360 flex-wrap: wrap;
361}
362
363.breadcrumb a {
364 color: var(--accent-primary);
365 text-decoration: none;
366 transition: color 0.15s;
367 cursor: pointer;
368}
369
370.breadcrumb a:hover {
371 color: var(--accent-hover);
372 text-decoration: underline;
373}
374
375.breadcrumb span {
376 margin: 0 8px;
377}
378
379.breadcrumb .current {
380 color: var(--text-primary);
381 font-weight: 500;
382}
383
384.file-list {
385 padding: 0;
386 list-style: none;
387 margin: 0;
388}
389
390.file-item {
391 padding: 12px 20px;
392 display: flex;
393 align-items: center;
394 gap: 12px;
395 border-bottom: 1px solid var(--border-light);
396 cursor: pointer !important;
397}
398
399.file-item:last-child {
400 border-bottom: none;
401}
402
403.file-item:hover {
404 background: var(--bg-hover);
405}
406
407.file-icon {
408 width: 20px;
409 height: 20px;
410 flex-shrink: 0;
411 color: var(--text-tertiary);
412 cursor: pointer;
413}
414
415.file-name {
416 flex: 1;
417 color: var(--text-primary);
418 font-size: 14px;
419 cursor: pointer;
420}
421
422.file-size {
423 color: var(--text-tertiary);
424 font-size: 12px;
425 cursor: pointer;
426}
427
428.file-content {
429 padding: 0;
430 overflow-x: auto;
431 background: var(--code-block-bg);
432 font-family: IBMPlexMono, Monaco, Menlo, monospace;
433 font-size: 13px;
434}
435
436.file-content pre {
437 margin: 0;
438 white-space: pre;
439 background: transparent;
440 padding: 20px;
441}
442
443.file-content code {
444 background: transparent;
445}
446
447.file-content code.hljs {
448 padding: 0;
449 background: transparent;
450}
451
452.line-numbers {
453 display: flex;
454 gap: 0;
455 background: var(--code-block-bg);
456}
457
458.line-numbers .numbers {
459 color: var(--code-block-line-numbers);
460 text-align: right;
461 user-select: none;
462 min-width: 50px;
463 padding: 20px 16px 20px 20px;
464 border-right: 1px solid var(--code-block-border);
465 background: var(--code-block-bg);
466 line-height: 1.5;
467}
468
469.line-numbers pre:not(.numbers) {
470 flex: 1;
471 padding-left: 20px;
472}
473
474.loading {
475 padding: 40px;
476 text-align: center;
477 color: var(--text-tertiary);
478}
479
480.spinner {
481 width: 40px;
482 height: 40px;
483 margin: 0 auto 16px;
484 border: 3px solid var(--border-primary);
485 border-top-color: var(--accent-primary);
486 border-radius: 50%;
487 animation: spin 0.8s linear infinite;
488}
489
490@keyframes spin {
491 to {
492 transform: rotate(360deg);
493 }
494}
495
496.empty-state {
497 padding: 60px 40px;
498 text-align: center;
499}
500
501.empty-state svg {
502 width: 64px;
503 height: 64px;
504 margin: 0 auto 20px;
505 color: var(--text-tertiary);
506 display: block;
507}
508
509.empty-state h3 {
510 font-size: 18px;
511 color: var(--text-secondary);
512 margin-bottom: 8px;
513}
514
515.empty-state p {
516 color: var(--text-tertiary);
517 font-size: 14px;
518}
519
520.welcome-hero {
521 padding: 80px 40px;
522 text-align: center;
523 max-width: 700px;
524 margin: 0 auto;
525}
526
527.welcome-hero svg {
528 width: 96px;
529 height: 96px;
530 margin: 0 auto 32px;
531 color: var(--accent-primary);
532 display: block;
533}
534
535.welcome-hero h2 {
536 font-size: 32px;
537 color: var(--text-heading);
538 margin-bottom: 16px;
539 font-weight: 700;
540}
541
542.welcome-hero .subtitle {
543 font-size: 18px;
544 color: var(--text-secondary);
545 margin-bottom: 48px;
546 line-height: 1.6;
547}
548
549.feature-list {
550 display: grid;
551 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
552 gap: 24px;
553 margin-top: 48px;
554 text-align: left;
555}
556
557.feature-item {
558 padding: 20px;
559 background: var(--bg-tertiary);
560 border-radius: 8px;
561 border: 1px solid var(--border-primary);
562}
563
564.feature-item h4 {
565 font-size: 16px;
566 color: var(--text-heading);
567 margin-bottom: 8px;
568 display: flex;
569 align-items: center;
570 gap: 8px;
571}
572
573.feature-item p {
574 font-size: 14px;
575 color: var(--text-tertiary);
576 line-height: 1.5;
577 margin: 0;
578}
579
580.getting-started {
581 margin-top: 48px;
582 padding: 24px;
583 background: var(--bg-tertiary);
584 border-radius: 8px;
585 border: 1px solid var(--border-primary);
586 text-align: left;
587}
588
589.getting-started h3 {
590 font-size: 18px;
591 color: var(--text-heading);
592 margin-bottom: 16px;
593}
594
595.getting-started ol {
596 margin-left: 20px;
597 color: var(--text-secondary);
598}
599
600.getting-started li {
601 margin-bottom: 8px;
602 line-height: 1.6;
603}
604
605.error-message {
606 padding: 40px;
607 text-align: center;
608 color: var(--error-text);
609 background: var(--error-bg);
610 margin: 20px;
611 border-radius: 8px;
612 border: 1px solid var(--error-border);
613}
614
615.file-header {
616 padding: 16px 20px;
617 border-bottom: 1px solid var(--border-primary);
618 background: var(--bg-tertiary);
619 display: flex;
620 justify-content: space-between;
621 align-items: center;
622}
623
624.file-header h3 {
625 font-size: 15px;
626 color: var(--text-primary);
627 font-weight: 600;
628}
629
630.file-actions {
631 display: flex;
632 gap: 8px;
633}
634
635.file-actions button {
636 padding: 6px 12px;
637 font-size: 12px;
638}
639
640.user-item {
641 margin-bottom: 24px;
642}
643
644.user-header {
645 font-size: 16px;
646 font-weight: 600;
647 color: var(--text-heading);
648 margin-bottom: 12px;
649 padding: 12px;
650 background: var(--bg-tertiary);
651 border-radius: 6px;
652}
653
654.repo-item {
655 padding: 12px;
656 margin-bottom: 8px;
657 background: var(--bg-secondary);
658 border: 1px solid var(--border-primary);
659 border-radius: 6px;
660 cursor: pointer;
661 transition: all 0.15s;
662}
663
664.repo-item:hover {
665 border-color: var(--accent-primary);
666 box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
667}
668
669.repo-item strong {
670 display: block;
671 font-size: 14px;
672 color: var(--text-primary);
673 margin-bottom: 4px;
674}
675
676.repo-item small {
677 font-size: 12px;
678 color: var(--text-tertiary);
679 font-family: IBMPlexMono, monospace;
680}
681
682.markdown-content {
683 padding: 20px 40px;
684 background: var(--bg-secondary);
685 font-family: InterVariable, system-ui, sans-serif;
686 font-size: 15px;
687 line-height: 1.6;
688 color: var(--text-primary);
689}
690
691.markdown-content h1,
692.markdown-content h2,
693.markdown-content h3,
694.markdown-content h4,
695.markdown-content h5,
696.markdown-content h6 {
697 margin-top: 24px;
698 margin-bottom: 16px;
699 font-weight: 600;
700 line-height: 1.25;
701 color: var(--text-heading);
702}
703
704.markdown-content h1 {
705 font-size: 2em;
706 padding-bottom: 0.3em;
707 border-bottom: 1px solid var(--border-primary);
708}
709
710.markdown-content h2 {
711 font-size: 1.5em;
712 padding-bottom: 0.3em;
713 border-bottom: 1px solid var(--border-primary);
714}
715
716.markdown-content h3 {
717 font-size: 1.25em;
718}
719
720.markdown-content h4 {
721 font-size: 1em;
722}
723
724.markdown-content h5 {
725 font-size: 0.875em;
726}
727
728.markdown-content h6 {
729 font-size: 0.85em;
730 color: var(--text-tertiary);
731}
732
733.markdown-content p {
734 margin-top: 0;
735 margin-bottom: 16px;
736}
737
738.markdown-content ul,
739.markdown-content ol {
740 margin-top: 0;
741 margin-bottom: 16px;
742 padding-left: 2em;
743}
744
745.markdown-content li + li {
746 margin-top: 0.25em;
747}
748
749.markdown-content code {
750 padding: 0.2em 0.4em;
751 margin: 0;
752 font-size: 85%;
753 background: var(--code-bg);
754 border-radius: 6px;
755 font-family: IBMPlexMono, Monaco, Menlo, monospace;
756 color: var(--code-text);
757}
758
759.markdown-content pre {
760 padding: 16px;
761 overflow: auto;
762 font-size: 85%;
763 line-height: 1.45;
764 background: var(--code-block-bg);
765 border-radius: 6px;
766 margin-bottom: 16px;
767}
768
769.markdown-content pre code {
770 display: block;
771 padding: 0;
772 margin: 0;
773 overflow: visible;
774 line-height: inherit;
775 word-wrap: normal;
776 background: transparent;
777 border: 0;
778 color: var(--code-block-text);
779}
780
781.markdown-content pre code.hljs {
782 background: transparent;
783}
784
785.markdown-content blockquote {
786 padding: 0 1em;
787 color: var(--text-tertiary);
788 border-left: 0.25em solid var(--border-secondary);
789 margin: 0 0 16px 0;
790}
791
792.markdown-content blockquote > :first-child {
793 margin-top: 0;
794}
795
796.markdown-content blockquote > :last-child {
797 margin-bottom: 0;
798}
799
800.markdown-content table {
801 border-spacing: 0;
802 border-collapse: collapse;
803 margin-bottom: 16px;
804 width: 100%;
805 overflow: auto;
806}
807
808.markdown-content table th,
809.markdown-content table td {
810 padding: 6px 13px;
811 border: 1px solid var(--border-primary);
812}
813
814.markdown-content table th {
815 font-weight: 600;
816 background: var(--bg-tertiary);
817}
818
819.markdown-content table tr {
820 background: var(--bg-secondary);
821 border-top: 1px solid var(--border-primary);
822}
823
824.markdown-content table tr:nth-child(2n) {
825 background: var(--bg-tertiary);
826}
827
828.markdown-content img {
829 max-width: 100%;
830 box-sizing: border-box;
831 border-radius: 6px;
832}
833
834.markdown-content a {
835 color: var(--accent-primary);
836 text-decoration: none;
837}
838
839.markdown-content a:hover {
840 text-decoration: underline;
841}
842
843.markdown-content hr {
844 height: 0.25em;
845 padding: 0;
846 margin: 24px 0;
847 background-color: var(--border-primary);
848 border: 0;
849}
850
851@media (max-width: 768px) {
852 .main-content {
853 flex-direction: column;
854 }
855
856 .sidebar {
857 width: 100%;
858 }
859
860 .connection-panel {
861 flex-direction: column;
862 }
863
864 .connection-panel input {
865 min-width: 100%;
866 }
867
868 .markdown-content {
869 padding: 20px;
870 }
871
872 .welcome-hero {
873 padding: 40px 20px;
874 }
875}