gabriel / musehub public
_blame.scss
687 lines 17.6 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Blame viewer (.blm-* prefix)
3 // File: src/scss/components/_blame.scss
4 //
5 // Visual rules only — colors, typography, borders, animations.
6 // Structural layout lives in pages/_blame.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Page header ───────────────────────────────────────────────────────────────
10
11 .blm-page-header {
12 display: flex;
13 align-items: flex-start;
14 gap: var(--space-4);
15 padding: var(--space-4) 0 var(--space-3);
16 }
17
18 .blm-header-left {
19 display: flex;
20 align-items: flex-start;
21 gap: var(--space-3);
22 flex: 1;
23 min-width: 0;
24 }
25
26 .blm-path-icon {
27 width: 36px;
28 height: 36px;
29 display: flex;
30 align-items: center;
31 justify-content: center;
32 background: var(--bg-elevated);
33 border: 1px solid var(--border-default);
34 border-radius: var(--radius-base);
35 flex-shrink: 0;
36 color: var(--color-accent);
37 }
38
39 .blm-path-info { flex: 1; min-width: 0; }
40
41 .blm-filename {
42 margin: 0 0 4px;
43 display: flex;
44 align-items: center;
45 gap: var(--space-2);
46 flex-wrap: wrap;
47
48 code {
49 font-family: var(--font-mono);
50 font-size: 16px;
51 font-weight: 600;
52 color: var(--text-primary);
53 background: none;
54 }
55 }
56
57 .blm-type-badge {
58 font-size: 10px;
59 font-weight: 700;
60 letter-spacing: 0.06em;
61 text-transform: uppercase;
62 border-radius: var(--radius-sm);
63 border: 1px solid;
64 padding: 2px 7px;
65 white-space: nowrap;
66
67 &--symbol {
68 color: var(--color-accent);
69 border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
70 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
71 }
72 &--file {
73 color: var(--text-muted);
74 border-color: var(--border-default);
75 background: var(--bg-elevated);
76 }
77 }
78
79 .blm-breadcrumb {
80 margin: 0;
81 font-size: 12px;
82 color: var(--text-muted);
83 display: flex;
84 align-items: center;
85 gap: 6px;
86 flex-wrap: wrap;
87
88 code {
89 font-family: var(--font-mono);
90 font-size: 11px;
91 color: var(--color-accent-link);
92 background: var(--bg-elevated);
93 border: 1px solid var(--border-subtle);
94 border-radius: var(--radius-sm);
95 padding: 1px 6px;
96 }
97 }
98
99 .blm-breadcrumb-link {
100 color: var(--color-accent-link);
101 text-decoration: none;
102 &:hover { text-decoration: underline; }
103 }
104
105 // ── Stats strip ───────────────────────────────────────────────────────────────
106
107 .blm-stats {
108 display: flex;
109 align-items: center;
110 gap: var(--space-2);
111 padding: var(--space-2) 0 var(--space-3);
112 flex-wrap: wrap;
113 }
114
115 .blm-stat {
116 display: flex;
117 align-items: center;
118 gap: 5px;
119 padding: 4px 10px;
120 background: var(--bg-surface);
121 border: 1px solid var(--border-default);
122 border-radius: var(--radius-full);
123 font-size: 12px;
124 color: var(--text-muted);
125 }
126
127 .blm-stat-val {
128 font-weight: 700;
129 font-variant-numeric: tabular-nums;
130 color: var(--text-secondary);
131 }
132
133 .blm-stat--hotspot { &.blm-stat--active { border-color: color-mix(in srgb, var(--color-orange) 40%, transparent); .blm-stat-val { color: var(--color-orange); } } }
134 .blm-stat--dead { &.blm-stat--active { border-color: color-mix(in srgb, var(--color-accent-link) 40%, transparent); .blm-stat-val { color: var(--color-accent-link); } } }
135 .blm-stat--blast { &.blm-stat--active { border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); .blm-stat-val { color: var(--color-warning); } } }
136
137 // ── Empty state ───────────────────────────────────────────────────────────────
138
139 .blm-empty {
140 display: flex;
141 flex-direction: column;
142 align-items: center;
143 gap: var(--space-3);
144 padding: var(--space-12) var(--space-6);
145 text-align: center;
146 color: var(--text-muted);
147 font-size: 14px;
148
149 p { margin: 0; }
150 code {
151 font-family: var(--font-mono);
152 font-size: 12px;
153 color: var(--color-accent-link);
154 background: var(--bg-elevated);
155 border: 1px solid var(--border-subtle);
156 border-radius: var(--radius-sm);
157 padding: 1px 6px;
158 }
159 }
160
161 .blm-empty-hint {
162 font-size: 12px;
163 color: var(--text-disabled);
164 }
165
166 // ── Commit legend ─────────────────────────────────────────────────────────────
167
168 .blm-legend {
169 background: var(--bg-surface);
170 border: 1px solid var(--border-default);
171 border-radius: var(--radius-base);
172 overflow: hidden;
173 }
174
175 .blm-legend-hdr {
176 padding: 8px 12px;
177 font-size: 11px;
178 font-weight: 700;
179 letter-spacing: 0.05em;
180 text-transform: uppercase;
181 color: var(--text-muted);
182 background: var(--bg-elevated);
183 border-bottom: 1px solid var(--border-default);
184 display: flex;
185 align-items: center;
186 justify-content: space-between;
187 }
188
189 .blm-legend-prov-key {
190 font-weight: 400;
191 letter-spacing: 0;
192 text-transform: none;
193 display: flex;
194 align-items: center;
195 gap: 6px;
196 font-size: 10px;
197 }
198
199 .blm-commit-card {
200 display: flex;
201 align-items: flex-start;
202 gap: 9px;
203 padding: 9px 12px;
204 border-bottom: 1px solid var(--border-subtle);
205 text-decoration: none;
206 transition: background var(--transition-fast);
207 cursor: pointer;
208
209 &:last-child { border-bottom: none; }
210 &:hover { background: var(--bg-hover); }
211 }
212
213 .blm-commit-dot {
214 width: 10px;
215 height: 10px;
216 border-radius: 50%;
217 flex-shrink: 0;
218 margin-top: 3px;
219 }
220
221 .blm-commit-body { flex: 1; min-width: 0; }
222
223 .blm-commit-top {
224 display: flex;
225 align-items: center;
226 gap: 5px;
227 margin-bottom: 2px;
228 }
229
230 .blm-commit-sha {
231 font-family: var(--font-mono);
232 font-size: 11px;
233 color: var(--color-accent-link);
234 background: var(--bg-overlay);
235 border: 1px solid var(--border-subtle);
236 border-radius: var(--radius-sm);
237 padding: 1px 5px;
238 text-decoration: none;
239 flex-shrink: 0;
240 }
241
242 .blm-commit-prov {
243 width: 14px;
244 height: 14px;
245 border-radius: 50%;
246 display: flex;
247 align-items: center;
248 justify-content: center;
249 flex-shrink: 0;
250
251 &--agent {
252 background: color-mix(in srgb, var(--agent-accent) 12%, transparent);
253 color: var(--agent-accent);
254 }
255 &--human {
256 background: color-mix(in srgb, var(--color-success) 12%, transparent);
257 color: var(--color-success);
258 }
259 }
260
261 .blm-commit-count {
262 font-size: 10px;
263 color: var(--text-muted);
264 background: var(--bg-overlay);
265 border-radius: var(--radius-full);
266 padding: 1px 5px;
267 margin-left: auto;
268 flex-shrink: 0;
269 }
270
271 .blm-commit-msg {
272 font-size: 11px;
273 color: var(--text-secondary);
274 white-space: nowrap;
275 overflow: hidden;
276 text-overflow: ellipsis;
277 margin-bottom: 2px;
278 }
279
280 .blm-commit-meta {
281 font-size: 10px;
282 color: var(--text-muted);
283 display: flex;
284 align-items: center;
285 gap: 4px;
286 flex-wrap: wrap;
287 }
288
289 .blm-commit-model {
290 font-size: 9px;
291 font-weight: 600;
292 color: var(--agent-accent);
293 background: color-mix(in srgb, var(--agent-accent) 10%, transparent);
294 border-radius: var(--radius-full);
295 padding: 0 4px;
296 }
297
298 // ── Symbol cards ──────────────────────────────────────────────────────────────
299
300 .blm-symbol-list {
301 display: flex;
302 flex-direction: column;
303 gap: var(--space-2);
304 }
305
306 .blm-card {
307 background: var(--bg-surface);
308 border: 1px solid var(--border-default);
309 border-radius: var(--radius-base);
310 border-left: 3px solid var(--card-color, var(--color-accent));
311 overflow: hidden;
312 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
313
314 &:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
315 &[open] { border-left-width: 4px; }
316 }
317
318 .blm-card-summary {
319 display: flex;
320 align-items: center;
321 gap: var(--space-3);
322 padding: 10px 12px;
323 cursor: pointer;
324 list-style: none;
325 user-select: none;
326
327 &::-webkit-details-marker { display: none; }
328 &:hover { background: var(--bg-hover); }
329 }
330
331 .blm-card-main { flex: 1; min-width: 0; }
332
333 .blm-card-top {
334 display: flex;
335 align-items: center;
336 gap: var(--space-2);
337 margin-bottom: 5px;
338 flex-wrap: wrap;
339 }
340
341 .blm-symbol-name {
342 font-family: var(--font-mono);
343 font-size: 13px;
344 font-weight: 600;
345 color: var(--text-primary);
346 flex: 1;
347 min-width: 0;
348 overflow: hidden;
349 text-overflow: ellipsis;
350 white-space: nowrap;
351 }
352
353 .blm-symbol-link {
354 color: inherit;
355 text-decoration: none;
356 &:hover { color: var(--color-accent-link); }
357 }
358
359 .blm-op {
360 font-size: 9px;
361 font-weight: 700;
362 text-transform: uppercase;
363 letter-spacing: 0.05em;
364 border-radius: var(--radius-sm);
365 border: 1px solid;
366 padding: 1px 6px;
367 flex-shrink: 0;
368
369 &--add { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: color-mix(in srgb, var(--color-success) 8%, transparent); }
370 &--modify,
371 &--replace { color: var(--color-accent-link); border-color: color-mix(in srgb, var(--color-accent-link) 35%, transparent); background: color-mix(in srgb, var(--color-accent-link) 8%, transparent); }
372 &--delete,
373 &--remove { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
374 &--rename { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
375 &--patch { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-overlay); }
376 }
377
378 .blm-signal {
379 font-size: 10px;
380 font-weight: 600;
381 border-radius: var(--radius-full);
382 border: 1px solid;
383 padding: 1px 7px;
384 display: flex;
385 align-items: center;
386 gap: 3px;
387 flex-shrink: 0;
388
389 &--hotspot { color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 40%, transparent); background: color-mix(in srgb, var(--color-orange) 8%, transparent); }
390 &--dead { color: var(--color-accent-link); border-color: color-mix(in srgb, var(--color-accent-link) 30%, transparent); background: color-mix(in srgb, var(--color-accent-link) 6%, transparent); }
391 &--blast { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
392 }
393
394 .blm-card-bottom {
395 display: flex;
396 align-items: center;
397 gap: var(--space-3);
398 flex-wrap: wrap;
399 }
400
401 .blm-heat {
402 display: flex;
403 align-items: center;
404 gap: 6px;
405 flex-shrink: 0;
406 }
407
408 .blm-heat-bar {
409 width: 60px;
410 height: 4px;
411 background: var(--bg-overlay);
412 border-radius: var(--radius-full);
413 overflow: hidden;
414 flex-shrink: 0;
415 }
416
417 .blm-heat-fill {
418 display: block;
419 height: 100%;
420 background: linear-gradient(90deg, var(--color-accent), var(--color-orange));
421 border-radius: var(--radius-full);
422 min-width: 2px;
423 }
424
425 .blm-heat-count {
426 font-size: 10px;
427 color: var(--text-muted);
428 font-variant-numeric: tabular-nums;
429 flex-shrink: 0;
430 }
431
432 .blm-card-author {
433 display: flex;
434 align-items: center;
435 gap: 5px;
436 font-size: 11px;
437 color: var(--text-muted);
438 flex: 1;
439 min-width: 0;
440 }
441
442 .blm-author-icon {
443 width: 14px;
444 height: 14px;
445 border-radius: 50%;
446 display: flex;
447 align-items: center;
448 justify-content: center;
449 flex-shrink: 0;
450 font-size: 9px;
451
452 &--agent {
453 background: color-mix(in srgb, var(--agent-accent) 15%, transparent);
454 color: var(--agent-accent);
455 }
456 &--human {
457 background: color-mix(in srgb, var(--color-success) 15%, transparent);
458 color: var(--color-success);
459 }
460 }
461
462 .blm-card-dot { color: var(--text-disabled); }
463
464 .blm-card-time { color: var(--text-muted); font-size: 11px; }
465
466 .blm-card-commit {
467 font-family: var(--font-mono);
468 font-size: 10px;
469 color: var(--color-accent-link);
470 text-decoration: none;
471 background: var(--bg-overlay);
472 border: 1px solid var(--border-subtle);
473 border-radius: var(--radius-sm);
474 padding: 1px 5px;
475 margin-left: auto;
476 flex-shrink: 0;
477 &:hover { border-color: var(--color-accent); }
478 }
479
480 .blm-expand-chevron {
481 color: var(--text-muted);
482 transition: transform var(--transition-fast);
483 flex-shrink: 0;
484
485 details[open] > summary & { transform: rotate(180deg); }
486 }
487
488 // ── Symbol history panel ──────────────────────────────────────────────────────
489
490 .blm-history-panel {
491 border-top: 1px solid var(--border-subtle);
492 background: var(--bg-elevated);
493 }
494
495 .blm-history-table {
496 width: 100%;
497 border-collapse: collapse;
498 font-size: 11px;
499
500 th {
501 padding: 6px 10px;
502 text-align: left;
503 font-size: 10px;
504 font-weight: 700;
505 text-transform: uppercase;
506 letter-spacing: 0.04em;
507 color: var(--text-muted);
508 background: var(--bg-overlay);
509 border-bottom: 1px solid var(--border-subtle);
510 }
511
512 td {
513 padding: 5px 10px;
514 border-bottom: 1px solid var(--border-subtle);
515 vertical-align: middle;
516 color: var(--text-secondary);
517 }
518
519 tr:last-child td { border-bottom: none; }
520 tr:hover td { background: var(--bg-hover); }
521 }
522
523 .blm-hist-num { color: var(--text-disabled); font-size: 10px; width: 28px; text-align: right; }
524 .blm-hist-sha a {
525 font-family: var(--font-mono);
526 font-size: 11px;
527 color: var(--color-accent-link);
528 text-decoration: none;
529 background: var(--bg-surface);
530 border: 1px solid var(--border-subtle);
531 border-radius: var(--radius-sm);
532 padding: 1px 5px;
533 &:hover { border-color: var(--color-accent); }
534 }
535 .blm-hist-msg { color: var(--text-secondary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
536 .blm-hist-author { color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
537 .blm-hist-age { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
538
539 .blm-history-footer {
540 padding: 6px 10px;
541 border-top: 1px solid var(--border-subtle);
542
543 a {
544 font-size: 11px;
545 color: var(--color-accent-link);
546 text-decoration: none;
547 &:hover { text-decoration: underline; }
548 }
549 }
550
551 .blm-history-empty {
552 padding: var(--space-3) var(--space-3);
553 font-size: 11px;
554 color: var(--text-muted);
555 font-style: italic;
556 margin: 0;
557 }
558
559 // ── File blame view ───────────────────────────────────────────────────────────
560
561 .blm-file-view {
562 background: var(--bg-surface);
563 border: 1px solid var(--border-default);
564 border-radius: var(--radius-base);
565 overflow: hidden;
566 }
567
568 .blm-file-commit-bar {
569 display: flex;
570 align-items: center;
571 gap: 8px;
572 padding: 8px 12px;
573 background: var(--bg-elevated);
574 border-bottom: 1px solid var(--border-default);
575 flex-wrap: wrap;
576 font-size: 12px;
577 }
578
579 .blm-file-commit-sha {
580 font-family: var(--font-mono);
581 font-size: 11px;
582 color: var(--color-accent-link);
583 text-decoration: none;
584 background: var(--bg-surface);
585 border: 1px solid var(--border-subtle);
586 border-radius: var(--radius-sm);
587 padding: 1px 6px;
588 flex-shrink: 0;
589 &:hover { border-color: var(--color-accent); }
590 }
591
592 .blm-file-commit-msg {
593 color: var(--text-secondary);
594 font-size: 12px;
595 flex: 1;
596 min-width: 0;
597 overflow: hidden;
598 text-overflow: ellipsis;
599 white-space: nowrap;
600 }
601
602 .blm-file-commit-sep { color: var(--text-disabled); }
603
604 .blm-file-commit-author {
605 color: var(--text-muted);
606 font-size: 11px;
607 flex-shrink: 0;
608 }
609
610 .blm-file-commit-time {
611 color: var(--text-muted);
612 font-size: 11px;
613 flex-shrink: 0;
614 }
615
616 .blm-file-empty {
617 padding: var(--space-6);
618 text-align: center;
619 color: var(--text-muted);
620 font-size: 13px;
621 }
622
623 // ── Code table (file blame) ───────────────────────────────────────────────────
624
625 .blm-code-table {
626 width: 100%;
627 border-collapse: collapse;
628 border-spacing: 0;
629 font-family: var(--font-mono);
630 font-size: 12px;
631 tab-size: 4;
632 }
633
634 .blm-code-row {
635 scroll-margin-top: calc(var(--sticky-offset, 80px) + 16px);
636
637 &:target .blm-code-cell,
638 &:hover .blm-code-cell { background: var(--bg-hover); }
639 &:target .blm-gutter { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
640 }
641
642 .blm-gutter {
643 width: 1%;
644 white-space: nowrap;
645 vertical-align: top;
646 padding: 0 10px 0 0;
647 text-align: right;
648 user-select: none;
649 border-right: 1px solid var(--border-subtle);
650 // border-left applied via inline style (commit color stripe)
651 }
652
653 .blm-lnlink {
654 color: var(--text-disabled);
655 text-decoration: none;
656 font-size: 11px;
657 display: block;
658 padding: 1px 0;
659 &:hover { color: var(--color-accent-link); }
660 }
661
662 .blm-code-cell {
663 padding: 0 16px 0 12px;
664 white-space: pre;
665 width: 100%;
666 color: var(--text-primary);
667 line-height: 1.65;
668 }
669
670 .blm-code-truncated {
671 padding: var(--space-3) var(--space-4);
672 font-size: 11px;
673 color: var(--text-muted);
674 background: var(--bg-elevated);
675 border-top: 1px solid var(--border-subtle);
676 font-style: italic;
677 }
678
679 // ── Authorship key ────────────────────────────────────────────────────────────
680
681 .blm-prov-key {
682 display: flex;
683 align-items: center;
684 gap: 6px;
685 font-size: 10px;
686 color: var(--text-muted);
687 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor 1 day ago