gabriel / musehub public
_layout.scss
1,330 lines 33.1 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ── Icon base ─────────────────────────────────────────────────────────────────
2 // Applied by the icon() Jinja2 global to every <svg><use> icon.
3 .icon {
4 display: inline-block;
5 vertical-align: middle;
6 flex-shrink: 0;
7 }
8
9 // Meta row icons (author, timestamp, branch) are intentionally muted.
10 .commit-meta-item .icon { opacity: .6; }
11
12 // Decorative empty-state icons use a lighter stroke weight.
13 .icon--light-stroke { stroke-width: 1.2; }
14
15 /*
16 * MuseHub Layout System
17 *
18 * Global structural layout: page container, header/nav chrome, responsive
19 * breakpoints, and utility spacing helpers.
20 *
21 * Breakpoints (mobile-first):
22 * xs < 480px — compact phones
23 * sm 480-767px — large phones / small tablets (portrait)
24 * md 768-1023px— tablets and small laptops
25 * lg 1024-1279px— laptops
26 * xl >= 1280px — desktops / wide monitors
27 *
28 * Minimum supported width: 375px (iPhone SE / most modern phones).
29 * Maximum design width: 1280px (content column; wider screens add side whitespace).
30 */
31
32 /* -------------------------------------------------------------------------
33 * Base scaling
34 *
35 * FOUC prevention is handled by setting background:#0d1117 directly on the
36 * <html> element as an inline style in base.html — no opacity tricks needed.
37 * -------------------------------------------------------------------------*/
38
39 body {
40 zoom: 1.25;
41 }
42
43 @media (max-width: 768px) {
44 body { zoom: 1; }
45 }
46
47 /* -------------------------------------------------------------------------
48 * Global navigation bar (.musehub-navbar)
49 *
50 * Replaces the plain <header> element with a structured nav bar that includes
51 * logo, search form, site links, and a mobile hamburger toggle.
52 * ------------------------------------------------------------------------- */
53
54 /* Hidden checkbox drives the CSS-only mobile collapse — no JS required. */
55 .navbar-toggle-input {
56 display: none;
57 }
58
59 .musehub-navbar {
60 background: var(--bg-surface);
61 border-bottom: 1px solid var(--border-default);
62 position: sticky;
63 top: 0;
64 z-index: var(--z-raised);
65 height: 42px;
66 }
67
68 .navbar-inner {
69 display: flex;
70 align-items: center;
71 gap: var(--space-3);
72 padding: 0 var(--space-4);
73 height: 100%;
74 width: 100%;
75 }
76
77 .navbar-logo {
78 display: inline-flex;
79 align-items: center;
80 gap: var(--space-2);
81 font-size: var(--text-base);
82 font-weight: var(--weight-semibold);
83 color: var(--text-primary);
84 white-space: nowrap;
85 text-decoration: none;
86 flex-shrink: 0;
87 letter-spacing: -0.01em;
88 }
89
90 .navbar-logo:hover {
91 text-decoration: none;
92 color: var(--text-primary);
93 opacity: 0.85;
94
95 .gradient-text {
96 opacity: 1; /* gradient handles its own visual feedback via parent opacity */
97 }
98 }
99
100 .navbar-logo-icon {
101 color: var(--color-accent);
102 flex-shrink: 0;
103 }
104
105 .navbar-logo-text {
106 font-family: var(--font-mono);
107 font-weight: var(--weight-bold);
108 font-size: 16px;
109 }
110
111 /* Search form */
112 .navbar-search-form {
113 display: flex;
114 align-items: center;
115 gap: var(--space-2);
116 flex: 1;
117 max-width: 400px;
118 background: var(--bg-base);
119 border: 1px solid var(--border-default);
120 border-radius: var(--radius-base);
121 padding: 0 var(--space-3);
122 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
123
124 /* Override the global input[type="search"] rule which has higher specificity
125 (0-1-1) than .navbar-search-input (0-1-0) and would otherwise show its
126 own border, padding, and width as an inner stroke. */
127 input[type="search"],
128 .navbar-search-input {
129 flex: 1;
130 background: transparent;
131 border: none;
132 border-radius: 0;
133 outline: none;
134 box-shadow: none;
135 padding: 6px 0;
136 font-size: var(--text-sm);
137 font-family: var(--font-sans);
138 color: var(--text-primary);
139 min-width: 0;
140 width: auto;
141 }
142
143 input[type="search"]::placeholder,
144 .navbar-search-input::placeholder {
145 color: var(--text-muted);
146 }
147 }
148
149 .navbar-search-form:focus-within {
150 border-color: var(--color-accent);
151 box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
152 }
153
154 .navbar-search-icon {
155 color: var(--text-muted);
156 flex-shrink: 0;
157 }
158
159 /* Action links */
160 .navbar-actions {
161 display: flex;
162 align-items: center;
163 gap: var(--space-2);
164 flex-shrink: 0;
165 margin-left: auto;
166 }
167
168 .navbar-link {
169 font-size: var(--text-sm);
170 color: var(--text-secondary);
171 text-decoration: none;
172 white-space: nowrap;
173 padding: var(--space-1) var(--space-2);
174 border-radius: var(--radius-sm);
175 transition: background var(--transition-fast), color var(--transition-fast);
176 }
177
178 .navbar-link:hover {
179 background: var(--bg-hover);
180 color: var(--text-primary);
181 text-decoration: none;
182 }
183
184 /* Icon-only nav button (bell, etc.) */
185 .navbar-icon-btn {
186 position: relative;
187 display: inline-flex;
188 align-items: center;
189 justify-content: center;
190 width: 32px;
191 height: 32px;
192 padding: 0;
193 border-radius: var(--radius-base);
194 color: var(--text-muted);
195 text-decoration: none;
196 transition: background var(--transition-fast), color var(--transition-fast);
197 }
198
199 .navbar-icon-btn:hover {
200 background: var(--bg-hover);
201 color: var(--text-primary);
202 text-decoration: none;
203 }
204
205 .nav-notif-badge {
206 position: absolute;
207 top: 2px;
208 right: 2px;
209 background: var(--color-danger);
210 color: #fff;
211 border-radius: var(--radius-full);
212 font-size: 9px;
213 font-weight: var(--weight-bold);
214 min-width: 14px;
215 height: 14px;
216 display: none;
217 align-items: center;
218 justify-content: center;
219 padding: 0 3px;
220 line-height: 1;
221 pointer-events: none;
222 }
223
224 .navbar-signout {
225 flex-shrink: 0;
226 }
227
228 /* Theme toggle — swap sun/moon icon based on [data-theme] on <html> */
229 .navbar-theme-btn {
230 border: none;
231 background: none;
232 cursor: pointer;
233 }
234
235 .navbar-theme-icon { display: none; }
236
237 /* Dark mode (default): show sun so user can switch to light */
238 .navbar-theme-icon--sun { display: block; }
239
240 /* Light mode: show moon so user can switch back to dark */
241 [data-theme="light"] .navbar-theme-icon--sun { display: none; }
242 [data-theme="light"] .navbar-theme-icon--moon { display: block; }
243
244 /* Hamburger button (hidden on desktop) */
245 .navbar-hamburger {
246 display: none;
247 flex-direction: column;
248 gap: 5px;
249 background: none;
250 border: none;
251 cursor: pointer;
252 padding: var(--space-2);
253 border-radius: var(--radius-sm);
254 flex-shrink: 0;
255 }
256
257 .navbar-hamburger span {
258 display: block;
259 width: 20px;
260 height: 2px;
261 background: var(--text-secondary);
262 border-radius: 1px;
263 transition: background var(--transition-fast);
264 }
265
266 .navbar-hamburger:hover span {
267 background: var(--text-primary);
268 }
269
270 /* Breadcrumb bar below navbar */
271 .breadcrumb-bar {
272 background: var(--bg-surface);
273 border-bottom: 1px solid var(--border-subtle);
274 padding: 4px var(--space-4);
275 display: flex;
276 align-items: center;
277 gap: var(--space-2);
278 min-height: 0;
279 }
280
281 .breadcrumb-bar:empty,
282 .breadcrumb-bar .breadcrumb:empty + * {
283 display: none;
284 }
285
286 .breadcrumb-bar .breadcrumb {
287 color: var(--text-muted);
288 font-size: var(--text-sm);
289 overflow: hidden;
290 text-overflow: ellipsis;
291 white-space: nowrap;
292 }
293
294 .breadcrumb-bar .breadcrumb a,
295 .breadcrumb-link {
296 color: var(--color-accent);
297 text-decoration: none;
298 }
299
300 .breadcrumb-bar .breadcrumb a:hover,
301 .breadcrumb-link:hover {
302 text-decoration: none;
303 }
304
305 .breadcrumb-sep {
306 color: var(--text-muted);
307 padding: 0 var(--space-1);
308 }
309
310 .breadcrumb-current {
311 color: var(--text-muted);
312 font-size: var(--text-sm);
313 }
314
315 /* breadcrumb_data nav rendered by breadcrumbs.html */
316 .breadcrumb-data-nav {
317 display: inline-flex;
318 align-items: center;
319 flex-wrap: wrap;
320 gap: 0;
321 font-size: var(--text-sm);
322 color: var(--text-muted);
323 }
324
325 /* -------------------------------------------------------------------------
326 * Page header / navigation bar (legacy — kept for embed and non-base pages)
327 * ------------------------------------------------------------------------- */
328 header {
329 background: var(--bg-surface);
330 border-bottom: 1px solid var(--border-default);
331 padding: var(--space-3) var(--space-6);
332 display: flex;
333 align-items: center;
334 gap: var(--space-4);
335 position: sticky;
336 top: 0;
337 z-index: var(--z-raised);
338 }
339
340 header .logo {
341 font-size: var(--text-lg);
342 font-weight: var(--weight-bold);
343 color: var(--text-primary);
344 white-space: nowrap;
345 }
346
347 header .breadcrumb {
348 color: var(--text-muted);
349 font-size: var(--text-base);
350 overflow: hidden;
351 text-overflow: ellipsis;
352 white-space: nowrap;
353 }
354
355 header .breadcrumb a {
356 color: var(--color-accent);
357 }
358
359 header .spacer {
360 flex: 1;
361 }
362
363 header .header-actions {
364 display: flex;
365 align-items: center;
366 gap: var(--space-2);
367 flex-shrink: 0;
368 }
369
370 /* -------------------------------------------------------------------------
371 * Repo header card (shown on all repo-scoped pages)
372 * ------------------------------------------------------------------------- */
373 .repo-header {
374 background: var(--bg-surface);
375 border-bottom: 1px solid var(--border-default);
376 padding: 10px 0;
377 }
378
379 .repo-header-inner {
380 padding: 0 var(--space-4);
381 display: flex;
382 align-items: center;
383 gap: var(--space-3);
384 flex-wrap: wrap;
385 width: 100%;
386 }
387
388 .repo-header-identity {
389 display: flex;
390 align-items: center;
391 gap: var(--space-2);
392 font-size: var(--text-lg);
393 font-weight: var(--weight-semibold);
394 flex-shrink: 0;
395 }
396
397 .repo-header-owner {
398 color: var(--color-accent);
399 }
400
401 .repo-header-sep {
402 color: var(--text-muted);
403 font-weight: var(--weight-normal);
404 }
405
406 .repo-header-name {
407 color: var(--text-primary);
408 }
409
410 .repo-visibility-badge {
411 font-size: var(--text-xs);
412 border: 1px solid var(--border-default);
413 background: transparent;
414 color: var(--text-muted);
415 border-radius: var(--radius-full);
416 padding: 1px var(--space-2);
417 }
418
419 .repo-header-meta {
420 display: flex;
421 align-items: center;
422 gap: var(--space-2);
423 flex-wrap: wrap;
424 flex: 1;
425 }
426
427 .nav-meta-pill {
428 display: inline-flex;
429 align-items: center;
430 gap: var(--space-1);
431 background: var(--bg-overlay);
432 color: var(--text-muted);
433 font-family: var(--font-mono);
434 font-size: var(--text-xs);
435 padding: 2px var(--space-2);
436 border-radius: var(--radius-full);
437 border: 1px solid var(--border-subtle);
438 white-space: nowrap;
439
440 svg { flex-shrink: 0; }
441 }
442
443 .nav-meta-tags {
444 display: flex;
445 gap: var(--space-1);
446 flex-wrap: wrap;
447 }
448
449 .nav-meta-tag,
450 .nav-tag-chip {
451 background: var(--bg-overlay);
452 color: var(--color-accent);
453 font-size: var(--text-xs);
454 padding: 2px var(--space-2);
455 border-radius: var(--radius-full);
456 border: 1px solid var(--border-subtle);
457 }
458
459 .repo-visibility-public { color: var(--color-success, #3fb950); border-color: var(--color-success, #3fb950); }
460 .repo-visibility-private { color: var(--text-muted); }
461 .repo-visibility-unlisted { color: var(--color-warning); border-color: var(--color-warning); }
462
463 .repo-header-actions {
464 display: flex;
465 align-items: center;
466 gap: var(--space-2);
467 flex-shrink: 0;
468 }
469
470 /* -------------------------------------------------------------------------
471 * Repo tab strip (sticky below global header)
472 * ------------------------------------------------------------------------- */
473 :root {
474 --header-height: 42px; /* global header height — matches .musehub-navbar height */
475 --repo-tabs-height: 38px; /* repo tab strip height — sticky below global header */
476 --sticky-offset: calc(var(--header-height) + var(--repo-tabs-height)); /* total sticky chrome */
477 }
478
479 .repo-tabs {
480 background: var(--bg-surface);
481 border-bottom: 1px solid var(--border-default);
482 padding: 0;
483 overflow-x: auto;
484 scrollbar-width: none;
485 position: sticky;
486 top: var(--header-height);
487 z-index: calc(var(--z-raised) - 1);
488 /* Right-only fade for overflow scroll indicator; left is flush with content */
489 -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
490 mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
491 }
492
493 /* Inner wrapper aligns tabs with the page container */
494 .repo-tabs-inner {
495 display: flex;
496 align-items: stretch;
497 padding: 0 var(--space-4);
498 width: 100%;
499 }
500
501 .repo-tabs::-webkit-scrollbar { display: none; }
502
503 .repo-tab {
504 display: inline-flex;
505 align-items: center;
506 gap: var(--space-2);
507 padding: var(--space-2) var(--space-3);
508 font-size: var(--text-sm);
509 color: var(--text-muted);
510 border-bottom: 2px solid transparent;
511 white-space: nowrap;
512 text-decoration: none;
513 transition: color var(--transition-fast), border-color var(--transition-fast);
514 flex-shrink: 0;
515
516 svg {
517 opacity: 0.6;
518 transition: opacity var(--transition-fast);
519 }
520 }
521
522 .repo-tab:hover {
523 color: var(--text-primary);
524 text-decoration: none;
525 background: var(--bg-hover);
526
527 svg { opacity: 1; }
528 }
529
530 .repo-tab.active {
531 color: var(--text-primary);
532 border-bottom-color: var(--color-accent);
533
534 svg { opacity: 1; }
535 }
536
537 .tab-count {
538 background: var(--bg-overlay);
539 color: var(--text-muted);
540 border-radius: var(--radius-full);
541 padding: 0 var(--space-2);
542 font-size: var(--text-xs);
543 font-weight: var(--weight-medium);
544 min-width: 18px;
545 text-align: center;
546 }
547
548 .repo-tab.active .tab-count {
549 background: var(--color-accent);
550 color: white;
551 }
552
553 /* -------------------------------------------------------------------------
554 * Page container
555 * ------------------------------------------------------------------------- */
556 .container {
557 max-width: 960px;
558 margin: var(--space-6) auto;
559 padding: 0 var(--space-6);
560 }
561
562 .container-wide {
563 margin: var(--space-3) 0;
564 padding: 0 var(--space-4);
565 }
566
567 .container-narrow {
568 max-width: 720px;
569 margin: var(--space-6) auto;
570 padding: 0 var(--space-6);
571 }
572
573 /* -------------------------------------------------------------------------
574 * Shared full-bleed page layout (.ph-* = page hero/layout primitives)
575 *
576 * Used by MCP docs, Domain detail, and any future full-page layout.
577 * Pages using this system add:
578 * {% block container_extra_class %} page-container{% endblock %}
579 * to strip the default container padding, then manage their own padding
580 * internally so hero backgrounds can be truly full-bleed.
581 * ------------------------------------------------------------------------- */
582
583 /* Strips container padding so child sections can be full-bleed.
584 .container-wide.page-container wins over .container-wide by specificity. */
585 .container-wide.page-container,
586 .page-container {
587 padding: 0;
588 margin-top: 0;
589 }
590
591 /* ── Hero ─────────────────────────────────────────────────────────────────── */
592 .ph-hero {
593 position: relative;
594 border-bottom: 1px solid var(--border-subtle);
595 overflow: hidden;
596 padding: 0 var(--space-4);
597 }
598
599 .ph-hero-inner {
600 display: flex;
601 align-items: flex-start;
602 justify-content: space-between;
603 gap: var(--space-6);
604 padding: var(--space-6) 0 var(--space-4);
605
606 @media (max-width: 768px) { flex-direction: column; }
607 }
608
609 .ph-hero-eyebrow {
610 display: flex;
611 align-items: center;
612 gap: var(--space-2);
613 margin-bottom: var(--space-3);
614 flex-wrap: wrap;
615 }
616
617 .ph-hero-title {
618 font-size: clamp(24px, 3.5vw, 40px);
619 font-weight: 700;
620 line-height: 1.1;
621 letter-spacing: -0.02em;
622 margin: 0 0 var(--space-2);
623 color: var(--text-primary);
624 }
625
626 .ph-hero-sub {
627 font-size: 14px;
628 line-height: 1.6;
629 color: var(--text-secondary);
630 max-width: 520px;
631 margin-bottom: var(--space-3);
632 }
633
634 .ph-hero-actions {
635 display: flex;
636 gap: var(--space-2);
637 flex-wrap: wrap;
638 align-items: center;
639 }
640
641 /* ── Stats strip — flat separator bar ────────────────────────────────────── */
642 .ph-stats-strip {
643 display: flex;
644 background: transparent;
645 border-top: 1px solid var(--border-subtle);
646 border-bottom: 1px solid var(--border-subtle);
647 overflow-x: auto;
648 scrollbar-width: none;
649 &::-webkit-scrollbar { display: none; }
650 }
651
652 .ph-stat {
653 flex: 1;
654 min-width: 70px;
655 display: flex;
656 flex-direction: column;
657 align-items: center;
658 justify-content: center;
659 padding: 10px 12px;
660 gap: 2px;
661 text-align: center;
662 border-right: 1px solid var(--border-subtle);
663 &:last-child { border-right: none; }
664 }
665
666 .ph-stat-value {
667 font-size: 15px;
668 font-weight: 700;
669 color: var(--text-primary);
670 line-height: 1;
671 font-family: var(--font-mono);
672 }
673
674 .ph-stat-label {
675 font-size: 9px;
676 color: var(--text-muted);
677 text-transform: uppercase;
678 letter-spacing: 0.06em;
679 white-space: nowrap;
680 }
681
682 // Color modifiers for ph-stat-value — used by insights page
683 .ins-val--add { color: var(--color-success); }
684 .ins-val--del { color: var(--color-danger); }
685 .ins-val--agent { color: var(--color-purple); }
686
687 /* ── Page body: sidebar + main content ───────────────────────────────────── */
688 .ph-body {
689 display: grid;
690 grid-template-columns: 240px 1fr; // narrow content left | wide sidebar right
691 align-items: start;
692 gap: 0;
693
694 @media (max-width: 900px) { grid-template-columns: 1fr; }
695 }
696
697 /* ── Sidebar (right column) ───────────────────────────────────────────────── */
698 .ph-sidebar {
699 padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
700 border-left: 1px solid var(--border-subtle);
701 min-width: 0;
702
703 @media (max-width: 900px) { display: none; }
704 }
705
706 .ph-sidebar-section {
707 padding: var(--space-4) 0;
708 border-bottom: 1px solid var(--border-subtle);
709 &:last-child { border-bottom: none; }
710 }
711
712 .ph-sidebar-heading {
713 display: flex; align-items: center; gap: 6px;
714 font-size: 10px;
715 font-weight: 700;
716 letter-spacing: 0.08em;
717 text-transform: uppercase;
718 color: var(--text-muted);
719 margin: 0 0 var(--space-2);
720 }
721
722 .ph-sidebar-link {
723 display: flex;
724 align-items: center;
725 gap: 6px;
726 padding: 3px var(--space-2);
727 border-radius: 3px;
728 font-size: 12px;
729 color: var(--text-secondary);
730 text-decoration: none;
731 transition: color 0.1s, background 0.1s;
732
733 &:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
734 &.is-active { color: var(--color-accent); }
735 }
736
737 /* ── Main content area ────────────────────────────────────────────────────── */
738 .ph-content {
739 padding: 0 var(--space-4);
740 min-width: 0;
741 }
742
743 /* ── Section: divider-based, no card box ─────────────────────────────────── */
744 .ph-section {
745 padding: var(--space-4) 0;
746 border-bottom: 1px solid var(--border-subtle);
747
748 &:last-child { border-bottom: none; }
749 }
750
751 .ph-section-title {
752 font-size: 13px;
753 font-weight: 700;
754 color: var(--text-primary);
755 margin: 0 0 var(--space-2);
756 display: flex;
757 align-items: center;
758 gap: var(--space-2);
759 }
760
761 .ph-section-desc {
762 font-size: 13px;
763 color: var(--text-muted);
764 margin: 0 0 var(--space-3);
765 line-height: 1.55;
766 }
767
768 /* ── Count badge (section title inline pill) ─────────────────────────────── */
769 .ph-count {
770 font-size: 11px;
771 font-weight: 600;
772 font-family: var(--font-mono);
773 padding: 1px 6px;
774 border-radius: var(--radius-full);
775 background: var(--bg-overlay);
776 color: var(--text-muted);
777 border: 1px solid var(--border-subtle);
778 }
779
780 /* -------------------------------------------------------------------------
781 * Two-column sidebar layout
782 * Sidebar: fixed-width left column (e.g. repo metadata, file tree)
783 * Main: flexible right column
784 * ------------------------------------------------------------------------- */
785 .layout-sidebar {
786 display: grid;
787 grid-template-columns: 240px 1fr;
788 gap: var(--space-6);
789 align-items: start;
790 }
791
792 .layout-sidebar-right {
793 display: grid;
794 grid-template-columns: 1fr 240px;
795 gap: var(--space-6);
796 align-items: start;
797 }
798
799 /* -------------------------------------------------------------------------
800 * Section divider
801 * ------------------------------------------------------------------------- */
802 .section-title {
803 font-family: var(--font-mono);
804 font-size: var(--text-xs);
805 font-weight: var(--weight-semibold);
806 color: var(--color-accent);
807 text-transform: uppercase;
808 letter-spacing: 1.5px;
809 margin-bottom: var(--space-3);
810 padding-bottom: var(--space-2);
811 border-bottom: 1px solid var(--border-subtle);
812 }
813
814 /* -------------------------------------------------------------------------
815 * Flex utilities
816 * ------------------------------------------------------------------------- */
817 .flex { display: flex; }
818 .flex-col { display: flex; flex-direction: column; }
819 .items-center { align-items: center; }
820 .items-start { align-items: flex-start; }
821 .justify-between { justify-content: space-between; }
822 .gap-1 { gap: var(--space-1); }
823 .gap-2 { gap: var(--space-2); }
824 .gap-3 { gap: var(--space-3); }
825 .gap-4 { gap: var(--space-4); }
826 .flex-1 { flex: 1; }
827 .flex-wrap { flex-wrap: wrap; }
828 .flex-shrink-0 { flex-shrink: 0; }
829
830 /* -------------------------------------------------------------------------
831 * Spacing utilities
832 * ------------------------------------------------------------------------- */
833 .mb-2 { margin-bottom: var(--space-2); }
834 .mb-3 { margin-bottom: var(--space-3); }
835 .mb-4 { margin-bottom: var(--space-4); }
836 .mb-6 { margin-bottom: var(--space-6); }
837 .mt-2 { margin-top: var(--space-2); }
838 .mt-3 { margin-top: var(--space-3); }
839 .mt-4 { margin-top: var(--space-4); }
840
841 /* -------------------------------------------------------------------------
842 * Text utilities
843 * ------------------------------------------------------------------------- */
844 .text-muted { color: var(--text-muted); }
845 .text-primary { color: var(--text-primary); }
846 .text-accent { color: var(--color-accent); }
847 .text-danger { color: var(--color-danger); }
848 .text-success { color: var(--color-success); }
849 .text-sm { font-size: var(--text-sm); }
850 .text-xs { font-size: var(--text-xs); }
851 .text-mono { font-family: var(--font-mono); }
852 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
853
854 /* -------------------------------------------------------------------------
855 * Repo landing page — two-column layout (GitHub-style)
856 * Main content (~68%) + sidebar (~30%), collapses to single column on mobile.
857 * ------------------------------------------------------------------------- */
858 .repo-layout {
859 display: grid;
860 grid-template-columns: minmax(0, 1fr) 296px;
861 gap: var(--space-6);
862 align-items: start;
863 margin-top: var(--space-6);
864 }
865
866 .repo-main { min-width: 0; }
867 .repo-sidebar { min-width: 0; }
868
869 @media (max-width: 1023px) {
870 .repo-layout {
871 grid-template-columns: 1fr;
872 }
873 /* On mobile, sidebar collapses above main (like GitHub mobile) */
874 .repo-sidebar { order: -1; }
875 }
876
877 /* Latest commit banner — sits flush above the commit card */
878 .latest-commit-banner {
879 background: var(--bg-overlay);
880 border: 1px solid var(--border-default);
881 border-radius: var(--radius-base) var(--radius-base) 0 0;
882 border-bottom: none;
883 padding: var(--space-3) var(--space-4);
884 display: flex;
885 align-items: center;
886 gap: var(--space-2);
887 font-size: var(--text-sm);
888 color: var(--text-secondary);
889 }
890
891 /* Small inline avatar (author initials) in commit rows and banner */
892 .commit-avatar {
893 width: 20px;
894 height: 20px;
895 border-radius: var(--radius-full);
896 display: inline-flex;
897 align-items: center;
898 justify-content: center;
899 font-size: 9px;
900 font-weight: var(--weight-bold);
901 color: #fff;
902 flex-shrink: 0;
903 vertical-align: middle;
904 }
905
906 /* ── Sidebar ── */
907
908 /* Star / Watch / Fork action strip */
909 .repo-action-strip {
910 display: flex;
911 gap: var(--space-2);
912 margin-bottom: var(--space-5);
913 }
914
915 .repo-action-btn {
916 display: flex;
917 align-items: center;
918 justify-content: center;
919 gap: 4px;
920 padding: 5px var(--space-3);
921 font-size: var(--text-sm);
922 border: 1px solid var(--border-default);
923 border-radius: var(--radius-base);
924 background: var(--bg-overlay);
925 color: var(--text-secondary);
926 cursor: pointer;
927 text-decoration: none;
928 flex: 1;
929 line-height: 1.4;
930 transition: background var(--transition-fast), color var(--transition-fast);
931 }
932
933 .repo-action-btn:hover {
934 background: var(--bg-hover);
935 color: var(--text-primary);
936 text-decoration: none;
937 }
938
939 .repo-action-btn.active {
940 background: var(--color-accent-muted);
941 border-color: var(--color-accent);
942 color: var(--text-primary);
943 }
944
945 .repo-action-count {
946 font-weight: var(--weight-semibold);
947 color: var(--text-primary);
948 font-size: var(--text-xs);
949 }
950
951 /* Sidebar sections — each separated by a subtle rule */
952 .sidebar-section {
953 padding-bottom: var(--space-5);
954 margin-bottom: var(--space-5);
955 border-bottom: 1px solid var(--border-subtle);
956 }
957
958 .sidebar-section:last-child {
959 border-bottom: none;
960 margin-bottom: 0;
961 padding-bottom: 0;
962 }
963
964 .sidebar-section h3 {
965 font-size: var(--text-sm);
966 font-weight: var(--weight-semibold);
967 color: var(--text-primary);
968 margin-bottom: var(--space-3);
969 display: flex;
970 align-items: center;
971 gap: var(--space-2);
972 }
973
974 /* About section prose */
975 .about-description {
976 font-size: var(--text-sm);
977 color: var(--text-secondary);
978 line-height: 1.6;
979 margin-bottom: var(--space-3);
980 }
981
982 .about-stat-row {
983 display: flex;
984 align-items: center;
985 gap: var(--space-2);
986 font-size: var(--text-sm);
987 color: var(--text-secondary);
988 padding: 3px 0;
989 }
990
991 .about-stat-row strong {
992 color: var(--text-primary);
993 font-weight: var(--weight-semibold);
994 }
995
996 /* Contributor avatar grid */
997 .contributor-grid {
998 display: flex;
999 flex-wrap: wrap;
1000 gap: var(--space-1);
1001 margin-bottom: var(--space-2);
1002 }
1003
1004 .contributor-avatar {
1005 width: 32px;
1006 height: 32px;
1007 border-radius: var(--radius-full);
1008 background: var(--bg-overlay);
1009 border: 2px solid var(--border-default);
1010 display: inline-flex;
1011 align-items: center;
1012 justify-content: center;
1013 font-size: 11px;
1014 font-weight: var(--weight-bold);
1015 color: #fff;
1016 text-decoration: none;
1017 cursor: pointer;
1018 transition: border-color var(--transition-fast), transform var(--transition-fast);
1019 position: relative;
1020 flex-shrink: 0;
1021 }
1022
1023 .contributor-avatar:hover {
1024 border-color: var(--color-accent);
1025 transform: scale(1.15);
1026 text-decoration: none;
1027 z-index: 1;
1028 }
1029
1030 /* Instrument / track breakdown bar (like GitHub's language bar) */
1031 .instrument-bar {
1032 height: 8px;
1033 border-radius: var(--radius-full);
1034 overflow: hidden;
1035 display: flex;
1036 gap: 2px;
1037 margin-bottom: var(--space-3);
1038 }
1039
1040 .instrument-segment {
1041 height: 100%;
1042 transition: opacity var(--transition-fast);
1043 }
1044
1045 .instrument-segment:hover { opacity: 0.7; }
1046
1047 .instrument-legend {
1048 display: flex;
1049 flex-wrap: wrap;
1050 gap: var(--space-1) var(--space-4);
1051 }
1052
1053 .instrument-legend-item {
1054 display: flex;
1055 align-items: center;
1056 gap: var(--space-1);
1057 font-size: var(--text-xs);
1058 color: var(--text-secondary);
1059 }
1060
1061 .instrument-dot {
1062 width: 10px;
1063 height: 10px;
1064 border-radius: 50%;
1065 flex-shrink: 0;
1066 }
1067
1068 /* -------------------------------------------------------------------------
1069 * Responsive breakpoints — mobile-first overrides
1070 * ------------------------------------------------------------------------- */
1071
1072 /* xs — phones < 480px */
1073 @media (max-width: 479px) {
1074 header {
1075 padding: var(--space-2) var(--space-3);
1076 gap: var(--space-2);
1077 }
1078
1079 header .breadcrumb {
1080 display: none;
1081 }
1082
1083 /* Mobile navbar: hamburger visible, search and actions collapse */
1084 .navbar-hamburger {
1085 display: flex;
1086 }
1087
1088 .navbar-search-form {
1089 display: none;
1090 max-width: 100%;
1091 }
1092
1093 .navbar-actions {
1094 display: none;
1095 position: absolute;
1096 top: 100%;
1097 left: 0;
1098 right: 0;
1099 background: var(--bg-surface);
1100 border-bottom: 1px solid var(--border-default);
1101 flex-direction: column;
1102 align-items: flex-start;
1103 padding: var(--space-3) var(--space-4);
1104 gap: var(--space-2);
1105 z-index: calc(var(--z-raised) + 1);
1106 }
1107
1108 /* Show when hamburger checkbox is checked */
1109 .navbar-toggle-input:checked ~ * .navbar-search-form,
1110 .navbar-toggle-input:checked + .navbar-inner .navbar-search-form {
1111 display: flex;
1112 }
1113
1114 .navbar-toggle-input:checked ~ .navbar-inner .navbar-actions {
1115 display: flex;
1116 }
1117
1118 .musehub-navbar {
1119 position: relative;
1120 }
1121
1122 .container,
1123 .container-wide,
1124 .container-narrow {
1125 padding: 0 var(--space-3);
1126 margin-top: var(--space-4);
1127 }
1128
1129 .layout-sidebar,
1130 .layout-sidebar-right {
1131 grid-template-columns: 1fr;
1132 }
1133
1134 .grid-2,
1135 .grid-3 {
1136 grid-template-columns: 1fr;
1137 }
1138
1139 h1 { font-size: var(--text-md); }
1140 h2 { font-size: var(--text-base); }
1141 }
1142
1143 /* sm — large phones 480-767px */
1144 @media (min-width: 480px) and (max-width: 767px) {
1145 header {
1146 padding: var(--space-2) var(--space-4);
1147 }
1148
1149 .container,
1150 .container-wide,
1151 .container-narrow {
1152 padding: 0 var(--space-4);
1153 }
1154
1155 .layout-sidebar,
1156 .layout-sidebar-right {
1157 grid-template-columns: 1fr;
1158 }
1159
1160 .grid-3 {
1161 grid-template-columns: 1fr 1fr;
1162 }
1163 }
1164
1165 /* md — tablets 768-1023px */
1166 @media (min-width: 768px) and (max-width: 1023px) {
1167 .container {
1168 max-width: 100%;
1169 padding: 0 var(--space-6);
1170 }
1171
1172 .layout-sidebar {
1173 grid-template-columns: 200px 1fr;
1174 }
1175
1176 .layout-sidebar-right {
1177 grid-template-columns: 1fr 200px;
1178 }
1179 }
1180
1181 /* lg — laptops 1024px+ */
1182 @media (min-width: 1024px) {
1183 /* Full layout — no overrides needed; base styles apply */
1184 }
1185
1186 /* xl — desktops 1280px+ */
1187 @media (min-width: 1280px) {
1188 /* No overrides needed — content is full-width at all viewport sizes */
1189 }
1190
1191 /* -------------------------------------------------------------------------
1192 * Print styles (minimal — MuseHub is primarily a screen UI)
1193 * ------------------------------------------------------------------------- */
1194 @media print {
1195 header { display: none; }
1196 .btn { display: none; }
1197 .token-form { display: none; }
1198 pre { white-space: pre-wrap; border: 1px solid var(--border-default); }
1199 }
1200
1201 /* =========================================================================
1202 * Muse protocol design language utilities
1203 * ========================================================================= */
1204
1205 /* -------------------------------------------------------------------------
1206 * Section eyebrow
1207 * Monospace uppercase label placed above section headings, identical in
1208 * style to the section labels used on cgcardona.github.io/muse/.
1209 * Usage: <p class="eyebrow">Protocol</p><h2>…</h2>
1210 * ------------------------------------------------------------------------- */
1211 .eyebrow {
1212 font-family: var(--font-mono);
1213 font-size: 11px;
1214 color: var(--color-accent);
1215 letter-spacing: 2px;
1216 text-transform: uppercase;
1217 margin-bottom: var(--space-2);
1218 font-weight: var(--weight-medium);
1219 }
1220
1221 /* -------------------------------------------------------------------------
1222 * Page sections — full-bleed horizontal bands with border separator,
1223 * mirroring the section rhythm on the Muse protocol site.
1224 * .page-section — default (--bg-base background)
1225 * .page-section-alt — elevated surface (--bg-surface background)
1226 * .page-section-hero — gradient glow overlay for landing/hero areas
1227 * ------------------------------------------------------------------------- */
1228 .page-section {
1229 padding: var(--space-12) var(--space-6);
1230 border-top: 1px solid var(--border-subtle);
1231 }
1232
1233 .page-section-alt {
1234 background: var(--bg-surface);
1235 }
1236
1237 .page-section-hero {
1238 background:
1239 var(--gradient-hero),
1240 linear-gradient(160deg, var(--bg-base) 0%, var(--bg-surface) 50%, var(--bg-base) 100%);
1241 border-bottom: 1px solid var(--border-default);
1242 }
1243
1244 /* Section lead text — descriptive subtitle beneath a section heading */
1245 .section-lead {
1246 font-size: var(--text-md);
1247 color: var(--text-muted);
1248 max-width: 620px;
1249 margin-bottom: var(--space-10);
1250 line-height: 1.7;
1251
1252 strong { color: var(--text-primary); }
1253 }
1254
1255 /* -------------------------------------------------------------------------
1256 * Accent text — solid brand blue for headings and wordmarks.
1257 * ------------------------------------------------------------------------- */
1258 .gradient-text {
1259 color: var(--color-accent);
1260 }
1261
1262 /* -------------------------------------------------------------------------
1263 * Radial glow overlay — decorative background for hero / banner cards.
1264 * Apply to a position:relative container; the pseudo-element renders the
1265 * radial gradients as a non-interactive overlay.
1266 * ------------------------------------------------------------------------- */
1267 .glow-overlay {
1268 position: relative;
1269 overflow: hidden;
1270
1271 &::before {
1272 content: '';
1273 position: absolute;
1274 inset: 0;
1275 background: var(--gradient-hero);
1276 pointer-events: none;
1277 z-index: 0;
1278 }
1279
1280 > * { position: relative; z-index: 1; }
1281 }
1282
1283 /* -------------------------------------------------------------------------
1284 * Site footer
1285 * ------------------------------------------------------------------------- */
1286
1287 .site-footer {
1288 margin-top: var(--space-12);
1289 border-top: 1px solid var(--border-subtle);
1290 background: var(--bg-base);
1291
1292 &__inner {
1293 display: flex;
1294 align-items: center;
1295 gap: var(--space-6);
1296 max-width: 1280px;
1297 margin: 0 auto;
1298 padding: var(--space-4) var(--space-6);
1299 flex-wrap: wrap;
1300 }
1301
1302 &__brand {
1303 font-size: var(--text-sm);
1304 font-weight: 700;
1305 color: var(--text-primary);
1306 letter-spacing: 0.02em;
1307 }
1308
1309 &__copy {
1310 font-size: var(--text-xs);
1311 color: var(--text-muted);
1312 flex: 1;
1313 }
1314
1315 &__legal {
1316 display: flex;
1317 gap: var(--space-4);
1318
1319 a {
1320 font-size: var(--text-xs);
1321 color: var(--text-muted);
1322 text-decoration: none;
1323 transition: color 0.15s ease;
1324
1325 &:hover {
1326 color: var(--color-accent-link);
1327 }
1328 }
1329 }
1330 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago