daisyui 2.3.4 → 2.3.7-alpha.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/dist/unstyled.css CHANGED
@@ -1,52 +1,45 @@
1
- .alert {
2
- display: flex;
3
- width: 100%;
4
- flex-direction: column;
5
- align-items: center;
6
- justify-content: space-between;
7
- gap: 1rem
8
- }
9
- .alert > :not([hidden]) ~ :not([hidden]) {
10
- --tw-space-y-reverse: 0;
11
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
12
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
13
- }
14
- @media (min-width: 768px) {
15
- .alert {
16
- flex-direction: row
17
- }
18
- .alert > :not([hidden]) ~ :not([hidden]) {
19
- --tw-space-y-reverse: 0;
20
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
21
- margin-bottom: calc(0px * var(--tw-space-y-reverse))
1
+ .alert {display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: space-between;gap: 1rem
2
+ }.alert > :not([hidden]) ~ :not([hidden]) {--tw-space-y-reverse: 0;margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
3
+ }@media (min-width: 768px) {.alert {flex-direction: row
4
+ }.alert > :not([hidden]) ~ :not([hidden]) {--tw-space-y-reverse: 0;margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0px * var(--tw-space-y-reverse))
22
5
  }
23
- }
24
- .alert > :where(*) {
25
- display: flex;
26
- align-items: center;
27
- gap: 0.5rem
6
+ }.alert > :where(*) {display: flex
7
+ }.alert > :where(*) {align-items: center
8
+ }.alert > :where(*) {gap: 0.5rem
28
9
  }
29
10
  .artboard {
30
11
  width: 100%
31
12
  }
32
13
  .avatar {
33
14
  position: relative;
34
- display: inline-flex
15
+ display: inline-flex;
35
16
  }
36
17
  .avatar > div {
37
18
  display: block;
19
+ }
20
+ .avatar > div {
38
21
  aspect-ratio: 1 / 1;
39
- overflow: hidden
22
+ }
23
+ .avatar > div {
24
+ overflow: hidden;
40
25
  }
41
26
  .avatar img {
42
27
  height: 100%;
28
+ }
29
+ .avatar img {
43
30
  width: 100%;
44
- object-fit: cover
31
+ }
32
+ .avatar img {
33
+ object-fit: cover;
45
34
  }
46
35
  .avatar.placeholder > div {
47
36
  display: flex;
37
+ }
38
+ .avatar.placeholder > div {
48
39
  align-items: center;
49
- justify-content: center
40
+ }
41
+ .avatar.placeholder > div {
42
+ justify-content: center;
50
43
  }
51
44
  .badge {
52
45
  display: inline-flex;
@@ -64,25 +57,37 @@
64
57
  }
65
58
  .breadcrumbs {
66
59
  max-width: 100%;
67
- overflow-x: auto
60
+ overflow-x: auto;
68
61
  }
69
62
  .breadcrumbs > ul {
70
63
  display: flex;
64
+ }
65
+ .breadcrumbs > ul {
71
66
  align-items: center;
67
+ }
68
+ .breadcrumbs > ul {
72
69
  white-space: nowrap;
73
- min-height: min-content
74
70
  }
71
+ .breadcrumbs > ul {
72
+ min-height: min-content;
73
+ }
75
74
  .breadcrumbs > ul > li {
76
75
  display: flex;
77
- align-items: center
76
+ }
77
+ .breadcrumbs > ul > li {
78
+ align-items: center;
78
79
  }
79
80
  .breadcrumbs > ul > li > a {
80
81
  display: flex;
82
+ }
83
+ .breadcrumbs > ul > li > a {
81
84
  cursor: pointer;
82
- align-items: center
85
+ }
86
+ .breadcrumbs > ul > li > a {
87
+ align-items: center;
83
88
  }
84
89
  .breadcrumbs > ul > li > a:hover {
85
- text-decoration-line: underline
90
+ text-decoration-line: underline;
86
91
  }
87
92
  .btn {
88
93
  display: inline-flex;
@@ -117,14 +122,29 @@
117
122
 
118
123
  .btn-square {
119
124
  height: 3rem;
125
+ }
126
+
127
+ .btn-square {
120
128
  width: 3rem;
129
+ }
130
+
131
+ .btn-square {
121
132
  padding: 0px;
122
133
  }
123
134
 
124
135
  .btn-circle {
125
136
  height: 3rem;
137
+ }
138
+
139
+ .btn-circle {
126
140
  width: 3rem;
141
+ }
142
+
143
+ .btn-circle {
127
144
  border-radius: 9999px;
145
+ }
146
+
147
+ .btn-circle {
128
148
  padding: 0px;
129
149
  }
130
150
 
@@ -136,17 +156,32 @@
136
156
 
137
157
  .btn.loading:before {
138
158
  margin-right: 0.5rem;
159
+ }
160
+
161
+ .btn.loading:before {
139
162
  height: 1rem;
163
+ }
164
+
165
+ .btn.loading:before {
140
166
  width: 1rem;
167
+ }
168
+
169
+ .btn.loading:before {
141
170
  border-radius: 9999px;
171
+ }
172
+
173
+ .btn.loading:before {
142
174
  border-width: 2px;
175
+ }
176
+
177
+ .btn.loading:before {
143
178
  animation: spin 2s linear infinite;
144
179
  content: "";
145
180
  border-top-color: transparent;
146
181
  border-left-color: transparent;
147
182
  border-bottom-color: currentColor;
148
183
  border-right-color: currentColor;
149
- }
184
+ }
150
185
  @media (prefers-reduced-motion: reduce) {
151
186
  .btn.loading:before {
152
187
  animation: spin 10s linear infinite;
@@ -175,48 +210,68 @@
175
210
  position: relative;
176
211
  display: flex;
177
212
  flex-direction: column;
178
- overflow: hidden
213
+ overflow: hidden;
179
214
  }
180
215
  .card:focus {
181
216
  outline: 2px solid transparent;
182
- outline-offset: 2px
217
+ outline-offset: 2px;
183
218
  }
184
219
  .card-body {
185
220
  display: flex;
221
+ }
222
+ .card-body {
186
223
  flex: 1 1 auto;
187
- flex-direction: column
224
+ }
225
+ .card-body {
226
+ flex-direction: column;
188
227
  }
189
228
  .card-body :where(p) {
190
- flex-grow: 1
229
+ flex-grow: 1;
191
230
  }
192
231
  .card-actions {
193
232
  display: flex;
233
+ }
234
+ .card-actions {
194
235
  flex-wrap: wrap;
236
+ }
237
+ .card-actions {
195
238
  align-items: flex-start;
196
- gap: 0.5rem
239
+ }
240
+ .card-actions {
241
+ gap: 0.5rem;
197
242
  }
198
243
  .card figure {
199
244
  display: flex;
245
+ }
246
+ .card figure {
200
247
  align-items: center;
201
- justify-content: center
248
+ }
249
+ .card figure {
250
+ justify-content: center;
202
251
  }
203
252
  .card.image-full {
204
- display: grid
253
+ display: grid;
205
254
  }
206
255
  .card.image-full:before {
207
256
  position: relative;
208
- content: ""
209
257
  }
258
+ .card.image-full:before {
259
+ content: "";
260
+ }
210
261
  .card.image-full:before, .card.image-full > * {
211
262
  grid-column-start: 1;
212
- grid-row-start: 1
263
+ }
264
+ .card.image-full:before, .card.image-full > * {
265
+ grid-row-start: 1;
213
266
  }
214
267
  .card.image-full > figure img {
215
268
  height: 100%;
216
- object-fit: cover
269
+ }
270
+ .card.image-full > figure img {
271
+ object-fit: cover;
217
272
  }
218
273
  .card.image-full > .card-body {
219
- position: relative
274
+ position: relative;
220
275
  }
221
276
  .carousel {
222
277
  display: flex;
@@ -226,15 +281,25 @@
226
281
  }
227
282
  .carousel-vertical {
228
283
  flex-direction: column;
284
+ }
285
+ .carousel-vertical {
229
286
  overflow-y: scroll;
230
- scroll-snap-type: y mandatory;
231
287
  }
288
+ .carousel-vertical {
289
+ scroll-snap-type: y mandatory;
290
+ }
232
291
  .carousel-item {
233
292
  box-sizing: content-box;
293
+ }
294
+ .carousel-item {
234
295
  display: flex;
296
+ }
297
+ .carousel-item {
235
298
  flex: none;
236
- scroll-snap-align: start;
237
299
  }
300
+ .carousel-item {
301
+ scroll-snap-align: start;
302
+ }
238
303
  .carousel-center .carousel-item {
239
304
  scroll-snap-align: center;
240
305
  }
@@ -275,10 +340,14 @@
275
340
  display: inline-flex;
276
341
  }
277
342
  .countdown > * {
278
- height: 1em;
279
- display: inline-block;
280
- overflow-y: hidden;
343
+ height: 1em
281
344
  }
345
+ .countdown > * {
346
+ display: inline-block;
347
+ }
348
+ .countdown > * {
349
+ overflow-y: hidden;
350
+ }
282
351
  .countdown > *:before {
283
352
  position: relative;
284
353
  content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
@@ -294,10 +363,16 @@
294
363
  .divider:before,
295
364
  .divider:after {
296
365
  content: "";
366
+ }
367
+ .divider:before, .divider:after {
297
368
  flex-grow: 1;
369
+ }
370
+ .divider:before, .divider:after {
298
371
  height: 0.125rem;
372
+ }
373
+ .divider:before, .divider:after {
299
374
  width: 100%;
300
- }
375
+ }
301
376
  .drawer {
302
377
  display: grid;
303
378
  overflow: hidden;
@@ -312,6 +387,8 @@
312
387
  .drawer.drawer-end .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
313
388
  --tw-translate-x: 100%;
314
389
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
390
+ }
391
+ .drawer.drawer-end .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
315
392
  justify-self: end;
316
393
  }
317
394
  .drawer.drawer-end .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
@@ -327,30 +404,59 @@
327
404
  }
328
405
  .drawer-toggle ~ .drawer-content {
329
406
  z-index: 0;
407
+ }
408
+ .drawer-toggle ~ .drawer-content {
330
409
  grid-column-start: 1;
410
+ }
411
+ .drawer-toggle ~ .drawer-content {
331
412
  grid-row-start: 1;
413
+ }
414
+ .drawer-toggle ~ .drawer-content {
332
415
  max-height: 100vh;
416
+ }
417
+ .drawer-toggle ~ .drawer-content {
333
418
  overflow-y: auto;
334
419
  }
335
420
  .drawer-toggle ~ .drawer-side {
336
421
  grid-column-start: 1;
422
+ }
423
+ .drawer-toggle ~ .drawer-side {
337
424
  grid-row-start: 1;
425
+ }
426
+ .drawer-toggle ~ .drawer-side {
338
427
  display: grid;
428
+ }
429
+ .drawer-toggle ~ .drawer-side {
339
430
  max-height: 100vh;
340
431
  }
341
432
  .drawer-toggle ~ .drawer-side > .drawer-overlay {
342
433
  visibility: hidden;
434
+ }
435
+ .drawer-toggle ~ .drawer-side > .drawer-overlay {
343
436
  grid-column-start: 1;
437
+ }
438
+ .drawer-toggle ~ .drawer-side > .drawer-overlay {
344
439
  grid-row-start: 1;
440
+ }
441
+ .drawer-toggle ~ .drawer-side > .drawer-overlay {
345
442
  opacity: 0;
346
443
  }
347
444
  .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
348
445
  z-index: 10;
446
+ }
447
+ .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
349
448
  grid-column-start: 1;
449
+ }
450
+ .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
350
451
  grid-row-start: 1;
452
+ }
453
+ .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
351
454
  --tw-translate-x: -100%;
352
455
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
353
456
  }
457
+ .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
458
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
459
+ }
354
460
  .drawer-toggle:checked ~ .drawer-side {
355
461
  overflow-y: auto;
356
462
  }
@@ -483,10 +589,14 @@
483
589
  }
484
590
  .footer > * {
485
591
  display: grid;
592
+ }
593
+ .footer > * {
486
594
  place-items: start;
487
595
  }
488
596
  .footer-center {
489
597
  place-items: center;
598
+ }
599
+ .footer-center {
490
600
  text-align: center;
491
601
  }
492
602
  .footer-center > * {
@@ -515,23 +625,37 @@
515
625
  width: 100%;
516
626
  place-items: center;
517
627
  background-size: cover;
518
- background-position: center
628
+ background-position: center;
519
629
  }
520
630
  .hero > * {
521
631
  grid-column-start: 1;
522
- grid-row-start: 1
632
+ }
633
+ .hero > * {
634
+ grid-row-start: 1;
523
635
  }
524
636
  .hero-overlay {
525
637
  grid-column-start: 1;
638
+ }
639
+ .hero-overlay {
526
640
  grid-row-start: 1;
641
+ }
642
+ .hero-overlay {
527
643
  height: 100%;
528
- width: 100%
644
+ }
645
+ .hero-overlay {
646
+ width: 100%;
529
647
  }
530
648
  .hero-content {
531
649
  z-index: 0;
650
+ }
651
+ .hero-content {
532
652
  display: flex;
653
+ }
654
+ .hero-content {
533
655
  align-items: center;
534
- justify-content: center
656
+ }
657
+ .hero-content {
658
+ justify-content: center;
535
659
  }
536
660
  .indicator {
537
661
  position: relative;
@@ -539,49 +663,91 @@
539
663
  width: fit-content;
540
664
  }
541
665
  .indicator .indicator-item {
542
- z-index: 1;
543
- position: absolute;
544
- right: 0px;
545
- left: auto;
546
- top: 0px;
547
- bottom: auto;
548
- --tw-translate-x: 50%;
549
- --tw-translate-y: -50%;
550
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
666
+ z-index: 1
551
667
  }
668
+ .indicator .indicator-item {
669
+ position: absolute;
670
+ }
671
+ .indicator .indicator-item {
672
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
673
+ }
674
+ .indicator .indicator-item {
675
+ right: 0px;
676
+ }
677
+ .indicator .indicator-item {
678
+ left: auto;
679
+ }
680
+ .indicator .indicator-item {
681
+ top: 0px;
682
+ }
683
+ .indicator .indicator-item {
684
+ bottom: auto;
685
+ }
686
+ .indicator .indicator-item {
687
+ --tw-translate-x: 50%;
688
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
689
+ }
690
+ .indicator .indicator-item {
691
+ --tw-translate-y: -50%;
692
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
693
+ }
552
694
  .indicator .indicator-item.indicator-start {
553
695
  right: auto;
696
+ }
697
+ .indicator .indicator-item.indicator-start {
554
698
  left: 0px;
699
+ }
700
+ .indicator .indicator-item.indicator-start {
555
701
  --tw-translate-x: -50%;
556
702
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
557
703
  }
558
704
  .indicator .indicator-item.indicator-center {
559
705
  right: 50%;
706
+ }
707
+ .indicator .indicator-item.indicator-center {
560
708
  left: 50%;
709
+ }
710
+ .indicator .indicator-item.indicator-center {
561
711
  --tw-translate-x: -50%;
562
712
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
563
713
  }
564
714
  .indicator .indicator-item.indicator-end {
565
715
  right: 0px;
716
+ }
717
+ .indicator .indicator-item.indicator-end {
566
718
  left: auto;
719
+ }
720
+ .indicator .indicator-item.indicator-end {
567
721
  --tw-translate-x: 50%;
568
722
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
569
723
  }
570
724
  .indicator .indicator-item.indicator-bottom {
571
725
  top: auto;
726
+ }
727
+ .indicator .indicator-item.indicator-bottom {
572
728
  bottom: 0px;
729
+ }
730
+ .indicator .indicator-item.indicator-bottom {
573
731
  --tw-translate-y: 50%;
574
732
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
575
733
  }
576
734
  .indicator .indicator-item.indicator-middle {
577
735
  top: 50%;
736
+ }
737
+ .indicator .indicator-item.indicator-middle {
578
738
  bottom: 50%;
739
+ }
740
+ .indicator .indicator-item.indicator-middle {
579
741
  --tw-translate-y: -50%;
580
742
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
581
743
  }
582
744
  .indicator .indicator-item.indicator-top {
583
745
  top: 0px;
746
+ }
747
+ .indicator .indicator-item.indicator-top {
584
748
  bottom: auto;
749
+ }
750
+ .indicator .indicator-item.indicator-top {
585
751
  --tw-translate-y: -50%;
586
752
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
587
753
  }
@@ -608,27 +774,42 @@
608
774
  .input-group-md {
609
775
  font-size: 0.875rem;
610
776
  line-height: 1.25rem;
777
+ }
778
+ .input-group-md {
611
779
  line-height: 2;
612
780
  }
613
781
  .input-group-lg {
614
782
  font-size: 1.125rem;
615
783
  line-height: 1.75rem;
784
+ }
785
+ .input-group-lg {
616
786
  line-height: 2;
617
787
  }
618
788
  .input-group-sm {
619
789
  font-size: 0.875rem;
790
+ line-height: 1.25rem;
791
+ }
792
+ .input-group-sm {
620
793
  line-height: 2rem;
621
794
  }
622
795
  .input-group-xs {
623
796
  font-size: 0.75rem;
624
797
  line-height: 1rem;
798
+ }
799
+ .input-group-xs {
625
800
  line-height: 1.625;
626
801
  }
627
802
  .input-group :where(span) {
628
803
  display: flex;
804
+ }
805
+ .input-group :where(span) {
629
806
  align-items: center;
807
+ }
808
+ .input-group :where(span) {
630
809
  --tw-bg-opacity: 1;
631
810
  background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
811
+ }
812
+ .input-group :where(span) {
632
813
  padding-left: 1rem;
633
814
  padding-right: 1rem;
634
815
  }
@@ -666,13 +847,13 @@
666
847
  }
667
848
  .link {
668
849
  cursor: pointer;
669
- text-decoration-line: underline
850
+ text-decoration-line: underline;
670
851
  }
671
852
  .link-hover {
672
- text-decoration-line: none
853
+ text-decoration-line: none;
673
854
  }
674
855
  .link-hover:hover {
675
- text-decoration-line: underline
856
+ text-decoration-line: underline;
676
857
  }
677
858
  .mask {
678
859
  -webkit-mask-size: contain;
@@ -696,76 +877,94 @@
696
877
  }
697
878
  .menu {
698
879
  display: flex;
699
- flex-direction: column
880
+ flex-direction: column;
700
881
  }
701
882
  .menu.horizontal {
702
883
  display: inline-flex;
703
- flex-direction: row
884
+ }
885
+ .menu.horizontal {
886
+ flex-direction: row;
704
887
  }
705
888
  .menu.horizontal :where(li) {
706
- flex-direction: row
889
+ flex-direction: row;
707
890
  }
708
891
  .menu :where(li) {
709
892
  position: relative;
710
893
  display: flex;
711
894
  flex-direction: column;
712
895
  flex-wrap: wrap;
713
- align-items: stretch
896
+ align-items: stretch;
714
897
  }
715
898
  .menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
716
- display: flex
899
+ display: flex;
717
900
  }
718
901
  .menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
719
902
  cursor: pointer;
720
903
  user-select: none;
721
904
  align-items: center;
722
905
  outline: 2px solid transparent;
723
- outline-offset: 2px
906
+ outline-offset: 2px;
724
907
  }
725
908
  .menu > :where(li > *:not(ul):focus) {
726
909
  outline: 2px solid transparent;
727
- outline-offset: 2px
910
+ outline-offset: 2px;
728
911
  }
729
912
  .menu > :where(li.disabled > *:not(ul):focus) {
730
- cursor: auto
913
+ cursor: auto;
731
914
  }
732
915
  .menu > :where(li) :where(ul) {
733
916
  display: flex;
734
917
  flex-direction: column;
735
- align-items: stretch
918
+ align-items: stretch;
736
919
  }
737
920
  .menu > :where(li) > :where(ul) {
738
921
  position: absolute;
739
922
  display: none;
740
923
  top: initial;
741
- left: 100%
924
+ left: 100%;
742
925
  }
743
926
  .menu > :where(li:hover) > :where(ul) {
744
- display: flex
927
+ display: flex;
745
928
  }
746
929
  .menu > :where(li:focus) > :where(ul) {
747
- display: flex
930
+ display: flex;
748
931
  }
749
932
  .mockup-code {
750
933
  position: relative;
934
+ }
935
+ .mockup-code {
751
936
  overflow: hidden;
937
+ }
938
+ .mockup-code {
752
939
  overflow-x: auto;
753
940
  }
754
- .mockup-code pre[data-prefix]:before {
941
+ .mockup-code pre[data-prefix]:before {
755
942
  content: attr(data-prefix);
943
+ }
944
+ .mockup-code pre[data-prefix]:before {
756
945
  display: inline-block;
946
+ }
947
+ .mockup-code pre[data-prefix]:before {
757
948
  text-align: right;
758
- }
949
+ }
759
950
  .mockup-window {
760
951
  position: relative;
952
+ }
953
+ .mockup-window {
761
954
  overflow: hidden;
955
+ }
956
+ .mockup-window {
762
957
  overflow-x: auto;
763
958
  }
764
959
  .mockup-window pre[data-prefix]:before {
765
960
  content: attr(data-prefix);
961
+ }
962
+ .mockup-window pre[data-prefix]:before {
766
963
  display: inline-block;
964
+ }
965
+ .mockup-window pre[data-prefix]:before {
767
966
  text-align: right;
768
- }
967
+ }
769
968
  .modal {
770
969
  pointer-events: none;
771
970
  visibility: hidden;
@@ -808,6 +1007,8 @@
808
1007
  }
809
1008
  .navbar > * {
810
1009
  display: flex;
1010
+ }
1011
+ .navbar > * {
811
1012
  align-items: center;
812
1013
  }
813
1014
  .navbar-start {
@@ -880,10 +1081,10 @@
880
1081
  }
881
1082
  .rating {
882
1083
  position: relative;
883
- display: inline-flex
1084
+ display: inline-flex;
884
1085
  }
885
1086
  .rating :where(input) {
886
- cursor: pointer
1087
+ cursor: pointer;
887
1088
  }
888
1089
  .select {
889
1090
 
@@ -909,24 +1110,28 @@
909
1110
 
910
1111
  line-height: 2;
911
1112
 
912
- min-height: 3rem
1113
+ min-height: 3rem;
913
1114
  }
914
1115
 
915
1116
  /* disabled */
916
1117
 
917
1118
  .select-disabled, .select[disabled] {
918
1119
 
919
- pointer-events: none
1120
+ pointer-events: none;
920
1121
  }
921
1122
  .stack {
922
1123
  display: inline-grid;
923
1124
  }
924
1125
  .stack > * {
925
1126
  grid-column-start: 1;
1127
+ }
1128
+ .stack > * {
926
1129
  grid-row-start: 1;
1130
+ }
1131
+ .stack > * {
927
1132
  transform: translateY(1rem) scale(0.9);
928
1133
  z-index: 1;
929
- }
1134
+ }
930
1135
  .stack > *:nth-child(2) {
931
1136
  transform: translateY(0.5rem) scale(0.95);
932
1137
  z-index: 2;
@@ -936,38 +1141,54 @@
936
1141
  z-index: 3;
937
1142
  }
938
1143
  .stats {
939
- display: inline-grid
1144
+ display: inline-grid;
940
1145
  }
941
1146
  :where(.stats) {
942
- grid-auto-flow: column
1147
+ grid-auto-flow: column;
943
1148
  }
944
1149
  .stat {
945
1150
  display: inline-grid;
946
1151
  width: 100%;
947
- grid-template-columns: repeat(1, 1fr)
1152
+ grid-template-columns: repeat(1, 1fr);
948
1153
  }
949
1154
  .stat-figure {
950
1155
  grid-column-start: 2;
1156
+ }
1157
+ .stat-figure {
951
1158
  grid-row: span 3 / span 3;
1159
+ }
1160
+ .stat-figure {
952
1161
  grid-row-start: 1;
1162
+ }
1163
+ .stat-figure {
953
1164
  place-self: center;
954
- justify-self: end
1165
+ }
1166
+ .stat-figure {
1167
+ justify-self: end;
955
1168
  }
956
1169
  .stat-title {
957
1170
  grid-column-start: 1;
958
- white-space: nowrap
1171
+ }
1172
+ .stat-title {
1173
+ white-space: nowrap;
959
1174
  }
960
1175
  .stat-value {
961
1176
  grid-column-start: 1;
962
- white-space: nowrap
1177
+ }
1178
+ .stat-value {
1179
+ white-space: nowrap;
963
1180
  }
964
1181
  .stat-desc {
965
1182
  grid-column-start: 1;
966
- white-space: nowrap
1183
+ }
1184
+ .stat-desc {
1185
+ white-space: nowrap;
967
1186
  }
968
1187
  .stat-actions {
969
1188
  grid-column-start: 1;
970
- white-space: nowrap
1189
+ }
1190
+ .stat-actions {
1191
+ white-space: nowrap;
971
1192
  }
972
1193
  /* .stats.grid-flow-row {
973
1194
  @apply auto-rows-fr;
@@ -978,14 +1199,22 @@
978
1199
  overflow: hidden;
979
1200
  overflow-x: auto;
980
1201
  counter-reset: step;
981
- grid-auto-columns: 1fr
1202
+ grid-auto-columns: 1fr;
982
1203
  }
983
1204
  .steps .step {
984
1205
  display: grid;
1206
+ }
1207
+ .steps .step {
985
1208
  grid-template-columns: repeat(1, minmax(0, 1fr));
1209
+ }
1210
+ .steps .step {
986
1211
  grid-template-rows: repeat(2, minmax(0, 1fr));
1212
+ }
1213
+ .steps .step {
987
1214
  place-items: center;
988
- text-align: center
1215
+ }
1216
+ .steps .step {
1217
+ text-align: center;
989
1218
  }
990
1219
  .swap {
991
1220
 
@@ -1045,28 +1274,44 @@
1045
1274
  --tab-padding: 1rem
1046
1275
  }
1047
1276
  .table {
1048
- position: relative
1277
+ position: relative;
1049
1278
  }
1050
1279
  .table th:first-child {
1051
1280
  position: sticky;
1281
+ }
1282
+ .table th:first-child {
1052
1283
  left: 0px;
1284
+ }
1285
+ .table th:first-child {
1053
1286
  z-index: 11;
1054
- /* because safari */
1055
- position: -webkit-sticky
1056
1287
  }
1288
+ .table th:first-child {
1289
+ /* because safari */
1290
+ position: -webkit-sticky;
1291
+ }
1057
1292
  .textarea {
1058
1293
  flex-shrink: 1;
1059
1294
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1060
1295
  transition-duration: 200ms;
1061
1296
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1297
+ }
1298
+ .textarea {
1062
1299
  padding-left: 1rem;
1063
1300
  padding-right: 1rem;
1301
+ }
1302
+ .textarea {
1064
1303
  padding-top: 0.5rem;
1065
1304
  padding-bottom: 0.5rem;
1305
+ }
1306
+ .textarea {
1066
1307
  font-size: 0.875rem;
1067
1308
  line-height: 1.25rem;
1309
+ }
1310
+ .textarea {
1068
1311
  line-height: 2;
1069
- min-height: 3rem
1312
+ }
1313
+ .textarea {
1314
+ min-height: 3rem;
1070
1315
  }
1071
1316
  .toggle {
1072
1317
  flex-shrink: 0;
@@ -1080,12 +1325,14 @@
1080
1325
  position: absolute;
1081
1326
  pointer-events: none;
1082
1327
  content: attr(data-tip);
1328
+ }
1329
+ .tooltip:before {
1083
1330
  transform: translateX(-50%);
1084
1331
  top: auto;
1085
1332
  left: 50%;
1086
1333
  right: auto;
1087
1334
  bottom: var(--tooltip-offset);
1088
- }
1335
+ }
1089
1336
  .tooltip-bottom:before {
1090
1337
  transform: translateX(-50%);
1091
1338
  top: var(--tooltip-offset);