gabriel / musehub public
_mists.scss
405 lines 9.5 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Mists (.ms-* layout)
3 // File: src/scss/pages/_mists.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_mists.scss.
7 // Covers: mist_explore, mist_list, mist_detail, fragments/mist_rows
8 // ─────────────────────────────────────────────────────────────────────────────
9
10 // ── Shared page wrapper ───────────────────────────────────────────────────────
11
12 .ms-page {
13 display: flex;
14 flex-direction: column;
15 gap: var(--space-4);
16 }
17
18 // ── Shared primitives (structural only) ──────────────────────────────────────
19
20 .ms-btn {
21 display: inline-flex;
22 align-items: center;
23 gap: 5px;
24 padding: 5px 12px;
25
26 &--sm { padding: 3px 8px; }
27 }
28
29 .ms-type-chip {
30 display: inline-flex;
31 align-items: center;
32 padding: 2px 7px;
33 }
34
35 .ms-lang-badge { padding: 1px 6px; }
36 .ms-agent-badge { padding: 1px 6px; }
37 .ms-signed-badge { padding: 1px 6px; }
38 .ms-mist-id-badge { padding: 1px 6px; }
39
40 .ms-tag {
41 display: inline-flex;
42 align-items: center;
43 padding: 2px 8px;
44 }
45
46 // ── Explore header ────────────────────────────────────────────────────────────
47
48 .ms-explore-header {
49 display: flex;
50 align-items: flex-start;
51 justify-content: space-between;
52 gap: var(--space-4);
53 }
54
55 .ms-explore-sub {
56 margin-top: var(--space-1);
57 max-width: 60ch;
58 }
59
60 // ── List header ───────────────────────────────────────────────────────────────
61
62 .ms-list-header {
63 display: flex;
64 align-items: flex-start;
65 justify-content: space-between;
66 gap: var(--space-4);
67 flex-wrap: wrap;
68 }
69
70 .ms-list-title {
71 display: flex;
72 align-items: center;
73 gap: 6px;
74 }
75
76 .ms-list-sub { margin-top: var(--space-1); }
77
78 .ms-list-header-actions {
79 display: flex;
80 align-items: center;
81 gap: var(--space-2);
82 }
83
84 // ── Filter bar ────────────────────────────────────────────────────────────────
85
86 .ms-filter-bar {
87 display: flex;
88 align-items: center;
89 justify-content: space-between;
90 gap: var(--space-3);
91 flex-wrap: wrap;
92 }
93
94 .ms-filter-types {
95 display: flex;
96 align-items: center;
97 gap: var(--space-2);
98 flex-wrap: wrap;
99 }
100
101 .ms-type-filter {
102 display: inline-flex;
103 align-items: center;
104 padding: 4px 12px;
105 }
106
107 .ms-filter-right {
108 display: flex;
109 align-items: center;
110 gap: var(--space-2);
111 }
112
113 // ── Pagination ────────────────────────────────────────────────────────────────
114
115 .ms-pagination {
116 display: flex;
117 justify-content: center;
118 padding: var(--space-4) 0;
119 }
120
121 // ── Mist rows list ────────────────────────────────────────────────────────────
122
123 .ms-list {
124 display: flex;
125 flex-direction: column;
126 }
127
128 .ms-row {
129 display: flex;
130 align-items: center;
131 gap: var(--space-3);
132 padding: 12px 16px;
133 }
134
135 .ms-row-body {
136 flex: 1;
137 min-width: 0;
138 display: flex;
139 flex-direction: column;
140 gap: 4px;
141 }
142
143 .ms-row-title {
144 display: flex;
145 align-items: center;
146 gap: 8px;
147 flex-wrap: wrap;
148 }
149
150 .ms-row-meta {
151 display: flex;
152 align-items: center;
153 gap: 6px;
154 flex-wrap: wrap;
155 }
156
157 .ms-meta-owner {
158 display: inline-flex;
159 align-items: center;
160 gap: 4px;
161 }
162
163 .ms-row-right {
164 display: flex;
165 align-items: center;
166 gap: var(--space-3);
167 flex-shrink: 0;
168 }
169
170 .ms-row-count {
171 display: inline-flex;
172 align-items: center;
173 gap: 4px;
174 }
175
176 .ms-row-chevron {
177 display: flex;
178 align-items: center;
179 }
180
181 // ── Empty state ───────────────────────────────────────────────────────────────
182
183 .ms-empty {
184 display: flex;
185 flex-direction: column;
186 align-items: center;
187 justify-content: center;
188 gap: var(--space-3);
189 padding: var(--space-12) var(--space-6);
190 text-align: center;
191 }
192
193 .ms-empty-desc { max-width: 44ch; }
194
195 // ── Detail page ───────────────────────────────────────────────────────────────
196
197 .ms-detail-page {
198 display: flex;
199 flex-direction: column;
200 gap: var(--space-4);
201 }
202
203 // ── Detail header ─────────────────────────────────────────────────────────────
204
205 .ms-detail-header {
206 display: flex;
207 align-items: flex-start;
208 justify-content: space-between;
209 gap: var(--space-6);
210 flex-wrap: wrap;
211 padding-bottom: var(--space-4);
212 }
213
214 .ms-detail-header-left {
215 flex: 1;
216 min-width: 0;
217 display: flex;
218 flex-direction: column;
219 gap: var(--space-2);
220 }
221
222 .ms-detail-header-right {
223 display: flex;
224 flex-direction: column;
225 gap: var(--space-3);
226 align-items: flex-end;
227 }
228
229 .ms-detail-breadcrumb {
230 display: flex;
231 align-items: center;
232 gap: 5px;
233 flex-wrap: wrap;
234 }
235
236 .ms-detail-title { margin-top: var(--space-1); }
237
238 .ms-detail-meta {
239 display: flex;
240 align-items: center;
241 gap: 8px;
242 flex-wrap: wrap;
243 }
244
245 .ms-detail-description { max-width: 72ch; }
246
247 .ms-detail-tags {
248 display: flex;
249 flex-wrap: wrap;
250 gap: var(--space-2);
251 }
252
253 // ── Stats + actions ───────────────────────────────────────────────────────────
254
255 .ms-detail-stats {
256 display: flex;
257 gap: var(--space-4);
258 }
259
260 .ms-stat {
261 display: flex;
262 flex-direction: column;
263 align-items: center;
264 gap: 2px;
265 }
266
267 .ms-detail-actions {
268 display: flex;
269 gap: var(--space-2);
270 }
271
272 // ── Two-column body ───────────────────────────────────────────────────────────
273
274 .ms-detail-body {
275 display: grid;
276 grid-template-columns: 1fr 280px;
277 gap: var(--space-4);
278 align-items: start;
279
280 @media (max-width: 900px) { grid-template-columns: 1fr; }
281 }
282
283 .ms-detail-main { min-width: 0; }
284
285 // ── Content card ──────────────────────────────────────────────────────────────
286
287 .ms-content-toolbar {
288 display: flex;
289 align-items: center;
290 justify-content: space-between;
291 padding: 8px 14px;
292 }
293
294 .ms-content-actions {
295 display: flex;
296 gap: var(--space-2);
297 }
298
299 .ms-content-pre {
300 max-height: 640px;
301 overflow: auto;
302 }
303
304 .ms-midi-placeholder {
305 display: flex;
306 flex-direction: column;
307 align-items: center;
308 gap: var(--space-3);
309 padding: var(--space-10);
310 }
311
312 // ── Sidebar ───────────────────────────────────────────────────────────────────
313
314 .ms-detail-sidebar {
315 display: flex;
316 flex-direction: column;
317 gap: var(--space-3);
318 }
319
320 .ms-sidebar-card {
321 padding: 14px;
322 display: flex;
323 flex-direction: column;
324 gap: 10px;
325
326 &--embed { gap: 8px; }
327 }
328
329 .ms-sidebar-card-title {
330 display: flex;
331 align-items: center;
332 gap: 7px;
333 }
334
335 .ms-sidebar-count { padding: 1px 5px; }
336
337 .ms-sidebar-link {
338 display: flex;
339 align-items: center;
340 gap: 6px;
341 }
342
343 // ── Anchor + forks lists ──────────────────────────────────────────────────────
344
345 .ms-anchor-list {
346 list-style: none;
347 padding: 0;
348 margin: 0;
349 display: flex;
350 flex-direction: column;
351 gap: 5px;
352 }
353
354 .ms-anchor-item {
355 display: flex;
356 align-items: center;
357 gap: 6px;
358 }
359
360 .ms-forks-list {
361 list-style: none;
362 padding: 0;
363 margin: 0;
364 display: flex;
365 flex-direction: column;
366 gap: 8px;
367
368 li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
369 }
370
371 .ms-mini-avatar {
372 width: 16px;
373 height: 16px;
374 flex-shrink: 0;
375 }
376
377 // ── Embed snippets ────────────────────────────────────────────────────────────
378
379 .ms-embed-label {
380 margin-top: 4px;
381 &:first-of-type { margin-top: 0; }
382 }
383
384 .ms-embed-snippet {
385 position: relative;
386 padding: 8px 32px 8px 10px;
387 overflow: hidden;
388 }
389
390 .ms-embed-copy {
391 position: absolute;
392 top: 6px;
393 right: 6px;
394 padding: 3px 5px;
395 display: flex;
396 align-items: center;
397 }
398
399 // ── Agent provenance rows ─────────────────────────────────────────────────────
400
401 .ms-prov-row {
402 display: flex;
403 gap: 8px;
404 align-items: baseline;
405 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago