gabriel / musehub public
_commits.scss
356 lines 9.2 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Commits list page (.cl-* prefix)
3 // File: src/scss/components/_commits.scss
4 //
5 // Visual rules only — colors, typography, backgrounds, borders, animations.
6 // Structural layout lives in pages/_commits.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Page header ───────────────────────────────────────────────────────────────
10
11 .commits-header {
12 margin-bottom: var(--space-3);
13
14 h1 {
15 font-size: 20px;
16 font-weight: var(--weight-semibold);
17 color: var(--text-primary);
18 margin: 0;
19 }
20 }
21
22 .filter-active-badge {
23 font-size: 10px;
24 font-weight: 600;
25 padding: 2px 7px;
26 border-radius: 999px;
27 background: color-mix(in srgb, var(--color-accent) 15%, transparent);
28 color: var(--color-accent);
29 border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
30 }
31
32 // ── Filter bar ────────────────────────────────────────────────────────────────
33
34 .filter-bar {
35 display: flex;
36 flex-wrap: wrap;
37 align-items: flex-end;
38 gap: var(--space-3);
39 padding: var(--space-3) var(--space-4);
40 background: var(--bg-surface);
41 border: 1px solid var(--border-default);
42 border-radius: var(--radius-md);
43 margin-bottom: var(--space-3);
44 }
45
46 .filter-group {
47 display: flex;
48 flex-direction: column;
49 gap: 4px;
50 min-width: 120px;
51
52 label {
53 font-size: 11px;
54 font-weight: var(--weight-semibold);
55 color: var(--text-muted);
56 text-transform: uppercase;
57 letter-spacing: 0.04em;
58 }
59
60 select,
61 input[type="search"],
62 input[type="date"] {
63 font-size: 12px;
64 font-family: inherit;
65 color: var(--text-primary);
66 background: var(--bg-base);
67 border: 1px solid var(--border-default);
68 border-radius: var(--radius-sm);
69 padding: 5px 8px;
70 outline: none;
71 transition: border-color 0.15s;
72
73 &:focus { border-color: var(--color-accent); }
74 &::placeholder { color: var(--text-muted); }
75 }
76
77 select { cursor: pointer; }
78 }
79
80 .filter-bar-actions {
81 display: flex;
82 align-items: flex-end;
83 gap: var(--space-2);
84 padding-bottom: 1px;
85 margin-left: auto;
86 }
87
88 // ── Toolbar ───────────────────────────────────────────────────────────────────
89
90 .commits-toolbar {
91 display: flex;
92 align-items: center;
93 gap: var(--space-2);
94 margin-bottom: var(--space-3);
95 flex-wrap: wrap;
96 }
97
98 .branch-select-form {
99 display: inline-flex;
100 align-items: center;
101 gap: 6px;
102 font-size: 12px;
103 color: var(--text-muted);
104
105 select {
106 font-size: 12px;
107 font-family: inherit;
108 color: var(--text-primary);
109 background: var(--bg-surface);
110 border: 1px solid var(--border-default);
111 border-radius: var(--radius-sm);
112 padding: 4px 8px;
113 outline: none;
114 cursor: pointer;
115 transition: border-color 0.15s;
116
117 &:focus { border-color: var(--color-accent); }
118 }
119 }
120
121 // ── Compare strip ─────────────────────────────────────────────────────────────
122
123 .compare-strip {
124 display: none;
125 align-items: center;
126 gap: var(--space-3);
127 padding: var(--space-2) var(--space-4);
128 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
129 border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
130 border-radius: var(--radius-md);
131 margin-bottom: var(--space-3);
132 font-size: 13px;
133 color: var(--text-secondary);
134
135 &.is-active { display: flex; }
136 }
137
138 // ── Commit list ───────────────────────────────────────────────────────────────
139
140 .commit-list-table {
141 display: flex;
142 flex-direction: column;
143 }
144
145 .commit-list-row {
146 display: grid;
147 grid-template-columns: 24px 28px 1fr;
148 align-items: stretch;
149 min-height: 60px;
150 border-bottom: 1px solid var(--border-subtle);
151 transition: background 0.1s;
152
153 &:last-child { border-bottom: none; }
154 &:hover { background: var(--bg-hover); }
155
156 &.is-selected { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
157 }
158
159 // ── DAG lane ─────────────────────────────────────────────────────────────────
160
161 .dag-col {
162 display: flex;
163 flex-direction: column;
164 align-items: center;
165 padding: 0 4px;
166 }
167
168 .dag-line {
169 width: 2px;
170 flex: 1;
171 background: var(--border-subtle);
172
173 &.dag-line-top { min-height: 10px; }
174 &.dag-line-bottom { min-height: 10px; }
175 }
176
177 .dag-node {
178 width: 10px;
179 height: 10px;
180 border-radius: 50%;
181 background: var(--color-accent);
182 border: 2px solid var(--bg-base);
183 flex-shrink: 0;
184 z-index: 1;
185
186 &.dag-node-merge {
187 background: var(--color-purple);
188 border-radius: 2px;
189 transform: rotate(45deg);
190 }
191
192 &.dag-node-root {
193 background: var(--color-success);
194 }
195 }
196
197 .dag-merge-arm {
198 position: absolute;
199 left: -8px;
200 top: 50%;
201 transform: translateY(-50%);
202 width: 8px;
203 height: 2px;
204 background: var(--border-default);
205 }
206
207 // ── Compare checkbox ──────────────────────────────────────────────────────────
208
209 .compare-col {
210 display: flex;
211 align-items: center;
212 justify-content: center;
213 padding: 0 2px;
214 }
215
216 .compare-check {
217 display: none;
218 accent-color: var(--color-accent);
219 cursor: pointer;
220 width: 13px;
221 height: 13px;
222
223 .compare-mode & { display: block; }
224 }
225
226 // ── Commit cell ───────────────────────────────────────────────────────────────
227
228 .commit-cell {
229 padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
230 display: flex;
231 flex-direction: column;
232 justify-content: center;
233 gap: 4px;
234 min-width: 0;
235 }
236
237 .commit-cell-top {
238 display: flex;
239 align-items: center;
240 gap: 6px;
241 flex-wrap: wrap;
242 min-width: 0;
243 }
244
245 .commit-cell-bottom {
246 display: flex;
247 align-items: center;
248 gap: var(--space-3);
249 flex-wrap: wrap;
250 }
251
252 .commit-subject-link {
253 font-size: 13px;
254 font-weight: var(--weight-semibold);
255 color: var(--text-primary);
256 text-decoration: none;
257 overflow: hidden;
258 text-overflow: ellipsis;
259 white-space: nowrap;
260 min-width: 0;
261 flex: 1;
262
263 &:hover { color: var(--color-accent-link); }
264 }
265
266 .merge-indicator {
267 font-size: 10px;
268 padding: 1px 5px;
269 border-radius: 3px;
270 background: color-mix(in srgb, var(--color-purple) 15%, transparent);
271 color: var(--color-purple);
272 font-weight: 600;
273 white-space: nowrap;
274 flex-shrink: 0;
275 }
276
277 .meta-badges {
278 display: inline-flex;
279 align-items: center;
280 gap: 4px;
281 flex-wrap: wrap;
282 }
283
284 .commit-sha-link {
285 font-family: var(--font-mono);
286 font-size: 11px;
287 color: var(--text-muted);
288 text-decoration: none;
289 padding: 1px 5px;
290 border-radius: 3px;
291 background: var(--bg-overlay);
292 border: 1px solid var(--border-subtle);
293 transition: color 0.1s, border-color 0.1s;
294 flex-shrink: 0;
295
296 &:hover {
297 color: var(--color-accent-link);
298 border-color: var(--color-accent);
299 }
300 }
301
302 .commit-meta-item {
303 display: inline-flex;
304 align-items: center;
305 gap: 3px;
306 font-size: 11px;
307 color: var(--text-muted);
308 text-decoration: none;
309 white-space: nowrap;
310
311 svg { flex-shrink: 0; }
312 }
313
314 // ── Pagination ────────────────────────────────────────────────────────────────
315
316 .pagination-bar {
317 display: flex;
318 align-items: center;
319 justify-content: space-between;
320 border-top: 1px solid var(--border-subtle);
321 }
322
323 .pagination-info {
324 font-size: 12px;
325 color: var(--text-muted);
326 }
327
328 .pagination-nav {
329 display: flex;
330 gap: var(--space-2);
331 }
332
333 // ── Empty state ───────────────────────────────────────────────────────────────
334
335 .commits-empty {
336 padding: var(--space-6) var(--space-4);
337 text-align: center;
338
339 .empty-icon { font-size: 32px; margin-bottom: var(--space-3); opacity: 0.5; }
340
341 .empty-title {
342 font-size: 15px;
343 font-weight: var(--weight-semibold);
344 color: var(--text-primary);
345 margin: 0 0 var(--space-2);
346 }
347
348 .empty-desc {
349 font-size: 13px;
350 color: var(--text-muted);
351 margin: 0;
352
353 a { color: var(--color-accent-link); }
354 code { font-family: var(--font-mono); font-size: 12px; }
355 }
356 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago