gabriel / musehub public
_mcp-docs.scss
632 lines 19.2 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 156 days ago
1 // _mcp-docs.scss — MCP docs page (.mcp-* prefix)
2
3 // MCP DOCS PAGE
4 // ════════════════════════════════════════════════════════════════════════════
5
6 // ── Hero ────────────────────────────────────────────────────────────────────
7 .mcp-hero {
8 position: relative;
9 background: linear-gradient(135deg, #0d1117 0%, #0f1923 50%, #0d1117 100%);
10 border-bottom: 1px solid var(--border-default);
11 overflow: hidden;
12 padding: 0 var(--space-4);
13 }
14
15 .mcp-hero-glow {
16 position: absolute;
17 inset: 0;
18 background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(88,166,255,0.06) 0%, transparent 70%),
19 radial-gradient(ellipse 40% 60% at 20% 80%, rgba(188,140,255,0.05) 0%, transparent 60%);
20 pointer-events: none;
21 }
22
23 .mcp-hero-inner {
24 display: flex;
25 align-items: center;
26 justify-content: space-between;
27 gap: var(--space-6);
28 padding: var(--space-8) 0 var(--space-6);
29 @media (max-width: 768px) { flex-direction: column; align-items: flex-start; }
30 }
31
32 .mcp-hero-eyebrow {
33 display: inline-flex; align-items: center; gap: 6px;
34 font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
35 color: #58a6ff; margin-bottom: var(--space-3);
36 }
37
38 .mcp-live-dot {
39 width: 6px; height: 6px; border-radius: 50%;
40 background: #3fb950;
41 box-shadow: 0 0 6px #3fb950;
42 animation: mcp-pulse 2s ease-in-out infinite;
43 }
44 @keyframes mcp-pulse {
45 0%, 100% { opacity: 1; transform: scale(1); }
46 50% { opacity: 0.6; transform: scale(0.85); }
47 }
48
49 .mcp-hero-title {
50 font-size: clamp(28px, 4vw, 44px);
51 font-weight: 700; line-height: 1.1;
52 margin: 0 0 var(--space-3);
53 color: var(--text-primary);
54 }
55
56 .mcp-hero-sub {
57 font-size: 14px; line-height: 1.6;
58 color: var(--text-secondary);
59 max-width: 480px; margin-bottom: var(--space-4);
60 }
61
62 .mcp-hero-actions {
63 display: flex; gap: 10px; flex-wrap: wrap;
64 align-items: center;
65 }
66
67 .mcp-hero-btn {
68 display: inline-flex; align-items: center; gap: 6px;
69 padding: 7px 16px;
70 border-radius: var(--radius-sm);
71 font-size: 13px; font-weight: 500;
72 line-height: 1; white-space: nowrap;
73 text-decoration: none;
74 transition: background 0.15s, border-color 0.15s, color 0.15s;
75 cursor: pointer;
76 svg { flex-shrink: 0; }
77
78 &--primary {
79 background: rgba(88, 166, 255, 0.12);
80 border: 1px solid rgba(88, 166, 255, 0.4);
81 color: var(--color-accent);
82 &:hover {
83 background: rgba(88, 166, 255, 0.2);
84 border-color: rgba(88, 166, 255, 0.7);
85 color: #79c0ff;
86 }
87 }
88
89 &--secondary {
90 background: transparent;
91 border: 1px solid var(--border-default);
92 color: var(--text-secondary);
93 &:hover {
94 background: rgba(255, 255, 255, 0.04);
95 border-color: var(--border-muted);
96 color: var(--text-primary);
97 }
98 }
99 }
100
101 .mcp-hero-stats {
102 display: flex; flex-direction: column; gap: var(--space-3);
103 flex-shrink: 0;
104 }
105
106 .mcp-stat-pill {
107 display: flex; align-items: center; gap: 10px;
108 padding: 9px 14px;
109 background: transparent;
110 border: 1px solid var(--border-subtle);
111 border-radius: var(--radius-sm);
112 min-width: 130px;
113 }
114
115 .mcp-stat-num {
116 font-family: var(--font-mono); font-size: 18px; font-weight: 700;
117 color: var(--text-primary); line-height: 1;
118 }
119
120 .mcp-stat-label {
121 font-size: 11px; font-weight: 500; color: var(--text-muted);
122 text-transform: uppercase; letter-spacing: 0.06em;
123 }
124
125 // Connection strip
126 .mcp-connect-strip {
127 display: flex; flex-wrap: wrap; align-items: center;
128 gap: 0 var(--space-3);
129 padding: var(--space-3) 0;
130 border-top: 1px solid var(--border-subtle);
131 font-size: 12px;
132 }
133
134 .mcp-connect-item {
135 display: flex; align-items: center; gap: 6px;
136 }
137
138 .mcp-connect-label {
139 font-size: 10px; font-weight: 600; text-transform: uppercase;
140 letter-spacing: 0.06em; color: var(--text-muted);
141 }
142
143 .mcp-connect-val {
144 font-size: 11px; color: #58a6ff; background: none;
145 }
146
147 .mcp-connect-sep { color: var(--border-default); }
148
149 .mcp-copy-btn {
150 background: none; border: none; cursor: pointer;
151 color: var(--text-muted); padding: 2px; border-radius: 3px;
152 &:hover { color: var(--text-primary); background: var(--bg-hover); }
153 }
154
155 // ── Body layout ─────────────────────────────────────────────────────────────
156 .mcp-body {
157 display: grid;
158 grid-template-columns: 200px 1fr;
159 align-items: start;
160 gap: 0;
161 @media (max-width: 900px) { grid-template-columns: 1fr; }
162 }
163
164 // ── Sidebar ──────────────────────────────────────────────────────────────────
165 .mcp-sidebar {
166 position: sticky;
167 top: var(--header-height);
168 height: calc(100vh - var(--header-height));
169 overflow-y: auto;
170 scrollbar-width: none;
171 padding: var(--space-4) var(--space-3);
172 border-right: 1px solid var(--border-subtle);
173 background: var(--bg-canvas);
174 @media (max-width: 900px) { display: none; }
175 }
176
177 .mcp-sidebar::-webkit-scrollbar { display: none; }
178
179 .mcp-sidebar-section {
180 margin-bottom: var(--space-4);
181 }
182
183 .mcp-sidebar-heading {
184 font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
185 color: var(--text-muted); margin: 0 0 var(--space-1) var(--space-2);
186 display: flex; align-items: center; gap: 4px;
187 }
188
189 .mcp-sidebar-count {
190 font-size: 10px; background: var(--bg-hover); color: var(--text-muted);
191 border-radius: 8px; padding: 0 5px;
192 }
193
194 .mcp-sidebar-link {
195 display: flex; align-items: center; gap: 6px;
196 padding: 4px var(--space-2); border-radius: 4px;
197 font-size: 12px; color: var(--text-secondary); text-decoration: none;
198 transition: color 0.1s, background 0.1s;
199 &:hover { color: var(--text-primary); background: var(--bg-hover); }
200 &::before {
201 content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
202 }
203 &.mcp-sidebar-link--read::before { background: #3fb950; }
204 &.mcp-sidebar-link--write::before { background: #58a6ff; }
205 &.mcp-sidebar-link--cli::before { background: #e3b341; }
206 &.mcp-sidebar-link--elicit::before { background: #bc8cff; }
207 &.mcp-sidebar-link--meta { font-size: 11px; color: var(--text-muted); &::before { display: none; } }
208 }
209
210 // ── Main content ─────────────────────────────────────────────────────────────
211 .mcp-content {
212 padding: var(--space-4) var(--space-4) var(--space-8);
213 min-width: 0;
214 }
215
216 // ── Sections ─────────────────────────────────────────────────────────────────
217 .mcp-section {
218 margin-bottom: var(--space-8);
219 scroll-margin-top: calc(var(--header-height) + 48px);
220 }
221
222 .mcp-section-header {
223 display: flex; align-items: center; gap: var(--space-2);
224 margin-bottom: var(--space-2);
225 }
226
227 .mcp-section-title {
228 font-size: 18px; font-weight: 600;
229 margin: 0;
230 }
231
232 .mcp-section-desc {
233 font-size: 13px; color: var(--text-muted);
234 margin: 0 0 var(--space-3);
235 line-height: 1.6;
236 }
237
238 // ── Badges ────────────────────────────────────────────────────────────────────
239 .mcp-badge {
240 display: inline-flex; align-items: center;
241 font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
242 padding: 2px 7px; border-radius: 4px;
243 &--read { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.2); }
244 &--write { background: rgba(88,166,255,0.12); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
245 &--cli { background: rgba(227,179,65,0.12); color: #e3b341; border: 1px solid rgba(227,179,65,0.2); }
246 &--elicit { background: rgba(188,140,255,0.12); color: #bc8cff; border: 1px solid rgba(188,140,255,0.2); }
247 &--server { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border-subtle); }
248 &--resource{ background: rgba(255,166,87,0.12); color: #ffa657; border: 1px solid rgba(255,166,87,0.2); }
249 &--prompt { background: rgba(255,123,114,0.12); color: #ff7b72; border: 1px solid rgba(255,123,114,0.2); }
250 &--agent { background: rgba(188,140,255,0.12); color: #bc8cff; border: 1px solid rgba(188,140,255,0.2); }
251 &--deprecated { background: rgba(139,148,158,0.12); color: var(--text-muted); border: 1px solid var(--border-subtle); text-decoration: line-through; }
252 }
253
254 // ── Quick-start ───────────────────────────────────────────────────────────────
255 .mcp-quickstart-grid {
256 display: grid;
257 grid-template-columns: repeat(3, 1fr);
258 gap: 12px;
259 }
260
261 .mcp-qs-card {
262 display: flex; gap: var(--space-3); align-items: flex-start;
263 padding: var(--space-3);
264 background: transparent;
265 border: 1px solid var(--border-subtle);
266 border-radius: var(--radius-sm);
267 transition: border-color 0.15s, background 0.15s;
268 &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.02); }
269 }
270
271 .mcp-qs-step {
272 width: 24px; height: 24px; border-radius: 50%;
273 background: rgba(88,166,255,0.15); color: #58a6ff;
274 font-size: 11px; font-weight: 700;
275 display: flex; align-items: center; justify-content: center;
276 flex-shrink: 0;
277 &--prompt { background: rgba(188,140,255,0.15); color: #bc8cff; }
278 }
279
280 .mcp-qs-title {
281 font-size: 13px; font-weight: 600; margin: 0 0 2px; color: var(--text-primary);
282 }
283
284 .mcp-qs-body {
285 font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5;
286 code { font-size: 11px; }
287 }
288
289 // ── Connection table ──────────────────────────────────────────────────────────
290 .mcp-connect-table {
291 border: 1px solid var(--border-subtle);
292 border-radius: var(--radius-base);
293 overflow: hidden;
294 }
295
296 .mcp-ct-row {
297 display: grid; grid-template-columns: 160px 1fr;
298 gap: 0; align-items: start;
299 border-bottom: 1px solid var(--border-subtle);
300 &:last-child { border-bottom: none; }
301 }
302
303 .mcp-ct-key {
304 font-size: 11px; font-weight: 600; color: var(--text-muted);
305 padding: var(--space-2) var(--space-3);
306 background: transparent;
307 border-right: 1px solid var(--border-subtle);
308 display: flex; align-items: center;
309 }
310
311 .mcp-ct-val {
312 font-size: 11px; padding: var(--space-2) var(--space-3);
313 background: none; word-break: break-all;
314 }
315
316 // ── Tool search ───────────────────────────────────────────────────────────────
317 .mcp-tool-search-bar {
318 display: flex; align-items: center; gap: var(--space-2);
319 padding: 0 var(--space-3);
320 height: 38px;
321 background: transparent;
322 border: 1px solid rgba(255,255,255,0.1);
323 border-radius: 6px;
324 margin-bottom: var(--space-5);
325 color: var(--text-muted);
326 transition: border-color 0.15s;
327 &:focus-within { border-color: rgba(88,166,255,0.45); }
328
329 input {
330 flex: 1; background: none; border: none; outline: none;
331 box-shadow: none; appearance: none; -webkit-appearance: none;
332 font-size: 13px; color: var(--text-primary);
333 &::placeholder { color: var(--text-muted); }
334 }
335 }
336
337 .mcp-tool-count {
338 font-size: 11px; color: var(--text-muted); flex-shrink: 0;
339 font-family: var(--font-mono);
340 }
341
342 // ── Tool cards ────────────────────────────────────────────────────────────────
343 .mcp-tool-list {
344 display: flex; flex-direction: column; gap: var(--space-2);
345 margin-bottom: var(--space-4);
346 }
347
348 .mcp-tool-card {
349 border: 1px solid var(--border-subtle);
350 border-radius: var(--radius-sm);
351 overflow: hidden;
352 background: transparent;
353 transition: border-color 0.15s, background 0.15s;
354
355 &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); }
356 &[hidden] { display: none; }
357 }
358
359 .mcp-tool-header {
360 padding: var(--space-3);
361 }
362
363 .mcp-tool-title-row {
364 display: flex; align-items: center; gap: var(--space-2);
365 flex-wrap: wrap; margin-bottom: var(--space-1);
366 }
367
368 .mcp-tool-name {
369 font-size: 13px; font-weight: 600; color: var(--text-primary);
370 }
371
372 .mcp-tool-badges { display: flex; gap: 4px; flex-wrap: wrap; }
373
374 .mcp-tool-desc {
375 font-size: 12px; color: var(--text-muted);
376 margin: 0; line-height: 1.5;
377 code {
378 font-family: var(--font-mono);
379 font-size: 11px;
380 color: var(--color-accent);
381 background: rgba(88, 166, 255, 0.08);
382 border-radius: 3px;
383 padding: 1px 4px;
384 }
385 }
386
387 .mcp-tool-params {
388 border-top: 1px solid var(--border-subtle);
389 }
390
391 .mcp-tool-params-summary {
392 display: flex; align-items: center; gap: 6px;
393 padding: var(--space-2) var(--space-3);
394 font-size: 11px; font-weight: 600;
395 color: var(--text-muted); cursor: pointer;
396 list-style: none;
397 &::-webkit-details-marker { display: none; }
398 &:hover { color: var(--text-primary); background: var(--bg-hover); }
399 }
400
401 .mcp-chevron {
402 transition: transform 0.15s;
403 .mcp-tool-params[open] & { transform: rotate(90deg); }
404 }
405
406 .mcp-param-count {
407 margin-left: auto;
408 font-size: 10px; background: var(--bg-hover); color: var(--text-muted);
409 border-radius: 8px; padding: 0 6px;
410 }
411
412 .mcp-params-table {
413 width: 100%; border-collapse: collapse; font-size: 11px;
414 th {
415 text-align: left; padding: var(--space-1) var(--space-3);
416 font-weight: 600; font-size: 10px; text-transform: uppercase;
417 letter-spacing: 0.05em; color: var(--text-muted);
418 background: var(--bg-canvas); border-bottom: 1px solid var(--border-subtle);
419 }
420 td {
421 padding: var(--space-1) var(--space-3);
422 border-bottom: 1px solid rgba(255,255,255,0.03);
423 vertical-align: top;
424 }
425 tr:last-child td { border-bottom: none; }
426 &:hover tr.mcp-param-required { background: rgba(255,255,255,0.01); }
427 }
428
429 .mcp-param-name { font-size: 11px; }
430 .mcp-param-desc {
431 color: var(--text-muted);
432 code {
433 font-family: var(--font-mono);
434 font-size: 11px;
435 color: var(--color-accent);
436 background: rgba(88, 166, 255, 0.08);
437 border-radius: 3px;
438 padding: 1px 4px;
439 }
440 }
441
442 .mcp-type {
443 font-family: var(--font-mono); font-size: 10px;
444 padding: 1px 5px; border-radius: 3px;
445 &--string { background: rgba(63,185,80,0.1); color: #3fb950; }
446 &--integer, &--number { background: rgba(88,166,255,0.1); color: #58a6ff; }
447 &--boolean { background: rgba(227,179,65,0.1); color: #e3b341; }
448 &--array { background: rgba(188,140,255,0.1); color: #bc8cff; }
449 &--object { background: rgba(255,166,87,0.1); color: #ffa657; }
450 &--any { background: var(--bg-hover); color: var(--text-muted); }
451 }
452
453 .mcp-req-star { color: #f85149; font-weight: 700; }
454 .mcp-opt { color: var(--border-default); }
455
456 .mcp-no-params {
457 font-size: 11px; color: var(--text-muted);
458 padding: var(--space-1) var(--space-3) var(--space-2);
459 border-top: 1px solid var(--border-subtle); margin: 0;
460 }
461
462 // ── Resources grid ────────────────────────────────────────────────────────────
463 .mcp-resource-grid {
464 display: grid;
465 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
466 gap: var(--space-3);
467 }
468
469 .mcp-resource-card {
470 border: 1px solid var(--border-subtle);
471 border-radius: var(--radius-sm);
472 padding: var(--space-3);
473 background: transparent;
474 transition: border-color 0.15s, background 0.15s;
475 &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); }
476 }
477
478 .mcp-resource-card-top {
479 display: flex; align-items: flex-start; gap: var(--space-2);
480 justify-content: space-between; margin-bottom: 4px;
481 }
482
483 .mcp-resource-uri {
484 font-size: 11px; word-break: break-all;
485 color: #ffa657;
486 }
487
488 .mcp-mime {
489 font-size: 10px; color: var(--text-muted); flex-shrink: 0;
490 background: var(--bg-hover); padding: 1px 5px; border-radius: 3px;
491 }
492
493 .mcp-resource-name {
494 font-size: 12px; font-weight: 600;
495 color: var(--text-primary); margin: 0 0 2px;
496 }
497
498 .mcp-resource-desc {
499 font-size: 11px; color: var(--text-muted);
500 margin: 0; line-height: 1.5;
501 code {
502 font-family: var(--font-mono);
503 font-size: 10px;
504 color: #ffa657;
505 background: rgba(255, 166, 87, 0.08);
506 border-radius: 3px;
507 padding: 1px 4px;
508 }
509 }
510
511 // ── Prompts grid ──────────────────────────────────────────────────────────────
512 .mcp-prompt-grid {
513 display: grid;
514 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
515 gap: var(--space-3);
516 }
517
518 .mcp-prompt-card {
519 border: 1px solid var(--border-subtle);
520 border-radius: var(--radius-sm);
521 padding: var(--space-3);
522 background: transparent;
523 transition: border-color 0.15s, background 0.15s;
524 &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); }
525 }
526
527 .mcp-prompt-header {
528 display: flex; align-items: center; justify-content: space-between;
529 gap: var(--space-2); margin-bottom: var(--space-1);
530 }
531
532 .mcp-prompt-name { font-size: 12px; font-weight: 600; color: #ff7b72; }
533
534 .mcp-prompt-arg-count {
535 font-size: 10px; color: var(--text-muted);
536 background: var(--bg-hover); padding: 1px 6px; border-radius: 8px;
537 }
538
539 .mcp-prompt-desc {
540 font-size: 12px; color: var(--text-muted);
541 margin: 0 0 var(--space-2); line-height: 1.5;
542 code {
543 font-family: var(--font-mono);
544 font-size: 11px;
545 color: #ff7b72;
546 background: rgba(255, 123, 114, 0.08);
547 border-radius: 3px;
548 padding: 1px 4px;
549 }
550 }
551
552 .mcp-prompt-args { display: flex; flex-direction: column; gap: 4px; }
553
554 .mcp-prompt-arg-chip {
555 font-size: 11px; color: var(--text-muted); line-height: 1.4;
556 code { font-size: 11px; color: var(--text-primary); }
557 }
558
559 .mcp-prompt-arg-hint {
560 color: var(--text-muted);
561 }
562
563
564
565
566 // ── Responsive ────────────────────────────────────────────────────────────────
567
568 @media (max-width: 768px) {
569 .mcp-hero {
570 padding: var(--space-6) var(--space-3);
571 text-align: center;
572 }
573
574 .mcp-hero-content {
575 flex-direction: column;
576 align-items: center;
577 gap: var(--space-4);
578 }
579
580 .mcp-quickstart-grid {
581 grid-template-columns: 1fr;
582 }
583
584 .mcp-tools-grid {
585 grid-template-columns: 1fr;
586 }
587
588 .mcp-nav {
589 overflow-x: auto;
590 -webkit-overflow-scrolling: touch;
591 flex-wrap: nowrap;
592 gap: var(--space-2);
593 }
594
595 .mcp-layout {
596 grid-template-columns: 1fr;
597 }
598
599 .mcp-sidebar {
600 display: none;
601 }
602
603 .mcp-endpoint-row {
604 flex-direction: column;
605 align-items: flex-start;
606 gap: var(--space-1);
607 }
608 }
609
610 @media (max-width: 480px) {
611 .mcp-hero-title {
612 font-size: 24px;
613 }
614
615 .mcp-hero-subtitle {
616 font-size: 14px;
617 }
618
619 .mcp-tool-card {
620 padding: var(--space-3);
621 }
622
623 .mcp-endpoint-method {
624 font-size: 11px;
625 padding: 2px 6px;
626 }
627
628 .mcp-code-block {
629 font-size: 11px;
630 overflow-x: auto;
631 }
632 }
File History 1 commit
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ 156 days ago