Mercurial

comparison hg-web/src/index.css @ 195:f8f5004a920a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merging back hg-web-tip
author MrJuneJune <me@mrjunejune.com>
date Tue, 27 Jan 2026 06:51:44 -0800
parents 9f4429c49733
children
comparison
equal deleted inserted replaced
189:14cc84ba35a0 195:f8f5004a920a
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 { 66 border-radius: 6px;
12 color: var(--secondary); 67 background: transparent;
13 font-size: 0.95rem; 68 border: 1px solid transparent;
14 } 69 color: var(--text-secondary);
15 70 cursor: pointer;
16 .clone-info { 71 font-size: 14px;
17 background: var(--code-bg); 72 transition: all 0.2s;
18 border: 1px solid var(--border); 73 }
19 border-radius: 6px; 74
20 padding: 1rem; 75 .nav-tab:hover {
21 margin-bottom: 2rem; 76 background: var(--bg-subtle);
22 } 77 color: var(--text-primary);
23 78 }
24 .clone-info code { 79
25 background: none; 80 .nav-tab.active {
26 color: var(--fg); 81 background: var(--bg-subtle);
27 font-size: 0.95rem; 82 border-color: var(--border);
28 } 83 color: var(--text-primary);
29 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 }
274
275 .graph-canvas-column {
276 flex-shrink: 0;
277 background: var(--bg);
278 position: sticky;
279 left: 0;
280 }
281
282 .graph-details-column {
283 flex-grow: 1;
284 overflow-x: hidden;
285 }
286
287 .graph-row {
288 height: 40px;
289 display: flex;
290 flex-direction: column;
291 justify-content: center;
292 padding: 0 12px;
293 border-bottom: 1px solid var(--border);
294 font-size: 12px;
295 cursor: pointer;
296 transition: background-color 0.1s;
297 }
298
299 .graph-row:hover {
300 background: var(--hover);
301 }
302
303 .graph-row-meta {
304 display: flex;
305 gap: 10px;
306 margin-bottom: 2px;
307 align-items: center;
308 }
309
310 .graph-hash {
311 color: var(--accent);
312 font-family: monospace;
313 }
314
315 .graph-user {
316 color: var(--text-secondary);
317 font-weight: 500;
318 }
319
320 .graph-branch {
321 color: var(--text-secondary);
322 font-size: 10px;
323 background: var(--bg-subtle);
324 padding: 1px 6px;
325 border-radius: 3px;
326 }
327
328 .graph-desc {
329 color: var(--text-primary);
330 white-space: nowrap;
331 overflow: hidden;
332 text-overflow: ellipsis;
333 display: flex;
334 align-items: center;
335 gap: 6px;
336 }
337
338 .graph-badge-tip {
339 background: var(--success);
340 color: #fff;
341 padding: 0 4px;
342 border-radius: 2px;
343 font-size: 10px;
344 font-weight: bold;
345 flex-shrink: 0;
346 }
347
348 .graph-badge-tag {
349 background: var(--accent);
350 color: #fff;
351 padding: 0 4px;
352 border-radius: 2px;
353 font-size: 10px;
354 font-weight: bold;
355 flex-shrink: 0;
356 }
357
358 .graph-loading-row {
359 height: 40px;
360 display: flex;
361 align-items: center;
362 justify-content: center;
363 color: var(--text-secondary);
364 font-size: 12px;
365 }
366
367 /* ===========================================
368 Common States
369 =========================================== */
370 .empty-state {
371 padding: 40px;
372 text-align: center;
373 color: var(--text-secondary);
374 }
375
376 .loading-state {
377 padding: 40px;
378 text-align: center;
379 color: var(--text-secondary);
380 }
381
382 .error-message {
383 padding: 15px;
384 border: 1px solid var(--danger-border);
385 background: var(--danger-bg);
386 color: var(--danger);
387 border-radius: 6px;
388 margin-bottom: 20px;
389 }
390
391 /* ===========================================
392 Repository Browser
393 =========================================== */
394 .repo-container {
395 font-family: "More Thin", sans-serif;
396 max-width: 980px;
397 margin: 40px auto;
398 color: var(--text-primary);
399 padding: 0 20px;
400 }
401
402 /* Clone Box */
403 .clone-box {
404 background: var(--bg-subtle);
405 border: 1px solid var(--border);
406 border-radius: 6px;
407 padding: 12px 16px;
408 margin-bottom: 24px;
409 display: flex;
410 justify-content: space-between;
411 align-items: center;
412 }
413
414 .clone-label {
415 font-weight: 600;
416 font-size: 13px;
417 margin-right: 10px;
418 color: var(--text-primary);
419 }
420
421 .clone-url {
422 font-family: "More Thin", sans-serif;
423 background: var(--bg);
424 border: 1px solid var(--border);
425 padding: 4px 8px;
426 border-radius: 4px;
427 font-size: 12px;
428 color: var(--text-secondary);
429 flex-grow: 1;
430 }
431
432 /* Breadcrumb */
30 .breadcrumb { 433 .breadcrumb {
31 margin-bottom: 1.5rem; 434 display: flex;
32 font-size: 0.95rem; 435 align-items: center;
436 font-size: 14px;
437 margin-bottom: 16px;
438 color: var(--text-secondary);
439 padding: 8px 0;
33 } 440 }
34 441
35 .breadcrumb a { 442 .breadcrumb a {
36 color: var(--link); 443 color: var(--accent);
444 text-decoration: none;
445 border-radius: 4px;
446 padding: 2px 6px;
37 } 447 }
38 448
39 .breadcrumb a:hover { 449 .breadcrumb a:hover {
450 background: var(--bg-subtle);
40 text-decoration: underline; 451 text-decoration: underline;
41 } 452 }
42 453
43 .breadcrumb span { 454 .breadcrumb .separator {
44 color: var(--secondary); 455 margin: 0 4px;
45 margin: 0 0.5rem; 456 color: var(--text-secondary);
46 } 457 opacity: 0.5;
47 458 }
48 .file-list { 459
460 .breadcrumb .nav-item.active {
461 font-weight: 600;
462 color: var(--text-primary);
463 padding: 2px 6px;
464 }
465
466 /* File List */
467 .file-list-container {
49 border: 1px solid var(--border); 468 border: 1px solid var(--border);
50 border-radius: 6px; 469 border-radius: 6px;
51 overflow: hidden; 470 overflow: hidden;
52 } 471 background: var(--bg);
53 472 }
54 .file-item { 473
55 display: flex; 474 .file-header {
56 align-items: center; 475 background: var(--bg-subtle);
57 padding: 0.75rem 1rem;
58 border-bottom: 1px solid var(--border); 476 border-bottom: 1px solid var(--border);
59 transition: background-color 0.2s; 477 padding: 12px 16px;
60 } 478 font-size: 13px;
61 479 font-weight: 600;
62 .file-item:last-child { 480 color: var(--text-secondary);
481 }
482
483 .file-row {
484 display: flex;
485 align-items: center;
486 padding: 10px 16px;
487 border-bottom: 1px solid var(--border);
488 transition: background 0.1s;
489 }
490
491 .file-row:last-child {
63 border-bottom: none; 492 border-bottom: none;
64 } 493 }
65 494
66 .file-item:hover { 495 .file-row:hover {
67 background: var(--hover); 496 background: var(--hover);
68 } 497 }
69 498
70 .file-item .icon { 499 .file-row .icon img {
71 margin-right: 0.75rem;
72 font-size: 1.2rem;
73 width: 20px; 500 width: 20px;
501 height: 20px;
502 vertical-align: middle;
503 margin-right: 12px;
504 }
505
506 .file-row .name a {
507 color: var(--text-primary);
508 text-decoration: none;
509 font-size: 14px;
510 }
511
512 .file-row .name a:hover {
513 color: var(--accent);
514 text-decoration: underline;
515 }
516
517 /* Readme */
518 .readme-section {
519 margin-top: 32px;
520 border: 1px solid var(--border);
521 border-radius: 6px;
522 }
523
524 .readme-header {
525 background: var(--bg-subtle);
526 padding: 10px 16px;
527 font-size: 12px;
528 font-weight: 600;
529 border-bottom: 1px solid var(--border);
530 display: flex;
531 align-items: center;
532 gap: 8px;
533 }
534
535 .readme-content {
536 padding: 32px;
537 background: var(--bg);
538 overflow-x: auto;
539 color: var(--text-primary);
540 }
541
542 /* File Viewer Modal */
543 .file-viewer-overlay {
544 position: fixed;
545 inset: 0;
546 background: var(--overlay);
547 display: flex;
548 justify-content: center;
549 align-items: center;
550 z-index: 1000;
551 padding: 20px;
552 }
553
554 .file-viewer {
555 background: var(--bg);
556 border: 1px solid var(--border);
557 border-radius: 6px;
558 width: 100%;
559 max-width: 900px;
560 max-height: 90vh;
561 display: flex;
562 flex-direction: column;
563 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
564 }
565
566 .file-viewer-header {
567 display: flex;
568 align-items: center;
569 justify-content: space-between;
570 padding: 12px 16px;
571 background: var(--bg-subtle);
572 border-bottom: 1px solid var(--border);
573 border-radius: 6px 6px 0 0;
574 }
575
576 .file-viewer-title {
577 font-weight: 600;
578 font-size: 14px;
579 color: var(--text-primary);
580 display: flex;
581 align-items: center;
582 gap: 8px;
583 }
584
585 .file-viewer-close {
586 background: transparent;
587 border: none;
588 cursor: pointer;
589 padding: 4px;
590 border-radius: 4px;
591 display: flex;
592 align-items: center;
593 justify-content: center;
594 }
595
596 .file-viewer-close:hover {
597 background: var(--hover);
598 }
599
600 .file-viewer-close img {
601 width: 16px;
602 height: 16px;
603 opacity: 0.7;
604 }
605
606 .file-viewer-content {
607 overflow: auto;
608 flex: 1;
609 }
610
611 .file-viewer-content pre {
612 margin: 0;
613 padding: 16px;
614 background: var(--bg-code);
615 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
616 font-size: 13px;
617 line-height: 1.5;
618 overflow-x: auto;
619 }
620
621 .file-viewer-content code {
622 background: transparent;
623 padding: 0;
624 }
625
626 .file-viewer-loading {
627 padding: 40px;
74 text-align: center; 628 text-align: center;
75 } 629 color: var(--text-secondary);
76 630 }
77 .file-item .name { 631
632 .file-viewer-line-numbers {
633 display: inline-block;
634 user-select: none;
635 text-align: right;
636 padding-right: 16px;
637 margin-right: 16px;
638 border-right: 1px solid var(--border);
639 color: var(--text-secondary);
640 opacity: 0.5;
641 }
642
643 /* Theme Toggle Button */
644 .theme-toggle {
645 margin-left: auto;
646 background: var(--bg-subtle);
647 border: 1px solid var(--border);
648 border-radius: 6px;
649 padding: 8px 12px;
650 cursor: pointer;
651 display: flex;
652 align-items: center;
653 gap: 6px;
654 color: var(--text-secondary);
655 font-size: 13px;
656 transition: all 0.2s;
657 }
658
659 .theme-toggle:hover {
660 background: var(--hover);
661 color: var(--text-primary);
662 }
663
664 .theme-toggle svg {
665 flex-shrink: 0;
666 }
667
668 /* Description */
669 .description {
670 color: var(--text-secondary);
671 margin: 0;
672 font-size: 14px;
673 }
674
675 /* ===========================================
676 Mobile Responsive
677 =========================================== */
678 @media (max-width: 768px) {
679 .app-container {
680 padding: 20px 15px;
681 }
682
683 .repo-container {
684 padding: 0 15px;
685 }
686
687 .file-row {
688 padding: 8px 12px;
689 }
690
691 .clone-box {
692 padding: 10px 12px;
693 flex-direction: column;
694 align-items: flex-start;
695 gap: 8px;
696 }
697 }
698
699 /* ===========================================
700 Footer
701 =========================================== */
702 .footer {
703 margin-top: 48px;
704 padding-top: 24px;
705 border-top: 1px solid var(--border);
706 }
707
708 .footer-content {
709 display: flex;
710 align-items: center;
711 justify-content: center;
712 gap: 8px;
713 padding: 16px 0;
714 color: var(--text-secondary);
715 font-size: 13px;
716 }
717
718 .footer-separator {
719 opacity: 0.5;
720 }
721
722 .footer-text {
723 color: var(--text-secondary);
724 }
725
726 .clone-box-inner {
727 display: flex;
728 align-items: center;
729 width: 100%;
730 }
731
732 /* Header content wrapper */
733 .header-content {
78 flex: 1; 734 flex: 1;
79 font-family: 'Monaco', 'Courier New', monospace; 735 }
80 font-size: 0.9rem; 736
81 } 737 .header-content h1 {
82 738 margin: 0;
83 .file-item .name a { 739 font-size: 24px;
84 color: var(--fg); 740 font-weight: 600;
85 } 741 color: var(--text-primary);
86 742 }
87 .file-item .name a:hover { 743
88 color: var(--link); 744 .header-content h1 a {
89 } 745 color: inherit;
90 746 text-decoration: none;
91 .file-item.directory .icon { 747 }
92 color: var(--accent); 748
93 } 749 .header-content h1 a:hover {
94 750 text-decoration: none;
95 .file-item.file .icon { 751 }
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 }