gabriel / musehub public
_mcp-docs.scss
426 lines 11.7 KB
Raw
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 7 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: MCP Docs
3 // File: src/scss/components/_mcp-docs.scss
4 //
5 // Variants: .tool-card .tool-card--{kind} .step-card .kv-table
6 // .resource-card .prompt-card .param-type .tool-filter-bar
7 // Tokens: --border-subtle, --border-default, --text-primary, --text-muted
8 // --color-accent, --color-success, --color-warning, --color-purple
9 // --color-danger, --color-orange, --bg-hover, --bg-canvas
10 // Usage: <div class="tool-card tool-card--read">…</div>
11 // ─────────────────────────────────────────────────────────────────────────────
12
13 // ── Quick-start step cards ────────────────────────────────────────────────────
14
15 .step-grid {
16 display: grid;
17 grid-template-columns: repeat(3, 1fr);
18 gap: 12px;
19
20 @media (max-width: 768px) { grid-template-columns: 1fr; }
21 }
22
23 .step-card {
24 display: flex;
25 gap: var(--space-3);
26 align-items: flex-start;
27 padding: var(--space-3);
28 background: transparent;
29 border: 1px solid var(--border-subtle);
30 border-radius: var(--radius-sm);
31 transition: border-color var(--transition-fast), background var(--transition-fast);
32
33 &:hover { border-color: var(--border-default); background: rgba(255, 255, 255, 0.02); }
34 &--prompt .step-card__num { background: color-mix(in srgb, var(--color-purple) 15%, transparent); color: var(--color-purple); }
35 }
36
37 .step-card__num {
38 width: 24px;
39 height: 24px;
40 border-radius: 50%;
41 background: color-mix(in srgb, var(--color-accent) 15%, transparent);
42 color: var(--color-accent);
43 font-size: 11px;
44 font-weight: var(--weight-bold);
45 display: flex;
46 align-items: center;
47 justify-content: center;
48 flex-shrink: 0;
49 }
50
51 .step-card__title {
52 font-size: 13px;
53 font-weight: var(--weight-semibold);
54 margin: 0 0 2px;
55 color: var(--text-primary);
56 }
57
58 .step-card__body {
59 font-size: 12px;
60 color: var(--text-muted);
61 margin: 0;
62 line-height: 1.5;
63
64 code { font-size: 11px; }
65 }
66
67 // ── KV connection table ───────────────────────────────────────────────────────
68
69 .kv-table {
70 border: 1px solid var(--border-subtle);
71 border-radius: var(--radius-base);
72 overflow: hidden;
73 }
74
75 .kv-table__row {
76 display: grid;
77 grid-template-columns: 160px 1fr;
78 align-items: start;
79 border-bottom: 1px solid var(--border-subtle);
80
81 &:last-child { border-bottom: none; }
82 }
83
84 .kv-table__key {
85 font-size: 11px;
86 font-weight: var(--weight-semibold);
87 color: var(--text-muted);
88 padding: var(--space-2) var(--space-3);
89 border-right: 1px solid var(--border-subtle);
90 display: flex;
91 align-items: center;
92 }
93
94 .kv-table__val {
95 font-size: 11px;
96 padding: var(--space-2) var(--space-3);
97 background: none;
98 word-break: break-all;
99 }
100
101 // ── Tool filter bar ───────────────────────────────────────────────────────────
102
103 .tool-filter-bar {
104 display: flex;
105 align-items: center;
106 gap: var(--space-2);
107 padding: 0 var(--space-3);
108 height: 38px;
109 background: transparent;
110 border: 1px solid rgba(255, 255, 255, 0.1);
111 border-radius: 6px;
112 margin-bottom: var(--space-5);
113 color: var(--text-muted);
114 transition: border-color var(--transition-fast);
115
116 &:focus-within { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
117
118 input {
119 flex: 1;
120 background: none;
121 border: none;
122 outline: none;
123 box-shadow: none;
124 appearance: none;
125 -webkit-appearance: none;
126 font-size: 13px;
127 color: var(--text-primary);
128
129 &::placeholder { color: var(--text-muted); }
130 }
131 }
132
133 .tool-count {
134 font-size: 11px;
135 color: var(--text-muted);
136 flex-shrink: 0;
137 font-family: var(--font-mono);
138 }
139
140 // ── Tool cards ────────────────────────────────────────────────────────────────
141
142 .tool-list {
143 display: flex;
144 flex-direction: column;
145 gap: var(--space-2);
146 margin-bottom: var(--space-4);
147 }
148
149 .tool-card {
150 border: 1px solid var(--border-subtle);
151 border-radius: var(--radius-sm);
152 overflow: hidden;
153 background: transparent;
154 transition: border-color var(--transition-fast), background var(--transition-fast);
155
156 &:hover { border-color: var(--border-default); background: rgba(255, 255, 255, 0.015); }
157 &[hidden] { display: none; }
158 }
159
160 .tool-card__header { padding: var(--space-3); }
161
162 .tool-card__title-row {
163 display: flex;
164 align-items: center;
165 gap: var(--space-2);
166 flex-wrap: wrap;
167 margin-bottom: var(--space-1);
168 }
169
170 .tool-card__name {
171 font-size: 13px;
172 font-weight: var(--weight-semibold);
173 color: var(--text-primary);
174 }
175
176 .tool-card__badges { display: flex; gap: 4px; flex-wrap: wrap; }
177
178 .tool-card__desc {
179 font-size: 12px;
180 color: var(--text-muted);
181 margin: 0;
182 line-height: 1.5;
183
184 code {
185 font-family: var(--font-mono);
186 font-size: 11px;
187 color: var(--color-accent);
188 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
189 border-radius: 3px;
190 padding: 1px 4px;
191 }
192 }
193
194 .tool-card__params { border-top: 1px solid var(--border-subtle); }
195
196 .tool-card__params-summary {
197 display: flex;
198 align-items: center;
199 gap: 6px;
200 padding: var(--space-2) var(--space-3);
201 font-size: 11px;
202 font-weight: var(--weight-semibold);
203 color: var(--text-muted);
204 cursor: pointer;
205 list-style: none;
206
207 &::-webkit-details-marker { display: none; }
208 &:hover { color: var(--text-primary); background: var(--bg-hover); }
209 }
210
211 .tool-card__chevron {
212 transition: transform var(--transition-fast);
213
214 .tool-card__params[open] & { transform: rotate(90deg); }
215 }
216
217 .tool-card__param-count {
218 margin-left: auto;
219 font-size: 10px;
220 background: var(--bg-hover);
221 color: var(--text-muted);
222 border-radius: 8px;
223 padding: 0 6px;
224 }
225
226 .tool-card__no-params {
227 font-size: 11px;
228 color: var(--text-muted);
229 padding: var(--space-1) var(--space-3) var(--space-2);
230 border-top: 1px solid var(--border-subtle);
231 margin: 0;
232 }
233
234 // ── Params table ──────────────────────────────────────────────────────────────
235
236 .params-table {
237 width: 100%;
238 border-collapse: collapse;
239 font-size: 11px;
240
241 th {
242 text-align: left;
243 padding: var(--space-1) var(--space-3);
244 font-weight: var(--weight-semibold);
245 font-size: 10px;
246 text-transform: uppercase;
247 letter-spacing: 0.05em;
248 color: var(--text-muted);
249 background: var(--bg-canvas);
250 border-bottom: 1px solid var(--border-subtle);
251 }
252
253 td {
254 padding: var(--space-1) var(--space-3);
255 border-bottom: 1px solid rgba(255, 255, 255, 0.03);
256 vertical-align: top;
257 }
258
259 tr:last-child td { border-bottom: none; }
260 }
261
262 .params-table__name { font-size: 11px; }
263
264 .params-table__desc {
265 color: var(--text-muted);
266
267 code {
268 font-family: var(--font-mono);
269 font-size: 11px;
270 color: var(--color-accent);
271 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
272 border-radius: 3px;
273 padding: 1px 4px;
274 }
275 }
276
277 .param-type {
278 font-family: var(--font-mono);
279 font-size: 10px;
280 padding: 1px 5px;
281 border-radius: 3px;
282
283 &--string { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }
284 &--integer,
285 &--number { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
286 &--boolean { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); }
287 &--array { background: color-mix(in srgb, var(--color-purple) 10%, transparent); color: var(--color-purple); }
288 &--object { background: color-mix(in srgb, var(--color-orange) 10%, transparent); color: var(--color-orange); }
289 &--any { background: var(--bg-hover); color: var(--text-muted); }
290 }
291
292 .req-star { color: var(--color-danger); font-weight: var(--weight-bold); }
293 .opt-dash { color: var(--border-default); }
294
295 // ── Resources ─────────────────────────────────────────────────────────────────
296
297 .resource-card {
298 border: 1px solid var(--border-subtle);
299 border-radius: var(--radius-sm);
300 padding: var(--space-3);
301 background: transparent;
302 transition: border-color var(--transition-fast), background var(--transition-fast);
303
304 &:hover { border-color: var(--border-default); background: rgba(255, 255, 255, 0.015); }
305 }
306
307 .resource-card__top {
308 display: flex;
309 align-items: flex-start;
310 gap: var(--space-2);
311 justify-content: space-between;
312 margin-bottom: 4px;
313 }
314
315 .resource-card__uri {
316 font-size: 11px;
317 word-break: break-all;
318 color: var(--color-orange);
319 }
320
321 .resource-card__mime {
322 font-size: 10px;
323 color: var(--text-muted);
324 flex-shrink: 0;
325 background: var(--bg-hover);
326 padding: 1px 5px;
327 border-radius: 3px;
328 }
329
330 .resource-card__name {
331 font-size: 12px;
332 font-weight: var(--weight-semibold);
333 color: var(--text-primary);
334 margin: 0 0 2px;
335 }
336
337 .resource-card__desc {
338 font-size: 11px;
339 color: var(--text-muted);
340 margin: 0;
341 line-height: 1.5;
342
343 code {
344 font-family: var(--font-mono);
345 font-size: 10px;
346 color: var(--color-orange);
347 background: color-mix(in srgb, var(--color-orange) 8%, transparent);
348 border-radius: 3px;
349 padding: 1px 4px;
350 }
351 }
352
353 // ── Prompts ───────────────────────────────────────────────────────────────────
354
355 .prompt-card {
356 border: 1px solid var(--border-subtle);
357 border-radius: var(--radius-sm);
358 padding: var(--space-3);
359 background: transparent;
360 transition: border-color var(--transition-fast), background var(--transition-fast);
361
362 &:hover { border-color: var(--border-default); background: rgba(255, 255, 255, 0.015); }
363 }
364
365 .prompt-card__header {
366 display: flex;
367 align-items: center;
368 justify-content: space-between;
369 gap: var(--space-2);
370 margin-bottom: var(--space-1);
371 }
372
373 .prompt-card__name {
374 font-size: 12px;
375 font-weight: var(--weight-semibold);
376 color: var(--color-danger);
377 }
378
379 .prompt-card__arg-count {
380 font-size: 10px;
381 color: var(--text-muted);
382 background: var(--bg-hover);
383 padding: 1px 6px;
384 border-radius: 8px;
385 }
386
387 .prompt-card__desc {
388 font-size: 12px;
389 color: var(--text-muted);
390 margin: 0 0 var(--space-2);
391 line-height: 1.5;
392
393 code {
394 font-family: var(--font-mono);
395 font-size: 11px;
396 color: var(--color-danger);
397 background: color-mix(in srgb, var(--color-danger) 8%, transparent);
398 border-radius: 3px;
399 padding: 1px 4px;
400 }
401 }
402
403 .prompt-card__args { display: flex; flex-direction: column; gap: 4px; }
404
405 .prompt-card__arg-chip {
406 font-size: 11px;
407 color: var(--text-muted);
408 line-height: 1.4;
409
410 code { font-size: 11px; color: var(--text-primary); }
411 }
412
413 .prompt-card__arg-hint { color: var(--text-muted); }
414
415 // ── Copy button ───────────────────────────────────────────────────────────────
416
417 .copy-btn {
418 background: none;
419 border: none;
420 cursor: pointer;
421 color: var(--text-muted);
422 padding: 2px;
423 border-radius: 3px;
424
425 &:hover { color: var(--text-primary); background: var(--bg-hover); }
426 }
File History 1 commit
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 7 days ago