gabriel / musehub public
_blob.scss
521 lines 17.8 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: Blob viewer (.blob2-* prefix)
3 // File: src/scss/components/_blob.scss
4 //
5 // Visual rules only — colors, typography, backgrounds, borders, animations.
6 // Structural layout lives in pages/_blob.scss.
7 // Covers: blob.html, blame.html
8 // ─────────────────────────────────────────────────────────────────────────────
9
10 // ── Header bar ────────────────────────────────────────────────────────────────
11
12 .blob2-header {
13 background: var(--bg-surface);
14 border: 1px solid var(--border-default);
15 border-bottom: none;
16 }
17
18 .blob2-filename {
19 font-family: var(--font-mono);
20 font-size: 13px;
21 color: var(--text-primary);
22 font-weight: 500;
23 }
24
25 .blob2-lang-badge {
26 font-size: 10px;
27 font-weight: 600;
28 letter-spacing: 0.05em;
29 text-transform: uppercase;
30 background: var(--bg-elevated);
31 color: var(--text-muted);
32 border: 1px solid var(--border-subtle);
33 border-radius: var(--radius-sm);
34 line-height: 18px;
35 }
36
37 .blob2-meta-pill {
38 font-size: 11px;
39 color: var(--text-muted);
40 background: var(--bg-elevated);
41 border-radius: var(--radius-full);
42 }
43
44 // ── Language colour dots ──────────────────────────────────────────────────────
45
46 .blob2-lang-dot {
47 border-radius: 50%;
48 background: var(--text-muted);
49 flex-shrink: 0;
50 }
51
52 .blob2-ld-py { background: #3572A5; }
53 .blob2-ld-ts { background: #2b7489; }
54 .blob2-ld-js { background: #f1e05a; }
55 .blob2-ld-rs { background: #dea584; }
56 .blob2-ld-go { background: #00ADD8; }
57 .blob2-ld-md { background: #6f42c1; }
58 .blob2-ld-toml,
59 .blob2-ld-yaml,
60 .blob2-ld-yml { background: #cb171e; }
61 .blob2-ld-json { background: #292929; border: 1px solid var(--border-subtle); }
62 .blob2-ld-css { background: #563d7c; }
63 .blob2-ld-scss { background: #c6538c; }
64 .blob2-ld-html { background: #e34c26; }
65 .blob2-ld-sh,
66 .blob2-ld-bash { background: #89e051; }
67 .blob2-ld-mid,
68 .blob2-ld-midi { background: var(--color-accent); }
69
70 // ── Last-modified bar ─────────────────────────────────────────────────────────
71
72 .blob2-lastmod {
73 font-size: 12px;
74 background: var(--bg-elevated);
75 border: 1px solid var(--border-subtle);
76 border-bottom: none;
77 }
78
79 .blob2-lastmod-sha {
80 font-family: var(--font-mono);
81 font-size: 11px;
82 color: var(--color-accent-link);
83 text-decoration: none;
84 background: var(--bg-surface);
85 border: 1px solid var(--border-subtle);
86 border-radius: var(--radius-sm);
87 &:hover { border-color: var(--color-accent); }
88 }
89
90 .blob2-lastmod-msg { color: var(--text-secondary); }
91 .blob2-lastmod-author { color: var(--text-muted); font-size: 11px; }
92 .blob2-lastmod-time { color: var(--text-muted); font-size: 11px; }
93
94 // ── Content area ──────────────────────────────────────────────────────────────
95
96 .blob2-content {
97 border: 1px solid var(--border-default);
98 border-radius: 0 0 var(--radius-md) var(--radius-md);
99 overflow: hidden;
100 background: var(--bg-surface);
101 }
102
103 // ── Code viewer ───────────────────────────────────────────────────────────────
104
105 .blob2-line-table {
106 font-size: 13px;
107 font-family: var(--font-mono);
108 tab-size: 4;
109 }
110
111 .blob2-line {
112 scroll-margin-top: calc(var(--sticky-offset, 80px) + 16px);
113 &:target,
114 &:hover { background: var(--bg-hover); }
115 }
116
117 .blob2-ln {
118 color: var(--text-muted);
119 font-size: 11px;
120 user-select: none;
121 border-right: 1px solid var(--border-subtle);
122 }
123
124 .blob2-ln-link {
125 color: inherit;
126 text-decoration: none;
127 &:hover { color: var(--text-primary); }
128 }
129
130 .blob2-code {
131 color: var(--text-primary);
132 line-height: 1.6;
133 }
134
135 .blob2-empty {
136 color: var(--text-muted);
137 font-size: 13px;
138 }
139
140 // ── MIDI banner ───────────────────────────────────────────────────────────────
141
142 .blob2-midi-banner {
143 background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
144 }
145
146 .blob2-midi-filename { font-size: 15px; font-weight: 600; color: var(--text-primary); }
147 .blob2-midi-sub { font-size: 12px; color: var(--text-muted); }
148
149 // ── Binary / 404 states ───────────────────────────────────────────────────────
150
151 .blob2-binary-notice {
152 color: var(--text-muted);
153 font-size: 13px;
154 }
155
156 .blob2-not-found {
157 color: var(--text-muted);
158 h2 { color: var(--text-secondary); font-size: 18px; }
159 p { font-size: 13px; }
160 code {
161 font-family: var(--font-mono);
162 background: var(--bg-elevated);
163 border-radius: var(--radius-sm);
164 }
165 }
166
167 // ── Provenance pill ───────────────────────────────────────────────────────────
168
169 .blob2-prov-pill {
170 font-size: 10px;
171 font-weight: 700;
172 letter-spacing: 0.04em;
173 border-radius: var(--radius-full);
174 border: 1px solid;
175 white-space: nowrap;
176 flex-shrink: 0;
177 text-transform: uppercase;
178
179 &--human {
180 color: var(--color-success);
181 border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
182 background: color-mix(in srgb, var(--color-success) 8%, transparent);
183 }
184 &--agent {
185 color: var(--color-accent);
186 border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
187 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
188 }
189 }
190
191 // ── Sem-ver bump badge ────────────────────────────────────────────────────────
192
193 .blob2-bump-badge {
194 font-size: 9px;
195 font-weight: 700;
196 letter-spacing: 0.06em;
197 text-transform: uppercase;
198 border-radius: var(--radius-sm);
199 border: 1px solid;
200 white-space: nowrap;
201 flex-shrink: 0;
202
203 &--patch { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-overlay); }
204 &--minor { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
205 &--major { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
206 &--breaking{ color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
207 }
208
209 // ── Line selection ────────────────────────────────────────────────────────────
210
211 .blob2-line--selected {
212 background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
213 .blob2-ln { color: var(--color-accent); }
214 }
215
216 // ── Permalink float ───────────────────────────────────────────────────────────
217
218 .blob2-permalink-btn {
219 background: var(--bg-surface);
220 border: 1px solid var(--border-default);
221 color: var(--text-primary);
222 font-size: 11px;
223 font-weight: 600;
224 cursor: pointer;
225 box-shadow: var(--shadow-md);
226 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
227 border-radius: var(--radius-full);
228 &:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
229 }
230
231 .blob2-outline-toggle { font-size: 11px; }
232
233 // ── Outline panel ─────────────────────────────────────────────────────────────
234
235 .blob2-panel {
236 background: var(--bg-surface);
237 border: 1px solid var(--border-default);
238 border-radius: var(--radius-base);
239 }
240
241 .blob2-panel-tabs { border-bottom: 1px solid var(--border-default); }
242
243 .blob2-panel-tab {
244 font-size: 11px;
245 font-weight: 600;
246 color: var(--text-muted);
247 background: none;
248 border: none;
249 cursor: pointer;
250 border-bottom: 2px solid transparent;
251 transition: color var(--transition-fast), border-color var(--transition-fast);
252
253 &:hover { color: var(--text-primary); }
254 &--active { color: var(--text-primary); border-bottom-color: var(--color-accent); }
255 }
256
257 .blob2-panel-empty {
258 font-size: 12px;
259 color: var(--text-muted);
260 }
261
262 // ── Outline rows ──────────────────────────────────────────────────────────────
263
264 .blob2-outline-row {
265 font-size: 11px;
266 &:hover { background: var(--bg-hover); }
267 }
268
269 .blob2-outline-op {
270 font-size: 9px;
271 font-weight: 700;
272 text-transform: uppercase;
273 letter-spacing: 0.05em;
274 border-radius: var(--radius-sm);
275 border: 1px solid;
276
277 &--add { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: color-mix(in srgb, var(--color-success) 8%, transparent); }
278 &--modify { color: var(--color-accent-link); border-color: color-mix(in srgb, var(--color-accent-link) 35%, transparent); background: color-mix(in srgb, var(--color-accent-link) 8%, transparent); }
279 &--delete { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
280 &--rename { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
281 &--patch { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-overlay); }
282 &--fn { color: var(--color-purple); border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); background: color-mix(in srgb, var(--color-purple) 8%, transparent); }
283 &--class { color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 30%, transparent); background: color-mix(in srgb, var(--color-orange) 8%, transparent); }
284 &--sym { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-overlay); }
285 }
286
287 .blob2-outline-addr { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
288 .blob2-outline-count { font-size: 9px; color: var(--text-muted); background: var(--bg-elevated); border-radius: var(--radius-full); }
289 .blob2-outline-time { font-size: 10px; color: var(--text-muted); }
290
291 // ── Info tab ──────────────────────────────────────────────────────────────────
292
293 .blob2-info-section--sep { border-top: 1px solid var(--border-subtle); }
294 .blob2-info-row { font-size: 11px; }
295 .blob2-info-label { color: var(--text-muted); }
296 .blob2-info-value { color: var(--text-secondary); }
297 .blob2-info-mono { font-family: var(--font-mono); font-size: 10px; }
298
299 .blob2-info-label-block {
300 font-size: 10px;
301 font-weight: 700;
302 text-transform: uppercase;
303 letter-spacing: 0.05em;
304 color: var(--text-muted);
305 }
306
307 .blob2-info-addr code { color: var(--text-secondary); }
308
309 .blob2-copy-addr {
310 background: none;
311 border: none;
312 cursor: pointer;
313 color: var(--text-muted);
314 &:hover { color: var(--text-primary); }
315 }
316
317 .blob2-info-commit-link {
318 font-family: var(--font-mono);
319 font-size: 11px;
320 color: var(--color-accent-link);
321 text-decoration: none;
322 &:hover { text-decoration: underline; }
323 }
324
325 .blob2-info-commit-msg { font-size: 11px; color: var(--text-secondary); }
326 .blob2-info-commit-time { font-size: 10px; color: var(--text-muted); }
327
328 .blob2-info-link {
329 font-size: 11px;
330 color: var(--color-accent-link);
331 text-decoration: none;
332 &:hover { text-decoration: underline; }
333 }
334
335 // ── Intelligence signal pills ─────────────────────────────────────────────────
336
337 .blob2-signal-pill {
338 font-size: 10px;
339 font-weight: 700;
340 letter-spacing: 0.04em;
341 text-transform: uppercase;
342 border-radius: var(--radius-full);
343 border: 1px solid;
344 white-space: nowrap;
345 flex-shrink: 0;
346 cursor: default;
347
348 &--hotspot {
349 color: var(--color-orange);
350 border-color: color-mix(in srgb, var(--color-orange) 40%, transparent);
351 background: color-mix(in srgb, var(--color-orange) 10%, transparent);
352 }
353 &--cold {
354 color: var(--color-accent-link);
355 border-color: color-mix(in srgb, var(--color-accent-link) 35%, transparent);
356 background: color-mix(in srgb, var(--color-accent-link) 8%, transparent);
357 }
358 &--blast {
359 color: var(--color-warning);
360 border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
361 background: color-mix(in srgb, var(--color-warning) 10%, transparent);
362 }
363 }
364
365 // ── File history timeline ─────────────────────────────────────────────────────
366
367 .blob2-history {
368 border: 1px solid var(--border-default);
369 border-radius: var(--radius-base);
370 background: var(--bg-surface);
371 overflow: hidden;
372 }
373
374 .blob2-history-header {
375 font-size: 12px;
376 font-weight: 600;
377 color: var(--text-secondary);
378 background: var(--bg-elevated);
379 border-bottom: 1px solid var(--border-default);
380 }
381
382 .blob2-history-count {
383 font-size: 10px;
384 font-weight: 400;
385 color: var(--text-muted);
386 background: var(--bg-overlay);
387 border-radius: var(--radius-full);
388 }
389
390 .blob2-history-row {
391 font-size: 12px;
392 border-bottom: 1px solid var(--border-subtle);
393 &:last-child { border-bottom: none; }
394 &:hover { background: var(--bg-hover); }
395 }
396
397 .blob2-history-sha {
398 font-family: var(--font-mono);
399 font-size: 11px;
400 color: var(--color-accent-link);
401 text-decoration: none;
402 background: var(--bg-overlay);
403 border: 1px solid var(--border-subtle);
404 border-radius: var(--radius-sm);
405 &:hover { border-color: var(--color-accent); }
406 }
407
408 .blob2-history-msg { color: var(--text-secondary); }
409 .blob2-history-time { font-size: 11px; color: var(--text-muted); }
410
411 // ── Rendered Markdown ─────────────────────────────────────────────────────────
412
413 .blob2-markdown {
414 color: var(--text-primary);
415 line-height: var(--line-height-normal);
416
417 h1, h2, h3, h4, h5, h6 {
418 color: var(--text-primary);
419 font-weight: 700;
420 line-height: var(--line-height-tight);
421 margin-top: 1.5em;
422 margin-bottom: 0.5em;
423 &:first-child { margin-top: 0; }
424 a { color: inherit; text-decoration: none; }
425
426 .blob2-md-anchor {
427 opacity: 0;
428 color: var(--text-muted);
429 text-decoration: none;
430 margin-left: 0.4em;
431 font-weight: 400;
432 font-size: 0.85em;
433 transition: opacity 0.15s;
434 }
435 &:hover .blob2-md-anchor { opacity: 1; }
436 }
437 h1 { font-size: var(--text-xl); border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.3em; }
438 h2 { font-size: var(--text-lg); border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.25em; }
439 h3 { font-size: var(--text-md); }
440 h4 { font-size: var(--text-base); }
441 h5, h6 { font-size: var(--text-sm); color: var(--text-secondary); }
442
443 p { margin: 0 0 1em; }
444
445 a {
446 color: var(--color-accent-link);
447 text-decoration: none;
448 &:hover { text-decoration: underline; }
449 }
450
451 code {
452 font-family: var(--font-mono);
453 font-size: 0.875em;
454 color: var(--color-accent-link);
455 background: var(--bg-elevated);
456 border: 1px solid var(--border-subtle);
457 border-radius: var(--radius-sm);
458 padding: 0.15em 0.4em;
459 }
460
461 pre {
462 background: var(--bg-elevated);
463 border: 1px solid var(--border-subtle);
464 border-radius: var(--radius-md);
465 overflow-x: auto;
466 margin: 0 0 1em;
467
468 code {
469 background: none;
470 border: none;
471 padding: 0;
472 color: var(--text-primary);
473 font-size: var(--text-sm);
474 line-height: 1.6;
475 }
476 }
477
478 blockquote {
479 border-left: 3px solid var(--border-strong);
480 color: var(--text-secondary);
481 margin: 0 0 1em;
482 padding-left: 1em;
483 font-style: italic;
484
485 p { margin-bottom: 0; }
486 }
487
488 ul, ol {
489 margin: 0 0 1em;
490 padding-left: 1.75em;
491 li { margin-bottom: 0.25em; }
492 ul, ol { margin-bottom: 0; }
493 }
494
495 table {
496 border-collapse: collapse;
497 width: 100%;
498 margin: 0 0 1em;
499 font-size: var(--text-sm);
500
501 th {
502 background: var(--bg-elevated);
503 color: var(--text-secondary);
504 font-weight: 600;
505 border: 1px solid var(--border-default);
506 }
507 td { border: 1px solid var(--border-subtle); }
508 tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-elevated) 40%, transparent); }
509 }
510
511 hr {
512 border: none;
513 border-top: 1px solid var(--border-default);
514 margin: 1.5em 0;
515 }
516
517 img {
518 max-width: 100%;
519 border-radius: var(--radius-md);
520 }
521 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago