daisyui 3.0.6 → 3.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.
package/dist/unstyled.css DELETED
@@ -1,1190 +0,0 @@
1
- .alert {
2
- display: grid;
3
- width: 100%;
4
- grid-auto-flow: row;
5
- align-content: flex-start;
6
- align-items: center;
7
- justify-items: center;
8
- gap: 1rem;
9
- text-align: center
10
- }
11
- @media (min-width: 640px) {
12
- .alert {
13
- grid-auto-flow: column;
14
- grid-template-columns: auto minmax(auto,1fr);
15
- justify-items: start;
16
- text-align: left
17
- }
18
- }
19
- .artboard {
20
- width: 100%
21
- }
22
- .avatar {
23
- position: relative;
24
- display: inline-flex
25
- }
26
- .avatar > div {
27
- display: block;
28
- aspect-ratio: 1 / 1;
29
- overflow: hidden
30
- }
31
- .avatar img {
32
- height: 100%;
33
- width: 100%;
34
- object-fit: cover
35
- }
36
- .avatar.placeholder > div {
37
- display: flex;
38
- align-items: center;
39
- justify-content: center
40
- }
41
- .badge {
42
- display: inline-flex;
43
- align-items: center;
44
- justify-content: center;
45
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
46
- transition-duration: 200ms;
47
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
48
- height: 1.25rem;
49
- font-size: 0.875rem;
50
- line-height: 1.25rem;
51
- width: fit-content;
52
- padding-left: 0.563rem;
53
- padding-right: 0.563rem
54
- }
55
- .btm-nav {
56
- position: fixed;
57
- bottom: 0px;
58
- left: 0px;
59
- right: 0px;
60
- display: flex;
61
- width: 100%;
62
- flex-direction: row;
63
- align-items: center;
64
- justify-content: space-around;
65
- padding-bottom: env(safe-area-inset-bottom)
66
- }
67
- .btm-nav > * {
68
- position: relative;
69
- display: flex;
70
- height: 100%;
71
- flex-basis: 100%;
72
- cursor: pointer;
73
- flex-direction: column;
74
- align-items: center;
75
- justify-content: center;
76
- gap: 0.25rem
77
- }
78
- .breadcrumbs {
79
- max-width: 100%;
80
- overflow-x: auto
81
- }
82
- .breadcrumbs > ul,
83
- .breadcrumbs > ol {
84
- display: flex;
85
- align-items: center;
86
- white-space: nowrap;
87
- min-height: min-content
88
- }
89
- .breadcrumbs > ul > li, .breadcrumbs > ol > li {
90
- display: flex;
91
- align-items: center
92
- }
93
- .breadcrumbs > ul > li > a, .breadcrumbs > ol > li > a {
94
- display: flex;
95
- cursor: pointer;
96
- align-items: center
97
- }
98
- @media (hover:hover) {
99
- .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover {
100
- text-decoration-line: underline
101
- }
102
- }
103
- .btn {
104
- display: inline-flex;
105
- flex-shrink: 0;
106
- cursor: pointer;
107
- user-select: none;
108
- flex-wrap: wrap;
109
- align-items: center;
110
- justify-content: center;
111
- border-color: transparent;
112
- text-align: center;
113
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
114
- transition-duration: 200ms;
115
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
116
- border-radius: var(--rounded-btn, 0.5rem);
117
- height: 3rem;
118
- padding-left: 1rem;
119
- padding-right: 1rem;
120
- font-size: 0.875rem;
121
- line-height: 1.25rem;
122
- min-height: 3rem;
123
- line-height: 1em;
124
- }
125
-
126
- /* disabled */
127
- .btn-disabled,
128
- .btn[disabled],
129
- .btn:disabled {
130
- pointer-events: none;
131
- }
132
- /* shapes */
133
- .btn-square {
134
- height: 3rem;
135
- width: 3rem;
136
- padding: 0px;
137
- }
138
- .btn-circle {
139
- height: 3rem;
140
- width: 3rem;
141
- border-radius: 9999px;
142
- padding: 0px;
143
- }
144
-
145
- /* group */
146
-
147
- .btn-group {
148
- display: inline-flex;
149
- }
150
-
151
- .btn-group > input[type="radio"].btn {
152
- appearance: none;
153
- }
154
-
155
- .btn-group > input[type="radio"].btn:before {
156
- content: attr(data-title);
157
- }
158
-
159
- /* radio input and checkbox as button */
160
-
161
- .btn:is(input[type="checkbox"]),
162
- .btn:is(input[type="radio"]) {
163
- appearance: none;
164
- }
165
-
166
- .btn:is(input[type="checkbox"]):after,
167
- .btn:is(input[type="radio"]):after {
168
- --tw-content: attr(aria-label);
169
- content: var(--tw-content);
170
- }
171
- .card {
172
- position: relative;
173
- display: flex;
174
- flex-direction: column
175
- }
176
- .card:focus {
177
- outline: 2px solid transparent;
178
- outline-offset: 2px
179
- }
180
- .card-body {
181
- display: flex;
182
- flex: 1 1 auto;
183
- flex-direction: column
184
- }
185
- .card-body :where(p) {
186
- flex-grow: 1
187
- }
188
- .card-actions {
189
- display: flex;
190
- flex-wrap: wrap;
191
- align-items: flex-start;
192
- gap: 0.5rem
193
- }
194
- .card figure {
195
- display: flex;
196
- align-items: center;
197
- justify-content: center
198
- }
199
- .card.image-full {
200
- display: grid
201
- }
202
- .card.image-full:before {
203
- position: relative;
204
- content: ""
205
- }
206
- .card.image-full:before,
207
- .card.image-full > * {
208
- grid-column-start: 1;
209
- grid-row-start: 1
210
- }
211
- .card.image-full > figure img {
212
- height: 100%;
213
- object-fit: cover
214
- }
215
- .card.image-full > .card-body {
216
- position: relative
217
- }
218
- .carousel {
219
- display: inline-flex;
220
- overflow-x: scroll;
221
- scroll-snap-type: x mandatory;
222
- scroll-behavior: smooth;
223
- }
224
- .carousel-vertical {
225
- flex-direction: column;
226
- overflow-y: scroll;
227
- scroll-snap-type: y mandatory;
228
- }
229
- .carousel-item {
230
- box-sizing: content-box;
231
- display: flex;
232
- flex: none;
233
- scroll-snap-align: start;
234
- }
235
- .carousel-center .carousel-item {
236
- scroll-snap-align: center;
237
- }
238
- .carousel-end .carousel-item {
239
- scroll-snap-align: end;
240
- }
241
- .chat {
242
- display: grid;
243
- grid-template-columns: repeat(2, minmax(0, 1fr));
244
- column-gap: 0.75rem;
245
- padding-top: 0.25rem;
246
- padding-bottom: 0.25rem;
247
- }
248
- .chat-image {
249
- grid-row: span 2 / span 2;
250
- align-self: flex-end;
251
- }
252
- .chat-header {
253
- grid-row-start: 1;
254
- font-size: 0.875rem;
255
- line-height: 1.25rem;
256
- }
257
- .chat-footer {
258
- grid-row-start: 3;
259
- font-size: 0.875rem;
260
- line-height: 1.25rem;
261
- }
262
- .chat-bubble {
263
- position: relative;
264
- display: block;
265
- width: fit-content;
266
- padding-left: 1rem;
267
- padding-right: 1rem;
268
- padding-top: 0.5rem;
269
- padding-bottom: 0.5rem;
270
- max-width: 90%;
271
- }
272
- .chat-bubble:before {
273
- position: absolute;
274
- bottom: 0px;
275
- height: 0.75rem;
276
- width: 0.75rem;
277
- background-color: inherit;
278
- content: "";
279
- mask-size: contain;
280
- mask-repeat: no-repeat;
281
- mask-position: center;
282
- }
283
- .chat-start {
284
- place-items: start;
285
- grid-template-columns: auto 1fr;
286
- }
287
- .chat-start .chat-header {
288
- grid-column-start: 2;
289
- }
290
- .chat-start .chat-footer {
291
- grid-column-start: 2;
292
- }
293
- .chat-start .chat-image {
294
- grid-column-start: 1;
295
- }
296
- .chat-start .chat-bubble {
297
- grid-column-start: 2;
298
- }
299
- .chat-start .chat-bubble:before {
300
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
301
- }
302
- [dir="rtl"] .chat-start .chat-bubble:before {
303
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
304
- }
305
- .chat-end {
306
- place-items: end;
307
- grid-template-columns: 1fr auto;
308
- }
309
- .chat-end .chat-header {
310
- grid-column-start: 1;
311
- }
312
- .chat-end .chat-footer {
313
- grid-column-start: 1;
314
- }
315
- .chat-end .chat-image {
316
- grid-column-start: 2;
317
- }
318
- .chat-end .chat-bubble {
319
- grid-column-start: 1;
320
- }
321
- .chat-end .chat-bubble:before {
322
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
323
- }
324
- [dir="rtl"] .chat-end .chat-bubble:before {
325
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
326
- }
327
- .checkbox {
328
- flex-shrink: 0
329
- }
330
- .collapse:not(td):not(tr):not(colgroup) {
331
- visibility: visible;
332
- }
333
- .collapse {
334
- position: relative;
335
- display: grid;
336
- overflow: hidden;
337
- grid-template-rows: auto 0fr;
338
- transition: grid-template-rows 0.2s;
339
- }
340
- .collapse-title,
341
- .collapse > input[type="checkbox"],
342
- .collapse > input[type="radio"],
343
- .collapse-content {
344
- grid-column-start: 1;
345
- grid-row-start: 1;
346
- }
347
- .collapse > input[type="checkbox"],
348
- .collapse > input[type="radio"] {
349
- appearance: none;
350
- opacity: 0;
351
- }
352
- .collapse-content {
353
- visibility: hidden;
354
- grid-column-start: 1;
355
- grid-row-start: 2;
356
- min-height: 0px;
357
- transition: visibility 0.2s;
358
- }
359
- .collapse[open],
360
- .collapse-open,
361
- .collapse:focus:not(.collapse-close) {
362
- grid-template-rows: auto 1fr;
363
- }
364
- .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
365
- .collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
366
- grid-template-rows: auto 1fr;
367
- }
368
- .collapse[open] .collapse-content,
369
- .collapse-open .collapse-content,
370
- .collapse:focus:not(.collapse-close) .collapse-content,
371
- .collapse:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-content,
372
- .collapse:not(.collapse-close) input[type="radio"]:checked ~ .collapse-content {
373
- visibility: visible;
374
- min-height: fit-content;
375
- }
376
- :root .countdown {
377
- line-height: 1em;
378
- }
379
- .countdown {
380
- display: inline-flex;
381
- }
382
- .countdown > * {
383
- height: 1em;
384
- display: inline-block;
385
- overflow-y: hidden;
386
- }
387
- .countdown > *:before {
388
- position: relative;
389
- 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";
390
- white-space: pre;
391
- top: calc(var(--value) * -1em);
392
- }
393
- .divider {
394
- display: flex;
395
- flex-direction: row;
396
- align-items: center;
397
- align-self: stretch;
398
- }
399
- .divider:before,
400
- .divider:after {
401
- content: "";
402
- flex-grow: 1;
403
- height: 0.125rem;
404
- width: 100%;
405
- }
406
- .drawer {
407
- position: relative;
408
- display: grid;
409
- grid-auto-columns: max-content auto;
410
- }
411
- .drawer-content {
412
- grid-column-start: 2;
413
- grid-row-start: 1;
414
- }
415
- .drawer-side {
416
- pointer-events: none;
417
- visibility: hidden;
418
- position: fixed;
419
- top: 0px;
420
- left: 0px;
421
- grid-column-start: 1;
422
- grid-row-start: 1;
423
- display: grid;
424
- width: 100%;
425
- grid-template-columns: repeat(1, minmax(0, 1fr));
426
- grid-template-rows: repeat(1, minmax(0, 1fr));
427
- align-items: flex-start;
428
- justify-items: start;
429
- overflow-y: auto;
430
- overscroll-behavior: contain;
431
- height: 100vh;
432
- height: 100dvh;
433
- scrollbar-width: none;
434
- }
435
- .drawer-side::-webkit-scrollbar {
436
- display: none;
437
- }
438
- .drawer-side > *:not(.drawer-overlay) {
439
- transition: transform 0.4s cubic-bezier(0, 0, 0.58, 1);
440
- transform: translateX(-100%);
441
- }
442
- [dir="rtl"] .drawer-side > *:not(.drawer-overlay) {
443
- transform: translateX(100%);
444
- }
445
- .drawer-toggle {
446
- position: fixed;
447
- height: 0px;
448
- width: 0px;
449
- appearance: none;
450
- opacity: 0;
451
- }
452
- .drawer-toggle:checked ~ .drawer-side {
453
- pointer-events: auto;
454
- visibility: visible;
455
- }
456
- .drawer-toggle:checked ~ .drawer-side > * {
457
- grid-column-start: 1;
458
- grid-row-start: 1;
459
- }
460
- .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
461
- transform: translateX(0%);
462
- }
463
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
464
- position: sticky;
465
- top: 0px;
466
- place-self: stretch;
467
- }
468
- .drawer-end {
469
- grid-auto-columns: auto max-content;
470
- }
471
- .drawer-end .drawer-toggle ~ .drawer-content {
472
- grid-column-start: 1;
473
- }
474
- .drawer-end .drawer-toggle ~ .drawer-side {
475
- justify-items: end;
476
- }
477
- .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
478
- transform: translateX(100%);
479
- }
480
- [dir="rtl"] .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
481
- transform: translateX(-100%);
482
- }
483
- .drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
484
- transform: translateX(0%);
485
- }
486
- .dropdown {
487
- position: relative;
488
- display: inline-block
489
- }
490
- .dropdown > *:focus {
491
- outline: 2px solid transparent;
492
- outline-offset: 2px
493
- }
494
- .dropdown .dropdown-content {
495
- position: absolute
496
- }
497
- .dropdown:is(:not(details)) .dropdown-content {
498
- visibility: hidden;
499
- opacity: 0
500
- }
501
- .dropdown-end .dropdown-content {
502
- right: 0px
503
- }
504
- .dropdown-left .dropdown-content {
505
- top: 0px;
506
- right: 100%;
507
- bottom: auto
508
- }
509
- .dropdown-right .dropdown-content {
510
- left: 100%;
511
- top: 0px;
512
- bottom: auto
513
- }
514
- .dropdown-bottom .dropdown-content {
515
- bottom: auto;
516
- top: 100%
517
- }
518
- .dropdown-top .dropdown-content {
519
- bottom: 100%;
520
- top: auto
521
- }
522
- .dropdown-end.dropdown-right .dropdown-content {
523
- bottom: 0px;
524
- top: auto
525
- }
526
- .dropdown-end.dropdown-left .dropdown-content {
527
- bottom: 0px;
528
- top: auto
529
- }
530
- .dropdown.dropdown-open .dropdown-content,
531
- .dropdown:not(.dropdown-hover):focus .dropdown-content,
532
- .dropdown:focus-within .dropdown-content {
533
- visibility: visible;
534
- opacity: 1
535
- }
536
- @media (hover: hover) {
537
- .dropdown.dropdown-hover:hover .dropdown-content {
538
- visibility: visible;
539
- opacity: 1
540
- }
541
- }
542
- .dropdown:is(details) summary::-webkit-details-marker {
543
- display: none
544
- }
545
- .file-input {
546
- height: 3rem;
547
- flex-shrink: 1;
548
- padding-right: 1rem;
549
- font-size: 0.875rem;
550
- line-height: 1.25rem;
551
- line-height: 2
552
- }
553
- .file-input::file-selector-button {
554
- margin-right: 1rem;
555
- display: inline-flex;
556
- height: 2.875rem;
557
- min-height: 2.875rem;
558
- flex-shrink: 0;
559
- cursor: pointer;
560
- user-select: none;
561
- flex-wrap: wrap;
562
- align-items: center;
563
- justify-content: center;
564
- padding-left: 1rem;
565
- padding-right: 1rem;
566
- text-align: center;
567
- font-size: 0.875rem;
568
- line-height: 1.25rem;
569
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
570
- transition-duration: 200ms;
571
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
572
- line-height: 1em
573
- }
574
- .footer {
575
- display: grid;
576
- width: 100%;
577
- grid-auto-flow: row;
578
- place-items: start;
579
- }
580
- .footer > * {
581
- display: grid;
582
- place-items: start;
583
- }
584
- .footer-center {
585
- place-items: center;
586
- text-align: center;
587
- }
588
- .footer-center > * {
589
- place-items: center;
590
- }
591
- @media (min-width: 48rem) {
592
- .footer {
593
- grid-auto-flow: column;
594
- }
595
- .footer-center {
596
- grid-auto-flow: row dense;
597
- }
598
- }
599
- .form-control {
600
- display: flex;
601
- flex-direction: column
602
- }
603
- .label {
604
- display: flex;
605
- user-select: none;
606
- align-items: center;
607
- justify-content: space-between
608
- }
609
- .hero {
610
- display: grid;
611
- width: 100%;
612
- place-items: center;
613
- background-size: cover;
614
- background-position: center
615
- }
616
- .hero > * {
617
- grid-column-start: 1;
618
- grid-row-start: 1
619
- }
620
- .hero-overlay {
621
- grid-column-start: 1;
622
- grid-row-start: 1;
623
- height: 100%;
624
- width: 100%
625
- }
626
- .hero-content {
627
- z-index: 0;
628
- display: flex;
629
- align-items: center;
630
- justify-content: center
631
- }
632
- .indicator {
633
- position: relative;
634
- display: inline-flex;
635
- width: max-content;
636
- }
637
- .indicator :where(.indicator-item) {
638
- z-index: 1;
639
- position: absolute;
640
- 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));
641
- white-space: nowrap;
642
- }
643
- .input {
644
- flex-shrink: 1;
645
- height: 3rem;
646
- padding-left: 1rem;
647
- padding-right: 1rem;
648
- font-size: 0.875rem;
649
- line-height: 1.25rem;
650
- line-height: 2;
651
- }
652
- .input-group {
653
- display: flex;
654
- width: 100%;
655
- align-items: stretch;
656
- }
657
- .input-group > .input {
658
- isolation: isolate;
659
- }
660
- .input-group > *,
661
- .input-group > .input,
662
- .input-group > .textarea,
663
- .input-group > .select {
664
- border-radius: 0px;
665
- }
666
- .input-group-md {
667
- font-size: 0.875rem;
668
- line-height: 1.25rem;
669
- line-height: 2;
670
- }
671
- .input-group-lg {
672
- font-size: 1.125rem;
673
- line-height: 1.75rem;
674
- line-height: 2;
675
- }
676
- .input-group-sm {
677
- font-size: 0.875rem;
678
- line-height: 2rem;
679
- }
680
- .input-group-xs {
681
- font-size: 0.75rem;
682
- line-height: 1rem;
683
- line-height: 1.625;
684
- }
685
- .input-group :where(span) {
686
- display: flex;
687
- align-items: center;
688
- --tw-bg-opacity: 1;
689
- background-color: hsl(var(--b3) / var(--tw-bg-opacity));
690
- padding-left: 1rem;
691
- padding-right: 1rem;
692
- }
693
- .input-group > :first-child {
694
- border-top-left-radius: var(--rounded-btn, 0.5rem);
695
- border-top-right-radius: 0;
696
- border-bottom-left-radius: var(--rounded-btn, 0.5rem);
697
- border-bottom-right-radius: 0;
698
- }
699
- .input-group > :last-child {
700
- border-top-left-radius: 0;
701
- border-top-right-radius: var(--rounded-btn, 0.5rem);
702
- border-bottom-left-radius: 0;
703
- border-bottom-right-radius: var(--rounded-btn, 0.5rem);
704
- }
705
- .input-group-vertical {
706
- flex-direction: column;
707
- }
708
- .input-group-vertical :first-child {
709
- border-top-left-radius: var(--rounded-btn, 0.5rem);
710
- border-top-right-radius: var(--rounded-btn, 0.5rem);
711
- border-bottom-left-radius: 0;
712
- border-bottom-right-radius: 0;
713
- }
714
- .input-group-vertical :last-child {
715
- border-top-left-radius: 0;
716
- border-top-right-radius: 0;
717
- border-bottom-left-radius: var(--rounded-btn, 0.5rem);
718
- border-bottom-right-radius: var(--rounded-btn, 0.5rem);
719
- }
720
- .join {
721
- display: inline-flex;
722
- align-items: stretch;
723
- }
724
- .join * {
725
- border-radius: inherit;
726
- }
727
- .join :where(.join-item) {
728
- border-top-right-radius: 0;
729
- border-bottom-right-radius: 0;
730
- border-bottom-left-radius: 0;
731
- border-top-left-radius: 0;
732
- }
733
- .join .join-item:not(:first-child):not(:last-child),
734
- .join *:not(:first-child):not(:last-child) .join-item {
735
- border-top-right-radius: 0;
736
- border-bottom-right-radius: 0;
737
- border-bottom-left-radius: 0;
738
- border-top-left-radius: 0;
739
- }
740
- .join .join-item:first-child:not(:last-child),
741
- .join *:first-child:not(:last-child) .join-item {
742
- border-top-right-radius: 0;
743
- border-bottom-right-radius: 0;
744
- }
745
- .join :where(.join-item:first-child:not(:last-child)),
746
- .join :where(*:first-child:not(:last-child) .join-item) {
747
- border-bottom-left-radius: inherit;
748
- border-top-left-radius: inherit;
749
- }
750
- .join .join-item:last-child:not(:first-child),
751
- .join *:last-child:not(:first-child) .join-item {
752
- border-bottom-left-radius: 0;
753
- border-top-left-radius: 0;
754
- }
755
- .join :where(.join-item:last-child:not(:first-child)),
756
- .join :where(*:last-child:not(:first-child) .join-item) {
757
- border-top-right-radius: inherit;
758
- border-bottom-right-radius: inherit;
759
- }
760
- .kbd {
761
- display: inline-flex;
762
- align-items: center;
763
- justify-content: center
764
- }
765
- .link {
766
- cursor: pointer;
767
- text-decoration-line: underline
768
- }
769
- .link-hover {
770
- text-decoration-line: none
771
- }
772
- @media (hover:hover) {
773
- .link-hover:hover {
774
- text-decoration-line: underline
775
- }
776
- }
777
- .mask {
778
- mask-size: contain;
779
- mask-repeat: no-repeat;
780
- mask-position: center;
781
- }
782
- .mask-half-1 {
783
- mask-size: 200%;
784
- mask-position: left;
785
- }
786
- .mask-half-2 {
787
- mask-size: 200%;
788
- mask-position: right;
789
- }
790
- .menu {
791
- display: flex;
792
- flex-direction: column;
793
- flex-wrap: wrap;
794
- font-size: 0.875rem;
795
- line-height: 1.25rem
796
- }
797
- .menu :where(li ul) {
798
- position: relative;
799
- white-space: nowrap
800
- }
801
- .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
802
- .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
803
- display: grid;
804
- grid-auto-flow: column;
805
- align-content: flex-start;
806
- align-items: center;
807
- gap: 0.5rem;
808
- grid-auto-columns: max-content auto max-content;
809
- user-select: none
810
- }
811
- .menu li.disabled {
812
- cursor: not-allowed;
813
- user-select: none
814
- }
815
- .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
816
- display: none
817
- }
818
- :where(.menu li) {
819
- position: relative;
820
- display: flex;
821
- flex-shrink: 0;
822
- flex-direction: column;
823
- flex-wrap: wrap;
824
- align-items: stretch
825
- }
826
- :where(.menu li) .badge {
827
- justify-self: end
828
- }
829
- .mockup-code {
830
- position: relative;
831
- overflow: hidden;
832
- overflow-x: auto;
833
- }
834
- .mockup-code pre[data-prefix]:before {
835
- content: attr(data-prefix);
836
- display: inline-block;
837
- text-align: right;
838
- }
839
- .mockup-window {
840
- position: relative;
841
- overflow: hidden;
842
- overflow-x: auto;
843
- }
844
- .mockup-window pre[data-prefix]:before {
845
- content: attr(data-prefix);
846
- display: inline-block;
847
- text-align: right;
848
- }
849
- .modal {
850
- /* @apply pointer-events-none invisible fixed inset-0 flex justify-center opacity-0; */
851
- pointer-events: none;
852
- position: fixed;
853
- inset: 0px;
854
- margin: 0px;
855
- display: grid;
856
- height: 100%;
857
- max-height: none;
858
- width: 100%;
859
- max-width: none;
860
- justify-items: center;
861
- padding: 0px;
862
- opacity: 0;
863
- overscroll-behavior: contain;
864
- z-index: 999;
865
- }
866
- .modal-scroll {
867
- overscroll-behavior: auto;
868
- }
869
- :where(.modal) {
870
- align-items: center;
871
- }
872
- .modal-box {
873
- max-height: calc(100vh - 5em);
874
- }
875
- .modal-open,
876
- .modal:target,
877
- .modal-toggle:checked + .modal,
878
- .modal[open] {
879
- pointer-events: auto;
880
- visibility: visible;
881
- opacity: 1;
882
- }
883
- .modal-action {
884
- display: flex;
885
- }
886
- .modal-toggle {
887
- position: fixed;
888
- height: 0px;
889
- width: 0px;
890
- appearance: none;
891
- opacity: 0;
892
- }
893
- :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
894
- overflow: hidden;
895
- }
896
- .navbar {
897
- display: flex;
898
- align-items: center;
899
- }
900
- :where(.navbar > *) {
901
- display: inline-flex;
902
- align-items: center;
903
- }
904
- .navbar-start {
905
- width: 50%;
906
- justify-content: flex-start;
907
- }
908
- .navbar-center {
909
- flex-shrink: 0;
910
- }
911
- .navbar-end {
912
- width: 50%;
913
- justify-content: flex-end;
914
- }
915
- .progress {
916
- position: relative;
917
- width: 100%;
918
- appearance: none;
919
- overflow: hidden
920
- }
921
- .radial-progress {
922
- position: relative;
923
- display: inline-grid;
924
- height: var(--size);
925
- width: var(--size);
926
- place-content: center;
927
- border-radius: 9999px;
928
- background-color: transparent;
929
- vertical-align: middle;
930
- box-sizing: content-box;
931
- }
932
- .radial-progress::-moz-progress-bar {
933
- appearance: none;
934
- background-color: transparent;
935
- }
936
- .radial-progress::-webkit-progress-value {
937
- appearance: none;
938
- background-color: transparent;
939
- }
940
- .radial-progress::-webkit-progress-bar {
941
- appearance: none;
942
- background-color: transparent;
943
- }
944
- .radial-progress:before,
945
- .radial-progress:after {
946
- position: absolute;
947
- border-radius: 9999px;
948
- content: "";
949
- }
950
- .radial-progress:before {
951
- inset: 0px;
952
- background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness)
953
- var(--thickness) no-repeat,
954
- conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
955
- -webkit-mask: radial-gradient(
956
- farthest-side,
957
- #0000 calc(99% - var(--thickness)),
958
- #000 calc(100% - var(--thickness))
959
- );
960
- mask: radial-gradient(
961
- farthest-side,
962
- #0000 calc(99% - var(--thickness)),
963
- #000 calc(100% - var(--thickness))
964
- );
965
- }
966
- .radial-progress:after {
967
- inset: calc(50% - var(--thickness) / 2);
968
- transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
969
- }
970
- .radio {
971
- flex-shrink: 0
972
- }
973
- .range {
974
- height: 1.5rem;
975
- width: 100%;
976
- cursor: pointer;
977
- }
978
- .range:focus {
979
- outline: none;
980
- }
981
- .rating {
982
- position: relative;
983
- display: inline-flex
984
- }
985
- .rating :where(input) {
986
- cursor: pointer;
987
- border-radius: 0px
988
- }
989
- .select {
990
- display: inline-flex;
991
- flex-shrink: 0;
992
- cursor: pointer;
993
- user-select: none;
994
- appearance: none;
995
- height: 3rem;
996
- padding-left: 1rem;
997
- padding-right: 2.5rem;
998
- font-size: 0.875rem;
999
- line-height: 1.25rem;
1000
- line-height: 2;
1001
- min-height: 3rem
1002
- }
1003
-
1004
- /* disabled */
1005
- /* &-disabled,
1006
- &[disabled] {
1007
- @apply pointer-events-none;
1008
- } */
1009
- /* multiple */
1010
- .select[multiple] {
1011
- height: auto
1012
- }
1013
- .stack {
1014
- display: inline-grid;
1015
- }
1016
- .stack > * {
1017
- grid-column-start: 1;
1018
- grid-row-start: 1;
1019
- transform: translateY(10%) scale(0.9);
1020
- z-index: 1;
1021
- }
1022
- .stack > *:nth-child(2) {
1023
- transform: translateY(5%) scale(0.95);
1024
- z-index: 2;
1025
- }
1026
- .stack > *:nth-child(1) {
1027
- transform: translateY(0) scale(1);
1028
- z-index: 3;
1029
- }
1030
- .stats {
1031
- display: inline-grid
1032
- }
1033
- :where(.stats) {
1034
- grid-auto-flow: column
1035
- }
1036
- .stat {
1037
- display: inline-grid;
1038
- width: 100%;
1039
- grid-template-columns: repeat(1, 1fr)
1040
- }
1041
- .stat-figure {
1042
- grid-column-start: 2;
1043
- grid-row: span 3 / span 3;
1044
- grid-row-start: 1;
1045
- place-self: center;
1046
- justify-self: end
1047
- }
1048
- .stat-title {
1049
- grid-column-start: 1;
1050
- white-space: nowrap
1051
- }
1052
- .stat-value {
1053
- grid-column-start: 1;
1054
- white-space: nowrap
1055
- }
1056
- .stat-desc {
1057
- grid-column-start: 1;
1058
- white-space: nowrap
1059
- }
1060
- .stat-actions {
1061
- grid-column-start: 1;
1062
- white-space: nowrap
1063
- }
1064
- /* .stats.grid-flow-row {
1065
- @apply auto-rows-fr;
1066
- } */
1067
- .steps {
1068
- display: inline-grid;
1069
- grid-auto-flow: column;
1070
- overflow: hidden;
1071
- overflow-x: auto;
1072
- counter-reset: step;
1073
- grid-auto-columns: 1fr
1074
- }
1075
- .steps .step {
1076
- display: grid;
1077
- grid-template-columns: repeat(1, minmax(0, 1fr));
1078
- grid-template-rows: repeat(2, minmax(0, 1fr));
1079
- place-items: center;
1080
- text-align: center
1081
- }
1082
- .swap {
1083
-
1084
- position: relative;
1085
-
1086
- display: inline-grid;
1087
-
1088
- user-select: none;
1089
-
1090
- place-content: center
1091
- }
1092
-
1093
- .swap > * {
1094
-
1095
- grid-column-start: 1;
1096
-
1097
- grid-row-start: 1
1098
- }
1099
-
1100
- .swap input {
1101
-
1102
- appearance: none
1103
- }
1104
-
1105
- .swap .swap-on,
1106
- .swap .swap-indeterminate,
1107
- .swap input:indeterminate ~ .swap-on {
1108
-
1109
- opacity: 0
1110
- }
1111
-
1112
- .swap input:checked ~ .swap-off,
1113
- .swap.swap-active .swap-off,
1114
- .swap input:indeterminate ~ .swap-off {
1115
-
1116
- opacity: 0
1117
- }
1118
-
1119
- .swap input:checked ~ .swap-on,
1120
- .swap-active .swap-on,
1121
- .swap input:indeterminate ~ .swap-indeterminate {
1122
-
1123
- opacity: 1
1124
- }
1125
- .tabs {
1126
- display: flex;
1127
- flex-wrap: wrap;
1128
- align-items: flex-end
1129
- }
1130
- .tab {
1131
- position: relative;
1132
- display: inline-flex;
1133
- cursor: pointer;
1134
- user-select: none;
1135
- flex-wrap: wrap;
1136
- align-items: center;
1137
- justify-content: center;
1138
- text-align: center;
1139
- height: 2rem;
1140
- font-size: 0.875rem;
1141
- line-height: 1.25rem;
1142
- line-height: 2;
1143
- --tab-padding: 1rem
1144
- }
1145
- .table {
1146
- position: relative;
1147
- width: 100%
1148
- }
1149
- .table :where(.table-pin-rows thead tr) {
1150
- position: sticky;
1151
- top: 0px;
1152
- z-index: 1;
1153
- --tw-bg-opacity: 1;
1154
- background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1155
- }
1156
- .table :where(.table-pin-rows tfoot tr) {
1157
- position: sticky;
1158
- bottom: 0px;
1159
- z-index: 1;
1160
- --tw-bg-opacity: 1;
1161
- background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1162
- }
1163
- .table :where(.table-pin-cols tr th) {
1164
- position: sticky;
1165
- left: 0px;
1166
- right: 0px;
1167
- --tw-bg-opacity: 1;
1168
- background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1169
- }
1170
- .textarea {
1171
- flex-shrink: 1;
1172
- min-height: 3rem;
1173
- padding-top: 0.5rem;
1174
- padding-bottom: 0.5rem;
1175
- padding-left: 1rem;
1176
- padding-right: 1rem;
1177
- font-size: 0.875rem;
1178
- line-height: 1.25rem;
1179
- line-height: 2
1180
- }
1181
- .toast {
1182
- position: fixed;
1183
- display: flex;
1184
- min-width: fit-content;
1185
- flex-direction: column;
1186
- white-space: nowrap
1187
- }
1188
- .toggle {
1189
- flex-shrink: 0
1190
- }