starlight-cannoli-plugins 1.0.5 → 1.0.7

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.
@@ -0,0 +1,789 @@
1
+ @charset "UTF-8";
2
+ html {
3
+ scroll-behavior: smooth;
4
+ }
5
+
6
+ img.note-svg {
7
+ color-scheme: light dark;
8
+ padding-top: 1em;
9
+ padding-bottom: 1em;
10
+ }
11
+ html[data-theme=light] img.note-svg {
12
+ filter: none;
13
+ }
14
+ html:not([data-theme=light]) img.note-svg {
15
+ filter: invert(1) hue-rotate(180deg);
16
+ }
17
+
18
+ /************ Starlight Additions/Overrides ************/
19
+ .sl-container:where(.astro-7nkwcw3z) {
20
+ max-width: 50rem;
21
+ }
22
+
23
+ .main-pane table > thead > tr > th {
24
+ border-bottom: 1px solid hsl(228, 6.2%, 47.3%);
25
+ }
26
+
27
+ starlight-toc a {
28
+ transition: transform 0.2s ease;
29
+ transform-origin: left;
30
+ }
31
+ starlight-toc a span {
32
+ position: relative;
33
+ display: inline-block;
34
+ transition: color 0.2s ease;
35
+ }
36
+ starlight-toc a span::before {
37
+ content: "";
38
+ position: absolute;
39
+ left: -8px;
40
+ top: 0;
41
+ bottom: 0;
42
+ width: 3px;
43
+ background-color: transparent;
44
+ border-radius: 2px;
45
+ transition: background-color 0.2s ease;
46
+ }
47
+ starlight-toc a[aria-current=true] {
48
+ transform: scale(1.04);
49
+ }
50
+ starlight-toc a[aria-current=true] span::before {
51
+ background-color: var(--sl-color-text-accent);
52
+ }
53
+
54
+ #starlight__search mark {
55
+ color: hsl(339.8, 63.4%, 60.4%);
56
+ }
57
+
58
+ #starlight__mobile-toc > .dropdown {
59
+ border-bottom: 1px solid hsla(0, 0%, 100%, 0.6);
60
+ }
61
+
62
+ .expressive-code .copy > button {
63
+ height: 2rem;
64
+ width: 2rem;
65
+ }
66
+
67
+ /************ Details/Summary Styles ************/
68
+ .main-pane details {
69
+ background: var(--sl-color-bg-nav);
70
+ border-radius: 4px;
71
+ padding: 0.3rem 0.6rem;
72
+ display: block;
73
+ }
74
+ .main-pane details[open] {
75
+ max-width: 100%;
76
+ }
77
+ .main-pane details[open] > div.details-wrapper {
78
+ overflow: auto;
79
+ max-height: 67vh;
80
+ padding-right: 0.8rem;
81
+ padding-left: 0.8rem;
82
+ }
83
+ .main-pane details[open] p > img {
84
+ height: auto;
85
+ width: auto;
86
+ }
87
+
88
+ /********** MathJax/LaTeX Styling **********/
89
+ mjx-container[jax=SVG] {
90
+ overflow-x: auto;
91
+ }
92
+ mjx-container[jax=SVG][display=true] {
93
+ margin-top: 0.7em !important;
94
+ margin-bottom: 0.7em !important;
95
+ padding-top: 0.3em;
96
+ padding-bottom: 0.3em;
97
+ }
98
+ mjx-container[jax=SVG] > svg {
99
+ display: unset;
100
+ max-width: unset;
101
+ height: unset;
102
+ }
103
+
104
+ /********** TikZ SVG Styling **********/
105
+ script[type="text/tikz"] {
106
+ display: block;
107
+ }
108
+
109
+ div > div[class=page] > svg {
110
+ color-scheme: light dark;
111
+ }
112
+ html[data-theme=light] div > div[class=page] > svg {
113
+ stroke: currentColor;
114
+ fill: currentColor;
115
+ }
116
+ html:not([data-theme=light]) div > div[class=page] > svg {
117
+ stroke: white;
118
+ fill: white;
119
+ filter: invert(1) hue-rotate(180deg);
120
+ }
121
+
122
+ /********** Mimic Bootstrap Class Utilities **********/
123
+ .visually-hidden {
124
+ display: none !important;
125
+ }
126
+
127
+ .visibility-hidden {
128
+ visibility: hidden !important;
129
+ }
130
+
131
+ .visible {
132
+ display: block !important;
133
+ }
134
+
135
+ .text-center {
136
+ text-align: center !important;
137
+ }
138
+
139
+ .d-block {
140
+ display: block !important;
141
+ }
142
+
143
+ .d-flex {
144
+ display: flex !important;
145
+ }
146
+
147
+ .flex-row {
148
+ flex-direction: row !important;
149
+ }
150
+
151
+ .flex-column {
152
+ flex-direction: column !important;
153
+ }
154
+
155
+ .justify-content-center {
156
+ justify-content: center !important;
157
+ }
158
+
159
+ .justify-content-between {
160
+ justify-content: space-between !important;
161
+ }
162
+
163
+ .justify-content-around {
164
+ justify-content: space-around !important;
165
+ }
166
+
167
+ .justify-content-evenly {
168
+ justify-content: space-evenly !important;
169
+ }
170
+
171
+ .align-items-center {
172
+ align-items: center !important;
173
+ }
174
+
175
+ .align-items-start {
176
+ align-items: flex-start !important;
177
+ }
178
+
179
+ .flex-wrap {
180
+ flex-wrap: wrap !important;
181
+ }
182
+ .flex-wrap .flex-fill {
183
+ flex: 1 1 auto;
184
+ margin-top: unset;
185
+ }
186
+ .flex-wrap .flex-fill.flex-code {
187
+ min-width: 0;
188
+ }
189
+
190
+ .flex-grow-1 {
191
+ flex-grow: 1 !important;
192
+ }
193
+
194
+ /* Overflow utilities */
195
+ .overflow-auto {
196
+ overflow: auto !important;
197
+ }
198
+
199
+ .overflow-y-auto {
200
+ overflow-y: auto !important;
201
+ }
202
+
203
+ .overflow-x-hidden {
204
+ overflow-x: hidden !important;
205
+ }
206
+
207
+ /* Padding and Margin Utilities */
208
+ /* Exposes utility classes like .p-0, .p-1, .pt-2, .mb-3, ..., .m-6, .gap-6 */
209
+ .p-0 {
210
+ padding: 0 !important;
211
+ }
212
+
213
+ .p-1 {
214
+ padding: 0.25rem !important;
215
+ }
216
+
217
+ .p-2 {
218
+ padding: 0.5rem !important;
219
+ }
220
+
221
+ .p-3 {
222
+ padding: 1rem !important;
223
+ }
224
+
225
+ .p-4 {
226
+ padding: 1.5rem !important;
227
+ }
228
+
229
+ .p-5 {
230
+ padding: 2.5rem !important;
231
+ }
232
+
233
+ .p-6 {
234
+ padding: 3.5rem !important;
235
+ }
236
+
237
+ .pt-0 {
238
+ padding-top: 0 !important;
239
+ }
240
+
241
+ .pt-1 {
242
+ padding-top: 0.25rem !important;
243
+ }
244
+
245
+ .pt-2 {
246
+ padding-top: 0.5rem !important;
247
+ }
248
+
249
+ .pt-3 {
250
+ padding-top: 1rem !important;
251
+ }
252
+
253
+ .pt-4 {
254
+ padding-top: 1.5rem !important;
255
+ }
256
+
257
+ .pt-5 {
258
+ padding-top: 2.5rem !important;
259
+ }
260
+
261
+ .pt-6 {
262
+ padding-top: 3.5rem !important;
263
+ }
264
+
265
+ .pb-0 {
266
+ padding-bottom: 0 !important;
267
+ }
268
+
269
+ .pb-1 {
270
+ padding-bottom: 0.25rem !important;
271
+ }
272
+
273
+ .pb-2 {
274
+ padding-bottom: 0.5rem !important;
275
+ }
276
+
277
+ .pb-3 {
278
+ padding-bottom: 1rem !important;
279
+ }
280
+
281
+ .pb-4 {
282
+ padding-bottom: 1.5rem !important;
283
+ }
284
+
285
+ .pb-5 {
286
+ padding-bottom: 2.5rem !important;
287
+ }
288
+
289
+ .pb-6 {
290
+ padding-bottom: 3.5rem !important;
291
+ }
292
+
293
+ .ps-0 {
294
+ padding-left: 0 !important;
295
+ }
296
+
297
+ .ps-1 {
298
+ padding-left: 0.25rem !important;
299
+ }
300
+
301
+ .ps-2 {
302
+ padding-left: 0.5rem !important;
303
+ }
304
+
305
+ .ps-3 {
306
+ padding-left: 1rem !important;
307
+ }
308
+
309
+ .ps-4 {
310
+ padding-left: 1.5rem !important;
311
+ }
312
+
313
+ .ps-5 {
314
+ padding-left: 2.5rem !important;
315
+ }
316
+
317
+ .ps-6 {
318
+ padding-left: 3.5rem !important;
319
+ }
320
+
321
+ .pe-0 {
322
+ padding-right: 0 !important;
323
+ }
324
+
325
+ .pe-1 {
326
+ padding-right: 0.25rem !important;
327
+ }
328
+
329
+ .pe-2 {
330
+ padding-right: 0.5rem !important;
331
+ }
332
+
333
+ .pe-3 {
334
+ padding-right: 1rem !important;
335
+ }
336
+
337
+ .pe-4 {
338
+ padding-right: 1.5rem !important;
339
+ }
340
+
341
+ .pe-5 {
342
+ padding-right: 2.5rem !important;
343
+ }
344
+
345
+ .pe-6 {
346
+ padding-right: 3.5rem !important;
347
+ }
348
+
349
+ .m-0 {
350
+ margin: 0 !important;
351
+ }
352
+
353
+ .m-1 {
354
+ margin: 0.25rem !important;
355
+ }
356
+
357
+ .m-2 {
358
+ margin: 0.5rem !important;
359
+ }
360
+
361
+ .m-3 {
362
+ margin: 1rem !important;
363
+ }
364
+
365
+ .m-4 {
366
+ margin: 1.5rem !important;
367
+ }
368
+
369
+ .m-5 {
370
+ margin: 2.5rem !important;
371
+ }
372
+
373
+ .m-6 {
374
+ margin: 3.5rem !important;
375
+ }
376
+
377
+ .mt-0 {
378
+ margin-top: 0 !important;
379
+ }
380
+
381
+ .mt-1 {
382
+ margin-top: 0.25rem !important;
383
+ }
384
+
385
+ .mt-2 {
386
+ margin-top: 0.5rem !important;
387
+ }
388
+
389
+ .mt-3 {
390
+ margin-top: 1rem !important;
391
+ }
392
+
393
+ .mt-4 {
394
+ margin-top: 1.5rem !important;
395
+ }
396
+
397
+ .mt-5 {
398
+ margin-top: 2.5rem !important;
399
+ }
400
+
401
+ .mt-6 {
402
+ margin-top: 3.5rem !important;
403
+ }
404
+
405
+ .mb-0 {
406
+ margin-bottom: 0 !important;
407
+ }
408
+
409
+ .mb-1 {
410
+ margin-bottom: 0.25rem !important;
411
+ }
412
+
413
+ .mb-2 {
414
+ margin-bottom: 0.5rem !important;
415
+ }
416
+
417
+ .mb-3 {
418
+ margin-bottom: 1rem !important;
419
+ }
420
+
421
+ .mb-4 {
422
+ margin-bottom: 1.5rem !important;
423
+ }
424
+
425
+ .mb-5 {
426
+ margin-bottom: 2.5rem !important;
427
+ }
428
+
429
+ .mb-6 {
430
+ margin-bottom: 3.5rem !important;
431
+ }
432
+
433
+ .ms-0 {
434
+ margin-left: 0 !important;
435
+ }
436
+
437
+ .ms-1 {
438
+ margin-left: 0.25rem !important;
439
+ }
440
+
441
+ .ms-2 {
442
+ margin-left: 0.5rem !important;
443
+ }
444
+
445
+ .ms-3 {
446
+ margin-left: 1rem !important;
447
+ }
448
+
449
+ .ms-4 {
450
+ margin-left: 1.5rem !important;
451
+ }
452
+
453
+ .ms-5 {
454
+ margin-left: 2.5rem !important;
455
+ }
456
+
457
+ .ms-6 {
458
+ margin-left: 3.5rem !important;
459
+ }
460
+
461
+ .me-0 {
462
+ margin-right: 0 !important;
463
+ }
464
+
465
+ .me-1 {
466
+ margin-right: 0.25rem !important;
467
+ }
468
+
469
+ .me-2 {
470
+ margin-right: 0.5rem !important;
471
+ }
472
+
473
+ .me-3 {
474
+ margin-right: 1rem !important;
475
+ }
476
+
477
+ .me-4 {
478
+ margin-right: 1.5rem !important;
479
+ }
480
+
481
+ .me-5 {
482
+ margin-right: 2.5rem !important;
483
+ }
484
+
485
+ .me-6 {
486
+ margin-right: 3.5rem !important;
487
+ }
488
+
489
+ .gap-0 {
490
+ gap: 0 !important;
491
+ }
492
+
493
+ .gap-1 {
494
+ gap: 0.25rem !important;
495
+ }
496
+
497
+ .gap-2 {
498
+ gap: 0.5rem !important;
499
+ }
500
+
501
+ .gap-3 {
502
+ gap: 1rem !important;
503
+ }
504
+
505
+ .gap-4 {
506
+ gap: 1.5rem !important;
507
+ }
508
+
509
+ .gap-5 {
510
+ gap: 2.5rem !important;
511
+ }
512
+
513
+ .gap-6 {
514
+ gap: 3.5rem !important;
515
+ }
516
+
517
+ .gap-row-0 {
518
+ row-gap: 0 !important;
519
+ }
520
+
521
+ .gap-row-1 {
522
+ row-gap: 0.25rem !important;
523
+ }
524
+
525
+ .gap-row-2 {
526
+ row-gap: 0.5rem !important;
527
+ }
528
+
529
+ .gap-row-3 {
530
+ row-gap: 1rem !important;
531
+ }
532
+
533
+ .gap-row-4 {
534
+ row-gap: 1.5rem !important;
535
+ }
536
+
537
+ .gap-row-5 {
538
+ row-gap: 2.5rem !important;
539
+ }
540
+
541
+ .gap-row-6 {
542
+ row-gap: 3.5rem !important;
543
+ }
544
+
545
+ .gap-col-0 {
546
+ column-gap: 0 !important;
547
+ }
548
+
549
+ .gap-col-1 {
550
+ column-gap: 0.25rem !important;
551
+ }
552
+
553
+ .gap-col-2 {
554
+ column-gap: 0.5rem !important;
555
+ }
556
+
557
+ .gap-col-3 {
558
+ column-gap: 1rem !important;
559
+ }
560
+
561
+ .gap-col-4 {
562
+ column-gap: 1.5rem !important;
563
+ }
564
+
565
+ .gap-col-5 {
566
+ column-gap: 2.5rem !important;
567
+ }
568
+
569
+ .gap-col-6 {
570
+ column-gap: 3.5rem !important;
571
+ }
572
+
573
+ /* Axis-specific spacing utilities (-x and -y) */
574
+ .px-0 {
575
+ padding-left: 0 !important;
576
+ padding-right: 0 !important;
577
+ }
578
+
579
+ .px-1 {
580
+ padding-left: 0.25rem !important;
581
+ padding-right: 0.25rem !important;
582
+ }
583
+
584
+ .px-2 {
585
+ padding-left: 0.5rem !important;
586
+ padding-right: 0.5rem !important;
587
+ }
588
+
589
+ .px-3 {
590
+ padding-left: 1rem !important;
591
+ padding-right: 1rem !important;
592
+ }
593
+
594
+ .px-4 {
595
+ padding-left: 1.5rem !important;
596
+ padding-right: 1.5rem !important;
597
+ }
598
+
599
+ .px-5 {
600
+ padding-left: 2.5rem !important;
601
+ padding-right: 2.5rem !important;
602
+ }
603
+
604
+ .px-6 {
605
+ padding-left: 3.5rem !important;
606
+ padding-right: 3.5rem !important;
607
+ }
608
+
609
+ .py-0 {
610
+ padding-top: 0 !important;
611
+ padding-bottom: 0 !important;
612
+ }
613
+
614
+ .py-1 {
615
+ padding-top: 0.25rem !important;
616
+ padding-bottom: 0.25rem !important;
617
+ }
618
+
619
+ .py-2 {
620
+ padding-top: 0.5rem !important;
621
+ padding-bottom: 0.5rem !important;
622
+ }
623
+
624
+ .py-3 {
625
+ padding-top: 1rem !important;
626
+ padding-bottom: 1rem !important;
627
+ }
628
+
629
+ .py-4 {
630
+ padding-top: 1.5rem !important;
631
+ padding-bottom: 1.5rem !important;
632
+ }
633
+
634
+ .py-5 {
635
+ padding-top: 2.5rem !important;
636
+ padding-bottom: 2.5rem !important;
637
+ }
638
+
639
+ .py-6 {
640
+ padding-top: 3.5rem !important;
641
+ padding-bottom: 3.5rem !important;
642
+ }
643
+
644
+ .mx-0 {
645
+ margin-left: 0 !important;
646
+ margin-right: 0 !important;
647
+ }
648
+
649
+ .mx-1 {
650
+ margin-left: 0.25rem !important;
651
+ margin-right: 0.25rem !important;
652
+ }
653
+
654
+ .mx-2 {
655
+ margin-left: 0.5rem !important;
656
+ margin-right: 0.5rem !important;
657
+ }
658
+
659
+ .mx-3 {
660
+ margin-left: 1rem !important;
661
+ margin-right: 1rem !important;
662
+ }
663
+
664
+ .mx-4 {
665
+ margin-left: 1.5rem !important;
666
+ margin-right: 1.5rem !important;
667
+ }
668
+
669
+ .mx-5 {
670
+ margin-left: 2.5rem !important;
671
+ margin-right: 2.5rem !important;
672
+ }
673
+
674
+ .mx-6 {
675
+ margin-left: 3.5rem !important;
676
+ margin-right: 3.5rem !important;
677
+ }
678
+
679
+ .my-0 {
680
+ margin-top: 0 !important;
681
+ margin-bottom: 0 !important;
682
+ }
683
+
684
+ .my-1 {
685
+ margin-top: 0.25rem !important;
686
+ margin-bottom: 0.25rem !important;
687
+ }
688
+
689
+ .my-2 {
690
+ margin-top: 0.5rem !important;
691
+ margin-bottom: 0.5rem !important;
692
+ }
693
+
694
+ .my-3 {
695
+ margin-top: 1rem !important;
696
+ margin-bottom: 1rem !important;
697
+ }
698
+
699
+ .my-4 {
700
+ margin-top: 1.5rem !important;
701
+ margin-bottom: 1.5rem !important;
702
+ }
703
+
704
+ .my-5 {
705
+ margin-top: 2.5rem !important;
706
+ margin-bottom: 2.5rem !important;
707
+ }
708
+
709
+ .my-6 {
710
+ margin-top: 3.5rem !important;
711
+ margin-bottom: 3.5rem !important;
712
+ }
713
+
714
+ /************ Custom Styles ************/
715
+ .highlight-green,
716
+ .highlight-red {
717
+ padding: 5px;
718
+ }
719
+
720
+ .highlight-green {
721
+ background: rgba(125, 227, 125, 0.2039215686);
722
+ }
723
+
724
+ .highlight-red {
725
+ background: rgba(247, 83, 91, 0.2745098039);
726
+ }
727
+
728
+ .admin-only {
729
+ display: none;
730
+ }
731
+
732
+ .note-indicator {
733
+ display: inline-block;
734
+ width: 8px;
735
+ height: 8px;
736
+ border-radius: 50%;
737
+ background-color: #3b82f6;
738
+ margin-right: 6px;
739
+ vertical-align: middle;
740
+ opacity: 0.6;
741
+ }
742
+
743
+ div.note {
744
+ display: none;
745
+ border: 3px solid #f59e0b;
746
+ border-left: 6px solid #f59e0b;
747
+ padding: 12px;
748
+ border-radius: 4px;
749
+ margin: 10px 0;
750
+ }
751
+ div.note::before {
752
+ content: "Personal Note";
753
+ display: block;
754
+ font-weight: bold;
755
+ color: #3b82f6;
756
+ margin-bottom: 8px;
757
+ font-size: 0.95em;
758
+ }
759
+
760
+ /********** Toggle Checkbox Styles **********/
761
+ #toggle-all-details-btn {
762
+ display: flex;
763
+ align-items: center;
764
+ gap: 0.5rem;
765
+ cursor: pointer;
766
+ }
767
+ #toggle-all-details-btn input[type=checkbox] {
768
+ position: relative;
769
+ appearance: none;
770
+ width: 1.2em;
771
+ height: 1.2em;
772
+ border: 2px solid currentColor;
773
+ border-radius: 2px;
774
+ cursor: pointer;
775
+ display: flex;
776
+ align-items: center;
777
+ justify-content: center;
778
+ transition: background-color 0.2s ease;
779
+ }
780
+ #toggle-all-details-btn input[type=checkbox]:checked {
781
+ background-color: var(--sl-color-accent);
782
+ border-color: var(--sl-color-accent);
783
+ }
784
+ #toggle-all-details-btn input[type=checkbox]:checked::after {
785
+ content: "✓";
786
+ color: white;
787
+ font-size: 0.8em;
788
+ font-weight: bold;
789
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "starlight-cannoli-plugins",
3
3
  "type": "module",
4
- "version": "1.0.5",
4
+ "version": "1.0.7",
5
5
  "description": "Starlight plugins for automatic sidebar generation and link validation",
6
6
  "license": "ISC",
7
7
  "main": "./dist/index.js",
@@ -23,12 +23,11 @@
23
23
  "import": "./dist/plugins/astro-normalize-paths.js",
24
24
  "types": "./dist/plugins/astro-normalize-paths.d.ts"
25
25
  },
26
- "./styles": "./src/styles/",
27
- "./styles/*": "./src/styles/*"
26
+ "./styles": "./dist/styles/",
27
+ "./styles/*": "./dist/styles/*"
28
28
  },
29
29
  "files": [
30
- "dist",
31
- "src/styles"
30
+ "dist"
32
31
  ],
33
32
  "keywords": [
34
33
  "astro",
@@ -48,7 +47,7 @@
48
47
  "app:preview": "astro build && astro preview --port 5600",
49
48
  "app:help": "astro --help",
50
49
  "app:check": "astro check",
51
- "lib:build": "tsup",
50
+ "lib:build": "tsup && mkdir -p dist/styles && npx sass src/styles:dist/styles --no-source-map",
52
51
  "prepublishOnly": "npm run lib:build",
53
52
  "tree:index": "tree -P index.md src/content/docs",
54
53
  "tree:depth": "bash scripts/tree-depth.sh",
@@ -1,393 +0,0 @@
1
- $info-color: #3b82f6;
2
- $warning-color: #f59e0b;
3
-
4
- html {
5
- scroll-behavior: smooth;
6
- }
7
-
8
- // invert img.note-svg when on dark mode
9
- img.note-svg {
10
- color-scheme: light dark;
11
- padding-top: 1em;
12
- padding-bottom: 1em;
13
-
14
- html[data-theme="light"] & {
15
- filter: none;
16
- }
17
-
18
- html:not([data-theme="light"]) & {
19
- filter: invert(1) hue-rotate(180deg);
20
- }
21
- }
22
-
23
- /************ Starlight Additions/Overrides ************/
24
-
25
- .sl-container:where(.astro-7nkwcw3z) {
26
- max-width: 50rem;
27
- }
28
-
29
- .main-pane {
30
- table > thead > tr > th {
31
- border-bottom: 1px solid hsl(228, 6.2%, 47.3%);
32
- }
33
- }
34
-
35
- starlight-toc {
36
- a {
37
- transition: transform 0.2s ease;
38
- transform-origin: left;
39
-
40
- span {
41
- position: relative;
42
- display: inline-block;
43
- transition: color 0.2s ease;
44
-
45
- &::before {
46
- content: "";
47
- position: absolute;
48
- left: -8px;
49
- top: 0;
50
- bottom: 0;
51
- width: 3px;
52
- background-color: transparent;
53
- border-radius: 2px;
54
- transition: background-color 0.2s ease;
55
- }
56
- }
57
- }
58
-
59
- a[aria-current="true"] {
60
- transform: scale(1.04);
61
-
62
- span {
63
- &::before {
64
- background-color: var(--sl-color-text-accent);
65
- }
66
- }
67
- }
68
- }
69
-
70
- #starlight__search mark {
71
- color: hsl(339.8, 63.4%, 60.4%);
72
- }
73
-
74
- #starlight__mobile-toc {
75
- > .dropdown {
76
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.6);
77
- }
78
- }
79
-
80
- .expressive-code .copy > button {
81
- height: 2rem;
82
- width: 2rem;
83
- }
84
-
85
- /************ Details/Summary Styles ************/
86
- .main-pane details {
87
- background: var(--sl-color-bg-nav);
88
- border-radius: 4px;
89
- padding: 0.3rem 0.6rem;
90
- display: block;
91
-
92
- &[open] {
93
- max-width: 100%;
94
-
95
- > div.details-wrapper {
96
- overflow: auto;
97
- max-height: 67vh;
98
- padding-right: 0.8rem;
99
- padding-left: 0.8rem;
100
- }
101
-
102
- p > img {
103
- height: auto;
104
- width: auto;
105
- }
106
- }
107
- }
108
-
109
- /********** MathJax/LaTeX Styling **********/
110
- mjx-container[jax="SVG"] {
111
- overflow-x: auto;
112
-
113
- &[display="true"] {
114
- margin-top: 0.7em !important;
115
- margin-bottom: 0.7em !important;
116
- padding-top: 0.3em;
117
- padding-bottom: 0.3em;
118
- }
119
-
120
- > svg {
121
- display: unset;
122
- max-width: unset;
123
- height: unset;
124
- }
125
- }
126
-
127
- /********** TikZ SVG Styling **********/
128
- script[type="text/tikz"] {
129
- display: block;
130
- }
131
-
132
- div > div[class="page"] > svg {
133
- color-scheme: light dark;
134
-
135
- html[data-theme="light"] & {
136
- stroke: currentColor;
137
- fill: currentColor;
138
- }
139
-
140
- html:not([data-theme="light"]) & {
141
- stroke: white;
142
- fill: white;
143
- filter: invert(1) hue-rotate(180deg);
144
- }
145
- }
146
-
147
- /********** Mimic Bootstrap Class Utilities **********/
148
- .visually-hidden {
149
- display: none !important;
150
- }
151
-
152
- .visibility-hidden {
153
- visibility: hidden !important;
154
- }
155
-
156
- .visible {
157
- display: block !important;
158
- }
159
-
160
- .text-center {
161
- text-align: center !important;
162
- }
163
-
164
- .d-block {
165
- display: block !important;
166
- }
167
-
168
- .d-flex {
169
- display: flex !important;
170
- }
171
-
172
- .flex-row {
173
- flex-direction: row !important;
174
- }
175
-
176
- .flex-column {
177
- flex-direction: column !important;
178
- }
179
-
180
- .justify-content-center {
181
- justify-content: center !important;
182
- }
183
-
184
- .justify-content-between {
185
- justify-content: space-between !important;
186
- }
187
-
188
- .justify-content-around {
189
- justify-content: space-around !important;
190
- }
191
-
192
- .justify-content-evenly {
193
- justify-content: space-evenly !important;
194
- }
195
-
196
- .align-items-center {
197
- align-items: center !important;
198
- }
199
-
200
- .align-items-start {
201
- align-items: flex-start !important;
202
- }
203
-
204
- .flex-wrap {
205
- flex-wrap: wrap !important;
206
-
207
- .flex-fill {
208
- flex: 1 1 auto;
209
- margin-top: unset;
210
- }
211
-
212
- .flex-fill.flex-code {
213
- min-width: 0;
214
- }
215
- }
216
-
217
- .flex-grow-1 {
218
- flex-grow: 1 !important;
219
- }
220
-
221
- /* Overflow utilities */
222
- .overflow-auto {
223
- overflow: auto !important;
224
- }
225
-
226
- .overflow-y-auto {
227
- overflow-y: auto !important;
228
- }
229
-
230
- .overflow-x-hidden {
231
- overflow-x: hidden !important;
232
- }
233
-
234
- /* Padding and Margin Utilities */
235
- /* Exposes utility classes like .p-0, .p-1, .pt-2, .mb-3, ..., .m-6, .gap-6 */
236
-
237
- $spacings: (
238
- p: padding,
239
- pt: padding-top,
240
- pb: padding-bottom,
241
- ps: padding-left,
242
- pe: padding-right,
243
- m: margin,
244
- mt: margin-top,
245
- mb: margin-bottom,
246
- ms: margin-left,
247
- me: margin-right,
248
- gap: gap,
249
- gap-row: row-gap,
250
- gap-col: column-gap,
251
- );
252
-
253
- $axis-spacings: (
254
- px: (
255
- padding-left,
256
- padding-right,
257
- ),
258
- py: (
259
- padding-top,
260
- padding-bottom,
261
- ),
262
- mx: (
263
- margin-left,
264
- margin-right,
265
- ),
266
- my: (
267
- margin-top,
268
- margin-bottom,
269
- ),
270
- );
271
-
272
- @each $class, $property in $spacings {
273
- .#{$class}-0 {
274
- #{$property}: 0 !important;
275
- }
276
-
277
- $scalar: 0.125;
278
- $accumulated: 0;
279
-
280
- @for $i from 1 through 6 {
281
- $scalar: $scalar + ($i % 2) * $scalar;
282
- $accumulated: $accumulated + $scalar;
283
-
284
- .#{$class}-#{$i} {
285
- #{$property}: #{$accumulated}rem !important;
286
- }
287
- }
288
- }
289
-
290
- /* Axis-specific spacing utilities (-x and -y) */
291
- @each $class, $properties in $axis-spacings {
292
- .#{$class}-0 {
293
- @each $property in $properties {
294
- #{$property}: 0 !important;
295
- }
296
- }
297
-
298
- $scalar: 0.125;
299
- $accumulated: 0;
300
-
301
- @for $i from 1 through 6 {
302
- $scalar: $scalar + ($i % 2) * $scalar;
303
- $accumulated: $accumulated + $scalar;
304
-
305
- .#{$class}-#{$i} {
306
- @each $property in $properties {
307
- #{$property}: #{$accumulated}rem !important;
308
- }
309
- }
310
- }
311
- }
312
-
313
- /************ Custom Styles ************/
314
-
315
- .highlight-green,
316
- .highlight-red {
317
- padding: 5px;
318
- }
319
-
320
- .highlight-green {
321
- background: #7de37d34;
322
- }
323
-
324
- .highlight-red {
325
- background: #f7535b46;
326
- }
327
-
328
- .admin-only {
329
- display: none;
330
- }
331
-
332
- .note-indicator {
333
- display: inline-block;
334
- width: 8px;
335
- height: 8px;
336
- border-radius: 50%;
337
- background-color: $info-color;
338
- margin-right: 6px;
339
- vertical-align: middle;
340
- opacity: 0.6;
341
- }
342
-
343
- div.note {
344
- display: none;
345
- border: 3px solid $warning-color;
346
- border-left: 6px solid $warning-color;
347
- padding: 12px;
348
- border-radius: 4px;
349
- margin: 10px 0;
350
-
351
- &::before {
352
- content: "Personal Note";
353
- display: block;
354
- font-weight: bold;
355
- color: $info-color;
356
- margin-bottom: 8px;
357
- font-size: 0.95em;
358
- }
359
- }
360
-
361
- /********** Toggle Checkbox Styles **********/
362
- #toggle-all-details-btn {
363
- display: flex;
364
- align-items: center;
365
- gap: 0.5rem;
366
- cursor: pointer;
367
-
368
- input[type="checkbox"] {
369
- position: relative;
370
- appearance: none;
371
- width: 1.2em;
372
- height: 1.2em;
373
- border: 2px solid currentColor;
374
- border-radius: 2px;
375
- cursor: pointer;
376
- display: flex;
377
- align-items: center;
378
- justify-content: center;
379
- transition: background-color 0.2s ease;
380
-
381
- &:checked {
382
- background-color: var(--sl-color-accent);
383
- border-color: var(--sl-color-accent);
384
-
385
- &::after {
386
- content: "✓";
387
- color: white;
388
- font-size: 0.8em;
389
- font-weight: bold;
390
- }
391
- }
392
- }
393
- }