gabriel / musehub public
_commit-detail.scss
371 lines 8.9 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 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(100dvh - 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 min-height: 0;
123 overflow: hidden;
124 padding: var(--space-4) var(--space-6) 0;
125 max-width: 1280px;
126 margin: 0 auto;
127 width: 100%;
128
129 @media (max-width: 900px) { grid-template-columns: 1fr; }
130 }
131
132 .cmt-main {
133 min-width: 0;
134 height: 100%;
135 overflow-y: auto;
136 scrollbar-width: thin;
137 scrollbar-color: var(--border-default) transparent;
138 padding-bottom: var(--space-10);
139 display: flex;
140 flex-direction: column;
141 gap: var(--space-3);
142 }
143
144 .cmt-sidebar {
145 height: 100%;
146 overflow-y: auto;
147 scrollbar-width: thin;
148 scrollbar-color: var(--border-default) transparent;
149 padding-bottom: var(--space-10);
150
151 @media (max-width: 900px) { height: auto; overflow-y: visible; }
152 }
153
154 // ── Badge row inside eyebrow ──────────────────────────────────────────────────
155
156 .cmt-badges {
157 display: flex;
158 align-items: center;
159 gap: var(--space-2);
160 flex-wrap: wrap;
161 }
162
163 // ── Dimension strip ───────────────────────────────────────────────────────────
164
165 .cmt-dims {
166 display: flex;
167 gap: var(--space-2);
168 flex-wrap: wrap;
169 }
170
171 .cmt-dim {
172 display: flex;
173 flex-direction: column;
174 align-items: center;
175 justify-content: center;
176 padding: var(--space-3) var(--space-4);
177 gap: 4px;
178 min-width: 80px;
179 }
180
181 // ── Sections ──────────────────────────────────────────────────────────────────
182
183 .cmt-section-hd {
184 display: flex;
185 align-items: center;
186 gap: var(--space-2);
187 padding: 10px 14px;
188 }
189
190 .cmt-section-title-row {
191 display: flex;
192 align-items: center;
193 gap: 8px;
194 flex: 1;
195 min-width: 0;
196 }
197
198 .cmt-tally {
199 display: flex;
200 gap: 5px;
201 margin-left: auto;
202 }
203
204 // ── File cards (semantic changes) ─────────────────────────────────────────────
205
206 .cmt-file-hd {
207 display: flex;
208 align-items: center;
209 gap: var(--space-2);
210 padding: 8px 14px;
211 }
212
213 .cmt-file-summary { margin-left: auto; }
214
215 .cmt-sym-tree {
216 display: flex;
217 flex-direction: column;
218 gap: 1px;
219 padding: 4px 14px 8px;
220 }
221
222 .cmt-sym-row {
223 display: flex;
224 align-items: center;
225 gap: 6px;
226 padding: 3px 4px;
227 }
228
229 .cmt-sym-row--child { padding-left: 16px; }
230 .cmt-sym-indent { display: inline-flex; align-items: center; }
231
232 // ── Flat file list ────────────────────────────────────────────────────────────
233
234 .cmt-file-list {
235 display: flex;
236 flex-direction: column;
237 gap: 2px;
238 padding: 8px 14px 12px;
239 }
240
241 .cmt-fl-row {
242 display: flex;
243 align-items: center;
244 gap: 8px;
245 padding: 3px 4px;
246 }
247
248 .cmt-fl-dot {
249 width: 14px;
250 text-align: center;
251 flex-shrink: 0;
252 }
253
254 // ── Commit navigation ─────────────────────────────────────────────────────────
255
256 .cmt-nav {
257 display: grid;
258 grid-template-columns: 1fr auto 1fr;
259 align-items: center;
260 gap: var(--space-3);
261 }
262
263 .cmt-nav-card {
264 display: flex;
265 flex-direction: column;
266 gap: 4px;
267 padding: var(--space-3) var(--space-4);
268 }
269
270 .cmt-nav-card--newer { align-items: flex-end; text-align: right; }
271 .cmt-nav-all { text-align: center; }
272
273 // ── Discussion ────────────────────────────────────────────────────────────────
274
275 .cmt-disc-hd {
276 display: flex;
277 align-items: center;
278 gap: var(--space-2);
279 margin-bottom: var(--space-3);
280 }
281
282 .cmt-comment-list {
283 display: flex;
284 flex-direction: column;
285 gap: var(--space-3);
286 margin-bottom: var(--space-4);
287 }
288
289 .cmt-cli-hint {
290 display: flex;
291 align-items: center;
292 gap: var(--space-2);
293 padding: var(--space-3) var(--space-4);
294 border-radius: var(--radius-sm);
295 font-size: 13px;
296
297 .cmt-cli-hint-icon { flex-shrink: 0; opacity: 0.6; }
298 }
299
300 // ── Sidebar ───────────────────────────────────────────────────────────────────
301
302 .cmt-side-panel { position: relative; }
303
304 .cmt-scard {
305 border-bottom: 1px solid var(--border-subtle);
306 &:last-child { border-bottom: none; }
307 }
308
309 .cmt-scard-hd {
310 display: flex;
311 align-items: center;
312 gap: 7px;
313 padding: 10px 14px;
314 border-bottom: 1px solid var(--border-subtle);
315 }
316
317 .cmt-scard-identity {
318 display: flex;
319 flex-direction: column;
320 gap: 4px;
321 padding: 10px 14px 8px;
322 border-bottom: 1px solid var(--border-subtle);
323 }
324
325 .cmt-scard-row {
326 display: flex;
327 align-items: flex-start;
328 gap: var(--space-2);
329 padding: 5px 14px;
330 border-bottom: 1px solid var(--border-subtle);
331 &:last-child { border-bottom: none; }
332 }
333
334 .cmt-scard-label {
335 min-width: 58px;
336 flex-shrink: 0;
337 padding-top: 1px;
338 }
339
340 .cmt-scard-val {
341 display: flex;
342 align-items: center;
343 gap: 5px;
344 flex: 1;
345 min-width: 0;
346 flex-wrap: wrap;
347
348 &.cmt-scard-val--col {
349 flex-direction: column;
350 align-items: flex-start;
351 gap: 2px;
352 }
353 }
354
355 .cmt-parents {
356 display: flex;
357 flex-direction: column;
358 gap: 3px;
359 }
360
361 .cmt-reviewers {
362 display: flex;
363 flex-wrap: wrap;
364 gap: 3px;
365 }
366
367 .cmt-scard-action {
368 padding: var(--space-2) var(--space-3) var(--space-3);
369
370 .btn { width: 100%; font-size: 11px; }
371 }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago