gabriel / musehub public
_branches.scss
419 lines 10.7 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 155 days ago
1 // _branches.scss — Branches page (.br-* prefix)
2 // Covers: branches.html + fragments/branch_rows.html
3
4 // ── Page wrapper ─────────────────────────────────────────────────────────────
5 .br-page {
6 display: flex;
7 flex-direction: column;
8 gap: var(--space-4);
9 }
10
11 // ── Compact stat strip ────────────────────────────────────────────────────────
12 .br-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 .br-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 text-decoration: none;
30 }
31
32 .br-stat-divider {
33 width: 1px;
34 background: var(--border-default);
35 flex-shrink: 0;
36 }
37
38 .br-stat-num {
39 font-size: 22px;
40 font-weight: var(--font-weight-bold);
41 font-family: var(--font-mono);
42 color: var(--text-primary);
43 line-height: 1;
44 }
45 .br-stat-num--active { color: #3fb950; }
46 .br-stat-num--ahead { color: var(--color-accent); }
47 .br-stat-num--authors { color: #f0883e; }
48
49 .br-stat-lbl {
50 font-size: 11px;
51 color: var(--text-muted);
52 text-transform: uppercase;
53 letter-spacing: 0.06em;
54 font-weight: var(--font-weight-medium);
55 }
56
57 // ── Default branch hero ───────────────────────────────────────────────────────
58 .br-default {
59 display: flex;
60 align-items: center;
61 justify-content: space-between;
62 gap: var(--space-4);
63 background: var(--bg-surface);
64 border: 1px solid var(--border-default);
65 border-left: 3px solid var(--color-accent);
66 border-radius: var(--radius-md);
67 padding: var(--space-4) var(--space-5);
68 }
69
70 .br-default-left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
71
72 .br-default-eyebrow {
73 font-size: 10px;
74 font-weight: var(--font-weight-bold);
75 text-transform: uppercase;
76 letter-spacing: 0.08em;
77 color: var(--color-accent);
78 }
79
80 .br-default-name {
81 display: flex;
82 align-items: center;
83 gap: var(--space-2);
84 font-size: 18px;
85 font-weight: var(--font-weight-bold);
86 color: var(--text-primary);
87 font-family: var(--font-mono);
88 }
89
90 .br-default-commit {
91 display: flex;
92 align-items: center;
93 gap: var(--space-2);
94 font-size: 12px;
95 color: var(--text-muted);
96 flex-wrap: wrap;
97 }
98
99 .br-default-actions {
100 display: flex;
101 align-items: center;
102 gap: var(--space-2);
103 flex-shrink: 0;
104 }
105
106 // ── Main card ─────────────────────────────────────────────────────────────────
107 .br-card {
108 background: var(--bg-surface);
109 border: 1px solid var(--border-default);
110 border-radius: var(--radius-md);
111 overflow: hidden;
112 }
113
114 // ── Toolbar ───────────────────────────────────────────────────────────────────
115 .br-toolbar {
116 display: flex;
117 align-items: center;
118 padding: 0 var(--space-4);
119 border-bottom: 1px solid var(--border-subtle);
120 gap: var(--space-2);
121 min-height: 48px;
122 flex-wrap: wrap;
123 }
124
125 .br-tabs { display: flex; align-items: center; flex: 1; flex-wrap: wrap; }
126
127 .br-tab {
128 display: inline-flex;
129 align-items: center;
130 gap: 6px;
131 padding: 14px 12px;
132 font-size: 13px;
133 color: var(--text-muted);
134 text-decoration: none;
135 border-bottom: 2px solid transparent;
136 white-space: nowrap;
137 transition: color var(--transition-fast), border-color var(--transition-fast);
138 cursor: pointer;
139 background: none;
140 border-left: none;
141 border-right: none;
142 border-top: none;
143
144 &:hover { color: var(--text-secondary); text-decoration: none; }
145 &.br-tab--active {
146 color: var(--text-primary);
147 border-bottom-color: var(--color-accent);
148 font-weight: var(--font-weight-semibold);
149 }
150 }
151
152 .br-tab-ct {
153 background: var(--bg-overlay);
154 border: 1px solid var(--border-subtle);
155 border-radius: var(--radius-full);
156 font-size: 10px;
157 font-weight: var(--font-weight-semibold);
158 padding: 1px 6px;
159 font-family: var(--font-mono);
160 min-width: 18px;
161 text-align: center;
162 color: var(--text-muted);
163 }
164
165 .br-search {
166 display: flex;
167 align-items: center;
168 gap: 7px;
169 background: var(--bg-overlay);
170 border: 1px solid var(--border-subtle);
171 border-radius: var(--radius-sm);
172 padding: 5px 10px;
173 transition: border-color var(--transition-fast);
174 flex-shrink: 0;
175
176 &:focus-within { border-color: var(--color-accent); }
177
178 svg { color: var(--text-muted); flex-shrink: 0; }
179
180 input {
181 background: none;
182 border: none;
183 outline: none;
184 font-size: 12px;
185 color: var(--text-primary);
186 width: 160px;
187
188 &::placeholder { color: var(--text-muted); }
189 }
190 }
191
192 // ── Branch rows ───────────────────────────────────────────────────────────────
193 .br-list { display: flex; flex-direction: column; }
194
195 .br-row {
196 display: flex;
197 align-items: flex-start;
198 gap: var(--space-3);
199 padding: var(--space-3) var(--space-5);
200 border-bottom: 1px solid var(--border-subtle);
201 transition: background var(--transition-fast);
202
203 &:last-child { border-bottom: none; }
204 &:hover { background: var(--bg-overlay); }
205 }
206
207 // Type icon
208 .br-row-icon {
209 width: 28px;
210 height: 28px;
211 border-radius: var(--radius-sm);
212 display: flex;
213 align-items: center;
214 justify-content: center;
215 flex-shrink: 0;
216 margin-top: 2px;
217
218 svg { width: 14px; height: 14px; display: block; }
219 }
220 .br-icon--feature { background: rgba(63,185,80,0.12); color: #3fb950; }
221 .br-icon--experiment { background: rgba(163,113,247,0.12); color: #a371f7; }
222 .br-icon--fix { background: rgba(248,81,73,0.12); color: #f85149; }
223 .br-icon--structure { background: rgba(56,139,253,0.12); color: var(--color-accent); }
224 .br-icon--collab { background: rgba(240,136,62,0.12); color: #f0883e; }
225 .br-icon--source { background: rgba(45,212,191,0.12); color: #2dd4bf; }
226 .br-icon--version { background: rgba(210,153,34,0.12); color: #d29922; }
227 .br-icon--default { background: rgba(56,139,253,0.12); color: var(--color-accent); }
228
229 // Body
230 .br-row-body {
231 flex: 1;
232 min-width: 0;
233 display: flex;
234 flex-direction: column;
235 gap: 4px;
236 }
237
238 .br-row-name-line {
239 display: flex;
240 align-items: center;
241 gap: var(--space-2);
242 flex-wrap: wrap;
243 }
244
245 .br-name {
246 font-size: 14px;
247 font-weight: var(--font-weight-semibold);
248 color: var(--text-primary);
249 font-family: var(--font-mono);
250 }
251
252 .br-type-badge {
253 display: inline-block;
254 padding: 1px 7px;
255 border-radius: var(--radius-sm);
256 font-size: 10px;
257 font-weight: var(--font-weight-bold);
258 font-family: var(--font-mono);
259 text-transform: uppercase;
260 letter-spacing: 0.04em;
261 }
262 .br-badge--feature { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }
263 .br-badge--experiment { background: rgba(163,113,247,0.12); color: #a371f7; border: 1px solid rgba(163,113,247,0.25); }
264 .br-badge--fix { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.25); }
265 .br-badge--structure { background: rgba(56,139,253,0.12); color: var(--color-accent); border: 1px solid rgba(56,139,253,0.25); }
266 .br-badge--collab { background: rgba(240,136,62,0.12); color: #f0883e; border: 1px solid rgba(240,136,62,0.25); }
267 .br-badge--source { background: rgba(45,212,191,0.12); color: #2dd4bf; border: 1px solid rgba(45,212,191,0.25); }
268 .br-badge--version { background: rgba(210,153,34,0.12); color: #d29922; border: 1px solid rgba(210,153,34,0.25); }
269
270 .br-commit-line {
271 display: flex;
272 align-items: center;
273 gap: var(--space-2);
274 font-size: 12px;
275 color: var(--text-muted);
276 min-width: 0;
277 }
278
279 .br-sha {
280 font-family: var(--font-mono);
281 font-size: 11px;
282 color: var(--color-accent-link);
283 text-decoration: none;
284 flex-shrink: 0;
285 &:hover { text-decoration: underline; }
286 }
287
288 .br-commit-msg {
289 color: var(--text-muted);
290 white-space: nowrap;
291 overflow: hidden;
292 text-overflow: ellipsis;
293 }
294
295 .br-meta-line {
296 display: flex;
297 align-items: center;
298 gap: 6px;
299 font-size: 11px;
300 color: var(--text-muted);
301 flex-wrap: wrap;
302 }
303
304 .br-author {
305 display: inline-flex;
306 align-items: center;
307 gap: 4px;
308 color: var(--text-secondary);
309 }
310
311 .br-avatar {
312 width: 14px;
313 height: 14px;
314 border-radius: 50%;
315 display: inline-flex;
316 align-items: center;
317 justify-content: center;
318 font-size: 7px;
319 font-weight: var(--font-weight-bold);
320 color: #fff;
321 flex-shrink: 0;
322 }
323
324 .br-meta-dot { color: var(--border-default); }
325
326 // Divergence line
327 .br-div-line {
328 display: flex;
329 align-items: center;
330 gap: var(--space-2);
331 font-size: 11px;
332 margin-top: 2px;
333 }
334
335 .br-behind { color: #f85149; font-family: var(--font-mono); }
336 .br-ahead { color: #3fb950; font-family: var(--font-mono); }
337 .br-uptodate { color: #3fb950; }
338
339 .br-div-track {
340 height: 4px;
341 width: 80px;
342 background: var(--bg-overlay);
343 border-radius: var(--radius-full);
344 overflow: hidden;
345 display: flex;
346 flex-shrink: 0;
347 }
348 .br-div-behind {
349 background: #f85149;
350 height: 100%;
351 }
352 .br-div-ahead {
353 background: #3fb950;
354 height: 100%;
355 }
356
357 // Domain dimension scores (only shown when data exists)
358 .br-dim-scores {
359 display: flex;
360 align-items: center;
361 gap: 8px;
362 flex-wrap: wrap;
363 margin-top: 3px;
364 }
365
366 .br-dim {
367 display: flex;
368 align-items: center;
369 gap: 4px;
370 font-size: 10px;
371 color: var(--text-muted);
372 }
373
374 .br-dim-label {
375 font-family: var(--font-mono);
376 text-transform: uppercase;
377 letter-spacing: 0.03em;
378 flex-shrink: 0;
379 min-width: 28px;
380 }
381
382 .br-dim-track {
383 height: 3px;
384 width: 40px;
385 background: var(--bg-overlay);
386 border-radius: var(--radius-full);
387 overflow: hidden;
388 }
389
390 .br-dim-fill {
391 height: 100%;
392 background: var(--color-accent);
393 border-radius: var(--radius-full);
394 }
395
396 // Right actions
397 .br-row-actions {
398 display: flex;
399 flex-direction: column;
400 align-items: flex-end;
401 gap: var(--space-1);
402 flex-shrink: 0;
403 margin-top: 2px;
404 }
405
406 // Empty state
407 .br-empty {
408 display: flex;
409 flex-direction: column;
410 align-items: center;
411 justify-content: center;
412 padding: var(--space-12) var(--space-6);
413 text-align: center;
414 gap: var(--space-3);
415 color: var(--text-muted);
416 }
417 .br-empty-icon { opacity: 0.3; margin-bottom: var(--space-1); }
418 .br-empty-title { font-size: 18px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
419 .br-empty-desc { font-size: 14px; 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 ⚠ 155 days ago