gabriel / musehub public
_stable.scss
291 lines 7.4 KB
Raw
sha256:0997d6250ae6476362f6fe2025af7789f46d03df3e9f34356d5e8ee79b201923 fix(issues): use issue number as pagination cursor, not cre… Sonnet 4.6 patch 9 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Stable Symbols (.ss-* prefix)
3 // File: src/scss/components/_stable.scss
4 //
5 // Visual rules only — colors, typography, backgrounds, borders, transitions.
6 // Structural layout lives in pages/_stable.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Snowflake icon — teal ─────────────────────────────────────────────────────
10
11 .icon-snowflake { color: var(--color-teal); }
12
13 // ── Intel meta bar ────────────────────────────────────────────────────────────
14
15 .intel-meta-bar {
16 background: var(--bg-surface);
17 border: 1px solid var(--border-subtle);
18 border-radius: var(--radius-md);
19 }
20
21 .intel-meta-pill {
22 display: inline-flex;
23 align-items: center;
24 gap: 0.3rem;
25 }
26
27 .intel-meta-key {
28 font-size: 0.65rem;
29 font-weight: 600;
30 letter-spacing: 0.07em;
31 text-transform: uppercase;
32 color: var(--text-muted);
33 }
34
35 .intel-meta-val {
36 font-size: 0.75rem;
37 font-weight: 600;
38 color: var(--text-secondary);
39 }
40
41 // ── Stat row ──────────────────────────────────────────────────────────────────
42
43 .ss-stat-card {
44 background: var(--bg-surface);
45 border: 1px solid var(--border-default);
46 border-radius: var(--radius-md);
47 text-align: center;
48
49 &--eternal { border-color: var(--color-teal); }
50 &--veteran { border-color: color-mix(in srgb, var(--color-teal) 50%, var(--color-success)); }
51 }
52
53 .ss-stat-value {
54 font-size: 1.6rem;
55 font-weight: 700;
56 font-family: var(--font-mono);
57 color: var(--text-primary);
58 line-height: 1;
59 }
60
61 .ss-stat-label {
62 font-size: 0.65rem;
63 font-weight: 600;
64 letter-spacing: 0.08em;
65 text-transform: uppercase;
66 color: var(--text-muted);
67 }
68
69 // ── Filter pill — eternal modifier ───────────────────────────────────────────
70
71 .intel-filter-pill--eternal {
72 &.intel-filter-pill--active {
73 border-color: var(--color-teal);
74 background: color-mix(in srgb, var(--color-teal) 15%, transparent);
75 color: var(--color-teal);
76 }
77 &:hover { border-color: var(--color-teal); color: var(--color-teal); }
78 }
79
80 // ── Symbol list ───────────────────────────────────────────────────────────────
81
82 .ss-list {
83 background: var(--bg-surface);
84 border: 1px solid var(--border-default);
85 border-radius: var(--radius-md);
86 overflow: hidden;
87 }
88
89 .ss-row {
90 display: flex;
91 align-items: center;
92 gap: 0.65rem;
93 padding: 0.5rem 1rem;
94 border-top: 1px solid var(--border-subtle);
95 transition: background 120ms ease;
96 color: inherit;
97 text-decoration: none;
98
99 &:first-child { border-top: none; }
100 &:hover { background: var(--bg-hover); text-decoration: none; }
101
102
103 }
104
105 .ss-tier-badge {
106 flex-shrink: 0;
107 min-width: 4.5rem;
108 text-align: center;
109 }
110
111 .ss-days {
112 font-size: 0.82rem;
113 font-weight: 700;
114 font-family: var(--font-mono);
115 flex-shrink: 0;
116 min-width: 3.5rem;
117 text-align: right;
118 color: var(--text-secondary);
119 }
120
121 .ss-address {
122 flex: 1;
123 min-width: 0;
124 font-family: var(--font-mono);
125 font-size: 0.82rem;
126 overflow: hidden;
127 text-overflow: ellipsis;
128 white-space: nowrap;
129 }
130
131 .ss-file { color: var(--text-muted); }
132
133 .ss-sep { color: var(--border-default); }
134
135 .ss-name { color: var(--color-accent-link); }
136
137 .ss-kind {
138 flex-shrink: 0;
139 font-size: 0.62rem;
140 }
141
142 .ss-meta {
143 flex-shrink: 0;
144 font-size: 0.7rem;
145 color: var(--text-muted);
146 font-family: var(--font-mono);
147 white-space: nowrap;
148 opacity: 0.7;
149 }
150
151 // ── Detail page ───────────────────────────────────────────────────────────────
152
153 .ss-detail-hd {
154 background: var(--bg-surface);
155 border: 1px solid var(--border-default);
156 border-radius: var(--radius-md);
157 }
158
159 .ss-detail-badges {
160 display: flex;
161 gap: 0.4rem;
162 flex-wrap: wrap;
163 }
164
165 .ss-detail-age-wrap {
166 display: flex;
167 align-items: baseline;
168 gap: 0.35rem;
169 }
170
171 .ss-detail-age {
172 font-size: 2.4rem;
173 font-weight: 700;
174 line-height: 1;
175 color: var(--color-teal);
176 }
177
178 .ss-detail-age-label {
179 font-size: 0.8rem;
180 color: var(--text-muted);
181 }
182
183 .ss-detail-addr {
184 font-size: 0.78rem;
185 color: var(--text-muted);
186 overflow: hidden;
187 text-overflow: ellipsis;
188 white-space: nowrap;
189 }
190
191 .ss-detail-chip {
192 background: var(--bg-surface);
193 border: 1px solid var(--border-default);
194 border-radius: var(--radius-md);
195 text-align: center;
196 }
197
198 .ss-detail-chip__val {
199 font-size: 1.35rem;
200 font-weight: 700;
201 color: var(--text-primary);
202 }
203
204 .ss-detail-chip__lbl {
205 font-size: 0.65rem;
206 font-weight: 600;
207 letter-spacing: 0.08em;
208 text-transform: uppercase;
209 color: var(--text-muted);
210 }
211
212 .ss-detail-card {
213 background: var(--bg-surface);
214 border: 1px solid var(--border-default);
215 border-radius: var(--radius-md);
216 }
217
218 .ss-detail-card-title {
219 font-size: 0.68rem;
220 font-weight: 700;
221 letter-spacing: 0.1em;
222 text-transform: uppercase;
223 color: var(--text-muted);
224 }
225
226 .ss-activity-row {
227 display: flex;
228 align-items: baseline;
229 gap: 0.75rem;
230 border-top: 1px solid var(--border-subtle);
231 &:first-of-type { border-top: none; }
232 }
233
234 .ss-activity-label {
235 font-size: 0.75rem;
236 font-weight: 600;
237 color: var(--text-secondary);
238 min-width: 8rem;
239 flex-shrink: 0;
240 }
241
242 .ss-activity-val {
243 font-size: 0.82rem;
244 font-weight: 600;
245 color: var(--text-primary);
246 }
247
248 .ss-activity-hint {
249 font-size: 0.7rem;
250 color: var(--text-muted);
251 }
252
253 .ss-deps-list {
254 border-top: 1px solid var(--border-subtle);
255 margin-top: 0.5rem;
256 padding-top: 0.5rem;
257 }
258
259 .ss-dep-row {
260 font-size: 0.78rem;
261 color: var(--color-accent-link);
262 padding: 0.2rem 0;
263 border-top: 1px solid var(--border-subtle);
264 &:first-of-type { border-top: none; }
265 }
266
267 // ── Tier badge color variants ─────────────────────────────────────────────────
268
269 .badge-teal {
270 background: color-mix(in srgb, var(--color-teal) 15%, transparent);
271 color: var(--color-teal);
272 border-color: color-mix(in srgb, var(--color-teal) 30%, transparent);
273 }
274
275 .badge-success {
276 background: color-mix(in srgb, var(--color-success) 15%, transparent);
277 color: var(--color-success);
278 border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
279 }
280
281 .badge-accent {
282 background: color-mix(in srgb, var(--color-accent) 15%, transparent);
283 color: var(--color-accent);
284 border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
285 }
286
287 .badge-neutral {
288 background: color-mix(in srgb, var(--color-neutral) 15%, transparent);
289 color: var(--text-secondary);
290 border-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
291 }
File History 1 commit
sha256:0997d6250ae6476362f6fe2025af7789f46d03df3e9f34356d5e8ee79b201923 fix(issues): use issue number as pagination cursor, not cre… Sonnet 4.6 patch 9 days ago