gabriel / musehub public
_symbols.scss
1,220 lines 38.9 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 157 days ago
1 // _symbols.scss — Symbol Intelligence pages (.sym2-* v2, .sym-* legacy)
2 // Design language: singularity — matches MCP hero, Intel Hub, Blame page.
3 // Gradient title · radial glow surfaces · heat bars · signal badges · kind chips
4
5 // ─────────────────────────────────────────────────────────────────────────────
6 // SHARED ATOMS (used on both list + detail)
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 .sym2-muted { color: var(--text-muted); font-size: 0.82rem; }
10
11 .sym2-addr {
12 font-family: var(--font-mono);
13 font-size: 0.8rem;
14 color: var(--color-accent-link);
15 word-break: break-all;
16 text-decoration: none;
17 &:hover { color: #79c0ff; text-decoration: underline; }
18 &--sm { font-size: 0.72rem; }
19 }
20
21 .sym2-commit-link {
22 font-family: var(--font-mono);
23 font-size: 0.78rem;
24 color: var(--text-muted);
25 text-decoration: none;
26 &:hover { color: var(--color-accent-link); }
27 }
28
29 // ─────────────────────────────────────────────────────────────────────────────
30 // KIND BADGE fn · class · sym
31 // Matches the blob outline + blame row kind badges.
32 // ─────────────────────────────────────────────────────────────────────────────
33
34 .sym2-kind {
35 display: inline-block;
36 font-family: var(--font-mono);
37 font-size: 0.65rem;
38 font-weight: 600;
39 padding: 1px 6px;
40 border-radius: 3px;
41 white-space: nowrap;
42 background: var(--bg-overlay);
43 border: 1px solid var(--border-default);
44 color: var(--text-muted);
45 letter-spacing: 0.02em;
46
47 &--fn { color: #d2a8ff; border-color: rgba(210,168,255,0.25); background: rgba(210,168,255,0.06); }
48 &--class { color: #ffa657; border-color: rgba(255,166,87,0.25); background: rgba(255,166,87,0.06); }
49 &--sym { color: var(--text-muted); }
50 }
51
52 // ─────────────────────────────────────────────────────────────────────────────
53 // SIGNAL BADGES 🔥 hotspot · 🧊 dead · 💥 blast
54 // Tooltip via title attr; matches blame page badges.
55 // ─────────────────────────────────────────────────────────────────────────────
56
57 .sym2-signals {
58 display: flex;
59 gap: 3px;
60 align-items: center;
61 flex-shrink: 0;
62 }
63
64 .sym2-signal {
65 display: inline-flex;
66 align-items: center;
67 gap: 3px;
68 font-size: 0.68rem;
69 font-weight: 600;
70 padding: 1px 6px;
71 border-radius: 3px;
72 white-space: nowrap;
73 cursor: default;
74 font-family: var(--font-mono);
75
76 &--hot { color: #ffa657; background: rgba(255,166,87,0.1); border: 1px solid rgba(255,166,87,0.3); }
77 &--dead { color: #79c0ff; background: rgba(121,192,255,0.08); border: 1px solid rgba(121,192,255,0.25); }
78 &--blast{ color: #ff7b72; background: rgba(255,123,114,0.1); border: 1px solid rgba(255,123,114,0.3); }
79 }
80
81 // ─────────────────────────────────────────────────────────────────────────────
82 // HEAT BAR proportional fill, same gradient as blame page
83 // ─────────────────────────────────────────────────────────────────────────────
84
85 .sym2-heat-track {
86 width: 72px;
87 height: 5px;
88 background: var(--bg-overlay);
89 border-radius: 3px;
90 overflow: hidden;
91 flex-shrink: 0;
92 }
93
94 .sym2-heat-fill {
95 height: 100%;
96 border-radius: 3px;
97 background: linear-gradient(90deg, #58a6ff 0%, #f0883e 60%, #ff7b72 100%);
98 min-width: 2px;
99 transition: width 0.2s ease;
100 }
101
102 // ─────────────────────────────────────────────────────────────────────────────
103 // HERO BANNER — gradient title + radial glow + stat pills
104 // Matches MCP hero aesthetic.
105 // ─────────────────────────────────────────────────────────────────────────────
106
107 .sym2-hero {
108 position: relative;
109 background: linear-gradient(135deg, #0d1117 0%, #0f1923 60%, #0d1117 100%);
110 border: 1px solid var(--border-default);
111 border-radius: var(--radius-lg);
112 overflow: hidden;
113 margin-bottom: 0.75rem;
114
115 // Radial glow overlay — same pattern as MCP hero
116 &::before {
117 content: '';
118 position: absolute;
119 inset: 0;
120 background:
121 radial-gradient(ellipse 55% 80% at 20% 50%, rgba(79,142,247,0.07) 0%, transparent 70%),
122 radial-gradient(ellipse 40% 60% at 80% 30%, rgba(188,140,255,0.05) 0%, transparent 65%);
123 pointer-events: none;
124 }
125 }
126
127 .sym2-hero-inner {
128 position: relative;
129 display: flex;
130 align-items: center;
131 justify-content: space-between;
132 gap: 2rem;
133 padding: 1.5rem 1.75rem;
134
135 @media (max-width: 768px) {
136 flex-direction: column;
137 align-items: flex-start;
138 gap: 1.25rem;
139 }
140 }
141
142 .sym2-hero-left { flex: 1; min-width: 0; }
143
144 .sym2-hero-eyebrow {
145 display: flex;
146 align-items: center;
147 gap: 6px;
148 font-size: 0.68rem;
149 font-weight: 600;
150 text-transform: uppercase;
151 letter-spacing: 0.09em;
152 color: var(--text-muted);
153 margin-bottom: 0.5rem;
154 font-family: var(--font-mono);
155 }
156
157 .sym2-hero-title {
158 font-size: clamp(1.3rem, 3vw, 1.8rem);
159 font-weight: 700;
160 line-height: 1.15;
161 margin: 0 0 0.4rem;
162 color: var(--text-primary);
163
164 .gradient-text {
165 background: var(--gradient-accent);
166 -webkit-background-clip: text;
167 -webkit-text-fill-color: transparent;
168 background-clip: text;
169 }
170 }
171
172 .sym2-hero-sub {
173 font-size: 0.8rem;
174 color: var(--text-secondary);
175 line-height: 1.5;
176 margin: 0;
177 }
178
179 .sym2-hero-meta {
180 margin-top: 0.6rem;
181 font-size: 0.72rem;
182 color: var(--text-muted);
183 font-family: var(--font-mono);
184
185 a { color: var(--color-accent-link); text-decoration: none; &:hover { text-decoration: underline; } }
186 }
187
188 // Stat pills — right column of hero (MCP stat pill pattern)
189 .sym2-hero-stats {
190 display: flex;
191 flex-direction: column;
192 gap: 0.35rem;
193 flex-shrink: 0;
194 min-width: 180px;
195 }
196
197 .sym2-stat-pill {
198 display: flex;
199 align-items: center;
200 justify-content: space-between;
201 gap: 0.75rem;
202 padding: 0.5rem 0.9rem;
203 background: var(--bg-surface);
204 border: 1px solid var(--border-default);
205 border-radius: 8px;
206 cursor: default;
207
208 &--hot .sym2-stat-label svg { color: #f0883e; }
209 &--hot .sym2-stat-num { color: #f0883e; }
210 &--dead .sym2-stat-label svg { color: #79c0ff; }
211 &--dead .sym2-stat-num { color: #79c0ff; }
212 &--blast .sym2-stat-label svg { color: #ff7b72; }
213 &--blast .sym2-stat-num { color: #ff7b72; }
214 &--health .sym2-stat-label svg { color: var(--color-success); }
215 &--health .sym2-stat-num { color: var(--color-success); }
216 }
217
218 .sym2-stat-num {
219 font-family: var(--font-mono);
220 font-size: 1.1rem;
221 font-weight: 700;
222 color: var(--text-primary);
223 line-height: 1;
224 text-align: right;
225 }
226
227 .sym2-stat-label {
228 display: flex;
229 align-items: center;
230 gap: 5px;
231 font-size: 0.68rem;
232 font-weight: 600;
233 color: var(--text-muted);
234 text-transform: uppercase;
235 letter-spacing: 0.07em;
236 }
237
238 // ─────────────────────────────────────────────────────────────────────────────
239 // LIST PAGE
240 // ─────────────────────────────────────────────────────────────────────────────
241
242 .sym2-list-page { display: flex; flex-direction: column; gap: 0; }
243
244 // Toolbar — search + filter pills
245 .sym2-toolbar-wrap {
246 background: var(--bg-surface);
247 border: 1px solid var(--border-default);
248 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
249 border-bottom: none;
250 overflow: hidden;
251 }
252
253 .sym2-toolbar {
254 display: flex;
255 align-items: center;
256 gap: 0.75rem;
257 padding: 0.6rem 1rem;
258 border-bottom: 1px solid var(--border-default);
259 background: var(--bg-overlay);
260 flex-wrap: wrap;
261 }
262
263 .sym2-search {
264 display: flex;
265 align-items: center;
266 gap: 0.4rem;
267 flex: 1;
268 min-width: 180px;
269 background: var(--bg-surface);
270 border: 1px solid var(--border-default);
271 border-radius: 6px;
272 padding: 0.3rem 0.6rem;
273 transition: border-color 0.15s;
274
275 &:focus-within { border-color: rgba(79,142,247,0.5); }
276 svg { color: var(--text-muted); flex-shrink: 0; }
277 input {
278 border: none;
279 background: transparent;
280 outline: none;
281 width: 100%;
282 font-size: 0.82rem;
283 color: var(--text-primary);
284 font-family: var(--font-mono);
285 &::placeholder { color: var(--text-muted); }
286 }
287 }
288
289 .sym2-filter-row {
290 display: flex;
291 align-items: center;
292 gap: 0.5rem;
293 padding: 0.5rem 1rem;
294 background: var(--bg-surface);
295 flex-wrap: wrap;
296 border-bottom: 1px solid var(--border-default);
297 }
298
299 .sym2-filter-label {
300 font-size: 0.68rem;
301 font-weight: 600;
302 text-transform: uppercase;
303 letter-spacing: 0.07em;
304 color: var(--text-muted);
305 font-family: var(--font-mono);
306 white-space: nowrap;
307 }
308
309 .sym2-filter-sep {
310 width: 1px;
311 height: 16px;
312 background: var(--border-default);
313 flex-shrink: 0;
314 }
315
316 .sym2-pill {
317 display: inline-flex;
318 align-items: center;
319 gap: 4px;
320 cursor: pointer;
321 text-decoration: none;
322 font-size: 0.72rem;
323 font-weight: 500;
324 padding: 2px 10px;
325 border-radius: 9999px;
326 border: 1px solid var(--border-default);
327 color: var(--text-muted);
328 background: transparent;
329 transition: all 0.12s;
330 font-family: var(--font-mono);
331
332 &:hover { color: var(--text-primary); border-color: var(--border-muted); }
333 &--active { color: var(--text-primary) !important; border-color: var(--border-muted) !important; background: var(--bg-overlay); }
334
335 // Op pills
336 &--add.sym2-pill--active { color: var(--color-success) !important; border-color: rgba(63,185,80,0.4) !important; background: rgba(63,185,80,0.08); }
337 &--mod.sym2-pill--active { color: var(--color-accent) !important; border-color: rgba(79,142,247,0.4) !important; background: rgba(79,142,247,0.08); }
338 &--del.sym2-pill--active { color: var(--color-danger) !important; border-color: rgba(248,81,73,0.4) !important; background: rgba(248,81,73,0.08); }
339
340 // Kind pills
341 &--fn.sym2-pill--active { color: #d2a8ff !important; border-color: rgba(210,168,255,0.4) !important; background: rgba(210,168,255,0.08); }
342 &--class.sym2-pill--active { color: #ffa657 !important; border-color: rgba(255,166,87,0.4) !important; background: rgba(255,166,87,0.08); }
343 }
344
345 // Main table card
346 .sym2-table-card {
347 background: var(--bg-surface);
348 border: 1px solid var(--border-default);
349 border-radius: 0 0 var(--radius-lg) var(--radius-lg);
350 overflow: hidden;
351 }
352
353 // Symbol table
354 .sym2-table {
355 width: 100%;
356 border-collapse: collapse;
357 font-size: 0.82rem;
358
359 thead tr {
360 background: var(--bg-overlay);
361 th {
362 padding: 0.4rem 0.85rem;
363 text-align: left;
364 font-size: 0.65rem;
365 font-weight: 700;
366 text-transform: uppercase;
367 letter-spacing: 0.07em;
368 color: var(--text-muted);
369 border-bottom: 1px solid var(--border-default);
370 font-family: var(--font-mono);
371 white-space: nowrap;
372
373 &.sym2-th-heat, &.sym2-th-signals {
374 text-align: center;
375 }
376 }
377 }
378
379 tbody tr {
380 border-bottom: 1px solid rgba(255,255,255,0.04);
381 transition: background 0.1s;
382 &:last-child { border-bottom: none; }
383 &:hover { background: rgba(255,255,255,0.025); }
384 td { padding: 0.45rem 0.85rem; vertical-align: middle; }
385 }
386 }
387
388 .sym2-td-kind { width: 52px; }
389 .sym2-td-addr { /* flex */ }
390 .sym2-td-op { width: 72px; }
391 .sym2-td-date { width: 110px; white-space: nowrap; color: var(--text-secondary); font-size: 0.75rem; }
392 .sym2-td-heat { width: 96px; }
393 .sym2-td-sig { width: 80px; }
394
395 .sym2-addr-cell {
396 display: flex;
397 flex-direction: column;
398 gap: 2px;
399 max-width: 520px;
400 }
401
402 .sym2-addr-file {
403 font-family: var(--font-mono);
404 font-size: 0.67rem;
405 color: var(--text-muted);
406 white-space: nowrap;
407 overflow: hidden;
408 text-overflow: ellipsis;
409 }
410
411 .sym2-heat-cell {
412 display: flex;
413 align-items: center;
414 gap: 0.4rem;
415 }
416
417 .sym2-heat-count {
418 font-family: var(--font-mono);
419 font-size: 0.68rem;
420 color: var(--text-muted);
421 width: 20px;
422 text-align: right;
423 flex-shrink: 0;
424 }
425
426 .sym2-sig-cell {
427 display: flex;
428 align-items: center;
429 justify-content: flex-start;
430 gap: 3px;
431 }
432
433 // Pagination
434 .sym2-pagination {
435 display: flex;
436 align-items: center;
437 justify-content: center;
438 gap: 1rem;
439 padding: 0.65rem 1rem;
440 border-top: 1px solid var(--border-default);
441 background: var(--bg-overlay);
442 }
443
444 .sym2-page-info { font-size: 0.75rem; color: var(--text-secondary); font-family: var(--font-mono); }
445
446 // Hidden rows (live JS kind filter)
447 .sym2-row--hidden { display: none; }
448
449 // ─────────────────────────────────────────────────────────────────────────────
450 // DETAIL PAGE
451 // ─────────────────────────────────────────────────────────────────────────────
452
453 // ─────────────────────────────────────────────────────────────────────────────
454 // DETAIL PAGE ATOMS
455 // ─────────────────────────────────────────────────────────────────────────────
456
457 .sym2-detail-page { display: flex; flex-direction: column; gap: 0.75rem; }
458
459 // Vitals strip — horizontal stat row inside hero
460 .sym2-vitals-strip {
461 display: flex;
462 align-items: center;
463 flex-wrap: wrap;
464 gap: 0.25rem 0.75rem;
465 margin-top: 0.6rem;
466 padding: 0.5rem 0.75rem;
467 background: rgba(255,255,255,0.03);
468 border: 1px solid var(--border-subtle);
469 border-radius: var(--radius-sm);
470 font-family: var(--font-mono);
471 font-size: 0.72rem;
472 color: var(--text-secondary);
473 }
474
475 .sym2-vitals-item {
476 display: flex;
477 align-items: center;
478 gap: 0.35rem;
479 white-space: nowrap;
480
481 strong { color: var(--text-primary); font-weight: 600; }
482 }
483
484 .sym2-vitals-sep {
485 color: var(--border-default);
486 user-select: none;
487 }
488
489 // 12-week velocity sparkbars
490 .sym2-spark-wrap {
491 margin-top: 0.75rem;
492 }
493
494 .sym2-spark-label {
495 font-family: var(--font-mono);
496 font-size: 0.62rem;
497 font-weight: 700;
498 text-transform: uppercase;
499 letter-spacing: 0.08em;
500 color: var(--text-muted);
501 margin-bottom: 0.35rem;
502 }
503
504 .sym2-spark {
505 display: flex;
506 align-items: flex-end;
507 gap: 3px;
508 height: 28px;
509 }
510
511 .sym2-spark-bar {
512 flex: 1;
513 border-radius: 2px 2px 0 0;
514 min-height: 2px;
515 background: linear-gradient(to top, #58a6ff, #bc8cff);
516 opacity: 0.85;
517 transition: opacity 0.1s;
518 &:hover { opacity: 1; }
519 &--zero { background: var(--bg-overlay); opacity: 0.4; }
520 }
521
522 // Op breakdown bar — segmented proportional strip
523 .sym2-op-bar-wrap {
524 margin-top: 0.65rem;
525 }
526
527 .sym2-op-bar-label {
528 font-family: var(--font-mono);
529 font-size: 0.62rem;
530 font-weight: 700;
531 text-transform: uppercase;
532 letter-spacing: 0.08em;
533 color: var(--text-muted);
534 margin-bottom: 0.3rem;
535 display: flex;
536 align-items: center;
537 gap: 0.75rem;
538
539 span {
540 display: flex;
541 align-items: center;
542 gap: 0.25rem;
543 font-weight: 400;
544 color: var(--text-muted);
545 }
546 }
547
548 .sym2-op-bar {
549 display: flex;
550 height: 6px;
551 border-radius: 3px;
552 overflow: hidden;
553 background: var(--bg-overlay);
554 gap: 1px;
555 }
556
557 .sym2-op-seg {
558 height: 100%;
559 min-width: 2px;
560 border-radius: 1px;
561 &--add { background: var(--color-success); }
562 &--modify { background: var(--color-accent); }
563 &--delete { background: var(--color-danger); }
564 &--move { background: var(--color-warning); }
565 }
566
567 // Coupling tightness % badge
568 .sym2-coupling-pct {
569 font-family: var(--font-mono);
570 font-size: 0.62rem;
571 font-weight: 600;
572 color: var(--text-muted);
573 background: var(--bg-overlay);
574 border: 1px solid var(--border-subtle);
575 padding: 0px 5px;
576 border-radius: 3px;
577 white-space: nowrap;
578 flex-shrink: 0;
579 }
580
581 // New-version marker on timeline entries
582 .sym2-new-version {
583 display: inline-flex;
584 align-items: center;
585 gap: 3px;
586 font-family: var(--font-mono);
587 font-size: 0.63rem;
588 font-weight: 600;
589 color: var(--color-accent);
590 background: rgba(79,142,247,0.1);
591 border: 1px solid rgba(79,142,247,0.25);
592 padding: 0px 5px;
593 border-radius: 3px;
594 white-space: nowrap;
595 }
596
597 // Vitals sidebar card
598 .sym2-vitals-card {
599 .sym2-vitals-row {
600 display: flex;
601 align-items: baseline;
602 justify-content: space-between;
603 padding: 0.3rem 0;
604 border-bottom: 1px solid rgba(255,255,255,0.04);
605 font-size: 0.75rem;
606 gap: 0.5rem;
607
608 &:last-child { border-bottom: none; }
609 }
610
611 .sym2-vitals-key {
612 font-size: 0.65rem;
613 font-weight: 700;
614 text-transform: uppercase;
615 letter-spacing: 0.06em;
616 color: var(--text-muted);
617 font-family: var(--font-mono);
618 white-space: nowrap;
619 }
620
621 .sym2-vitals-val {
622 font-family: var(--font-mono);
623 font-size: 0.75rem;
624 font-weight: 600;
625 color: var(--text-primary);
626 text-align: right;
627 }
628
629 .sym2-op-mini {
630 display: flex;
631 gap: 0.4rem;
632 justify-content: flex-end;
633 flex-wrap: wrap;
634
635 span {
636 font-size: 0.65rem;
637 font-family: var(--font-mono);
638 padding: 1px 5px;
639 border-radius: 3px;
640 white-space: nowrap;
641 }
642
643 .op-add { color: var(--color-success); background: rgba(63,185,80,0.1); border: 1px solid rgba(63,185,80,0.25); }
644 .op-modify { color: var(--color-accent); background: rgba(79,142,247,0.1); border: 1px solid rgba(79,142,247,0.25); }
645 .op-delete { color: var(--color-danger); background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.25); }
646 .op-move { color: var(--color-warning); background: rgba(210,153,34,0.1); border: 1px solid rgba(210,153,34,0.25); }
647 }
648 }
649
650 // Hero for detail page — bigger symbol name with gradient
651 .sym2-detail-hero { margin-bottom: 0; }
652
653 .sym2-hero-addr-file {
654 font-family: var(--font-mono);
655 font-size: 0.8rem;
656 color: var(--text-muted);
657 margin-bottom: 0.3rem;
658 word-break: break-all;
659 }
660
661 .sym2-hero-addr-name {
662 font-family: var(--font-mono);
663 font-size: clamp(1.1rem, 2.5vw, 1.5rem);
664 font-weight: 700;
665 background: var(--gradient-accent);
666 -webkit-background-clip: text;
667 -webkit-text-fill-color: transparent;
668 background-clip: text;
669 word-break: break-all;
670 line-height: 1.2;
671 }
672
673 .sym2-hero-badges {
674 display: flex;
675 align-items: center;
676 gap: 0.4rem;
677 flex-wrap: wrap;
678 margin-top: 0.65rem;
679 }
680
681 // Signal callout block — amber for hotspot, ice for dead, red for blast
682 .sym2-callout-wrap {
683 display: flex;
684 flex-direction: column;
685 gap: 0.4rem;
686 margin-bottom: 0.75rem;
687 }
688
689 .sym2-callout {
690 display: flex;
691 align-items: flex-start;
692 gap: 0.6rem;
693 padding: 0.75rem 1rem;
694 border-radius: var(--radius-base);
695 font-size: 0.8rem;
696 line-height: 1.5;
697
698 &--hot {
699 background: rgba(255,166,87,0.06);
700 border: 1px solid rgba(255,166,87,0.3);
701 color: #ffd09e;
702 }
703 &--dead {
704 background: rgba(121,192,255,0.05);
705 border: 1px solid rgba(121,192,255,0.25);
706 color: #a5d6ff;
707 }
708 &--blast {
709 background: rgba(255,123,114,0.06);
710 border: 1px solid rgba(255,123,114,0.3);
711 color: #ffb3ae;
712 }
713 }
714
715 .sym2-callout-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
716 .sym2-callout-body { flex: 1; }
717 .sym2-callout-title {
718 font-weight: 700;
719 font-family: var(--font-mono);
720 font-size: 0.72rem;
721 text-transform: uppercase;
722 letter-spacing: 0.07em;
723 margin-bottom: 0.2rem;
724 }
725
726 // Detail grid: timeline left + sidebar right
727 .sym2-detail-grid {
728 display: grid;
729 grid-template-columns: 1fr 300px;
730 gap: 0.75rem;
731 align-items: start;
732 @media (max-width: 900px) { grid-template-columns: 1fr; }
733 }
734
735 .sym2-detail-sidebar { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; overflow: hidden; }
736
737 .sym2-section {
738 background: var(--bg-surface);
739 border: 1px solid var(--border-default);
740 border-radius: var(--radius-base);
741 padding: 1rem 1.1rem;
742 }
743
744 .sym2-section-title {
745 display: flex;
746 align-items: center;
747 gap: 0.4rem;
748 font-size: 0.7rem;
749 font-weight: 700;
750 text-transform: uppercase;
751 letter-spacing: 0.07em;
752 color: var(--text-muted);
753 margin: 0 0 0.75rem;
754 font-family: var(--font-mono);
755 svg { color: var(--text-muted); flex-shrink: 0; }
756 }
757
758 .sym2-section-count {
759 margin-left: 0.35rem;
760 font-size: 0.68rem;
761 background: var(--bg-overlay);
762 border: 1px solid var(--border-default);
763 padding: 0px 5px;
764 border-radius: 9999px;
765 color: var(--text-muted);
766 }
767
768 .sym2-section-sub { font-size: 0.72rem; color: var(--text-muted); margin: -0.4rem 0 0.65rem; }
769
770 .sym2-section-empty { margin: 0; }
771
772 .sym2-hash {
773 font-family: var(--font-mono);
774 font-size: 0.68rem;
775 color: var(--text-muted);
776 }
777
778 // ── Provenance timeline (.sym2-tl-*) ──────────────────────────────────────
779 .sym2-tl {
780 display: flex;
781 flex-direction: column;
782 gap: 0;
783 margin-top: 0.5rem;
784 }
785
786 .sym2-tl--nested { margin-top: 0; }
787
788 // ── Version epoch — bold section break on body change ──────────────────
789 .sym2-tl-epoch {
790 display: flex;
791 align-items: center;
792 gap: 0.5rem;
793 margin: 0.6rem 0 0.1rem 0;
794 padding: 0.3rem 0.5rem;
795 background: rgba(88, 166, 255, 0.06);
796 border: 1px solid rgba(88, 166, 255, 0.18);
797 border-radius: 5px;
798
799 &::after {
800 content: '';
801 flex: 1;
802 height: 1px;
803 background: linear-gradient(to right, rgba(88,166,255,0.25), transparent);
804 }
805 }
806
807 .sym2-tl-epoch-label {
808 font-family: var(--font-mono);
809 font-size: 0.65rem;
810 font-weight: 800;
811 letter-spacing: 0.08em;
812 color: var(--color-accent);
813 flex-shrink: 0;
814 text-transform: uppercase;
815 }
816
817 .sym2-tl-epoch-hash {
818 font-family: var(--font-mono);
819 font-size: 0.6rem;
820 color: var(--text-muted);
821 opacity: 0.6;
822 flex-shrink: 0;
823 }
824
825 // ── Time gap divider ────────────────────────────────────────────────────
826 .sym2-tl-gap {
827 font-family: var(--font-mono);
828 font-size: 0.6rem;
829 color: var(--text-muted);
830 text-align: center;
831 padding: 0.15rem 0;
832 opacity: 0.45;
833 letter-spacing: 0.04em;
834 }
835
836 // ── One entry ───────────────────────────────────────────────────────────
837 .sym2-tl-entry {
838 display: flex;
839 gap: 0;
840 }
841
842 // Gutter: dot + vertical connector line
843 .sym2-tl-gutter {
844 display: flex;
845 flex-direction: column;
846 align-items: center;
847 width: 22px;
848 flex-shrink: 0;
849 }
850
851 .sym2-tl-dot {
852 width: 10px;
853 height: 10px;
854 border-radius: 50%;
855 border: 2px solid var(--border-default);
856 background: var(--bg-surface);
857 flex-shrink: 0;
858 position: relative;
859 z-index: 1;
860 margin-top: 5px;
861 box-shadow: 0 0 0 2px var(--bg-surface);
862
863 &--add { background: var(--color-success); border-color: var(--color-success); box-shadow: 0 0 6px rgba(63,185,80,0.5), 0 0 0 2px var(--bg-surface); }
864 &--modify { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 6px rgba(79,142,247,0.5), 0 0 0 2px var(--bg-surface); }
865 &--delete { background: var(--color-danger); border-color: var(--color-danger); box-shadow: 0 0 6px rgba(248,81,73,0.5), 0 0 0 2px var(--bg-surface); }
866 &--move { background: var(--color-warning); border-color: var(--color-warning); box-shadow: 0 0 6px rgba(210,153,34,0.5), 0 0 0 2px var(--bg-surface); }
867 }
868
869 .sym2-tl-line {
870 width: 1px;
871 flex: 1;
872 min-height: 4px;
873 background: var(--border-default);
874 opacity: 0.3;
875 margin-top: 1px;
876 }
877
878 // Entry content — tight 2-line layout
879 .sym2-tl-content {
880 flex: 1;
881 min-width: 0;
882 padding: 0.05rem 0 0.45rem 0.55rem;
883 }
884
885 // Header line: op · hash · sep · time · sep · author · branch · flag
886 .sym2-tl-header {
887 display: flex;
888 align-items: center;
889 gap: 0.3rem;
890 flex-wrap: wrap;
891 font-size: 0.72rem;
892 margin-bottom: 0.1rem;
893 }
894
895 .sym2-tl-sep {
896 color: var(--text-muted);
897 opacity: 0.4;
898 font-size: 0.65rem;
899 }
900
901 .sym2-tl-time {
902 font-family: var(--font-mono);
903 color: var(--text-muted);
904 white-space: nowrap;
905 }
906
907 .sym2-tl-author {
908 font-family: var(--font-mono);
909 color: var(--text-secondary);
910 font-size: 0.68rem;
911 }
912
913 .sym2-tl-branch {
914 font-family: var(--font-mono);
915 font-size: 0.6rem;
916 color: var(--color-accent);
917 background: rgba(88, 166, 255, 0.1);
918 border: 1px solid rgba(88, 166, 255, 0.2);
919 border-radius: 3px;
920 padding: 0 4px;
921 white-space: nowrap;
922 }
923
924 // Commit message — the WHY — most prominent text in the row
925 .sym2-tl-message {
926 font-size: 0.79rem;
927 color: var(--text-primary);
928 line-height: 1.3;
929 white-space: nowrap;
930 overflow: hidden;
931 text-overflow: ellipsis;
932 }
933
934 .sym2-tl-hash {
935 font-size: 0.6rem;
936 opacity: 0.5;
937 }
938
939 // Collapse older entries
940 details.sym2-history-more {
941 margin-top: 0.25rem;
942
943 summary.sym2-history-more-summary {
944 list-style: none;
945 cursor: pointer;
946 font-size: 0.72rem;
947 color: var(--color-accent-link);
948 padding: 0.3rem 0 0.3rem 1.6rem;
949 user-select: none;
950
951 &::-webkit-details-marker { display: none; }
952 &:hover { color: #79c0ff; }
953 }
954
955 &[open] summary.sym2-history-more-summary { color: var(--text-muted); }
956 }
957
958 // Blast radius list with heat bars
959 .sym2-blast-list {
960 list-style: none;
961 padding: 0;
962 margin: 0;
963 display: flex;
964 flex-direction: column;
965 gap: 0.3rem;
966 }
967
968 .sym2-blast-row {
969 display: flex;
970 flex-direction: column;
971 gap: 3px;
972 padding: 0.3rem 0.4rem;
973 border-radius: 4px;
974 transition: background 0.1s;
975 &:hover { background: rgba(255,255,255,0.04); }
976 }
977
978 .sym2-blast-row-top {
979 display: flex;
980 align-items: center;
981 justify-content: space-between;
982 gap: 0.4rem;
983 }
984
985 .sym2-blast-count {
986 flex-shrink: 0;
987 font-size: 0.68rem;
988 font-weight: 700;
989 font-family: var(--font-mono);
990 color: var(--text-muted);
991 background: var(--bg-overlay);
992 padding: 0px 6px;
993 border-radius: 9999px;
994 border: 1px solid var(--border-default);
995 white-space: nowrap;
996 }
997
998 // Clone list
999 .sym2-clone-list {
1000 list-style: none;
1001 padding: 0;
1002 margin: 0;
1003 display: flex;
1004 flex-direction: column;
1005 gap: 0.2rem;
1006
1007 li {
1008 padding: 0.2rem 0.4rem;
1009 border-radius: 4px;
1010 transition: background 0.1s;
1011 &:hover { background: rgba(255,255,255,0.04); }
1012 }
1013 }
1014
1015 // Detail page hero variants
1016 .sym2-hero--detail {
1017 .sym2-hero-inner { align-items: flex-start; }
1018 }
1019
1020 .sym2-hero-title--detail {
1021 font-size: clamp(1.2rem, 3vw, 1.6rem);
1022 .gradient-text {
1023 font-family: var(--font-mono);
1024 word-break: break-all;
1025 }
1026 }
1027
1028 // Callout group container (wraps multiple callouts)
1029 .sym2-callout-group {
1030 display: flex;
1031 flex-direction: column;
1032 gap: 0.4rem;
1033 margin-bottom: 0.75rem;
1034 }
1035
1036 // Count badge in section titles
1037 .sym2-count-badge {
1038 margin-left: 0.35rem;
1039 font-size: 0.65rem;
1040 background: var(--bg-overlay);
1041 border: 1px solid var(--border-default);
1042 padding: 0px 5px;
1043 border-radius: 9999px;
1044 color: var(--text-muted);
1045 font-family: var(--font-mono);
1046 }
1047
1048 // History expand toggle
1049 .sym2-history-more-toggle {
1050 list-style: none;
1051 cursor: pointer;
1052 font-size: 0.72rem;
1053 color: var(--color-accent-link);
1054 padding: 0.4rem 0 0.4rem 0;
1055 user-select: none;
1056
1057 &::-webkit-details-marker { display: none; }
1058 &:hover { color: #79c0ff; }
1059 }
1060
1061 details.sym2-history-more[open] .sym2-history-more-toggle { color: var(--text-muted); }
1062
1063 // Blast row inner elements
1064 .sym2-blast-addr-wrap {
1065 min-width: 0;
1066 flex: 1;
1067 overflow: hidden;
1068 }
1069
1070 .sym2-blast-addr {
1071 font-family: var(--font-mono);
1072 font-size: 0.72rem;
1073 color: var(--color-accent-link);
1074 text-decoration: none;
1075 display: flex;
1076 flex-direction: column;
1077 gap: 1px;
1078 min-width: 0;
1079 overflow: hidden;
1080 &:hover { color: #79c0ff; }
1081 }
1082
1083 .sym2-blast-file {
1084 font-size: 0.63rem;
1085 color: var(--text-muted);
1086 white-space: nowrap;
1087 overflow: hidden;
1088 text-overflow: ellipsis;
1089 }
1090
1091 .sym2-blast-name {
1092 font-weight: 600;
1093 color: var(--color-accent-link);
1094 white-space: nowrap;
1095 overflow: hidden;
1096 text-overflow: ellipsis;
1097 }
1098
1099 .sym2-blast-heat {
1100 display: flex;
1101 align-items: center;
1102 gap: 0.4rem;
1103 margin-top: 3px;
1104 }
1105
1106 // ─────────────────────────────────────────────────────────────────────────────
1107 // INDEX NOT BUILT STATE
1108 // ─────────────────────────────────────────────────────────────────────────────
1109
1110 .sym2-no-index {
1111 display: flex;
1112 align-items: center;
1113 gap: 0.75rem;
1114 padding: 1.25rem 1.5rem;
1115 background: rgba(210,153,34,0.05);
1116 border: 1px solid rgba(210,153,34,0.2);
1117 border-radius: var(--radius-lg);
1118 font-size: 0.82rem;
1119 color: var(--color-warning);
1120 margin-bottom: 0.75rem;
1121 svg { flex-shrink: 0; color: var(--color-warning); }
1122 }
1123
1124 // ─────────────────────────────────────────────────────────────────────────────
1125 // LEGACY .sym-* — kept intact so any pages not yet migrated still render
1126 // ─────────────────────────────────────────────────────────────────────────────
1127
1128 .sym-muted { color: var(--text-muted); font-size: 0.82rem; }
1129
1130 .sym-addr {
1131 font-family: var(--font-mono);
1132 font-size: 0.8rem;
1133 color: var(--color-accent-link);
1134 word-break: break-all;
1135 text-decoration: none;
1136 &:hover { color: #79c0ff; text-decoration: underline; }
1137 &.sym-addr--sm { font-size: 0.72rem; }
1138 }
1139
1140 .sym-commit-link {
1141 font-family: var(--font-mono);
1142 font-size: 0.78rem;
1143 color: var(--text-muted);
1144 text-decoration: none;
1145 &:hover { color: var(--color-accent-link); }
1146 }
1147
1148 .sym-count-badge { margin-left: 0.4rem; }
1149
1150 .sym-banner {
1151 display: flex;
1152 align-items: center;
1153 gap: 0.5rem;
1154 padding: 0.55rem 1rem;
1155 border-radius: var(--radius-base);
1156 font-size: 0.8rem;
1157 margin-bottom: 0.75rem;
1158 svg { flex-shrink: 0; }
1159 &--warn { background: rgba(210,153,34,0.08); color: var(--color-warning); border: 1px solid rgba(210,153,34,0.25); }
1160 &--info { background: rgba(88,166,255,0.05); color: var(--text-secondary); border: 1px solid rgba(88,166,255,0.15); }
1161 }
1162
1163 .sym-stat-strip {
1164 display: flex;
1165 gap: 0;
1166 background: var(--bg-surface);
1167 border: 1px solid var(--border-default);
1168 border-radius: var(--radius-base);
1169 padding: 1rem 1.5rem;
1170 margin-bottom: 0.75rem;
1171 flex-wrap: wrap;
1172 position: relative;
1173 overflow: hidden;
1174 &::before {
1175 content: '';
1176 position: absolute;
1177 inset: 0;
1178 background: radial-gradient(ellipse 60% 80% at 50% -20%, rgba(79,142,247,0.04) 0%, transparent 70%);
1179 pointer-events: none;
1180 }
1181 }
1182
1183 .sym-stat { display: flex; flex-direction: column; align-items: center; padding: 0 1.5rem; &:first-child { padding-left: 0; } }
1184 .sym-stat-divider { width: 1px; background: var(--border-default); align-self: stretch; }
1185 .sym-stat-num { font-size: 1.55rem; font-weight: 700; font-family: var(--font-mono); line-height: 1; color: var(--text-primary); &--add { color: var(--color-success); } &--mod { color: var(--color-accent); } &--del { color: var(--color-danger); } }
1186 .sym-stat-lbl { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 0.3rem; white-space: nowrap; }
1187
1188 .sym-list-page { display: flex; flex-direction: column; gap: 0; }
1189 .sym-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-base); overflow: hidden; }
1190 .sym-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-default); background: var(--bg-overlay); flex-wrap: wrap; }
1191 .sym-search { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 200px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 6px; padding: 0.3rem 0.6rem; transition: border-color 0.15s; &:focus-within { border-color: rgba(79,142,247,0.5); } svg { color: var(--text-muted); flex-shrink: 0; } input { border: none; background: transparent; outline: none; width: 100%; font-size: 0.82rem; color: var(--text-primary); &::placeholder { color: var(--text-muted); } } }
1192 .sym-kind-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; }
1193 .sym-kind-pill { cursor: pointer; text-decoration: none; font-size: 0.72rem; font-weight: 500; padding: 2px 10px; border-radius: 9999px; border: 1px solid var(--border-default); color: var(--text-muted); background: transparent; transition: all 0.12s; &:hover { color: var(--text-primary); border-color: var(--border-muted); } &--active { color: var(--text-primary) !important; border-color: var(--border-muted) !important; background: var(--bg-overlay); } &--add.sym-kind-pill--active { color: var(--color-success) !important; border-color: rgba(63,185,80,0.4) !important; background: rgba(63,185,80,0.08); } &--mod.sym-kind-pill--active { color: var(--color-accent) !important; border-color: rgba(79,142,247,0.4) !important; background: rgba(79,142,247,0.08); } &--del.sym-kind-pill--active { color: var(--color-danger) !important; border-color: rgba(248,81,73,0.4) !important; background: rgba(248,81,73,0.08); } }
1194 .sym-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; thead tr { background: var(--bg-overlay); th { padding: 0.45rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border-default); } } tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.1s; &:last-child { border-bottom: none; } &:hover { background: rgba(255,255,255,0.025); } td { padding: 0.5rem 1rem; vertical-align: middle; } } }
1195 .sym-addr-cell { max-width: 60%; }
1196 .sym-date-cell, .sym-hist-cell { white-space: nowrap; color: var(--text-secondary); font-size: 0.78rem; }
1197 .sym-hist-count { font-weight: 600; font-family: var(--font-mono); }
1198 .sym-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.65rem 1rem; border-top: 1px solid var(--border-default); background: var(--bg-overlay); }
1199 .sym-page-info { font-size: 0.78rem; color: var(--text-secondary); }
1200 .sym-detail-page { display: flex; flex-direction: column; gap: 0.75rem; }
1201 .sym-detail-header { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-base); padding: 1.1rem 1.5rem; position: relative; overflow: hidden; &::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 100% at 0% 50%, rgba(79,142,247,0.04) 0%, transparent 70%); pointer-events: none; } }
1202 .sym-detail-addr { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; code { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-primary); word-break: break-all; } }
1203 .sym-detail-meta { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); }
1204 .sym-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 0.75rem; align-items: start; @media (max-width: 900px) { grid-template-columns: 1fr; } }
1205 .sym-detail-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }
1206 .sym-section { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-base); padding: 1rem 1.1rem; }
1207 .sym-section-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 0.75rem; svg { color: var(--text-muted); flex-shrink: 0; } }
1208 .sym-section-sub { font-size: 0.75rem; color: var(--text-muted); margin: -0.4rem 0 0.65rem; }
1209 .sym-section-empty { margin: 0; }
1210 .sym-timeline { display: flex; flex-direction: column; position: relative; gap: 0; &::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--border-default) 0%, transparent 100%); } }
1211 .sym-timeline-entry { display: flex; gap: 0.75rem; padding: 0.45rem 0; position: relative; }
1212 .sym-timeline-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-default); background: var(--bg-surface); flex-shrink: 0; margin-top: 3px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg-surface); &--add { background: var(--color-success); border-color: var(--color-success); box-shadow: 0 0 6px rgba(63,185,80,0.4), 0 0 0 3px var(--bg-surface); } &--modify { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 6px rgba(79,142,247,0.4), 0 0 0 3px var(--bg-surface); } &--delete { background: var(--color-danger); border-color: var(--color-danger); box-shadow: 0 0 6px rgba(248,81,73,0.4), 0 0 0 3px var(--bg-surface); } &--move { background: var(--color-warning); border-color: var(--color-warning); box-shadow: 0 0 6px rgba(210,153,34,0.4), 0 0 0 3px var(--bg-surface); } }
1213 .sym-timeline-body { flex: 1; min-width: 0; }
1214 .sym-timeline-top { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.78rem; }
1215 .sym-timeline-hash { margin-top: 0.15rem; font-size: 0.7rem; color: var(--text-muted); }
1216 .sym-hash { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
1217 .sym-impact-list, .sym-clone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
1218 .sym-impact-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0.4rem; border-radius: 4px; transition: background 0.1s; &:hover { background: rgba(255,255,255,0.04); } }
1219 .sym-impact-count { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono); color: var(--text-muted); background: var(--bg-overlay); padding: 0px 6px; border-radius: 9999px; border: 1px solid var(--border-default); }
1220 .sym-clone-list li { padding: 0.2rem 0.4rem; border-radius: 4px; transition: background 0.1s; &:hover { background: rgba(255,255,255,0.04); } }
File History 1 commit
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ 157 days ago