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