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/styled.css DELETED
@@ -1,4741 +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
- }
1191
- .alert {
1192
- border-width: 1px;
1193
- --tw-border-opacity: 1;
1194
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
1195
- padding: 1rem;
1196
- --tw-text-opacity: 1;
1197
- color: hsl(var(--bc) / var(--tw-text-opacity));
1198
- border-radius: var(--rounded-box, 1rem);
1199
- --alert-bg: hsl(var(--b2));
1200
- --alert-bg-mix: hsl(var(--b1));
1201
- background-color: var(--alert-bg)
1202
- }
1203
- /* @supports (background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix))) {
1204
- background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix));
1205
- } */
1206
- .alert-info {
1207
- border-color: hsl(var(--in) / 0.2);
1208
- --tw-text-opacity: 1;
1209
- color: hsl(var(--inc) / var(--tw-text-opacity));
1210
- --alert-bg: hsl(var(--in));
1211
- --alert-bg-mix: hsl(var(--b1))
1212
- }
1213
- .alert-success {
1214
- border-color: hsl(var(--su) / 0.2);
1215
- --tw-text-opacity: 1;
1216
- color: hsl(var(--suc) / var(--tw-text-opacity));
1217
- --alert-bg: hsl(var(--su));
1218
- --alert-bg-mix: hsl(var(--b1))
1219
- }
1220
- .alert-warning {
1221
- border-color: hsl(var(--wa) / 0.2);
1222
- --tw-text-opacity: 1;
1223
- color: hsl(var(--wac) / var(--tw-text-opacity));
1224
- --alert-bg: hsl(var(--wa));
1225
- --alert-bg-mix: hsl(var(--b1))
1226
- }
1227
- .alert-error {
1228
- border-color: hsl(var(--er) / 0.2);
1229
- --tw-text-opacity: 1;
1230
- color: hsl(var(--erc) / var(--tw-text-opacity));
1231
- --alert-bg: hsl(var(--er));
1232
- --alert-bg-mix: hsl(var(--b1))
1233
- }
1234
- .avatar-group {
1235
- display: flex;
1236
- overflow: hidden
1237
- }
1238
- .avatar-group :where(.avatar) {
1239
- overflow: hidden;
1240
- border-radius: 9999px;
1241
- border-width: 4px;
1242
- --tw-border-opacity: 1;
1243
- border-color: hsl(var(--b1) / var(--tw-border-opacity))
1244
- }
1245
- .badge {
1246
- border-width: 1px;
1247
- --tw-border-opacity: 1;
1248
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
1249
- --tw-bg-opacity: 1;
1250
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1251
- --tw-text-opacity: 1;
1252
- color: hsl(var(--bc) / var(--tw-text-opacity));
1253
- border-radius: var(--rounded-badge, 1.9rem)
1254
- }
1255
- .badge-neutral {
1256
- --tw-border-opacity: 1;
1257
- border-color: hsl(var(--n) / var(--tw-border-opacity));
1258
- --tw-bg-opacity: 1;
1259
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1260
- --tw-text-opacity: 1;
1261
- color: hsl(var(--nc) / var(--tw-text-opacity))
1262
- }
1263
- .badge-primary {
1264
- --tw-border-opacity: 1;
1265
- border-color: hsl(var(--p) / var(--tw-border-opacity));
1266
- --tw-bg-opacity: 1;
1267
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
1268
- --tw-text-opacity: 1;
1269
- color: hsl(var(--pc) / var(--tw-text-opacity))
1270
- }
1271
- .badge-secondary {
1272
- --tw-border-opacity: 1;
1273
- border-color: hsl(var(--s) / var(--tw-border-opacity));
1274
- --tw-bg-opacity: 1;
1275
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
1276
- --tw-text-opacity: 1;
1277
- color: hsl(var(--sc) / var(--tw-text-opacity))
1278
- }
1279
- .badge-accent {
1280
- --tw-border-opacity: 1;
1281
- border-color: hsl(var(--a) / var(--tw-border-opacity));
1282
- --tw-bg-opacity: 1;
1283
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
1284
- --tw-text-opacity: 1;
1285
- color: hsl(var(--ac) / var(--tw-text-opacity))
1286
- }
1287
- .badge-info {
1288
- border-color: transparent;
1289
- --tw-bg-opacity: 1;
1290
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1291
- --tw-text-opacity: 1;
1292
- color: hsl(var(--inc) / var(--tw-text-opacity))
1293
- }
1294
- .badge-success {
1295
- border-color: transparent;
1296
- --tw-bg-opacity: 1;
1297
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1298
- --tw-text-opacity: 1;
1299
- color: hsl(var(--suc) / var(--tw-text-opacity))
1300
- }
1301
- .badge-warning {
1302
- border-color: transparent;
1303
- --tw-bg-opacity: 1;
1304
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1305
- --tw-text-opacity: 1;
1306
- color: hsl(var(--wac) / var(--tw-text-opacity))
1307
- }
1308
- .badge-error {
1309
- border-color: transparent;
1310
- --tw-bg-opacity: 1;
1311
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1312
- --tw-text-opacity: 1;
1313
- color: hsl(var(--erc) / var(--tw-text-opacity))
1314
- }
1315
- .badge-ghost {
1316
- --tw-border-opacity: 1;
1317
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
1318
- --tw-bg-opacity: 1;
1319
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
1320
- --tw-text-opacity: 1;
1321
- color: hsl(var(--bc) / var(--tw-text-opacity))
1322
- }
1323
- .badge-outline {
1324
- border-color: currentColor;
1325
- --tw-border-opacity: 0.5;
1326
- background-color: transparent;
1327
- color: currentColor
1328
- }
1329
- .badge-outline.badge-neutral {
1330
- --tw-text-opacity: 1;
1331
- color: hsl(var(--n) / var(--tw-text-opacity))
1332
- }
1333
- .badge-outline.badge-primary {
1334
- --tw-text-opacity: 1;
1335
- color: hsl(var(--p) / var(--tw-text-opacity))
1336
- }
1337
- .badge-outline.badge-secondary {
1338
- --tw-text-opacity: 1;
1339
- color: hsl(var(--s) / var(--tw-text-opacity))
1340
- }
1341
- .badge-outline.badge-accent {
1342
- --tw-text-opacity: 1;
1343
- color: hsl(var(--a) / var(--tw-text-opacity))
1344
- }
1345
- .badge-outline.badge-info {
1346
- --tw-text-opacity: 1;
1347
- color: hsl(var(--in) / var(--tw-text-opacity))
1348
- }
1349
- .badge-outline.badge-success {
1350
- --tw-text-opacity: 1;
1351
- color: hsl(var(--su) / var(--tw-text-opacity))
1352
- }
1353
- .badge-outline.badge-warning {
1354
- --tw-text-opacity: 1;
1355
- color: hsl(var(--wa) / var(--tw-text-opacity))
1356
- }
1357
- .badge-outline.badge-error {
1358
- --tw-text-opacity: 1;
1359
- color: hsl(var(--er) / var(--tw-text-opacity))
1360
- }
1361
- .btm-nav {
1362
- height: 4rem;
1363
- --tw-bg-opacity: 1;
1364
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1365
- color: currentColor
1366
- }
1367
- .btm-nav > * {
1368
- border-color: currentColor
1369
- }
1370
- .btm-nav > *:not(.active) {
1371
- padding-top: 0.125rem
1372
- }
1373
- /* active */
1374
- .btm-nav > *:where(.active) {
1375
- border-top-width: 2px;
1376
- --tw-bg-opacity: 1;
1377
- background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1378
- }
1379
- /* disabled */
1380
- .btm-nav > *.disabled,
1381
- .btm-nav > *[disabled] {
1382
- pointer-events: none;
1383
- --tw-border-opacity: 0;
1384
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1385
- --tw-bg-opacity: 0.1;
1386
- color: hsl(var(--bc) / var(--tw-text-opacity));
1387
- --tw-text-opacity: 0.2
1388
- }
1389
- @media (hover: hover) {
1390
- .btm-nav > *.disabled:hover,
1391
- .btm-nav > *[disabled]:hover {
1392
- pointer-events: none;
1393
- --tw-border-opacity: 0;
1394
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1395
- --tw-bg-opacity: 0.1;
1396
- color: hsl(var(--bc) / var(--tw-text-opacity));
1397
- --tw-text-opacity: 0.2
1398
- }
1399
- }
1400
- .btm-nav > * .label {
1401
- font-size: 1rem;
1402
- line-height: 1.5rem
1403
- }
1404
- .breadcrumbs {
1405
- padding-top: 0.5rem;
1406
- padding-bottom: 0.5rem;
1407
- }
1408
- .breadcrumbs > ul > li > a:focus, .breadcrumbs > ol > li > a:focus {
1409
- outline: 2px solid transparent;
1410
- outline-offset: 2px;
1411
- }
1412
- .breadcrumbs > ul > li > a:focus-visible, .breadcrumbs > ol > li > a:focus-visible {
1413
- outline: 2px solid currentColor;
1414
- outline-offset: 2px;
1415
- }
1416
- .breadcrumbs > ul > li + *:before, .breadcrumbs > ol > li + *:before {
1417
- content: "";
1418
- margin-left: 0.5rem;
1419
- margin-right: 0.75rem;
1420
- display: block;
1421
- height: 0.375rem;
1422
- width: 0.375rem;
1423
- --tw-rotate: 45deg;
1424
- 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));
1425
- opacity: 0.4;
1426
- border-top: 1px solid;
1427
- border-right: 1px solid;
1428
- background-color: transparent;
1429
- }
1430
-
1431
- [dir="rtl"] .breadcrumbs > ul > li + *:before,
1432
- [dir="rtl"] .breadcrumbs > ol > li + *:before {
1433
- --tw-rotate: -135deg;
1434
- }
1435
- .btn {
1436
- gap: 0.5rem;
1437
- font-weight: 600;
1438
- text-decoration-line: none;
1439
- border-width: var(--border-btn, 1px);
1440
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
1441
- text-transform: var(--btn-text-case, uppercase);
1442
- }
1443
- .btn:active:hover,
1444
- .btn:active:focus {
1445
- animation: button-pop 0s ease-out;
1446
- transform: scale(var(--btn-focus-scale, 0.97));
1447
- }
1448
- /* default btn */
1449
- .btn {
1450
- --tw-border-opacity: 1;
1451
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
1452
- --tw-bg-opacity: 1;
1453
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
1454
- --tw-text-opacity: 1;
1455
- color: hsl(var(--bc) / var(--tw-text-opacity));
1456
- text-decoration-line: none;
1457
- outline-color: hsl(var(--bc) / 1);
1458
- }
1459
- @media (hover: hover) {
1460
- .btn:hover {
1461
- --tw-border-opacity: 1;
1462
- border-color: hsl(var(--b3) / var(--tw-border-opacity));
1463
- --tw-bg-opacity: 1;
1464
- background-color: hsl(var(--b3) / var(--tw-bg-opacity));
1465
- }
1466
- }
1467
- .btn-active {
1468
- --tw-border-opacity: 1;
1469
- border-color: hsl(var(--b3) / var(--tw-border-opacity));
1470
- --tw-bg-opacity: 1;
1471
- background-color: hsl(var(--b3) / var(--tw-bg-opacity));
1472
- }
1473
- .btn:focus-visible {
1474
- outline-style: solid;
1475
- outline-width: 2px;
1476
- outline-offset: 2px;
1477
- }
1478
- /* brand colors */
1479
- .btn-primary {
1480
- --tw-border-opacity: 1;
1481
- border-color: hsl(var(--p) / var(--tw-border-opacity));
1482
- --tw-bg-opacity: 1;
1483
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
1484
- --tw-text-opacity: 1;
1485
- color: hsl(var(--pc) / var(--tw-text-opacity));
1486
- outline-color: hsl(var(--p) / 1);
1487
- }
1488
- @media (hover: hover) {
1489
- .btn-primary:hover {
1490
- --tw-border-opacity: 1;
1491
- border-color: hsl(var(--pf) / var(--tw-border-opacity));
1492
- --tw-bg-opacity: 1;
1493
- background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1494
- }
1495
- }
1496
- .btn-primary.btn-active {
1497
- --tw-border-opacity: 1;
1498
- border-color: hsl(var(--pf) / var(--tw-border-opacity));
1499
- --tw-bg-opacity: 1;
1500
- background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1501
- }
1502
- .btn-secondary {
1503
- --tw-border-opacity: 1;
1504
- border-color: hsl(var(--s) / var(--tw-border-opacity));
1505
- --tw-bg-opacity: 1;
1506
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
1507
- --tw-text-opacity: 1;
1508
- color: hsl(var(--sc) / var(--tw-text-opacity));
1509
- outline-color: hsl(var(--s) / 1);
1510
- }
1511
- @media (hover: hover) {
1512
- .btn-secondary:hover {
1513
- --tw-border-opacity: 1;
1514
- border-color: hsl(var(--sf) / var(--tw-border-opacity));
1515
- --tw-bg-opacity: 1;
1516
- background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1517
- }
1518
- }
1519
- .btn-secondary.btn-active {
1520
- --tw-border-opacity: 1;
1521
- border-color: hsl(var(--sf) / var(--tw-border-opacity));
1522
- --tw-bg-opacity: 1;
1523
- background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1524
- }
1525
- .btn-accent {
1526
- --tw-border-opacity: 1;
1527
- border-color: hsl(var(--a) / var(--tw-border-opacity));
1528
- --tw-bg-opacity: 1;
1529
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
1530
- --tw-text-opacity: 1;
1531
- color: hsl(var(--ac) / var(--tw-text-opacity));
1532
- outline-color: hsl(var(--a) / 1);
1533
- }
1534
- @media (hover: hover) {
1535
- .btn-accent:hover {
1536
- --tw-border-opacity: 1;
1537
- border-color: hsl(var(--af) / var(--tw-border-opacity));
1538
- --tw-bg-opacity: 1;
1539
- background-color: hsl(var(--af) / var(--tw-bg-opacity));
1540
- }
1541
- }
1542
- .btn-accent.btn-active {
1543
- --tw-border-opacity: 1;
1544
- border-color: hsl(var(--af) / var(--tw-border-opacity));
1545
- --tw-bg-opacity: 1;
1546
- background-color: hsl(var(--af) / var(--tw-bg-opacity));
1547
- }
1548
- .btn-neutral {
1549
- --tw-border-opacity: 1;
1550
- border-color: hsl(var(--n) / var(--tw-border-opacity));
1551
- --tw-bg-opacity: 1;
1552
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1553
- --tw-text-opacity: 1;
1554
- color: hsl(var(--nc) / var(--tw-text-opacity));
1555
- outline-color: hsl(var(--n) / 1);
1556
- }
1557
- @media (hover: hover) {
1558
- .btn-neutral:hover {
1559
- --tw-border-opacity: 1;
1560
- border-color: hsl(var(--nf) / var(--tw-border-opacity));
1561
- --tw-bg-opacity: 1;
1562
- background-color: hsl(var(--nf) / var(--tw-bg-opacity));
1563
- }
1564
- }
1565
- .btn-neutral.btn-active {
1566
- --tw-border-opacity: 1;
1567
- border-color: hsl(var(--nf) / var(--tw-border-opacity));
1568
- --tw-bg-opacity: 1;
1569
- background-color: hsl(var(--nf) / var(--tw-bg-opacity));
1570
- }
1571
- /* btn with state colors */
1572
- .btn-info {
1573
- --tw-border-opacity: 1;
1574
- border-color: hsl(var(--in) / var(--tw-border-opacity));
1575
- --tw-bg-opacity: 1;
1576
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1577
- --tw-text-opacity: 1;
1578
- color: hsl(var(--inc) / var(--tw-text-opacity));
1579
- outline-color: hsl(var(--in) / 1);
1580
- }
1581
- @media (hover: hover) {
1582
- .btn-info:hover {
1583
- --tw-border-opacity: 1;
1584
- border-color: hsl(var(--in) / var(--tw-border-opacity));
1585
- --tw-bg-opacity: 1;
1586
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1587
- }
1588
- }
1589
- .btn-info.btn-active {
1590
- --tw-border-opacity: 1;
1591
- border-color: hsl(var(--in) / var(--tw-border-opacity));
1592
- --tw-bg-opacity: 1;
1593
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1594
- }
1595
- .btn-success {
1596
- --tw-border-opacity: 1;
1597
- border-color: hsl(var(--su) / var(--tw-border-opacity));
1598
- --tw-bg-opacity: 1;
1599
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1600
- --tw-text-opacity: 1;
1601
- color: hsl(var(--suc) / var(--tw-text-opacity));
1602
- outline-color: hsl(var(--su) / 1);
1603
- }
1604
- @media (hover: hover) {
1605
- .btn-success:hover {
1606
- --tw-border-opacity: 1;
1607
- border-color: hsl(var(--su) / var(--tw-border-opacity));
1608
- --tw-bg-opacity: 1;
1609
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1610
- }
1611
- }
1612
- .btn-success.btn-active {
1613
- --tw-border-opacity: 1;
1614
- border-color: hsl(var(--su) / var(--tw-border-opacity));
1615
- --tw-bg-opacity: 1;
1616
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1617
- }
1618
- .btn-warning {
1619
- --tw-border-opacity: 1;
1620
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
1621
- --tw-bg-opacity: 1;
1622
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1623
- --tw-text-opacity: 1;
1624
- color: hsl(var(--wac) / var(--tw-text-opacity));
1625
- outline-color: hsl(var(--wa) / 1);
1626
- }
1627
- @media (hover: hover) {
1628
- .btn-warning:hover {
1629
- --tw-border-opacity: 1;
1630
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
1631
- --tw-bg-opacity: 1;
1632
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1633
- }
1634
- }
1635
- .btn-warning.btn-active {
1636
- --tw-border-opacity: 1;
1637
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
1638
- --tw-bg-opacity: 1;
1639
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1640
- }
1641
- .btn-error {
1642
- --tw-border-opacity: 1;
1643
- border-color: hsl(var(--er) / var(--tw-border-opacity));
1644
- --tw-bg-opacity: 1;
1645
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1646
- --tw-text-opacity: 1;
1647
- color: hsl(var(--erc) / var(--tw-text-opacity));
1648
- outline-color: hsl(var(--er) / 1);
1649
- }
1650
- @media (hover: hover) {
1651
- .btn-error:hover {
1652
- --tw-border-opacity: 1;
1653
- border-color: hsl(var(--er) / var(--tw-border-opacity));
1654
- --tw-bg-opacity: 1;
1655
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1656
- }
1657
- }
1658
- .btn-error.btn-active {
1659
- --tw-border-opacity: 1;
1660
- border-color: hsl(var(--er) / var(--tw-border-opacity));
1661
- --tw-bg-opacity: 1;
1662
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1663
- }
1664
- /* glass */
1665
- .btn.glass {
1666
- --tw-shadow: 0 0 #0000;
1667
- --tw-shadow-colored: 0 0 #0000;
1668
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1669
- outline-color: currentColor;
1670
- }
1671
- @media (hover: hover) {
1672
- .btn.glass:hover {
1673
- --glass-opacity: 25%;
1674
- --glass-border-opacity: 15%;
1675
- }
1676
- }
1677
- .btn.glass.btn-active {
1678
- --glass-opacity: 25%;
1679
- --glass-border-opacity: 15%;
1680
- }
1681
- /* btn variants */
1682
- .btn-ghost {
1683
- border-width: 1px;
1684
- border-color: transparent;
1685
- background-color: transparent;
1686
- color: currentColor;
1687
- --tw-shadow: 0 0 #0000;
1688
- --tw-shadow-colored: 0 0 #0000;
1689
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1690
- outline-color: currentColor;
1691
- }
1692
- @media (hover: hover) {
1693
- .btn-ghost:hover {
1694
- --tw-border-opacity: 0;
1695
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1696
- --tw-bg-opacity: 0.2;
1697
- }
1698
- }
1699
- .btn-ghost.btn-active {
1700
- --tw-border-opacity: 0;
1701
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1702
- --tw-bg-opacity: 0.2;
1703
- }
1704
- .btn-link {
1705
- border-color: transparent;
1706
- background-color: transparent;
1707
- --tw-text-opacity: 1;
1708
- color: hsl(var(--p) / var(--tw-text-opacity));
1709
- text-decoration-line: underline;
1710
- --tw-shadow: 0 0 #0000;
1711
- --tw-shadow-colored: 0 0 #0000;
1712
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1713
- outline-color: currentColor;
1714
- }
1715
- @media (hover: hover) {
1716
- .btn-link:hover {
1717
- border-color: transparent;
1718
- background-color: transparent;
1719
- text-decoration-line: underline;
1720
- }
1721
- }
1722
- .btn-link.btn-active {
1723
- border-color: transparent;
1724
- background-color: transparent;
1725
- text-decoration-line: underline;
1726
- }
1727
- /* outline */
1728
- .btn-outline {
1729
- border-color: currentColor;
1730
- background-color: transparent;
1731
- --tw-text-opacity: 1;
1732
- color: hsl(var(--bc) / var(--tw-text-opacity));
1733
- --tw-shadow: 0 0 #0000;
1734
- --tw-shadow-colored: 0 0 #0000;
1735
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1736
- }
1737
- @media (hover: hover) {
1738
- .btn-outline:hover {
1739
- --tw-border-opacity: 1;
1740
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
1741
- --tw-bg-opacity: 1;
1742
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1743
- --tw-text-opacity: 1;
1744
- color: hsl(var(--b1) / var(--tw-text-opacity));
1745
- }
1746
- }
1747
- .btn-outline.btn-active {
1748
- --tw-border-opacity: 1;
1749
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
1750
- --tw-bg-opacity: 1;
1751
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1752
- --tw-text-opacity: 1;
1753
- color: hsl(var(--b1) / var(--tw-text-opacity));
1754
- }
1755
- .btn-outline.btn-primary {
1756
- --tw-text-opacity: 1;
1757
- color: hsl(var(--p) / var(--tw-text-opacity));
1758
- }
1759
- @media (hover: hover) {
1760
- .btn-outline.btn-primary:hover {
1761
- --tw-border-opacity: 1;
1762
- border-color: hsl(var(--pf) / var(--tw-border-opacity));
1763
- --tw-bg-opacity: 1;
1764
- background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1765
- --tw-text-opacity: 1;
1766
- color: hsl(var(--pc) / var(--tw-text-opacity));
1767
- }
1768
- }
1769
- .btn-outline.btn-primary.btn-active {
1770
- --tw-border-opacity: 1;
1771
- border-color: hsl(var(--pf) / var(--tw-border-opacity));
1772
- --tw-bg-opacity: 1;
1773
- background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1774
- --tw-text-opacity: 1;
1775
- color: hsl(var(--pc) / var(--tw-text-opacity));
1776
- }
1777
- .btn-outline.btn-secondary {
1778
- --tw-text-opacity: 1;
1779
- color: hsl(var(--s) / var(--tw-text-opacity));
1780
- }
1781
- @media (hover: hover) {
1782
- .btn-outline.btn-secondary:hover {
1783
- --tw-border-opacity: 1;
1784
- border-color: hsl(var(--sf) / var(--tw-border-opacity));
1785
- --tw-bg-opacity: 1;
1786
- background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1787
- --tw-text-opacity: 1;
1788
- color: hsl(var(--sc) / var(--tw-text-opacity));
1789
- }
1790
- }
1791
- .btn-outline.btn-secondary.btn-active {
1792
- --tw-border-opacity: 1;
1793
- border-color: hsl(var(--sf) / var(--tw-border-opacity));
1794
- --tw-bg-opacity: 1;
1795
- background-color: hsl(var(--sf) / var(--tw-bg-opacity));
1796
- --tw-text-opacity: 1;
1797
- color: hsl(var(--sc) / var(--tw-text-opacity));
1798
- }
1799
- .btn-outline.btn-accent {
1800
- --tw-text-opacity: 1;
1801
- color: hsl(var(--a) / var(--tw-text-opacity));
1802
- }
1803
- @media (hover: hover) {
1804
- .btn-outline.btn-accent:hover {
1805
- --tw-border-opacity: 1;
1806
- border-color: hsl(var(--af) / var(--tw-border-opacity));
1807
- --tw-bg-opacity: 1;
1808
- background-color: hsl(var(--af) / var(--tw-bg-opacity));
1809
- --tw-text-opacity: 1;
1810
- color: hsl(var(--ac) / var(--tw-text-opacity));
1811
- }
1812
- }
1813
- .btn-outline.btn-accent.btn-active {
1814
- --tw-border-opacity: 1;
1815
- border-color: hsl(var(--af) / var(--tw-border-opacity));
1816
- --tw-bg-opacity: 1;
1817
- background-color: hsl(var(--af) / var(--tw-bg-opacity));
1818
- --tw-text-opacity: 1;
1819
- color: hsl(var(--ac) / var(--tw-text-opacity));
1820
- }
1821
- .btn-outline.btn-success {
1822
- --tw-text-opacity: 1;
1823
- color: hsl(var(--su) / var(--tw-text-opacity));
1824
- }
1825
- @media (hover: hover) {
1826
- .btn-outline.btn-success:hover {
1827
- --tw-border-opacity: 1;
1828
- border-color: hsl(var(--su) / var(--tw-border-opacity));
1829
- --tw-bg-opacity: 1;
1830
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1831
- --tw-text-opacity: 1;
1832
- color: hsl(var(--suc) / var(--tw-text-opacity));
1833
- }
1834
- }
1835
- .btn-outline.btn-success.btn-active {
1836
- --tw-border-opacity: 1;
1837
- border-color: hsl(var(--su) / var(--tw-border-opacity));
1838
- --tw-bg-opacity: 1;
1839
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
1840
- --tw-text-opacity: 1;
1841
- color: hsl(var(--suc) / var(--tw-text-opacity));
1842
- }
1843
- .btn-outline.btn-info {
1844
- --tw-text-opacity: 1;
1845
- color: hsl(var(--in) / var(--tw-text-opacity));
1846
- }
1847
- @media (hover: hover) {
1848
- .btn-outline.btn-info:hover {
1849
- --tw-border-opacity: 1;
1850
- border-color: hsl(var(--in) / var(--tw-border-opacity));
1851
- --tw-bg-opacity: 1;
1852
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1853
- --tw-text-opacity: 1;
1854
- color: hsl(var(--inc) / var(--tw-text-opacity));
1855
- }
1856
- }
1857
- .btn-outline.btn-info.btn-active {
1858
- --tw-border-opacity: 1;
1859
- border-color: hsl(var(--in) / var(--tw-border-opacity));
1860
- --tw-bg-opacity: 1;
1861
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
1862
- --tw-text-opacity: 1;
1863
- color: hsl(var(--inc) / var(--tw-text-opacity));
1864
- }
1865
- .btn-outline.btn-warning {
1866
- --tw-text-opacity: 1;
1867
- color: hsl(var(--wa) / var(--tw-text-opacity));
1868
- }
1869
- @media (hover: hover) {
1870
- .btn-outline.btn-warning:hover {
1871
- --tw-border-opacity: 1;
1872
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
1873
- --tw-bg-opacity: 1;
1874
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1875
- --tw-text-opacity: 1;
1876
- color: hsl(var(--wac) / var(--tw-text-opacity));
1877
- }
1878
- }
1879
- .btn-outline.btn-warning.btn-active {
1880
- --tw-border-opacity: 1;
1881
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
1882
- --tw-bg-opacity: 1;
1883
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1884
- --tw-text-opacity: 1;
1885
- color: hsl(var(--wac) / var(--tw-text-opacity));
1886
- }
1887
- .btn-outline.btn-error {
1888
- --tw-text-opacity: 1;
1889
- color: hsl(var(--er) / var(--tw-text-opacity));
1890
- }
1891
- @media (hover: hover) {
1892
- .btn-outline.btn-error:hover {
1893
- --tw-border-opacity: 1;
1894
- border-color: hsl(var(--er) / var(--tw-border-opacity));
1895
- --tw-bg-opacity: 1;
1896
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1897
- --tw-text-opacity: 1;
1898
- color: hsl(var(--erc) / var(--tw-text-opacity));
1899
- }
1900
- }
1901
- .btn-outline.btn-error.btn-active {
1902
- --tw-border-opacity: 1;
1903
- border-color: hsl(var(--er) / var(--tw-border-opacity));
1904
- --tw-bg-opacity: 1;
1905
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
1906
- --tw-text-opacity: 1;
1907
- color: hsl(var(--erc) / var(--tw-text-opacity));
1908
- }
1909
- /* disabled */
1910
- .btn-disabled,
1911
- .btn[disabled],
1912
- .btn:disabled {
1913
- --tw-border-opacity: 0;
1914
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1915
- --tw-bg-opacity: 0.2;
1916
- color: hsl(var(--bc) / var(--tw-text-opacity));
1917
- --tw-text-opacity: 0.2;
1918
- }
1919
- @media (hover: hover) {
1920
- .btn-disabled:hover,
1921
- .btn[disabled]:hover,
1922
- .btn:disabled:hover {
1923
- --tw-border-opacity: 0;
1924
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1925
- --tw-bg-opacity: 0.2;
1926
- color: hsl(var(--bc) / var(--tw-text-opacity));
1927
- --tw-text-opacity: 0.2;
1928
- }
1929
- }
1930
- /* group */
1931
- .btn-group > input[type="radio"]:checked.btn,
1932
- .btn-group > .btn-active {
1933
- --tw-border-opacity: 1;
1934
- border-color: hsl(var(--p) / var(--tw-border-opacity));
1935
- --tw-bg-opacity: 1;
1936
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
1937
- --tw-text-opacity: 1;
1938
- color: hsl(var(--pc) / var(--tw-text-opacity));
1939
- }
1940
- .btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
1941
- outline-style: solid;
1942
- outline-width: 2px;
1943
- outline-color: hsl(var(--p) / 1);
1944
- }
1945
- /* radio input and checkbox as button */
1946
- .btn:is(input[type="checkbox"]:checked),
1947
- .btn:is(input[type="radio"]:checked) {
1948
- --tw-border-opacity: 1;
1949
- border-color: hsl(var(--p) / var(--tw-border-opacity));
1950
- --tw-bg-opacity: 1;
1951
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
1952
- --tw-text-opacity: 1;
1953
- color: hsl(var(--pc) / var(--tw-text-opacity));
1954
- }
1955
- @media (hover: hover) {
1956
- .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
1957
- --tw-border-opacity: 1;
1958
- border-color: hsl(var(--pf) / var(--tw-border-opacity));
1959
- --tw-bg-opacity: 1;
1960
- background-color: hsl(var(--pf) / var(--tw-bg-opacity));
1961
- }
1962
- }
1963
- .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
1964
- outline-color: hsl(var(--p) / 1);
1965
- }
1966
- @keyframes button-pop {
1967
- 0% {
1968
- transform: scale(var(--btn-focus-scale, 0.98));
1969
- }
1970
- 40% {
1971
- transform: scale(1.02);
1972
- }
1973
- 100% {
1974
- transform: scale(1);
1975
- }
1976
- }
1977
- .card {
1978
- border-radius: var(--rounded-box, 1rem);
1979
- }
1980
- .card :where(figure:first-child) {
1981
- overflow: hidden;
1982
- border-start-start-radius: inherit;
1983
- border-start-end-radius: inherit;
1984
- border-end-start-radius: unset;
1985
- border-end-end-radius: unset;
1986
- }
1987
- .card :where(figure:last-child) {
1988
- overflow: hidden;
1989
- border-start-start-radius: unset;
1990
- border-start-end-radius: unset;
1991
- border-end-start-radius: inherit;
1992
- border-end-end-radius: inherit;
1993
- }
1994
- .card:focus-visible {
1995
- outline: 2px solid currentColor;
1996
- outline-offset: 2px;
1997
- }
1998
- .card.bordered {
1999
- border-width: 1px;
2000
- --tw-border-opacity: 1;
2001
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
2002
- }
2003
- .card-bordered {
2004
- border-width: 1px;
2005
- --tw-border-opacity: 1;
2006
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
2007
- }
2008
- .card.compact .card-body {
2009
- padding: 1rem;
2010
- font-size: 0.875rem;
2011
- line-height: 1.25rem;
2012
- }
2013
- .card-body {
2014
- padding: var(--padding-card, 2rem);
2015
- display: flex;
2016
- flex-direction: column;
2017
- gap: 0.5rem;
2018
- }
2019
- .card-title {
2020
- display: flex;
2021
- align-items: center;
2022
- gap: 0.5rem;
2023
- font-size: 1.25rem;
2024
- line-height: 1.75rem;
2025
- font-weight: 600;
2026
- }
2027
- .card.image-full:before {
2028
- z-index: 10;
2029
- --tw-bg-opacity: 1;
2030
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
2031
- opacity: 0.75;
2032
- border-radius: var(--rounded-box, 1rem);
2033
- }
2034
- .card.image-full > .card-body {
2035
- z-index: 20;
2036
- --tw-text-opacity: 1;
2037
- color: hsl(var(--nc) / var(--tw-text-opacity));
2038
- }
2039
- .card.image-full :where(figure) {
2040
- overflow: hidden;
2041
- border-radius: inherit;
2042
- }
2043
- .carousel {
2044
- -ms-overflow-style: none;
2045
- scrollbar-width: none;
2046
- }
2047
- .carousel::-webkit-scrollbar {
2048
- display: none;
2049
- }
2050
- .chat-bubble {
2051
- border-radius: var(--rounded-box, 1rem);
2052
- min-height: 2.75rem;
2053
- min-width: 2.75rem;
2054
- }
2055
-
2056
- /* default */
2057
- .chat-bubble {
2058
- --tw-bg-opacity: 1;
2059
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
2060
- --tw-text-opacity: 1;
2061
- color: hsl(var(--nc) / var(--tw-text-opacity));
2062
- }
2063
- /* brand colors */
2064
- .chat-bubble-primary {
2065
- --tw-bg-opacity: 1;
2066
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
2067
- --tw-text-opacity: 1;
2068
- color: hsl(var(--pc) / var(--tw-text-opacity));
2069
- }
2070
- .chat-bubble-secondary {
2071
- --tw-bg-opacity: 1;
2072
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
2073
- --tw-text-opacity: 1;
2074
- color: hsl(var(--sc) / var(--tw-text-opacity));
2075
- }
2076
- .chat-bubble-accent {
2077
- --tw-bg-opacity: 1;
2078
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
2079
- --tw-text-opacity: 1;
2080
- color: hsl(var(--ac) / var(--tw-text-opacity));
2081
- }
2082
- /* state colors */
2083
- .chat-bubble-info {
2084
- --tw-bg-opacity: 1;
2085
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
2086
- --tw-text-opacity: 1;
2087
- color: hsl(var(--inc) / var(--tw-text-opacity));
2088
- }
2089
- .chat-bubble-success {
2090
- --tw-bg-opacity: 1;
2091
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
2092
- --tw-text-opacity: 1;
2093
- color: hsl(var(--suc) / var(--tw-text-opacity));
2094
- }
2095
- .chat-bubble-warning {
2096
- --tw-bg-opacity: 1;
2097
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2098
- --tw-text-opacity: 1;
2099
- color: hsl(var(--wac) / var(--tw-text-opacity));
2100
- }
2101
- .chat-bubble-error {
2102
- --tw-bg-opacity: 1;
2103
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
2104
- --tw-text-opacity: 1;
2105
- color: hsl(var(--erc) / var(--tw-text-opacity));
2106
- }
2107
- .chat-start .chat-bubble {
2108
- border-bottom-left-radius: 0px;
2109
- }
2110
- .chat-start .chat-bubble:before {
2111
- left: -0.75rem;
2112
- }
2113
- .chat-end .chat-bubble {
2114
- border-bottom-right-radius: 0px;
2115
- }
2116
- .chat-end .chat-bubble:before {
2117
- left: 100%;
2118
- }
2119
- .checkbox {
2120
- --chkbg: var(--bc);
2121
- --chkfg: var(--b1);
2122
- height: 1.5rem;
2123
- width: 1.5rem;
2124
- cursor: pointer;
2125
- appearance: none;
2126
- border-width: 1px;
2127
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
2128
- --tw-border-opacity: 0.2;
2129
- border-radius: var(--rounded-btn, 0.5rem);
2130
- }
2131
- .checkbox:focus-visible {
2132
- outline-style: solid;
2133
- outline-width: 2px;
2134
- outline-offset: 2px;
2135
- outline-color: hsl(var(--bc) / 1);
2136
- }
2137
- .checkbox:checked,
2138
- .checkbox[checked="true"],
2139
- .checkbox[aria-checked="true"] {
2140
- --tw-bg-opacity: 1;
2141
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2142
- background-repeat: no-repeat;
2143
- animation: checkmark var(--animation-input, 0.2s) ease-in-out;
2144
- background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
2145
- linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
2146
- linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
2147
- linear-gradient(
2148
- 45deg,
2149
- hsl(var(--chkbg)) 30%,
2150
- hsl(var(--chkfg)) 30.99%,
2151
- hsl(var(--chkfg)) 40%,
2152
- transparent 40.99%
2153
- ),
2154
- linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
2155
- }
2156
- .checkbox:indeterminate {
2157
- --tw-bg-opacity: 1;
2158
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2159
- background-repeat: no-repeat;
2160
- animation: checkmark var(--animation-input, 0.2s) ease-in-out;
2161
- background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%),
2162
- linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%),
2163
- linear-gradient(
2164
- 0deg,
2165
- hsl(var(--chkbg)) 43%,
2166
- hsl(var(--chkfg)) 43%,
2167
- hsl(var(--chkfg)) 57%,
2168
- hsl(var(--chkbg)) 57%
2169
- );
2170
- }
2171
- .checkbox-primary {
2172
- --chkbg: var(--p);
2173
- --chkfg: var(--pc);
2174
- --tw-border-opacity: 1;
2175
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2176
- }
2177
- @media (hover:hover) {
2178
- .checkbox-primary:hover {
2179
- --tw-border-opacity: 1;
2180
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2181
- }
2182
- }
2183
- .checkbox-primary:focus-visible {
2184
- outline-color: hsl(var(--p) / 1);
2185
- }
2186
- .checkbox-primary:checked,
2187
- .checkbox-primary[checked="true"],
2188
- .checkbox-primary[aria-checked="true"] {
2189
- --tw-border-opacity: 1;
2190
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2191
- --tw-bg-opacity: 1;
2192
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
2193
- --tw-text-opacity: 1;
2194
- color: hsl(var(--pc) / var(--tw-text-opacity));
2195
- }
2196
- .checkbox-secondary {
2197
- --chkbg: var(--s);
2198
- --chkfg: var(--sc);
2199
- --tw-border-opacity: 1;
2200
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2201
- }
2202
- @media (hover:hover) {
2203
- .checkbox-secondary:hover {
2204
- --tw-border-opacity: 1;
2205
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2206
- }
2207
- }
2208
- .checkbox-secondary:focus-visible {
2209
- outline-color: hsl(var(--s) / 1);
2210
- }
2211
- .checkbox-secondary:checked,
2212
- .checkbox-secondary[checked="true"],
2213
- .checkbox-secondary[aria-checked="true"] {
2214
- --tw-border-opacity: 1;
2215
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2216
- --tw-bg-opacity: 1;
2217
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
2218
- --tw-text-opacity: 1;
2219
- color: hsl(var(--sc) / var(--tw-text-opacity));
2220
- }
2221
- .checkbox-accent {
2222
- --chkbg: var(--a);
2223
- --chkfg: var(--ac);
2224
- --tw-border-opacity: 1;
2225
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2226
- }
2227
- @media (hover:hover) {
2228
- .checkbox-accent:hover {
2229
- --tw-border-opacity: 1;
2230
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2231
- }
2232
- }
2233
- .checkbox-accent:focus-visible {
2234
- outline-color: hsl(var(--a) / 1);
2235
- }
2236
- .checkbox-accent:checked,
2237
- .checkbox-accent[checked="true"],
2238
- .checkbox-accent[aria-checked="true"] {
2239
- --tw-border-opacity: 1;
2240
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2241
- --tw-bg-opacity: 1;
2242
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
2243
- --tw-text-opacity: 1;
2244
- color: hsl(var(--ac) / var(--tw-text-opacity));
2245
- }
2246
- .checkbox-success {
2247
- --chkbg: var(--su);
2248
- --chkfg: var(--suc);
2249
- --tw-border-opacity: 1;
2250
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2251
- }
2252
- @media (hover:hover) {
2253
- .checkbox-success:hover {
2254
- --tw-border-opacity: 1;
2255
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2256
- }
2257
- }
2258
- .checkbox-success:focus-visible {
2259
- outline-color: hsl(var(--su) / 1);
2260
- }
2261
- .checkbox-success:checked,
2262
- .checkbox-success[checked="true"],
2263
- .checkbox-success[aria-checked="true"] {
2264
- --tw-border-opacity: 1;
2265
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2266
- --tw-bg-opacity: 1;
2267
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
2268
- --tw-text-opacity: 1;
2269
- color: hsl(var(--suc) / var(--tw-text-opacity));
2270
- }
2271
- .checkbox-warning {
2272
- --chkbg: var(--wa);
2273
- --chkfg: var(--wac);
2274
- --tw-border-opacity: 1;
2275
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2276
- }
2277
- @media (hover:hover) {
2278
- .checkbox-warning:hover {
2279
- --tw-border-opacity: 1;
2280
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2281
- }
2282
- }
2283
- .checkbox-warning:focus-visible {
2284
- outline-color: hsl(var(--wa) / 1);
2285
- }
2286
- .checkbox-warning:checked,
2287
- .checkbox-warning[checked="true"],
2288
- .checkbox-warning[aria-checked="true"] {
2289
- --tw-border-opacity: 1;
2290
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2291
- --tw-bg-opacity: 1;
2292
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2293
- --tw-text-opacity: 1;
2294
- color: hsl(var(--wac) / var(--tw-text-opacity));
2295
- }
2296
- .checkbox-info {
2297
- --chkbg: var(--in);
2298
- --chkfg: var(--inc);
2299
- --tw-border-opacity: 1;
2300
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2301
- }
2302
- @media (hover:hover) {
2303
- .checkbox-info:hover {
2304
- --tw-border-opacity: 1;
2305
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2306
- }
2307
- }
2308
- .checkbox-info:focus-visible {
2309
- outline-color: hsl(var(--in) / 1);
2310
- }
2311
- .checkbox-info:checked,
2312
- .checkbox-info[checked="true"],
2313
- .checkbox-info[aria-checked="true"] {
2314
- --tw-border-opacity: 1;
2315
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2316
- --tw-bg-opacity: 1;
2317
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
2318
- --tw-text-opacity: 1;
2319
- color: hsl(var(--inc) / var(--tw-text-opacity));
2320
- }
2321
- .checkbox-error {
2322
- --chkbg: var(--er);
2323
- --chkfg: var(--erc);
2324
- --tw-border-opacity: 1;
2325
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2326
- }
2327
- @media (hover:hover) {
2328
- .checkbox-error:hover {
2329
- --tw-border-opacity: 1;
2330
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2331
- }
2332
- }
2333
- .checkbox-error:focus-visible {
2334
- outline-color: hsl(var(--er) / 1);
2335
- }
2336
- .checkbox-error:checked,
2337
- .checkbox-error[checked="true"],
2338
- .checkbox-error[aria-checked="true"] {
2339
- --tw-border-opacity: 1;
2340
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2341
- --tw-bg-opacity: 1;
2342
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
2343
- --tw-text-opacity: 1;
2344
- color: hsl(var(--erc) / var(--tw-text-opacity));
2345
- }
2346
- .checkbox:disabled {
2347
- cursor: not-allowed;
2348
- border-color: transparent;
2349
- --tw-bg-opacity: 1;
2350
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2351
- opacity: 0.2;
2352
- }
2353
-
2354
- @keyframes checkmark {
2355
- 0% {
2356
- background-position-y: 5px;
2357
- }
2358
- 50% {
2359
- background-position-y: -2px;
2360
- }
2361
- 100% {
2362
- background-position-y: 0;
2363
- }
2364
- }
2365
-
2366
- /* backward compatibility */
2367
-
2368
- .checkbox-mark {
2369
- display: none;
2370
- }
2371
-
2372
- [dir="rtl"] .checkbox:checked,
2373
- [dir="rtl"] .checkbox[checked="true"],
2374
- [dir="rtl"] .checkbox[aria-checked="true"] {
2375
- background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
2376
- linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
2377
- linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
2378
- linear-gradient(
2379
- -45deg,
2380
- hsl(var(--chkbg)) 30%,
2381
- hsl(var(--chkfg)) 30.99%,
2382
- hsl(var(--chkfg)) 40%,
2383
- transparent 40.99%
2384
- ),
2385
- linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
2386
- }
2387
- .collapse {
2388
- width: 100%;
2389
- border-radius: var(--rounded-box, 1rem);
2390
- }
2391
- details.collapse {
2392
- width: 100%;
2393
- }
2394
- details.collapse summary {
2395
- position: relative;
2396
- display: block;
2397
- }
2398
- details.collapse summary::-webkit-details-marker {
2399
- display: none;
2400
- }
2401
- .collapse:focus-visible {
2402
- outline-style: solid;
2403
- outline-width: 2px;
2404
- outline-offset: 2px;
2405
- outline-color: hsl(var(--bc) / 1);
2406
- }
2407
- details.collapse summary {
2408
- outline: 2px solid transparent;
2409
- outline-offset: 2px;
2410
- }
2411
- .collapse:has(.collapse-title:focus-visible),
2412
- .collapse:has(> input[type="checkbox"]:focus-visible),
2413
- .collapse:has(> input[type="radio"]:focus-visible) {
2414
- outline-style: solid;
2415
- outline-width: 2px;
2416
- outline-offset: 2px;
2417
- outline-color: hsl(var(--bc) / 1);
2418
- }
2419
- .collapse-arrow .collapse-title:after {
2420
- position: absolute;
2421
- display: block;
2422
- height: 0.5rem;
2423
- width: 0.5rem;
2424
- --tw-translate-y: -100%;
2425
- --tw-rotate: 45deg;
2426
- 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));
2427
- transition-property: all;
2428
- transition-duration: 150ms;
2429
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2430
- transition-duration: 0.2s;
2431
- top: 50%;
2432
- right: 1.4rem;
2433
- content: "";
2434
- transform-origin: 75% 75%;
2435
- box-shadow: 2px 2px;
2436
- pointer-events: none;
2437
- }
2438
- [dir="rtl"] .collapse-arrow .collapse-title:after {
2439
- --tw-rotate: -45deg;
2440
- }
2441
- .collapse-plus .collapse-title:after {
2442
- position: absolute;
2443
- display: block;
2444
- height: 0.5rem;
2445
- width: 0.5rem;
2446
- transition-property: all;
2447
- transition-duration: 300ms;
2448
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2449
- top: 0.9rem;
2450
- right: 1.4rem;
2451
- content: "+";
2452
- pointer-events: none;
2453
- }
2454
- .collapse:not(.collapse-open):not(.collapse-close) input[type="checkbox"],
2455
- .collapse:not(.collapse-open):not(.collapse-close) input[type="radio"]:not(:checked),
2456
- .collapse:not(.collapse-open):not(.collapse-close) .collapse-title {
2457
- cursor: pointer;
2458
- }
2459
- .collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) .collapse-title {
2460
- cursor: unset;
2461
- }
2462
- .collapse-title {
2463
- position: relative;
2464
- }
2465
- :where(.collapse > input[type="checkbox"]),
2466
- :where(.collapse > input[type="radio"]) {
2467
- z-index: 1;
2468
- }
2469
- .collapse-title,
2470
- :where(.collapse > input[type="checkbox"]),
2471
- :where(.collapse > input[type="radio"]) {
2472
- width: 100%;
2473
- padding: 1rem;
2474
- padding-right: 3rem;
2475
- min-height: 3.75rem;
2476
- transition: background-color 0.2s ease-in-out;
2477
- }
2478
- .collapse-content {
2479
- padding-left: 1rem;
2480
- padding-right: 1rem;
2481
- cursor: unset;
2482
- transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
2483
- }
2484
- .collapse[open] :where(.collapse-content),
2485
- .collapse-open :where(.collapse-content),
2486
- .collapse:focus:not(.collapse-close) :where(.collapse-content),
2487
- .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content),
2488
- .collapse:not(.collapse-close) :where(input[type="radio"]:checked ~ .collapse-content) {
2489
- padding-bottom: 1rem;
2490
- transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
2491
- }
2492
- .collapse[open].collapse-arrow .collapse-title:after,
2493
- .collapse-open.collapse-arrow .collapse-title:after,
2494
- .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
2495
- .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after,
2496
- .collapse-arrow:not(.collapse-close) input[type="radio"]:checked ~ .collapse-title:after {
2497
- --tw-translate-y: -50%;
2498
- --tw-rotate: 225deg;
2499
- 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));
2500
- }
2501
- [dir="rtl"] .collapse[open].collapse-arrow .collapse-title:after,
2502
- [dir="rtl"] .collapse-open.collapse-arrow .collapse-title:after,
2503
- [dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
2504
- [dir="rtl"]
2505
- .collapse-arrow:not(.collapse-close)
2506
- input[type="checkbox"]:checked
2507
- ~ .collapse-title:after {
2508
- --tw-rotate: 135deg;
2509
- }
2510
- .collapse[open].collapse-plus .collapse-title:after,
2511
- .collapse-open.collapse-plus .collapse-title:after,
2512
- .collapse-plus:focus:not(.collapse-close) .collapse-title:after,
2513
- .collapse-plus:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after,
2514
- .collapse-plus:not(.collapse-close) input[type="radio"]:checked ~ .collapse-title:after {
2515
- content: "−";
2516
- }
2517
- .countdown > *:before {
2518
- text-align: center;
2519
- transition: all 1s cubic-bezier(1, 0, 0, 1);
2520
- }
2521
- .divider {
2522
- margin-top: 1rem;
2523
- margin-bottom: 1rem;
2524
- height: 1rem;
2525
- white-space: nowrap
2526
- }
2527
- .divider:before {
2528
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2529
- --tw-bg-opacity: 0.1
2530
- }
2531
- .divider:after {
2532
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2533
- --tw-bg-opacity: 0.1
2534
- }
2535
- .divider:not(:empty) {
2536
- gap: 1rem
2537
- }
2538
- .drawer {
2539
- width: 100%;
2540
- }
2541
- .drawer-side > .drawer-overlay {
2542
- cursor: pointer;
2543
- background-color: transparent;
2544
- transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1);
2545
- }
2546
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
2547
- background-color: hsl(0 0% 0%/0.4);
2548
- }
2549
- .drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
2550
- outline-style: solid;
2551
- outline-width: 2px;
2552
- outline-offset: 2px;
2553
- }
2554
- .dropdown:is(:not(details)) .dropdown-content {
2555
- transform-origin: top;
2556
- --tw-scale-x: .95;
2557
- --tw-scale-y: .95;
2558
- 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));
2559
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2560
- transition-duration: 200ms;
2561
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
2562
- }
2563
- .dropdown-bottom .dropdown-content {
2564
- transform-origin: top
2565
- }
2566
- .dropdown-top .dropdown-content {
2567
- transform-origin: bottom
2568
- }
2569
- .dropdown-left .dropdown-content {
2570
- transform-origin: right
2571
- }
2572
- .dropdown-right .dropdown-content {
2573
- transform-origin: left
2574
- }
2575
- .dropdown.dropdown-open .dropdown-content,
2576
- .dropdown:focus .dropdown-content,
2577
- .dropdown:focus-within .dropdown-content {
2578
- --tw-scale-x: 1;
2579
- --tw-scale-y: 1;
2580
- 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))
2581
- }
2582
- @media (hover: hover) {
2583
- .dropdown.dropdown-hover:hover .dropdown-content {
2584
- --tw-scale-x: 1;
2585
- --tw-scale-y: 1;
2586
- 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))
2587
- }
2588
- }
2589
- .file-input {
2590
- overflow: hidden;
2591
- border-width: 1px;
2592
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
2593
- --tw-border-opacity: 0;
2594
- --tw-bg-opacity: 1;
2595
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
2596
- font-size: 1rem;
2597
- line-height: 1.5rem;
2598
- border-radius: var(--rounded-btn, 0.5rem);
2599
- }
2600
- .file-input::file-selector-button {
2601
- border-style: solid;
2602
- --tw-border-opacity: 1;
2603
- border-color: hsl(var(--n) / var(--tw-border-opacity));
2604
- --tw-bg-opacity: 1;
2605
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
2606
- font-weight: 600;
2607
- text-transform: uppercase;
2608
- --tw-text-opacity: 1;
2609
- color: hsl(var(--nc) / var(--tw-text-opacity));
2610
- text-decoration-line: none;
2611
- border-width: var(--border-btn, 1px);
2612
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
2613
- text-transform: var(--btn-text-case, uppercase);
2614
- }
2615
- .file-input-bordered {
2616
- --tw-border-opacity: 0.2;
2617
- }
2618
- .file-input:focus {
2619
- outline-style: solid;
2620
- outline-width: 2px;
2621
- outline-offset: 2px;
2622
- outline-color: hsl(var(--bc) / 0.2);
2623
- }
2624
- .file-input-ghost {
2625
- --tw-bg-opacity: 0.05;
2626
- }
2627
- .file-input-ghost:focus {
2628
- --tw-bg-opacity: 1;
2629
- --tw-text-opacity: 1;
2630
- color: hsl(var(--bc) / var(--tw-text-opacity));
2631
- box-shadow: none;
2632
- }
2633
- .file-input-ghost::file-selector-button {
2634
- border-width: 1px;
2635
- border-color: transparent;
2636
- background-color: transparent;
2637
- color: currentColor;
2638
- }
2639
- .file-input-primary {
2640
- --tw-border-opacity: 1;
2641
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2642
- }
2643
- .file-input-primary:focus {
2644
- outline-color: hsl(var(--p) / 1);
2645
- }
2646
- .file-input-primary::file-selector-button {
2647
- --tw-border-opacity: 1;
2648
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2649
- --tw-bg-opacity: 1;
2650
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
2651
- --tw-text-opacity: 1;
2652
- color: hsl(var(--pc) / var(--tw-text-opacity));
2653
- }
2654
- .file-input-secondary {
2655
- --tw-border-opacity: 1;
2656
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2657
- }
2658
- .file-input-secondary:focus {
2659
- outline-color: hsl(var(--s) / 1);
2660
- }
2661
- .file-input-secondary::file-selector-button {
2662
- --tw-border-opacity: 1;
2663
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2664
- --tw-bg-opacity: 1;
2665
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
2666
- --tw-text-opacity: 1;
2667
- color: hsl(var(--sc) / var(--tw-text-opacity));
2668
- }
2669
- .file-input-accent {
2670
- --tw-border-opacity: 1;
2671
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2672
- }
2673
- .file-input-accent:focus {
2674
- outline-color: hsl(var(--a) / 1);
2675
- }
2676
- .file-input-accent::file-selector-button {
2677
- --tw-border-opacity: 1;
2678
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2679
- --tw-bg-opacity: 1;
2680
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
2681
- --tw-text-opacity: 1;
2682
- color: hsl(var(--ac) / var(--tw-text-opacity));
2683
- }
2684
- .file-input-info {
2685
- --tw-border-opacity: 1;
2686
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2687
- }
2688
- .file-input-info:focus {
2689
- outline-color: hsl(var(--in) / 1);
2690
- }
2691
- .file-input-info::file-selector-button {
2692
- --tw-border-opacity: 1;
2693
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2694
- --tw-bg-opacity: 1;
2695
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
2696
- --tw-text-opacity: 1;
2697
- color: hsl(var(--inc) / var(--tw-text-opacity));
2698
- }
2699
- .file-input-success {
2700
- --tw-border-opacity: 1;
2701
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2702
- }
2703
- .file-input-success:focus {
2704
- outline-color: hsl(var(--su) / 1);
2705
- }
2706
- .file-input-success::file-selector-button {
2707
- --tw-border-opacity: 1;
2708
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2709
- --tw-bg-opacity: 1;
2710
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
2711
- --tw-text-opacity: 1;
2712
- color: hsl(var(--suc) / var(--tw-text-opacity));
2713
- }
2714
- .file-input-warning {
2715
- --tw-border-opacity: 1;
2716
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2717
- }
2718
- .file-input-warning:focus {
2719
- outline-color: hsl(var(--wa) / 1);
2720
- }
2721
- .file-input-warning::file-selector-button {
2722
- --tw-border-opacity: 1;
2723
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2724
- --tw-bg-opacity: 1;
2725
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2726
- --tw-text-opacity: 1;
2727
- color: hsl(var(--wac) / var(--tw-text-opacity));
2728
- }
2729
- .file-input-error {
2730
- --tw-border-opacity: 1;
2731
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2732
- }
2733
- .file-input-error:focus {
2734
- outline-color: hsl(var(--er) / 1);
2735
- }
2736
- .file-input-error::file-selector-button {
2737
- --tw-border-opacity: 1;
2738
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2739
- --tw-bg-opacity: 1;
2740
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
2741
- --tw-text-opacity: 1;
2742
- color: hsl(var(--erc) / var(--tw-text-opacity));
2743
- }
2744
- .file-input-disabled,
2745
- .file-input[disabled] {
2746
- cursor: not-allowed;
2747
- --tw-border-opacity: 1;
2748
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
2749
- --tw-bg-opacity: 1;
2750
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
2751
- --tw-text-opacity: 0.2;
2752
- }
2753
- .file-input-disabled::placeholder,
2754
- .file-input[disabled]::placeholder {
2755
- color: hsl(var(--bc) / var(--tw-placeholder-opacity));
2756
- --tw-placeholder-opacity: 0.2;
2757
- }
2758
- .file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
2759
- --tw-border-opacity: 0;
2760
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
2761
- --tw-bg-opacity: 0.2;
2762
- color: hsl(var(--bc) / var(--tw-text-opacity));
2763
- --tw-text-opacity: 0.2;
2764
- }
2765
- .footer {
2766
- row-gap: 2.5rem;
2767
- column-gap: 1rem;
2768
- font-size: 0.875rem;
2769
- line-height: 1.25rem
2770
- }
2771
- .footer > * {
2772
- gap: 0.5rem
2773
- }
2774
- .footer-title {
2775
- margin-bottom: 0.5rem;
2776
- font-weight: 700;
2777
- text-transform: uppercase;
2778
- opacity: 0.5
2779
- }
2780
- .label {
2781
- padding-left: 0.25rem;
2782
- padding-right: 0.25rem;
2783
- padding-top: 0.5rem;
2784
- padding-bottom: 0.5rem
2785
- }
2786
- .label-text {
2787
- font-size: 0.875rem;
2788
- line-height: 1.25rem;
2789
- --tw-text-opacity: 1;
2790
- color: hsl(var(--bc) / var(--tw-text-opacity))
2791
- }
2792
- .label-text-alt {
2793
- font-size: 0.75rem;
2794
- line-height: 1rem;
2795
- --tw-text-opacity: 1;
2796
- color: hsl(var(--bc) / var(--tw-text-opacity))
2797
- }
2798
- @media (hover:hover) {
2799
- .label a:hover {
2800
- --tw-text-opacity: 1;
2801
- color: hsl(var(--bc) / var(--tw-text-opacity))
2802
- }
2803
- }
2804
- .hero-overlay {
2805
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
2806
- --tw-bg-opacity: 0.5
2807
- }
2808
- .hero-content {
2809
- max-width: 80rem;
2810
- gap: 1rem;
2811
- padding: 1rem
2812
- }
2813
- .input {
2814
- border-width: 1px;
2815
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
2816
- --tw-border-opacity: 0;
2817
- --tw-bg-opacity: 1;
2818
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
2819
- font-size: 1rem;
2820
- line-height: 1.5rem;
2821
- border-radius: var(--rounded-btn, 0.5rem);
2822
- /* &::-webkit-calendar-picker-indicator {
2823
- display: none;
2824
- } */
2825
- }
2826
- .input[list]::-webkit-calendar-picker-indicator {
2827
- line-height: 1em;
2828
- }
2829
- .input-bordered {
2830
- --tw-border-opacity: 0.2;
2831
- }
2832
- .input:focus {
2833
- outline-style: solid;
2834
- outline-width: 2px;
2835
- outline-offset: 2px;
2836
- outline-color: hsl(var(--bc) / 0.2);
2837
- }
2838
- .input-ghost {
2839
- --tw-bg-opacity: 0.05;
2840
- }
2841
- .input-ghost:focus {
2842
- --tw-bg-opacity: 1;
2843
- --tw-text-opacity: 1;
2844
- color: hsl(var(--bc) / var(--tw-text-opacity));
2845
- box-shadow: none;
2846
- }
2847
- .input-primary {
2848
- --tw-border-opacity: 1;
2849
- border-color: hsl(var(--p) / var(--tw-border-opacity));
2850
- }
2851
- .input-primary:focus {
2852
- outline-color: hsl(var(--p) / 1);
2853
- }
2854
- .input-secondary {
2855
- --tw-border-opacity: 1;
2856
- border-color: hsl(var(--s) / var(--tw-border-opacity));
2857
- }
2858
- .input-secondary:focus {
2859
- outline-color: hsl(var(--s) / 1);
2860
- }
2861
- .input-accent {
2862
- --tw-border-opacity: 1;
2863
- border-color: hsl(var(--a) / var(--tw-border-opacity));
2864
- }
2865
- .input-accent:focus {
2866
- outline-color: hsl(var(--a) / 1);
2867
- }
2868
- .input-info {
2869
- --tw-border-opacity: 1;
2870
- border-color: hsl(var(--in) / var(--tw-border-opacity));
2871
- }
2872
- .input-info:focus {
2873
- outline-color: hsl(var(--in) / 1);
2874
- }
2875
- .input-success {
2876
- --tw-border-opacity: 1;
2877
- border-color: hsl(var(--su) / var(--tw-border-opacity));
2878
- }
2879
- .input-success:focus {
2880
- outline-color: hsl(var(--su) / 1);
2881
- }
2882
- .input-warning {
2883
- --tw-border-opacity: 1;
2884
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
2885
- }
2886
- .input-warning:focus {
2887
- outline-color: hsl(var(--wa) / 1);
2888
- }
2889
- .input-error {
2890
- --tw-border-opacity: 1;
2891
- border-color: hsl(var(--er) / var(--tw-border-opacity));
2892
- }
2893
- .input-error:focus {
2894
- outline-color: hsl(var(--er) / 1);
2895
- }
2896
- .input-disabled,
2897
- .input:disabled,
2898
- .input[disabled] {
2899
- cursor: not-allowed;
2900
- --tw-border-opacity: 1;
2901
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
2902
- --tw-bg-opacity: 1;
2903
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
2904
- --tw-text-opacity: 0.2;
2905
- }
2906
- .input-disabled::placeholder,
2907
- .input:disabled::placeholder,
2908
- .input[disabled]::placeholder {
2909
- color: hsl(var(--bc) / var(--tw-placeholder-opacity));
2910
- --tw-placeholder-opacity: 0.2;
2911
- }
2912
- .join {
2913
- border-radius: var(--rounded-btn, 0.5rem)
2914
- }
2915
- .join > :where(*:not(:first-child)) {
2916
- margin-top: 0px;
2917
- margin-bottom: 0px;
2918
- margin-left: -1px
2919
- }
2920
- .join-item:focus {
2921
- isolation: isolate
2922
- }
2923
- .kbd {
2924
- border-width: 1px;
2925
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
2926
- --tw-border-opacity: 0.2;
2927
- --tw-bg-opacity: 1;
2928
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
2929
- padding-left: 0.5rem;
2930
- padding-right: 0.5rem;
2931
- border-radius: var(--rounded-btn, 0.5rem);
2932
- border-bottom-width: 2px;
2933
- min-height: 2.2em;
2934
- min-width: 2.2em
2935
- }
2936
- .link-primary {
2937
- --tw-text-opacity: 1;
2938
- color: hsl(var(--p) / var(--tw-text-opacity));
2939
- }
2940
- @media (hover:hover) {
2941
- .link-primary:hover {
2942
- --tw-text-opacity: 1;
2943
- color: hsl(var(--pf) / var(--tw-text-opacity));
2944
- }
2945
- }
2946
- .link-secondary {
2947
- --tw-text-opacity: 1;
2948
- color: hsl(var(--s) / var(--tw-text-opacity));
2949
- }
2950
- @media (hover:hover) {
2951
- .link-secondary:hover {
2952
- --tw-text-opacity: 1;
2953
- color: hsl(var(--sf) / var(--tw-text-opacity));
2954
- }
2955
- }
2956
- .link-accent {
2957
- --tw-text-opacity: 1;
2958
- color: hsl(var(--a) / var(--tw-text-opacity));
2959
- }
2960
- @media (hover:hover) {
2961
- .link-accent:hover {
2962
- --tw-text-opacity: 1;
2963
- color: hsl(var(--af) / var(--tw-text-opacity));
2964
- }
2965
- }
2966
- .link-neutral {
2967
- --tw-text-opacity: 1;
2968
- color: hsl(var(--n) / var(--tw-text-opacity));
2969
- }
2970
- @media (hover:hover) {
2971
- .link-neutral:hover {
2972
- --tw-text-opacity: 1;
2973
- color: hsl(var(--nf) / var(--tw-text-opacity));
2974
- }
2975
- }
2976
- .link-success {
2977
- --tw-text-opacity: 1;
2978
- color: hsl(var(--su) / var(--tw-text-opacity));
2979
- }
2980
- @media (hover:hover) {
2981
- .link-success:hover {
2982
- --tw-text-opacity: 1;
2983
- color: hsl(var(--su) / var(--tw-text-opacity));
2984
- }
2985
- }
2986
- .link-info {
2987
- --tw-text-opacity: 1;
2988
- color: hsl(var(--in) / var(--tw-text-opacity));
2989
- }
2990
- @media (hover:hover) {
2991
- .link-info:hover {
2992
- --tw-text-opacity: 1;
2993
- color: hsl(var(--in) / var(--tw-text-opacity));
2994
- }
2995
- }
2996
- .link-warning {
2997
- --tw-text-opacity: 1;
2998
- color: hsl(var(--wa) / var(--tw-text-opacity));
2999
- }
3000
- @media (hover:hover) {
3001
- .link-warning:hover {
3002
- --tw-text-opacity: 1;
3003
- color: hsl(var(--wa) / var(--tw-text-opacity));
3004
- }
3005
- }
3006
- .link-error {
3007
- --tw-text-opacity: 1;
3008
- color: hsl(var(--er) / var(--tw-text-opacity));
3009
- }
3010
- @media (hover:hover) {
3011
- .link-error:hover {
3012
- --tw-text-opacity: 1;
3013
- color: hsl(var(--er) / var(--tw-text-opacity));
3014
- }
3015
- }
3016
- .link:focus {
3017
- outline: 2px solid transparent;
3018
- outline-offset: 2px;
3019
- }
3020
- .link:focus-visible {
3021
- outline: 2px solid currentColor;
3022
- outline-offset: 2px;
3023
- }
3024
- .loading {
3025
- pointer-events: none;
3026
- display: inline-block;
3027
- aspect-ratio: 1 / 1;
3028
- width: 1.5rem;
3029
- background-color: currentColor;
3030
- mask-size: 100%;
3031
- mask-repeat: no-repeat;
3032
- mask-position: center;
3033
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
3034
- }
3035
- .loading-spinner {
3036
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
3037
- }
3038
- .loading-dots {
3039
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
3040
- }
3041
- .loading-ring {
3042
- mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3043
- }
3044
- .loading-ball {
3045
- mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E");
3046
- }
3047
- .loading-bars {
3048
- mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E");
3049
- }
3050
- .loading-infinity {
3051
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E");
3052
- }
3053
- .loading-xs {
3054
- width: 1rem;
3055
- }
3056
- .loading-sm {
3057
- width: 1.25rem;
3058
- }
3059
- .loading-md {
3060
- width: 1.5rem;
3061
- }
3062
- .loading-lg {
3063
- width: 2.5rem;
3064
- }
3065
- .mask-squircle {
3066
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
3067
- }
3068
- .mask-decagon {
3069
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
3070
- }
3071
- .mask-diamond {
3072
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
3073
- }
3074
- .mask-heart {
3075
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3076
- }
3077
- .mask-hexagon {
3078
- mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3079
- }
3080
- .mask-hexagon-2 {
3081
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3082
- }
3083
- .mask-circle {
3084
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
3085
- }
3086
- .mask-parallelogram {
3087
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3088
- }
3089
- .mask-parallelogram-2 {
3090
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
3091
- }
3092
- .mask-parallelogram-3 {
3093
- mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3094
- }
3095
- .mask-parallelogram-4 {
3096
- mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
3097
- }
3098
- .mask-pentagon {
3099
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
3100
- }
3101
- .mask-square {
3102
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
3103
- }
3104
- .mask-star {
3105
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
3106
- }
3107
- .mask-star-2 {
3108
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
3109
- }
3110
- .mask-triangle {
3111
- mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
3112
- }
3113
- .mask-triangle-2 {
3114
- mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
3115
- }
3116
- .mask-triangle-3 {
3117
- mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
3118
- }
3119
- .mask-triangle-4 {
3120
- mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3121
- }
3122
- .menu {
3123
- padding: 0.5rem;
3124
- }
3125
- .menu :where(li:empty) {
3126
- background-color: hsl(var(--bc) / 0.1);
3127
- margin: 0.5rem 1rem;
3128
- height: 1px;
3129
- }
3130
- .menu :where(li ul) {
3131
- margin-left: 1rem;
3132
- padding-left: 0.5rem;
3133
- }
3134
- .menu :where(li ul):before {
3135
- position: absolute;
3136
- left: 0px;
3137
- top: 0.75rem;
3138
- bottom: 0.75rem;
3139
- width: 1px;
3140
- background-color: hsl(var(--bc) / 0.1);
3141
- content: "";
3142
- }
3143
- /* :where(& > li:not(.menu-title) > details > ul) {
3144
- @apply bg-base-100 shadow-xl rounded-box;
3145
- } */
3146
- .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
3147
- .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
3148
- padding-left: 1rem;
3149
- padding-right: 1rem;
3150
- padding-top: 0.5rem;
3151
- padding-bottom: 0.5rem;
3152
- text-align: left;
3153
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3154
- transition-duration: 200ms;
3155
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3156
- border-radius: var(--rounded-btn, 0.5rem);
3157
- }
3158
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
3159
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
3160
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
3161
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
3162
- cursor: pointer;
3163
- background-color: hsl(var(--bc) / 0.1);
3164
- --tw-text-opacity: 1;
3165
- color: hsl(var(--bc) / var(--tw-text-opacity));
3166
- outline: 2px solid transparent;
3167
- outline-offset: 2px;
3168
- }
3169
- @media (hover: hover) {
3170
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
3171
- cursor: pointer;
3172
- background-color: hsl(var(--bc) / 0.1);
3173
- --tw-text-opacity: 1;
3174
- color: hsl(var(--bc) / var(--tw-text-opacity));
3175
- outline: 2px solid transparent;
3176
- outline-offset: 2px;
3177
- }
3178
- }
3179
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
3180
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
3181
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
3182
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3183
- --tw-bg-opacity: 1;
3184
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3185
- --tw-text-opacity: 1;
3186
- color: hsl(var(--nc) / var(--tw-text-opacity));
3187
- }
3188
- @media (hover:hover) {
3189
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3190
- --tw-bg-opacity: 1;
3191
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3192
- --tw-text-opacity: 1;
3193
- color: hsl(var(--nc) / var(--tw-text-opacity));
3194
- }
3195
- }
3196
- .menu li.disabled {
3197
- color: hsl(var(--bc) / 0.3);
3198
- }
3199
- .menu :where(li > details > summary)::-webkit-details-marker {
3200
- display: none;
3201
- }
3202
- .menu :where(li > details > summary):after,
3203
- .menu :where(li > .menu-dropdown-toggle):after {
3204
- justify-self: end;
3205
- display: block;
3206
- margin-top: -0.5rem;
3207
- height: 0.5rem;
3208
- width: 0.5rem;
3209
- transform: rotate(45deg);
3210
- transition-property: transform, margin-top;
3211
- transition-duration: 0.3s;
3212
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3213
- content: "";
3214
- transform-origin: 75% 75%;
3215
- box-shadow: 2px 2px;
3216
- pointer-events: none;
3217
- }
3218
- .menu :where(li > details[open] > summary):after,
3219
- .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
3220
- transform: rotate(225deg);
3221
- margin-top: 0;
3222
- }
3223
- .menu .menu-title {
3224
- padding-left: 1rem;
3225
- padding-right: 1rem;
3226
- padding-top: 0.5rem;
3227
- padding-bottom: 0.5rem;
3228
- font-size: 0.875rem;
3229
- line-height: 1.25rem;
3230
- font-weight: 700;
3231
- color: hsl(var(--bc) / 0.4);
3232
- }
3233
- .mockup-code {
3234
- min-width: 18rem;
3235
- --tw-bg-opacity: 1;
3236
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3237
- padding-top: 1.25rem;
3238
- padding-bottom: 1.25rem;
3239
- --tw-text-opacity: 1;
3240
- color: hsl(var(--nc) / var(--tw-text-opacity));
3241
- border-radius: var(--rounded-box, 1rem);
3242
- }
3243
- .mockup-code:before {
3244
- content: "";
3245
- margin-bottom: 1rem;
3246
- display: block;
3247
- height: 0.75rem;
3248
- width: 0.75rem;
3249
- border-radius: 9999px;
3250
- opacity: 0.3;
3251
- box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
3252
- }
3253
- .mockup-code pre {
3254
- padding-right: 1.25rem;
3255
- }
3256
- .mockup-code pre:before {
3257
- content: "";
3258
- margin-right: 2ch;
3259
- }
3260
- .mockup-code pre[data-prefix]:before {
3261
- content: attr(data-prefix);
3262
- width: 2rem;
3263
- opacity: 0.5;
3264
- }
3265
- .mockup-window {
3266
- padding-top: 1.25rem;
3267
- border-radius: var(--rounded-box, 1rem);
3268
- }
3269
- .mockup-window:before {
3270
- content: "";
3271
- margin-bottom: 1rem;
3272
- display: block;
3273
- height: 0.75rem;
3274
- width: 0.75rem;
3275
- border-radius: 9999px;
3276
- opacity: 0.3;
3277
- box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
3278
- }
3279
- .mockup-phone {
3280
- display: inline-block;
3281
- border: 4px solid #444;
3282
- border-radius: 50px;
3283
- background-color: #000;
3284
- padding: 10px;
3285
- margin: 0 auto;
3286
- overflow: hidden;
3287
- }
3288
- .mockup-phone .camera {
3289
- position: relative;
3290
- top: 0px;
3291
- left: 0px;
3292
- background: #000;
3293
- height: 25px;
3294
- width: 150px;
3295
- margin: 0 auto;
3296
- border-bottom-left-radius: 17px;
3297
- border-bottom-right-radius: 17px;
3298
- z-index: 11;
3299
- }
3300
- .mockup-phone .camera:before {
3301
- content: "";
3302
- position: absolute;
3303
- top: 35%;
3304
- left: 50%;
3305
- width: 50px;
3306
- height: 4px;
3307
- border-radius: 5px;
3308
- background-color: #0c0b0e;
3309
- transform: translate(-50%, -50%);
3310
- }
3311
- .mockup-phone .camera:after {
3312
- content: "";
3313
- position: absolute;
3314
- top: 20%;
3315
- left: 70%;
3316
- width: 8px;
3317
- height: 8px;
3318
- border-radius: 5px;
3319
- background-color: #0f0b25;
3320
- }
3321
- .mockup-phone .display {
3322
- overflow: hidden;
3323
- border-radius: 40px;
3324
- margin-top: -25px;
3325
- }
3326
- .modal {
3327
- background-color: transparent;
3328
- transition-duration: 200ms;
3329
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3330
- transition-property: transform, opacity, visibility;
3331
- overflow-y: hidden;
3332
- overscroll-behavior: contain;
3333
- }
3334
- .modal:not(dialog),
3335
- .modal::backdrop {
3336
- background-color: rgba(0, 0, 0, 0.3);
3337
- animation: modal-pop 0.2s ease-out;
3338
- }
3339
- .modal-backdrop {
3340
- z-index: -1;
3341
- grid-column-start: 1;
3342
- grid-row-start: 1;
3343
- display: grid;
3344
- align-self: stretch;
3345
- justify-self: stretch;
3346
- color: transparent;
3347
- }
3348
- .modal-box {
3349
- grid-column-start: 1;
3350
- grid-row-start: 1;
3351
- width: 91.666667%;
3352
- max-width: 32rem;
3353
- --tw-scale-x: .9;
3354
- --tw-scale-y: .9;
3355
- 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));
3356
- --tw-bg-opacity: 1;
3357
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3358
- padding: 1.5rem;
3359
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3360
- transition-duration: 200ms;
3361
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3362
- border-top-left-radius: var(--rounded-box, 1rem);
3363
- border-top-right-radius: var(--rounded-box, 1rem);
3364
- border-bottom-left-radius: var(--rounded-box, 1rem);
3365
- border-bottom-right-radius: var(--rounded-box, 1rem);
3366
- box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
3367
- overflow-y: auto;
3368
- overscroll-behavior: contain;
3369
- }
3370
- .modal-open .modal-box,
3371
- .modal-toggle:checked + .modal .modal-box,
3372
- .modal:target .modal-box,
3373
- .modal[open] .modal-box {
3374
- --tw-translate-y: 0px;
3375
- --tw-scale-x: 1;
3376
- --tw-scale-y: 1;
3377
- 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));
3378
- }
3379
- .modal-action {
3380
- margin-top: 1.5rem;
3381
- justify-content: flex-end;
3382
- }
3383
- .modal-action > :not([hidden]) ~ :not([hidden]) {
3384
- --tw-space-x-reverse: 0;
3385
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3386
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3387
- }
3388
- @keyframes modal-pop {
3389
- 0% {
3390
- opacity: 0;
3391
- }
3392
- }
3393
- .navbar {
3394
- padding: var(--navbar-padding, 0.5rem);
3395
- min-height: 4rem;
3396
- width: 100%;
3397
- }
3398
- .progress {
3399
- height: 0.5rem;
3400
- border-radius: var(--rounded-box, 1rem);
3401
- }
3402
- .progress::-moz-progress-bar {
3403
- --tw-bg-opacity: 1;
3404
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3405
- }
3406
- .progress-primary::-moz-progress-bar {
3407
- --tw-bg-opacity: 1;
3408
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3409
- }
3410
- .progress-secondary::-moz-progress-bar {
3411
- --tw-bg-opacity: 1;
3412
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
3413
- }
3414
- .progress-accent::-moz-progress-bar {
3415
- --tw-bg-opacity: 1;
3416
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
3417
- }
3418
- .progress-info::-moz-progress-bar {
3419
- --tw-bg-opacity: 1;
3420
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
3421
- }
3422
- .progress-success::-moz-progress-bar {
3423
- --tw-bg-opacity: 1;
3424
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
3425
- }
3426
- .progress-warning::-moz-progress-bar {
3427
- --tw-bg-opacity: 1;
3428
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3429
- }
3430
- .progress-error::-moz-progress-bar {
3431
- --tw-bg-opacity: 1;
3432
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
3433
- }
3434
- .progress:indeterminate {
3435
- --progress-color: hsl(var(--n));
3436
- }
3437
- .progress-primary:indeterminate {
3438
- --progress-color: hsl(var(--p));
3439
- }
3440
- .progress-secondary:indeterminate {
3441
- --progress-color: hsl(var(--s));
3442
- }
3443
- .progress-accent:indeterminate {
3444
- --progress-color: hsl(var(--a));
3445
- }
3446
- .progress-info:indeterminate {
3447
- --progress-color: hsl(var(--in));
3448
- }
3449
- .progress-success:indeterminate {
3450
- --progress-color: hsl(var(--su));
3451
- }
3452
- .progress-warning:indeterminate {
3453
- --progress-color: hsl(var(--wa));
3454
- }
3455
- .progress-error:indeterminate {
3456
- --progress-color: hsl(var(--er));
3457
- }
3458
- .progress::-webkit-progress-bar {
3459
- background-color: hsl(var(--n) / 0.2);
3460
- border-radius: var(--rounded-box, 1rem);
3461
- }
3462
- .progress::-webkit-progress-value {
3463
- --tw-bg-opacity: 1;
3464
- background-color: hsl(var(--nf) / var(--tw-bg-opacity));
3465
- border-radius: var(--rounded-box, 1rem);
3466
- }
3467
- .progress-primary::-webkit-progress-value {
3468
- --tw-bg-opacity: 1;
3469
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3470
- }
3471
- .progress-secondary::-webkit-progress-value {
3472
- --tw-bg-opacity: 1;
3473
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
3474
- }
3475
- .progress-accent::-webkit-progress-value {
3476
- --tw-bg-opacity: 1;
3477
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
3478
- }
3479
- .progress-info::-webkit-progress-value {
3480
- --tw-bg-opacity: 1;
3481
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
3482
- }
3483
- .progress-success::-webkit-progress-value {
3484
- --tw-bg-opacity: 1;
3485
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
3486
- }
3487
- .progress-warning::-webkit-progress-value {
3488
- --tw-bg-opacity: 1;
3489
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3490
- }
3491
- .progress-error::-webkit-progress-value {
3492
- --tw-bg-opacity: 1;
3493
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
3494
- }
3495
-
3496
- .progress:indeterminate {
3497
- background-image: repeating-linear-gradient(
3498
- 90deg,
3499
- var(--progress-color) -1%,
3500
- var(--progress-color) 10%,
3501
- transparent 10%,
3502
- transparent 90%
3503
- );
3504
- background-size: 200%;
3505
- background-position-x: 15%;
3506
- animation: progress-loading 5s ease-in-out infinite;
3507
- }
3508
-
3509
- .progress:indeterminate::-moz-progress-bar {
3510
- background-color: hsl(var(--n) / 0.2);
3511
- background-image: repeating-linear-gradient(
3512
- 90deg,
3513
- var(--progress-color) -1%,
3514
- var(--progress-color) 10%,
3515
- transparent 10%,
3516
- transparent 90%
3517
- );
3518
- background-size: 200%;
3519
- background-position-x: 15%;
3520
- animation: progress-loading 5s ease-in-out infinite;
3521
- }
3522
-
3523
- @keyframes progress-loading {
3524
- 50% {
3525
- background-position-x: -115%;
3526
- }
3527
- }
3528
- .radial-progress {
3529
- --value: 0;
3530
- --size: 5rem;
3531
- --thickness: calc(var(--size) / 10);
3532
- }
3533
- .radial-progress:after {
3534
- background-color: currentColor;
3535
- }
3536
- .radio {
3537
- --chkbg: var(--bc);
3538
- height: 1.5rem;
3539
- width: 1.5rem;
3540
- cursor: pointer;
3541
- appearance: none;
3542
- border-radius: 9999px;
3543
- border-width: 1px;
3544
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
3545
- --tw-border-opacity: 0.2;
3546
- }
3547
- .radio:focus-visible {
3548
- outline-style: solid;
3549
- outline-width: 2px;
3550
- outline-offset: 2px;
3551
- outline-color: hsl(var(--bc) / 1);
3552
- }
3553
- .radio:checked,
3554
- .radio[aria-checked="true"] {
3555
- --tw-bg-opacity: 1;
3556
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3557
- animation: radiomark var(--animation-input, 0.2s) ease-in-out;
3558
- box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
3559
- }
3560
- .radio-primary {
3561
- --chkbg: var(--p);
3562
- --tw-border-opacity: 1;
3563
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3564
- }
3565
- @media (hover:hover) {
3566
- .radio-primary:hover {
3567
- --tw-border-opacity: 1;
3568
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3569
- }
3570
- }
3571
- .radio-primary:focus-visible {
3572
- outline-color: hsl(var(--p) / 1);
3573
- }
3574
- .radio-primary:checked,
3575
- .radio-primary[aria-checked="true"] {
3576
- --tw-border-opacity: 1;
3577
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3578
- --tw-bg-opacity: 1;
3579
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3580
- --tw-text-opacity: 1;
3581
- color: hsl(var(--pc) / var(--tw-text-opacity));
3582
- }
3583
- .radio-secondary {
3584
- --chkbg: var(--s);
3585
- --tw-border-opacity: 1;
3586
- border-color: hsl(var(--s) / var(--tw-border-opacity));
3587
- }
3588
- @media (hover:hover) {
3589
- .radio-secondary:hover {
3590
- --tw-border-opacity: 1;
3591
- border-color: hsl(var(--s) / var(--tw-border-opacity));
3592
- }
3593
- }
3594
- .radio-secondary:focus-visible {
3595
- outline-color: hsl(var(--s) / 1);
3596
- }
3597
- .radio-secondary:checked,
3598
- .radio-secondary[aria-checked="true"] {
3599
- --tw-border-opacity: 1;
3600
- border-color: hsl(var(--s) / var(--tw-border-opacity));
3601
- --tw-bg-opacity: 1;
3602
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
3603
- --tw-text-opacity: 1;
3604
- color: hsl(var(--sc) / var(--tw-text-opacity));
3605
- }
3606
- .radio-accent {
3607
- --chkbg: var(--a);
3608
- --tw-border-opacity: 1;
3609
- border-color: hsl(var(--a) / var(--tw-border-opacity));
3610
- }
3611
- @media (hover:hover) {
3612
- .radio-accent:hover {
3613
- --tw-border-opacity: 1;
3614
- border-color: hsl(var(--a) / var(--tw-border-opacity));
3615
- }
3616
- }
3617
- .radio-accent:focus-visible {
3618
- outline-color: hsl(var(--a) / 1);
3619
- }
3620
- .radio-accent:checked,
3621
- .radio-accent[aria-checked="true"] {
3622
- --tw-border-opacity: 1;
3623
- border-color: hsl(var(--a) / var(--tw-border-opacity));
3624
- --tw-bg-opacity: 1;
3625
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
3626
- --tw-text-opacity: 1;
3627
- color: hsl(var(--ac) / var(--tw-text-opacity));
3628
- }
3629
- .radio-success {
3630
- --chkbg: var(--su);
3631
- --tw-border-opacity: 1;
3632
- border-color: hsl(var(--su) / var(--tw-border-opacity));
3633
- }
3634
- @media (hover:hover) {
3635
- .radio-success:hover {
3636
- --tw-border-opacity: 1;
3637
- border-color: hsl(var(--su) / var(--tw-border-opacity));
3638
- }
3639
- }
3640
- .radio-success:focus-visible {
3641
- outline-color: hsl(var(--su) / 1);
3642
- }
3643
- .radio-success:checked,
3644
- .radio-success[aria-checked="true"] {
3645
- --tw-border-opacity: 1;
3646
- border-color: hsl(var(--su) / var(--tw-border-opacity));
3647
- --tw-bg-opacity: 1;
3648
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
3649
- --tw-text-opacity: 1;
3650
- color: hsl(var(--suc) / var(--tw-text-opacity));
3651
- }
3652
- .radio-warning {
3653
- --chkbg: var(--wa);
3654
- --tw-border-opacity: 1;
3655
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
3656
- }
3657
- @media (hover:hover) {
3658
- .radio-warning:hover {
3659
- --tw-border-opacity: 1;
3660
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
3661
- }
3662
- }
3663
- .radio-warning:focus-visible {
3664
- outline-color: hsl(var(--wa) / 1);
3665
- }
3666
- .radio-warning:checked,
3667
- .radio-warning[aria-checked="true"] {
3668
- --tw-border-opacity: 1;
3669
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
3670
- --tw-bg-opacity: 1;
3671
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3672
- --tw-text-opacity: 1;
3673
- color: hsl(var(--wac) / var(--tw-text-opacity));
3674
- }
3675
- .radio-info {
3676
- --chkbg: var(--in);
3677
- --tw-border-opacity: 1;
3678
- border-color: hsl(var(--in) / var(--tw-border-opacity));
3679
- }
3680
- @media (hover:hover) {
3681
- .radio-info:hover {
3682
- --tw-border-opacity: 1;
3683
- border-color: hsl(var(--in) / var(--tw-border-opacity));
3684
- }
3685
- }
3686
- .radio-info:focus-visible {
3687
- outline-color: hsl(var(--in) / 1);
3688
- }
3689
- .radio-info:checked,
3690
- .radio-info[aria-checked="true"] {
3691
- --tw-border-opacity: 1;
3692
- border-color: hsl(var(--in) / var(--tw-border-opacity));
3693
- --tw-bg-opacity: 1;
3694
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
3695
- --tw-text-opacity: 1;
3696
- color: hsl(var(--inc) / var(--tw-text-opacity));
3697
- }
3698
- .radio-error {
3699
- --chkbg: var(--er);
3700
- --tw-border-opacity: 1;
3701
- border-color: hsl(var(--er) / var(--tw-border-opacity));
3702
- }
3703
- @media (hover:hover) {
3704
- .radio-error:hover {
3705
- --tw-border-opacity: 1;
3706
- border-color: hsl(var(--er) / var(--tw-border-opacity));
3707
- }
3708
- }
3709
- .radio-error:focus-visible {
3710
- outline-color: hsl(var(--er) / 1);
3711
- }
3712
- .radio-error:checked,
3713
- .radio-error[aria-checked="true"] {
3714
- --tw-border-opacity: 1;
3715
- border-color: hsl(var(--er) / var(--tw-border-opacity));
3716
- --tw-bg-opacity: 1;
3717
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
3718
- --tw-text-opacity: 1;
3719
- color: hsl(var(--erc) / var(--tw-text-opacity));
3720
- }
3721
- .radio:disabled {
3722
- cursor: not-allowed;
3723
- opacity: 0.2;
3724
- }
3725
-
3726
- @keyframes radiomark {
3727
- 0% {
3728
- box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset;
3729
- }
3730
- 50% {
3731
- box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset;
3732
- }
3733
- 100% {
3734
- box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
3735
- }
3736
- }
3737
-
3738
- /* backward compatibility */
3739
-
3740
- .radio-mark {
3741
- display: none;
3742
- }
3743
- .range {
3744
- appearance: none;
3745
- -webkit-appearance: none;
3746
- --range-shdw: var(--bc);
3747
- overflow: hidden;
3748
- background-color: transparent;
3749
- border-radius: var(--rounded-box, 1rem);
3750
- }
3751
- .range:focus-visible::-webkit-slider-thumb {
3752
- --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
3753
- }
3754
- .range:focus-visible::-moz-range-thumb {
3755
- --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
3756
- }
3757
- .range::-webkit-slider-runnable-track {
3758
- height: 0.5rem;
3759
- width: 100%;
3760
- background-color: hsl(var(--bc) / 0.1);
3761
- border-radius: var(--rounded-box, 1rem);
3762
- }
3763
- .range::-moz-range-track {
3764
- height: 0.5rem;
3765
- width: 100%;
3766
- background-color: hsl(var(--bc) / 0.1);
3767
- border-radius: var(--rounded-box, 1rem);
3768
- }
3769
- .range::-webkit-slider-thumb {
3770
- position: relative;
3771
- height: 1.5rem;
3772
- width: 1.5rem;
3773
- border-style: none;
3774
- --tw-bg-opacity: 1;
3775
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3776
- border-radius: var(--rounded-box, 1rem);
3777
- appearance: none;
3778
- -webkit-appearance: none;
3779
- top: 50%;
3780
- color: hsl(var(--range-shdw));
3781
- transform: translateY(-50%);
3782
- --filler-size: 100rem;
3783
- --filler-offset: 0.6rem;
3784
- box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
3785
- calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3786
- }
3787
- .range::-moz-range-thumb {
3788
- position: relative;
3789
- height: 1.5rem;
3790
- width: 1.5rem;
3791
- border-style: none;
3792
- --tw-bg-opacity: 1;
3793
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3794
- border-radius: var(--rounded-box, 1rem);
3795
- top: 50%;
3796
- color: hsl(var(--range-shdw));
3797
- --filler-size: 100rem;
3798
- --filler-offset: 0.5rem;
3799
- box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
3800
- calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3801
- }
3802
- .range-primary {
3803
- --range-shdw: var(--p);
3804
- }
3805
- .range-secondary {
3806
- --range-shdw: var(--s);
3807
- }
3808
- .range-accent {
3809
- --range-shdw: var(--a);
3810
- }
3811
- .range-success {
3812
- --range-shdw: var(--su);
3813
- }
3814
- .range-warning {
3815
- --range-shdw: var(--wa);
3816
- }
3817
- .range-info {
3818
- --range-shdw: var(--in);
3819
- }
3820
- .range-error {
3821
- --range-shdw: var(--er);
3822
- }
3823
- .rating input {
3824
- appearance: none;
3825
- -webkit-appearance: none;
3826
- }
3827
- .rating :where(input) {
3828
- animation: rating-pop var(--animation-input, 0.25s) ease-out;
3829
- height: 1.5rem;
3830
- width: 1.5rem;
3831
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3832
- --tw-bg-opacity: 1;
3833
- }
3834
- .rating .rating-hidden {
3835
- width: 0.5rem;
3836
- background-color: transparent;
3837
- }
3838
- .rating input:checked ~ input,
3839
- .rating input[aria-checked="true"] ~ input {
3840
- --tw-bg-opacity: 0.2;
3841
- }
3842
- .rating input:focus-visible {
3843
- transition-property: transform;
3844
- transition-duration: 300ms;
3845
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3846
- transform: translateY(-0.125em);
3847
- }
3848
- .rating input:active:focus {
3849
- animation: none;
3850
- transform: translateY(-0.125em);
3851
- }
3852
- .rating-half :where(input:not(.rating-hidden)) {
3853
- width: 0.75rem;
3854
- }
3855
- @keyframes rating-pop {
3856
- 0% {
3857
- transform: translateY(-0.125em);
3858
- }
3859
- 40% {
3860
- transform: translateY(-0.125em);
3861
- }
3862
- 100% {
3863
- transform: translateY(0);
3864
- }
3865
- }
3866
- .select {
3867
- border-width: 1px;
3868
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
3869
- --tw-border-opacity: 0;
3870
- --tw-bg-opacity: 1;
3871
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3872
- padding-right: 2.5rem;
3873
- font-weight: 600;
3874
- border-radius: var(--rounded-btn, 0.5rem);
3875
- }
3876
- .select-bordered {
3877
- --tw-border-opacity: 0.2;
3878
- }
3879
- .select {
3880
- background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
3881
- linear-gradient(135deg, currentColor 50%, transparent 50%);
3882
- background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
3883
- background-size: 4px 4px, 4px 4px;
3884
- background-repeat: no-repeat;
3885
- }
3886
- .select:focus {
3887
- outline-style: solid;
3888
- outline-width: 2px;
3889
- outline-offset: 2px;
3890
- outline-color: hsl(var(--bc) / 0.2);
3891
- }
3892
- .select-ghost {
3893
- --tw-bg-opacity: 0.05;
3894
- }
3895
- .select-ghost:focus {
3896
- --tw-bg-opacity: 1;
3897
- --tw-text-opacity: 1;
3898
- color: hsl(var(--bc) / var(--tw-text-opacity));
3899
- }
3900
- .select-primary {
3901
- --tw-border-opacity: 1;
3902
- border-color: hsl(var(--p) / var(--tw-border-opacity));
3903
- }
3904
- .select-primary:focus {
3905
- outline-color: hsl(var(--p) / 1);
3906
- }
3907
- .select-secondary {
3908
- --tw-border-opacity: 1;
3909
- border-color: hsl(var(--s) / var(--tw-border-opacity));
3910
- }
3911
- .select-secondary:focus {
3912
- outline-color: hsl(var(--s) / 1);
3913
- }
3914
- .select-accent {
3915
- --tw-border-opacity: 1;
3916
- border-color: hsl(var(--a) / var(--tw-border-opacity));
3917
- }
3918
- .select-accent:focus {
3919
- outline-color: hsl(var(--a) / 1);
3920
- }
3921
- .select-info {
3922
- --tw-border-opacity: 1;
3923
- border-color: hsl(var(--in) / var(--tw-border-opacity));
3924
- }
3925
- .select-info:focus {
3926
- outline-color: hsl(var(--in) / 1);
3927
- }
3928
- .select-success {
3929
- --tw-border-opacity: 1;
3930
- border-color: hsl(var(--su) / var(--tw-border-opacity));
3931
- }
3932
- .select-success:focus {
3933
- outline-color: hsl(var(--su) / 1);
3934
- }
3935
- .select-warning {
3936
- --tw-border-opacity: 1;
3937
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
3938
- }
3939
- .select-warning:focus {
3940
- outline-color: hsl(var(--wa) / 1);
3941
- }
3942
- .select-error {
3943
- --tw-border-opacity: 1;
3944
- border-color: hsl(var(--er) / var(--tw-border-opacity));
3945
- }
3946
- .select-error:focus {
3947
- outline-color: hsl(var(--er) / 1);
3948
- }
3949
- .select-disabled,
3950
- .select:disabled,
3951
- .select[disabled] {
3952
- cursor: not-allowed;
3953
- --tw-border-opacity: 1;
3954
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
3955
- --tw-bg-opacity: 1;
3956
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
3957
- --tw-text-opacity: 0.2;
3958
- }
3959
- .select-disabled::placeholder,
3960
- .select:disabled::placeholder,
3961
- .select[disabled]::placeholder {
3962
- color: hsl(var(--bc) / var(--tw-placeholder-opacity));
3963
- --tw-placeholder-opacity: 0.2;
3964
- }
3965
- .select-multiple,
3966
- .select[multiple],
3967
- .select[size].select:not([size="1"]) {
3968
- background-image: none;
3969
- padding-right: 1rem;
3970
- }
3971
-
3972
- [dir="rtl"] .select {
3973
- background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
3974
- }
3975
- .stack {
3976
- place-items: center;
3977
- align-items: flex-end
3978
- }
3979
- .stack > * {
3980
- width: 100%;
3981
- opacity: 0.6
3982
- }
3983
- .stack > *:nth-child(2) {
3984
- opacity: 0.8
3985
- }
3986
- .stack > *:nth-child(1) {
3987
- opacity: 1
3988
- }
3989
- .stats {
3990
- --tw-bg-opacity: 1;
3991
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3992
- --tw-text-opacity: 1;
3993
- color: hsl(var(--bc) / var(--tw-text-opacity));
3994
- border-radius: var(--rounded-box, 1rem)
3995
- }
3996
- :where(.stats) > :not([hidden]) ~ :not([hidden]) {
3997
- --tw-divide-x-reverse: 0;
3998
- border-right-width: calc(1px * var(--tw-divide-x-reverse));
3999
- border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
4000
- --tw-divide-y-reverse: 0;
4001
- border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
4002
- border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
4003
- }
4004
- :where(.stats) {
4005
- overflow-x: auto
4006
- }
4007
- .stat {
4008
- column-gap: 1rem;
4009
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4010
- --tw-border-opacity: 0.1;
4011
- padding-left: 1.5rem;
4012
- padding-right: 1.5rem;
4013
- padding-top: 1rem;
4014
- padding-bottom: 1rem
4015
- }
4016
- .stat-title {
4017
- color: hsl(var(--bc) / 0.6)
4018
- }
4019
- .stat-value {
4020
- font-size: 2.25rem;
4021
- line-height: 2.5rem;
4022
- font-weight: 800
4023
- }
4024
- .stat-desc {
4025
- font-size: 0.75rem;
4026
- line-height: 1rem;
4027
- color: hsl(var(--bc) / 0.6)
4028
- }
4029
- .stat-actions {
4030
- margin-top: 1rem
4031
- }
4032
- /* .stat + .stat {
4033
- @apply border-l border-base-content border-opacity-10;
4034
- }
4035
- .stats.grid-flow-row {
4036
- .stat + .stat {
4037
- @apply border-l-0 border-t;
4038
- }
4039
- } */
4040
- .steps {
4041
- /* &-vertical{
4042
- .step {
4043
- gap: .5rem;
4044
- grid-template-columns: 40px 1fr;
4045
- grid-template-rows: auto;
4046
- min-height: 4rem;
4047
- justify-items: start;
4048
- &:before {
4049
- @apply w-2 h-full top-0 transform -translate-y-1/2 -translate-x-1/2;
4050
- margin-left: 50%;
4051
- }
4052
- }
4053
- } */
4054
- }
4055
- /* &,
4056
- &-horizontal{ */
4057
- .steps .step {
4058
- grid-template-rows: 40px 1fr;
4059
- grid-template-columns: auto;
4060
- min-width: 4rem;
4061
- }
4062
- .steps .step:before {
4063
- top: 0px;
4064
- grid-column-start: 1;
4065
- grid-row-start: 1;
4066
- height: 0.5rem;
4067
- width: 100%;
4068
- 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));
4069
- --tw-bg-opacity: 1;
4070
- background-color: hsl(var(--b3) / var(--tw-bg-opacity));
4071
- --tw-text-opacity: 1;
4072
- color: hsl(var(--bc) / var(--tw-text-opacity));
4073
- content: "";
4074
- margin-left: -100%;
4075
- }
4076
- /* } */
4077
- .steps .step:after {
4078
- content: counter(step);
4079
- counter-increment: step;
4080
- z-index: 1;
4081
- position: relative;
4082
- grid-column-start: 1;
4083
- grid-row-start: 1;
4084
- display: grid;
4085
- height: 2rem;
4086
- width: 2rem;
4087
- place-items: center;
4088
- place-self: center;
4089
- border-radius: 9999px;
4090
- --tw-bg-opacity: 1;
4091
- background-color: hsl(var(--b3) / var(--tw-bg-opacity));
4092
- --tw-text-opacity: 1;
4093
- color: hsl(var(--bc) / var(--tw-text-opacity));
4094
- }
4095
- .steps .step:first-child:before {
4096
- content: none;
4097
- }
4098
- .steps .step[data-content]:after {
4099
- content: attr(data-content);
4100
- }
4101
- .steps .step-neutral + .step-neutral:before,
4102
- .steps .step-neutral:after {
4103
- --tw-bg-opacity: 1;
4104
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
4105
- --tw-text-opacity: 1;
4106
- color: hsl(var(--nc) / var(--tw-text-opacity));
4107
- }
4108
- .steps .step-primary + .step-primary:before,
4109
- .steps .step-primary:after {
4110
- --tw-bg-opacity: 1;
4111
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
4112
- --tw-text-opacity: 1;
4113
- color: hsl(var(--pc) / var(--tw-text-opacity));
4114
- }
4115
- .steps .step-secondary + .step-secondary:before,
4116
- .steps .step-secondary:after {
4117
- --tw-bg-opacity: 1;
4118
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
4119
- --tw-text-opacity: 1;
4120
- color: hsl(var(--sc) / var(--tw-text-opacity));
4121
- }
4122
- .steps .step-accent + .step-accent:before,
4123
- .steps .step-accent:after {
4124
- --tw-bg-opacity: 1;
4125
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
4126
- --tw-text-opacity: 1;
4127
- color: hsl(var(--ac) / var(--tw-text-opacity));
4128
- }
4129
- .steps .step-info + .step-info:before {
4130
- --tw-bg-opacity: 1;
4131
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
4132
- }
4133
- .steps .step-info:after {
4134
- --tw-bg-opacity: 1;
4135
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
4136
- --tw-text-opacity: 1;
4137
- color: hsl(var(--inc) / var(--tw-text-opacity));
4138
- }
4139
- .steps .step-success + .step-success:before {
4140
- --tw-bg-opacity: 1;
4141
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
4142
- }
4143
- .steps .step-success:after {
4144
- --tw-bg-opacity: 1;
4145
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
4146
- --tw-text-opacity: 1;
4147
- color: hsl(var(--suc) / var(--tw-text-opacity));
4148
- }
4149
- .steps .step-warning + .step-warning:before {
4150
- --tw-bg-opacity: 1;
4151
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
4152
- }
4153
- .steps .step-warning:after {
4154
- --tw-bg-opacity: 1;
4155
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
4156
- --tw-text-opacity: 1;
4157
- color: hsl(var(--wac) / var(--tw-text-opacity));
4158
- }
4159
- .steps .step-error + .step-error:before {
4160
- --tw-bg-opacity: 1;
4161
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
4162
- }
4163
- .steps .step-error:after {
4164
- --tw-bg-opacity: 1;
4165
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
4166
- --tw-text-opacity: 1;
4167
- color: hsl(var(--erc) / var(--tw-text-opacity));
4168
- }
4169
- .swap {
4170
- cursor: pointer;
4171
- }
4172
-
4173
- .swap > * {
4174
- transition-duration: 300ms;
4175
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4176
- transition-property: transform, opacity;
4177
- }
4178
-
4179
- .swap-rotate .swap-on,
4180
- .swap-rotate .swap-indeterminate,
4181
- .swap-rotate input:indeterminate ~ .swap-on {
4182
- --tw-rotate: 45deg;
4183
- 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));
4184
- }
4185
-
4186
- .swap-rotate input:checked ~ .swap-off,
4187
- .swap-rotate.swap-active .swap-off,
4188
- .swap-rotate input:indeterminate ~ .swap-off {
4189
- --tw-rotate: -45deg;
4190
- 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));
4191
- }
4192
-
4193
- .swap-rotate input:checked ~ .swap-on,
4194
- .swap-rotate.swap-active .swap-on,
4195
- .swap-rotate input:indeterminate ~ .swap-indeterminate {
4196
- --tw-rotate: 0deg;
4197
- 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));
4198
- }
4199
-
4200
- .swap-flip {
4201
- transform-style: preserve-3d;
4202
- perspective: 16em;
4203
- }
4204
-
4205
- .swap-flip .swap-on,
4206
- .swap-flip .swap-indeterminate,
4207
- .swap-flip input:indeterminate ~ .swap-on {
4208
- transform: rotateY(180deg);
4209
- backface-visibility: hidden;
4210
- opacity: 1;
4211
- }
4212
-
4213
- .swap-flip input:checked ~ .swap-off,
4214
- .swap-flip.swap-active .swap-off,
4215
- .swap-flip input:indeterminate ~ .swap-off {
4216
- transform: rotateY(-180deg);
4217
- backface-visibility: hidden;
4218
- opacity: 1;
4219
- }
4220
-
4221
- .swap-flip input:checked ~ .swap-on,
4222
- .swap-flip.swap-active .swap-on,
4223
- .swap-flip input:indeterminate ~ .swap-indeterminate {
4224
- transform: rotateY(0deg);
4225
- }
4226
- .tab {
4227
- --tw-text-opacity: 0.5;
4228
- }@media (hover:hover) {.tab:hover {
4229
- --tw-text-opacity: 1;
4230
- }
4231
- }.tab {
4232
- --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
4233
- --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
4234
- --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
4235
- color: var(--tab-color);
4236
- padding-left: var(--tab-padding, 1rem);
4237
- padding-right: var(--tab-padding, 1rem);
4238
- }
4239
- .tab.tab-active:not(.tab-disabled):not([disabled]) {
4240
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4241
- --tw-border-opacity: 1;
4242
- --tw-text-opacity: 1;
4243
- }
4244
- .tab:focus {
4245
- outline: 2px solid transparent;
4246
- outline-offset: 2px;
4247
- }
4248
- .tab:focus-visible {
4249
- outline: 2px solid currentColor;
4250
- outline-offset: -3px;
4251
- }
4252
- .tab:focus-visible.tab-lifted {
4253
- border-bottom-right-radius: var(--tab-radius, 0.5rem);
4254
- border-bottom-left-radius: var(--tab-radius, 0.5rem);
4255
- }
4256
- /* disabled */
4257
- .tab-disabled,
4258
- .tab[disabled] {
4259
- cursor: not-allowed;
4260
- color: hsl(var(--bc) / var(--tw-text-opacity));
4261
- --tw-text-opacity: 0.2;
4262
- }
4263
- @media (hover: hover) {
4264
- .tab[disabled],
4265
- .tab[disabled]:hover {
4266
- cursor: not-allowed;
4267
- color: hsl(var(--bc) / var(--tw-text-opacity));
4268
- --tw-text-opacity: 0.2;
4269
- }
4270
- }
4271
- .tab-bordered {
4272
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4273
- --tw-border-opacity: 0.2;
4274
- border-style: solid;
4275
- border-bottom-width: calc(var(--tab-border, 1px) + 1px);
4276
- }
4277
- .tab-lifted {
4278
- border: var(--tab-border, 1px) solid transparent;
4279
- border-width: 0 0 var(--tab-border, 1px) 0;
4280
- border-top-left-radius: var(--tab-radius, 0.5rem);
4281
- border-top-right-radius: var(--tab-radius, 0.5rem);
4282
- border-bottom-color: var(--tab-border-color);
4283
- padding-left: var(--tab-padding, 1rem);
4284
- padding-right: var(--tab-padding, 1rem);
4285
- padding-top: var(--tab-border, 1px);
4286
- }
4287
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
4288
- background-color: var(--tab-bg);
4289
- border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
4290
- border-left-color: var(--tab-border-color);
4291
- border-right-color: var(--tab-border-color);
4292
- border-top-color: var(--tab-border-color);
4293
- padding-left: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
4294
- padding-right: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
4295
- padding-bottom: var(--tab-border, 1px);
4296
- padding-top: 0;
4297
- }
4298
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before,
4299
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
4300
- z-index: 1;
4301
- content: "";
4302
- display: block;
4303
- position: absolute;
4304
- width: var(--tab-radius, 0.5rem);
4305
- height: var(--tab-radius, 0.5rem);
4306
- bottom: 0;
4307
- --tab-grad: calc(68% - var(--tab-border, 1px));
4308
- --tab-corner-bg: radial-gradient(
4309
- circle at var(--circle-pos),
4310
- transparent var(--tab-grad),
4311
- var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
4312
- var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
4313
- var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
4314
- );
4315
- }
4316
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
4317
- left: calc(var(--tab-radius, 0.5rem) * -1);
4318
- --circle-pos: top left;
4319
- background-image: var(--tab-corner-bg);
4320
- }
4321
- /* RTL quick fix */
4322
- [dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
4323
- --circle-pos: top right;
4324
- }
4325
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
4326
- right: calc(var(--tab-radius, 0.5rem) * -1);
4327
- --circle-pos: top right;
4328
- background-image: var(--tab-corner-bg);
4329
- }
4330
- /* RTL quick fix */
4331
- [dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
4332
- --circle-pos: top left;
4333
- }
4334
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before {
4335
- background: none;
4336
- }
4337
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:after {
4338
- background: none;
4339
- }
4340
- .tab-lifted.tab-active:not(.tab-disabled):not([disabled])
4341
- + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
4342
- background: none;
4343
- }
4344
- .tabs-boxed {
4345
- --tw-bg-opacity: 1;
4346
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
4347
- padding: 0.25rem;
4348
- border-radius: var(--rounded-btn, 0.5rem);
4349
- }
4350
- .tabs-boxed .tab {
4351
- border-radius: var(--rounded-btn, 0.5rem);
4352
- }
4353
- .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]) {
4354
- --tw-bg-opacity: 1;
4355
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
4356
- --tw-text-opacity: 1;
4357
- color: hsl(var(--pc) / var(--tw-text-opacity));
4358
- }
4359
- @media (hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
4360
- --tw-text-opacity: 1;
4361
- color: hsl(var(--pc) / var(--tw-text-opacity));
4362
- }
4363
- }
4364
- .table {
4365
- text-align: left;
4366
- font-size: 0.875rem;
4367
- line-height: 1.25rem;
4368
- border-radius: var(--rounded-box, 1rem)
4369
- }
4370
- .table :where(th, td) {
4371
- padding-left: 1rem;
4372
- padding-right: 1rem;
4373
- padding-top: 0.75rem;
4374
- padding-bottom: 0.75rem;
4375
- vertical-align: middle
4376
- }
4377
- .table tr.active,
4378
- .table tr.active:nth-child(even),
4379
- .table-zebra tbody tr:nth-child(even) {
4380
- --tw-bg-opacity: 1;
4381
- background-color: hsl(var(--b2) / var(--tw-bg-opacity))
4382
- }
4383
- @media (hover:hover) {
4384
- .table tr.hover:hover,
4385
- .table tr.hover:nth-child(even):hover {
4386
- --tw-bg-opacity: 1;
4387
- background-color: hsl(var(--b2) / var(--tw-bg-opacity))
4388
- }
4389
- }
4390
- .table-zebra tr.active,
4391
- .table-zebra tr.active:nth-child(even),
4392
- .table-zebra-zebra tbody tr:nth-child(even) {
4393
- --tw-bg-opacity: 1;
4394
- background-color: hsl(var(--b3) / var(--tw-bg-opacity))
4395
- }
4396
- @media (hover:hover) {
4397
- .table-zebra tr.hover:hover,
4398
- .table-zebra tr.hover:nth-child(even):hover {
4399
- --tw-bg-opacity: 1;
4400
- background-color: hsl(var(--b3) / var(--tw-bg-opacity))
4401
- }
4402
- }
4403
- .table :where(thead, tbody) :where(tr:not(:last-child)),
4404
- .table :where(thead, tbody) :where(tr:first-child:last-child) {
4405
- border-bottom-width: 1px;
4406
- --tw-border-opacity: 1;
4407
- border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity))
4408
- }
4409
- .table :where(thead, tfoot) {
4410
- white-space: nowrap;
4411
- font-size: 0.75rem;
4412
- line-height: 1rem;
4413
- font-weight: 700;
4414
- color: hsl(var(--bc) / 0.6)
4415
- }
4416
- .textarea {
4417
- border-width: 1px;
4418
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4419
- --tw-border-opacity: 0;
4420
- --tw-bg-opacity: 1;
4421
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
4422
- border-radius: var(--rounded-btn, 0.5rem)
4423
- }
4424
- .textarea-bordered {
4425
- --tw-border-opacity: 0.2
4426
- }
4427
- .textarea:focus {
4428
- outline-style: solid;
4429
- outline-width: 2px;
4430
- outline-offset: 2px;
4431
- outline-color: hsl(var(--bc) / 0.2)
4432
- }
4433
- .textarea-ghost {
4434
- --tw-bg-opacity: 0.05
4435
- }
4436
- .textarea-ghost:focus {
4437
- --tw-bg-opacity: 1;
4438
- --tw-text-opacity: 1;
4439
- color: hsl(var(--bc) / var(--tw-text-opacity));
4440
- box-shadow: none
4441
- }
4442
- .textarea-primary {
4443
- --tw-border-opacity: 1;
4444
- border-color: hsl(var(--p) / var(--tw-border-opacity))
4445
- }
4446
- .textarea-primary:focus {
4447
- outline-color: hsl(var(--p) / 1)
4448
- }
4449
- .textarea-secondary {
4450
- --tw-border-opacity: 1;
4451
- border-color: hsl(var(--s) / var(--tw-border-opacity))
4452
- }
4453
- .textarea-secondary:focus {
4454
- outline-color: hsl(var(--s) / 1)
4455
- }
4456
- .textarea-accent {
4457
- --tw-border-opacity: 1;
4458
- border-color: hsl(var(--a) / var(--tw-border-opacity))
4459
- }
4460
- .textarea-accent:focus {
4461
- outline-color: hsl(var(--a) / 1)
4462
- }
4463
- .textarea-info {
4464
- --tw-border-opacity: 1;
4465
- border-color: hsl(var(--in) / var(--tw-border-opacity))
4466
- }
4467
- .textarea-info:focus {
4468
- outline-color: hsl(var(--in) / 1)
4469
- }
4470
- .textarea-success {
4471
- --tw-border-opacity: 1;
4472
- border-color: hsl(var(--su) / var(--tw-border-opacity))
4473
- }
4474
- .textarea-success:focus {
4475
- outline-color: hsl(var(--su) / 1)
4476
- }
4477
- .textarea-warning {
4478
- --tw-border-opacity: 1;
4479
- border-color: hsl(var(--wa) / var(--tw-border-opacity))
4480
- }
4481
- .textarea-warning:focus {
4482
- outline-color: hsl(var(--wa) / 1)
4483
- }
4484
- .textarea-error {
4485
- --tw-border-opacity: 1;
4486
- border-color: hsl(var(--er) / var(--tw-border-opacity))
4487
- }
4488
- .textarea-error:focus {
4489
- outline-color: hsl(var(--er) / 1)
4490
- }
4491
- .textarea-disabled,
4492
- .textarea:disabled,
4493
- .textarea[disabled] {
4494
- cursor: not-allowed;
4495
- --tw-border-opacity: 1;
4496
- border-color: hsl(var(--b2) / var(--tw-border-opacity));
4497
- --tw-bg-opacity: 1;
4498
- background-color: hsl(var(--b2) / var(--tw-bg-opacity));
4499
- --tw-text-opacity: 0.2
4500
- }
4501
- .textarea-disabled::placeholder,
4502
- .textarea:disabled::placeholder,
4503
- .textarea[disabled]::placeholder {
4504
- color: hsl(var(--bc) / var(--tw-placeholder-opacity));
4505
- --tw-placeholder-opacity: 0.2
4506
- }
4507
- .toast {
4508
- gap: 0.5rem;
4509
- padding: 1rem;
4510
- }
4511
- .toast > * {
4512
- animation: toast-pop 0.25s ease-out;
4513
- }
4514
-
4515
- @keyframes toast-pop {
4516
- 0% {
4517
- transform: scale(0.9);
4518
- opacity: 0;
4519
- }
4520
- 100% {
4521
- transform: scale(1);
4522
- opacity: 1;
4523
- }
4524
- }
4525
- .toggle {
4526
- --tglbg: hsl(var(--b1));
4527
- --handleoffset: 1.5rem;
4528
- --handleoffsetcalculator: calc(var(--handleoffset) * -1);
4529
- --togglehandleborder: 0 0;
4530
- height: 1.5rem;
4531
- width: 3rem;
4532
- cursor: pointer;
4533
- appearance: none;
4534
- border-width: 1px;
4535
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4536
- --tw-border-opacity: 0.2;
4537
- background-color: hsl(var(--bc) / var(--tw-bg-opacity));
4538
- --tw-bg-opacity: 0.5;
4539
- transition-duration: 300ms;
4540
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4541
- border-radius: var(--rounded-badge, 1.9rem);
4542
- transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
4543
- box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset,
4544
- var(--togglehandleborder);
4545
- }
4546
- [dir="rtl"] .toggle {
4547
- --handleoffsetcalculator: calc(var(--handleoffset) * 1);
4548
- }
4549
- .toggle:focus-visible {
4550
- outline-style: solid;
4551
- outline-width: 2px;
4552
- outline-offset: 2px;
4553
- outline-color: hsl(var(--bc) / 0.2);
4554
- }
4555
- .toggle:checked,
4556
- .toggle[checked="true"],
4557
- .toggle[aria-checked="true"] {
4558
- --handleoffsetcalculator: var(--handleoffset);
4559
- --tw-border-opacity: 1;
4560
- --tw-bg-opacity: 1;
4561
- }
4562
- [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] {
4563
- --handleoffsetcalculator: calc(var(--handleoffset) * -1);
4564
- }
4565
- .toggle:indeterminate {
4566
- --tw-border-opacity: 1;
4567
- --tw-bg-opacity: 1;
4568
- box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
4569
- calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
4570
- }
4571
- [dir="rtl"] .toggle:indeterminate {
4572
- box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
4573
- calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
4574
- }
4575
- .toggle-primary:focus-visible {
4576
- outline-color: hsl(var(--p) / 1);
4577
- }
4578
- .toggle-primary:checked,
4579
- .toggle-primary[checked="true"],
4580
- .toggle-primary[aria-checked="true"] {
4581
- border-color: hsl(var(--p) / var(--tw-border-opacity));
4582
- --tw-border-opacity: 0.1;
4583
- --tw-bg-opacity: 1;
4584
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
4585
- --tw-text-opacity: 1;
4586
- color: hsl(var(--pc) / var(--tw-text-opacity));
4587
- }
4588
- .toggle-secondary:focus-visible {
4589
- outline-color: hsl(var(--s) / 1);
4590
- }
4591
- .toggle-secondary:checked,
4592
- .toggle-secondary[checked="true"],
4593
- .toggle-secondary[aria-checked="true"] {
4594
- border-color: hsl(var(--s) / var(--tw-border-opacity));
4595
- --tw-border-opacity: 0.1;
4596
- --tw-bg-opacity: 1;
4597
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
4598
- --tw-text-opacity: 1;
4599
- color: hsl(var(--sc) / var(--tw-text-opacity));
4600
- }
4601
- .toggle-accent:focus-visible {
4602
- outline-color: hsl(var(--a) / 1);
4603
- }
4604
- .toggle-accent:checked,
4605
- .toggle-accent[checked="true"],
4606
- .toggle-accent[aria-checked="true"] {
4607
- border-color: hsl(var(--a) / var(--tw-border-opacity));
4608
- --tw-border-opacity: 0.1;
4609
- --tw-bg-opacity: 1;
4610
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
4611
- --tw-text-opacity: 1;
4612
- color: hsl(var(--ac) / var(--tw-text-opacity));
4613
- }
4614
- .toggle-success:focus-visible {
4615
- outline-color: hsl(var(--su) / 1);
4616
- }
4617
- .toggle-success:checked,
4618
- .toggle-success[checked="true"],
4619
- .toggle-success[aria-checked="true"] {
4620
- border-color: hsl(var(--su) / var(--tw-border-opacity));
4621
- --tw-border-opacity: 0.1;
4622
- --tw-bg-opacity: 1;
4623
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
4624
- --tw-text-opacity: 1;
4625
- color: hsl(var(--suc) / var(--tw-text-opacity));
4626
- }
4627
- .toggle-warning:focus-visible {
4628
- outline-color: hsl(var(--wa) / 1);
4629
- }
4630
- .toggle-warning:checked,
4631
- .toggle-warning[checked="true"],
4632
- .toggle-warning[aria-checked="true"] {
4633
- border-color: hsl(var(--wa) / var(--tw-border-opacity));
4634
- --tw-border-opacity: 0.1;
4635
- --tw-bg-opacity: 1;
4636
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
4637
- --tw-text-opacity: 1;
4638
- color: hsl(var(--wac) / var(--tw-text-opacity));
4639
- }
4640
- .toggle-info:focus-visible {
4641
- outline-color: hsl(var(--in) / 1);
4642
- }
4643
- .toggle-info:checked,
4644
- .toggle-info[checked="true"],
4645
- .toggle-info[aria-checked="true"] {
4646
- border-color: hsl(var(--in) / var(--tw-border-opacity));
4647
- --tw-border-opacity: 0.1;
4648
- --tw-bg-opacity: 1;
4649
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
4650
- --tw-text-opacity: 1;
4651
- color: hsl(var(--inc) / var(--tw-text-opacity));
4652
- }
4653
- .toggle-error:focus-visible {
4654
- outline-color: hsl(var(--er) / 1);
4655
- }
4656
- .toggle-error:checked,
4657
- .toggle-error[checked="true"],
4658
- .toggle-error[aria-checked="true"] {
4659
- border-color: hsl(var(--er) / var(--tw-border-opacity));
4660
- --tw-border-opacity: 0.1;
4661
- --tw-bg-opacity: 1;
4662
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
4663
- --tw-text-opacity: 1;
4664
- color: hsl(var(--erc) / var(--tw-text-opacity));
4665
- }
4666
- .toggle:disabled {
4667
- cursor: not-allowed;
4668
- --tw-border-opacity: 1;
4669
- border-color: hsl(var(--bc) / var(--tw-border-opacity));
4670
- background-color: transparent;
4671
- opacity: 0.3;
4672
- --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
4673
- var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
4674
- }
4675
-
4676
- /* backward compatibility */
4677
-
4678
- .toggle-mark {
4679
- display: none;
4680
- }
4681
- .tooltip.tooltip-primary {
4682
- --tooltip-color: hsl(var(--p));
4683
- --tooltip-text-color: hsl(var(--pc));
4684
- }
4685
- .tooltip.tooltip-secondary {
4686
- --tooltip-color: hsl(var(--s));
4687
- --tooltip-text-color: hsl(var(--sc));
4688
- }
4689
- .tooltip.tooltip-accent {
4690
- --tooltip-color: hsl(var(--a));
4691
- --tooltip-text-color: hsl(var(--ac));
4692
- }
4693
- .tooltip.tooltip-info {
4694
- --tooltip-color: hsl(var(--in));
4695
- --tooltip-text-color: hsl(var(--inc));
4696
- }
4697
- .tooltip.tooltip-success {
4698
- --tooltip-color: hsl(var(--su));
4699
- --tooltip-text-color: hsl(var(--suc));
4700
- }
4701
- .tooltip.tooltip-warning {
4702
- --tooltip-color: hsl(var(--wa));
4703
- --tooltip-text-color: hsl(var(--wac));
4704
- }
4705
- .tooltip.tooltip-error {
4706
- --tooltip-color: hsl(var(--er));
4707
- --tooltip-text-color: hsl(var(--erc));
4708
- }
4709
- :root .prose {
4710
- --tw-prose-body: hsl(var(--bc) / 0.8);
4711
- --tw-prose-headings: hsl(var(--bc));
4712
- --tw-prose-lead: hsl(var(--bc));
4713
- --tw-prose-links: hsl(var(--bc));
4714
- --tw-prose-bold: hsl(var(--bc));
4715
- --tw-prose-counters: hsl(var(--bc));
4716
- --tw-prose-bullets: hsl(var(--bc) / 0.5);
4717
- --tw-prose-hr: hsl(var(--bc) / 0.2);
4718
- --tw-prose-quotes: hsl(var(--bc));
4719
- --tw-prose-quote-borders: hsl(var(--bc) / 0.2);
4720
- --tw-prose-captions: hsl(var(--bc) / 0.5);
4721
- --tw-prose-code: hsl(var(--bc));
4722
- --tw-prose-pre-code: hsl(var(--nc));
4723
- --tw-prose-pre-bg: hsl(var(--n));
4724
- --tw-prose-th-borders: hsl(var(--bc) / 0.5);
4725
- --tw-prose-td-borders: hsl(var(--bc) / 0.2);
4726
- }
4727
- .prose :where(code):not(:where([class~="not-prose"] *)) {
4728
- padding: 2px 8px;
4729
- border-radius: var(--rounded-badge);
4730
- }
4731
- .prose code:after,
4732
- .prose code:before {
4733
- content: none;
4734
- }
4735
- .prose pre code {
4736
- border-radius: 0;
4737
- padding: 0;
4738
- }
4739
- .prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
4740
- border-bottom-color: hsl(var(--bc) / 20%);
4741
- }