starlight-theme-celestia 0.2.4 → 0.3.0
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.
- package/README.md +9 -7
- package/lib/tailwind.gen.css +157 -290
- package/package.json +9 -6
- package/src/components/MultiSidebarPanel.astro +18 -0
- package/src/components/MultiSidebarSelect.astro +72 -0
- package/src/components/MultiSidebarTabs.astro +84 -0
- package/src/components/Sidebar.astro +121 -0
- package/src/components/multi-sidebar.test.ts +47 -0
- package/src/components/multi-sidebar.ts +64 -0
- package/src/index.test.ts +48 -0
- package/src/index.ts +8 -2
- package/src/shiki-config.test.ts +22 -0
- package/src/shiki-config.ts +51 -13
- package/src/user-options.ts +24 -0
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ A clean, modern theme for [Astro Starlight](https://starlight.astro.build/), for
|
|
|
9
9
|
- **Wider content** — 55rem content width, 17rem sidebars
|
|
10
10
|
- **3-way theme toggle** — cycles through Auto, Light, and Dark
|
|
11
11
|
- **Warm accent colors** — `#fb923c` (dark) / `#c2410c` (light)
|
|
12
|
-
- **Multi-sidebar
|
|
12
|
+
- **Multi-sidebar** — built-in switchable sidebars, one per top-level `sidebar` group
|
|
13
13
|
- **Version dropdown** — built-in `starlight-versions` integration with auto-detected header dropdown
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
@@ -54,20 +54,22 @@ starlightCelestiaTheme({
|
|
|
54
54
|
|
|
55
55
|
### Multi-Sidebar
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
Add it alongside the theme plugin:
|
|
57
|
+
Set the `multiSidebar` option to turn every top-level entry of the Starlight `sidebar` config into its own sidebar, with a switcher to move between them:
|
|
59
58
|
|
|
60
59
|
```js
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
// Inside starlight({ plugins: [...] })
|
|
64
|
-
starlightUtils({
|
|
60
|
+
starlightCelestiaTheme({
|
|
65
61
|
multiSidebar: {
|
|
62
|
+
// 'horizontalList' (default), 'dropdown', or 'hidden'
|
|
66
63
|
switcherStyle: "horizontalList",
|
|
67
64
|
},
|
|
68
65
|
});
|
|
69
66
|
```
|
|
70
67
|
|
|
68
|
+
Every top-level entry must be a group or autogenerated when this is set.
|
|
69
|
+
|
|
70
|
+
This replaces `@lorenzo_lewis/starlight-utils`, which is deprecated on npm.
|
|
71
|
+
Unlike that plugin, the grouping happens while the sidebar renders rather than in a route middleware, so it also works alongside `starlight-versions` regardless of plugin order.
|
|
72
|
+
|
|
71
73
|
### Versioning
|
|
72
74
|
|
|
73
75
|
The theme ships `starlight-versions` as a dependency. When configured, a version dropdown automatically appears next to the site title:
|
package/lib/tailwind.gen.css
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
5
5
|
:root, :host {
|
|
6
|
-
--font-sans:
|
|
7
|
-
"
|
|
6
|
+
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
|
7
|
+
"Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
|
8
|
+
"Segoe UI Symbol", "Noto Color Emoji";
|
|
8
9
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
10
|
"Courier New", monospace;
|
|
10
11
|
--color-red-100: oklch(93.6% 0.032 17.717);
|
|
@@ -77,7 +78,7 @@
|
|
|
77
78
|
line-height: 1.5;
|
|
78
79
|
-webkit-text-size-adjust: 100%;
|
|
79
80
|
tab-size: 4;
|
|
80
|
-
font-family: var(--default-font-family,
|
|
81
|
+
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
81
82
|
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
82
83
|
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
83
84
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -129,7 +130,7 @@
|
|
|
129
130
|
border-color: inherit;
|
|
130
131
|
border-collapse: collapse;
|
|
131
132
|
}
|
|
132
|
-
:-moz-focusring {
|
|
133
|
+
:-moz-focusring:where(:not(iframe)) {
|
|
133
134
|
outline: auto;
|
|
134
135
|
}
|
|
135
136
|
progress {
|
|
@@ -242,7 +243,7 @@
|
|
|
242
243
|
position: relative;
|
|
243
244
|
}
|
|
244
245
|
.inset-0 {
|
|
245
|
-
inset:
|
|
246
|
+
inset: 0px;
|
|
246
247
|
}
|
|
247
248
|
.top-\(--sl-nav-height\) {
|
|
248
249
|
top: var(--sl-nav-height);
|
|
@@ -254,10 +255,10 @@
|
|
|
254
255
|
right: calc(var(--spacing) * 2);
|
|
255
256
|
}
|
|
256
257
|
.bottom-0 {
|
|
257
|
-
bottom:
|
|
258
|
+
bottom: 0px;
|
|
258
259
|
}
|
|
259
260
|
.left-0 {
|
|
260
|
-
left:
|
|
261
|
+
left: 0px;
|
|
261
262
|
}
|
|
262
263
|
.z-\(--sl-z-index-menu\) {
|
|
263
264
|
z-index: var(--sl-z-index-menu);
|
|
@@ -272,7 +273,7 @@
|
|
|
272
273
|
margin: calc(var(--spacing) * -3);
|
|
273
274
|
}
|
|
274
275
|
.m-0 {
|
|
275
|
-
margin:
|
|
276
|
+
margin: 0px;
|
|
276
277
|
}
|
|
277
278
|
.me-2 {
|
|
278
279
|
margin-inline-end: calc(var(--spacing) * 2);
|
|
@@ -339,7 +340,7 @@
|
|
|
339
340
|
width: 100%;
|
|
340
341
|
}
|
|
341
342
|
.min-w-0 {
|
|
342
|
-
min-width:
|
|
343
|
+
min-width: 0px;
|
|
343
344
|
}
|
|
344
345
|
.min-w-5 {
|
|
345
346
|
min-width: calc(var(--spacing) * 5);
|
|
@@ -464,7 +465,7 @@
|
|
|
464
465
|
background-color: var(--color-white);
|
|
465
466
|
}
|
|
466
467
|
.p-1 {
|
|
467
|
-
padding:
|
|
468
|
+
padding: var(--spacing);
|
|
468
469
|
}
|
|
469
470
|
.p-1\.5 {
|
|
470
471
|
padding: calc(var(--spacing) * 1.5);
|
|
@@ -482,7 +483,7 @@
|
|
|
482
483
|
padding-inline: var(--sl-sidebar-pad-x);
|
|
483
484
|
}
|
|
484
485
|
.px-1 {
|
|
485
|
-
padding-inline:
|
|
486
|
+
padding-inline: var(--spacing);
|
|
486
487
|
}
|
|
487
488
|
.px-4 {
|
|
488
489
|
padding-inline: calc(var(--spacing) * 4);
|
|
@@ -506,7 +507,7 @@
|
|
|
506
507
|
padding-block: calc(var(--spacing) * 4);
|
|
507
508
|
}
|
|
508
509
|
.pt-0 {
|
|
509
|
-
padding-top:
|
|
510
|
+
padding-top: 0px;
|
|
510
511
|
}
|
|
511
512
|
.pr-4 {
|
|
512
513
|
padding-right: calc(var(--spacing) * 4);
|
|
@@ -592,381 +593,247 @@
|
|
|
592
593
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
593
594
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
594
595
|
}
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
600
|
-
}
|
|
596
|
+
@media (hover: hover) {
|
|
597
|
+
.group-hover\:-translate-x-1:is(:where(.group):hover *) {
|
|
598
|
+
--tw-translate-x: calc(var(--spacing) * -1);
|
|
599
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
601
600
|
}
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
@media (hover: hover) {
|
|
606
|
-
--tw-translate-x: calc(var(--spacing) * 1);
|
|
607
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
608
|
-
}
|
|
601
|
+
.group-hover\:translate-x-1:is(:where(.group):hover *) {
|
|
602
|
+
--tw-translate-x: var(--spacing);
|
|
603
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
609
604
|
}
|
|
610
605
|
}
|
|
611
|
-
.before\:absolute {
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
position: absolute;
|
|
615
|
-
}
|
|
606
|
+
.before\:absolute::before {
|
|
607
|
+
content: var(--tw-content);
|
|
608
|
+
position: absolute;
|
|
616
609
|
}
|
|
617
|
-
.before\:inset-0 {
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
inset: calc(var(--spacing) * 0);
|
|
621
|
-
}
|
|
610
|
+
.before\:inset-0::before {
|
|
611
|
+
content: var(--tw-content);
|
|
612
|
+
inset: 0px;
|
|
622
613
|
}
|
|
623
|
-
.before\:content-\[\'\'\] {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
content: var(--tw-content);
|
|
627
|
-
}
|
|
614
|
+
.before\:content-\[\'\'\]::before {
|
|
615
|
+
--tw-content: '';
|
|
616
|
+
content: var(--tw-content);
|
|
628
617
|
}
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
background-color: var(--color-gray-50);
|
|
633
|
-
}
|
|
618
|
+
@media (hover: hover) {
|
|
619
|
+
.hover\:bg-gray-50:hover {
|
|
620
|
+
background-color: var(--color-gray-50);
|
|
634
621
|
}
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
&:hover {
|
|
638
|
-
@media (hover: hover) {
|
|
639
|
-
background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
|
|
640
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
641
|
-
background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
|
|
642
|
-
}
|
|
643
|
-
}
|
|
622
|
+
.hover\:bg-gray-200\/50:hover {
|
|
623
|
+
background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
|
|
644
624
|
}
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
@media (hover: hover) {
|
|
649
|
-
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
|
|
650
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
651
|
-
background-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
|
|
652
|
-
}
|
|
625
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
626
|
+
.hover\:bg-gray-200\/50:hover {
|
|
627
|
+
background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
|
|
653
628
|
}
|
|
654
629
|
}
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
&:hover {
|
|
658
|
-
@media (hover: hover) {
|
|
659
|
-
background-color: var(--color-gray-800);
|
|
660
|
-
}
|
|
630
|
+
.hover\:bg-gray-400\/30:hover {
|
|
631
|
+
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
|
|
661
632
|
}
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
@media (hover: hover) {
|
|
666
|
-
color: var(--sl-color-white);
|
|
633
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
634
|
+
.hover\:bg-gray-400\/30:hover {
|
|
635
|
+
background-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
|
|
667
636
|
}
|
|
668
637
|
}
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
&:hover {
|
|
672
|
-
@media (hover: hover) {
|
|
673
|
-
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
674
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
675
|
-
}
|
|
638
|
+
.hover\:bg-gray-800:hover {
|
|
639
|
+
background-color: var(--color-gray-800);
|
|
676
640
|
}
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
&:focus-visible {
|
|
680
|
-
outline-offset: 0px;
|
|
641
|
+
.hover\:text-\(--sl-color-white\):hover {
|
|
642
|
+
color: var(--sl-color-white);
|
|
681
643
|
}
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
outline-offset: 1px;
|
|
644
|
+
.hover\:shadow-md:hover {
|
|
645
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
646
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
686
647
|
}
|
|
687
648
|
}
|
|
688
|
-
.
|
|
689
|
-
|
|
690
|
-
--tw-scale-x: 90%;
|
|
691
|
-
--tw-scale-y: 90%;
|
|
692
|
-
--tw-scale-z: 90%;
|
|
693
|
-
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
694
|
-
}
|
|
649
|
+
.focus-visible\:outline-offset-0:focus-visible {
|
|
650
|
+
outline-offset: 0px;
|
|
695
651
|
}
|
|
696
|
-
.
|
|
697
|
-
|
|
698
|
-
--tw-scale-x: 97%;
|
|
699
|
-
--tw-scale-y: 97%;
|
|
700
|
-
--tw-scale-z: 97%;
|
|
701
|
-
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
702
|
-
}
|
|
652
|
+
.focus-visible\:outline-offset-1:focus-visible {
|
|
653
|
+
outline-offset: 1px;
|
|
703
654
|
}
|
|
704
|
-
.active\:scale-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
655
|
+
.active\:scale-90:active {
|
|
656
|
+
--tw-scale-x: 90%;
|
|
657
|
+
--tw-scale-y: 90%;
|
|
658
|
+
--tw-scale-z: 90%;
|
|
659
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
660
|
+
}
|
|
661
|
+
.active\:scale-97:active {
|
|
662
|
+
--tw-scale-x: 97%;
|
|
663
|
+
--tw-scale-y: 97%;
|
|
664
|
+
--tw-scale-z: 97%;
|
|
665
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
711
666
|
}
|
|
712
|
-
.
|
|
713
|
-
|
|
667
|
+
.active\:scale-99:active {
|
|
668
|
+
--tw-scale-x: 99%;
|
|
669
|
+
--tw-scale-y: 99%;
|
|
670
|
+
--tw-scale-z: 99%;
|
|
671
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
672
|
+
}
|
|
673
|
+
@media (width < 50rem) {
|
|
674
|
+
.max-md\:w-full {
|
|
714
675
|
width: 100%;
|
|
715
676
|
}
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
@media (width < 50rem) {
|
|
719
|
-
:is(& *) {
|
|
720
|
-
display: none;
|
|
721
|
-
}
|
|
677
|
+
:is(.max-md\:\*\*\:hidden *) {
|
|
678
|
+
display: none;
|
|
722
679
|
}
|
|
723
680
|
}
|
|
724
|
-
|
|
725
|
-
|
|
681
|
+
@media (width >= 50rem) {
|
|
682
|
+
.md\:visible {
|
|
726
683
|
visibility: visible;
|
|
727
684
|
}
|
|
728
|
-
|
|
729
|
-
.md\:flex {
|
|
730
|
-
@media (width >= 50rem) {
|
|
685
|
+
.md\:flex {
|
|
731
686
|
display: flex;
|
|
732
687
|
}
|
|
733
|
-
|
|
734
|
-
.md\:hidden {
|
|
735
|
-
@media (width >= 50rem) {
|
|
688
|
+
.md\:hidden {
|
|
736
689
|
display: none;
|
|
737
690
|
}
|
|
738
|
-
|
|
739
|
-
.md\:h-9 {
|
|
740
|
-
@media (width >= 50rem) {
|
|
691
|
+
.md\:h-9 {
|
|
741
692
|
height: calc(var(--spacing) * 9);
|
|
742
693
|
}
|
|
743
|
-
|
|
744
|
-
.md\:w-\(--sl-sidebar-width\) {
|
|
745
|
-
@media (width >= 50rem) {
|
|
694
|
+
.md\:w-\(--sl-sidebar-width\) {
|
|
746
695
|
width: var(--sl-sidebar-width);
|
|
747
696
|
}
|
|
748
|
-
|
|
749
|
-
.md\:w-full {
|
|
750
|
-
@media (width >= 50rem) {
|
|
697
|
+
.md\:w-full {
|
|
751
698
|
width: 100%;
|
|
752
699
|
}
|
|
753
|
-
|
|
754
|
-
.md\:max-w-88 {
|
|
755
|
-
@media (width >= 50rem) {
|
|
700
|
+
.md\:max-w-88 {
|
|
756
701
|
max-width: calc(var(--spacing) * 88);
|
|
757
702
|
}
|
|
758
|
-
|
|
759
|
-
.md\:rounded-md {
|
|
760
|
-
@media (width >= 50rem) {
|
|
703
|
+
.md\:rounded-md {
|
|
761
704
|
border-radius: var(--radius-md);
|
|
762
705
|
}
|
|
763
|
-
|
|
764
|
-
.md\:border {
|
|
765
|
-
@media (width >= 50rem) {
|
|
706
|
+
.md\:border {
|
|
766
707
|
border-style: var(--tw-border-style);
|
|
767
708
|
border-width: 1px;
|
|
768
709
|
}
|
|
769
|
-
|
|
770
|
-
.md\:border-solid {
|
|
771
|
-
@media (width >= 50rem) {
|
|
710
|
+
.md\:border-solid {
|
|
772
711
|
--tw-border-style: solid;
|
|
773
712
|
border-style: solid;
|
|
774
713
|
}
|
|
775
|
-
|
|
776
|
-
.md\:border-\(--sl-color-gray-5\) {
|
|
777
|
-
@media (width >= 50rem) {
|
|
714
|
+
.md\:border-\(--sl-color-gray-5\) {
|
|
778
715
|
border-color: var(--sl-color-gray-5);
|
|
779
716
|
}
|
|
780
|
-
|
|
781
|
-
.md\:p-2 {
|
|
782
|
-
@media (width >= 50rem) {
|
|
717
|
+
.md\:p-2 {
|
|
783
718
|
padding: calc(var(--spacing) * 2);
|
|
784
719
|
}
|
|
785
|
-
|
|
786
|
-
.md\:text-lg {
|
|
787
|
-
@media (width >= 50rem) {
|
|
720
|
+
.md\:text-lg {
|
|
788
721
|
font-size: var(--text-lg);
|
|
789
722
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
790
723
|
}
|
|
791
|
-
|
|
792
|
-
.md\:text-\(--sl-color-text\) {
|
|
793
|
-
@media (width >= 50rem) {
|
|
724
|
+
.md\:text-\(--sl-color-text\) {
|
|
794
725
|
color: var(--sl-color-text);
|
|
795
726
|
}
|
|
796
|
-
|
|
797
|
-
.md\:transition-colors {
|
|
798
|
-
@media (width >= 50rem) {
|
|
727
|
+
.md\:transition-colors {
|
|
799
728
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
800
729
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
801
730
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
802
731
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
|
|
811
|
-
}
|
|
732
|
+
@media (hover: hover) {
|
|
733
|
+
.md\:hover\:bg-gray-400\/10:hover {
|
|
734
|
+
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 10%, transparent);
|
|
735
|
+
}
|
|
736
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
737
|
+
.md\:hover\:bg-gray-400\/10:hover {
|
|
738
|
+
background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
|
|
812
739
|
}
|
|
813
740
|
}
|
|
814
741
|
}
|
|
815
742
|
}
|
|
816
|
-
|
|
817
|
-
|
|
743
|
+
@media (width >= 80rem) {
|
|
744
|
+
.xl\:gap-6 {
|
|
818
745
|
gap: calc(var(--spacing) * 6);
|
|
819
746
|
}
|
|
820
|
-
|
|
821
|
-
.xl\:pl-6 {
|
|
822
|
-
@media (width >= 80rem) {
|
|
747
|
+
.xl\:pl-6 {
|
|
823
748
|
padding-left: calc(var(--spacing) * 6);
|
|
824
749
|
}
|
|
825
750
|
}
|
|
826
|
-
.dark\:bg-gray-100 {
|
|
827
|
-
|
|
828
|
-
background-color: var(--color-gray-100);
|
|
829
|
-
}
|
|
751
|
+
.dark\:bg-gray-100:where([data-theme=dark], [data-theme=dark] *) {
|
|
752
|
+
background-color: var(--color-gray-100);
|
|
830
753
|
}
|
|
831
|
-
.dark\:bg-gray-600\/30 {
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
background-color: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
|
|
836
|
-
}
|
|
754
|
+
.dark\:bg-gray-600\/30:where([data-theme=dark], [data-theme=dark] *) {
|
|
755
|
+
background-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
|
|
756
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
757
|
+
background-color: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
|
|
837
758
|
}
|
|
838
759
|
}
|
|
839
|
-
.dark\:bg-gray-800 {
|
|
840
|
-
|
|
841
|
-
background-color: var(--color-gray-800);
|
|
842
|
-
}
|
|
760
|
+
.dark\:bg-gray-800:where([data-theme=dark], [data-theme=dark] *) {
|
|
761
|
+
background-color: var(--color-gray-800);
|
|
843
762
|
}
|
|
844
|
-
.dark\:text-gray-200 {
|
|
845
|
-
|
|
846
|
-
color: var(--color-gray-200);
|
|
847
|
-
}
|
|
763
|
+
.dark\:text-gray-200:where([data-theme=dark], [data-theme=dark] *) {
|
|
764
|
+
color: var(--color-gray-200);
|
|
848
765
|
}
|
|
849
|
-
.dark\:text-gray-900 {
|
|
850
|
-
|
|
851
|
-
color: var(--color-gray-900);
|
|
852
|
-
}
|
|
766
|
+
.dark\:text-gray-900:where([data-theme=dark], [data-theme=dark] *) {
|
|
767
|
+
color: var(--color-gray-900);
|
|
853
768
|
}
|
|
854
|
-
.dark\:text-white {
|
|
855
|
-
|
|
856
|
-
color: var(--color-white);
|
|
857
|
-
}
|
|
769
|
+
.dark\:text-white:where([data-theme=dark], [data-theme=dark] *) {
|
|
770
|
+
color: var(--color-white);
|
|
858
771
|
}
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
@media (hover: hover) {
|
|
863
|
-
background-color: var(--color-gray-300);
|
|
864
|
-
}
|
|
865
|
-
}
|
|
772
|
+
@media (hover: hover) {
|
|
773
|
+
.dark\:hover\:bg-gray-300:where([data-theme=dark], [data-theme=dark] *):hover {
|
|
774
|
+
background-color: var(--color-gray-300);
|
|
866
775
|
}
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
870
|
-
&:hover {
|
|
871
|
-
@media (hover: hover) {
|
|
872
|
-
background-color: var(--color-gray-700);
|
|
873
|
-
}
|
|
874
|
-
}
|
|
776
|
+
.dark\:hover\:bg-gray-700:where([data-theme=dark], [data-theme=dark] *):hover {
|
|
777
|
+
background-color: var(--color-gray-700);
|
|
875
778
|
}
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
881
|
-
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 50%, transparent);
|
|
882
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
883
|
-
background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
|
|
884
|
-
}
|
|
885
|
-
}
|
|
779
|
+
.hover\:dark\:bg-gray-500\/50:hover:where([data-theme=dark], [data-theme=dark] *) {
|
|
780
|
+
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 50%, transparent);
|
|
781
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
782
|
+
background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
|
|
886
783
|
}
|
|
887
784
|
}
|
|
888
785
|
}
|
|
889
|
-
|
|
890
|
-
|
|
786
|
+
@media print {
|
|
787
|
+
.print\:hidden {
|
|
891
788
|
display: none;
|
|
892
789
|
}
|
|
893
790
|
}
|
|
894
|
-
.\[\&_celestia-code-copy-button\]\:opacity-0 {
|
|
895
|
-
|
|
896
|
-
opacity: 0%;
|
|
897
|
-
}
|
|
791
|
+
.\[\&_celestia-code-copy-button\]\:opacity-0 celestia-code-copy-button {
|
|
792
|
+
opacity: 0%;
|
|
898
793
|
}
|
|
899
|
-
.\[\&_nav\]\:backdrop-blur {
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
904
|
-
}
|
|
794
|
+
.\[\&_nav\]\:backdrop-blur nav {
|
|
795
|
+
--tw-backdrop-blur: blur(8px);
|
|
796
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
797
|
+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
905
798
|
}
|
|
906
|
-
.\[\&_pre\]\:relative {
|
|
907
|
-
|
|
908
|
-
position: relative;
|
|
909
|
-
}
|
|
799
|
+
.\[\&_pre\]\:relative pre {
|
|
800
|
+
position: relative;
|
|
910
801
|
}
|
|
911
|
-
.\[\&_summary\]\:border-b-\(--sl-color-hairline\) {
|
|
912
|
-
|
|
913
|
-
border-bottom-color: var(--sl-color-hairline);
|
|
914
|
-
}
|
|
802
|
+
.\[\&_summary\]\:border-b-\(--sl-color-hairline\) summary {
|
|
803
|
+
border-bottom-color: var(--sl-color-hairline);
|
|
915
804
|
}
|
|
916
|
-
.\[\&_svg\]\:h-full {
|
|
917
|
-
|
|
918
|
-
height: 100%;
|
|
919
|
-
}
|
|
805
|
+
.\[\&_svg\]\:h-full svg {
|
|
806
|
+
height: 100%;
|
|
920
807
|
}
|
|
921
|
-
.\[\&_svg\]\:w-full {
|
|
922
|
-
|
|
923
|
-
width: 100%;
|
|
924
|
-
}
|
|
808
|
+
.\[\&_svg\]\:w-full svg {
|
|
809
|
+
width: 100%;
|
|
925
810
|
}
|
|
926
|
-
.\[\&\:hover_celestia-code-copy-button\]\:opacity-100 {
|
|
927
|
-
|
|
928
|
-
opacity: 100%;
|
|
929
|
-
}
|
|
811
|
+
.\[\&\:hover_celestia-code-copy-button\]\:opacity-100:hover celestia-code-copy-button {
|
|
812
|
+
opacity: 100%;
|
|
930
813
|
}
|
|
931
|
-
.\[\[rel\=\'next\'\]\]\:flex-row {
|
|
932
|
-
|
|
933
|
-
flex-direction: row;
|
|
934
|
-
}
|
|
814
|
+
.\[\[rel\=\'next\'\]\]\:flex-row:is([rel='next']) {
|
|
815
|
+
flex-direction: row;
|
|
935
816
|
}
|
|
936
|
-
.\[\[rel\=\'prev\'\]\]\:flex-row-reverse {
|
|
937
|
-
|
|
938
|
-
flex-direction: row-reverse;
|
|
939
|
-
}
|
|
817
|
+
.\[\[rel\=\'prev\'\]\]\:flex-row-reverse:is([rel='prev']) {
|
|
818
|
+
flex-direction: row-reverse;
|
|
940
819
|
}
|
|
941
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:block {
|
|
942
|
-
|
|
943
|
-
display: block;
|
|
944
|
-
}
|
|
820
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:block {
|
|
821
|
+
display: block;
|
|
945
822
|
}
|
|
946
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:hidden {
|
|
947
|
-
|
|
948
|
-
display: none;
|
|
949
|
-
}
|
|
823
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:hidden {
|
|
824
|
+
display: none;
|
|
950
825
|
}
|
|
951
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:rotate-90 {
|
|
952
|
-
|
|
953
|
-
rotate: 90deg;
|
|
954
|
-
}
|
|
826
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:rotate-90 {
|
|
827
|
+
rotate: 90deg;
|
|
955
828
|
}
|
|
956
|
-
|
|
957
|
-
body[data-mobile-menu-expanded]
|
|
958
|
-
|
|
959
|
-
visibility: visible;
|
|
960
|
-
}
|
|
829
|
+
@media (width < 50rem) {
|
|
830
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:max-md\:visible {
|
|
831
|
+
visibility: visible;
|
|
961
832
|
}
|
|
962
833
|
}
|
|
963
|
-
.\[div\[data-celestia-code-container\]\[data-celestia-code-title\]_\&\]\:block {
|
|
964
|
-
|
|
965
|
-
display: block;
|
|
966
|
-
}
|
|
834
|
+
div[data-celestia-code-container][data-celestia-code-title] .\[div\[data-celestia-code-container\]\[data-celestia-code-title\]_\&\]\:block {
|
|
835
|
+
display: block;
|
|
967
836
|
}
|
|
968
|
-
}
|
|
969
|
-
@layer utilities {
|
|
970
837
|
:root {
|
|
971
838
|
--sl-font-mono: var(--font-mono);
|
|
972
839
|
}
|