Repository navigation
Expand file tree
/
Copy pathglobal.css
More file actions
2019 lines (1812 loc) · 69.7 KB
/
Copy pathglobal.css
File metadata and controls
2019 lines (1812 loc) · 69.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumadocs-openapi/css/preset.css";
@source "../../../packages/emcn/src";
@source "../../../packages/workflow-renderer/src";
/* Every @sim/emcn component expresses hover through `hover-hover:` so touch
devices never latch a sticky hover state. The app registers it as a plugin
variant in apps/sim/tailwind.config.ts; docs is CSS-first Tailwind v4 with no
config, so without this declaration the variant compiles to nothing and every
emcn hover state silently no-ops here. */
@custom-variant hover-hover {
@media (hover: hover) and (pointer: fine) {
&:hover {
@slot;
}
}
}
/* Prevent overscroll bounce effect on the page */
html,
body {
overscroll-behavior: none;
}
/* Prevent modals/dialogs from shifting layout via scroll-lock compensation */
html,
body {
padding-right: 0 !important;
margin-right: 0 !important;
}
@theme {
--color-fd-primary: var(--color-fd-foreground);
/* Sim's custom type scale — emcn components (Label, Badge, the shared block
views) use these names, so they must resolve here or text falls back to the
inherited size. Mirrors apps/sim/tailwind.config.ts. */
--text-micro: 10px;
--text-xs: 11px;
--text-caption: 12px;
--text-small: 13px;
--text-base: 15px;
--text-md: 16px;
/* Code-token size for the API reference — a deliberate sixth step, between
--text-caption and --text-small, because the mono face reads small at 12px. */
--text-code: 0.78125rem;
/* The platform's code face. `apps/sim/tailwind.config.ts` lists `var(--font-martian-mono)`
first, but nothing in the app ever defines that variable — `apps/sim/app/layout.tsx`
applies only `season.variable` — so every code surface in the product resolves to the
system stack below. Docs match what the app actually renders rather than the token it
nominally references; loading a webfont here would make docs the odd one out, not the
aligned one. If the app ever wires that font up for real, add the var back in both
places at once. */
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
}
/* Pure white light mode background */
:root:not(.dark) {
--color-fd-background: hsl(0, 0%, 100%) !important;
}
/* Match landing page dark background (#1b1b1b) */
.dark {
--color-fd-background: hsl(0, 0%, 10.6%) !important;
--color-fd-card: hsl(0, 0%, 13%) !important;
--color-fd-popover: hsl(0, 0%, 14%) !important;
--color-fd-secondary: hsl(0, 0%, 15.5%) !important;
--color-fd-muted: hsl(0, 0%, 18%) !important;
}
/*
* emcn workspace tokens — mirrored from apps/sim/app/_styles/globals.css so the
* docs chip chrome (components/ui/chip.tsx, dropdown-menu.tsx, badges) renders
* identically to the platform. Keep values in sync with the main app.
*/
:root {
--bg: #fefefe;
--workflow-edge: #e0e0e0;
--surface-1: #fbfbfb;
--surface-2: #ffffff;
--surface-3: #f7f7f7;
--surface-4: #f5f5f5;
--surface-5: #f3f3f3;
--surface-6: #e5e5e5;
--surface-7: #d9d9d9;
--surface-active: #ececec;
--surface-hover: #f2f2f2;
--border: #d8d8d8;
/** Legacy neutral-border aliases. New work should use --border. */
--border-1: var(--border);
--text-primary: #1a1a1a;
--text-secondary: #525252;
--text-tertiary: #5c5c5c;
--text-body: #434343;
--text-muted: #7a7a7a;
--text-subtle: #8c8c8c;
--text-icon: #5a5a5a;
--text-icon-muted: #5c5c5c;
--text-inverse: #ffffff;
--text-error: #ef4444;
--text-muted-inverse: #a0a0a0;
--brand-accent: #33c482;
--brand-accent-hover: #2dac72;
--brand-secondary: #33b4ff;
--surface-inverted: #1b1b1b;
--surface-inverted-hover: #363636;
--border-inverted: #363636;
--border-muted: var(--border);
--badge-success-bg: #bbf7d0;
--badge-success-text: #15803d;
/* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer.
Undefined here, a var() silently falls back to currentColor. Values mirror
apps/sim/app/_styles/globals.css. */
--border-success: #e0e0e0;
--success: #22c55e;
--error: #dc2626;
--warning: #ea580c;
--caution: #f59e0b;
--text-placeholder: #8d8d8d;
--badge-teal-bg: #99f6e4;
--badge-teal-text: #0f766e;
--badge-cyan-bg: #cffafe;
--badge-cyan-text: #0891b2;
--badge-pink-bg: #fbcfe8;
--badge-pink-text: #be185d;
--badge-blue-secondary-bg: #bae6fd;
--badge-blue-secondary-text: #0369a1;
--badge-blue-bg: #bfdbfe;
--badge-blue-text: #1d4ed8;
--badge-purple-bg: #e9d5ff;
--badge-purple-text: #7c3aed;
--badge-amber-bg: #fde68a;
--badge-amber-text: #a16207;
--badge-orange-bg: #fed7aa;
--badge-orange-text: #c2410c;
--badge-error-bg: #fecaca;
--badge-error-text: #dc2626;
--badge-gray-bg: #e7e5e4;
--badge-gray-text: #57534e;
--code-bg: #f5f5f5;
--code-foreground: #1a1a1a;
--code-line-number: #737373;
--selection-bg: #add6ff;
--selection-dark: #264f78;
--highlight-search-active: #f6ad55;
--scrollbar-thumb-color: #c0c0c0;
--shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.11);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
/* z-index scale — poppers sit above the modal so menus stay clickable over
the modal overlay. Mirrors apps/sim/app/_styles/globals.css. */
--z-toast: 150;
--z-modal: 200;
--z-popover: 300;
--z-tooltip: 400;
}
.dark {
--bg: #1b1b1b;
--workflow-edge: #454545;
--surface-1: #1e1e1e;
--surface-2: #232323;
--surface-3: #242424;
--surface-4: #292929;
--surface-5: #363636;
--surface-6: #454545;
--surface-7: #505050;
--surface-active: #2c2c2c;
--surface-hover: #262626;
--border: #444444;
/** Legacy neutral-border aliases. New work should use --border. */
--border-1: var(--border);
--text-primary: #e6e6e6;
--text-secondary: #cccccc;
--text-tertiary: #b3b3b3;
--text-body: #c1c1c1;
--text-muted: #6e6e6e;
--text-subtle: #7d7d7d;
--text-icon: #969696;
--text-icon-muted: #949494;
--text-inverse: #1b1b1b;
--text-error: #ef4444;
--text-muted-inverse: #b3b3b3;
--brand-accent: #33c482;
--brand-accent-hover: #2dac72;
--brand-secondary: #33b4ff;
--surface-inverted: #242424;
--surface-inverted-hover: #363636;
--border-inverted: #3d3d3d;
--border-muted: var(--border);
--badge-success-bg: rgba(34, 197, 94, 0.2);
--badge-success-text: #86efac;
/* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer.
Undefined here, a var() silently falls back to currentColor. Values mirror
apps/sim/app/_styles/globals.css. */
--border-success: #575757;
--success: #22c55e;
--error: #f87171;
--warning: #ff6600;
--caution: #f59e0b;
--text-placeholder: #8d8d8d;
--badge-teal-bg: rgba(20, 184, 166, 0.2);
--badge-teal-text: #5eead4;
--badge-cyan-bg: rgba(14, 165, 233, 0.2);
--badge-cyan-text: #7dd3fc;
--badge-pink-bg: rgba(236, 72, 153, 0.2);
--badge-pink-text: #f9a8d4;
--badge-blue-secondary-bg: rgba(51, 180, 255, 0.2);
--badge-blue-secondary-text: #7dd3fc;
--badge-blue-bg: rgba(59, 130, 246, 0.2);
--badge-blue-text: #93c5fd;
--badge-purple-bg: rgba(168, 85, 247, 0.2);
--badge-purple-text: #d8b4fe;
--badge-amber-bg: rgba(245, 158, 11, 0.2);
--badge-amber-text: #fcd34d;
--badge-orange-bg: rgba(249, 115, 22, 0.2);
--badge-orange-text: #fdba74;
--badge-error-bg: #551a1a;
--badge-error-text: #fca5a5;
--badge-gray-bg: #3a3a3a;
--badge-gray-text: #a8a8a8;
--code-bg: #1f1f1f;
--code-foreground: #eeeeee;
--code-line-number: #a8a8a8;
--selection-bg: #264f78;
--scrollbar-thumb-color: #5a5a5a;
--shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* Scrollbars — platform thumb tokens, transparent track. A non-auto
`scrollbar-width`/`scrollbar-color` makes Chromium ignore every
`::-webkit-scrollbar*` rule on the element, so no webkit block here. Hover
shading is not expressible through the standard properties. */
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb-color) transparent;
}
/* Font family utilities */
.font-sans {
font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Platform UI font — Season Sans, used by the chip chrome to match the main app */
.font-season {
font-family: var(--font-season), system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif;
}
:root {
--fd-border-sidebar: transparent !important;
--fd-nav-height: 92px; /* Custom navbar height (52px top + 40px tabs) */
/* Content container width used to center main content */
--spacing-fd-container: 1400px;
/* Edge gutter = leftover space on each side of centered container */
--edge-gutter: max(1rem, calc((100vw - var(--spacing-fd-container)) / 2));
/* How far sidebar/TOC shift inward from the edge gutter */
--sidebar-shift: 50px;
--sidebar-offset: max(0px, calc(var(--edge-gutter) - var(--sidebar-shift)));
--toc-shift: 50px;
--toc-offset: max(0px, calc(var(--edge-gutter) - var(--toc-shift)));
/* Inner padding for navbar and sidebar — single source of truth */
--nav-inset: 44px;
/* Extra gap between sidebar/TOC and the main text content */
--content-gap: 2.25rem;
}
/* Light mode navbar background */
:root:not(.dark) nav {
background-color: hsla(0, 0%, 100%, 0.85) !important;
}
/* Dark mode navbar background */
:root.dark nav {
background-color: hsla(0, 0%, 10.6%, 0.92) !important;
}
/* Floating sidebar appearance - remove background */
[data-sidebar-container],
#nd-sidebar {
background: transparent !important;
border: none !important;
--color-fd-muted: transparent !important;
--color-fd-card: transparent !important;
--color-fd-secondary: transparent !important;
}
aside[data-sidebar],
aside#nd-sidebar {
background: transparent !important;
border: none !important;
}
/* Remove the fade-out mask on sidebar scroll viewport (Fumadocs applies inline maskImage) */
[data-sidebar-placeholder] [data-radix-scroll-area-viewport],
#nd-sidebar [data-radix-scroll-area-viewport],
#nd-sidebar [data-radix-scroll-area-viewport] > div,
aside#nd-sidebar [data-radix-scroll-area-viewport] {
mask: none !important;
mask-image: none !important;
-webkit-mask: none !important;
-webkit-mask-image: none !important;
}
/* Fumadocs v16: Add sidebar placeholder styling for grid area */
[data-sidebar-placeholder] {
background: transparent !important;
}
/* Fumadocs v16: Hide sidebar panel (floating collapse button) */
[data-sidebar-panel] {
display: none !important;
}
/* Mobile only: Reduce gap between navbar and content (custom navbar hidden on mobile) */
@media (max-width: 1023px) {
#nd-docs-layout {
margin-top: -25px;
}
}
/* Hide TOC popover on tablet/medium screens (768px - 1279px) */
/* Keeps it visible on mobile (<768px) for easy navigation */
/* Desktop (>=1280px) already hides it via fumadocs xl:hidden */
@media (min-width: 768px) and (max-width: 1279px) {
#nd-docs-layout {
--fd-toc-popover-height: 0px !important;
}
[data-toc-popover] {
display: none !important;
}
}
/* Desktop only: Apply custom navbar offset, sidebar width and margin offsets */
/* On mobile, let fumadocs handle the layout natively */
@media (min-width: 1024px) {
:root {
--fd-banner-height: 92px !important; /* 52px top + 40px tabs */
}
#nd-docs-layout {
/* Use 100dvh so sidebar height = 100dvh - 92px (banner) = full viewport below navbar */
--fd-docs-height: 100dvh !important;
--fd-sidebar-width: 300px !important;
margin-left: var(--sidebar-offset) !important;
margin-right: var(--toc-offset) !important;
min-height: var(--fd-docs-height) !important;
}
/* Pin the sidebar to the viewport instead of letting fumadocs' `sticky` do it.
A sticky box is bottom-limited by its containing block, and #nd-docs-layout
ends ~660px above the document bottom because the site footer is a sibling
of the layout, not a grid child. So across the whole footer the sidebar gets
pushed upward — and any content-height change while the reader is in that
zone (expanding an FAQ row, say) makes it visibly jump. A fixed box ignores
both the container's end and the document's height, so neither happens.
Safe because the grid columns are explicit (`0px 300px 1fr 268px 0px`), so
removing the placeholder from flow leaves its track intact. `left`/`width`
are restated because a fixed box no longer derives them from its grid cell,
and `height` already comes from fumadocs' own utility classes.
Anchoring to `bottom` rather than `top` is what keeps the footer off it: the
offset is how far the footer currently reaches into the viewport (published
by `FooterOverlapProbe`), so the sidebar keeps its full height and slides up
out of view as the footer arrives, the way it did before it was pinned. With
no footer on screen the offset is 0 and this resolves back to top: 92px. */
[data-sidebar-placeholder] {
position: fixed !important;
left: var(--sidebar-offset);
width: var(--fd-sidebar-width);
top: auto !important;
bottom: var(--docs-footer-overlap, 0px) !important;
}
/* Sidebar divider line — pinned for the same reason, and so it stays glued to
the sidebar's right edge. Being fixed takes it out of #nd-docs-layout's grid
entirely, so it needs no grid placement and cannot skew a content cell; its
position comes from `left`/`top`/`bottom` alone. Unlike the sidebar it is
shortened rather than slid, so it runs from the navbar down to the footer's
top border and the two meet instead of the line stopping short. */
#nd-docs-layout::before {
content: "";
display: block;
position: fixed;
top: 92px; /* below navbar */
bottom: var(--docs-footer-overlap, 0px);
left: calc(var(--sidebar-offset) + var(--fd-sidebar-width));
width: 1px;
background-color: var(--surface-active);
pointer-events: none;
z-index: 21;
}
/* Hide fumadocs nav on desktop - we use custom navbar there */
#nd-docs-layout > header {
display: none !important;
}
}
/* Sidebar spacing — left padding aligns item text with navbar content (item has 8px internal padding) */
[data-sidebar-viewport],
#nd-sidebar > div {
padding: 0 14px 0 calc(var(--nav-inset) - 8px) !important;
background: transparent !important;
}
/* Override Fumadocs p-4 on scroll viewport — must beat Tailwind v4 utility layer specificity */
html #nd-sidebar [data-radix-scroll-area-viewport],
html #nd-sidebar [data-radix-scroll-area-viewport].p-4,
html aside#nd-sidebar [data-radix-scroll-area-viewport] {
padding: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Top/bottom breathing room inside the scrollable sidebar content — scrollable, not clipped */
html #nd-sidebar [data-radix-scroll-area-viewport] > div {
padding-top: 20px !important;
padding-bottom: 16px !important;
}
/* Override sidebar item styling to match Raindrop */
/* Target Link and button elements in sidebar - override Fumadocs itemVariants */
/* Exclude the small chevron-only toggle buttons */
/* Using html prefix for higher specificity over Tailwind v4 utilities */
/* NEVER set `display` here. This selector scores (1,2,2) and carries
`!important`, so it out-specifies every rule below that hides the language
selector, theme toggle, and search button — a `display` declaration here
forces all of them back into the sidebar. The 30px chip height therefore
comes from line-height + padding (20 + 5 + 5), not from flex centering. */
html #nd-sidebar a:not(:has(span.font-mono)),
html #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
font-size: 0.875rem !important; /* 14px to match navbar items */
line-height: 20px !important;
padding: 5px 0.5rem !important; /* 30px tall overall — the app's chip pill, at its px-2 */
font-weight: 400 !important;
border-radius: 0.5rem !important; /* platform rounded-lg */
font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Sidebar text — platform --text-body */
html #nd-sidebar a:not(:has(span.font-mono)),
html #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
color: var(--text-body) !important;
}
/* Chevron icons — platform --text-icon */
#nd-sidebar svg {
display: inline-block !important;
opacity: 1 !important;
color: var(--text-icon) !important;
flex-shrink: 0 !important;
}
/* Ensure the small chevron toggle buttons are visible */
#nd-sidebar button[aria-label*="ollapse"],
#nd-sidebar button[aria-label*="xpand"] {
display: flex !important;
opacity: 1 !important;
padding: 0.25rem !important;
}
/* Add tiny gap between nested items */
#nd-sidebar ul li {
margin-bottom: 0.0625rem !important;
}
#nd-sidebar ul li:last-child {
margin-bottom: 0 !important;
}
/* Section separator headers — match the app sidebar's group label: 12px,
sentence case, normal weight. Only the fumadocs defaults are overridden here;
size and color stay on the component. */
[data-sidebar-viewport] [data-separator] p,
#nd-sidebar [data-separator] p {
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: normal !important;
margin: 0 !important;
padding: 0 !important;
}
/* Active state — aligned with platform --surface-active */
#nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),
#nd-sidebar button[data-active="true"] {
background-image: none !important;
}
html #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),
html #nd-sidebar button[data-active="true"] {
background-color: var(--surface-active) !important;
color: var(--text-body) !important;
}
/* Hover state — emcn's two-surface row model (see `chipHoverSurfaceClass`).
These rules must carry !important to beat fumadocs' own sidebar styles, which
also means they override the Tailwind hover utilities on the items; keep the
two in step. */
html #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
html #nd-sidebar button:hover:not([data-active="true"]) {
background-color: var(--surface-hover) !important;
}
/* Hide search, platform, and collapse button from sidebar completely */
[data-sidebar] [data-search],
[data-sidebar] .search-toggle,
#nd-sidebar [data-search],
#nd-sidebar .search-toggle,
[data-sidebar-viewport] [data-search],
[data-sidebar-viewport] button[data-search],
aside[data-sidebar] [role="button"]:has([data-search]),
aside[data-sidebar] > div > button:first-child,
#nd-sidebar > div > button:first-child,
[data-sidebar] a[href*="sim.ai"],
#nd-sidebar a[href*="sim.ai"],
[data-sidebar-viewport] a[href*="sim.ai"],
/* Hide search buttons (but NOT folder chevron buttons) */
aside[data-sidebar] > div:first-child
> button:not([aria-label="Collapse"]):not([aria-label="Expand"]),
#nd-sidebar > div:first-child > button:not([aria-label="Collapse"]):not([aria-label="Expand"]),
/* Hide sidebar collapse button (panel icon) - direct children only */
aside[data-sidebar] > button:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),
[data-sidebar]
> button[type="button"]:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),
button[data-collapse]:not([aria-label="Collapse"]):not([aria-label="Expand"]),
[data-sidebar-header] button,
/* Hide theme toggle from sidebar footer */
aside[data-sidebar] [data-theme-toggle],
[data-sidebar-footer],
[data-sidebar] footer,
footer button[aria-label*="heme"],
aside[data-sidebar] > div:last-child:has(button[aria-label*="heme"]),
aside[data-sidebar] button[aria-label*="heme"],
[data-sidebar] button[aria-label*="Theme"],
/* Additional theme toggle selectors */
aside[data-sidebar] > *:last-child
button,
[data-sidebar-viewport] ~ *,
aside[data-sidebar] > div:not([data-sidebar-viewport]),
/* Aggressive theme toggle hiding */
aside[data-sidebar] svg[class*="sun"],
aside[data-sidebar] svg[class*="moon"],
aside[data-sidebar] button[type="button"]:last-child,
aside button:has(svg:only-child),
[data-sidebar] div:has(> button[type="button"]:only-child:last-child),
/* Hide theme toggle and other non-content elements */
aside[data-sidebar] > *:not([data-sidebar-viewport]) {
display: none !important;
}
/* Desktop only: Hide sidebar toggle buttons and nav title/logo (keep visible on mobile) */
@media (min-width: 1025px) {
[data-sidebar-container] > button,
[data-sidebar-container] [data-toggle],
aside[data-sidebar] [data-sidebar-toggle],
button[data-sidebar-toggle],
nav button[data-sidebar-toggle],
button[aria-label="Toggle Sidebar"],
button[aria-label="Collapse Sidebar"],
/* Hide nav title/logo in sidebar on desktop - target all possible locations */
/* Lower specificity selectors first (attribute selectors) */
[data-sidebar-header],
[data-sidebar] [data-title],
aside[data-sidebar] a[href="/"],
aside[data-sidebar] a[href="/"] img,
aside[data-sidebar] > a:first-child,
aside[data-sidebar] > div > a:first-child,
aside[data-sidebar] img[alt="Sim"],
aside[data-sidebar] svg[aria-label="Sim"],
/* Higher specificity selectors (ID selectors) */
#nd-sidebar
a[href="/"],
#nd-sidebar a[href="/"] img,
#nd-sidebar a[href="/"] svg,
#nd-sidebar > a:first-child,
#nd-sidebar > div:first-child > a:first-child,
#nd-sidebar img[alt="Sim"],
#nd-sidebar svg[aria-label="Sim"],
/* Hide theme toggle at bottom of sidebar on desktop */
#nd-sidebar
> footer,
#nd-sidebar footer,
aside#nd-sidebar > *:last-child:not(div),
#nd-sidebar > button:last-child,
#nd-sidebar button[aria-label*="theme" i],
#nd-sidebar button[aria-label*="Theme"],
#nd-sidebar > div:last-child > button {
display: none !important;
}
}
/* Extra aggressive - hide everything after the viewport */
aside[data-sidebar] [data-sidebar-viewport] ~ * {
display: none !important;
}
/* Tighter spacing for sidebar content */
[data-sidebar-viewport] > * {
margin-bottom: 0.0625rem;
}
[data-sidebar-viewport] > *:last-child {
margin-bottom: 0;
}
[data-sidebar-viewport] ul {
margin: 0;
padding: 0;
}
/* Ensure sidebar starts with content immediately */
aside[data-sidebar] > div:first-child {
padding-top: 0;
}
/* Remove all sidebar borders and backgrounds (except the right divider) */
[data-sidebar-container],
aside[data-sidebar],
[data-sidebar],
[data-sidebar] *,
#nd-sidebar,
#nd-sidebar * {
border: none !important;
}
/* Sidebar border is handled via #nd-docs-layout::before pseudo-element (see desktop section below) */
/* Override fumadocs background colors for sidebar */
.dark #nd-sidebar,
.dark [data-sidebar-container],
.dark aside[data-sidebar] {
--color-fd-muted: transparent !important;
--color-fd-secondary: transparent !important;
background: transparent !important;
}
/* Force normal text flow in sidebar */
[data-sidebar],
[data-sidebar] *,
[data-sidebar-viewport],
[data-sidebar-viewport] * {
writing-mode: horizontal-tb !important;
}
code,
pre,
pre code {
font-family: var(--font-mono);
}
/* Inline code chip, matching the one the app renders for markdown
(`apps/sim/lib/content/mdx.tsx`).
Two things here are deliberate rather than oversights. The border is gone because the app's
chip has none, and at inline size a hairline reads as a boxed-in label rather than a
highlight. The color is unset so the chip composites over whatever encloses it — inline
code inside a link picks up the link color instead of sitting on it as a grey island, which
is the behavior the app's chip was written for. */
:not(pre) > code {
padding: 0.125rem 0.375rem;
border-radius: 4px;
font-size: 0.875em;
font-weight: 400;
background-color: var(--surface-5);
}
/* Search dialog — lighter shadow + constrained size */
[data-radix-popper-content-wrapper] > div,
[role="dialog"][data-state] {
box-shadow: var(--shadow-medium) !important;
}
[role="dialog"][data-state] {
max-width: 480px !important;
}
/* Search dialog overlay + panel must cover the sticky navbar — both default to z-50,
and the navbar wins the tie by DOM order, leaving it unblurred above the overlay */
.bg-fd-overlay,
[role="dialog"][data-state] {
z-index: 60 !important;
}
/* Code metrics — the platform's `Code.Viewer` runs 13px on a 21px line box
(`text-small` / `leading-[21px]`); identical snippets should not read larger here. */
pre {
font-size: var(--text-small);
line-height: 21px;
tab-size: 2;
-webkit-overflow-scrolling: touch;
}
pre code {
display: block;
width: fit-content;
min-width: 100%;
}
/* Syntax highlighting adjustments for better readability */
pre code .line {
padding-left: 0;
padding-right: 0;
}
/* Content typography — align heading sizes and weights with platform */
main article h1,
[data-content] h1,
#nd-page h1 {
font-size: 1.5rem !important;
font-weight: 550 !important;
letter-spacing: -0.02em;
color: var(--text-primary);
}
main article h2,
[data-content] h2,
#nd-page h2 {
font-size: 1.25rem !important;
font-weight: 500 !important;
letter-spacing: -0.015em;
color: var(--text-primary);
}
main article h3,
main article h4,
[data-content] h3,
[data-content] h4,
#nd-page h3,
#nd-page h4 {
font-size: var(--text-md) !important;
font-weight: 470 !important;
letter-spacing: -0.01em;
color: var(--text-body);
}
/* Body text — platform --text-secondary */
main article p,
[data-content] p,
[data-docs-page] p {
color: var(--text-secondary);
}
/* Muted text — platform --text-muted */
main article .text-muted-foreground,
[data-content] .text-muted-foreground,
[data-docs-page] .text-muted-foreground {
color: var(--text-muted);
}
/* List items — inherit body text color */
main article li,
[data-content] li,
[data-docs-page] li {
color: var(--text-secondary);
}
/* Custom text highlighting styles */
.text-highlight {
color: var(--color-fd-primary);
}
/* Override marker color for highlighted lists */
.highlight-markers li::marker {
color: var(--color-fd-primary);
}
/* Remove the thin border-left on nested TOC items (keeps main indicator only) */
#nd-toc a[style*="padding-inline-start"] {
border-left: none !important;
}
/* The clerk TOC draws its active range twice: a track segment, plus a dot that
animates along the track to the current heading. The dot is redundant with the
segment and reads as a stray artifact, so hide it and keep the segment. It is
the only node fumadocs gives an inline offset-path, which is what anchors it. */
#nd-toc [style*="offset-path"] {
display: none !important;
}
/* TOC heading — align weight with landing */
#nd-toc h3,
#nd-toc [class*="title"] {
font-weight: 480 !important;
font-size: var(--text-small) !important;
color: var(--text-muted);
}
/* TOC links — softer colors aligned with landing muted text */
#nd-toc a {
font-weight: 430 !important;
font-size: var(--text-small) !important;
color: var(--text-muted);
transition: color 0.2s;
}
#nd-toc a:hover {
color: var(--text-body);
}
#nd-toc a[data-active="true"] {
color: var(--text-primary) !important;
font-weight: 470 !important;
}
/* Add bottom spacing to prevent abrupt page endings */
[data-content] {
padding-top: 1.5rem !important;
padding-bottom: 4rem;
}
/* Alternative fallback for different Fumadocs versions */
main article,
.docs-page main {
padding-top: 1.5rem !important;
padding-bottom: 4rem;
}
/* Main content area - center and constrain like turborepo/raindrop */
/* Note: --sidebar-offset and --toc-offset are now applied at #nd-docs-layout level */
main[data-main] {
max-width: var(--spacing-fd-container, 1400px);
margin-left: auto;
margin-right: auto;
padding-top: 1rem;
padding-left: var(--content-gap);
padding-right: var(--content-gap);
order: 1 !important;
}
/* Adjust for smaller screens */
@media (max-width: 768px) {
main[data-main] {
padding-left: 1rem;
padding-right: 1rem;
}
#nd-page:has(.api-page-header) {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Ensure docs page content is properly constrained */
[data-docs-page] {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-top: 1.5rem !important;
}
/* Remove any unwanted outlines from video elements */
video {
outline: none !important;
}
/* API Reference Pages — Mintlify-style overrides */
/* OpenAPI pages: span main + TOC grid columns for wide two-column layout.
Use named grid lines from grid-template-areas so this works regardless
of whether the grid has 3 columns (production) or 5 columns (local dev). */
#nd-page:has(.api-page-header) {
grid-column: main-start / toc-end !important;
max-width: 1400px !important;
padding-left: calc(var(--content-gap) + 1rem);
padding-right: calc(var(--content-gap) + 1rem);
}
/* Hide the empty TOC aside on OpenAPI pages so it doesn't overlay content */
#nd-docs-layout:has(#nd-page:has(.api-page-header)) #nd-toc {
display: none;
}
/* Hide the default "Response Body" heading rendered by fumadocs-openapi */
.response-section-wrapper > .response-section-content > h2,
.response-section-wrapper > .response-section-content > h3 {
display: none !important;
}
/* Hide default accordion triggers (status code rows) — we show our own dropdown */
.response-section-wrapper [data-orientation="vertical"] > [data-state] > h3 {
display: none !important;
}
/* Ensure API reference pages use the same font as the rest of the docs.
`.font-mono` is excluded: this selector (id + element) outranks the
`.font-mono` class rule, so without it every code identifier renders sans. */
#nd-page:has(.api-page-header),
#nd-page:has(.api-page-header) h2,
#nd-page:has(.api-page-header) h3,
#nd-page:has(.api-page-header) h4,
#nd-page:has(.api-page-header) p:not(.font-mono),
#nd-page:has(.api-page-header) span:not(.font-mono),
#nd-page:has(.api-page-header) div:not(.font-mono),
#nd-page:has(.api-page-header) label:not(.font-mono),
#nd-page:has(.api-page-header) button:not(.font-mono) {
font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Method badge pills — shared background colors (page + sidebar) */
span.font-mono.font-medium[data-method="get"],
span.font-mono.font-medium[data-method="head"],
span.font-mono.font-medium[data-method="options"] {
background-color: var(--badge-success-bg);
}
span.font-mono.font-medium[data-method="post"] {
background-color: var(--badge-blue-bg);
}
span.font-mono.font-medium[data-method="put"] {
background-color: var(--badge-amber-bg);
}
span.font-mono.font-medium[data-method="patch"] {
background-color: var(--badge-orange-bg);
}
span.font-mono.font-medium[data-method="delete"] {
background-color: var(--badge-error-bg);
}
/* Sidebar links with method badges — match regular item padding. Radius follows the
platform's two-tier convention (documented on emcn's `DropdownMenu`): floating surfaces
take 12px, rows inside one take 8px. These are rows. */
html #nd-sidebar a:has(span.font-mono.font-medium) {
display: flex !important;
align-items: center !important;
gap: 0.375rem;
padding: 0.375rem 0.875rem !important;
font-size: 0.875rem !important;
line-height: 1.4 !important;
font-weight: 450 !important;
border-radius: 0.5rem !important;
}
/* Sidebar method badges — fixed-width for right-aligned labels */
#nd-sidebar a span.font-mono.font-medium {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.625rem;
font-size: var(--text-micro) !important;
line-height: 1 !important;
padding: 0.15625rem 0.25rem;
border-radius: 0.375rem;
flex-shrink: 0;
}
/* Footer navigation method badges — pill styling to match sidebar */
#nd-page span.font-mono.font-medium[data-method] {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-micro) !important;
line-height: 1 !important;
padding: 0.15625rem 0.375rem;
border-radius: 0.375rem;
}
/* API page code/card containers — transparent background */
#nd-page:has(.api-page-header) {
--color-fd-card: transparent !important;
}
/* API page code example panels — transparent */
#nd-page:has(.api-page-header) .rounded-xl.border.bg-fd-card {
background-color: transparent !important;
}
#nd-page:has(.api-page-header) .rounded-xl.border.shadow-md.bg-fd-card {
background-color: transparent !important;
box-shadow: none !important;
}
/* Hide "Filter Properties" search bar everywhere — main page and popovers */
input[placeholder="Filter Properties"] {
display: none !important;
}
div:has(> input[placeholder="Filter Properties"]) {
display: none !important;
}
/* Remove top border on first visible property after hidden Filter Properties */
div:has(> input[placeholder="Filter Properties"]) + .text-sm.border-t {
border-top: none !important;
}
/* Hide "TypeScript Definitions" copy panel on API pages */
#nd-page:has(.api-page-header) div.not-prose.rounded-xl.border.p-3.mb-4 {
display: none !important;
}
#nd-page:has(.api-page-header) div.not-prose.rounded-xl.border.p-3:has(> div > p.font-medium) {
display: none !important;