gabriel / musehub public
_proposals.scss
428 lines 13.9 KB
Raw
sha256:a34090cc4a394a78bd72cbbe34b08cc59525141e19135b6c0ab154f10611b9ef debug(push/stream): instrument O-frame decode path with INF… Sonnet 4.6 patch 122 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Proposals list (.prl-* prefix)
3 // File: src/scss/components/_proposals.scss
4 //
5 // All visual rules — colors, typography, borders, backgrounds.
6 // Page layout lives in pages/_proposals.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 $proposal-open: #3fb950;
10 $proposal-merged: #a371f7;
11 $proposal-closed: #f85149;
12
13 // ── Hero ──────────────────────────────────────────────────────────────────────
14
15 .prl-hero {
16 position: relative;
17 overflow: hidden;
18 background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-canvas) 60%, transparent) 0%, var(--bg-surface) 100%);
19 border-bottom: 1px solid var(--border-default);
20 padding: var(--space-10) var(--space-8) var(--space-8);
21 }
22
23 .prl-hero-glow {
24 position: absolute;
25 inset: 0;
26 pointer-events: none;
27 opacity: 0.06;
28
29 &--open { background: radial-gradient(ellipse 55% 60% at 15% 0%, #{$proposal-open} 0%, transparent 70%); }
30 &--merged { background: radial-gradient(ellipse 55% 60% at 15% 0%, #{$proposal-merged} 0%, transparent 70%); }
31 &--closed { background: radial-gradient(ellipse 55% 60% at 15% 0%, #{$proposal-closed} 0%, transparent 70%); }
32 &--all { background: radial-gradient(ellipse 55% 60% at 15% 0%, var(--color-accent) 0%, transparent 70%); }
33 }
34
35 .prl-hero-eyebrow {
36 display: inline-flex;
37 align-items: center;
38 gap: 6px;
39 font-size: 11px;
40 font-weight: var(--weight-medium);
41 color: var(--text-muted);
42 text-transform: uppercase;
43 letter-spacing: 0.07em;
44 margin-bottom: var(--space-1);
45 }
46
47 .prl-hero-title {
48 font-size: 28px;
49 font-weight: var(--weight-bold);
50 color: var(--text-primary);
51 line-height: 1.15;
52 margin: 0;
53 letter-spacing: -0.02em;
54 }
55
56 .prl-hero-sub {
57 font-size: 13px;
58 color: var(--text-muted);
59 line-height: 1.55;
60 margin: 0;
61 max-width: 440px;
62 }
63
64 .prl-new-btn {
65 display: inline-flex;
66 align-items: center;
67 gap: 7px;
68 padding: 8px 16px;
69 font-size: 13px;
70 font-weight: var(--weight-semibold);
71 color: var(--text-primary);
72 background: transparent;
73 border: 1px solid var(--border-default);
74 border-radius: var(--radius-md);
75 text-decoration: none;
76 transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
77
78 &:hover {
79 text-decoration: none;
80 border-color: var(--color-accent);
81 color: var(--color-accent);
82 background: color-mix(in srgb, var(--color-accent) 7%, transparent);
83 }
84 }
85
86 // ── Filter / sort bar ─────────────────────────────────────────────────────────
87
88 .prl-filterbar {
89 display: flex;
90 align-items: stretch;
91 border-bottom: 1px solid var(--border-subtle);
92 background: var(--bg-surface);
93 padding: 0 var(--space-6);
94 gap: 0;
95 min-height: 44px;
96 }
97
98 .prl-tabs {
99 display: flex;
100 flex: 1;
101 gap: 0;
102 overflow-x: auto;
103 scrollbar-width: none;
104 &::-webkit-scrollbar { display: none; }
105 }
106
107 .prl-tab {
108 display: inline-flex;
109 align-items: center;
110 gap: 6px;
111 padding: 0 14px;
112 font-size: 12px;
113 font-weight: var(--weight-medium);
114 color: var(--text-muted);
115 text-decoration: none;
116 border-bottom: 2px solid transparent;
117 white-space: nowrap;
118 transition: color var(--transition-fast), border-color var(--transition-fast);
119 min-height: 44px;
120
121 &:hover { color: var(--text-secondary); text-decoration: none; }
122
123 &--active {
124 color: var(--text-primary);
125 border-bottom-color: var(--color-accent);
126 font-weight: var(--weight-semibold);
127 }
128 }
129
130 .prl-tab-pip {
131 width: 7px;
132 height: 7px;
133 border-radius: 50%;
134 flex-shrink: 0;
135 &--open { background: $proposal-open; }
136 &--merged { background: $proposal-merged; }
137 &--closed { background: $proposal-closed; }
138 }
139
140 .prl-tab-ct {
141 background: var(--bg-overlay);
142 border: 1px solid var(--border-subtle);
143 border-radius: var(--radius-full);
144 font-size: 10px;
145 font-weight: var(--weight-semibold);
146 font-family: var(--font-mono);
147 padding: 1px 5px;
148 min-width: 16px;
149 text-align: center;
150 color: var(--text-muted);
151 }
152
153 .prl-sort {
154 display: flex;
155 align-items: center;
156 gap: var(--space-2);
157 flex-shrink: 0;
158 padding-left: var(--space-4);
159 border-left: 1px solid var(--border-subtle);
160 margin: 8px 0;
161 }
162
163 .prl-sort-label {
164 font-size: 11px;
165 color: var(--text-muted);
166 margin-right: 2px;
167 }
168
169 .prl-sort-opt {
170 font-size: 12px;
171 color: var(--text-muted);
172 text-decoration: none;
173 padding: 2px 7px;
174 border-radius: var(--radius-sm);
175 transition: background var(--transition-fast), color var(--transition-fast);
176
177 &:hover { color: var(--text-secondary); text-decoration: none; }
178
179 &--active {
180 color: var(--text-primary);
181 font-weight: var(--weight-semibold);
182 background: var(--bg-overlay);
183 border: 1px solid var(--border-subtle);
184 }
185 }
186
187 // ── Proposal row ──────────────────────────────────────────────────────────────
188
189 .prl-row {
190 display: flex;
191 align-items: center;
192 gap: var(--space-4);
193 padding: 12px var(--space-6);
194 border-bottom: 1px solid var(--border-subtle);
195 border-left: 3px solid transparent;
196 text-decoration: none;
197 cursor: pointer;
198 transition: background var(--transition-fast), border-left-color var(--transition-fast);
199 animation: prl-row-in 180ms ease both;
200
201 &:last-child { border-bottom: none; }
202 &:hover { background: var(--bg-overlay); text-decoration: none; }
203
204 &--open:hover { border-left-color: $proposal-open; }
205 &--merged:hover { border-left-color: $proposal-merged; }
206 &--closed:hover { border-left-color: $proposal-closed; }
207
208 &--merged { border-left-color: color-mix(in srgb, #{$proposal-merged} 35%, transparent); }
209 &--closed { border-left-color: color-mix(in srgb, #{$proposal-closed} 25%, transparent); }
210 }
211
212 @keyframes prl-row-in {
213 from { opacity: 0; transform: translateY(4px); }
214 to { opacity: 1; transform: translateY(0); }
215 }
216
217 @for $i from 1 through 8 {
218 .prl-row:nth-child(#{$i}) { animation-delay: #{($i - 1) * 28}ms; }
219 }
220
221 .prl-row-title {
222 font-size: 14px;
223 font-weight: var(--weight-semibold);
224 color: var(--text-primary);
225 line-height: 1.4;
226 }
227
228 // Commit-type badge
229 .prl-badge {
230 display: inline-block;
231 font-size: 10px;
232 font-weight: var(--weight-bold);
233 font-family: var(--font-mono);
234 padding: 1px 5px;
235 border-radius: var(--radius-sm);
236 text-transform: lowercase;
237 letter-spacing: 0.02em;
238 background: color-mix(in srgb, var(--color-accent) 10%, transparent);
239 color: var(--color-accent);
240 border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
241 flex-shrink: 0;
242
243 &[data-type="feat"],
244 &[data-type="feature"] { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: $proposal-open; border-color: color-mix(in srgb, var(--color-success) 22%, transparent); }
245 &[data-type="fix"],
246 &[data-type="bugfix"],
247 &[data-type="hotfix"] { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: $proposal-closed; border-color: color-mix(in srgb, var(--color-danger) 22%, transparent); }
248 &[data-type="refactor"] { background: color-mix(in srgb, var(--color-purple) 10%, transparent); color: $proposal-merged; border-color: color-mix(in srgb, var(--color-purple) 22%, transparent); }
249 &[data-type="docs"] { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 22%, transparent); }
250 &[data-type="test"] { background: color-mix(in srgb, var(--color-teal) 10%, transparent); color: var(--color-teal); border-color: rgba(45, 212, 191, 0.22); }
251 &[data-type="chore"],
252 &[data-type="style"] { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-secondary); border-color: color-mix(in srgb, var(--text-secondary) 22%, transparent); }
253 &[data-type="redesign"] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.22); }
254 &[data-type="breaking"],
255 &[data-type="major"] { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: $proposal-closed; border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); font-weight: var(--font-weight-black); }
256 }
257
258 // Semver impact pill
259 .prl-impact {
260 display: inline-block;
261 font-size: 9px;
262 font-weight: var(--font-weight-black);
263 font-family: var(--font-mono);
264 padding: 1px 4px;
265 border-radius: 2px;
266 text-transform: uppercase;
267 letter-spacing: 0.06em;
268 flex-shrink: 0;
269
270 &--major { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: $proposal-closed; }
271 &--minor { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: $proposal-open; }
272 &--patch { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-secondary); }
273 }
274
275 // Meta row
276 .prl-row-meta {
277 display: flex;
278 align-items: center;
279 flex-wrap: wrap;
280 gap: 5px;
281 font-size: 11px;
282 color: var(--text-muted);
283 min-width: 0;
284 }
285
286 .prl-branch {
287 display: inline-flex;
288 align-items: center;
289 gap: 3px;
290 font-size: 11px;
291 font-family: var(--font-mono);
292 color: var(--text-muted);
293 background: var(--bg-overlay);
294 border: 1px solid var(--border-subtle);
295 border-radius: var(--radius-sm);
296 padding: 1px 5px;
297 max-width: 200px;
298 overflow: hidden;
299 text-overflow: ellipsis;
300 white-space: nowrap;
301
302 &--from {
303 color: var(--color-accent);
304 border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
305 background: color-mix(in srgb, var(--color-accent) 7%, transparent);
306 }
307 }
308
309 .prl-arrow { flex-shrink: 0; color: var(--text-muted); opacity: 0.5; }
310 .prl-meta-dot { opacity: 0.3; flex-shrink: 0; }
311
312 .prl-actor {
313 display: inline-flex;
314 align-items: center;
315 gap: 4px;
316 color: var(--text-secondary);
317 font-weight: var(--weight-medium);
318 flex-shrink: 0;
319 }
320
321 .prl-avatar {
322 width: 14px;
323 height: 14px;
324 border-radius: 50%;
325 display: inline-flex;
326 align-items: center;
327 justify-content: center;
328 font-size: 7px;
329 font-weight: var(--weight-bold);
330 color: #fff;
331 flex-shrink: 0;
332 }
333
334 .prl-date { color: var(--text-muted); flex-shrink: 0; }
335
336 .prl-snippet {
337 font-size: 11px;
338 color: var(--text-muted);
339 overflow: hidden;
340 white-space: nowrap;
341 text-overflow: ellipsis;
342 opacity: 0.75;
343 min-width: 0;
344 max-width: 320px;
345 }
346
347 .prl-merged-label {
348 display: inline-flex;
349 align-items: center;
350 gap: 4px;
351 font-size: 11px;
352 color: $proposal-merged;
353 opacity: 0.8;
354 }
355
356 .prl-closed-label { font-size: 11px; color: $proposal-closed; opacity: 0.7; }
357
358 .prl-sha {
359 font-size: 10px;
360 font-family: var(--font-mono);
361 color: var(--text-muted);
362 opacity: 0.6;
363 text-decoration: none;
364 transition: opacity var(--transition-fast);
365 &:hover { opacity: 1; text-decoration: underline; }
366 }
367
368 .prl-chevron {
369 flex-shrink: 0;
370 color: var(--text-muted);
371 opacity: 0;
372 transition: opacity var(--transition-fast);
373 }
374 .prl-row:hover .prl-chevron { opacity: 0.5; }
375
376 // ── Empty state ───────────────────────────────────────────────────────────────
377
378 .prl-empty-icon { opacity: 0.18; margin-bottom: var(--space-2); }
379
380 .prl-empty-title {
381 font-size: 18px;
382 font-weight: var(--weight-semibold);
383 color: var(--text-secondary);
384 }
385
386 .prl-empty-desc {
387 font-size: 13px;
388 color: var(--text-muted);
389 line-height: 1.6;
390 max-width: 380px;
391 }
392
393 .prl-empty-cli {
394 display: inline-flex;
395 align-items: center;
396 gap: 8px;
397 margin-top: var(--space-2);
398 padding: var(--space-2) var(--space-4);
399 border-radius: var(--radius-md);
400 background: var(--bg-overlay);
401 border: 1px solid var(--border-subtle);
402 font-size: 12px;
403 }
404
405 .prl-empty-cli-prompt { font-family: var(--font-mono); color: var(--text-muted); opacity: 0.5; }
406 .prl-empty-cli-cmd { font-family: var(--font-mono); color: var(--text-primary); font-weight: var(--weight-medium); }
407 .prl-empty-cli-hint { color: var(--text-muted); border-left: 1px solid var(--border-subtle); padding-left: 8px; }
408
409 // ── Risk badge ────────────────────────────────────────────────────────────────
410
411 .prl-risk-badge {
412 display: inline-flex;
413 align-items: center;
414 font-size: 0.62rem;
415 font-weight: 700;
416 text-transform: uppercase;
417 letter-spacing: 0.07em;
418 padding: 2px 7px;
419 border-radius: 9999px;
420 border: 1px solid;
421 font-family: var(--font-mono);
422 white-space: nowrap;
423
424 &--low { 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); }
425 &--medium { 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); }
426 &--high { color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 35%, transparent); background: color-mix(in srgb, var(--color-orange) 8%, transparent); }
427 &--critical { color: var(--color-danger-critical); border-color: color-mix(in srgb, var(--color-danger-critical) 35%, transparent); background: color-mix(in srgb, var(--color-danger-critical) 8%, transparent); }
428 }
File History 1 commit
sha256:a34090cc4a394a78bd72cbbe34b08cc59525141e19135b6c0ab154f10611b9ef debug(push/stream): instrument O-frame decode path with INF… Sonnet 4.6 patch 122 days ago