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
7body {
8 font-family:
9 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
10 Cantarell, sans-serif;
11 background: #f1f5f9;
12 color: #1e293b;
13 font-size: 14px;
14 line-height: 1.5;
15}
16
17.container {
18 max-width: 1400px;
19 margin: 0 auto;
20 padding: 20px;
21}
22
23header {
24 background: white;
25 padding: 24px;
26 border-radius: 8px;
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
28 margin-bottom: 20px;
29 border: 1px solid #e2e8f0;
30}
31
32h1 {
33 font-size: 24px;
34 margin-bottom: 20px;
35 color: #0f172a;
36 font-weight: 600;
37}
38
39.connection-panel {
40 display: flex;
41 gap: 12px;
42 margin-bottom: 12px;
43 flex-wrap: wrap;
44}
45
46.connection-panel input {
47 flex: 1;
48 min-width: 300px;
49 padding: 10px 14px;
50 border: 1px solid #cbd5e1;
51 border-radius: 6px;
52 font-size: 14px;
53 background: white;
54 transition: all 0.15s;
55}
56
57.connection-panel input:focus {
58 outline: none;
59 border-color: #3b82f6;
60 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
61}
62
63button {
64 padding: 10px 20px;
65 background: #3b82f6;
66 color: white;
67 border: none;
68 border-radius: 6px;
69 cursor: pointer;
70 font-size: 14px;
71 font-weight: 500;
72 transition: all 0.15s;
73 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
74}
75
76button:hover {
77 background: #2563eb;
78}
79
80button:active {
81 transform: translateY(1px);
82}
83
84button:disabled {
85 background: #94a3b8;
86 cursor: not-allowed;
87 transform: none;
88}
89
90button.secondary {
91 background: white;
92 color: #475569;
93 border: 1px solid #cbd5e1;
94}
95
96button.secondary:hover {
97 background: #f8fafc;
98}
99
100.status {
101 padding: 10px 14px;
102 border-radius: 6px;
103 font-size: 13px;
104 display: none;
105 border: 1px solid transparent;
106}
107
108.status.success {
109 background: #dcfce7;
110 color: #166534;
111 border-color: #bbf7d0;
112}
113
114.status.error {
115 background: #fee2e2;
116 color: #991b1b;
117 border-color: #fecaca;
118}
119
120.main-content {
121 display: flex;
122 gap: 20px;
123 align-items: flex-start;
124}
125
126.sidebar {
127 width: 300px;
128 background: white;
129 border-radius: 8px;
130 border: 1px solid #e2e8f0;
131 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
132 flex-shrink: 0;
133}
134
135.sidebar h2 {
136 font-size: 16px;
137 font-weight: 600;
138 padding: 16px 20px;
139 border-bottom: 1px solid #e2e8f0;
140 color: #0f172a;
141 display: flex;
142 align-items: center;
143 justify-content: space-between;
144}
145
146.repo-info {
147 padding: 20px;
148 background: white;
149 border-radius: 8px;
150 border: 1px solid #e2e8f0;
151 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
152 margin-bottom: 20px;
153}
154
155.repo-info h3 {
156 font-size: 14px;
157 font-weight: 600;
158 margin-bottom: 12px;
159 color: #64748b;
160}
161
162.repo-info .label {
163 font-size: 12px;
164 color: #64748b;
165 margin-bottom: 4px;
166 font-weight: 500;
167 text-transform: uppercase;
168 letter-spacing: 0.5px;
169}
170
171.repo-info .value {
172 font-size: 13px;
173 color: #1e293b;
174 margin-bottom: 12px;
175 font-family: monospace;
176}
177
178.clone-url {
179 display: flex;
180 align-items: center;
181 gap: 8px;
182 background: #f8fafc;
183 padding: 8px 12px;
184 border-radius: 6px;
185 border: 1px solid #e2e8f0;
186 margin-bottom: 12px;
187}
188
189.clone-url code {
190 flex: 1;
191 font-size: 12px;
192 color: #475569;
193 overflow: hidden;
194 text-overflow: ellipsis;
195}
196
197.copy-btn {
198 padding: 4px 8px;
199 font-size: 11px;
200 min-width: 50px;
201}
202
203.copy-btn:hover {
204 background: #2563eb;
205}
206
207.branches-section {
208 border-top: 1px solid #e2e8f0;
209}
210
211.branch-list {
212 max-height: 300px;
213 overflow-y: auto;
214}
215
216.branch-item {
217 padding: 10px 20px;
218 cursor: pointer;
219 transition: background 0.15s;
220 border-bottom: 1px solid #f1f5f9;
221 font-size: 13px;
222 color: #475569;
223 display: flex;
224 align-items: center;
225 gap: 8px;
226}
227
228.branch-item:hover {
229 background: #f8fafc;
230}
231
232.branch-item.active {
233 background: #eff6ff;
234 color: #1e40af;
235 font-weight: 500;
236}
237
238.viewer {
239 flex: 1;
240 background: white;
241 border-radius: 8px;
242 border: 1px solid #e2e8f0;
243 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
244 overflow: hidden;
245}
246
247.breadcrumb {
248 padding: 16px 20px;
249 border-bottom: 1px solid #e2e8f0;
250 font-size: 13px;
251 color: #64748b;
252 background: #f8fafc;
253 display: flex;
254 align-items: center;
255 flex-wrap: wrap;
256}
257
258.breadcrumb a {
259 color: #3b82f6;
260 text-decoration: none;
261 transition: color 0.15s;
262 cursor: pointer;
263}
264
265.breadcrumb a:hover {
266 color: #2563eb;
267 text-decoration: underline;
268}
269
270.breadcrumb span {
271 margin: 0 8px;
272}
273
274.breadcrumb .current {
275 color: #1e293b;
276 font-weight: 500;
277}
278
279.file-list {
280 padding: 0;
281 list-style: none;
282 margin: 0;
283}
284
285.file-item {
286 padding: 12px 20px;
287 display: flex;
288 align-items: center;
289 gap: 12px;
290 border-bottom: 1px solid #f1f5f9;
291 cursor: pointer !important;
292}
293
294.file-item:last-child {
295 border-bottom: none;
296}
297
298.file-item:hover {
299 background: #f8fafc;
300}
301
302.file-icon {
303 width: 20px;
304 height: 20px;
305 flex-shrink: 0;
306 color: #64748b;
307 cursor: pointer;
308}
309
310.file-name {
311 flex: 1;
312 color: #1e293b;
313 font-size: 14px;
314 cursor: pointer;
315}
316
317.file-size {
318 color: #64748b;
319 font-size: 12px;
320 cursor: pointer;
321}
322
323.file-content {
324 padding: 0;
325 overflow-x: auto;
326 background: #0d1117;
327 font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
328 font-size: 13px;
329}
330
331.file-content pre {
332 margin: 0;
333 white-space: pre;
334 background: transparent;
335 padding: 20px;
336}
337
338.file-content code {
339 background: transparent;
340}
341
342.file-content code.hljs {
343 padding: 0;
344 background: transparent;
345}
346
347.line-numbers {
348 display: flex;
349 gap: 0;
350 background: #0d1117;
351}
352
353.line-numbers .numbers {
354 color: #6e7681;
355 text-align: right;
356 user-select: none;
357 min-width: 50px;
358 padding: 20px 16px 20px 20px;
359 border-right: 1px solid #30363d;
360 background: #0d1117;
361 line-height: 1.5;
362}
363
364.line-numbers pre:not(.numbers) {
365 flex: 1;
366 padding-left: 20px;
367}
368
369.loading {
370 padding: 40px;
371 text-align: center;
372 color: #64748b;
373}
374
375.spinner {
376 width: 40px;
377 height: 40px;
378 margin: 0 auto 16px;
379 border: 3px solid #e2e8f0;
380 border-top-color: #3b82f6;
381 border-radius: 50%;
382 animation: spin 0.8s linear infinite;
383}
384
385@keyframes spin {
386 to {
387 transform: rotate(360deg);
388 }
389}
390
391.empty-state {
392 padding: 60px 40px;
393 text-align: center;
394}
395
396.empty-state svg {
397 width: 64px;
398 height: 64px;
399 margin: 0 auto 20px;
400 color: #cbd5e1;
401 display: block;
402}
403
404.empty-state h3 {
405 font-size: 18px;
406 color: #475569;
407 margin-bottom: 8px;
408}
409
410.empty-state p {
411 color: #64748b;
412 font-size: 14px;
413}
414
415.error-message {
416 padding: 40px;
417 text-align: center;
418 color: #991b1b;
419 background: #fee2e2;
420 margin: 20px;
421 border-radius: 8px;
422 border: 1px solid #fecaca;
423}
424
425.file-header {
426 padding: 16px 20px;
427 border-bottom: 1px solid #e2e8f0;
428 background: #f8fafc;
429 display: flex;
430 justify-content: space-between;
431 align-items: center;
432}
433
434.file-header h3 {
435 font-size: 15px;
436 color: #1e293b;
437 font-weight: 600;
438}
439
440.file-actions {
441 display: flex;
442 gap: 8px;
443}
444
445.file-actions button {
446 padding: 6px 12px;
447 font-size: 12px;
448}
449
450.user-item {
451 margin-bottom: 24px;
452}
453
454.user-header {
455 font-size: 16px;
456 font-weight: 600;
457 color: #0f172a;
458 margin-bottom: 12px;
459 padding: 12px;
460 background: #f8fafc;
461 border-radius: 6px;
462}
463
464.repo-item {
465 padding: 12px;
466 margin-bottom: 8px;
467 background: white;
468 border: 1px solid #e2e8f0;
469 border-radius: 6px;
470 cursor: pointer;
471 transition: all 0.15s;
472}
473
474.repo-item:hover {
475 border-color: #3b82f6;
476 box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
477}
478
479.repo-item strong {
480 display: block;
481 font-size: 14px;
482 color: #1e293b;
483 margin-bottom: 4px;
484}
485
486.repo-item small {
487 font-size: 12px;
488 color: #64748b;
489 font-family: monospace;
490}
491
492.markdown-content {
493 padding: 20px 40px;
494 background: white;
495 font-family:
496 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
497 Cantarell, sans-serif;
498 font-size: 15px;
499 line-height: 1.6;
500 color: #1e293b;
501}
502
503.markdown-content h1,
504.markdown-content h2,
505.markdown-content h3,
506.markdown-content h4,
507.markdown-content h5,
508.markdown-content h6 {
509 margin-top: 24px;
510 margin-bottom: 16px;
511 font-weight: 600;
512 line-height: 1.25;
513 color: #0f172a;
514}
515
516.markdown-content h1 {
517 font-size: 2em;
518 padding-bottom: 0.3em;
519 border-bottom: 1px solid #e2e8f0;
520}
521
522.markdown-content h2 {
523 font-size: 1.5em;
524 padding-bottom: 0.3em;
525 border-bottom: 1px solid #e2e8f0;
526}
527
528.markdown-content h3 {
529 font-size: 1.25em;
530}
531
532.markdown-content h4 {
533 font-size: 1em;
534}
535
536.markdown-content h5 {
537 font-size: 0.875em;
538}
539
540.markdown-content h6 {
541 font-size: 0.85em;
542 color: #64748b;
543}
544
545.markdown-content p {
546 margin-top: 0;
547 margin-bottom: 16px;
548}
549
550.markdown-content ul,
551.markdown-content ol {
552 margin-top: 0;
553 margin-bottom: 16px;
554 padding-left: 2em;
555}
556
557.markdown-content li + li {
558 margin-top: 0.25em;
559}
560
561.markdown-content code {
562 padding: 0.2em 0.4em;
563 margin: 0;
564 font-size: 85%;
565 background: #f1f5f9;
566 border-radius: 6px;
567 font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
568 color: #e11d48;
569}
570
571.markdown-content pre {
572 padding: 16px;
573 overflow: auto;
574 font-size: 85%;
575 line-height: 1.45;
576 background: #0d1117;
577 border-radius: 6px;
578 margin-bottom: 16px;
579}
580
581.markdown-content pre code {
582 display: block;
583 padding: 0;
584 margin: 0;
585 overflow: visible;
586 line-height: inherit;
587 word-wrap: normal;
588 background: transparent;
589 border: 0;
590 color: #c9d1d9;
591}
592
593.markdown-content pre code.hljs {
594 background: transparent;
595}
596
597.markdown-content blockquote {
598 padding: 0 1em;
599 color: #64748b;
600 border-left: 0.25em solid #cbd5e1;
601 margin: 0 0 16px 0;
602}
603
604.markdown-content blockquote > :first-child {
605 margin-top: 0;
606}
607
608.markdown-content blockquote > :last-child {
609 margin-bottom: 0;
610}
611
612.markdown-content table {
613 border-spacing: 0;
614 border-collapse: collapse;
615 margin-bottom: 16px;
616 width: 100%;
617 overflow: auto;
618}
619
620.markdown-content table th,
621.markdown-content table td {
622 padding: 6px 13px;
623 border: 1px solid #e2e8f0;
624}
625
626.markdown-content table th {
627 font-weight: 600;
628 background: #f8fafc;
629}
630
631.markdown-content table tr {
632 background: white;
633 border-top: 1px solid #e2e8f0;
634}
635
636.markdown-content table tr:nth-child(2n) {
637 background: #f8fafc;
638}
639
640.markdown-content img {
641 max-width: 100%;
642 box-sizing: border-box;
643 border-radius: 6px;
644}
645
646.markdown-content a {
647 color: #3b82f6;
648 text-decoration: none;
649}
650
651.markdown-content a:hover {
652 text-decoration: underline;
653}
654
655.markdown-content hr {
656 height: 0.25em;
657 padding: 0;
658 margin: 24px 0;
659 background-color: #e2e8f0;
660 border: 0;
661}
662
663@media (max-width: 768px) {
664 .main-content {
665 flex-direction: column;
666 }
667
668 .connection-panel {
669 flex-direction: column;
670 }
671
672 .connection-panel input {
673 min-width: 100%;
674 }
675
676 .markdown-content {
677 padding: 20px;
678 }
679}