gabriel / musehub public
_intel.scss
716 lines 18.1 KB
Raw
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 7 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Intelligence Hub (.intel-* prefix)
3 // File: src/scss/components/_intel.scss
4 //
5 // Visual rules only — colors, typography, backgrounds, borders, animations.
6 // Structural layout lives in pages/_intel.scss.
7 // Used by: intel_dashboard, intel_hotspots, intel_dead, intel_blast_risk.
8 // ─────────────────────────────────────────────────────────────────────────────
9
10 // ── Shared symbol deep-link ───────────────────────────────────────────────────
11
12 .sym-deep-link {
13 color: var(--color-accent-link);
14 text-decoration: none;
15 &:hover { text-decoration: underline; }
16 }
17
18 // ── Header ────────────────────────────────────────────────────────────────────
19
20 .intel-wrap { font-family: var(--font-mono); }
21
22 .intel-hd { border-bottom: 1px solid var(--border-default); }
23
24 .intel-hd-title {
25 font-size: 1.1rem;
26 font-weight: 700;
27 color: var(--text-primary);
28 letter-spacing: 0.04em;
29 text-transform: uppercase;
30 }
31
32 .intel-hd-repo {
33 font-size: 0.8rem;
34 color: var(--text-muted);
35 }
36
37 // ── Subpage header ────────────────────────────────────────────────────────────
38
39 .intel-subhd { border-bottom: 1px solid var(--border-default); }
40
41 .intel-back {
42 font-size: 0.75rem;
43 color: var(--color-accent-link);
44 text-decoration: none;
45 &:hover { text-decoration: underline; }
46 }
47
48 .intel-subhd-title {
49 font-size: 1rem;
50 font-weight: 700;
51 color: var(--text-primary);
52 letter-spacing: 0.04em;
53 text-transform: uppercase;
54 }
55
56 .intel-subhd-desc {
57 font-size: 0.78rem;
58 color: var(--text-muted);
59 font-family: var(--font-mono);
60 }
61
62 // ── No-index state ────────────────────────────────────────────────────────────
63
64 .intel-no-index {
65 background: var(--bg-surface);
66 border: 1px solid var(--border-default);
67 border-radius: 6px;
68 color: var(--text-muted);
69 font-size: 0.85rem;
70
71 svg { flex-shrink: 0; opacity: 0.5; }
72 }
73
74 .intel-no-index-msg { line-height: 1.6; }
75
76 // ── Health gauge ──────────────────────────────────────────────────────────────
77
78 .intel-health-card {
79 background: var(--bg-surface);
80 border: 1px solid var(--border-default);
81 border-radius: 8px;
82 }
83
84 .intel-health-track {
85 fill: none;
86 stroke: var(--bg-overlay);
87 stroke-width: 8;
88 }
89
90 .intel-health-fill {
91 fill: none;
92 stroke-width: 8;
93 stroke-linecap: round;
94 transition: stroke-dasharray 0.4s ease;
95
96 &--excellent { stroke: var(--color-success); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-success) 50%, transparent)); }
97 &--good { stroke: var(--color-success); opacity: 0.75; }
98 &--fair { stroke: var(--color-warning); }
99 &--poor { stroke: var(--color-danger); }
100 &--critical { stroke: var(--color-danger-critical); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-danger-critical) 50%, transparent)); }
101 }
102
103 .intel-health-num {
104 font-family: var(--font-mono);
105 font-size: 1.45rem;
106 font-weight: 700;
107 fill: var(--text-primary);
108 }
109
110 .intel-health-sub {
111 font-family: var(--font-mono);
112 font-size: 0.48rem;
113 font-weight: 600;
114 fill: var(--text-muted);
115 letter-spacing: 0.1em;
116 text-transform: uppercase;
117 }
118
119 .intel-health-label {
120 font-size: 0.8rem;
121 font-weight: 700;
122 letter-spacing: 0.06em;
123 text-transform: uppercase;
124
125 &--excellent { color: var(--color-success); }
126 &--good { color: var(--color-success); opacity: 0.75; }
127 &--fair { color: var(--color-warning); }
128 &--poor { color: var(--color-danger); }
129 &--critical { color: var(--color-danger-critical); }
130 }
131
132 .intel-health-meta {
133 font-size: 0.68rem;
134 color: var(--text-muted);
135 text-align: center;
136 }
137
138 // ── Alert strip ───────────────────────────────────────────────────────────────
139
140 .intel-alerts {
141 background: var(--bg-surface);
142 border: 1px solid var(--border-default);
143 border-radius: 8px;
144 }
145
146 .intel-alerts-title {
147 font-size: 0.68rem;
148 font-weight: 700;
149 letter-spacing: 0.1em;
150 text-transform: uppercase;
151 color: var(--text-muted);
152 }
153
154 .intel-alert {
155 font-size: 0.8rem;
156 color: var(--text-secondary);
157
158 &--warn .intel-alert-icon { color: var(--color-warning); }
159 &--crit .intel-alert-icon { color: var(--color-danger); }
160 }
161
162 .intel-alert-icon {
163 font-size: 0.85rem;
164 color: var(--color-success);
165 width: 1em;
166 text-align: center;
167 }
168
169 .intel-alert-link {
170 font-size: 0.72rem;
171 color: var(--color-accent-link);
172 text-decoration: none;
173 &:hover { text-decoration: underline; }
174 }
175
176 // ── Panel cards ───────────────────────────────────────────────────────────────
177
178 .intel-card {
179 background: var(--bg-surface);
180 border: 1px solid var(--border-default);
181 border-radius: 8px;
182 min-width: 0;
183 overflow: hidden;
184 }
185
186 .intel-card-title {
187 font-size: 0.65rem;
188 font-weight: 700;
189 letter-spacing: 0.1em;
190 text-transform: uppercase;
191 color: var(--text-muted);
192 }
193
194 .intel-card-more {
195 font-size: 0.7rem;
196 color: var(--color-accent-link);
197 text-decoration: none;
198 &:hover { text-decoration: underline; }
199 }
200
201 .intel-card-empty {
202 font-size: 0.75rem;
203 color: var(--text-muted);
204 }
205
206 // ── Bar chart rows ────────────────────────────────────────────────────────────
207
208 .intel-bar-label {
209 font-size: 0.72rem;
210 color: var(--color-accent-link);
211 text-decoration: none;
212 white-space: nowrap;
213 overflow: hidden;
214 text-overflow: ellipsis;
215 &:hover { text-decoration: underline; }
216 }
217
218 .intel-bar-track {
219 background: var(--bg-overlay);
220 border-radius: 2px;
221 overflow: hidden;
222 }
223
224 .intel-bar-fill {
225 height: 100%;
226 border-radius: 2px;
227 transition: width 0.3s ease;
228 &--hot { background: color-mix(in srgb, var(--color-warning) 80%, var(--color-danger)); }
229 }
230
231 .intel-bar-val {
232 font-size: 0.68rem;
233 color: var(--text-muted);
234 white-space: nowrap;
235 }
236
237 // ── Dead code card ────────────────────────────────────────────────────────────
238
239 .intel-dead-summary {
240 font-size: 0.75rem;
241 color: var(--text-secondary);
242 }
243
244 .intel-dead-count,
245 .intel-dead-oldest {
246 font-weight: 700;
247 color: var(--color-warning);
248 }
249
250 .intel-dead-addr {
251 font-size: 0.72rem;
252 color: var(--color-accent-link);
253 text-decoration: none;
254 white-space: nowrap;
255 overflow: hidden;
256 text-overflow: ellipsis;
257 &:hover { text-decoration: underline; }
258 }
259
260 .intel-dead-age {
261 font-size: 0.68rem;
262 color: var(--text-muted);
263 white-space: nowrap;
264 flex-shrink: 0;
265 }
266
267 // ── Blast risk card ───────────────────────────────────────────────────────────
268
269 .intel-blast-addr {
270 font-size: 0.72rem;
271 color: var(--color-accent-link);
272 text-decoration: none;
273 white-space: nowrap;
274 overflow: hidden;
275 text-overflow: ellipsis;
276 &:hover { text-decoration: underline; }
277 }
278
279 .intel-blast-radius {
280 font-size: 0.68rem;
281 color: var(--color-danger);
282 white-space: nowrap;
283 flex-shrink: 0;
284 }
285
286 // ── Velocity sparkline ────────────────────────────────────────────────────────
287
288 .intel-velocity-wrap {
289 background: var(--bg-surface);
290 border: 1px solid var(--border-default);
291 border-radius: 8px;
292 }
293
294 .intel-velocity-title {
295 font-size: 0.65rem;
296 font-weight: 700;
297 letter-spacing: 0.1em;
298 text-transform: uppercase;
299 color: var(--text-muted);
300 }
301
302 .intel-velocity-sub {
303 font-weight: 400;
304 opacity: 0.6;
305 }
306
307 .intel-velocity-bar {
308 background: color-mix(in srgb, var(--color-accent) 40%, transparent);
309 border-radius: 2px 2px 0 0;
310 min-height: 2px;
311 transition: background 0.2s;
312 &:hover { background: var(--color-accent); }
313 }
314
315 // ── Full-list (subpage) shared ────────────────────────────────────────────────
316
317 .intel-full-list {
318 border: 1px solid var(--border-default);
319 border-radius: 8px;
320 overflow: hidden;
321 background: var(--bg-surface);
322 }
323
324 .intel-empty-state {
325 color: var(--text-muted);
326 font-size: 0.85rem;
327 text-align: center;
328 svg { opacity: 0.35; }
329 }
330
331 // ── Hotspot full rows ─────────────────────────────────────────────────────────
332
333 .intel-hs-row {
334 border-bottom: 1px solid var(--border-default);
335 &:last-child { border-bottom: none; }
336 }
337
338 .intel-hs-addr {
339 font-size: 0.8rem;
340 color: var(--color-accent-link);
341 text-decoration: none;
342 font-family: var(--font-mono);
343 &:hover { text-decoration: underline; }
344 }
345
346 .intel-hs-ts {
347 font-size: 0.7rem;
348 color: var(--text-muted);
349 }
350
351 // ── Dead full rows ────────────────────────────────────────────────────────────
352
353 .intel-dead-full-row {
354 border-bottom: 1px solid var(--border-default);
355 &:last-child { border-bottom: none; }
356 }
357
358 .intel-dead-full-addr {
359 font-size: 0.8rem;
360 font-family: var(--font-mono);
361
362 a {
363 color: var(--color-accent-link);
364 text-decoration: none;
365 &:hover { text-decoration: underline; }
366 }
367 }
368
369 .intel-dead-full-meta {
370 font-size: 0.7rem;
371 color: var(--text-muted);
372 }
373
374 .intel-dead-age-badge {
375 background: color-mix(in srgb, var(--color-warning) 20%, transparent);
376 color: var(--color-warning);
377 border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
378 border-radius: 4px;
379 padding: 1px 6px;
380 font-size: 0.68rem;
381 font-weight: 600;
382 }
383
384 .intel-dead-blast { strong { color: var(--text-secondary); } }
385 .intel-dead-added { color: var(--text-muted); }
386
387 // ── Blast risk full rows ──────────────────────────────────────────────────────
388
389 .intel-blast-full-row {
390 border-bottom: 1px solid var(--border-default);
391 &:last-child { border-bottom: none; }
392 }
393
394 .intel-blast-icon {
395 color: var(--color-danger);
396 font-size: 0.85rem;
397 flex-shrink: 0;
398 }
399
400 .intel-blast-full-addr {
401 font-size: 0.8rem;
402 color: var(--color-accent-link);
403 text-decoration: none;
404 font-family: var(--font-mono);
405 flex: 1;
406 &:hover { text-decoration: underline; }
407 }
408
409 .intel-blast-full-radius {
410 font-size: 0.72rem;
411 color: var(--color-danger);
412 white-space: nowrap;
413 flex-shrink: 0;
414 }
415
416 .intel-blast-co-list {
417 font-size: 0.7rem;
418 color: var(--text-muted);
419 }
420
421 .intel-blast-co-label {
422 color: var(--text-muted);
423 margin-right: 0.25rem;
424 }
425
426 .intel-blast-co-sym {
427 color: var(--text-muted);
428 text-decoration: none;
429 font-family: var(--font-mono);
430 &:hover { color: var(--color-accent-link); text-decoration: underline; }
431 }
432
433 // ── Gravity subpage — visual ──────────────────────────────────────────────────
434
435 .intel-subhd-title--spectral {}
436
437 // stat chips
438
439 .intel-grav-stat {
440 background: var(--bg-surface);
441 border: 1px solid var(--border-default);
442 border-radius: 8px;
443 }
444
445 .intel-grav-stat__val {
446 font-size: 1.25rem;
447 font-weight: 700;
448 font-family: var(--font-mono);
449 background: var(--gradient-spectral);
450 -webkit-background-clip: text;
451 -webkit-text-fill-color: transparent;
452 background-clip: text;
453 }
454
455 .intel-grav-stat__lbl {
456 font-size: 0.68rem;
457 font-weight: 600;
458 letter-spacing: 0.08em;
459 text-transform: uppercase;
460 color: var(--text-muted);
461 }
462
463 // filter bar
464
465 .intel-filter-pill {
466 font-size: 0.7rem;
467 font-weight: 600;
468 letter-spacing: 0.04em;
469 border-radius: 20px;
470 border: 1px solid var(--border-default);
471 background: var(--bg-surface);
472 color: var(--text-secondary);
473 text-decoration: none;
474 transition: border-color 0.15s, color 0.15s;
475
476 &:hover { border-color: var(--color-purple); color: var(--color-purple); }
477
478 &--active {
479 border-color: var(--color-purple);
480 background: color-mix(in srgb, var(--color-purple) 15%, transparent);
481 color: var(--color-purple);
482 }
483 }
484
485 .intel-filter-top__label {
486 font-size: 0.68rem;
487 color: var(--text-muted);
488 font-weight: 600;
489 letter-spacing: 0.06em;
490 text-transform: uppercase;
491 }
492
493 // gravity rows
494
495 .intel-grav-row {
496 border-bottom: 1px solid var(--border-default);
497 &:last-child { border-bottom: none; }
498 }
499
500 .intel-grav-rank {
501 font-size: 0.7rem;
502 color: var(--text-muted);
503 font-variant-numeric: tabular-nums;
504 }
505
506 .intel-grav-addr {
507 font-size: 0.8rem;
508 font-weight: 600;
509 color: var(--color-accent-link);
510 text-decoration: none;
511 font-family: var(--font-mono);
512 white-space: nowrap;
513 overflow: hidden;
514 text-overflow: ellipsis;
515 &:hover { text-decoration: underline; }
516 }
517
518 .intel-grav-file {
519 font-size: 0.68rem;
520 color: var(--text-muted);
521 font-family: var(--font-mono);
522 white-space: nowrap;
523 overflow: hidden;
524 text-overflow: ellipsis;
525 }
526
527 .intel-grav-pct {
528 font-size: 0.7rem;
529 font-family: var(--font-mono);
530 color: var(--text-muted);
531 white-space: nowrap;
532 }
533
534 // gravity bar
535
536 .gravity-bar {
537 background: var(--bg-overlay);
538 border-radius: 3px;
539 }
540
541 .gravity-bar__fill {
542 background: var(--gradient-spectral);
543 border-radius: 3px;
544 transition: transform 0.3s ease;
545 }
546
547 // reach counts
548
549 .intel-grav-reach__direct {
550 font-size: 0.68rem;
551 font-family: var(--font-mono);
552 color: var(--color-accent-link);
553 }
554
555 .intel-grav-reach__trans {
556 font-size: 0.68rem;
557 font-family: var(--font-mono);
558 color: var(--text-muted);
559 }
560
561 // depth sparkline
562
563 .depth-sparkline {
564 font-family: var(--font-mono);
565 font-size: 0.75rem;
566 color: var(--color-purple);
567 letter-spacing: -0.04em;
568 white-space: nowrap;
569 }
570
571 // kind badge
572
573 .kind-badge {
574 font-size: 0.6rem;
575 font-weight: 700;
576 letter-spacing: 0.06em;
577 text-transform: uppercase;
578 border-radius: 4px;
579
580 &--function {
581 background: color-mix(in srgb, var(--color-accent) 18%, transparent);
582 color: var(--color-accent);
583 border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
584 }
585
586 &--method {
587 background: color-mix(in srgb, var(--color-purple) 18%, transparent);
588 color: var(--color-purple);
589 border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent);
590 }
591
592 &--class {
593 background: color-mix(in srgb, var(--color-success) 18%, transparent);
594 color: var(--color-success);
595 border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
596 }
597
598 &--async_method {
599 background: color-mix(in srgb, var(--color-warning) 18%, transparent);
600 color: var(--color-warning);
601 border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
602 }
603 }
604
605 // ── Gravity detail page — visual ──────────────────────────────────────────────
606
607 .intel-grav-detail-hd {
608 background: var(--bg-surface);
609 border: 1px solid var(--border-default);
610 border-radius: 8px;
611 }
612
613 // detail chips
614
615 .intel-grav-detail-chip {
616 background: var(--bg-surface);
617 border: 1px solid var(--border-default);
618 border-radius: 8px;
619 text-align: center;
620 }
621
622 .intel-grav-detail-chip__val {
623 font-size: 1.35rem;
624 font-weight: 700;
625 font-family: var(--font-mono);
626 color: var(--text-primary);
627
628 &--spectral {
629 background: var(--gradient-spectral);
630 -webkit-background-clip: text;
631 -webkit-text-fill-color: transparent;
632 background-clip: text;
633 }
634 }
635
636 .intel-grav-detail-chip__lbl {
637 font-size: 0.65rem;
638 font-weight: 600;
639 letter-spacing: 0.08em;
640 text-transform: uppercase;
641 color: var(--text-muted);
642 }
643
644 // depth distribution card
645
646 .intel-grav-dist-card {
647 background: var(--bg-surface);
648 border: 1px solid var(--border-default);
649 border-radius: 8px;
650 }
651
652 .intel-grav-dist-title {
653 font-size: 0.68rem;
654 font-weight: 700;
655 letter-spacing: 0.1em;
656 text-transform: uppercase;
657 color: var(--text-muted);
658 }
659
660 .intel-grav-dist-desc {
661 font-size: 0.75rem;
662 color: var(--text-muted);
663 line-height: 1.5;
664 }
665
666 .intel-grav-dist-bar-track {
667 background: var(--bg-overlay);
668 border-radius: 3px;
669 overflow: hidden;
670 }
671
672 .intel-grav-dist-bar-level {
673 font-size: 0.65rem;
674 color: var(--text-muted);
675 font-family: var(--font-mono);
676 font-weight: 600;
677 letter-spacing: 0.04em;
678 }
679
680 .intel-grav-dist-bar-count {
681 font-size: 0.68rem;
682 color: var(--text-secondary);
683 font-family: var(--font-mono);
684 }
685
686 // sparkline strip
687
688 .intel-grav-detail-spark__label {
689 font-size: 0.65rem;
690 font-weight: 700;
691 letter-spacing: 0.1em;
692 text-transform: uppercase;
693 color: var(--text-muted);
694 }
695
696 // ── Intel sub-nav ─────────────────────────────────────────────────────────────
697
698 .intel-subnav {
699 border-bottom: 1px solid var(--border-default);
700 }
701
702 .intel-subnav-link {
703 font-size: 0.75rem;
704 font-weight: 600;
705 color: var(--text-secondary);
706 text-decoration: none;
707 border-bottom: 2px solid transparent;
708 transition: color 0.15s, border-color 0.15s;
709
710 &:hover { color: var(--text-primary); }
711
712 &--active {
713 color: var(--text-primary);
714 border-bottom-color: var(--color-accent);
715 }
716 }
File History 1 commit
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 7 days ago