gabriel / musehub public
_repo-home.scss
364 lines 11.7 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 156 days ago
1 // _repo-home.scss — Repository home page + tree browser (.rh-*, .ft-*, .tree-* prefixes)
2
3 // ── Tree page path pills ──────────────────────────────────────────────────────
4 .tree-path-pills {
5 display: flex;
6 align-items: center;
7 gap: 4px;
8 margin-left: var(--space-2);
9 font-size: 12px;
10 }
11 .tree-path-sep { color: var(--text-muted); }
12 .tree-path-pill {
13 display: inline-flex;
14 align-items: center;
15 gap: 3px;
16 padding: 1px 6px;
17 border-radius: 4px;
18 text-decoration: none;
19 color: var(--color-accent);
20 &:hover { text-decoration: underline; }
21 &--root {
22 padding: 2px 5px;
23 color: var(--text-muted);
24 &:hover { color: var(--text-primary); }
25 }
26 &--current {
27 color: var(--text-primary);
28 font-weight: 600;
29 pointer-events: none;
30 }
31 }
32
33 // ── Sidebar pulse rows ────────────────────────────────────────────────────────
34 .rh-pulse-row--sidebar {
35 display: flex;
36 flex-direction: column;
37 gap: 6px;
38
39 .rh-pulse-content { flex: unset; width: 100%; }
40 svg.rh-spark { width: 100%; height: 32px; }
41 }
42 .rh-pulse-row--top-gap { margin-top: 10px; }
43 .rh-pulse-langs--sidebar { flex-wrap: wrap; gap: 6px 10px; }
44
45 // ── README below file tree ────────────────────────────────────────────────────
46 .rh-readme {
47 margin-top: var(--space-4);
48 border-top: 1px solid var(--border-subtle);
49 padding-top: var(--space-3);
50 }
51 .rh-readme-hd {
52 display: flex;
53 align-items: center;
54 gap: var(--space-2);
55 margin-bottom: var(--space-3);
56 font-size: 12px;
57 font-weight: 600;
58 color: var(--text-muted);
59 text-transform: uppercase;
60 letter-spacing: 0.06em;
61 }
62 .rh-readme-body {
63 font-size: 13.5px;
64 line-height: 1.65;
65 color: var(--text-primary);
66
67 h1, h2 { font-size: 15px; font-weight: 600; margin: 1.2em 0 0.4em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.3em; }
68 h3, h4 { font-size: 13px; font-weight: 600; margin: 1em 0 0.3em; }
69 p { margin: 0.5em 0; }
70 code { font-size: 12px; background: var(--bg-inset); padding: 1px 5px; border-radius: 3px; }
71 pre { background: var(--bg-inset); padding: var(--space-3); border-radius: 6px; overflow-x: auto; margin: 0.8em 0; }
72 pre code { background: none; padding: 0; }
73 a { color: var(--color-accent); }
74 ul, ol { padding-left: 1.4em; margin: 0.5em 0; }
75 blockquote { border-left: 3px solid var(--border-subtle); margin: 0.5em 0; padding-left: 0.8em; color: var(--text-muted); }
76 img { max-width: 100%; height: auto; }
77 }
78 // README header badges
79 .rh-readme-badges {
80 display: flex;
81 align-items: center;
82 gap: 5px;
83 margin-left: auto;
84 }
85 .rh-readme-badge {
86 font-size: 10px;
87 font-weight: 600;
88 padding: 2px 6px;
89 border-radius: 3px;
90 text-decoration: none;
91 white-space: nowrap;
92 background: var(--bg-inset);
93 color: var(--text-muted);
94 &--good { color: var(--color-success); }
95 &--fair { color: var(--color-warning); }
96 &--poor { color: var(--color-danger); }
97 &--agent { color: var(--color-accent); }
98 }
99 .rh-readme-agent-note {
100 display: inline-flex;
101 align-items: center;
102 gap: 3px;
103 font-size: 10px;
104 color: var(--color-accent);
105 font-weight: 400;
106 text-transform: none;
107 letter-spacing: 0;
108 margin-left: 8px;
109 }
110
111 // ── Sidebar about section ─────────────────────────────────────────────────────
112 .rh-about-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--space-2); }
113 .rh-about-pills { display: flex; flex-direction: column; gap: 4px; }
114 .rh-about-pill {
115 display: flex;
116 align-items: center;
117 gap: 6px;
118 font-size: 11.5px;
119 color: var(--text-muted);
120 a { color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } }
121 }
122
123 // ── Branch bar: inline intel items ───────────────────────────────────────────
124 .rh-branch-intel {
125 display: flex;
126 align-items: center;
127 gap: 10px;
128 padding: 0 4px;
129 }
130 .rh-bi-item {
131 display: inline-flex;
132 align-items: center;
133 gap: 4px;
134 font-size: 11px;
135 color: var(--text-muted);
136 white-space: nowrap;
137 text-decoration: none;
138 &:hover { color: var(--text-primary); }
139 }
140 .rh-bi-val { font-weight: 600; color: var(--text-secondary); }
141 .rh-bi-health--good { color: var(--color-success); .rh-bi-val { color: var(--color-success); } }
142 .rh-bi-health--fair { color: var(--color-warning); .rh-bi-val { color: var(--color-warning); } }
143 .rh-bi-health--poor { color: var(--color-danger); .rh-bi-val { color: var(--color-danger); } }
144 .rh-bi-item.rh-bi-hotspot { .rh-bi-val { color: #f0883e; } }
145 .rh-bi-item.rh-bi-agent { color: var(--color-accent); .rh-bi-val { color: var(--color-accent); } }
146 .rh-bi-sep { color: var(--border-default); font-size: 10px; }
147
148 // ── Latest commit header row (file tree) ─────────────────────────────────────
149 .ft-latest-commit {
150 display: flex;
151 align-items: center;
152 justify-content: space-between;
153 gap: 8px;
154 padding: 8px 12px;
155 background: var(--bg-subtle, var(--bg-card, var(--bg-surface)));
156 border: 1px solid var(--border-subtle);
157 border-radius: 6px 6px 0 0;
158 border-bottom: none;
159 font-size: 12px;
160 }
161 .ft-lc-left { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
162 .ft-lc-avatar { width: 20px; height: 20px; font-size: 10px; flex-shrink: 0; }
163 .ft-lc-author { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
164 .ft-lc-author-link {
165 display: flex; align-items: center; gap: 7px; flex-shrink: 0;
166 text-decoration: none; color: inherit;
167 }
168 .ft-lc-message {
169 color: var(--text-secondary);
170 text-decoration: none;
171 white-space: nowrap;
172 overflow: hidden;
173 text-overflow: ellipsis;
174 max-width: clamp(180px, 40vw, 520px);
175 &:hover { color: var(--color-accent); }
176 }
177 .ft-lc-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
178 .ft-lc-sha {
179 font-family: var(--font-mono, monospace);
180 font-size: 11px;
181 color: var(--color-accent);
182 text-decoration: none;
183 background: var(--bg-inset);
184 padding: 1px 6px;
185 border-radius: 3px;
186 &:hover { text-decoration: underline; }
187 }
188 .ft-lc-ts { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
189
190 // ── File tree table ───────────────────────────────────────────────────────────
191 .file-tree-table {
192 width: 100%;
193 border-collapse: collapse;
194 table-layout: fixed;
195 border: 1px solid var(--border-subtle);
196 border-top: none; // ft-latest-commit provides the top border
197 border-radius: 0 0 6px 6px;
198 overflow: hidden;
199 }
200
201 .file-tree-row {
202 border-bottom: 1px solid var(--border-subtle);
203 &:last-child { border-bottom: none; }
204 &:hover { background: var(--bg-hover, #30363d); }
205
206 td { padding: 6px 0 6px 12px; vertical-align: middle; }
207 td:last-child { padding-right: 12px; }
208 }
209
210 // Name column — flexible, takes leftover space
211 .file-tree-cell-name {
212 overflow: hidden;
213 min-width: 140px;
214 }
215 .file-tree-link {
216 display: inline-flex;
217 align-items: center;
218 gap: 7px;
219 text-decoration: none;
220 color: var(--text-primary);
221 white-space: nowrap;
222 overflow: hidden;
223 &:hover { color: var(--color-accent); }
224 }
225 .file-tree-name {
226 overflow: hidden;
227 text-overflow: ellipsis;
228 font-size: 13.5px;
229 }
230 .file-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
231 .file-icon-folder { color: var(--color-accent); }
232 .file-icon-code { color: #58a6ff; }
233 .file-icon-text, .file-icon-score { color: var(--text-muted); }
234 .file-icon-midi, .file-icon-audio { color: var(--color-purple); }
235 .file-icon-data { color: var(--color-warning); }
236 .file-icon-default { color: var(--text-muted); }
237
238 // Commit message column — 44% of table width
239 .file-tree-cell-commit {
240 width: 44%;
241 overflow: hidden;
242 padding-right: 8px;
243 }
244 .ft-row-commit-msg {
245 color: var(--text-muted);
246 font-size: 12px;
247 text-decoration: none;
248 white-space: nowrap;
249 overflow: hidden;
250 text-overflow: ellipsis;
251 display: inline;
252 &:hover { color: var(--color-accent); }
253 }
254
255 // Commit type micro-badge
256 .ft-ct {
257 display: inline-block;
258 font-size: 9px;
259 font-weight: 700;
260 padding: 1px 4px;
261 border-radius: 3px;
262 margin-right: 5px;
263 vertical-align: middle;
264 text-transform: uppercase;
265 letter-spacing: 0.04em;
266 }
267 .ft-ct-feat { background: #1a3a52; color: #58a6ff; }
268 .ft-ct-fix { background: #2a1f1f; color: #f85149; }
269 .ft-ct-test { background: #1a2e1a; color: #3fb950; }
270 .ft-ct-docs { background: #252010; color: #d29922; }
271 .ft-ct-refactor { background: #2a1f3a; color: #bc8cff; }
272 .ft-ct-perf { background: #2a2010; color: #f0883e; }
273 .ft-ct-chore, .ft-ct-build, .ft-ct-ci, .ft-ct-style { background: #1e1e2e; color: #8b949e; }
274
275 // Provenance column — fixed width
276 .file-tree-cell-provenance {
277 width: 88px;
278 white-space: nowrap;
279 padding-right: 8px;
280 }
281 .ft-prov {
282 display: inline-flex;
283 align-items: center;
284 gap: 3px;
285 font-size: 11px;
286 white-space: nowrap;
287 }
288 .ft-prov-agent { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); svg { flex-shrink: 0; } }
289 .ft-prov-human { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); text-decoration: none; svg { flex-shrink: 0; } }
290
291 // ── Clone section — MCP variant ──────────────────────────────────────────────
292 .clone-input-wrap--mcp { margin-top: 6px; }
293 .clone-input--mcp { font-size: 10.5px; color: var(--color-accent); }
294
295 // ── Commit activity stream (sidebar) ─────────────────────────────────────────
296 .rh-act-see-all {
297 margin-left: auto;
298 font-size: 10px;
299 font-weight: 400;
300 text-transform: none;
301 letter-spacing: 0;
302 color: var(--color-accent);
303 text-decoration: none;
304 &:hover { text-decoration: underline; }
305 }
306 .rh-act-stream { display: flex; flex-direction: column; gap: 0; }
307 .rh-act-row {
308 padding: 7px 0;
309 border-bottom: 1px solid var(--border-subtle);
310 &:last-child { border-bottom: none; }
311 }
312 .rh-act-top {
313 display: flex;
314 align-items: baseline;
315 gap: 5px;
316 flex-wrap: nowrap;
317 overflow: hidden;
318 margin-bottom: 3px;
319 }
320 .rh-act-msg {
321 font-size: 12px;
322 color: var(--text-secondary);
323 text-decoration: none;
324 overflow: hidden;
325 text-overflow: ellipsis;
326 white-space: nowrap;
327 min-width: 0;
328 flex: 1;
329 &:hover { color: var(--color-accent); }
330 }
331 .rh-act-sv {
332 font-size: 9px;
333 font-weight: 700;
334 white-space: nowrap;
335 flex-shrink: 0;
336 padding: 1px 4px;
337 border-radius: 3px;
338 }
339 .rh-act-sv--major { background: #2a1f1f; color: #f85149; }
340 .rh-act-sv--minor { background: #252010; color: #d29922; }
341 .rh-act-sv--patch { background: #1a3a52; color: #58a6ff; }
342 .rh-act-breaking { font-size: 10px; color: var(--color-danger); flex-shrink: 0; }
343 .rh-act-meta {
344 display: flex;
345 align-items: center;
346 gap: 5px;
347 font-size: 10.5px;
348 color: var(--text-muted);
349 }
350 .rh-act-agent-icon { color: var(--color-accent); flex-shrink: 0; }
351 .rh-act-author { white-space: nowrap; }
352 .rh-act-author--agent { color: var(--color-accent); }
353 .rh-act-ts { margin-left: auto; white-space: nowrap; }
354
355 // Timestamp column — fixed width, right-aligned
356 .file-tree-cell-ts {
357 width: 72px;
358 color: var(--text-muted);
359 font-size: 11px;
360 white-space: nowrap;
361 text-align: right;
362 padding-right: 12px;
363 }
364 .ft-row-ts { color: var(--text-muted); }
File History 1 commit
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ 156 days ago