gabriel / musehub public
_releases.scss
1,929 lines 48.0 KB
Raw
sha256:a10adeeb7a0169cb9900f9806ed7a973047258abb6283724fe55e8eb68ff3f0a init: musehub initial commit Human 171 days ago
1 // _releases.scss — Releases list + detail pages (.rl-* / .rd-* prefixes)
2 // Visual language: matches the Domains page — gradient hero, transparent cards,
3 // border-left accent stripes, dm-stat-pill stat pills. Zero music references.
4
5 // ─────────────────────────────────────────────────────────────────────────────
6 // LIST PAGE (.rl-*)
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 .rl-page {
10 display: flex;
11 flex-direction: column;
12 gap: var(--space-4);
13 }
14
15 // ── Hero (matches .dm-hero) ───────────────────────────────────────────────────
16 .rl-hero-shell {
17 position: relative;
18 background: linear-gradient(135deg, #0d1117 0%, #0f1923 50%, #0d1117 100%);
19 border-bottom: 1px solid var(--border-default);
20 overflow: hidden;
21 padding: 0 var(--space-4);
22 margin: 0 calc(-1 * var(--space-4)); // bleed to page edges
23 }
24
25 .rl-hero-glow {
26 position: absolute; inset: 0; pointer-events: none;
27 background:
28 radial-gradient(ellipse 50% 90% at 80% 20%, rgba(63,185,80,0.07) 0%, transparent 70%),
29 radial-gradient(ellipse 35% 60% at 10% 80%, rgba(88,166,255,0.05) 0%, transparent 60%);
30 }
31
32 .rl-hero-inner {
33 position: relative;
34 display: flex;
35 justify-content: space-between;
36 align-items: center;
37 gap: var(--space-6);
38 padding: var(--space-7) 0 var(--space-6);
39 flex-wrap: wrap;
40 }
41
42 .rl-hero-left { flex: 1; min-width: 0; }
43
44 .rl-hero-eyebrow {
45 display: inline-flex;
46 align-items: center;
47 gap: 6px;
48 font-size: 10px;
49 font-weight: 700;
50 text-transform: uppercase;
51 letter-spacing: 0.08em;
52 color: #3fb950;
53 margin-bottom: var(--space-2);
54 svg { flex-shrink: 0; }
55 }
56
57 .rl-hero-title {
58 font-size: clamp(22px, 3.5vw, 32px);
59 font-weight: 800;
60 line-height: 1.15;
61 letter-spacing: -0.02em;
62 margin: 0 0 var(--space-2);
63 color: var(--text-primary);
64 }
65
66 .rl-hero-meta-row {
67 display: flex;
68 align-items: center;
69 gap: 8px;
70 font-size: 12px;
71 color: var(--text-muted);
72 flex-wrap: wrap;
73 margin-bottom: var(--space-3);
74 }
75
76 .rl-hero-sha {
77 font-family: var(--font-mono);
78 font-size: 11px;
79 color: var(--color-accent-link);
80 text-decoration: none;
81 &:hover { text-decoration: underline; }
82 }
83
84 .rl-hero-body-preview {
85 font-size: 13px;
86 color: var(--text-secondary);
87 line-height: 1.6;
88 padding: var(--space-3) var(--space-4);
89 background: rgba(255,255,255,0.03);
90 border-left: 2px solid rgba(63,185,80,0.3);
91 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
92 margin-bottom: var(--space-3);
93 }
94
95 .rl-hero-actions {
96 display: flex;
97 align-items: center;
98 gap: var(--space-2);
99 flex-wrap: wrap;
100 }
101
102 // Right: stat pills (identical to .dm-stat-pill)
103 .rl-hero-right {
104 display: flex;
105 flex-direction: column;
106 gap: var(--space-2);
107 flex-shrink: 0;
108 }
109
110 .rl-stat-pill {
111 display: flex;
112 align-items: center;
113 gap: 10px;
114 background: transparent;
115 border: 1px solid var(--border-subtle);
116 border-left: 2px solid var(--border-default);
117 border-radius: var(--radius-sm);
118 padding: 9px 14px;
119 min-width: 140px;
120 transition: border-left-color 0.15s;
121 &:hover { border-left-color: var(--color-accent); }
122 &--stable:hover { border-left-color: #3fb950; }
123 &--pre:hover { border-left-color: #f0883e; }
124 }
125
126 .rl-stat-value {
127 font-family: var(--font-mono);
128 font-size: 18px;
129 font-weight: 700;
130 color: var(--text-primary);
131 line-height: 1;
132 &--stable { color: #3fb950; }
133 &--pre { color: #f0883e; }
134 }
135
136 .rl-stat-label {
137 font-size: 11px;
138 font-weight: 500;
139 color: var(--text-muted);
140 text-transform: uppercase;
141 letter-spacing: 0.06em;
142 }
143
144 // ── Previous releases card ────────────────────────────────────────────────────
145 .rl-card {
146 background: transparent;
147 border: 1px solid var(--border-subtle);
148 border-left: 2px solid var(--border-default);
149 border-radius: var(--radius-sm);
150 overflow: hidden;
151 transition: border-left-color 0.15s;
152 }
153
154 // ── Toolbar ───────────────────────────────────────────────────────────────────
155 .rl-toolbar {
156 display: flex;
157 align-items: center;
158 padding: 0 var(--space-4);
159 border-bottom: 1px solid var(--border-subtle);
160 min-height: 48px;
161 gap: var(--space-2);
162 flex-wrap: wrap;
163 }
164
165 .rl-tabs {
166 display: flex;
167 align-items: center;
168 flex: 1;
169 flex-wrap: wrap;
170 }
171
172 .rl-tab {
173 display: inline-flex;
174 align-items: center;
175 gap: 6px;
176 padding: 14px 12px;
177 font-size: 13px;
178 color: var(--text-muted);
179 text-decoration: none;
180 border-bottom: 2px solid transparent;
181 white-space: nowrap;
182 cursor: pointer;
183 background: none;
184 border-left: none; border-right: none; border-top: none;
185 transition: color 0.15s, border-color 0.15s;
186
187 &:hover { color: var(--text-secondary); text-decoration: none; }
188 &.rl-tab--active {
189 color: var(--text-primary);
190 border-bottom-color: var(--color-accent);
191 font-weight: var(--font-weight-semibold);
192 }
193 }
194
195 .rl-toolbar-right {
196 display: flex;
197 align-items: center;
198 gap: var(--space-2);
199 flex-shrink: 0;
200 }
201
202 .rl-search {
203 display: flex;
204 align-items: center;
205 gap: 7px;
206 background: transparent;
207 border: 1px solid rgba(255,255,255,0.08);
208 border-radius: var(--radius-sm);
209 padding: 5px 10px;
210 transition: border-color 0.15s;
211
212 &:focus-within { border-color: rgba(88,166,255,0.4); }
213 svg { color: var(--text-muted); flex-shrink: 0; }
214
215 input {
216 background: none;
217 border: none;
218 outline: none;
219 font-size: 12px;
220 color: var(--text-primary);
221 width: 150px;
222 &::placeholder { color: var(--text-muted); }
223 }
224 }
225
226 // ── Release rows ──────────────────────────────────────────────────────────────
227 .rl-list { display: flex; flex-direction: column; }
228
229 .rl-row {
230 display: flex;
231 align-items: flex-start;
232 gap: var(--space-4);
233 padding: var(--space-4) var(--space-5);
234 border-bottom: 1px solid var(--border-subtle);
235 transition: background 0.12s;
236
237 &:last-child { border-bottom: none; }
238 &:hover { background: rgba(255,255,255,0.02); }
239 }
240
241 .rl-row-tag {
242 flex-shrink: 0;
243 padding: 3px 10px;
244 border-radius: var(--radius-sm);
245 font-family: var(--font-mono);
246 font-size: 12px;
247 font-weight: 700;
248 white-space: nowrap;
249 min-width: 72px;
250 text-align: center;
251 }
252 .rl-tag--stable { background: rgba(63,185,80,0.10); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
253 .rl-tag--beta { background: rgba(240,136,62,0.10); color: #f0883e; border: 1px solid rgba(240,136,62,0.25); }
254 .rl-tag--alpha { background: rgba(188,140,255,0.10); color: #bc8cff; border: 1px solid rgba(188,140,255,0.25); }
255 .rl-tag--nightly { background: rgba(88,166,255,0.10); color: #58a6ff; border: 1px solid rgba(88,166,255,0.25); }
256 .rl-tag--draft { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); }
257 // legacy alias
258 .rl-tag--prerelease { background: rgba(240,136,62,0.10); color: #f0883e; border: 1px solid rgba(240,136,62,0.25); }
259
260 .rl-row-body {
261 flex: 1;
262 min-width: 0;
263 display: flex;
264 flex-direction: column;
265 gap: 4px;
266 }
267
268 .rl-row-title-line {
269 display: flex;
270 align-items: center;
271 gap: var(--space-2);
272 flex-wrap: wrap;
273 }
274
275 .rl-row-title {
276 font-size: 14px;
277 font-weight: 600;
278 color: var(--text-primary);
279 text-decoration: none;
280 &:hover { text-decoration: underline; color: var(--color-accent-link); }
281 }
282
283 // Status pills
284 .rl-pill {
285 display: inline-flex;
286 align-items: center;
287 gap: 3px;
288 padding: 1px 8px;
289 border-radius: var(--radius-full);
290 font-size: 10px;
291 font-weight: 700;
292 letter-spacing: 0.03em;
293 }
294 .rl-pill--stable { background: rgba(63,185,80,0.10); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
295 .rl-pill--prerelease { background: rgba(240,136,62,0.10); color: #f0883e; border: 1px solid rgba(240,136,62,0.25); }
296 .rl-pill--alpha { background: rgba(188,140,255,0.10); color: #bc8cff; border: 1px solid rgba(188,140,255,0.25); }
297 .rl-pill--nightly { background: rgba(88,166,255,0.10); color: #58a6ff; border: 1px solid rgba(88,166,255,0.25); }
298 .rl-pill--draft { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); }
299
300 .rl-row-meta {
301 display: flex;
302 align-items: center;
303 gap: 6px;
304 font-size: 11px;
305 color: var(--text-muted);
306 flex-wrap: wrap;
307 }
308
309 .rl-meta-dot { color: var(--border-default); }
310
311 .rl-row-author {
312 display: inline-flex;
313 align-items: center;
314 gap: 4px;
315 color: var(--text-secondary);
316 }
317
318 .rl-avatar {
319 width: 16px; height: 16px;
320 border-radius: 50%;
321 display: inline-flex;
322 align-items: center;
323 justify-content: center;
324 font-size: 8px;
325 font-weight: 700;
326 color: #fff;
327 flex-shrink: 0;
328 }
329
330 .rl-row-sha {
331 font-family: var(--font-mono);
332 font-size: 11px;
333 color: var(--color-accent-link);
334 text-decoration: none;
335 &:hover { text-decoration: underline; }
336 }
337
338 .rl-gpg {
339 font-size: 10px;
340 color: #3fb950;
341 display: inline-flex;
342 align-items: center;
343 gap: 3px;
344 }
345
346 .rl-row-preview {
347 font-size: 12px;
348 color: var(--text-muted);
349 white-space: nowrap;
350 overflow: hidden;
351 text-overflow: ellipsis;
352 }
353
354 // Changelog chip
355 .rl-changelog-chip {
356 display: inline-flex;
357 align-items: center;
358 gap: 4px;
359 font-size: 10px;
360 font-family: var(--font-mono);
361 color: var(--text-muted);
362 background: transparent;
363 border: 1px solid var(--border-subtle);
364 border-radius: var(--radius-full);
365 padding: 1px 7px;
366 }
367
368 // Row action
369 .rl-row-action { flex-shrink: 0; margin-top: 2px; }
370
371 .rl-sole-note {
372 text-align: center;
373 padding: var(--space-5);
374 font-size: 13px;
375 color: var(--text-muted);
376 }
377
378 .rl-empty {
379 display: flex;
380 flex-direction: column;
381 align-items: center;
382 justify-content: center;
383 padding: var(--space-12) var(--space-6);
384 text-align: center;
385 gap: var(--space-3);
386 }
387 .rl-empty-icon { opacity: 0.25; margin-bottom: var(--space-1); }
388 .rl-empty-title { font-size: 18px; font-weight: 600; color: var(--text-secondary); }
389 .rl-empty-desc { font-size: 13px; color: var(--text-muted); max-width: 380px; line-height: 1.6; }
390
391 @media (max-width: 640px) {
392 .rl-hero-right { display: none; }
393 .rl-hero-inner { padding: var(--space-5) 0 var(--space-4); }
394 }
395
396 // ─────────────────────────────────────────────────────────────────────────────
397 // DETAIL PAGE (.rd-*)
398 // ─────────────────────────────────────────────────────────────────────────────
399
400 // ── Header card ───────────────────────────────────────────────────────────────
401 .rd-header {
402 position: relative;
403 background: linear-gradient(135deg, #0d1117 0%, #0f1923 60%, #0d1117 100%);
404 border: 1px solid var(--border-default);
405 border-left: 3px solid #3fb950;
406 border-radius: var(--radius-md);
407 overflow: hidden;
408 margin-bottom: var(--space-4);
409
410 &::before {
411 content: '';
412 position: absolute; inset: 0; pointer-events: none;
413 background:
414 radial-gradient(ellipse 50% 100% at 85% 20%, rgba(63,185,80,0.06) 0%, transparent 65%),
415 radial-gradient(ellipse 30% 60% at 5% 80%, rgba(88,166,255,0.04) 0%, transparent 60%);
416 }
417
418 &.is-prerelease { border-left-color: #f0883e;
419 &::before { background: radial-gradient(ellipse 50% 100% at 85% 20%, rgba(240,136,62,0.06) 0%, transparent 65%); }
420 }
421 &.is-draft { border-left-color: var(--border-muted); }
422 &.is-alpha { border-left-color: #bc8cff;
423 &::before { background: radial-gradient(ellipse 50% 100% at 85% 20%, rgba(188,140,255,0.06) 0%, transparent 65%); }
424 }
425 &.is-nightly { border-left-color: #58a6ff;
426 &::before { background: radial-gradient(ellipse 50% 100% at 85% 20%, rgba(88,166,255,0.06) 0%, transparent 65%); }
427 }
428 }
429
430 .rd-header-body {
431 position: relative;
432 padding: var(--space-5) var(--space-5) var(--space-4);
433 }
434
435 .rd-title-row {
436 display: flex;
437 align-items: center;
438 gap: var(--space-2);
439 flex-wrap: wrap;
440 margin-bottom: var(--space-3);
441 }
442
443 .rd-title {
444 font-size: clamp(20px, 3vw, 28px);
445 font-weight: 800;
446 color: var(--text-primary);
447 margin: 0;
448 line-height: 1.15;
449 letter-spacing: -0.01em;
450 }
451
452 .rd-tag-badge {
453 display: inline-flex;
454 align-items: center;
455 padding: 3px 10px;
456 border-radius: var(--radius-full);
457 font-family: var(--font-mono);
458 font-size: 12px;
459 font-weight: 700;
460 background: rgba(88,166,255,0.08);
461 color: var(--color-accent-link);
462 border: 1px solid rgba(88,166,255,0.2);
463 white-space: nowrap;
464 }
465
466 .rd-channel-badge {
467 display: inline-flex;
468 align-items: center;
469 padding: 2px 8px;
470 border-radius: var(--radius-full);
471 font-size: 10px;
472 font-weight: 700;
473 letter-spacing: 0.04em;
474 text-transform: uppercase;
475 white-space: nowrap;
476
477 &--stable { background: rgba(63,185,80,0.10); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
478 &--beta { background: rgba(240,136,62,0.10); color: #f0883e; border: 1px solid rgba(240,136,62,0.25); }
479 &--alpha { background: rgba(188,140,255,0.10); color: #bc8cff; border: 1px solid rgba(188,140,255,0.25); }
480 &--nightly { background: rgba(88,166,255,0.10); color: #58a6ff; border: 1px solid rgba(88,166,255,0.25); }
481 &--draft { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); }
482 }
483
484 .rd-meta {
485 display: flex;
486 flex-wrap: wrap;
487 gap: var(--space-4) var(--space-5);
488 }
489
490 .rd-meta-item {
491 display: flex;
492 flex-direction: column;
493 gap: 2px;
494 }
495
496 .rd-meta-label {
497 font-size: 10px;
498 text-transform: uppercase;
499 letter-spacing: 0.07em;
500 color: var(--text-muted);
501 font-weight: 600;
502 }
503
504 .rd-meta-value {
505 font-size: 13px;
506 color: var(--text-primary);
507 display: flex;
508 align-items: center;
509 gap: 5px;
510 }
511
512 .rd-commit-sha {
513 font-family: var(--font-mono);
514 font-size: 12px;
515 color: var(--color-accent-link);
516 text-decoration: none;
517 &:hover { text-decoration: underline; }
518 }
519
520 .rd-snapshot-hash {
521 font-family: var(--font-mono);
522 font-size: 11px;
523 color: var(--text-secondary);
524 word-break: break-all;
525 }
526
527 .rd-avatar {
528 width: 20px; height: 20px;
529 border-radius: 50%;
530 background: var(--color-accent-muted);
531 display: inline-flex;
532 align-items: center;
533 justify-content: center;
534 font-size: 9px;
535 font-weight: 700;
536 color: #fff;
537 flex-shrink: 0;
538 }
539
540 .rd-gpg-badge {
541 display: inline-flex;
542 align-items: center;
543 gap: 4px;
544 font-size: 11px;
545 font-weight: 600;
546 padding: 2px 8px;
547 border-radius: var(--radius-full);
548 &.verified { background: rgba(63,185,80,0.10); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
549 &.unverified { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); }
550 }
551
552 // Stats ribbon
553 .rd-stats {
554 position: relative;
555 display: flex;
556 border-top: 1px solid rgba(255,255,255,0.05);
557 }
558
559 .rd-stat {
560 flex: 1;
561 display: flex;
562 flex-direction: column;
563 align-items: center;
564 justify-content: center;
565 padding: var(--space-3);
566 gap: 2px;
567 border-right: 1px solid rgba(255,255,255,0.04);
568 &:last-child { border-right: none; }
569 }
570
571 .rd-stat-value {
572 font-family: var(--font-mono);
573 font-size: 17px;
574 font-weight: 700;
575 color: var(--text-primary);
576 line-height: 1;
577 }
578
579 .rd-stat-label {
580 font-size: 10px;
581 text-transform: uppercase;
582 letter-spacing: 0.06em;
583 color: var(--text-muted);
584 font-weight: 500;
585 }
586
587 // Actions bar
588 .rd-actions {
589 position: relative;
590 display: flex;
591 align-items: center;
592 gap: var(--space-2);
593 padding: var(--space-2) var(--space-5) var(--space-3);
594 flex-wrap: wrap;
595 }
596
597 .rd-rss-btn {
598 color: #f0883e;
599 border-color: rgba(240,136,62,0.3);
600 &:hover { background: rgba(240,136,62,0.08); }
601 }
602
603 // ── Two-column layout ─────────────────────────────────────────────────────────
604 .rd-layout {
605 display: grid;
606 grid-template-columns: 1fr 240px;
607 gap: var(--space-4);
608 align-items: start;
609
610 @media (max-width: 768px) { grid-template-columns: 1fr; }
611 }
612
613 .rd-main {
614 display: flex;
615 flex-direction: column;
616 gap: var(--space-3);
617 min-width: 0;
618 }
619
620 // ── Sections ──────────────────────────────────────────────────────────────────
621 .rd-section {
622 background: transparent;
623 border: 1px solid var(--border-subtle);
624 border-left: 2px solid var(--border-default);
625 border-radius: var(--radius-sm);
626 overflow: hidden;
627 transition: border-left-color 0.15s;
628 &:hover { border-left-color: var(--color-accent); }
629 }
630
631 .rd-section-header {
632 display: flex;
633 align-items: center;
634 gap: var(--space-2);
635 padding: var(--space-3) var(--space-4);
636 border-bottom: 1px solid var(--border-subtle);
637 font-size: 12px;
638 font-weight: 700;
639 text-transform: uppercase;
640 letter-spacing: 0.05em;
641 color: var(--text-muted);
642 background: rgba(255,255,255,0.015);
643 }
644
645 .rd-section-count {
646 margin-left: auto;
647 font-size: 10px;
648 font-family: var(--font-mono);
649 background: var(--bg-overlay);
650 border: 1px solid var(--border-subtle);
651 border-radius: var(--radius-full);
652 padding: 1px 7px;
653 color: var(--text-muted);
654 font-weight: 400;
655 letter-spacing: 0;
656 text-transform: none;
657 }
658
659 .rd-section-body { padding: var(--space-4); }
660
661 // Release notes
662 .rd-notes-body {
663 padding: var(--space-4);
664 font-size: 14px;
665 color: var(--text-secondary);
666 line-height: 1.7;
667
668 h1,h2,h3,h4 { color: var(--text-primary); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
669 p { margin: 0 0 var(--space-3); }
670 code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-overlay); padding: 1px 5px; border-radius: 3px; }
671 pre { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-3); overflow-x: auto; }
672 a { color: var(--color-accent-link); }
673 ul,ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
674 }
675
676 // ── Changelog ─────────────────────────────────────────────────────────────────
677 .rd-changelog-list {
678 display: flex;
679 flex-direction: column;
680 }
681
682 .rd-changelog-entry {
683 display: flex;
684 align-items: flex-start;
685 gap: var(--space-3);
686 padding: var(--space-3) var(--space-4);
687 border-bottom: 1px solid rgba(255,255,255,0.03);
688 font-size: 13px;
689
690 &:last-child { border-bottom: none; }
691 &:hover { background: rgba(255,255,255,0.015); }
692 }
693
694 .rd-changelog-bump {
695 flex-shrink: 0;
696 width: 22px;
697 height: 22px;
698 border-radius: var(--radius-sm);
699 display: flex;
700 align-items: center;
701 justify-content: center;
702 font-size: 10px;
703 font-weight: 700;
704 margin-top: 1px;
705 font-family: var(--font-mono);
706
707 &--major { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.25); }
708 &--minor { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
709 &--patch { background: rgba(88,166,255,0.12); color: #58a6ff; border: 1px solid rgba(88,166,255,0.25); }
710 &--other { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); }
711 }
712
713 .rd-changelog-body { flex: 1; min-width: 0; }
714
715 .rd-changelog-msg {
716 color: var(--text-secondary);
717 white-space: nowrap;
718 overflow: hidden;
719 text-overflow: ellipsis;
720 margin-bottom: 2px;
721 }
722
723 .rd-changelog-meta {
724 display: flex;
725 align-items: center;
726 gap: 6px;
727 font-size: 11px;
728 color: var(--text-muted);
729 }
730
731 .rd-changelog-sha {
732 font-family: var(--font-mono);
733 font-size: 10px;
734 color: var(--color-accent-link);
735 text-decoration: none;
736 &:hover { text-decoration: underline; }
737 }
738
739 .rd-changelog-breaking {
740 display: flex;
741 flex-wrap: wrap;
742 gap: 4px;
743 margin-top: var(--space-1);
744 }
745
746 .rd-breaking-chip {
747 font-size: 10px;
748 font-family: var(--font-mono);
749 padding: 1px 6px;
750 border-radius: 3px;
751 background: rgba(248,81,73,0.10);
752 color: #f85149;
753 border: 1px solid rgba(248,81,73,0.2);
754 }
755
756 // Semver breakdown
757 .rd-semver-grid {
758 display: grid;
759 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
760 gap: var(--space-2);
761 padding: var(--space-4);
762 }
763
764 .rd-semver-cell {
765 display: flex;
766 flex-direction: column;
767 align-items: center;
768 gap: 3px;
769 padding: var(--space-3) var(--space-2);
770 background: transparent;
771 border: 1px solid var(--border-subtle);
772 border-radius: var(--radius-sm);
773 }
774
775 .rd-semver-value {
776 font-family: var(--font-mono);
777 font-size: 18px;
778 font-weight: 700;
779 color: var(--text-primary);
780 line-height: 1;
781 }
782
783 .rd-semver-label {
784 font-size: 9px;
785 text-transform: uppercase;
786 letter-spacing: 0.07em;
787 color: var(--text-muted);
788 font-weight: 600;
789 }
790
791 // ── Assets ────────────────────────────────────────────────────────────────────
792 .rd-asset-row {
793 display: flex;
794 align-items: center;
795 justify-content: space-between;
796 gap: var(--space-3);
797 padding: var(--space-3) var(--space-4);
798 border-bottom: 1px solid rgba(255,255,255,0.03);
799 &:last-child { border-bottom: none; }
800 &:hover { background: rgba(255,255,255,0.015); }
801 }
802
803 .rd-asset-info {
804 display: flex;
805 align-items: center;
806 gap: var(--space-3);
807 min-width: 0;
808 flex: 1;
809 }
810
811 .rd-asset-icon { font-size: 16px; flex-shrink: 0; }
812
813 .rd-asset-name {
814 font-size: 13px;
815 font-weight: 600;
816 color: var(--color-accent-link);
817 text-decoration: none;
818 &:hover { text-decoration: underline; }
819 }
820
821 .rd-asset-meta {
822 display: flex;
823 align-items: center;
824 gap: 6px;
825 font-size: 11px;
826 color: var(--text-muted);
827 flex-wrap: wrap;
828 margin-top: 2px;
829 }
830
831 .rd-no-assets {
832 padding: var(--space-5) var(--space-4);
833 text-align: center;
834 font-size: 13px;
835 color: var(--text-muted);
836 }
837
838 // ── Sidebar ───────────────────────────────────────────────────────────────────
839 .rd-sidebar {
840 display: flex;
841 flex-direction: column;
842 gap: var(--space-3);
843 min-width: 0;
844 }
845
846 .rd-sidebar-card {
847 background: transparent;
848 border: 1px solid var(--border-subtle);
849 border-left: 2px solid var(--border-default);
850 border-radius: var(--radius-sm);
851 overflow: hidden;
852 transition: border-left-color 0.15s;
853 &:hover { border-left-color: var(--color-accent); }
854 }
855
856 .rd-sidebar-header {
857 padding: var(--space-2) var(--space-3);
858 font-size: 10px;
859 font-weight: 700;
860 text-transform: uppercase;
861 letter-spacing: 0.06em;
862 color: var(--text-muted);
863 background: rgba(255,255,255,0.015);
864 border-bottom: 1px solid rgba(255,255,255,0.04);
865 }
866
867 .rd-sidebar-body {
868 padding: var(--space-3);
869 display: flex;
870 flex-direction: column;
871 gap: var(--space-2);
872 }
873
874 .rd-sidebar-row {
875 display: flex;
876 align-items: flex-start;
877 justify-content: space-between;
878 gap: var(--space-2);
879 font-size: 12px;
880 }
881
882 .rd-sidebar-key {
883 color: var(--text-muted);
884 font-size: 11px;
885 flex-shrink: 0;
886 }
887
888 .rd-sidebar-val {
889 color: var(--text-primary);
890 font-size: 12px;
891 text-align: right;
892 word-break: break-all;
893 }
894
895 .rd-sidebar-mono {
896 font-family: var(--font-mono);
897 font-size: 10px;
898 color: var(--text-secondary);
899 word-break: break-all;
900 text-align: right;
901 }
902
903 // ── Semantic Release Report — Muse-specific panels ──────────────────────────
904 // sr- prefix (semantic report). All panels are conditional on semantic_report
905 // being present in the release payload.
906
907 // ── Language composition strip ───────────────────────────────────────────────
908
909 .sr-lang-strip {
910 margin: var(--space-3) 0 var(--space-2);
911 padding: 0 2px;
912 }
913
914 .sr-lang-bar {
915 display: flex;
916 height: 8px;
917 border-radius: 4px;
918 overflow: hidden;
919 gap: 1px;
920 background: var(--bg-tertiary);
921 }
922
923 .sr-lang-seg {
924 display: block;
925 height: 100%;
926 min-width: 2px;
927 transition: filter 0.2s;
928 &:hover { filter: brightness(1.3); }
929 }
930
931 .sr-lang-legend {
932 display: flex;
933 flex-wrap: wrap;
934 gap: 10px 18px;
935 margin-top: 8px;
936 }
937
938 .sr-lang-item {
939 display: flex;
940 align-items: center;
941 gap: 5px;
942 font-size: 11px;
943 color: var(--text-secondary);
944 }
945
946 .sr-lang-dot {
947 display: inline-block;
948 width: 9px;
949 height: 9px;
950 border-radius: 50%;
951 flex-shrink: 0;
952 }
953
954 .sr-lang-stat {
955 color: var(--text-muted);
956 font-size: 10px;
957 }
958
959 .sr-lang-more {
960 color: var(--text-muted);
961 font-style: italic;
962 }
963
964 // ── Section header variants ──────────────────────────────────────────────────
965
966 .sr-section {
967 // Slight left accent for semantic panels
968 border-left: 2px solid var(--accent-blue-subtle);
969 padding-left: 10px;
970 margin-left: -12px;
971 }
972
973 .rd-section-header--danger {
974 color: #f85149;
975 svg { stroke: #f85149; }
976 }
977
978 .rd-section-count--danger {
979 background: rgba(248, 81, 73, 0.15);
980 color: #f85149;
981 border-color: rgba(248, 81, 73, 0.3);
982 }
983
984 .rd-breaking-banner {
985 display: inline-flex;
986 align-items: center;
987 gap: 4px;
988 padding: 2px 8px;
989 border-radius: 12px;
990 background: rgba(248, 81, 73, 0.15);
991 color: #f85149;
992 border: 1px solid rgba(248, 81, 73, 0.3);
993 font-size: 11px;
994 font-weight: 600;
995 }
996
997 // ── API Surface changes ──────────────────────────────────────────────────────
998
999 .sr-api-grid {
1000 display: grid;
1001 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1002 gap: var(--space-3);
1003 margin-top: var(--space-2);
1004 }
1005
1006 .sr-api-col {
1007 background: var(--bg-secondary);
1008 border-radius: 6px;
1009 padding: var(--space-2);
1010 border-top: 2px solid transparent;
1011
1012 &--added { border-top-color: #3fb950; }
1013 &--removed { border-top-color: #f85149; }
1014 &--modified { border-top-color: #f0883e; }
1015 }
1016
1017 .sr-api-col-head {
1018 font-size: 11px;
1019 font-weight: 700;
1020 text-transform: uppercase;
1021 letter-spacing: 0.06em;
1022 color: var(--text-muted);
1023 margin-bottom: var(--space-2);
1024 display: flex;
1025 align-items: center;
1026 gap: 6px;
1027
1028 .sr-api-col--added & { color: #3fb950; }
1029 .sr-api-col--removed & { color: #f85149; }
1030 .sr-api-col--modified & { color: #f0883e; }
1031 }
1032
1033 .sr-api-count {
1034 background: rgba(255,255,255,0.08);
1035 border-radius: 10px;
1036 padding: 0 6px;
1037 font-size: 10px;
1038 color: inherit;
1039 }
1040
1041 .sr-api-entry {
1042 display: flex;
1043 align-items: center;
1044 gap: 5px;
1045 padding: 3px 0;
1046 border-bottom: 1px solid var(--border-muted);
1047 font-size: 11px;
1048
1049 &:last-child { border-bottom: none; }
1050 }
1051
1052 .sr-api-kind {
1053 flex-shrink: 0;
1054 font-family: var(--font-mono);
1055 font-size: 9px;
1056 padding: 0 4px;
1057 border-radius: 3px;
1058 background: rgba(255,255,255,0.06);
1059 color: var(--text-muted);
1060
1061 &--function, &--async_function { color: #58a6ff; background: rgba(88,166,255,0.12); }
1062 &--class { color: #bc8cff; background: rgba(188,140,255,0.12); }
1063 &--method, &--async_method { color: #3fb950; background: rgba(63,185,80,0.12); }
1064 &--variable { color: #f0883e; background: rgba(240,136,62,0.12); }
1065 }
1066
1067 .sr-api-addr {
1068 flex: 1;
1069 font-family: var(--font-mono);
1070 font-size: 10px;
1071 color: var(--text-primary);
1072 overflow: hidden;
1073 text-overflow: ellipsis;
1074 white-space: nowrap;
1075 }
1076
1077 .sr-api-lang {
1078 flex-shrink: 0;
1079 font-size: 9px;
1080 color: var(--text-muted);
1081 font-weight: 700;
1082 }
1083
1084 .sr-api-more {
1085 font-size: 10px;
1086 color: var(--text-muted);
1087 text-align: center;
1088 margin-top: var(--space-1);
1089 font-style: italic;
1090 }
1091
1092 // ── Breaking changes ─────────────────────────────────────────────────────────
1093
1094 .sr-breaking-list {
1095 display: flex;
1096 flex-direction: column;
1097 gap: 6px;
1098 margin-top: var(--space-2);
1099 }
1100
1101 .sr-breaking-entry {
1102 display: flex;
1103 align-items: center;
1104 gap: 8px;
1105 padding: 6px 10px;
1106 background: rgba(248, 81, 73, 0.08);
1107 border: 1px solid rgba(248, 81, 73, 0.2);
1108 border-radius: 5px;
1109 }
1110
1111 .sr-breaking-icon {
1112 color: #f85149;
1113 flex-shrink: 0;
1114 }
1115
1116 .sr-breaking-addr {
1117 font-family: var(--font-mono);
1118 font-size: 11px;
1119 color: #f85149;
1120 background: transparent;
1121 border: none;
1122 padding: 0;
1123 }
1124
1125 // ── File Hotspots ─────────────────────────────────────────────────────────────
1126
1127 .sr-hotspot-list {
1128 display: flex;
1129 flex-direction: column;
1130 gap: 5px;
1131 margin-top: var(--space-2);
1132 }
1133
1134 .sr-hotspot-row {
1135 display: grid;
1136 grid-template-columns: 24px 130px 1fr 28px;
1137 align-items: center;
1138 gap: 8px;
1139 font-size: 11px;
1140 }
1141
1142 .sr-hotspot-lang {
1143 font-family: var(--font-mono);
1144 font-size: 9px;
1145 font-weight: 700;
1146 text-align: center;
1147 }
1148
1149 .sr-hotspot-file {
1150 font-family: var(--font-mono);
1151 font-size: 10px;
1152 color: var(--text-primary);
1153 white-space: nowrap;
1154 overflow: hidden;
1155 text-overflow: ellipsis;
1156 }
1157
1158 .sr-hotspot-bar-wrap {
1159 height: 14px;
1160 background: var(--bg-tertiary);
1161 border-radius: 3px;
1162 overflow: hidden;
1163 }
1164
1165 .sr-hotspot-bar {
1166 height: 100%;
1167 border-radius: 3px;
1168 transition: width 0.4s ease;
1169 }
1170
1171 .sr-hotspot-count {
1172 font-family: var(--font-mono);
1173 font-size: 10px;
1174 color: var(--text-muted);
1175 text-align: right;
1176 }
1177
1178 // ── Refactoring Events ───────────────────────────────────────────────────────
1179
1180 .sr-refactor-list {
1181 display: flex;
1182 flex-direction: column;
1183 gap: 4px;
1184 margin-top: var(--space-2);
1185 }
1186
1187 .sr-refactor-row {
1188 display: flex;
1189 align-items: center;
1190 gap: 8px;
1191 padding: 5px 8px;
1192 border-radius: 4px;
1193 background: var(--bg-secondary);
1194 font-size: 11px;
1195
1196 &--move { border-left: 3px solid #58a6ff; }
1197 &--add { border-left: 3px solid #3fb950; }
1198 &--delete { border-left: 3px solid #f85149; }
1199 &--patch { border-left: 3px solid #f0883e; }
1200 }
1201
1202 .sr-refactor-kind {
1203 font-family: var(--font-mono);
1204 font-size: 9px;
1205 font-weight: 700;
1206 color: var(--text-muted);
1207 flex-shrink: 0;
1208 min-width: 40px;
1209 }
1210
1211 .sr-refactor-addr {
1212 font-family: var(--font-mono);
1213 font-size: 10px;
1214 color: var(--text-primary);
1215 background: transparent;
1216 border: none;
1217 padding: 0;
1218 flex-shrink: 0;
1219 max-width: 200px;
1220 overflow: hidden;
1221 text-overflow: ellipsis;
1222 white-space: nowrap;
1223 }
1224
1225 .sr-refactor-detail {
1226 flex: 1;
1227 color: var(--text-muted);
1228 font-size: 10px;
1229 overflow: hidden;
1230 text-overflow: ellipsis;
1231 white-space: nowrap;
1232 }
1233
1234 .sr-refactor-commit {
1235 font-family: var(--font-mono);
1236 font-size: 9px;
1237 color: var(--text-muted);
1238 flex-shrink: 0;
1239 }
1240
1241 // ── Symbol inventory (sidebar) ───────────────────────────────────────────────
1242
1243 .sr-sym-row {
1244 display: grid;
1245 grid-template-columns: 80px 1fr 30px;
1246 align-items: center;
1247 gap: 6px;
1248 margin-bottom: 5px;
1249 font-size: 11px;
1250 }
1251
1252 .sr-sym-kind {
1253 color: var(--text-secondary);
1254 font-size: 10px;
1255 white-space: nowrap;
1256 overflow: hidden;
1257 text-overflow: ellipsis;
1258 }
1259
1260 .sr-sym-bar-wrap {
1261 height: 8px;
1262 background: var(--bg-tertiary);
1263 border-radius: 4px;
1264 overflow: hidden;
1265 }
1266
1267 .sr-sym-bar {
1268 height: 100%;
1269 background: linear-gradient(90deg, #58a6ff40, #58a6ff);
1270 border-radius: 4px;
1271 transition: width 0.3s ease;
1272 }
1273
1274 .sr-sym-count {
1275 font-family: var(--font-mono);
1276 font-size: 10px;
1277 color: var(--text-muted);
1278 text-align: right;
1279 }
1280
1281 // ── Authorship — human vs AI (sidebar) ───────────────────────────────────────
1282
1283 .sr-authorship-bar {
1284 display: flex;
1285 height: 10px;
1286 border-radius: 5px;
1287 overflow: hidden;
1288 margin-bottom: 8px;
1289 background: var(--bg-tertiary);
1290 }
1291
1292 .sr-authorship-human {
1293 background: #3fb950;
1294 transition: width 0.4s ease;
1295 }
1296
1297 .sr-authorship-agent {
1298 background: #bc8cff;
1299 transition: width 0.4s ease;
1300 }
1301
1302 .sr-authorship-legend {
1303 display: flex;
1304 justify-content: space-between;
1305 font-size: 11px;
1306 color: var(--text-secondary);
1307 }
1308
1309 .sr-auth-dot {
1310 display: inline-block;
1311 width: 8px;
1312 height: 8px;
1313 border-radius: 50%;
1314 margin-right: 4px;
1315
1316 &--human { background: #3fb950; }
1317 &--agent { background: #bc8cff; }
1318 }
1319
1320
1321 // ── rd2 release detail design system (.rd2-*) ────────────────────────────────
1322
1323 .rd2-header {
1324 display: flex;
1325 align-items: flex-start;
1326 justify-content: space-between;
1327 gap: var(--space-4);
1328 padding: var(--space-4) var(--space-5);
1329 background: var(--bg-secondary);
1330 border: 1px solid var(--border-default);
1331 border-radius: 8px;
1332 margin-bottom: var(--space-4);
1333 }
1334
1335 .rd2-title-row {
1336 display: flex;
1337 align-items: center;
1338 gap: 10px;
1339 flex-wrap: wrap;
1340 margin-bottom: 6px;
1341 }
1342
1343 .rd2-title {
1344 font-size: 1.25rem;
1345 font-weight: 700;
1346 margin: 0 0 6px;
1347 color: var(--text-primary);
1348 }
1349
1350 .rd2-tag {
1351 font-family: var(--font-mono);
1352 font-size: 13px;
1353 font-weight: 700;
1354 background: #1f3b5a;
1355 color: #58a6ff;
1356 padding: 2px 10px;
1357 border-radius: 20px;
1358 border: 1px solid #264f78;
1359
1360 &--sm {
1361 font-size: 11px;
1362 padding: 1px 7px;
1363 }
1364 }
1365
1366 .rd2-channel {
1367 font-size: 11px;
1368 font-weight: 700;
1369 text-transform: uppercase;
1370 letter-spacing: 0.05em;
1371 padding: 2px 8px;
1372 border-radius: 4px;
1373
1374 &--stable { background: #0d2d1a; color: #3fb950; border: 1px solid #238636; }
1375 &--beta { background: #2d1b00; color: #f0883e; border: 1px solid #9e6a03; }
1376 &--alpha { background: #1e1038; color: #bc8cff; border: 1px solid #6e40c9; }
1377 &--nightly { background: #0d1f36; color: #58a6ff; border: 1px solid #1f6feb; }
1378 &--draft { background: #1c1c1c; color: #8b949e; border: 1px solid #30363d; }
1379 }
1380
1381 .rd2-breaking-flag {
1382 font-size: 11px;
1383 font-weight: 700;
1384 color: #f85149;
1385 background: #2d1117;
1386 border: 1px solid #f85149;
1387 padding: 2px 8px;
1388 border-radius: 4px;
1389 }
1390
1391 .rd2-meta-row {
1392 display: flex;
1393 align-items: center;
1394 gap: 8px;
1395 flex-wrap: wrap;
1396 font-size: 12px;
1397 color: var(--text-secondary);
1398 }
1399
1400 .rd2-sha {
1401 font-family: var(--font-mono);
1402 font-size: 12px;
1403 color: #58a6ff;
1404 text-decoration: none;
1405
1406 &:hover { text-decoration: underline; }
1407 }
1408
1409 .rd2-snap { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
1410 .rd2-date,
1411 .rd2-sep { color: var(--text-muted); }
1412 .rd2-verified { color: #3fb950; font-size: 11px; font-weight: 700; }
1413
1414 .rd2-header-actions {
1415 display: flex;
1416 align-items: center;
1417 gap: 8px;
1418 flex-shrink: 0;
1419 }
1420
1421 // Pending analysis state
1422 .rd2-pending {
1423 text-align: center;
1424 padding: var(--space-6);
1425 background: var(--bg-secondary);
1426 border: 1px solid var(--border-default);
1427 border-radius: 8px;
1428 margin-bottom: var(--space-4);
1429 }
1430
1431 .rd2-pending-icon {
1432 font-size: 2rem;
1433 margin-bottom: 8px;
1434 animation: rd2spin 2s linear infinite;
1435 display: inline-block;
1436 }
1437
1438 @keyframes rd2spin { to { transform: rotate(360deg); } }
1439
1440 .rd2-pending-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
1441 .rd2-pending-sub { font-size: 12px; color: var(--text-muted); }
1442
1443 // Glance hero
1444 .rd2-glance {
1445 display: flex;
1446 gap: var(--space-5);
1447 align-items: stretch;
1448 background: var(--bg-secondary);
1449 border: 1px solid var(--border-default);
1450 border-radius: 8px;
1451 padding: var(--space-4) var(--space-5);
1452 margin-bottom: var(--space-4);
1453 }
1454
1455 .rd2-glance-hero {
1456 display: flex;
1457 align-items: center;
1458 gap: 0;
1459 flex-shrink: 0;
1460 }
1461
1462 .rd2-hero-stat {
1463 display: flex;
1464 flex-direction: column;
1465 align-items: center;
1466 padding: 0 var(--space-4);
1467 }
1468
1469 .rd2-hero-n {
1470 font-size: 2.2rem;
1471 font-weight: 800;
1472 color: var(--text-primary);
1473 line-height: 1;
1474 font-variant-numeric: tabular-nums;
1475 }
1476
1477 .rd2-hero-lbl {
1478 font-size: 11px;
1479 color: var(--text-muted);
1480 text-transform: uppercase;
1481 letter-spacing: 0.06em;
1482 margin-top: 4px;
1483 }
1484
1485 .rd2-hero-divider {
1486 width: 1px;
1487 height: 48px;
1488 background: var(--border-default);
1489 flex-shrink: 0;
1490 }
1491
1492 .rd2-glance-langs { flex: 1; min-width: 0; }
1493
1494 .rd2-lang-bar-stacked {
1495 display: flex;
1496 height: 8px;
1497 border-radius: 4px;
1498 overflow: hidden;
1499 margin-bottom: 10px;
1500 gap: 1px;
1501 }
1502
1503 .rd2-lang-seg { height: 100%; min-width: 2px; }
1504
1505 .rd2-lang-rows { display: flex; flex-direction: column; gap: 5px; }
1506
1507 .rd2-lang-row {
1508 display: grid;
1509 grid-template-columns: 10px 88px 1fr 38px 54px 38px;
1510 align-items: center;
1511 gap: 8px;
1512 font-size: 12px;
1513 }
1514
1515 .rd2-lang-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
1516 .rd2-lang-name { color: var(--text-primary); font-weight: 500; }
1517 .rd2-lang-track { height: 4px; border-radius: 2px; background: var(--bg-tertiary); overflow: hidden; }
1518 .rd2-lang-fill { height: 100%; border-radius: 2px; }
1519 .rd2-lang-files,
1520 .rd2-lang-syms { color: var(--text-muted); font-size: 11px; text-align: right; }
1521 .rd2-lang-pct { color: var(--text-secondary); font-size: 11px; text-align: right; }
1522 .rd2-lang-more { color: var(--text-muted); font-size: 11px; grid-column: 1 / -1; }
1523
1524 // Layout
1525 .rd2-body {
1526 display: grid;
1527 grid-template-columns: 1fr 276px;
1528 gap: var(--space-4);
1529 align-items: start;
1530
1531 @media (max-width: 900px) { grid-template-columns: 1fr; }
1532 }
1533
1534 .rd2-main { display: flex; flex-direction: column; gap: var(--space-3); }
1535 .rd2-aside { display: flex; flex-direction: column; gap: var(--space-3); }
1536
1537 // Panels
1538 .rd2-panel {
1539 background: var(--bg-secondary);
1540 border: 1px solid var(--border-default);
1541 border-radius: 8px;
1542 overflow: hidden;
1543
1544 &--danger { border-color: #f85149; }
1545
1546 &--danger &-head {
1547 color: #f85149;
1548 border-bottom-color: #f8514930;
1549 background: #2d111715;
1550 }
1551
1552 &--open &-collapsible { display: block; }
1553 &--open .rd2-toggle-arrow { transform: rotate(180deg); }
1554 }
1555
1556 .rd2-panel-head {
1557 display: flex;
1558 align-items: center;
1559 gap: 8px;
1560 padding: 10px 14px;
1561 border-bottom: 1px solid var(--border-default);
1562 font-size: 12px;
1563 font-weight: 700;
1564 color: var(--text-primary);
1565 text-transform: uppercase;
1566 letter-spacing: 0.04em;
1567
1568 &--toggle {
1569 cursor: pointer;
1570 user-select: none;
1571
1572 &:hover { background: var(--bg-tertiary); }
1573 }
1574 }
1575
1576 .rd2-panel-sub {
1577 color: var(--text-muted);
1578 font-weight: 400;
1579 text-transform: none;
1580 letter-spacing: 0;
1581 font-size: 11px;
1582 }
1583
1584 .rd2-panel-body { padding: 12px 14px; }
1585 .rd2-panel-collapsible { display: none; }
1586
1587 .rd2-toggle-arrow {
1588 margin-left: auto;
1589 color: var(--text-muted);
1590 font-size: 10px;
1591 transition: transform 0.2s;
1592 }
1593
1594 // Badge
1595 .rd2-badge {
1596 font-size: 10px;
1597 padding: 1px 7px;
1598 border-radius: 10px;
1599 background: var(--bg-tertiary);
1600 color: var(--text-muted);
1601 font-weight: 700;
1602
1603 &--danger { background: #2d1117; color: #f85149; border: 1px solid #f85149; }
1604 }
1605
1606 // Breaking changes
1607 .rd2-breaking-row {
1608 padding: 6px 8px;
1609 background: #2d111720;
1610 border-radius: 4px;
1611 margin-bottom: 4px;
1612 font-size: 12px;
1613
1614 code { color: #f85149; font-family: var(--font-mono); }
1615 }
1616
1617 // API surface
1618 .rd2-api-summary { display: flex; gap: 6px; margin-left: auto; }
1619
1620 .rd2-api-pill {
1621 font-size: 11px;
1622 font-weight: 700;
1623 padding: 1px 8px;
1624 border-radius: 10px;
1625 text-transform: none;
1626 letter-spacing: 0;
1627
1628 &--add { background: #0d2d1a; color: #3fb950; border: 1px solid #238636; }
1629 &--del { background: #2d1117; color: #f85149; border: 1px solid #f85149; }
1630 &--mod { background: #1c1c2e; color: #bc8cff; border: 1px solid #6e40c9; }
1631 }
1632
1633 .rd2-api-group {
1634 margin-bottom: 12px;
1635
1636 &:last-child { margin-bottom: 0; }
1637 }
1638
1639 .rd2-api-group-label {
1640 font-size: 10px;
1641 font-weight: 700;
1642 text-transform: uppercase;
1643 letter-spacing: 0.06em;
1644 margin-bottom: 5px;
1645 padding-bottom: 4px;
1646 border-bottom: 1px solid var(--border-default);
1647
1648 &--add { color: #3fb950; }
1649 &--del { color: #f85149; }
1650 &--mod { color: #bc8cff; }
1651 }
1652
1653 .rd2-api-row {
1654 display: grid;
1655 grid-template-columns: 72px 1fr 70px;
1656 align-items: center;
1657 gap: 8px;
1658 padding: 4px 0;
1659 font-size: 12px;
1660 border-bottom: 1px solid var(--border-muted);
1661 text-decoration: none;
1662 color: inherit;
1663
1664 &:last-child { border-bottom: none; }
1665 &:hover { background: var(--bg-tertiary); border-radius: 4px; }
1666 }
1667
1668 .rd2-api-addr {
1669 font-family: var(--font-mono);
1670 font-size: 11px;
1671 color: var(--text-secondary);
1672 white-space: nowrap;
1673 overflow: hidden;
1674 text-overflow: ellipsis;
1675 }
1676
1677 .rd2-api-lang { font-size: 10px; color: var(--text-muted); text-align: right; }
1678 .rd2-api-more {
1679 font-size: 11px;
1680 color: var(--text-muted);
1681 padding-top: 5px;
1682 text-decoration: none;
1683 display: block;
1684
1685 &:hover { color: #58a6ff; }
1686 }
1687
1688 .rd2-kind-chip {
1689 font-size: 9px;
1690 font-weight: 800;
1691 text-transform: uppercase;
1692 letter-spacing: 0.05em;
1693 padding: 1px 5px;
1694 border-radius: 3px;
1695 background: var(--bg-tertiary);
1696 color: var(--text-muted);
1697 white-space: nowrap;
1698
1699 &--function,
1700 &--method { background: #1c1c3a; color: #79c0ff; }
1701 &--class { background: #1a2e1a; color: #7ee787; }
1702 }
1703
1704 // File hotspots
1705 .rd2-hotspot-row {
1706 display: grid;
1707 grid-template-columns: 10px 1fr 1fr 30px;
1708 align-items: center;
1709 gap: 8px;
1710 padding: 5px 0;
1711 font-size: 12px;
1712 text-decoration: none;
1713 color: inherit;
1714
1715 &:hover { background: var(--bg-tertiary); border-radius: 4px; }
1716 }
1717
1718 .rd2-hotspot-dot { width: 8px; height: 8px; border-radius: 50%; }
1719 .rd2-hotspot-path { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1720 .rd2-hotspot-track { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
1721 .rd2-hotspot-fill { height: 100%; border-radius: 3px; opacity: 0.7; }
1722 .rd2-hotspot-n { color: var(--text-muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
1723
1724 // Structural changes
1725 .rd2-struct-row {
1726 display: grid;
1727 grid-template-columns: 48px 1fr 80px 52px;
1728 align-items: center;
1729 gap: 8px;
1730 padding: 4px 0;
1731 font-size: 12px;
1732 border-bottom: 1px solid var(--border-muted);
1733
1734 &:last-child { border-bottom: none; }
1735
1736 &--move .rd2-struct-kind { background: #1c2d3a; color: #58a6ff; }
1737 &--delete .rd2-struct-kind { background: #2d1117; color: #f85149; }
1738 }
1739
1740 .rd2-struct-kind {
1741 font-size: 9px;
1742 font-weight: 800;
1743 text-transform: uppercase;
1744 letter-spacing: 0.05em;
1745 padding: 1px 5px;
1746 border-radius: 3px;
1747 background: var(--bg-tertiary);
1748 color: var(--text-muted);
1749 }
1750
1751 .rd2-struct-addr { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1752 .rd2-struct-detail { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1753 .rd2-struct-sha { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
1754
1755 // Release notes prose
1756 .rd2-notes {
1757 font-size: 13px;
1758 line-height: 1.65;
1759 color: var(--text-secondary);
1760
1761 h1, h2, h3 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; color: var(--text-primary); }
1762 p { margin: 0 0 8px; }
1763 code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-tertiary); padding: 1px 4px; border-radius: 3px; }
1764 }
1765
1766 // Assets
1767 .rd2-asset-row {
1768 display: flex;
1769 align-items: center;
1770 justify-content: space-between;
1771 padding: 8px 0;
1772 border-bottom: 1px solid var(--border-muted);
1773
1774 &:last-child { border-bottom: none; }
1775 }
1776
1777 .rd2-asset-name {
1778 font-size: 13px;
1779 color: #58a6ff;
1780 text-decoration: none;
1781
1782 &:hover { text-decoration: underline; }
1783 }
1784
1785 .rd2-asset-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; margin-top: 2px; }
1786
1787 // Changelog
1788 .rd2-changelog-pills { display: flex; gap: 5px; align-items: center; }
1789
1790 .rd2-cl-pill {
1791 font-size: 10px;
1792 font-weight: 700;
1793 padding: 1px 7px;
1794 border-radius: 10px;
1795 text-transform: none;
1796 letter-spacing: 0;
1797
1798 &--major { background: #2d1117; color: #f85149; border: 1px solid #f85149; }
1799 &--minor { background: #0d2d1a; color: #3fb950; border: 1px solid #238636; }
1800 &--patch { background: #0d1f36; color: #58a6ff; border: 1px solid #1f6feb; }
1801 }
1802
1803 .rd2-cl-entry {
1804 display: flex;
1805 gap: 10px;
1806 padding: 7px 0;
1807 border-bottom: 1px solid var(--border-muted);
1808
1809 &:last-child { border-bottom: none; }
1810 }
1811
1812 .rd2-cl-bump {
1813 flex-shrink: 0;
1814 width: 20px;
1815 height: 20px;
1816 border-radius: 50%;
1817 display: flex;
1818 align-items: center;
1819 justify-content: center;
1820 font-size: 10px;
1821 font-weight: 800;
1822 margin-top: 1px;
1823 background: var(--bg-tertiary);
1824 color: var(--text-muted);
1825
1826 &--major { background: #2d1117; color: #f85149; }
1827 &--minor { background: #0d2d1a; color: #3fb950; }
1828 &--patch { background: #0d1f36; color: #58a6ff; }
1829 }
1830
1831 .rd2-cl-msg { font-size: 12px; color: var(--text-primary); line-height: 1.45; }
1832 .rd2-cl-meta { display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
1833 .rd2-cl-bc { margin-top: 4px; }
1834 .rd2-bc-chip { font-size: 10px; background: #2d1117; color: #f85149; padding: 1px 6px; border-radius: 3px; margin-right: 4px; }
1835
1836 // Sidebar cards
1837 .rd2-card {
1838 background: var(--bg-secondary);
1839 border: 1px solid var(--border-default);
1840 border-radius: 8px;
1841 overflow: hidden;
1842 }
1843
1844 .rd2-card-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border-default); }
1845 .rd2-card-body { padding: 12px; }
1846
1847 .rd2-sym-total { font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
1848 .rd2-sym-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
1849
1850 .rd2-sym-row {
1851 display: grid;
1852 grid-template-columns: 62px 1fr 36px;
1853 align-items: center;
1854 gap: 6px;
1855 margin-bottom: 5px;
1856 }
1857
1858 .rd2-sym-kind { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
1859 .rd2-sym-track { height: 5px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
1860 .rd2-sym-fill { height: 100%; border-radius: 3px; background: #1f6feb; }
1861 .rd2-sym-n { font-size: 11px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
1862
1863 // Authorship
1864 .rd2-auth-bar {
1865 display: flex;
1866 height: 8px;
1867 border-radius: 4px;
1868 overflow: hidden;
1869 margin-bottom: 10px;
1870 background: var(--bg-tertiary);
1871 }
1872
1873 .rd2-auth-human { background: #58a6ff; }
1874 .rd2-auth-agent { background: #bc8cff; }
1875
1876 .rd2-auth-legend { display: flex; flex-direction: column; gap: 6px; }
1877
1878 .rd2-auth-item {
1879 display: flex;
1880 align-items: center;
1881 gap: 6px;
1882 font-size: 12px;
1883 }
1884
1885 .rd2-auth-dot {
1886 width: 8px;
1887 height: 8px;
1888 border-radius: 50%;
1889 flex-shrink: 0;
1890
1891 &--human { background: #58a6ff; }
1892 &--agent { background: #bc8cff; }
1893 }
1894
1895 .rd2-auth-label { flex: 1; color: var(--text-secondary); }
1896 .rd2-auth-n { color: var(--text-primary); font-weight: 700; }
1897 .rd2-auth-pct { color: var(--text-muted); font-size: 11px; }
1898 .rd2-auth-detail { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
1899
1900 .rd2-agent-chip { font-size: 10px; background: #1e1038; color: #bc8cff; border: 1px solid #6e40c9; padding: 1px 6px; border-radius: 4px; }
1901 .rd2-model-chip { font-size: 10px; background: var(--bg-tertiary); color: var(--text-muted); padding: 1px 5px; border-radius: 3px; }
1902 .rd2-reviewers { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
1903
1904 // Key-value metadata rows
1905 .rd2-kv-list { display: flex; flex-direction: column; gap: 7px; }
1906
1907 .rd2-kv {
1908 display: flex;
1909 align-items: center;
1910 justify-content: space-between;
1911 font-size: 12px;
1912 }
1913
1914 .rd2-k { color: var(--text-muted); }
1915 .rd2-v { color: var(--text-primary); }
1916 .rd2-mono { font-family: var(--font-mono); font-size: 11px; }
1917
1918 .rd2-hash-row { display: flex; flex-direction: column; gap: 2px; }
1919 .rd2-hash-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
1920
1921 .rd2-hash {
1922 font-family: var(--font-mono);
1923 font-size: 10px;
1924 color: var(--text-muted);
1925 word-break: break-all;
1926 text-decoration: none;
1927
1928 &:hover { color: #58a6ff; }
1929 }
File History 1 commit
sha256:a10adeeb7a0169cb9900f9806ed7a973047258abb6283724fe55e8eb68ff3f0a init: musehub initial commit Human 171 days ago