@aravindc26/velu 0.12.8 → 0.12.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/package.json +1 -1
  2. package/src/build.ts +13 -0
  3. package/src/cli.ts +51 -9
  4. package/src/engine/app/(docs)/[...slug]/layout.tsx +21 -537
  5. package/src/engine/app/_preview/[sessionId]/[...slug]/layout.tsx +96 -0
  6. package/src/engine/app/_preview/[sessionId]/[...slug]/page.tsx +298 -0
  7. package/src/engine/app/_preview/[sessionId]/layout.tsx +56 -0
  8. package/src/{preview-engine/app → engine/app/_preview}/[sessionId]/page.tsx +7 -3
  9. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/assets/[...path]/route.ts +1 -1
  10. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/init/route.ts +2 -2
  11. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/route.ts +3 -3
  12. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/sync/route.ts +2 -2
  13. package/src/{preview-engine/app → engine/app/_preview}/layout.tsx +4 -1
  14. package/src/engine/app/global.css +0 -3623
  15. package/src/engine/app/layout.tsx +4 -3
  16. package/src/engine/components/sidebar-links.tsx +11 -5
  17. package/src/engine/lib/docs-layout.tsx +605 -0
  18. package/src/engine/lib/layout.shared.ts +7 -7
  19. package/src/engine/lib/preview-config.ts +129 -0
  20. package/src/{preview-engine/lib/content-generator.ts → engine/lib/preview-content.ts} +242 -42
  21. package/src/engine/lib/source.ts +80 -97
  22. package/src/engine/lib/velu.ts +79 -55
  23. package/src/engine/mdx-components.tsx +14 -650
  24. package/src/engine/source.config.ts +11 -89
  25. package/src/engine/tsconfig.json +1 -0
  26. package/src/engine-core/components/assistant.tsx +361 -0
  27. package/src/engine-core/components/banner.tsx +80 -0
  28. package/src/engine-core/components/changelog-filters.tsx +114 -0
  29. package/src/engine-core/components/code-group.tsx +383 -0
  30. package/src/engine-core/components/color.tsx +118 -0
  31. package/src/engine-core/components/copy-page.tsx +223 -0
  32. package/src/engine-core/components/dropdown-switcher.tsx +142 -0
  33. package/src/engine-core/components/expandable.tsx +77 -0
  34. package/src/engine-core/components/header-tab-link.tsx +43 -0
  35. package/src/engine-core/components/icon.tsx +136 -0
  36. package/src/engine-core/components/image-zoom-fallback.tsx +147 -0
  37. package/src/engine-core/components/image.tsx +111 -0
  38. package/src/engine-core/components/lang-switcher.tsx +101 -0
  39. package/src/engine-core/components/manual-api-playground.tsx +154 -0
  40. package/src/engine-core/components/mermaid.tsx +142 -0
  41. package/src/engine-core/components/openapi-toc-sync.tsx +59 -0
  42. package/src/engine-core/components/openapi.tsx +1682 -0
  43. package/src/engine-core/components/page-feedback-api.test.ts +83 -0
  44. package/src/engine-core/components/page-feedback-api.ts +89 -0
  45. package/src/engine-core/components/page-feedback.tsx +200 -0
  46. package/src/engine-core/components/product-switcher.tsx +107 -0
  47. package/src/engine-core/components/prompt.tsx +90 -0
  48. package/src/engine-core/components/providers.tsx +21 -0
  49. package/src/engine-core/components/search.tsx +318 -0
  50. package/src/engine-core/components/sidebar-links.tsx +54 -0
  51. package/src/engine-core/components/synced-tabs.tsx +57 -0
  52. package/src/engine-core/components/theme-toggle.tsx +39 -0
  53. package/src/engine-core/components/toc-examples.tsx +110 -0
  54. package/src/engine-core/components/version-switcher.tsx +95 -0
  55. package/src/engine-core/components/view.tsx +344 -0
  56. package/src/engine-core/css/assistant.css +326 -0
  57. package/src/engine-core/css/copy-page.css +206 -0
  58. package/src/engine-core/css/search.css +142 -0
  59. package/src/engine-core/css/shared.css +3628 -0
  60. package/src/engine-core/lib/remark-plugins.ts +102 -0
  61. package/src/engine-core/lib/source-plugins.ts +105 -0
  62. package/src/engine-core/mdx-components.tsx +654 -0
  63. package/src/engine-core/types.ts +49 -0
  64. package/src/preview-engine/app/[sessionId]/[...slug]/page.tsx +0 -41
  65. package/src/preview-engine/app/[sessionId]/layout.tsx +0 -26
  66. package/src/preview-engine/app/global.css +0 -29
  67. package/src/preview-engine/lib/session-config.ts +0 -86
  68. package/src/preview-engine/lib/session-layout.ts +0 -190
  69. package/src/preview-engine/lib/source.ts +0 -60
  70. package/src/preview-engine/next.config.mjs +0 -20
  71. package/src/preview-engine/postcss.config.mjs +0 -8
  72. package/src/preview-engine/source.config.ts +0 -26
  73. package/src/preview-engine/tsconfig.json +0 -32
  74. package/src/preview-engine/tsconfig.tsbuildinfo +0 -1
  75. /package/src/{preview-engine/app → engine/app/_preview}/page.tsx +0 -0
  76. /package/src/{preview-engine/lib/auth.ts → engine/lib/preview-auth.ts} +0 -0
@@ -2,3626 +2,3 @@
2
2
  @import 'fumadocs-ui/css/preset.css';
3
3
  @import 'fumadocs-openapi/css/preset.css';
4
4
  @import './velu-theme.css';
5
-
6
- body {
7
- min-height: 100vh;
8
- }
9
-
10
- body:has(.velu-announcement) #nd-docs-layout,
11
- body:has(.velu-announcement) #nd-notebook-layout {
12
- --fd-banner-height: var(--velu-announcement-h, 0px) !important;
13
- }
14
-
15
- /* ── Global announcement banner ── */
16
- .velu-announcement {
17
- position: sticky;
18
- top: 0;
19
- z-index: 30;
20
- display: flex;
21
- align-items: center;
22
- justify-content: center;
23
- width: 100%;
24
- padding: 0.5rem 1rem;
25
- background-color: var(--color-fd-primary);
26
- color: #fff;
27
- font-size: 0.875rem;
28
- line-height: 1.4;
29
- text-align: center;
30
- gap: 0.5rem;
31
- border-radius: 0;
32
- margin: 0;
33
- border: none;
34
- }
35
-
36
- .velu-announcement a {
37
- color: #fff;
38
- text-decoration: underline;
39
- text-underline-offset: 2px;
40
- }
41
-
42
- .velu-announcement a:hover {
43
- opacity: 0.85;
44
- }
45
-
46
- .velu-announcement-content {
47
- flex: 1;
48
- min-width: 0;
49
- }
50
-
51
- .velu-announcement-dismiss {
52
- flex-shrink: 0;
53
- display: inline-flex;
54
- align-items: center;
55
- justify-content: center;
56
- width: 1.5rem;
57
- height: 1.5rem;
58
- padding: 0;
59
- border: none;
60
- border-radius: 0.25rem;
61
- background: transparent;
62
- color: #fff;
63
- font-size: 1rem;
64
- cursor: pointer;
65
- opacity: 0.8;
66
- transition: opacity 0.15s;
67
- }
68
-
69
- .velu-announcement-dismiss:hover {
70
- opacity: 1;
71
- }
72
-
73
- .velu-nav-brand {
74
- display: inline-flex;
75
- align-items: center;
76
- gap: 0.25rem;
77
- max-width: 100%;
78
- }
79
-
80
- .velu-nav-logo {
81
- display: block;
82
- height: 1.95rem;
83
- width: auto;
84
- max-width: 190px;
85
- }
86
-
87
- .velu-nav-logo-dark {
88
- display: none;
89
- }
90
-
91
- .dark .velu-nav-logo-light {
92
- display: none;
93
- }
94
-
95
- .dark .velu-nav-logo-dark {
96
- display: block;
97
- }
98
-
99
- /* Keep sidebar brand and collapse control aligned like Mintlify. */
100
- #nd-sidebar .flex.justify-between {
101
- width: 100%;
102
- display: grid;
103
- grid-template-columns: minmax(0, 1fr) auto;
104
- align-items: center;
105
- column-gap: 0.5rem;
106
- }
107
-
108
- #nd-sidebar .flex.justify-between > a {
109
- min-width: 0;
110
- overflow: hidden;
111
- }
112
-
113
- #nd-sidebar .flex.justify-between > button {
114
- margin-left: auto;
115
- }
116
-
117
- /* Ensure sidebar/toc widths are set on the grid layout */
118
- nextjs-portal {
119
- display: none !important;
120
- }
121
-
122
- @media (min-width: 768px) {
123
- #nd-docs-layout[data-sidebar-collapsed='false'] {
124
- --fd-sidebar-width: 268px;
125
- }
126
- }
127
-
128
- @media (min-width: 1024px) {
129
- #nd-docs-layout,
130
- #nd-notebook-layout {
131
- --fd-toc-width: 268px;
132
- }
133
-
134
- #nd-docs-layout:has(#nd-toc .velu-api-toc-rail),
135
- #nd-notebook-layout:has(#nd-toc .velu-api-toc-rail) {
136
- --fd-toc-width: clamp(420px, 32vw, 560px);
137
- }
138
-
139
- /* Override notebook's default xl TOC width reset for API example rail. */
140
- #nd-toc:has(.velu-api-toc-rail) {
141
- --fd-toc-width: clamp(420px, 32vw, 560px);
142
- width: var(--fd-toc-width);
143
- padding-top: 0;
144
- overflow-y: auto;
145
- overflow-x: hidden;
146
- }
147
-
148
- /* Notebook header: keep tabs on the left and move search to the far right. */
149
- #nd-subnav [data-header-body] > button[data-search-full] {
150
- order: 3;
151
- margin-left: auto;
152
- width: min(280px, 28vw);
153
- max-width: 280px;
154
- min-width: 220px;
155
- flex: 0 0 auto;
156
- }
157
-
158
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 {
159
- order: 2;
160
- flex: 0 1 auto;
161
- justify-content: flex-start;
162
- margin-right: auto;
163
- }
164
-
165
- /* Top bar tabs: active underline like Mintlify. */
166
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden {
167
- align-self: stretch;
168
- }
169
-
170
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > a,
171
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button {
172
- display: inline-flex;
173
- align-items: center;
174
- height: 100%;
175
- font-size: 1.05rem;
176
- font-weight: 700;
177
- border-bottom: 2px solid transparent;
178
- margin-bottom: -1px;
179
- }
180
-
181
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button {
182
- background: transparent;
183
- padding-inline: 0;
184
- border-radius: 0;
185
- }
186
-
187
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > a[data-active='true'],
188
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button:has(a[data-active='true']),
189
- #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button[data-state='open'] {
190
- border-bottom-color: var(--color-fd-primary);
191
- }
192
- }
193
-
194
- .velu-sidebar-footer {
195
- display: flex;
196
- flex-direction: column;
197
- gap: 0.5rem;
198
- }
199
-
200
- .velu-sidebar-footer-shell {
201
- border-top: 1px solid var(--color-fd-border);
202
- padding: 0.75rem 1rem 1rem;
203
- }
204
-
205
- .velu-sidebar-footer-icons {
206
- display: flex;
207
- align-items: center;
208
- gap: 0.35rem;
209
- margin-bottom: 0.35rem;
210
- }
211
-
212
- .velu-sidebar-banner {
213
- display: flex;
214
- width: 100%;
215
- padding: 0.125rem 0;
216
- order: -1;
217
- }
218
-
219
- /* Keep the sidebar title row above the product switcher */
220
- #nd-sidebar .flex.flex-col > :first-child {
221
- order: -2;
222
- }
223
-
224
- .velu-header-version-switcher {
225
- display: flex;
226
- align-items: center;
227
- justify-content: flex-end;
228
- }
229
-
230
- .velu-version-switcher-wrap {
231
- position: relative;
232
- }
233
-
234
- .velu-version-switcher {
235
- display: inline-flex;
236
- align-items: center;
237
- gap: 0.35rem;
238
- padding: 0.25rem 0.5rem;
239
- border: none;
240
- border-radius: 0.375rem;
241
- background: transparent;
242
- color: var(--color-fd-muted-foreground);
243
- font-size: 0.75rem;
244
- font-weight: 500;
245
- cursor: pointer;
246
- transition: color 0.15s, background-color 0.15s;
247
- }
248
-
249
- .velu-version-switcher:hover {
250
- color: var(--color-fd-foreground);
251
- background-color: var(--color-fd-accent);
252
- }
253
-
254
- .velu-version-switcher svg {
255
- width: 0.9rem;
256
- height: 0.9rem;
257
- }
258
-
259
- .velu-version-switcher svg:last-child {
260
- width: 0.8rem;
261
- height: 0.8rem;
262
- }
263
-
264
- .velu-version-menu {
265
- position: absolute;
266
- top: calc(100% + 0.25rem);
267
- right: 0;
268
- min-width: 7.5rem;
269
- padding: 0.25rem;
270
- border-radius: 0.5rem;
271
- background-color: var(--color-fd-popover);
272
- border: 1px solid var(--color-fd-border);
273
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
274
- z-index: 60;
275
- }
276
-
277
- .velu-version-option {
278
- display: block;
279
- width: 100%;
280
- padding: 0.35rem 0.5rem;
281
- border: none;
282
- border-radius: 0.375rem;
283
- background: transparent;
284
- color: var(--color-fd-muted-foreground);
285
- font-size: 0.8rem;
286
- text-align: left;
287
- cursor: pointer;
288
- transition: color 0.15s, background-color 0.15s;
289
- }
290
-
291
- .velu-version-option:hover {
292
- background-color: var(--color-fd-accent);
293
- color: var(--color-fd-foreground);
294
- }
295
-
296
- .velu-version-option.active {
297
- color: var(--color-fd-primary);
298
- }
299
-
300
- .velu-product-switcher-wrap {
301
- position: relative;
302
- width: 100%;
303
- }
304
-
305
- .velu-product-switcher {
306
- display: flex;
307
- align-items: center;
308
- justify-content: space-between;
309
- width: 100%;
310
- padding: 0.5rem 0.625rem;
311
- border: 1px solid var(--color-fd-border);
312
- border-radius: 0.5rem;
313
- background: var(--color-fd-background);
314
- color: var(--color-fd-foreground);
315
- font-size: 0.8125rem;
316
- font-weight: 500;
317
- cursor: pointer;
318
- transition: border-color 0.15s, background-color 0.15s;
319
- }
320
-
321
- .velu-product-switcher:hover {
322
- border-color: var(--color-fd-primary);
323
- background-color: var(--color-fd-accent);
324
- }
325
-
326
- .velu-product-switcher svg {
327
- width: 0.875rem;
328
- height: 0.875rem;
329
- flex-shrink: 0;
330
- opacity: 0.6;
331
- }
332
-
333
- .velu-product-switcher-label {
334
- flex: 1;
335
- text-align: left;
336
- }
337
-
338
- .velu-product-switcher-label-wrap {
339
- display: inline-flex;
340
- align-items: center;
341
- gap: 0.4rem;
342
- min-width: 0;
343
- }
344
-
345
- .velu-product-icon {
346
- width: 0.9rem;
347
- height: 0.9rem;
348
- flex-shrink: 0;
349
- opacity: 0.75;
350
- }
351
-
352
- .velu-product-menu {
353
- position: absolute;
354
- top: calc(100% + 0.25rem);
355
- left: 0;
356
- right: 0;
357
- padding: 0.25rem;
358
- border-radius: 0.5rem;
359
- background-color: var(--color-fd-popover);
360
- border: 1px solid var(--color-fd-border);
361
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
362
- z-index: 60;
363
- }
364
-
365
- .velu-product-option {
366
- display: flex;
367
- flex-direction: column;
368
- width: 100%;
369
- padding: 0.5rem 0.625rem;
370
- border: none;
371
- border-radius: 0.375rem;
372
- background: transparent;
373
- text-align: left;
374
- cursor: pointer;
375
- transition: background-color 0.15s;
376
- }
377
-
378
- .velu-product-option:hover {
379
- background-color: var(--color-fd-accent);
380
- }
381
-
382
- .velu-product-option.active {
383
- background-color: var(--color-fd-accent);
384
- }
385
-
386
- .velu-product-option-name {
387
- font-size: 0.8125rem;
388
- font-weight: 500;
389
- color: var(--color-fd-foreground);
390
- }
391
-
392
- .velu-product-option-name-wrap {
393
- display: inline-flex;
394
- align-items: center;
395
- gap: 0.4rem;
396
- }
397
-
398
- .velu-product-option-icon {
399
- width: 0.9rem;
400
- height: 0.9rem;
401
- flex-shrink: 0;
402
- opacity: 0.75;
403
- }
404
-
405
- .velu-product-option.active .velu-product-option-name {
406
- color: var(--color-fd-primary);
407
- }
408
-
409
- .velu-product-option-desc {
410
- font-size: 0.6875rem;
411
- color: var(--color-fd-muted-foreground);
412
- margin-top: 0.125rem;
413
- }
414
-
415
- .velu-sidebar-footer-row {
416
- display: flex;
417
- align-items: center;
418
- justify-content: space-between;
419
- }
420
-
421
- .velu-sidebar-links {
422
- display: flex;
423
- flex-direction: column;
424
- gap: 0;
425
- }
426
-
427
- .velu-sidebar-link {
428
- display: flex;
429
- align-items: center;
430
- justify-content: space-between;
431
- padding: 0.375rem 0.5rem;
432
- border-radius: 0.375rem;
433
- font-size: 0.875rem;
434
- color: var(--color-fd-muted-foreground);
435
- text-decoration: none;
436
- transition: color 0.15s, background-color 0.15s;
437
- }
438
-
439
- .velu-sidebar-link:hover {
440
- color: var(--color-fd-foreground);
441
- background-color: var(--color-fd-accent);
442
- }
443
-
444
- .velu-sidebar-link-text {
445
- flex: 1;
446
- }
447
-
448
- .velu-sidebar-link-left {
449
- display: inline-flex;
450
- align-items: center;
451
- gap: 0.4rem;
452
- min-width: 0;
453
- }
454
-
455
- .velu-sidebar-link-leading-icon {
456
- width: 0.875rem;
457
- height: 0.875rem;
458
- opacity: 0.7;
459
- flex-shrink: 0;
460
- }
461
-
462
- .velu-sidebar-link-icon {
463
- width: 0.875rem;
464
- height: 0.875rem;
465
- opacity: 0.5;
466
- flex-shrink: 0;
467
- }
468
-
469
- .velu-sidebar-link:hover .velu-sidebar-link-icon {
470
- opacity: 0.8;
471
- }
472
-
473
- .velu-status-badge {
474
- display: inline-flex;
475
- align-items: center;
476
- margin-inline-start: 0.45rem;
477
- padding: 0.06rem 0.38rem;
478
- border-radius: 999px;
479
- border: 1px solid var(--color-fd-border);
480
- font-size: 0.62rem;
481
- font-weight: 650;
482
- line-height: 1.2;
483
- color: var(--color-fd-muted-foreground);
484
- text-transform: uppercase;
485
- letter-spacing: 0.02em;
486
- }
487
-
488
- .velu-status-badge-deprecated {
489
- border-color: color-mix(in oklab, #f59e0b 52%, var(--color-fd-border));
490
- background: color-mix(in oklab, #f59e0b 14%, transparent);
491
- color: #f59e0b;
492
- }
493
-
494
- .velu-openapi-sidebar-item {
495
- display: inline-flex;
496
- align-items: center;
497
- gap: 0.55rem;
498
- min-width: 0;
499
- }
500
-
501
- .velu-openapi-sidebar-label {
502
- min-width: 0;
503
- }
504
-
505
- .velu-openapi-method-badge {
506
- display: inline-flex;
507
- align-items: center;
508
- justify-content: center;
509
- border-radius: 999px;
510
- padding: 0.06rem 0.43rem;
511
- font-size: 0.66rem;
512
- font-weight: 700;
513
- line-height: 1.2;
514
- text-transform: uppercase;
515
- letter-spacing: 0.01em;
516
- flex-shrink: 0;
517
- }
518
-
519
- .velu-openapi-method-get {
520
- background: color-mix(in oklab, #16a34a 20%, transparent);
521
- color: #22c55e;
522
- }
523
-
524
- .velu-openapi-method-post {
525
- background: color-mix(in oklab, #2563eb 20%, transparent);
526
- color: #60a5fa;
527
- }
528
-
529
- .velu-openapi-method-put {
530
- background: color-mix(in oklab, #ca8a04 20%, transparent);
531
- color: #facc15;
532
- }
533
-
534
- .velu-openapi-method-patch {
535
- background: color-mix(in oklab, #ea580c 20%, transparent);
536
- color: #fb923c;
537
- }
538
-
539
- .velu-openapi-method-delete {
540
- background: color-mix(in oklab, #dc2626 20%, transparent);
541
- color: #f87171;
542
- }
543
-
544
- .velu-openapi-method-webhook {
545
- background: color-mix(in oklab, #8b5cf6 20%, transparent);
546
- color: #c4b5fd;
547
- }
548
-
549
- .velu-theme-toggle {
550
- display: flex;
551
- align-items: center;
552
- gap: 0.25rem;
553
- padding: 0.25rem;
554
- border-radius: 0.5rem;
555
- background-color: var(--color-fd-accent);
556
- width: fit-content;
557
- margin-left: auto;
558
- }
559
-
560
- .velu-lang-switcher {
561
- display: flex;
562
- align-items: center;
563
- gap: 0.375rem;
564
- padding: 0.375rem 0.5rem;
565
- border: none;
566
- border-radius: 0.375rem;
567
- background: transparent;
568
- color: var(--color-fd-muted-foreground);
569
- font-size: 0.875rem;
570
- cursor: pointer;
571
- transition: color 0.15s, background-color 0.15s;
572
- position: relative;
573
- }
574
-
575
- .velu-lang-switcher:hover {
576
- color: var(--color-fd-foreground);
577
- background-color: var(--color-fd-accent);
578
- }
579
-
580
- .velu-lang-switcher svg {
581
- width: 1rem;
582
- height: 1rem;
583
- }
584
-
585
- .velu-lang-menu {
586
- position: absolute;
587
- bottom: 100%;
588
- left: 0;
589
- margin-bottom: 0.25rem;
590
- min-width: 8rem;
591
- padding: 0.25rem;
592
- border-radius: 0.5rem;
593
- background-color: var(--color-fd-popover);
594
- border: 1px solid var(--color-fd-border);
595
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
596
- z-index: 50;
597
- }
598
-
599
- .velu-lang-option {
600
- display: block;
601
- width: 100%;
602
- padding: 0.375rem 0.5rem;
603
- border: none;
604
- border-radius: 0.375rem;
605
- background: transparent;
606
- color: var(--color-fd-muted-foreground);
607
- font-size: 0.875rem;
608
- text-align: left;
609
- cursor: pointer;
610
- transition: color 0.15s, background-color 0.15s;
611
- }
612
-
613
- .velu-lang-option:hover {
614
- background-color: var(--color-fd-accent);
615
- color: var(--color-fd-foreground);
616
- }
617
-
618
- .velu-lang-option.active {
619
- color: var(--color-fd-primary);
620
- }
621
-
622
- .velu-theme-btn {
623
- display: flex;
624
- align-items: center;
625
- justify-content: center;
626
- padding: 0.375rem;
627
- border: none;
628
- border-radius: 0.375rem;
629
- background: transparent;
630
- color: var(--color-fd-muted-foreground);
631
- cursor: pointer;
632
- transition: color 0.15s, background-color 0.15s;
633
- }
634
-
635
- .velu-theme-btn:hover {
636
- color: var(--color-fd-foreground);
637
- }
638
-
639
- .velu-theme-btn.active {
640
- background-color: var(--color-fd-background);
641
- color: var(--color-fd-foreground);
642
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
643
- }
644
-
645
- .velu-footer {
646
- margin-top: 3rem;
647
- padding-top: 1.1rem;
648
- border-top: 1px solid var(--color-fd-border);
649
- display: flex;
650
- align-items: center;
651
- justify-content: space-between;
652
- gap: 1rem;
653
- flex-wrap: wrap;
654
- font-size: 1rem;
655
- color: var(--color-fd-muted-foreground);
656
- }
657
-
658
- .velu-footer-socials {
659
- display: inline-flex;
660
- align-items: center;
661
- gap: 1rem;
662
- }
663
-
664
- .velu-footer-social-link {
665
- display: inline-flex;
666
- align-items: center;
667
- justify-content: center;
668
- color: var(--color-fd-muted-foreground);
669
- opacity: 0.78;
670
- text-decoration: none;
671
- transition: color 0.15s, opacity 0.15s;
672
- }
673
-
674
- .velu-footer-social-link:hover {
675
- color: var(--color-fd-foreground);
676
- opacity: 1;
677
- }
678
-
679
- .velu-footer-social-icon {
680
- width: 1.05rem;
681
- height: 1.05rem;
682
- flex-shrink: 0;
683
- }
684
-
685
- .velu-footer-powered {
686
- margin-left: auto;
687
- font-size: 1.15rem;
688
- line-height: 1.3;
689
- }
690
-
691
- .velu-page-feedback-wrap {
692
- margin-top: 2.75rem;
693
- display: grid;
694
- gap: 0.85rem;
695
- }
696
-
697
- .velu-page-feedback-block {
698
- display: grid;
699
- gap: 0.85rem;
700
- }
701
-
702
- .velu-page-feedback-row {
703
- display: flex;
704
- align-items: center;
705
- justify-content: flex-start;
706
- gap: 0.55rem;
707
- flex-wrap: wrap;
708
- }
709
-
710
- .velu-page-feedback-question {
711
- margin: 0;
712
- font-size: 0.82rem;
713
- font-weight: 500;
714
- line-height: 1.35;
715
- color: var(--color-fd-foreground);
716
- }
717
-
718
- .velu-page-feedback-actions {
719
- display: inline-flex;
720
- align-items: center;
721
- gap: 0.5rem;
722
- margin-left: 0.1rem;
723
- }
724
-
725
- .velu-page-feedback-btn {
726
- display: inline-flex;
727
- align-items: center;
728
- gap: 0.45rem;
729
- border: 1px solid var(--color-fd-border);
730
- border-radius: 999px;
731
- background: transparent;
732
- color: var(--color-fd-muted-foreground);
733
- height: 1.72rem;
734
- padding: 0 0.6rem;
735
- font-size: 0.82rem;
736
- font-weight: 500;
737
- line-height: 1;
738
- cursor: pointer;
739
- transition: color 0.15s, border-color 0.15s, background-color 0.15s;
740
- }
741
-
742
- .velu-page-feedback-btn:hover {
743
- color: var(--color-fd-foreground);
744
- border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
745
- background: color-mix(in oklab, var(--color-fd-primary) 8%, transparent);
746
- }
747
-
748
- .velu-page-feedback-btn.is-active {
749
- color: var(--color-fd-foreground);
750
- border-color: color-mix(in oklab, var(--color-fd-primary) 55%, var(--color-fd-border));
751
- }
752
-
753
- .velu-page-feedback-btn svg {
754
- width: 0.76rem;
755
- height: 0.76rem;
756
- stroke: currentColor;
757
- fill: none;
758
- stroke-width: 1.9;
759
- stroke-linecap: round;
760
- stroke-linejoin: round;
761
- }
762
-
763
- .velu-page-feedback-panel {
764
- border-top: 1px solid var(--color-fd-border);
765
- padding-top: 1rem;
766
- display: grid;
767
- gap: 0.85rem;
768
- }
769
-
770
- .velu-page-feedback-panel-title {
771
- margin: 0;
772
- font-size: 0.95rem;
773
- line-height: 1.35;
774
- font-weight: 600;
775
- color: var(--color-fd-foreground);
776
- }
777
-
778
- .velu-page-feedback-options {
779
- display: grid;
780
- gap: 0.35rem;
781
- }
782
-
783
- .velu-page-feedback-option {
784
- border: 0;
785
- background: transparent;
786
- display: inline-flex;
787
- align-items: center;
788
- gap: 0.6rem;
789
- width: fit-content;
790
- max-width: 100%;
791
- color: var(--color-fd-muted-foreground);
792
- font-size: 0.82rem;
793
- line-height: 1.35;
794
- text-align: left;
795
- padding: 0.12rem 0;
796
- cursor: pointer;
797
- }
798
-
799
- .velu-page-feedback-option:hover {
800
- color: var(--color-fd-foreground);
801
- }
802
-
803
- .velu-page-feedback-option.is-checked {
804
- color: var(--color-fd-foreground);
805
- }
806
-
807
- .velu-page-feedback-radio {
808
- width: 1rem;
809
- height: 1rem;
810
- border-radius: 999px;
811
- border: 1px solid color-mix(in oklab, var(--color-fd-muted-foreground) 50%, var(--color-fd-border));
812
- box-shadow: inset 0 0 0 0 transparent;
813
- flex-shrink: 0;
814
- transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
815
- }
816
-
817
- .velu-page-feedback-option.is-checked .velu-page-feedback-radio {
818
- border-color: var(--color-fd-primary);
819
- background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
820
- box-shadow: inset 0 0 0 3px var(--color-fd-primary);
821
- }
822
-
823
- .velu-page-feedback-inputs {
824
- display: grid;
825
- gap: 0.6rem;
826
- }
827
-
828
- .velu-page-feedback-input {
829
- width: 100%;
830
- border: 1px solid var(--color-fd-border);
831
- border-radius: 0.75rem;
832
- background: transparent;
833
- color: var(--color-fd-foreground);
834
- font: inherit;
835
- font-size: 0.82rem;
836
- line-height: 1.35;
837
- padding: 0.68rem 0.8rem;
838
- }
839
-
840
- .velu-page-feedback-input::placeholder {
841
- color: var(--color-fd-muted-foreground);
842
- }
843
-
844
- .velu-page-feedback-input:focus {
845
- outline: none;
846
- border-color: color-mix(in oklab, var(--color-fd-primary) 55%, var(--color-fd-border));
847
- box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-fd-primary) 22%, transparent);
848
- }
849
-
850
- .velu-page-feedback-cta {
851
- display: inline-flex;
852
- align-items: center;
853
- gap: 0.55rem;
854
- }
855
-
856
- .velu-page-feedback-cancel,
857
- .velu-page-feedback-submit {
858
- border-radius: 999px;
859
- height: 2rem;
860
- padding: 0 0.9rem;
861
- font: inherit;
862
- font-size: 0.82rem;
863
- font-weight: 500;
864
- line-height: 1;
865
- cursor: pointer;
866
- }
867
-
868
- .velu-page-feedback-cancel {
869
- border: 1px solid var(--color-fd-border);
870
- background: transparent;
871
- color: var(--color-fd-muted-foreground);
872
- }
873
-
874
- .velu-page-feedback-cancel:hover {
875
- color: var(--color-fd-foreground);
876
- border-color: color-mix(in oklab, var(--color-fd-primary) 35%, var(--color-fd-border));
877
- }
878
-
879
- .velu-page-feedback-submit {
880
- border: 1px solid color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
881
- background: var(--color-fd-foreground);
882
- color: var(--color-fd-background);
883
- }
884
-
885
- .velu-page-feedback-submit:hover {
886
- filter: brightness(0.96);
887
- }
888
-
889
- .velu-page-nav-grid {
890
- display: grid;
891
- gap: 0.85rem;
892
- }
893
-
894
- .velu-page-nav-grid-one {
895
- grid-template-columns: 1fr;
896
- }
897
-
898
- .velu-page-nav-grid-two {
899
- grid-template-columns: repeat(2, minmax(0, 1fr));
900
- }
901
-
902
- .velu-page-nav-card {
903
- display: flex;
904
- flex-direction: column;
905
- gap: 0.35rem;
906
- border: 1px solid var(--color-fd-border);
907
- border-radius: 0.85rem;
908
- padding: 1rem 1.1rem;
909
- text-decoration: none;
910
- color: inherit;
911
- transition: border-color 0.15s, background-color 0.15s;
912
- }
913
-
914
- .velu-page-nav-card:hover {
915
- border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
916
- background: color-mix(in oklab, var(--color-fd-primary) 8%, transparent);
917
- }
918
-
919
- .velu-page-nav-card-next {
920
- text-align: right;
921
- }
922
-
923
- .velu-page-nav-title {
924
- margin: 0;
925
- font-size: 1rem;
926
- font-weight: 600;
927
- color: var(--color-fd-foreground);
928
- line-height: 1.25;
929
- }
930
-
931
- .velu-page-nav-meta {
932
- margin: 0;
933
- display: inline-flex;
934
- align-items: center;
935
- gap: 0.35rem;
936
- color: var(--color-fd-muted-foreground);
937
- font-size: 0.95rem;
938
- line-height: 1.35;
939
- }
940
-
941
- .velu-page-nav-meta-next {
942
- justify-content: flex-end;
943
- }
944
-
945
- .velu-page-nav-meta svg {
946
- width: 0.95rem;
947
- height: 0.95rem;
948
- stroke: currentColor;
949
- fill: none;
950
- stroke-width: 2;
951
- stroke-linecap: round;
952
- stroke-linejoin: round;
953
- flex-shrink: 0;
954
- }
955
-
956
- @media (max-width: 768px) {
957
- .velu-page-nav-grid-two {
958
- grid-template-columns: 1fr;
959
- }
960
-
961
- .velu-page-nav-card-next {
962
- text-align: left;
963
- }
964
-
965
- .velu-page-nav-meta-next {
966
- justify-content: flex-start;
967
- }
968
- }
969
-
970
- .velu-footer-powered a {
971
- color: var(--color-fd-primary);
972
- font-weight: 600;
973
- text-decoration: none;
974
- }
975
-
976
- .velu-footer-powered a:hover {
977
- text-decoration: underline;
978
- }
979
-
980
- @media (max-width: 768px) {
981
- .velu-footer-powered {
982
- margin-left: 0;
983
- }
984
- }
985
-
986
- [data-card].velu-card-horizontal {
987
- display: grid !important;
988
- grid-template-columns: 2.25rem minmax(0, 1fr);
989
- column-gap: 0.75rem;
990
- align-items: center !important;
991
- }
992
-
993
- [data-card].velu-card-horizontal > div.not-prose {
994
- grid-row: 1 / span 3;
995
- margin-bottom: 0;
996
- margin-top: 0;
997
- align-self: center;
998
- justify-self: start;
999
- }
1000
-
1001
- [data-card].velu-card-horizontal > h3 {
1002
- margin-bottom: 0.25rem;
1003
- }
1004
-
1005
- .velu-card-group {
1006
- display: grid !important;
1007
- grid-template-columns: repeat(var(--velu-card-cols, 2), minmax(0, 1fr));
1008
- gap: 0.75rem !important;
1009
- }
1010
-
1011
- .velu-card-group > [data-card] {
1012
- margin: 0 !important;
1013
- }
1014
-
1015
- .velu-card-image {
1016
- width: 100%;
1017
- border-radius: 0.55rem;
1018
- margin-bottom: 0.65rem;
1019
- border: 1px solid var(--color-fd-border);
1020
- }
1021
-
1022
- [data-card].velu-card {
1023
- display: flex;
1024
- flex-direction: column;
1025
- height: 100%;
1026
- border: 1px solid var(--color-fd-border);
1027
- background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card));
1028
- }
1029
-
1030
- [data-card].velu-card,
1031
- .velu-card-group > [data-card] {
1032
- transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
1033
- }
1034
-
1035
- [data-card].velu-card:hover,
1036
- .velu-card-group > [data-card]:hover {
1037
- /* Keep card surface stable on hover and emphasize border instead. */
1038
- background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card)) !important;
1039
- border-color: color-mix(in oklab, var(--color-fd-primary) 72%, var(--color-fd-border));
1040
- box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-fd-primary) 28%, transparent);
1041
- }
1042
-
1043
- /* Mintlify-like icon chip styling inside cards. */
1044
- [data-card].velu-card > div.not-prose {
1045
- background: transparent !important;
1046
- border: 0 !important;
1047
- color: var(--color-fd-primary) !important;
1048
- box-shadow: none !important;
1049
- width: 2.25rem;
1050
- height: 2.25rem;
1051
- padding: 0 !important;
1052
- border-radius: 0.7rem !important;
1053
- display: inline-flex;
1054
- align-items: center;
1055
- justify-content: center;
1056
- margin-bottom: 0.55rem;
1057
- }
1058
-
1059
- [data-card].velu-card > div.not-prose svg,
1060
- [data-card].velu-card > div.not-prose img {
1061
- width: 1.6rem;
1062
- height: 1.6rem;
1063
- }
1064
-
1065
- [data-card].velu-card > h3 {
1066
- margin-top: 0.04rem;
1067
- }
1068
-
1069
- [data-card].velu-card + [data-card].velu-card {
1070
- margin-top: 0.75rem !important;
1071
- }
1072
-
1073
- .velu-card-group > [data-card].velu-card + [data-card].velu-card {
1074
- margin-top: 0 !important;
1075
- }
1076
-
1077
- [data-card].velu-card > div:last-child {
1078
- display: flex;
1079
- flex-direction: column;
1080
- flex: 1;
1081
- }
1082
-
1083
- .velu-card-cta {
1084
- display: inline-flex;
1085
- align-items: center;
1086
- gap: 0.3rem;
1087
- margin-top: auto;
1088
- padding-top: 0.55rem;
1089
- font-size: 0.82rem;
1090
- font-weight: 600;
1091
- color: var(--color-fd-primary);
1092
- }
1093
-
1094
- .velu-card-cta-arrow {
1095
- width: 0.95rem;
1096
- height: 0.95rem;
1097
- }
1098
-
1099
- .velu-card-color-blue {
1100
- border-color: rgba(37, 99, 235, 0.3);
1101
- }
1102
-
1103
- .velu-card-color-green {
1104
- border-color: rgba(22, 163, 74, 0.3);
1105
- }
1106
-
1107
- .velu-card-color-yellow {
1108
- border-color: rgba(245, 158, 11, 0.35);
1109
- }
1110
-
1111
- .velu-card-color-red {
1112
- border-color: rgba(220, 38, 38, 0.3);
1113
- }
1114
-
1115
- .velu-card-color-purple {
1116
- border-color: rgba(147, 51, 234, 0.3);
1117
- }
1118
-
1119
- .velu-card-color-orange {
1120
- border-color: rgba(234, 88, 12, 0.3);
1121
- }
1122
-
1123
- .velu-card-color-gray {
1124
- border-color: rgba(148, 163, 184, 0.35);
1125
- }
1126
-
1127
- .velu-accordions,
1128
- .velu-code-group,
1129
- .velu-properties,
1130
- .velu-param-field,
1131
- .velu-response-field {
1132
- display: grid;
1133
- gap: 0.75rem;
1134
- }
1135
-
1136
- .velu-step-title {
1137
- margin: 0 0 0.35rem;
1138
- font-weight: 600;
1139
- }
1140
-
1141
- .velu-tabs-border-bottom {
1142
- border-bottom: 1px solid var(--color-fd-border);
1143
- padding-bottom: 0.75rem;
1144
- margin-bottom: 0.75rem;
1145
- }
1146
-
1147
- .velu-tabs-plain [role='tablist'] {
1148
- gap: 1rem;
1149
- margin-bottom: 0.45rem;
1150
- }
1151
-
1152
- .velu-code-group-dropdown {
1153
- border: 1px solid var(--color-fd-border);
1154
- border-radius: 0.85rem;
1155
- overflow: visible;
1156
- gap: 0;
1157
- }
1158
-
1159
- .velu-code-group-tabs {
1160
- border: 1px solid var(--color-fd-border);
1161
- border-radius: 0.85rem;
1162
- overflow: hidden;
1163
- gap: 0;
1164
- }
1165
-
1166
- .velu-code-group-tabs-head {
1167
- display: flex;
1168
- flex-wrap: wrap;
1169
- align-items: flex-end;
1170
- gap: 0.12rem;
1171
- min-height: 1.9rem;
1172
- padding: 0 0.45rem 0;
1173
- border-bottom: 1px solid var(--color-fd-border);
1174
- background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
1175
- }
1176
-
1177
- .velu-code-group-tab-btn {
1178
- display: inline-flex;
1179
- align-items: center;
1180
- align-self: flex-end;
1181
- gap: 0.28rem;
1182
- border: 0;
1183
- border-bottom: 2px solid transparent;
1184
- border-radius: 0.35rem 0.35rem 0 0;
1185
- padding: 0 0.28rem 0.06rem;
1186
- background: transparent;
1187
- color: var(--color-fd-muted-foreground);
1188
- font-size: 0.82rem;
1189
- font-weight: 600;
1190
- line-height: 1;
1191
- cursor: pointer;
1192
- min-height: 0;
1193
- }
1194
-
1195
- .velu-code-group-tab-btn > span:last-child,
1196
- .velu-code-group-file > span:last-child,
1197
- .velu-code-group-select-btn > span:nth-child(2),
1198
- .velu-code-group-select-item > span:nth-child(2) {
1199
- padding-top: 0.08rem;
1200
- padding-bottom: 0.16rem;
1201
- }
1202
-
1203
- .velu-code-group-tab-btn.is-active {
1204
- color: var(--color-fd-primary);
1205
- border-bottom-color: var(--color-fd-primary);
1206
- }
1207
-
1208
- .velu-code-group-dropdown-head {
1209
- display: flex;
1210
- align-items: center;
1211
- justify-content: space-between;
1212
- gap: 0.75rem;
1213
- padding: 0.7rem 0.9rem;
1214
- border-bottom: 1px solid var(--color-fd-border);
1215
- background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
1216
- }
1217
-
1218
- .velu-code-group-file {
1219
- display: inline-flex;
1220
- align-items: center;
1221
- gap: 0.45rem;
1222
- font-size: 0.95rem;
1223
- font-weight: 600;
1224
- color: var(--color-fd-foreground);
1225
- }
1226
-
1227
- .velu-code-group-select-wrap {
1228
- position: relative;
1229
- min-width: 10rem;
1230
- }
1231
-
1232
- .velu-code-group-select-btn {
1233
- width: 100%;
1234
- display: inline-flex;
1235
- align-items: center;
1236
- justify-content: space-between;
1237
- gap: 0.45rem;
1238
- border: 1px solid var(--color-fd-border);
1239
- border-radius: 0.65rem;
1240
- padding: 0.35rem 0.55rem;
1241
- background: var(--color-fd-background);
1242
- color: var(--color-fd-foreground);
1243
- font-size: 0.9rem;
1244
- cursor: pointer;
1245
- }
1246
-
1247
- .velu-code-group-caret {
1248
- opacity: 0.7;
1249
- font-size: 0.9rem;
1250
- }
1251
-
1252
- .velu-code-group-select-menu {
1253
- position: absolute;
1254
- top: calc(100% + 0.35rem);
1255
- right: 0;
1256
- min-width: 12rem;
1257
- border: 1px solid var(--color-fd-border);
1258
- border-radius: 0.75rem;
1259
- background: var(--color-fd-popover);
1260
- padding: 0.3rem;
1261
- z-index: 20;
1262
- box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
1263
- }
1264
-
1265
- .velu-code-group-select-item {
1266
- width: 100%;
1267
- display: inline-flex;
1268
- align-items: center;
1269
- gap: 0.5rem;
1270
- border: 0;
1271
- border-radius: 0.55rem;
1272
- padding: 0.45rem 0.5rem;
1273
- background: transparent;
1274
- color: var(--color-fd-foreground);
1275
- text-align: left;
1276
- cursor: pointer;
1277
- }
1278
-
1279
- .velu-code-group-select-item:hover {
1280
- background: var(--color-fd-accent);
1281
- }
1282
-
1283
- .velu-code-group-select-item.is-active {
1284
- color: var(--color-fd-primary);
1285
- }
1286
-
1287
- .velu-code-group-check {
1288
- margin-left: auto;
1289
- color: var(--color-fd-primary);
1290
- }
1291
-
1292
- .velu-code-group-dropdown-body {
1293
- padding: 0;
1294
- overflow: hidden;
1295
- border-bottom-left-radius: 0.85rem;
1296
- border-bottom-right-radius: 0.85rem;
1297
- }
1298
-
1299
- .velu-code-group-dropdown-body > * {
1300
- margin-top: 0 !important;
1301
- margin-bottom: 0 !important;
1302
- border-top-left-radius: 0;
1303
- border-top-right-radius: 0;
1304
- border-bottom-left-radius: 0.85rem;
1305
- border-bottom-right-radius: 0.85rem;
1306
- }
1307
-
1308
- .velu-lang-icon {
1309
- display: inline-flex;
1310
- align-items: center;
1311
- justify-content: center;
1312
- width: 1.15rem;
1313
- height: 1.15rem;
1314
- border-radius: 0.28rem;
1315
- font-size: 0.58rem;
1316
- font-weight: 700;
1317
- line-height: 1;
1318
- background: color-mix(in oklab, var(--color-fd-muted-foreground) 22%, transparent);
1319
- color: var(--color-fd-foreground);
1320
- }
1321
-
1322
- .velu-lang-icon-img {
1323
- width: 0.72rem;
1324
- height: 0.72rem;
1325
- display: block;
1326
- border-radius: 0.16rem;
1327
- object-fit: contain;
1328
- flex-shrink: 0;
1329
- }
1330
-
1331
- .velu-code-group .velu-lang-icon-img,
1332
- .velu-code-group-tabs-head .velu-lang-icon-img,
1333
- .velu-code-group-dropdown-head .velu-lang-icon-img,
1334
- .velu-code-group-select-item .velu-lang-icon-img {
1335
- margin: 0 !important;
1336
- }
1337
-
1338
- .velu-lang-javascript {
1339
- background: rgba(16, 185, 129, 0.2);
1340
- color: #34d399;
1341
- }
1342
-
1343
- .velu-lang-typescript {
1344
- background: rgba(59, 130, 246, 0.2);
1345
- color: #60a5fa;
1346
- }
1347
-
1348
- .velu-lang-python {
1349
- background: rgba(245, 158, 11, 0.2);
1350
- color: #fbbf24;
1351
- }
1352
-
1353
- .velu-lang-java {
1354
- background: rgba(239, 68, 68, 0.2);
1355
- color: #f87171;
1356
- }
1357
-
1358
- .velu-accordion,
1359
- .velu-expandable {
1360
- border: 1px solid var(--color-fd-border);
1361
- border-radius: 0.6rem;
1362
- background: var(--color-fd-card);
1363
- overflow: hidden;
1364
- }
1365
-
1366
- .velu-accordion > summary,
1367
- .velu-expandable > summary {
1368
- cursor: pointer;
1369
- font-weight: 600;
1370
- padding: 0.7rem 0.85rem;
1371
- }
1372
-
1373
- .velu-accordion-content,
1374
- .velu-expandable-content {
1375
- padding: 0 0.85rem 0.85rem;
1376
- }
1377
-
1378
- .velu-frame {
1379
- --velu-frame-gap-bg: #e5e7eb;
1380
- border: 1px solid var(--color-fd-border);
1381
- border-radius: 0.65rem;
1382
- overflow: hidden;
1383
- margin: 1rem 0;
1384
- }
1385
-
1386
- :root[data-theme='dark'] .velu-frame,
1387
- .dark .velu-frame {
1388
- --velu-frame-gap-bg: #2f2f2f;
1389
- }
1390
-
1391
- .velu-frame-content {
1392
- padding: 0.45rem;
1393
- background: var(--velu-frame-gap-bg);
1394
- }
1395
-
1396
- .velu-frame-content img {
1397
- display: block;
1398
- width: 100%;
1399
- height: auto;
1400
- margin: 0 !important;
1401
- border-radius: 0.45rem;
1402
- }
1403
-
1404
- .velu-frame-hint {
1405
- display: flex;
1406
- align-items: center;
1407
- gap: 0.5rem;
1408
- padding: 0;
1409
- margin: 0 0 0.55rem;
1410
- border: 0;
1411
- font-size: 1.05rem;
1412
- line-height: 1.4;
1413
- color: var(--color-fd-foreground);
1414
- background: transparent;
1415
- }
1416
-
1417
- .velu-frame-hint-icon {
1418
- width: 1rem;
1419
- height: 1rem;
1420
- flex-shrink: 0;
1421
- opacity: 0.9;
1422
- color: color-mix(in oklab, var(--color-fd-foreground) 72%, var(--color-fd-muted-foreground));
1423
- }
1424
-
1425
- :root[data-theme='dark'] .velu-frame-hint-icon,
1426
- .dark .velu-frame-hint-icon {
1427
- opacity: 1;
1428
- color: color-mix(in oklab, var(--color-fd-foreground) 92%, var(--color-fd-muted-foreground));
1429
- }
1430
-
1431
- .velu-frame figcaption {
1432
- font-size: 0.85rem;
1433
- color: color-mix(in oklab, var(--color-fd-foreground) 78%, var(--color-fd-muted-foreground));
1434
- border-top: 0;
1435
- padding: 0.55rem 0.8rem;
1436
- background: var(--velu-frame-gap-bg);
1437
- text-align: center;
1438
- margin-top: -0.1rem;
1439
- }
1440
-
1441
- .velu-frame figcaption a {
1442
- color: var(--color-fd-primary);
1443
- text-decoration: underline;
1444
- }
1445
-
1446
- .velu-param,
1447
- .velu-property {
1448
- border: 1px solid var(--color-fd-border);
1449
- border-radius: 0.6rem;
1450
- padding: 0.7rem 0.85rem;
1451
- }
1452
-
1453
- .velu-param-head,
1454
- .velu-property-head {
1455
- display: flex;
1456
- flex-wrap: wrap;
1457
- gap: 0.4rem;
1458
- align-items: center;
1459
- position: relative;
1460
- }
1461
-
1462
- .velu-param-head span,
1463
- .velu-property-head span {
1464
- font-size: 0.75rem;
1465
- border: 1px solid var(--color-fd-border);
1466
- border-radius: 999px;
1467
- padding: 0.1rem 0.45rem;
1468
- }
1469
-
1470
- .velu-param-head strong,
1471
- .velu-property-head strong {
1472
- color: var(--color-fd-primary);
1473
- font-size: 0.75rem;
1474
- }
1475
-
1476
- .velu-param-head em,
1477
- .velu-property-head em {
1478
- font-size: 0.75rem;
1479
- color: var(--color-fd-muted-foreground);
1480
- }
1481
-
1482
- .velu-param-field-item,
1483
- .velu-response-field-item {
1484
- border: 0;
1485
- border-radius: 0;
1486
- padding: 0;
1487
- background: transparent;
1488
- position: relative;
1489
- }
1490
-
1491
- .velu-param-field-item::before,
1492
- .velu-response-field-item::before {
1493
- content: '';
1494
- position: absolute;
1495
- top: 0;
1496
- bottom: 0;
1497
- left: -1.15rem;
1498
- width: 1.15rem;
1499
- }
1500
-
1501
- .velu-param-field-item + .velu-param-field-item,
1502
- .velu-response-field-item + .velu-response-field-item {
1503
- border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 18%, transparent);
1504
- margin-top: 0.75rem;
1505
- padding-top: 0.75rem;
1506
- }
1507
-
1508
- .velu-param-field-item .velu-param-head code,
1509
- .velu-response-field-item .velu-property-head code {
1510
- border: 0;
1511
- background: transparent;
1512
- padding: 0;
1513
- color: var(--color-fd-primary);
1514
- font-weight: 400;
1515
- font-size: 1.10em;
1516
- }
1517
-
1518
- .velu-param-anchor {
1519
- position: absolute;
1520
- left: -1rem;
1521
- top: 50%;
1522
- transform: translateY(-50%);
1523
- display: inline-flex;
1524
- align-items: center;
1525
- justify-content: center;
1526
- width: 0.9rem;
1527
- height: 0.9rem;
1528
- color: var(--color-fd-muted-foreground);
1529
- text-decoration: none;
1530
- opacity: 0;
1531
- visibility: hidden;
1532
- transition: opacity 0.15s ease, color 0.15s ease;
1533
- }
1534
-
1535
- .velu-param-anchor svg {
1536
- width: 0.85rem;
1537
- height: 0.85rem;
1538
- }
1539
-
1540
- .velu-param-field-item:hover .velu-param-anchor,
1541
- .velu-param-field-item:focus-within .velu-param-anchor,
1542
- .velu-response-field-item:hover .velu-param-anchor,
1543
- .velu-response-field-item:focus-within .velu-param-anchor,
1544
- .velu-param-anchor:focus-visible {
1545
- opacity: 0.9;
1546
- visibility: visible;
1547
- }
1548
-
1549
- .velu-param-anchor:hover {
1550
- color: var(--color-fd-foreground);
1551
- }
1552
-
1553
- .velu-pill {
1554
- display: inline-flex;
1555
- align-items: center;
1556
- border-radius: 999px;
1557
- padding: 0.1rem 0.45rem;
1558
- font-size: 0.72rem;
1559
- font-weight: 600;
1560
- line-height: 1.2;
1561
- }
1562
-
1563
- .velu-pill-required {
1564
- background: rgba(220, 38, 38, 0.16);
1565
- color: #ef4444;
1566
- }
1567
-
1568
- .velu-pill-deprecated {
1569
- background: rgba(245, 158, 11, 0.18);
1570
- color: #f59e0b;
1571
- }
1572
-
1573
- .velu-pill-type {
1574
- background: #e5e7eb;
1575
- color: #292929;
1576
- }
1577
-
1578
- .velu-param-body,
1579
- .velu-property-body {
1580
- margin-top: 0.5rem;
1581
- }
1582
-
1583
- .velu-param-field-meta {
1584
- display: flex;
1585
- gap: 0.35rem;
1586
- flex-wrap: wrap;
1587
- }
1588
-
1589
- .velu-param-field-meta span {
1590
- text-transform: uppercase;
1591
- font-size: 0.7rem;
1592
- color: var(--color-fd-muted-foreground);
1593
- border: 1px solid var(--color-fd-border);
1594
- border-radius: 999px;
1595
- padding: 0.08rem 0.4rem;
1596
- }
1597
-
1598
- .velu-endpoint,
1599
- .velu-openapi,
1600
- .velu-snippet {
1601
- border: 1px solid var(--color-fd-border);
1602
- border-radius: 0.65rem;
1603
- padding: 0.8rem;
1604
- margin: 1rem 0;
1605
- }
1606
-
1607
- .velu-api-playground {
1608
- border: 0;
1609
- border-radius: 0;
1610
- padding: 0.35rem 0.35rem 0.6rem;
1611
- }
1612
-
1613
- .velu-openapi-operation-layout {
1614
- display: flex;
1615
- flex-direction: column;
1616
- gap: 0.95rem;
1617
- }
1618
-
1619
- .velu-openapi-section {
1620
- display: flex;
1621
- flex-direction: column;
1622
- gap: 0.55rem;
1623
- }
1624
-
1625
- .velu-openapi-field-group {
1626
- display: flex;
1627
- flex-direction: column;
1628
- gap: 0.5rem;
1629
- }
1630
-
1631
- .velu-openapi-field-group + .velu-openapi-field-group {
1632
- margin-top: 0.6rem;
1633
- }
1634
-
1635
- .velu-openapi-field-list {
1636
- display: flex;
1637
- flex-direction: column;
1638
- }
1639
-
1640
- .velu-openapi-parameter-group > h2,
1641
- .velu-openapi-parameter-group > h3 {
1642
- margin: 0;
1643
- }
1644
-
1645
- .velu-openapi-parameter-group > .velu-openapi-field-list {
1646
- border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1647
- padding-top: 0.95rem;
1648
- }
1649
-
1650
- .velu-openapi-field-list > div + div {
1651
- border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 18%, transparent);
1652
- margin-top: 0.75rem;
1653
- padding-top: 0.75rem;
1654
- }
1655
-
1656
- .velu-openapi-complex-field + .velu-openapi-complex-field {
1657
- margin-top: 0.75rem;
1658
- }
1659
-
1660
- .velu-openapi-child-attrs {
1661
- margin-top: 0.55rem;
1662
- border: 1px solid color-mix(in oklab, var(--color-fd-foreground) 16%, transparent);
1663
- border-radius: 0.72rem;
1664
- overflow: hidden;
1665
- }
1666
-
1667
- .velu-openapi-child-attrs-summary {
1668
- list-style: none;
1669
- cursor: pointer;
1670
- padding: 0.55rem 0.7rem;
1671
- font-size: 0.83rem;
1672
- font-weight: 500;
1673
- color: var(--color-fd-muted-foreground);
1674
- border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1675
- user-select: none;
1676
- }
1677
-
1678
- .velu-openapi-child-attrs-summary::-webkit-details-marker {
1679
- display: none;
1680
- }
1681
-
1682
- .velu-openapi-child-attrs-summary::before {
1683
- content: '\203A';
1684
- display: inline-block;
1685
- margin-right: 0.35rem;
1686
- transform: rotate(90deg);
1687
- transition: transform 0.15s ease;
1688
- }
1689
-
1690
- .velu-openapi-child-attrs:not([open]) .velu-openapi-child-attrs-summary {
1691
- border-bottom: 0;
1692
- }
1693
-
1694
- .velu-openapi-child-attrs:not([open]) .velu-openapi-child-attrs-summary::before {
1695
- transform: rotate(0deg);
1696
- }
1697
-
1698
- .velu-openapi-child-attrs > .velu-openapi-field-list,
1699
- .velu-openapi-child-variants {
1700
- padding: 0.55rem 0.65rem 0.65rem;
1701
- }
1702
-
1703
- .velu-openapi-child-variant-list {
1704
- margin-bottom: 0.55rem;
1705
- }
1706
-
1707
- .velu-openapi-child-variant-trigger {
1708
- border: 0;
1709
- border-radius: 0;
1710
- padding: 0.1rem 0.12rem 0.24rem;
1711
- color: var(--color-fd-muted-foreground);
1712
- font-size: 0.85rem;
1713
- font-weight: 600;
1714
- line-height: 1.15;
1715
- }
1716
-
1717
- .velu-openapi-child-variant-trigger[data-state='active'] {
1718
- color: var(--color-fd-primary);
1719
- border-bottom: 2px solid var(--color-fd-primary);
1720
- }
1721
-
1722
- .velu-openapi-media-label {
1723
- display: inline-flex;
1724
- align-items: center;
1725
- width: fit-content;
1726
- }
1727
-
1728
- .velu-openapi-field-description {
1729
- color: var(--color-fd-muted-foreground);
1730
- }
1731
-
1732
- .velu-openapi-response-group {
1733
- display: flex;
1734
- flex-direction: column;
1735
- gap: 0.6rem;
1736
- border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1737
- padding-top: 0.75rem;
1738
- }
1739
-
1740
- .velu-openapi-response-group:first-of-type {
1741
- border-top: 0;
1742
- padding-top: 0.2rem;
1743
- }
1744
-
1745
- .velu-openapi-response-head {
1746
- display: flex;
1747
- flex-direction: column;
1748
- gap: 0.35rem;
1749
- }
1750
-
1751
- .velu-openapi-response-section {
1752
- margin-top: 0.25rem;
1753
- }
1754
-
1755
- .velu-openapi-response-panel {
1756
- border: 0;
1757
- }
1758
-
1759
- .velu-openapi-response-header {
1760
- display: flex;
1761
- align-items: center;
1762
- justify-content: space-between;
1763
- gap: 1rem;
1764
- border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1765
- padding-bottom: 0.55rem;
1766
- margin-bottom: 0.65rem;
1767
- }
1768
-
1769
- .velu-openapi-response-header h2,
1770
- .velu-openapi-response-header h3 {
1771
- margin: 0;
1772
- }
1773
-
1774
- .velu-openapi-response-controls {
1775
- display: inline-flex;
1776
- align-items: center;
1777
- gap: 1.15rem;
1778
- margin-left: auto;
1779
- }
1780
-
1781
- .velu-openapi-response-status-list {
1782
- border: 0;
1783
- background: transparent;
1784
- }
1785
-
1786
- .velu-openapi-response-status-list .velu-openapi-response-status-trigger {
1787
- border: 0;
1788
- border-radius: 0;
1789
- padding: 0.1rem 0.12rem 0.26rem;
1790
- color: var(--color-fd-muted-foreground);
1791
- font-size: 0.95rem;
1792
- font-weight: 600;
1793
- line-height: 1.15;
1794
- }
1795
-
1796
- .velu-openapi-response-status-list .velu-openapi-response-status-trigger[data-state='active'] {
1797
- color: var(--color-fd-primary);
1798
- border-bottom: 2px solid var(--color-fd-primary);
1799
- }
1800
-
1801
- .velu-openapi-response-status-list .velu-openapi-response-status-trigger + .velu-openapi-response-status-trigger {
1802
- margin-left: 0.35rem;
1803
- }
1804
-
1805
- .velu-openapi-response-content-type {
1806
- color: var(--color-fd-muted-foreground);
1807
- font-size: 0.95rem;
1808
- font-weight: 600;
1809
- white-space: nowrap;
1810
- }
1811
-
1812
- .velu-openapi-response-panel .velu-openapi-response-head {
1813
- margin-bottom: 0.5rem;
1814
- }
1815
-
1816
- .velu-openapi-response-panel .velu-openapi-response-group {
1817
- border-top: 0;
1818
- padding-top: 0;
1819
- }
1820
-
1821
- .velu-openapi-response-empty {
1822
- color: var(--color-fd-muted-foreground);
1823
- font-size: 0.875rem;
1824
- font-weight: 500;
1825
- line-height: 1.3;
1826
- }
1827
-
1828
- .velu-openapi-response-headers {
1829
- margin-bottom: 0.85rem;
1830
- }
1831
-
1832
- .velu-openapi-response-headers h3 {
1833
- margin: 0 0 0.5rem;
1834
- }
1835
-
1836
- .velu-openapi-response-headers > .velu-openapi-field-list {
1837
- border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1838
- padding-top: 0.75rem;
1839
- }
1840
-
1841
- .velu-openapi-body-section {
1842
- gap: 0.65rem;
1843
- }
1844
-
1845
- .velu-openapi-body-header {
1846
- display: flex;
1847
- align-items: center;
1848
- justify-content: space-between;
1849
- gap: 1rem;
1850
- border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1851
- padding-bottom: 0.55rem;
1852
- margin-bottom: 0.2rem;
1853
- }
1854
-
1855
- .velu-openapi-body-header h2,
1856
- .velu-openapi-body-header h3 {
1857
- margin: 0;
1858
- }
1859
-
1860
- .velu-openapi-body-content-type {
1861
- color: var(--color-fd-muted-foreground);
1862
- font-size: 0.95rem;
1863
- font-weight: 600;
1864
- white-space: nowrap;
1865
- }
1866
-
1867
- .velu-openapi-body-media-list {
1868
- border: 0;
1869
- background: transparent;
1870
- }
1871
-
1872
- .velu-openapi-body-media-trigger {
1873
- border: 0;
1874
- border-radius: 0;
1875
- padding: 0.1rem 0.12rem 0.26rem;
1876
- color: var(--color-fd-muted-foreground);
1877
- font-size: 0.95rem;
1878
- font-weight: 600;
1879
- line-height: 1.15;
1880
- }
1881
-
1882
- .velu-openapi-body-media-trigger[data-state='active'] {
1883
- color: var(--color-fd-primary);
1884
- border-bottom: 2px solid var(--color-fd-primary);
1885
- }
1886
-
1887
- .velu-openapi-body-section > .velu-openapi-field-list {
1888
- border-top: 0;
1889
- padding-top: 0;
1890
- }
1891
-
1892
- .velu-openapi-response-media-switch-header {
1893
- margin-bottom: 0.55rem;
1894
- }
1895
-
1896
- .velu-openapi-response-media-list {
1897
- border: 0;
1898
- background: transparent;
1899
- }
1900
-
1901
- .velu-openapi-response-media-trigger {
1902
- border: 0;
1903
- border-radius: 999px;
1904
- padding: 0.14rem 0.5rem 0.2rem;
1905
- font-size: 0.78rem;
1906
- font-weight: 600;
1907
- color: var(--color-fd-muted-foreground);
1908
- }
1909
-
1910
- .velu-openapi-response-media-trigger[data-state='active'] {
1911
- color: var(--color-fd-foreground);
1912
- background: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
1913
- }
1914
-
1915
- .velu-openapi-response-examples {
1916
- margin-bottom: 0.7rem;
1917
- }
1918
-
1919
- .velu-openapi-response-example-switch-header {
1920
- margin-bottom: 0.55rem;
1921
- }
1922
-
1923
- .velu-openapi-response-example-list {
1924
- border: 0;
1925
- background: transparent;
1926
- flex-wrap: wrap;
1927
- }
1928
-
1929
- .velu-openapi-response-example-trigger {
1930
- border: 0;
1931
- border-radius: 999px;
1932
- padding: 0.14rem 0.5rem 0.2rem;
1933
- font-size: 0.78rem;
1934
- font-weight: 600;
1935
- color: var(--color-fd-muted-foreground);
1936
- }
1937
-
1938
- .velu-openapi-response-example-trigger[data-state='active'] {
1939
- color: var(--color-fd-foreground);
1940
- background: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
1941
- }
1942
-
1943
- .velu-openapi-response-example-code {
1944
- margin-bottom: 0.65rem;
1945
- }
1946
-
1947
- .velu-openapi-response-example-code pre {
1948
- margin: 0;
1949
- }
1950
-
1951
- .velu-openapi-field-depth-1 {
1952
- padding-left: 0.85rem;
1953
- }
1954
-
1955
- .velu-openapi-field-depth-2 {
1956
- padding-left: 1.5rem;
1957
- }
1958
-
1959
- .velu-openapi-field-depth-3,
1960
- .velu-openapi-field-depth-4 {
1961
- padding-left: 2rem;
1962
- }
1963
-
1964
- .velu-manual-api {
1965
- border: 1px solid var(--color-fd-border);
1966
- border-radius: 0.75rem;
1967
- padding: 0.75rem;
1968
- margin: 1rem 0;
1969
- background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card));
1970
- }
1971
-
1972
- .velu-manual-api-head {
1973
- display: flex;
1974
- align-items: center;
1975
- gap: 0.55rem;
1976
- flex-wrap: wrap;
1977
- }
1978
-
1979
- .velu-manual-api-method {
1980
- display: inline-flex;
1981
- align-items: center;
1982
- border-radius: 999px;
1983
- border: 1px solid color-mix(in oklab, var(--color-fd-primary) 40%, transparent);
1984
- color: var(--color-fd-primary);
1985
- font-size: 0.75rem;
1986
- font-weight: 700;
1987
- padding: 0.12rem 0.5rem;
1988
- }
1989
-
1990
- .velu-manual-api-url {
1991
- font-size: 0.82rem;
1992
- word-break: break-all;
1993
- }
1994
-
1995
- .velu-manual-api-send {
1996
- margin-left: auto;
1997
- border: 1px solid color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
1998
- background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
1999
- color: var(--color-fd-primary);
2000
- border-radius: 0.45rem;
2001
- padding: 0.22rem 0.6rem;
2002
- font-size: 0.78rem;
2003
- font-weight: 600;
2004
- cursor: pointer;
2005
- }
2006
-
2007
- .velu-manual-api-send:disabled {
2008
- opacity: 0.65;
2009
- cursor: default;
2010
- }
2011
-
2012
- .velu-manual-api-auth-grid {
2013
- display: grid;
2014
- gap: 0.5rem;
2015
- grid-template-columns: repeat(2, minmax(0, 1fr));
2016
- margin-top: 0.7rem;
2017
- }
2018
-
2019
- .velu-manual-api-auth {
2020
- display: grid;
2021
- gap: 0.28rem;
2022
- margin-top: 0.7rem;
2023
- }
2024
-
2025
- .velu-manual-api-auth > span {
2026
- font-size: 0.73rem;
2027
- color: var(--color-fd-muted-foreground);
2028
- }
2029
-
2030
- .velu-manual-api-auth > input {
2031
- border: 1px solid var(--color-fd-border);
2032
- border-radius: 0.45rem;
2033
- padding: 0.42rem 0.56rem;
2034
- font-size: 0.82rem;
2035
- background: color-mix(in oklab, var(--color-fd-background) 92%, transparent);
2036
- }
2037
-
2038
- .velu-manual-api-error {
2039
- margin: 0.75rem 0 0;
2040
- color: #e11d48;
2041
- font-size: 0.8rem;
2042
- }
2043
-
2044
- .velu-manual-api-result {
2045
- margin-top: 0.75rem;
2046
- border-top: 1px solid var(--color-fd-border);
2047
- padding-top: 0.6rem;
2048
- }
2049
-
2050
- .velu-manual-api-status {
2051
- font-size: 0.78rem;
2052
- color: var(--color-fd-muted-foreground);
2053
- margin-bottom: 0.35rem;
2054
- }
2055
-
2056
- .velu-manual-api-result pre {
2057
- margin: 0;
2058
- border: 1px solid var(--color-fd-border);
2059
- border-radius: 0.55rem;
2060
- padding: 0.7rem;
2061
- overflow: auto;
2062
- background: color-mix(in oklab, var(--color-fd-background) 85%, var(--color-fd-card));
2063
- }
2064
-
2065
- .velu-manual-api-simple {
2066
- border-style: dashed;
2067
- }
2068
-
2069
- @media (max-width: 768px) {
2070
- .velu-manual-api-auth-grid {
2071
- grid-template-columns: 1fr;
2072
- }
2073
-
2074
- .velu-manual-api-send {
2075
- margin-left: 0;
2076
- }
2077
- }
2078
-
2079
- .velu-openapi-warning {
2080
- border: 1px solid var(--color-fd-border);
2081
- border-radius: 0.65rem;
2082
- padding: 0.75rem 0.9rem;
2083
- color: var(--color-fd-muted-foreground);
2084
- }
2085
-
2086
- .velu-openapi-schema-wrapper {
2087
- margin: 1rem 0;
2088
- }
2089
-
2090
- .velu-openapi-schema {
2091
- border: 1px solid var(--color-fd-border);
2092
- border-radius: 0.65rem;
2093
- padding: 0.9rem;
2094
- }
2095
-
2096
- .velu-openapi-schema > h2 {
2097
- margin: 0 0 0.5rem;
2098
- font-size: 1.05rem;
2099
- }
2100
-
2101
- .velu-openapi-schema > p {
2102
- margin: 0 0 0.6rem;
2103
- color: var(--color-fd-muted-foreground);
2104
- }
2105
-
2106
- .velu-openapi-schema-json {
2107
- margin: 0;
2108
- border: 1px solid var(--color-fd-border);
2109
- border-radius: 0.55rem;
2110
- padding: 0.7rem;
2111
- overflow: auto;
2112
- background: color-mix(in oklab, var(--color-fd-background) 85%, var(--color-fd-card));
2113
- }
2114
-
2115
- .velu-api-toc-rail {
2116
- margin-top: 0.35rem;
2117
- width: 100%;
2118
- min-width: 0;
2119
- overflow: hidden;
2120
- }
2121
-
2122
- .velu-api-toc-rail #velu-api-toc-rail-host {
2123
- width: 100%;
2124
- min-width: 0;
2125
- }
2126
-
2127
- .velu-api-toc-example {
2128
- border: 0;
2129
- border-radius: 0;
2130
- padding: 0;
2131
- margin: 0;
2132
- }
2133
-
2134
- .velu-openapi-example-source {
2135
- display: none;
2136
- }
2137
-
2138
- #velu-api-toc-rail-host .velu-openapi-example-source {
2139
- display: block;
2140
- border: 0;
2141
- margin: 0;
2142
- padding: 0;
2143
- width: 100%;
2144
- max-width: 100%;
2145
- box-sizing: border-box;
2146
- }
2147
-
2148
- #velu-api-toc-rail-host .velu-openapi-example-source > * {
2149
- width: 100%;
2150
- max-width: 100%;
2151
- box-sizing: border-box;
2152
- }
2153
-
2154
- #velu-api-toc-rail-host .prose-no-margin,
2155
- #velu-api-toc-rail-host [role='tablist'],
2156
- #velu-api-toc-rail-host [role='tabpanel'],
2157
- #velu-api-toc-rail-host figure {
2158
- width: 100%;
2159
- max-width: 100%;
2160
- box-sizing: border-box;
2161
- }
2162
-
2163
- #velu-api-toc-rail-host [role='tabpanel'] > figure {
2164
- margin: 0 !important;
2165
- border-radius: 0.65rem !important;
2166
- border: 0 !important;
2167
- box-shadow: none !important;
2168
- background: transparent !important;
2169
- }
2170
-
2171
- #velu-api-toc-rail-host .velu-openapi-example-source pre,
2172
- #velu-api-toc-rail-host .velu-openapi-example-source .shiki,
2173
- #velu-api-toc-rail-host .velu-openapi-example-source [data-codeblock] {
2174
- width: 100%;
2175
- max-width: 100%;
2176
- overflow-x: auto;
2177
- }
2178
-
2179
- #velu-api-toc-rail-host .fd-scroll-container {
2180
- width: 100% !important;
2181
- max-width: 100% !important;
2182
- padding-top: 0 !important;
2183
- padding-bottom: 0 !important;
2184
- --padding-right: calc(var(--spacing) * 4) !important;
2185
- }
2186
-
2187
- #nd-toc:has(.velu-api-toc-rail) > :not(.velu-api-toc-rail) {
2188
- display: none !important;
2189
- }
2190
-
2191
- .velu-update {
2192
- display: grid;
2193
- grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
2194
- column-gap: 1rem;
2195
- row-gap: 0.45rem;
2196
- align-items: start;
2197
- border: 0;
2198
- border-radius: 0;
2199
- background: transparent;
2200
- padding: 0;
2201
- margin: 1rem 0 1.5rem;
2202
- }
2203
-
2204
- .velu-request-example,
2205
- .velu-response-example {
2206
- margin: 0;
2207
- }
2208
-
2209
- .velu-request-example:not(.velu-in-toc-example),
2210
- .velu-response-example:not(.velu-in-toc-example) {
2211
- margin: 1rem 0;
2212
- }
2213
-
2214
- .velu-request-example > *:first-child,
2215
- .velu-response-example > *:first-child {
2216
- margin-top: 0 !important;
2217
- }
2218
-
2219
- .velu-request-example > *:last-child,
2220
- .velu-response-example > *:last-child {
2221
- margin-bottom: 0 !important;
2222
- }
2223
-
2224
- .velu-response-example-status {
2225
- display: inline-flex;
2226
- align-items: center;
2227
- border: 1px solid var(--color-fd-border);
2228
- border-radius: 999px;
2229
- padding: 0.1rem 0.45rem;
2230
- font-size: 0.72rem;
2231
- color: var(--color-fd-muted-foreground);
2232
- margin-bottom: 0.45rem;
2233
- }
2234
-
2235
- .velu-endpoint-head {
2236
- display: flex;
2237
- align-items: center;
2238
- gap: 0.6rem;
2239
- }
2240
-
2241
- .velu-endpoint-head span {
2242
- font-size: 0.75rem;
2243
- font-weight: 700;
2244
- color: #fff;
2245
- background: var(--color-fd-primary);
2246
- padding: 0.1rem 0.45rem;
2247
- border-radius: 0.35rem;
2248
- }
2249
-
2250
- .velu-endpoint-body {
2251
- margin-top: 0.55rem;
2252
- }
2253
-
2254
- .velu-video iframe {
2255
- width: 100%;
2256
- aspect-ratio: 16 / 9;
2257
- border: 0;
2258
- border-radius: 0.6rem;
2259
- margin: 1rem 0;
2260
- }
2261
-
2262
- .velu-update-meta {
2263
- display: flex;
2264
- flex-direction: column;
2265
- gap: 0.35rem;
2266
- padding-left: 1rem;
2267
- position: sticky;
2268
- top: calc(var(--fd-nav-height, 0px) + 0.75rem);
2269
- align-self: start;
2270
- }
2271
-
2272
- .velu-update-anchor {
2273
- position: absolute;
2274
- left: 0;
2275
- top: 0.33rem;
2276
- display: inline-flex;
2277
- align-items: center;
2278
- justify-content: center;
2279
- width: 0.85rem;
2280
- height: 0.85rem;
2281
- color: var(--color-fd-muted-foreground);
2282
- text-decoration: none;
2283
- opacity: 0.75;
2284
- visibility: visible;
2285
- transition: opacity 0.15s ease, color 0.15s ease;
2286
- }
2287
-
2288
- .velu-update-anchor svg {
2289
- width: 0.82rem;
2290
- height: 0.82rem;
2291
- }
2292
-
2293
- .velu-update:hover .velu-update-anchor,
2294
- .velu-update:focus-within .velu-update-anchor,
2295
- .velu-update-anchor:focus-visible {
2296
- opacity: 1;
2297
- }
2298
-
2299
- .velu-update-anchor:hover {
2300
- color: var(--color-fd-foreground);
2301
- }
2302
-
2303
- .velu-update-label {
2304
- display: inline-flex;
2305
- align-items: center;
2306
- width: fit-content;
2307
- border-radius: 999px;
2308
- padding: 0.2rem 0.6rem;
2309
- font-size: 0.76rem;
2310
- font-weight: 600;
2311
- color: var(--color-fd-primary-foreground, #fff);
2312
- background: var(--color-fd-primary);
2313
- text-decoration: none;
2314
- }
2315
-
2316
- .velu-update-label:hover {
2317
- background: color-mix(in oklab, var(--color-fd-primary) 86%, black);
2318
- color: var(--color-fd-primary-foreground, #fff);
2319
- }
2320
-
2321
- .velu-update-description {
2322
- color: var(--color-fd-muted-foreground);
2323
- font-size: 0.85rem;
2324
- }
2325
-
2326
- .velu-update-tags {
2327
- display: grid;
2328
- gap: 0.18rem;
2329
- }
2330
-
2331
- .velu-update-tag {
2332
- display: inline-flex;
2333
- align-items: center;
2334
- border: 0;
2335
- border-radius: 0;
2336
- font-size: 0.72rem;
2337
- line-height: 1.3;
2338
- padding: 0;
2339
- color: color-mix(in oklab, var(--color-fd-foreground) 82%, var(--color-fd-muted-foreground));
2340
- }
2341
-
2342
- .velu-update-content {
2343
- min-width: 0;
2344
- }
2345
-
2346
- .velu-update-content > :first-child {
2347
- margin-top: 0;
2348
- }
2349
-
2350
- .velu-update-content > :last-child {
2351
- margin-bottom: 0;
2352
- }
2353
-
2354
- .velu-update[hidden] {
2355
- display: none !important;
2356
- }
2357
-
2358
- .velu-changelog-filter-block {
2359
- display: grid;
2360
- gap: 0.5rem;
2361
- }
2362
-
2363
- .velu-changelog-filter-heading {
2364
- font-size: 1rem;
2365
- font-weight: 500;
2366
- color: var(--color-fd-foreground);
2367
- }
2368
-
2369
- .velu-changelog-filters {
2370
- display: flex;
2371
- flex-wrap: wrap;
2372
- gap: 0.45rem;
2373
- margin: 0;
2374
- }
2375
-
2376
- .velu-changelog-filter-host {
2377
- margin-bottom: 0.4rem;
2378
- }
2379
-
2380
- #nd-toc.velu-changelog-filters-only > h3,
2381
- #nd-toc.velu-changelog-filters-only > .relative {
2382
- display: none !important;
2383
- }
2384
-
2385
- .velu-changelog-filter {
2386
- border: 1px solid transparent;
2387
- border-radius: 999px;
2388
- padding: 0.22rem 0.65rem;
2389
- font-size: 0.74rem;
2390
- font-weight: 500;
2391
- line-height: 1.25;
2392
- color: color-mix(in oklab, var(--color-fd-foreground) 82%, var(--color-fd-muted-foreground));
2393
- background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
2394
- cursor: pointer;
2395
- transition: color 0.15s, border-color 0.15s, background-color 0.15s;
2396
- }
2397
-
2398
- .velu-changelog-filter:hover {
2399
- border-color: color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
2400
- color: var(--color-fd-foreground);
2401
- background: color-mix(in oklab, var(--color-fd-muted-foreground) 18%, transparent);
2402
- }
2403
-
2404
- .velu-changelog-filter.active {
2405
- color: var(--color-fd-primary);
2406
- border-color: color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
2407
- background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
2408
- }
2409
-
2410
- @media (max-width: 768px) {
2411
- .velu-update {
2412
- grid-template-columns: 1fr;
2413
- }
2414
-
2415
- .velu-update-meta {
2416
- position: static;
2417
- top: auto;
2418
- padding-left: 0;
2419
- }
2420
-
2421
- .velu-update-anchor {
2422
- position: static;
2423
- width: 1rem;
2424
- height: 1rem;
2425
- margin-bottom: -0.15rem;
2426
- opacity: 1;
2427
- visibility: visible;
2428
- }
2429
-
2430
- .velu-changelog-filters {
2431
- margin-bottom: 0.45rem;
2432
- }
2433
- }
2434
-
2435
- .velu-view {
2436
- margin: 1rem 0;
2437
- }
2438
-
2439
- .velu-view-toc-host {
2440
- margin-bottom: 0.75rem;
2441
- }
2442
-
2443
- .velu-view-toc-switcher {
2444
- position: relative;
2445
- }
2446
-
2447
- .velu-view-toc-trigger {
2448
- width: 100%;
2449
- display: inline-flex;
2450
- align-items: center;
2451
- justify-content: space-between;
2452
- gap: 0.55rem;
2453
- border: 1px solid var(--color-fd-border);
2454
- border-radius: 0.9rem;
2455
- background: var(--color-fd-card);
2456
- color: var(--color-fd-foreground);
2457
- font-size: 1.02rem;
2458
- font-weight: 500;
2459
- line-height: 1.15;
2460
- padding: 0.7rem 0.85rem;
2461
- cursor: pointer;
2462
- transition: border-color 0.15s, background-color 0.15s, color 0.15s;
2463
- }
2464
-
2465
- .velu-view-toc-trigger:hover {
2466
- border-color: var(--color-fd-primary);
2467
- }
2468
-
2469
- .velu-view-toc-trigger > span {
2470
- flex: 1;
2471
- text-align: left;
2472
- }
2473
-
2474
- .velu-view-toc-chevron {
2475
- width: 1rem;
2476
- height: 1rem;
2477
- transition: transform 0.15s ease;
2478
- color: var(--color-fd-muted-foreground);
2479
- }
2480
-
2481
- .velu-view-toc-chevron.open {
2482
- transform: rotate(180deg);
2483
- }
2484
-
2485
- .velu-view-toc-menu {
2486
- margin-top: 0.35rem;
2487
- border: 1px solid var(--color-fd-border);
2488
- border-radius: 0.9rem;
2489
- background: var(--color-fd-card);
2490
- overflow: hidden;
2491
- }
2492
-
2493
- .velu-view-toc-option {
2494
- width: 100%;
2495
- display: flex;
2496
- align-items: center;
2497
- justify-content: space-between;
2498
- gap: 0.6rem;
2499
- padding: 0.7rem 0.85rem;
2500
- border: 0;
2501
- border-top: 1px solid transparent;
2502
- background: transparent;
2503
- color: var(--color-fd-foreground);
2504
- font-size: 1.02rem;
2505
- text-align: left;
2506
- cursor: pointer;
2507
- }
2508
-
2509
- .velu-view-toc-option + .velu-view-toc-option {
2510
- border-top-color: var(--color-fd-border);
2511
- }
2512
-
2513
- .velu-view-toc-option:hover {
2514
- background: var(--color-fd-accent);
2515
- }
2516
-
2517
- .velu-view-toc-option-main {
2518
- display: inline-flex;
2519
- align-items: center;
2520
- gap: 0.55rem;
2521
- }
2522
-
2523
- .velu-view-check {
2524
- width: 1rem;
2525
- height: 1rem;
2526
- color: #15803d;
2527
- }
2528
-
2529
- .velu-view-option {
2530
- display: inline-flex;
2531
- align-items: center;
2532
- gap: 0.35rem;
2533
- }
2534
-
2535
- .velu-view-option-icon {
2536
- width: 0.95rem;
2537
- height: 0.95rem;
2538
- flex-shrink: 0;
2539
- }
2540
-
2541
- .velu-view-option-icon-img {
2542
- margin: 0 !important;
2543
- border-radius: 0.16rem;
2544
- object-fit: contain;
2545
- }
2546
-
2547
- /* Fallback utilities for imported MDX media classes. */
2548
- #nd-page .w-full {
2549
- width: 100% !important;
2550
- }
2551
-
2552
- #nd-page .h-96 {
2553
- height: 24rem !important;
2554
- }
2555
-
2556
- #nd-page .rounded-lg {
2557
- border-radius: 0.5rem !important;
2558
- }
2559
-
2560
- #nd-page .rounded-xl {
2561
- border-radius: 0.75rem !important;
2562
- }
2563
-
2564
- #nd-page :is(img, iframe, video).aspect-video {
2565
- width: 100% !important;
2566
- aspect-ratio: 16 / 9 !important;
2567
- height: auto !important;
2568
- display: block;
2569
- }
2570
-
2571
- #nd-page iframe {
2572
- border: 0;
2573
- }
2574
-
2575
- #nd-page img.velu-image-zoomable,
2576
- #nd-page .velu-frame-content img.velu-image-zoomable {
2577
- cursor: zoom-in !important;
2578
- }
2579
-
2580
- #nd-page img.velu-image-zoomable-fallback,
2581
- #nd-page .velu-frame-content img.velu-image-zoomable-fallback {
2582
- cursor: zoom-in !important;
2583
- }
2584
-
2585
- .velu-image-lightbox {
2586
- position: fixed;
2587
- inset: 0;
2588
- z-index: 120;
2589
- background: rgba(0, 0, 0, 0.82);
2590
- padding: 1.5rem;
2591
- display: flex;
2592
- align-items: center;
2593
- justify-content: center;
2594
- cursor: zoom-out;
2595
- }
2596
-
2597
- .velu-image-lightbox-img {
2598
- display: block;
2599
- width: auto;
2600
- height: auto;
2601
- max-width: min(94vw, 1500px);
2602
- max-height: 90vh;
2603
- border-radius: 0.75rem;
2604
- box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
2605
- cursor: auto;
2606
- }
2607
-
2608
- .velu-image-lightbox-close {
2609
- position: fixed;
2610
- top: 1rem;
2611
- right: 1rem;
2612
- border: 1px solid rgba(255, 255, 255, 0.28);
2613
- background: rgba(0, 0, 0, 0.58);
2614
- color: #fff;
2615
- width: 2rem;
2616
- height: 2rem;
2617
- border-radius: 999px;
2618
- font-size: 1.45rem;
2619
- line-height: 1;
2620
- display: inline-flex;
2621
- align-items: center;
2622
- justify-content: center;
2623
- cursor: pointer;
2624
- }
2625
-
2626
- .velu-view-content > :first-child {
2627
- margin-top: 0;
2628
- }
2629
-
2630
- .velu-view-content > :last-child {
2631
- margin-bottom: 0;
2632
- }
2633
-
2634
- .velu-toc-replaced > * {
2635
- display: none !important;
2636
- }
2637
-
2638
- .velu-toc-examples {
2639
- display: grid;
2640
- gap: 0.9rem;
2641
- margin-top: 0.75rem;
2642
- width: calc(100% - 0.35rem);
2643
- box-sizing: border-box;
2644
- }
2645
-
2646
- #nd-toc .velu-in-toc-example {
2647
- margin: 0;
2648
- width: 100%;
2649
- max-width: 100%;
2650
- }
2651
-
2652
- #nd-toc .velu-in-toc-example.velu-panel {
2653
- border: 1px solid var(--color-fd-border);
2654
- background: var(--color-fd-card);
2655
- border-radius: 1rem;
2656
- padding: 0.45rem;
2657
- }
2658
-
2659
- #nd-toc .velu-in-toc-example h4 {
2660
- margin-bottom: 0.55rem;
2661
- }
2662
-
2663
- .velu-toc-replaced {
2664
- padding-right: 0.5rem !important;
2665
- overflow: visible !important;
2666
- }
2667
-
2668
- .velu-toc-replaced > .velu-toc-examples {
2669
- display: grid !important;
2670
- }
2671
-
2672
- #nd-toc .velu-in-toc-example pre,
2673
- #nd-toc .velu-in-toc-example [data-codeblock],
2674
- #nd-toc .velu-in-toc-example .shiki {
2675
- max-width: 100% !important;
2676
- overflow-x: auto !important;
2677
- }
2678
-
2679
- #nd-toc .velu-in-toc-example [role='tablist'],
2680
- #nd-toc .velu-in-toc-example [role='tabpanel'],
2681
- #nd-toc .velu-in-toc-example [data-codeblock] {
2682
- width: 100% !important;
2683
- max-width: 100% !important;
2684
- box-sizing: border-box;
2685
- }
2686
-
2687
- #nd-toc .velu-in-toc-example [role='tabpanel'] {
2688
- padding: 0 !important;
2689
- }
2690
-
2691
- #nd-toc .velu-in-toc-example [role='tabpanel'] > figure {
2692
- width: 100% !important;
2693
- max-width: 100% !important;
2694
- margin: 0 !important;
2695
- box-sizing: border-box;
2696
- }
2697
-
2698
- #nd-toc .velu-in-toc-example pre,
2699
- #nd-toc .velu-in-toc-example .shiki,
2700
- #nd-toc .velu-in-toc-example .shiki code {
2701
- display: block !important;
2702
- width: 100% !important;
2703
- max-width: 100% !important;
2704
- min-width: 0 !important;
2705
- box-sizing: border-box;
2706
- }
2707
-
2708
- #nd-toc .velu-in-toc-example .fd-scroll-container {
2709
- width: 100% !important;
2710
- max-width: 100% !important;
2711
- box-sizing: border-box;
2712
- --padding-right: calc(var(--spacing) * 4) !important;
2713
- }
2714
-
2715
- #nd-toc .velu-in-toc-example .fd-scroll-container > pre {
2716
- width: 100% !important;
2717
- min-width: 100% !important;
2718
- }
2719
-
2720
- @media (max-width: 1023px) {
2721
- .velu-toc-replaced > * {
2722
- display: unset !important;
2723
- }
2724
-
2725
- .velu-toc-examples {
2726
- display: none !important;
2727
- }
2728
-
2729
- #nd-page.velu-page-with-toc-examples {
2730
- max-width: 900px !important;
2731
- }
2732
- }
2733
-
2734
-
2735
- @media (min-width: 1024px) {
2736
- #nd-page.velu-page-with-toc-examples {
2737
- max-width: 680px !important;
2738
- }
2739
- }
2740
-
2741
- .velu-tooltip-wrap {
2742
- position: relative;
2743
- display: inline-flex;
2744
- align-items: baseline;
2745
- }
2746
-
2747
- .velu-tooltip {
2748
- text-decoration: underline dotted;
2749
- text-underline-offset: 0.2rem;
2750
- cursor: help;
2751
- }
2752
-
2753
- .velu-tooltip-popover {
2754
- position: absolute;
2755
- left: 50%;
2756
- bottom: calc(100% + 0.25rem);
2757
- transform: translateX(-50%) translateY(4px);
2758
- min-width: 14rem;
2759
- max-width: min(22rem, calc(100vw - 2rem));
2760
- border: 1px solid var(--color-fd-border);
2761
- border-radius: 0.65rem;
2762
- background: var(--color-fd-popover);
2763
- color: var(--color-fd-foreground);
2764
- box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
2765
- padding: 0.6rem 0.7rem;
2766
- display: grid;
2767
- gap: 0.25rem;
2768
- opacity: 0;
2769
- visibility: hidden;
2770
- pointer-events: none;
2771
- transition: opacity 0.14s ease, transform 0.14s ease;
2772
- z-index: 60;
2773
- }
2774
-
2775
- /* Keep hover active while moving from trigger text to the tooltip card. */
2776
- .velu-tooltip-popover::before {
2777
- content: '';
2778
- position: absolute;
2779
- left: 0;
2780
- right: 0;
2781
- bottom: -0.5rem;
2782
- height: 0.5rem;
2783
- }
2784
-
2785
- .velu-tooltip-popover::after {
2786
- content: '';
2787
- position: absolute;
2788
- top: 100%;
2789
- left: 50%;
2790
- transform: translateX(-50%);
2791
- border-width: 6px 6px 0 6px;
2792
- border-style: solid;
2793
- border-color: var(--color-fd-border) transparent transparent transparent;
2794
- }
2795
-
2796
- .velu-tooltip-wrap:hover .velu-tooltip-popover,
2797
- .velu-tooltip-wrap:focus-within .velu-tooltip-popover {
2798
- opacity: 1;
2799
- visibility: visible;
2800
- pointer-events: auto;
2801
- transform: translateX(-50%) translateY(0);
2802
- }
2803
-
2804
- .velu-tooltip-headline {
2805
- font-size: 0.8rem;
2806
- font-weight: 700;
2807
- line-height: 1.35;
2808
- }
2809
-
2810
- .velu-tooltip-text {
2811
- font-size: 0.78rem;
2812
- line-height: 1.45;
2813
- color: var(--color-fd-muted-foreground);
2814
- }
2815
-
2816
- .velu-tooltip-cta {
2817
- font-size: 0.78rem;
2818
- font-weight: 600;
2819
- color: var(--color-fd-primary);
2820
- text-decoration: none;
2821
- }
2822
-
2823
- .velu-inline-icon {
2824
- display: inline-flex;
2825
- vertical-align: middle;
2826
- width: 1rem;
2827
- height: 1rem;
2828
- }
2829
-
2830
- .velu-inline-icon svg,
2831
- .velu-inline-icon img {
2832
- width: 100%;
2833
- height: 100%;
2834
- }
2835
-
2836
- .velu-mermaid {
2837
- position: relative;
2838
- border: 0;
2839
- border-radius: 0.6rem;
2840
- padding: 0;
2841
- background: transparent;
2842
- overflow: hidden;
2843
- }
2844
-
2845
- .velu-mermaid-stage {
2846
- display: flex;
2847
- align-items: center;
2848
- justify-content: center;
2849
- min-height: 180px;
2850
- transform-origin: center center;
2851
- transition: transform 0.18s ease;
2852
- }
2853
-
2854
- .velu-mermaid-svg {
2855
- width: 100%;
2856
- display: flex;
2857
- align-items: center;
2858
- justify-content: center;
2859
- }
2860
-
2861
- .velu-mermaid-svg svg {
2862
- width: auto;
2863
- max-width: 100%;
2864
- height: auto;
2865
- display: block;
2866
- }
2867
-
2868
- .velu-mermaid-error {
2869
- margin: 0;
2870
- white-space: pre-wrap;
2871
- font-size: 0.85rem;
2872
- }
2873
-
2874
- .velu-mermaid-controls {
2875
- position: absolute;
2876
- display: grid;
2877
- grid-template-columns: repeat(3, 2.25rem);
2878
- grid-template-rows: repeat(3, 2.25rem);
2879
- gap: 0.28rem;
2880
- width: auto;
2881
- padding: 0.28rem;
2882
- border: 1px solid var(--color-fd-border);
2883
- border-radius: 0.65rem;
2884
- background: color-mix(in oklab, var(--color-fd-card) 96%, transparent);
2885
- backdrop-filter: blur(4px);
2886
- }
2887
-
2888
- .velu-mermaid-controls button {
2889
- border: 1px solid var(--color-fd-border);
2890
- background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
2891
- color: var(--color-fd-foreground);
2892
- border-radius: 0.5rem;
2893
- font-size: 1rem;
2894
- line-height: 1;
2895
- padding: 0;
2896
- cursor: pointer;
2897
- display: inline-flex;
2898
- align-items: center;
2899
- justify-content: center;
2900
- }
2901
-
2902
- .velu-mermaid-controls button:hover {
2903
- border-color: var(--color-fd-primary);
2904
- color: var(--color-fd-primary);
2905
- }
2906
-
2907
- .velu-mermaid-btn-up { grid-column: 2; grid-row: 1; }
2908
- .velu-mermaid-btn-zoom-in { grid-column: 3; grid-row: 1; }
2909
- .velu-mermaid-btn-left { grid-column: 1; grid-row: 2; }
2910
- .velu-mermaid-btn-reset { grid-column: 2; grid-row: 2; }
2911
- .velu-mermaid-btn-right { grid-column: 3; grid-row: 2; }
2912
- .velu-mermaid-btn-down { grid-column: 2; grid-row: 3; }
2913
- .velu-mermaid-btn-zoom-out { grid-column: 3; grid-row: 3; }
2914
-
2915
- .velu-mermaid-controls-top-left { top: 0.55rem; left: 0.55rem; }
2916
- .velu-mermaid-controls-top-right { top: 0.55rem; right: 0.55rem; }
2917
- .velu-mermaid-controls-bottom-left { bottom: 0.55rem; left: 0.55rem; }
2918
- .velu-mermaid-controls-bottom-right { bottom: 0.55rem; right: 0.55rem; }
2919
-
2920
- @media (max-width: 768px) {
2921
- .velu-mermaid-controls {
2922
- grid-template-columns: repeat(3, 2rem);
2923
- grid-template-rows: repeat(3, 2rem);
2924
- }
2925
- }
2926
-
2927
- .velu-callout {
2928
- border-width: 1px;
2929
- box-shadow: none;
2930
- }
2931
-
2932
- .velu-callout > div:last-child > div {
2933
- color: inherit;
2934
- }
2935
-
2936
- .velu-callout-info {
2937
- background: rgba(37, 99, 235, 0.1);
2938
- border-color: rgba(37, 99, 235, 0.26);
2939
- color: #1e40af;
2940
- }
2941
-
2942
- :root[data-theme='dark'] .velu-callout-info,
2943
- .dark .velu-callout-info {
2944
- background: rgba(37, 99, 235, 0.14);
2945
- border-color: rgba(37, 99, 235, 0.32);
2946
- color: #bfdbfe;
2947
- }
2948
-
2949
- .velu-callout-warning {
2950
- background: rgba(245, 158, 11, 0.16);
2951
- border-color: rgba(245, 158, 11, 0.34);
2952
- color: #92400e;
2953
- }
2954
-
2955
- .velu-callout-success {
2956
- background: rgba(22, 163, 74, 0.14);
2957
- border-color: rgba(22, 163, 74, 0.34);
2958
- color: #166534;
2959
- }
2960
-
2961
- .velu-callout-error {
2962
- background: rgba(220, 38, 38, 0.16);
2963
- border-color: rgba(220, 38, 38, 0.34);
2964
- color: #991b1b;
2965
- }
2966
-
2967
- .velu-callout-idea {
2968
- background: rgba(147, 51, 234, 0.14);
2969
- border-color: rgba(147, 51, 234, 0.32);
2970
- color: #6b21a8;
2971
- }
2972
-
2973
- :root[data-theme='dark'] .velu-callout-warning,
2974
- .dark .velu-callout-warning {
2975
- color: #fde68a;
2976
- }
2977
-
2978
- :root[data-theme='dark'] .velu-callout-success,
2979
- .dark .velu-callout-success {
2980
- color: #bbf7d0;
2981
- }
2982
-
2983
- :root[data-theme='dark'] .velu-callout-error,
2984
- .dark .velu-callout-error {
2985
- color: #fecaca;
2986
- }
2987
-
2988
- :root[data-theme='dark'] .velu-callout-idea,
2989
- .dark .velu-callout-idea {
2990
- color: #e9d5ff;
2991
- }
2992
-
2993
- .velu-badge {
2994
- display: inline-flex;
2995
- align-items: center;
2996
- gap: 0.3rem;
2997
- border: 1px solid transparent;
2998
- border-radius: 0.35rem;
2999
- padding: 0.15rem 0.5rem;
3000
- font-size: 0.75rem;
3001
- font-weight: 600;
3002
- }
3003
-
3004
- .velu-badge-icon {
3005
- display: inline-flex;
3006
- width: 0.85rem;
3007
- height: 0.85rem;
3008
- }
3009
-
3010
- .velu-badge-icon svg,
3011
- .velu-badge-icon img {
3012
- width: 0.85rem;
3013
- height: 0.85rem;
3014
- }
3015
-
3016
- .velu-badge-size-sm {
3017
- font-size: 0.7rem;
3018
- padding: 0.1rem 0.4rem;
3019
- }
3020
-
3021
- .velu-badge-size-xs {
3022
- font-size: 0.66rem;
3023
- padding: 0.06rem 0.32rem;
3024
- }
3025
-
3026
- .velu-badge-size-md {
3027
- font-size: 0.75rem;
3028
- padding: 0.15rem 0.5rem;
3029
- }
3030
-
3031
- .velu-badge-size-lg {
3032
- font-size: 0.82rem;
3033
- padding: 0.2rem 0.6rem;
3034
- }
3035
-
3036
- .velu-badge-shape-rounded {
3037
- border-radius: 0.35rem;
3038
- }
3039
-
3040
- .velu-badge-shape-pill {
3041
- border-radius: 999px;
3042
- }
3043
-
3044
- .velu-badge-shape-square {
3045
- border-radius: 0.4rem;
3046
- }
3047
-
3048
- .velu-badge-color-gray {
3049
- background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
3050
- color: var(--color-fd-foreground);
3051
- }
3052
-
3053
- .velu-badge-color-blue {
3054
- background: rgba(37, 99, 235, 0.14);
3055
- color: #1d4ed8;
3056
- }
3057
-
3058
- .velu-badge-color-green {
3059
- background: rgba(22, 163, 74, 0.16);
3060
- color: #15803d;
3061
- }
3062
-
3063
- .velu-badge-color-yellow {
3064
- background: rgba(245, 158, 11, 0.2);
3065
- color: #a16207;
3066
- }
3067
-
3068
- .velu-badge-color-red {
3069
- background: rgba(220, 38, 38, 0.16);
3070
- color: #b91c1c;
3071
- }
3072
-
3073
- .velu-badge-color-purple {
3074
- background: rgba(147, 51, 234, 0.16);
3075
- color: #7e22ce;
3076
- }
3077
-
3078
- .velu-badge-color-white {
3079
- background: #fff;
3080
- color: #111827;
3081
- border-color: rgba(17, 24, 39, 0.16);
3082
- }
3083
-
3084
- .velu-badge-color-surface {
3085
- background: var(--color-fd-card);
3086
- color: var(--color-fd-foreground);
3087
- border-color: var(--color-fd-border);
3088
- }
3089
-
3090
- .velu-badge-color-white-destructive {
3091
- background: #fff;
3092
- color: #b91c1c;
3093
- border-color: rgba(185, 28, 28, 0.26);
3094
- }
3095
-
3096
- .velu-badge-color-surface-destructive {
3097
- background: rgba(220, 38, 38, 0.1);
3098
- color: #b91c1c;
3099
- border-color: rgba(220, 38, 38, 0.25);
3100
- }
3101
-
3102
- .velu-badge-color-orange {
3103
- background: rgba(234, 88, 12, 0.16);
3104
- color: #c2410c;
3105
- }
3106
-
3107
- .velu-badge-stroke {
3108
- background: transparent;
3109
- border-color: currentColor;
3110
- }
3111
-
3112
- .velu-badge-disabled {
3113
- opacity: 0.5;
3114
- }
3115
-
3116
- .velu-banner {
3117
- display: flex;
3118
- align-items: center;
3119
- gap: 0.45rem;
3120
- border: 1px solid var(--color-fd-border);
3121
- background: var(--color-fd-accent);
3122
- border-radius: 0.6rem;
3123
- padding: 0.75rem 0.9rem;
3124
- margin: 1rem 0;
3125
- color: var(--color-fd-foreground);
3126
- text-decoration: none;
3127
- line-height: 1.35;
3128
- }
3129
-
3130
- .velu-banner:hover {
3131
- border-color: var(--color-fd-primary);
3132
- }
3133
-
3134
- .velu-banner-icon {
3135
- width: 1rem;
3136
- height: 1rem;
3137
- display: inline-flex;
3138
- flex-shrink: 0;
3139
- }
3140
-
3141
- .velu-banner-icon svg,
3142
- .velu-banner-icon img {
3143
- width: 1rem;
3144
- height: 1rem;
3145
- }
3146
-
3147
- .velu-banner-content {
3148
- min-width: 0;
3149
- }
3150
-
3151
- .velu-banner-content > p {
3152
- margin: 0;
3153
- }
3154
-
3155
- .velu-banner-content > :first-child {
3156
- margin-top: 0;
3157
- }
3158
-
3159
- .velu-banner-content > :last-child {
3160
- margin-bottom: 0;
3161
- }
3162
-
3163
- .velu-banner-info {
3164
- background: rgba(37, 99, 235, 0.1);
3165
- border-color: rgba(37, 99, 235, 0.25);
3166
- }
3167
-
3168
- .velu-banner-success {
3169
- background: rgba(22, 163, 74, 0.12);
3170
- border-color: rgba(22, 163, 74, 0.28);
3171
- }
3172
-
3173
- .velu-banner-warning {
3174
- background: rgba(245, 158, 11, 0.15);
3175
- border-color: rgba(245, 158, 11, 0.3);
3176
- }
3177
-
3178
- .velu-color {
3179
- display: inline-flex;
3180
- align-items: center;
3181
- gap: 0.45rem;
3182
- border: 1px solid var(--color-fd-border);
3183
- border-radius: 0.5rem;
3184
- padding: 0.35rem 0.5rem;
3185
- }
3186
-
3187
- .velu-color-swatch {
3188
- background: var(--velu-color-light, transparent);
3189
- width: 1rem;
3190
- height: 1rem;
3191
- border-radius: 0.2rem;
3192
- border: 1px solid rgba(0, 0, 0, 0.1);
3193
- }
3194
-
3195
- :root[data-theme='dark'] .velu-color-swatch {
3196
- background: var(--velu-color-dark, var(--velu-color-light, transparent));
3197
- }
3198
-
3199
- .dark .velu-color-swatch {
3200
- background: var(--velu-color-dark, var(--velu-color-light, transparent));
3201
- }
3202
-
3203
- .velu-color-group {
3204
- display: grid;
3205
- gap: 0.65rem;
3206
- width: 100%;
3207
- }
3208
-
3209
- .velu-color-compact {
3210
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
3211
- gap: 0.75rem;
3212
- }
3213
-
3214
- .velu-color-table {
3215
- grid-template-columns: 1fr;
3216
- }
3217
-
3218
- .velu-color-item {
3219
- position: relative;
3220
- display: inline-flex;
3221
- align-items: center;
3222
- gap: 0.45rem;
3223
- border: 1px solid var(--color-fd-border);
3224
- border-radius: 0.5rem;
3225
- padding: 0.35rem 0.5rem;
3226
- background: var(--color-fd-card);
3227
- cursor: pointer;
3228
- text-align: left;
3229
- transition: border-color 0.15s, background-color 0.15s;
3230
- }
3231
-
3232
- .velu-color-item:hover {
3233
- border-color: var(--color-fd-primary);
3234
- }
3235
-
3236
- .velu-color-item[data-copied='true'] {
3237
- border-color: color-mix(in oklab, var(--color-fd-primary) 70%, transparent);
3238
- background: color-mix(in oklab, var(--color-fd-primary) 10%, var(--color-fd-card));
3239
- }
3240
-
3241
- .velu-color-compact .velu-color-item {
3242
- display: grid;
3243
- grid-template-columns: 1fr;
3244
- gap: 0.45rem;
3245
- border: 0;
3246
- padding: 0;
3247
- background: transparent;
3248
- }
3249
-
3250
- .velu-color-swatch-wrap {
3251
- position: relative;
3252
- display: inline-flex;
3253
- }
3254
-
3255
- .velu-color-compact .velu-color-swatch {
3256
- width: 100%;
3257
- height: auto;
3258
- aspect-ratio: 1.35 / 1;
3259
- border-radius: 0.55rem;
3260
- border: 0;
3261
- }
3262
-
3263
- .velu-color-copied-check {
3264
- position: absolute;
3265
- top: 0.4rem;
3266
- right: 0.4rem;
3267
- width: 1.2rem;
3268
- height: 1.2rem;
3269
- display: inline-flex;
3270
- align-items: center;
3271
- justify-content: center;
3272
- border-radius: 999px;
3273
- background: rgba(3, 7, 18, 0.75);
3274
- color: #fff;
3275
- font-size: 0.78rem;
3276
- font-weight: 700;
3277
- opacity: 0;
3278
- transform: scale(0.82);
3279
- transition: opacity 0.15s ease, transform 0.15s ease;
3280
- pointer-events: none;
3281
- }
3282
-
3283
- .velu-color-copied-check.is-visible {
3284
- opacity: 1;
3285
- transform: scale(1);
3286
- }
3287
-
3288
- .velu-color-item-text {
3289
- display: inline-flex;
3290
- flex-direction: column;
3291
- gap: 0.1rem;
3292
- min-width: 0;
3293
- }
3294
-
3295
- .velu-color-compact .velu-color-item-text {
3296
- padding: 0 0.1rem;
3297
- }
3298
-
3299
- .velu-color-compact .velu-color-item-text code {
3300
- background: transparent;
3301
- border: 0;
3302
- padding: 0;
3303
- border-radius: 0;
3304
- font-family: inherit;
3305
- font-size: 1.25rem;
3306
- font-weight: 700;
3307
- color: var(--color-fd-foreground);
3308
- }
3309
-
3310
- .velu-color-item-text > span {
3311
- font-size: 0.75rem;
3312
- color: var(--color-fd-muted-foreground);
3313
- }
3314
-
3315
- .velu-color-compact .velu-color-item-text > span {
3316
- font-size: 0.95rem;
3317
- }
3318
-
3319
- .velu-color-row {
3320
- display: grid;
3321
- gap: 0.45rem;
3322
- }
3323
-
3324
- .velu-color-row-title {
3325
- font-size: 0.8rem;
3326
- font-weight: 600;
3327
- color: var(--color-fd-muted-foreground);
3328
- }
3329
-
3330
- .velu-color-row-items {
3331
- display: grid;
3332
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
3333
- gap: 0.5rem;
3334
- }
3335
-
3336
- .velu-color-table .velu-color-row {
3337
- grid-template-columns: 140px 1fr;
3338
- align-items: center;
3339
- gap: 0.9rem;
3340
- }
3341
-
3342
- .velu-color-table .velu-color-row-title {
3343
- font-size: 1.05rem;
3344
- font-weight: 700;
3345
- color: var(--color-fd-foreground);
3346
- }
3347
-
3348
- .velu-color-table .velu-color-row-items {
3349
- display: flex;
3350
- flex-wrap: wrap;
3351
- gap: 0.7rem;
3352
- }
3353
-
3354
- .velu-color-table .velu-color-item {
3355
- border: 0;
3356
- padding: 0;
3357
- background: transparent;
3358
- }
3359
-
3360
- .velu-color-table .velu-color-item-text {
3361
- display: none;
3362
- }
3363
-
3364
- .velu-color-table .velu-color-swatch {
3365
- width: 4.5rem;
3366
- height: 3rem;
3367
- border-radius: 0.55rem;
3368
- border: 0;
3369
- }
3370
-
3371
- .velu-color-table .velu-color-copied-check {
3372
- top: 0.25rem;
3373
- right: 0.25rem;
3374
- }
3375
-
3376
- .velu-columns,
3377
- .velu-examples {
3378
- display: grid;
3379
- grid-template-columns: repeat(var(--velu-columns-count, auto-fit), minmax(220px, 1fr));
3380
- gap: 0.8rem;
3381
- margin: 1rem 0;
3382
- }
3383
-
3384
- .velu-tiles {
3385
- display: grid;
3386
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
3387
- gap: 0.8rem;
3388
- margin: 1rem 0;
3389
- }
3390
-
3391
- .velu-column,
3392
- .velu-response {
3393
- border: 1px solid var(--color-fd-border);
3394
- border-radius: 0.6rem;
3395
- padding: 0.7rem;
3396
- }
3397
-
3398
- .velu-panel {
3399
- border: 1px solid var(--color-fd-border);
3400
- background: var(--color-fd-card);
3401
- border-radius: 1rem;
3402
- padding: 0.45rem;
3403
- margin: 1rem 0;
3404
- }
3405
-
3406
- .velu-panel h4 {
3407
- margin: 0 0 0.35rem;
3408
- }
3409
-
3410
- .velu-panel .velu-callout,
3411
- #nd-toc .velu-in-toc-example.velu-panel .velu-callout {
3412
- margin: 0;
3413
- }
3414
-
3415
- .velu-prompt {
3416
- border: 1px solid var(--color-fd-border);
3417
- border-radius: 0.8rem;
3418
- padding: 0.6rem 0.75rem;
3419
- background: var(--color-fd-card);
3420
- margin: 1rem 0;
3421
- }
3422
-
3423
- .velu-prompt-row {
3424
- display: flex;
3425
- align-items: center;
3426
- justify-content: space-between;
3427
- gap: 0.6rem;
3428
- }
3429
-
3430
- .velu-prompt-left {
3431
- display: inline-flex;
3432
- align-items: center;
3433
- gap: 0.55rem;
3434
- min-width: 0;
3435
- }
3436
-
3437
- .velu-prompt-icon {
3438
- width: 1rem;
3439
- height: 1rem;
3440
- color: var(--color-fd-muted-foreground);
3441
- flex-shrink: 0;
3442
- }
3443
-
3444
- .velu-prompt-desc {
3445
- color: var(--color-fd-foreground);
3446
- font-size: 0.95rem;
3447
- font-weight: 400;
3448
- line-height: 1.35;
3449
- min-width: 0;
3450
- }
3451
-
3452
- .velu-prompt-actions {
3453
- display: inline-flex;
3454
- align-items: center;
3455
- gap: 0.45rem;
3456
- flex-shrink: 0;
3457
- }
3458
-
3459
- .velu-prompt-copy {
3460
- border: 0;
3461
- border-radius: 0.45rem;
3462
- background: var(--color-fd-primary);
3463
- color: var(--color-fd-primary-foreground, #fff);
3464
- font-size: 0.8rem;
3465
- font-weight: 600;
3466
- padding: 0 0.55rem;
3467
- height: 1.72rem;
3468
- cursor: pointer;
3469
- white-space: nowrap;
3470
- line-height: 1.15;
3471
- }
3472
-
3473
- .velu-prompt-copy:hover {
3474
- background: color-mix(in oklab, var(--color-fd-primary) 86%, black);
3475
- }
3476
-
3477
- .velu-prompt-open {
3478
- border: 1px solid var(--color-fd-border);
3479
- border-radius: 0.45rem;
3480
- background: var(--color-fd-background);
3481
- color: var(--color-fd-foreground);
3482
- font-size: 0.8rem;
3483
- font-weight: 600;
3484
- padding: 0 0.5rem;
3485
- height: 1.72rem;
3486
- cursor: pointer;
3487
- white-space: nowrap;
3488
- line-height: 1.15;
3489
- display: inline-flex;
3490
- align-items: center;
3491
- gap: 0.35rem;
3492
- }
3493
-
3494
- .velu-prompt-open:hover {
3495
- background: var(--color-fd-accent);
3496
- }
3497
-
3498
- .velu-prompt-open-icon {
3499
- width: 0.85rem;
3500
- height: 0.85rem;
3501
- flex-shrink: 0;
3502
- }
3503
-
3504
- .velu-prompt-open-icon-on-light {
3505
- filter: brightness(0.55) contrast(1.35);
3506
- }
3507
-
3508
- .velu-prompt-open-icon-on-dark {
3509
- filter: invert(1) brightness(1.08) contrast(1.1);
3510
- }
3511
-
3512
- .velu-prompt-open-icon-on-dark {
3513
- display: none;
3514
- }
3515
-
3516
- :root[data-theme='dark'] .velu-prompt-open-icon-on-light,
3517
- .dark .velu-prompt-open-icon-on-light {
3518
- display: none;
3519
- }
3520
-
3521
- :root[data-theme='dark'] .velu-prompt-open-icon-on-dark,
3522
- .dark .velu-prompt-open-icon-on-dark {
3523
- display: inline-block;
3524
- }
3525
-
3526
- .velu-tile {
3527
- display: flex;
3528
- flex-direction: column;
3529
- gap: 0.75rem;
3530
- border: 0;
3531
- border-radius: 0.75rem;
3532
- padding: 0.85rem;
3533
- text-decoration: none;
3534
- color: inherit;
3535
- }
3536
-
3537
- .velu-tile:hover {
3538
- background: var(--color-fd-accent);
3539
- }
3540
-
3541
- .velu-tile-preview {
3542
- display: flex;
3543
- align-items: center;
3544
- justify-content: center;
3545
- min-height: 170px;
3546
- border: 0;
3547
- border-radius: 0.9rem;
3548
- overflow: hidden;
3549
- background: color-mix(in oklab, var(--color-fd-card) 92%, transparent);
3550
- padding: 1rem;
3551
- }
3552
-
3553
- .velu-tile-preview img {
3554
- display: block;
3555
- width: auto;
3556
- height: auto;
3557
- max-width: min(100%, 320px);
3558
- max-height: 230px;
3559
- margin: 0 !important;
3560
- }
3561
-
3562
- /* Fallback for MDX utility classes that may not be generated in this app build. */
3563
- .velu-tile-preview .hidden {
3564
- display: none;
3565
- }
3566
-
3567
- .velu-tile-preview .block {
3568
- display: block;
3569
- }
3570
-
3571
- :root[data-theme='dark'] .velu-tile-preview .dark\:hidden,
3572
- .dark .velu-tile-preview .dark\:hidden {
3573
- display: none !important;
3574
- }
3575
-
3576
- :root[data-theme='dark'] .velu-tile-preview .dark\:block,
3577
- .dark .velu-tile-preview .dark\:block {
3578
- display: block !important;
3579
- }
3580
-
3581
- .velu-tile-body {
3582
- display: flex;
3583
- flex-direction: column;
3584
- gap: 0.15rem;
3585
- text-align: center;
3586
- align-items: center;
3587
- }
3588
-
3589
- .velu-tile-title {
3590
- font-weight: 600;
3591
- line-height: 1.35;
3592
- }
3593
-
3594
- .velu-tile-description {
3595
- font-size: 0.9rem;
3596
- color: var(--color-fd-muted-foreground);
3597
- line-height: 1.4;
3598
- }
3599
-
3600
- .velu-tree,
3601
- .velu-files {
3602
- margin: 1rem 0;
3603
- }
3604
-
3605
- .velu-tree .velu-tree-file,
3606
- .velu-files .velu-tree-file {
3607
- font-family: var(--font-fd-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
3608
- }
3609
-
3610
- .velu-tree-folder-static .velu-tree-folder-label {
3611
- display: flex;
3612
- align-items: center;
3613
- border-radius: 0.375rem;
3614
- padding: 0.375rem 0.5rem;
3615
- font-size: 0.875rem;
3616
- font-weight: 500;
3617
- }
3618
-
3619
- .velu-tree-children {
3620
- margin-inline-start: 0.5rem;
3621
- border-inline-start: 1px solid var(--color-fd-border);
3622
- padding-inline-start: 0.5rem;
3623
- }
3624
-
3625
- .velu-tree ul {
3626
- margin: 0.2rem 0 0.2rem 1rem;
3627
- }