gabriel / musehub public
_credits.scss
442 lines 11.1 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 156 days ago
1 // _credits.scss — Credits page (.crd-* prefix)
2 // Code-domain contributor attribution — the liner notes for software.
3
4 // ── Page wrapper ─────────────────────────────────────────────────────────────
5 .crd-page {
6 display: flex;
7 flex-direction: column;
8 gap: var(--space-5);
9 }
10
11 // ── Stat strip ────────────────────────────────────────────────────────────────
12 .crd-stat-strip {
13 display: flex;
14 align-items: stretch;
15 background: var(--bg-surface);
16 border: 1px solid var(--border-default);
17 border-radius: var(--radius-md);
18 overflow: hidden;
19 }
20
21 .crd-stat {
22 display: flex;
23 flex-direction: column;
24 align-items: center;
25 justify-content: center;
26 flex: 1;
27 padding: var(--space-4) var(--space-3);
28 gap: 4px;
29 }
30
31 .crd-stat-divider {
32 width: 1px;
33 background: var(--border-default);
34 flex-shrink: 0;
35 }
36
37 .crd-stat-num {
38 font-size: 22px;
39 font-weight: var(--font-weight-bold);
40 font-family: var(--font-mono);
41 color: var(--text-primary);
42 line-height: 1;
43 }
44 .crd-stat-num--commits { color: var(--color-accent); }
45 .crd-stat-num--span { color: #a371f7; }
46 .crd-stat-num--types { color: #3fb950; }
47
48 .crd-stat-lbl {
49 font-size: 11px;
50 color: var(--text-muted);
51 text-transform: uppercase;
52 letter-spacing: 0.06em;
53 font-weight: var(--font-weight-medium);
54 }
55
56 // ── Commit type breakdown bar (project-level) ─────────────────────────────────
57 .crd-type-bar-wrap {
58 background: var(--bg-surface);
59 border: 1px solid var(--border-default);
60 border-radius: var(--radius-md);
61 padding: var(--space-4) var(--space-5);
62 display: flex;
63 flex-direction: column;
64 gap: var(--space-3);
65 }
66
67 .crd-type-bar-label {
68 font-size: 11px;
69 font-weight: var(--font-weight-bold);
70 text-transform: uppercase;
71 letter-spacing: 0.08em;
72 color: var(--text-muted);
73 }
74
75 .crd-type-bar {
76 display: flex;
77 height: 8px;
78 border-radius: var(--radius-full);
79 overflow: hidden;
80 gap: 2px;
81 }
82
83 .crd-type-seg {
84 height: 100%;
85 border-radius: var(--radius-full);
86 transition: opacity var(--transition-fast);
87 &:hover { opacity: 0.8; }
88 }
89
90 .crd-type-legend {
91 display: flex;
92 flex-wrap: wrap;
93 gap: var(--space-3);
94 }
95
96 .crd-type-legend-item {
97 display: flex;
98 align-items: center;
99 gap: 5px;
100 font-size: 12px;
101 color: var(--text-secondary);
102 }
103
104 .crd-type-legend-dot {
105 width: 8px;
106 height: 8px;
107 border-radius: 50%;
108 flex-shrink: 0;
109 }
110
111 .crd-type-legend-ct {
112 font-family: var(--font-mono);
113 font-size: 11px;
114 color: var(--text-muted);
115 }
116
117 // ── Spotlight trio ────────────────────────────────────────────────────────────
118 .crd-spotlights {
119 display: grid;
120 grid-template-columns: repeat(3, 1fr);
121 gap: var(--space-3);
122
123 @media (max-width: 700px) { grid-template-columns: 1fr; }
124 }
125
126 .crd-spotlight {
127 background: var(--bg-surface);
128 border: 1px solid var(--border-default);
129 border-radius: var(--radius-md);
130 padding: var(--space-4);
131 display: flex;
132 flex-direction: column;
133 gap: var(--space-3);
134 }
135
136 .crd-spotlight--gold { border-top: 2px solid #e3b341; }
137 .crd-spotlight--blue { border-top: 2px solid var(--color-accent); }
138 .crd-spotlight--purple { border-top: 2px solid #a371f7; }
139
140 .crd-spotlight-eyebrow {
141 font-size: 10px;
142 font-weight: var(--font-weight-bold);
143 text-transform: uppercase;
144 letter-spacing: 0.08em;
145 display: flex;
146 align-items: center;
147 gap: 5px;
148 }
149 .crd-spotlight--gold .crd-spotlight-eyebrow { color: #e3b341; }
150 .crd-spotlight--blue .crd-spotlight-eyebrow { color: var(--color-accent); }
151 .crd-spotlight--purple .crd-spotlight-eyebrow { color: #a371f7; }
152
153 .crd-spotlight-body {
154 display: flex;
155 align-items: center;
156 gap: var(--space-3);
157 }
158
159 .crd-spotlight-name {
160 font-size: 15px;
161 font-weight: var(--font-weight-semibold);
162 color: var(--text-primary);
163 line-height: 1.2;
164 }
165
166 .crd-spotlight-meta {
167 font-size: 12px;
168 color: var(--text-muted);
169 font-family: var(--font-mono);
170 }
171
172 // ── Controls toolbar ──────────────────────────────────────────────────────────
173 .crd-toolbar {
174 display: flex;
175 align-items: center;
176 gap: var(--space-3);
177 padding: var(--space-3) var(--space-5);
178 background: var(--bg-surface);
179 border: 1px solid var(--border-default);
180 border-radius: var(--radius-md);
181 }
182
183 .crd-toolbar-label {
184 font-size: 12px;
185 color: var(--text-muted);
186 flex-shrink: 0;
187 }
188
189 .crd-sort-select {
190 background: var(--bg-overlay);
191 border: 1px solid var(--border-subtle);
192 border-radius: var(--radius-sm);
193 color: var(--text-primary);
194 font-size: 12px;
195 padding: 4px 8px;
196 outline: none;
197 cursor: pointer;
198 &:focus { border-color: var(--color-accent); }
199 }
200
201 .crd-count-badge {
202 margin-left: auto;
203 font-size: 12px;
204 color: var(--text-muted);
205 font-family: var(--font-mono);
206 }
207
208 // ── Contributor list ──────────────────────────────────────────────────────────
209 .crd-list {
210 display: flex;
211 flex-direction: column;
212 gap: var(--space-3);
213 }
214
215 .crd-contributor {
216 background: var(--bg-surface);
217 border: 1px solid var(--border-default);
218 border-radius: var(--radius-md);
219 padding: var(--space-4) var(--space-5);
220 display: grid;
221 grid-template-columns: auto 1fr auto;
222 gap: var(--space-4);
223 align-items: start;
224 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
225
226 &:hover {
227 border-color: var(--border-default);
228 box-shadow: 0 2px 12px rgba(0,0,0,0.15);
229 }
230 }
231
232 // Avatar
233 .crd-avatar {
234 width: 44px;
235 height: 44px;
236 border-radius: var(--radius-full);
237 display: flex;
238 align-items: center;
239 justify-content: center;
240 font-size: 17px;
241 font-weight: var(--font-weight-bold);
242 color: #fff;
243 flex-shrink: 0;
244 letter-spacing: -0.5px;
245 }
246
247 // Body
248 .crd-body {
249 display: flex;
250 flex-direction: column;
251 gap: var(--space-2);
252 min-width: 0;
253 }
254
255 .crd-name-row {
256 display: flex;
257 align-items: center;
258 gap: var(--space-2);
259 flex-wrap: wrap;
260 }
261
262 .crd-author-name {
263 font-size: 16px;
264 font-weight: var(--font-weight-bold);
265 color: var(--text-primary);
266 text-decoration: none;
267 &:hover { text-decoration: underline; color: var(--color-accent-link); }
268 }
269
270 .crd-role-badge {
271 padding: 2px 9px;
272 border-radius: var(--radius-full);
273 font-size: 11px;
274 font-weight: var(--font-weight-semibold);
275 background: var(--bg-overlay);
276 border: 1px solid var(--border-subtle);
277 color: var(--text-muted);
278 }
279
280 // Commit type chips
281 .crd-type-chips {
282 display: flex;
283 flex-wrap: wrap;
284 gap: 6px;
285 }
286
287 .crd-type-chip {
288 display: inline-flex;
289 align-items: center;
290 gap: 5px;
291 padding: 2px 9px;
292 border-radius: var(--radius-sm);
293 font-size: 11px;
294 font-weight: var(--font-weight-bold);
295 font-family: var(--font-mono);
296 }
297 // Colors per semantic type
298 .crd-chip--feat { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
299 .crd-chip--fix { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.25); }
300 .crd-chip--refactor { background: rgba(163,113,247,0.12); color: #a371f7; border: 1px solid rgba(163,113,247,0.25); }
301 .crd-chip--docs { background: rgba(56,139,253,0.12); color: #58a6ff; border: 1px solid rgba(56,139,253,0.25); }
302 .crd-chip--test { background: rgba(45,212,191,0.12); color: #2dd4bf; border: 1px solid rgba(45,212,191,0.25); }
303 .crd-chip--perf { background: rgba(227,179,65,0.12); color: #e3b341; border: 1px solid rgba(227,179,65,0.25); }
304 .crd-chip--chore { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); }
305 .crd-chip--revert { background: rgba(248,81,73,0.08); color: #f85149; border: 1px solid rgba(248,81,73,0.2); }
306
307 .crd-chip-ct {
308 opacity: 0.7;
309 font-size: 10px;
310 }
311
312 .crd-chip-dot {
313 width: 5px;
314 height: 5px;
315 border-radius: 50%;
316 background: currentColor;
317 flex-shrink: 0;
318 }
319
320 // Activity bar
321 .crd-activity {
322 display: flex;
323 align-items: center;
324 gap: var(--space-2);
325 }
326
327 .crd-activity-track {
328 flex: 1;
329 height: 4px;
330 background: var(--bg-overlay);
331 border-radius: var(--radius-full);
332 overflow: hidden;
333 }
334
335 .crd-activity-fill {
336 height: 100%;
337 border-radius: var(--radius-full);
338 transition: width 0.6s ease;
339 }
340
341 .crd-activity-pct {
342 font-size: 11px;
343 font-family: var(--font-mono);
344 color: var(--text-muted);
345 flex-shrink: 0;
346 min-width: 28px;
347 text-align: right;
348 }
349
350 // Date range
351 .crd-date-range {
352 display: flex;
353 align-items: center;
354 gap: 6px;
355 font-size: 11px;
356 color: var(--text-muted);
357 flex-wrap: wrap;
358 }
359
360 .crd-date-arrow { color: var(--border-default); }
361
362 .crd-date-span {
363 padding: 1px 7px;
364 border-radius: var(--radius-full);
365 background: var(--bg-overlay);
366 border: 1px solid var(--border-subtle);
367 font-family: var(--font-mono);
368 font-size: 10px;
369 font-weight: var(--font-weight-semibold);
370 color: var(--text-muted);
371 }
372
373 // Right stats column
374 .crd-stats-col {
375 display: flex;
376 flex-direction: column;
377 align-items: flex-end;
378 gap: var(--space-2);
379 flex-shrink: 0;
380 }
381
382 .crd-commit-count {
383 font-size: 22px;
384 font-weight: var(--font-weight-bold);
385 font-family: var(--font-mono);
386 color: var(--text-primary);
387 line-height: 1;
388 }
389
390 .crd-commit-lbl {
391 font-size: 10px;
392 color: var(--text-muted);
393 text-transform: uppercase;
394 letter-spacing: 0.05em;
395 }
396
397 .crd-branch-pill {
398 display: inline-flex;
399 align-items: center;
400 gap: 4px;
401 padding: 2px 8px;
402 border-radius: var(--radius-sm);
403 font-size: 11px;
404 font-family: var(--font-mono);
405 color: var(--text-muted);
406 background: var(--bg-overlay);
407 border: 1px solid var(--border-subtle);
408 }
409
410 // ── Muse-exclusive callout ────────────────────────────────────────────────────
411 .crd-muse-note {
412 display: flex;
413 align-items: flex-start;
414 gap: var(--space-3);
415 padding: var(--space-3) var(--space-4);
416 background: rgba(56,139,253,0.06);
417 border: 1px solid rgba(56,139,253,0.2);
418 border-radius: var(--radius-md);
419 font-size: 12px;
420 color: var(--text-secondary);
421 line-height: 1.6;
422 }
423
424 .crd-muse-note-icon {
425 color: var(--color-accent);
426 flex-shrink: 0;
427 margin-top: 1px;
428 }
429
430 // ── Empty state ───────────────────────────────────────────────────────────────
431 .crd-empty {
432 display: flex;
433 flex-direction: column;
434 align-items: center;
435 justify-content: center;
436 padding: var(--space-12) var(--space-6);
437 text-align: center;
438 gap: var(--space-3);
439 }
440 .crd-empty-icon { opacity: 0.3; }
441 .crd-empty-title { font-size: 18px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
442 .crd-empty-desc { font-size: 14px; color: var(--text-muted); max-width: 380px; line-height: 1.6; }
File History 1 commit
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ 156 days ago