gabriel / musehub public
_velocity.scss
269 lines 7.9 KB
Raw
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Velocity (.vel-* prefix)
3 // File: src/scss/components/_velocity.scss
4 //
5 // Visual rules only — colors, typography, backgrounds, borders.
6 // Structural layout lives in pages/_velocity.scss.
7 // Used by: intel_velocity.html, intel_velocity_detail.html
8 // ─────────────────────────────────────────────────────────────────────────────
9
10 // ── Page wrapper ──────────────────────────────────────────────────────────────
11
12 .vel-wrap { font-family: var(--font-mono); }
13
14 // ── Stat chips ────────────────────────────────────────────────────────────────
15
16 .vel-stat {
17 background: var(--bg-surface);
18 border: 1px solid var(--border-default);
19 border-radius: 8px;
20 }
21
22 .vel-stat__val {
23 font-size: 1.25rem;
24 font-weight: 700;
25 font-family: var(--font-mono);
26 background: var(--gradient-spectral);
27 -webkit-background-clip: text;
28 -webkit-text-fill-color: transparent;
29 background-clip: text;
30 }
31
32 .vel-stat__lbl {
33 font-size: 0.65rem;
34 font-weight: 600;
35 letter-spacing: 0.08em;
36 text-transform: uppercase;
37 color: var(--text-muted);
38 }
39
40 // ── Module rows ───────────────────────────────────────────────────────────────
41
42 .vel-list {
43 background: var(--bg-surface);
44 border: 1px solid var(--border-default);
45 border-radius: 8px;
46 overflow: hidden;
47 }
48
49 .vel-row {
50 border-bottom: 1px solid var(--border-subtle);
51 &:last-child { border-bottom: none; }
52 &:hover { background: var(--bg-hover); }
53 }
54
55 .vel-module {
56 font-size: 0.8rem;
57 font-weight: 600;
58 color: var(--color-accent-link);
59 text-decoration: none;
60 font-family: var(--font-mono);
61 white-space: nowrap;
62 overflow: hidden;
63 text-overflow: ellipsis;
64 &:hover { text-decoration: underline; }
65 }
66
67 // ── Window bars ───────────────────────────────────────────────────────────────
68
69 .vel-bar-track {
70 background: var(--bg-overlay);
71 border-radius: 2px;
72 overflow: hidden;
73 }
74
75 .vel-bar-fill {
76 height: 100%;
77 border-radius: 2px;
78 transition: width 0.3s ease;
79 &--current { background: var(--gradient-spectral); }
80 &--prior { background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
81 }
82
83 // ── Metrics ───────────────────────────────────────────────────────────────────
84
85 .vel-metric {
86 font-size: 0.68rem;
87 font-family: var(--font-mono);
88 color: var(--text-muted);
89 white-space: nowrap;
90 }
91
92 .vel-metric__val {
93 font-weight: 600;
94 color: var(--text-secondary);
95 }
96
97 // ── Acceleration badge ────────────────────────────────────────────────────────
98
99 .vel-accel {
100 font-size: 0.68rem;
101 font-weight: 700;
102 font-family: var(--font-mono);
103 white-space: nowrap;
104 border-radius: 4px;
105 padding: 1px 6px;
106
107 &--up {
108 color: var(--color-success);
109 background: color-mix(in srgb, var(--color-success) 15%, transparent);
110 border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
111 }
112
113 &--down {
114 color: var(--color-danger);
115 background: color-mix(in srgb, var(--color-danger) 15%, transparent);
116 border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
117 }
118
119 &--flat {
120 color: var(--text-muted);
121 background: color-mix(in srgb, var(--text-muted) 10%, transparent);
122 border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
123 }
124 }
125
126 // ── Stagnant badge ────────────────────────────────────────────────────────────
127
128 .vel-stagnant {
129 font-size: 0.65rem;
130 font-family: var(--font-mono);
131 color: var(--text-muted);
132 white-space: nowrap;
133 }
134
135 .vel-stagnant--warn {
136 color: var(--color-warning);
137 }
138
139 // ── Window legend ─────────────────────────────────────────────────────────────
140
141 .vel-legend {
142 font-size: 0.65rem;
143 color: var(--text-muted);
144 font-weight: 600;
145 letter-spacing: 0.04em;
146 text-transform: uppercase;
147 }
148
149 .vel-legend__dot {
150 display: inline-block;
151 width: 8px;
152 height: 8px;
153 border-radius: 2px;
154 flex-shrink: 0;
155
156 &--current { background: var(--color-accent); }
157 &--prior { background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
158 }
159
160 // ── Empty state ───────────────────────────────────────────────────────────────
161
162 .vel-empty {
163 color: var(--text-muted);
164 font-size: 0.85rem;
165 text-align: center;
166 svg { opacity: 0.35; }
167 }
168
169 // ── Detail page ───────────────────────────────────────────────────────────────
170
171 .vel-detail-hd {
172 background: var(--bg-surface);
173 border: 1px solid var(--border-default);
174 border-radius: 8px;
175 }
176
177 .vel-detail-module {
178 font-size: 1rem;
179 font-weight: 700;
180 font-family: var(--font-mono);
181 background: var(--gradient-spectral);
182 -webkit-background-clip: text;
183 -webkit-text-fill-color: transparent;
184 background-clip: text;
185 }
186
187 .vel-detail-meta {
188 font-size: 0.72rem;
189 color: var(--text-muted);
190 }
191
192 // detail chips
193
194 .vel-detail-chip {
195 background: var(--bg-surface);
196 border: 1px solid var(--border-default);
197 border-radius: 8px;
198 text-align: center;
199 }
200
201 .vel-detail-chip__val {
202 font-size: 1.35rem;
203 font-weight: 700;
204 font-family: var(--font-mono);
205 color: var(--text-primary);
206
207 &--up { color: var(--color-success); }
208 &--down { color: var(--color-danger); }
209 &--neutral { color: var(--text-muted); }
210 &--accent {
211 background: var(--gradient-spectral);
212 -webkit-background-clip: text;
213 -webkit-text-fill-color: transparent;
214 background-clip: text;
215 }
216 }
217
218 .vel-detail-chip__lbl {
219 font-size: 0.65rem;
220 font-weight: 600;
221 letter-spacing: 0.08em;
222 text-transform: uppercase;
223 color: var(--text-muted);
224 }
225
226 // window comparison table
227
228 .vel-compare-card {
229 background: var(--bg-surface);
230 border: 1px solid var(--border-default);
231 border-radius: 8px;
232 }
233
234 .vel-compare-title {
235 font-size: 0.65rem;
236 font-weight: 700;
237 letter-spacing: 0.1em;
238 text-transform: uppercase;
239 color: var(--text-muted);
240 }
241
242 .vel-compare-table {
243 width: 100%;
244 font-size: 0.78rem;
245 font-family: var(--font-mono);
246 border-collapse: collapse;
247
248 th {
249 font-size: 0.62rem;
250 font-weight: 700;
251 letter-spacing: 0.07em;
252 text-transform: uppercase;
253 color: var(--text-muted);
254 text-align: right;
255 padding: 0.3rem 0.6rem;
256 &:first-child { text-align: left; }
257 }
258
259 td {
260 padding: 0.35rem 0.6rem;
261 text-align: right;
262 color: var(--text-secondary);
263 border-top: 1px solid var(--border-subtle);
264 &:first-child { text-align: left; color: var(--text-primary); font-weight: 600; }
265 }
266
267 tr.vel-compare--current td { color: var(--color-accent); }
268 tr.vel-compare--delta td { color: var(--text-muted); font-size: 0.68rem; }
269 }
File History 13 commits
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 12 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 15 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 30 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 34 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 35 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 36 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 36 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 36 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 36 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago