gabriel / musehub public
_commit-detail.scss
370 lines 8.9 KB
Raw
sha256:3c58668648c7323bb9f5c6881cfe6a3f14fc93fcb73b537d253732952a5bf8bf chore: bump version to 0.2.0rc12 Sonnet 4.6 patch 9 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Commit Detail (.cmt-* prefix)
3 // File: src/scss/pages/_commit-detail.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_commit-detail.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Page skeleton ─────────────────────────────────────────────────────────────
10
11 .cmt-page {
12 display: flex;
13 flex-direction: column;
14 height: calc(100vh - var(--header-height));
15 overflow: hidden;
16 }
17
18 // ── Hero ──────────────────────────────────────────────────────────────────────
19
20 .cmt-hero { position: relative; border-bottom: 1px solid var(--border-default); overflow: hidden; }
21
22 .cmt-hero-inner {
23 position: relative;
24 max-width: 1280px;
25 margin: 0 auto;
26 padding: var(--space-7) var(--space-6) var(--space-6);
27 }
28
29 .cmt-eyebrow {
30 display: flex;
31 align-items: center;
32 justify-content: space-between;
33 gap: var(--space-3);
34 flex-wrap: wrap;
35 margin-bottom: var(--space-5);
36 }
37
38 .cmt-eyebrow-left {
39 display: flex;
40 align-items: center;
41 gap: var(--space-2);
42 flex-wrap: wrap;
43 }
44
45 .cmt-eyebrow-right {
46 display: flex;
47 align-items: center;
48 gap: var(--space-2);
49 flex-shrink: 0;
50 }
51
52 .cmt-hero-body {
53 display: flex;
54 gap: var(--space-10);
55 align-items: flex-start;
56
57 @media (max-width: 900px) { flex-direction: column; gap: var(--space-5); }
58 }
59
60 .cmt-hero-left {
61 flex: 1;
62 min-width: 0;
63 }
64
65 .cmt-hero-desc { margin-top: var(--space-3); }
66
67 // ── Manifest ──────────────────────────────────────────────────────────────────
68
69 .cmt-manifest {
70 display: flex;
71 flex-direction: column;
72 gap: 0;
73 flex-shrink: 0;
74 width: 340px;
75
76 @media (max-width: 900px) { width: 100%; }
77 }
78
79 .cmt-manifest-row {
80 display: flex;
81 align-items: baseline;
82 justify-content: space-between;
83 gap: var(--space-4);
84 padding: 6px 0;
85 border-bottom: 1px solid var(--border-subtle);
86 &:last-child { border-bottom: none; }
87 }
88
89 .cmt-manifest-val {
90 display: flex;
91 align-items: center;
92 gap: 5px;
93 flex-wrap: wrap;
94 min-width: 0;
95 font-size: 12px;
96 flex: 1;
97 }
98
99 .cmt-manifest-key {
100 font-size: 10px;
101 text-transform: uppercase;
102 letter-spacing: 0.07em;
103 font-weight: var(--weight-semibold);
104 flex-shrink: 0;
105 text-align: right;
106 }
107
108 // ── Split-pane body ───────────────────────────────────────────────────────────
109
110 .cmt-wrap {
111 flex: 1;
112 overflow: hidden;
113 display: flex;
114 flex-direction: column;
115 }
116
117 .cmt-layout {
118 display: grid;
119 grid-template-columns: 1fr 260px;
120 gap: var(--space-5);
121 flex: 1;
122 overflow: hidden;
123 padding: var(--space-4) var(--space-6) 0;
124 max-width: 1280px;
125 margin: 0 auto;
126 width: 100%;
127
128 @media (max-width: 900px) { grid-template-columns: 1fr; }
129 }
130
131 .cmt-main {
132 min-width: 0;
133 height: 100%;
134 overflow-y: auto;
135 scrollbar-width: thin;
136 scrollbar-color: var(--border-default) transparent;
137 padding-bottom: var(--space-10);
138 display: flex;
139 flex-direction: column;
140 gap: var(--space-3);
141 }
142
143 .cmt-sidebar {
144 height: 100%;
145 overflow-y: auto;
146 scrollbar-width: thin;
147 scrollbar-color: var(--border-default) transparent;
148 padding-bottom: var(--space-10);
149
150 @media (max-width: 900px) { height: auto; overflow-y: visible; }
151 }
152
153 // ── Badge row inside eyebrow ──────────────────────────────────────────────────
154
155 .cmt-badges {
156 display: flex;
157 align-items: center;
158 gap: var(--space-2);
159 flex-wrap: wrap;
160 }
161
162 // ── Dimension strip ───────────────────────────────────────────────────────────
163
164 .cmt-dims {
165 display: flex;
166 gap: var(--space-2);
167 flex-wrap: wrap;
168 }
169
170 .cmt-dim {
171 display: flex;
172 flex-direction: column;
173 align-items: center;
174 justify-content: center;
175 padding: var(--space-3) var(--space-4);
176 gap: 4px;
177 min-width: 80px;
178 }
179
180 // ── Sections ──────────────────────────────────────────────────────────────────
181
182 .cmt-section-hd {
183 display: flex;
184 align-items: center;
185 gap: var(--space-2);
186 padding: 10px 14px;
187 }
188
189 .cmt-section-title-row {
190 display: flex;
191 align-items: center;
192 gap: 8px;
193 flex: 1;
194 min-width: 0;
195 }
196
197 .cmt-tally {
198 display: flex;
199 gap: 5px;
200 margin-left: auto;
201 }
202
203 // ── File cards (semantic changes) ─────────────────────────────────────────────
204
205 .cmt-file-hd {
206 display: flex;
207 align-items: center;
208 gap: var(--space-2);
209 padding: 8px 14px;
210 }
211
212 .cmt-file-summary { margin-left: auto; }
213
214 .cmt-sym-tree {
215 display: flex;
216 flex-direction: column;
217 gap: 1px;
218 padding: 4px 14px 8px;
219 }
220
221 .cmt-sym-row {
222 display: flex;
223 align-items: center;
224 gap: 6px;
225 padding: 3px 4px;
226 }
227
228 .cmt-sym-row--child { padding-left: 16px; }
229 .cmt-sym-indent { display: inline-flex; align-items: center; }
230
231 // ── Flat file list ────────────────────────────────────────────────────────────
232
233 .cmt-file-list {
234 display: flex;
235 flex-direction: column;
236 gap: 2px;
237 padding: 8px 14px 12px;
238 }
239
240 .cmt-fl-row {
241 display: flex;
242 align-items: center;
243 gap: 8px;
244 padding: 3px 4px;
245 }
246
247 .cmt-fl-dot {
248 width: 14px;
249 text-align: center;
250 flex-shrink: 0;
251 }
252
253 // ── Commit navigation ─────────────────────────────────────────────────────────
254
255 .cmt-nav {
256 display: grid;
257 grid-template-columns: 1fr auto 1fr;
258 align-items: center;
259 gap: var(--space-3);
260 }
261
262 .cmt-nav-card {
263 display: flex;
264 flex-direction: column;
265 gap: 4px;
266 padding: var(--space-3) var(--space-4);
267 }
268
269 .cmt-nav-card--newer { align-items: flex-end; text-align: right; }
270 .cmt-nav-all { text-align: center; }
271
272 // ── Discussion ────────────────────────────────────────────────────────────────
273
274 .cmt-disc-hd {
275 display: flex;
276 align-items: center;
277 gap: var(--space-2);
278 margin-bottom: var(--space-3);
279 }
280
281 .cmt-comment-list {
282 display: flex;
283 flex-direction: column;
284 gap: var(--space-3);
285 margin-bottom: var(--space-4);
286 }
287
288 .cmt-cli-hint {
289 display: flex;
290 align-items: center;
291 gap: var(--space-2);
292 padding: var(--space-3) var(--space-4);
293 border-radius: var(--radius-sm);
294 font-size: 13px;
295
296 .cmt-cli-hint-icon { flex-shrink: 0; opacity: 0.6; }
297 }
298
299 // ── Sidebar ───────────────────────────────────────────────────────────────────
300
301 .cmt-side-panel { position: relative; }
302
303 .cmt-scard {
304 border-bottom: 1px solid var(--border-subtle);
305 &:last-child { border-bottom: none; }
306 }
307
308 .cmt-scard-hd {
309 display: flex;
310 align-items: center;
311 gap: 7px;
312 padding: 10px 14px;
313 border-bottom: 1px solid var(--border-subtle);
314 }
315
316 .cmt-scard-identity {
317 display: flex;
318 flex-direction: column;
319 gap: 4px;
320 padding: 10px 14px 8px;
321 border-bottom: 1px solid var(--border-subtle);
322 }
323
324 .cmt-scard-row {
325 display: flex;
326 align-items: flex-start;
327 gap: var(--space-2);
328 padding: 5px 14px;
329 border-bottom: 1px solid var(--border-subtle);
330 &:last-child { border-bottom: none; }
331 }
332
333 .cmt-scard-label {
334 min-width: 58px;
335 flex-shrink: 0;
336 padding-top: 1px;
337 }
338
339 .cmt-scard-val {
340 display: flex;
341 align-items: center;
342 gap: 5px;
343 flex: 1;
344 min-width: 0;
345 flex-wrap: wrap;
346
347 &.cmt-scard-val--col {
348 flex-direction: column;
349 align-items: flex-start;
350 gap: 2px;
351 }
352 }
353
354 .cmt-parents {
355 display: flex;
356 flex-direction: column;
357 gap: 3px;
358 }
359
360 .cmt-reviewers {
361 display: flex;
362 flex-wrap: wrap;
363 gap: 3px;
364 }
365
366 .cmt-scard-action {
367 padding: var(--space-2) var(--space-3) var(--space-3);
368
369 .btn { width: 100%; font-size: 11px; }
370 }
File History 1 commit
sha256:35d76015db2541686c33edd44343ea2d9f751325b4a5556cc9c4c9c0f84edbbe chore: bump version to 0.2.0rc12 Sonnet 4.6 patch 7 days ago