manolis-ui 0.22.3 → 0.22.4

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/style.css DELETED
@@ -1,4717 +0,0 @@
1
- /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-500: oklch(63.7% 0.237 25.331);
11
- --color-yellow-400: oklch(85.2% 0.199 91.936);
12
- --color-green-500: oklch(72.3% 0.219 149.579);
13
- --color-blue-100: oklch(93.2% 0.032 255.585);
14
- --color-blue-500: oklch(62.3% 0.214 259.815);
15
- --color-blue-800: oklch(42.4% 0.199 265.638);
16
- --color-gray-200: oklch(92.8% 0.006 264.531);
17
- --color-black: #000;
18
- --spacing: 0.25rem;
19
- --container-xs: 20rem;
20
- --text-xs: 0.75rem;
21
- --text-xs--line-height: calc(1 / 0.75);
22
- --text-sm: 0.875rem;
23
- --text-sm--line-height: calc(1.25 / 0.875);
24
- --text-base: 1rem;
25
- --text-lg: 1.125rem;
26
- --text-lg--line-height: calc(1.75 / 1.125);
27
- --text-xl: 1.25rem;
28
- --text-xl--line-height: calc(1.75 / 1.25);
29
- --text-2xl: 1.5rem;
30
- --text-2xl--line-height: calc(2 / 1.5);
31
- --text-4xl: 2.25rem;
32
- --text-4xl--line-height: calc(2.5 / 2.25);
33
- --font-weight-medium: 500;
34
- --font-weight-semibold: 600;
35
- --font-weight-bold: 700;
36
- --radius-sm: 0.25rem;
37
- --radius-md: 0.375rem;
38
- --default-transition-duration: 150ms;
39
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
40
- --default-font-family: var(--font-sans);
41
- --default-mono-font-family: var(--font-mono);
42
- }
43
- }
44
- @layer base {
45
- *, ::after, ::before, ::backdrop, ::file-selector-button {
46
- box-sizing: border-box;
47
- margin: 0;
48
- padding: 0;
49
- border: 0 solid;
50
- }
51
- html, :host {
52
- line-height: 1.5;
53
- -webkit-text-size-adjust: 100%;
54
- tab-size: 4;
55
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
56
- font-feature-settings: var(--default-font-feature-settings, normal);
57
- font-variation-settings: var(--default-font-variation-settings, normal);
58
- -webkit-tap-highlight-color: transparent;
59
- }
60
- hr {
61
- height: 0;
62
- color: inherit;
63
- border-top-width: 1px;
64
- }
65
- abbr:where([title]) {
66
- -webkit-text-decoration: underline dotted;
67
- text-decoration: underline dotted;
68
- }
69
- h1, h2, h3, h4, h5, h6 {
70
- font-size: inherit;
71
- font-weight: inherit;
72
- }
73
- a {
74
- color: inherit;
75
- -webkit-text-decoration: inherit;
76
- text-decoration: inherit;
77
- }
78
- b, strong {
79
- font-weight: bolder;
80
- }
81
- code, kbd, samp, pre {
82
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
83
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
84
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
85
- font-size: 1em;
86
- }
87
- small {
88
- font-size: 80%;
89
- }
90
- sub, sup {
91
- font-size: 75%;
92
- line-height: 0;
93
- position: relative;
94
- vertical-align: baseline;
95
- }
96
- sub {
97
- bottom: -0.25em;
98
- }
99
- sup {
100
- top: -0.5em;
101
- }
102
- table {
103
- text-indent: 0;
104
- border-color: inherit;
105
- border-collapse: collapse;
106
- }
107
- :-moz-focusring {
108
- outline: auto;
109
- }
110
- progress {
111
- vertical-align: baseline;
112
- }
113
- summary {
114
- display: list-item;
115
- }
116
- ol, ul, menu {
117
- list-style: none;
118
- }
119
- img, svg, video, canvas, audio, iframe, embed, object {
120
- display: block;
121
- vertical-align: middle;
122
- }
123
- img, video {
124
- max-width: 100%;
125
- height: auto;
126
- }
127
- button, input, select, optgroup, textarea, ::file-selector-button {
128
- font: inherit;
129
- font-feature-settings: inherit;
130
- font-variation-settings: inherit;
131
- letter-spacing: inherit;
132
- color: inherit;
133
- border-radius: 0;
134
- background-color: transparent;
135
- opacity: 1;
136
- }
137
- :where(select:is([multiple], [size])) optgroup {
138
- font-weight: bolder;
139
- }
140
- :where(select:is([multiple], [size])) optgroup option {
141
- padding-inline-start: 20px;
142
- }
143
- ::file-selector-button {
144
- margin-inline-end: 4px;
145
- }
146
- ::placeholder {
147
- opacity: 1;
148
- }
149
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
150
- ::placeholder {
151
- color: currentcolor;
152
- @supports (color: color-mix(in lab, red, red)) {
153
- color: color-mix(in oklab, currentcolor 50%, transparent);
154
- }
155
- }
156
- }
157
- textarea {
158
- resize: vertical;
159
- }
160
- ::-webkit-search-decoration {
161
- -webkit-appearance: none;
162
- }
163
- ::-webkit-date-and-time-value {
164
- min-height: 1lh;
165
- text-align: inherit;
166
- }
167
- ::-webkit-datetime-edit {
168
- display: inline-flex;
169
- }
170
- ::-webkit-datetime-edit-fields-wrapper {
171
- padding: 0;
172
- }
173
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
174
- padding-block: 0;
175
- }
176
- ::-webkit-calendar-picker-indicator {
177
- line-height: 1;
178
- }
179
- :-moz-ui-invalid {
180
- box-shadow: none;
181
- }
182
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
183
- appearance: button;
184
- }
185
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
186
- height: auto;
187
- }
188
- [hidden]:where(:not([hidden="until-found"])) {
189
- display: none !important;
190
- }
191
- }
192
- @layer utilities {
193
- .modal {
194
- pointer-events: none;
195
- visibility: hidden;
196
- position: fixed;
197
- inset: calc(0.25rem * 0);
198
- margin: calc(0.25rem * 0);
199
- display: grid;
200
- height: 100%;
201
- max-height: none;
202
- width: 100%;
203
- max-width: none;
204
- align-items: center;
205
- justify-items: center;
206
- background-color: transparent;
207
- padding: calc(0.25rem * 0);
208
- color: inherit;
209
- overflow-x: hidden;
210
- transition: transform 0.3s ease-out, visibility 0.3s allow-discrete, opacity 0.1s ease-out;
211
- overflow-y: hidden;
212
- overscroll-behavior: contain;
213
- z-index: 999;
214
- &:not(dialog:not(.modal-open)), &::backdrop {
215
- opacity: 100%;
216
- @starting-style {
217
- visibility: hidden;
218
- }
219
- @starting-style {
220
- opacity: 0%;
221
- }
222
- background-color: oklch(0% 0 0/ 0.4);
223
- transition: display 0.3s ease-out allow-discrete, opacity 0.3s ease-out, visibility 0.3s ease-out allow-discrete;
224
- }
225
- &.modal-open, &[open], &:target {
226
- pointer-events: auto;
227
- visibility: visible;
228
- opacity: 100%;
229
- @starting-style {
230
- visibility: hidden;
231
- }
232
- @starting-style {
233
- opacity: 0%;
234
- }
235
- .modal-box {
236
- translate: 0 0;
237
- scale: 1;
238
- opacity: 1;
239
- }
240
- }
241
- }
242
- .tab {
243
- position: relative;
244
- display: inline-flex;
245
- cursor: pointer;
246
- appearance: none;
247
- flex-wrap: wrap;
248
- align-items: center;
249
- justify-content: center;
250
- text-align: center;
251
- webkit-user-select: none;
252
- user-select: none;
253
- &:hover {
254
- @media (hover: hover) {
255
- color: var(--color-base-content);
256
- }
257
- }
258
- --tab-p: 1rem;
259
- --tab-bg: var(--color-base-100);
260
- --tab-border-color: var(--color-base-300);
261
- --tab-radius-ss: 0;
262
- --tab-radius-se: 0;
263
- --tab-radius-es: 0;
264
- --tab-radius-ee: 0;
265
- --tab-order: 0;
266
- --tab-radius-min: calc(0.75rem - var(--border));
267
- border-color: #0000;
268
- order: var(--tab-order);
269
- height: calc(var(--size-field, 0.25rem) * 10);
270
- font-size: 0.875rem;
271
- padding-inline-start: var(--tab-p);
272
- padding-inline-end: var(--tab-p);
273
- &:is(input[type="radio"]) {
274
- min-width: fit-content;
275
- &:after {
276
- content: attr(aria-label);
277
- }
278
- }
279
- &:is(label) {
280
- position: relative;
281
- input {
282
- position: absolute;
283
- inset: calc(0.25rem * 0);
284
- cursor: pointer;
285
- appearance: none;
286
- opacity: 0%;
287
- }
288
- }
289
- &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) {
290
- & + .tab-content {
291
- display: block;
292
- height: 100%;
293
- }
294
- }
295
- &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) {
296
- color: var(--color-base-content);
297
- @supports (color: color-mix(in lab, red, red)) {
298
- color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
299
- }
300
- }
301
- &:not(input):empty {
302
- flex-grow: 1;
303
- cursor: default;
304
- }
305
- &:focus {
306
- outline-style: none;
307
- @media (forced-colors: active) {
308
- outline: 2px solid transparent;
309
- outline-offset: 2px;
310
- }
311
- }
312
- &:focus-visible, &:is(label:has(:checked:focus-visible)) {
313
- outline: 2px solid currentColor;
314
- outline-offset: -5px;
315
- }
316
- &[disabled] {
317
- pointer-events: none;
318
- opacity: 40%;
319
- }
320
- }
321
- .menu {
322
- display: flex;
323
- width: fit-content;
324
- flex-direction: column;
325
- flex-wrap: wrap;
326
- padding: calc(0.25rem * 2);
327
- --menu-active-fg: var(--color-neutral-content);
328
- --menu-active-bg: var(--color-neutral);
329
- font-size: 0.875rem;
330
- :where(li ul) {
331
- position: relative;
332
- margin-inline-start: calc(0.25rem * 4);
333
- padding-inline-start: calc(0.25rem * 2);
334
- white-space: nowrap;
335
- &:before {
336
- position: absolute;
337
- inset-inline-start: calc(0.25rem * 0);
338
- top: calc(0.25rem * 3);
339
- bottom: calc(0.25rem * 3);
340
- background-color: var(--color-base-content);
341
- opacity: 10%;
342
- width: var(--border);
343
- content: "";
344
- }
345
- }
346
- :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
347
- display: none;
348
- }
349
- :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
350
- display: grid;
351
- grid-auto-flow: column;
352
- align-content: flex-start;
353
- align-items: center;
354
- gap: calc(0.25rem * 2);
355
- border-radius: var(--radius-field);
356
- padding-inline: calc(0.25rem * 3);
357
- padding-block: calc(0.25rem * 1.5);
358
- text-align: start;
359
- transition-property: color, background-color, box-shadow;
360
- transition-duration: 0.2s;
361
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
362
- grid-auto-columns: minmax(auto, max-content) auto max-content;
363
- text-wrap: balance;
364
- user-select: none;
365
- }
366
- :where(li > details > summary) {
367
- outline-style: none;
368
- @media (forced-colors: active) {
369
- outline: 2px solid transparent;
370
- outline-offset: 2px;
371
- }
372
- &::-webkit-details-marker {
373
- display: none;
374
- }
375
- }
376
- :where(li > details > summary), :where(li > .menu-dropdown-toggle) {
377
- &:after {
378
- justify-self: flex-end;
379
- display: block;
380
- height: 0.375rem;
381
- width: 0.375rem;
382
- rotate: -135deg;
383
- translate: 0 -1px;
384
- transition-property: rotate, translate;
385
- transition-duration: 0.2s;
386
- content: "";
387
- transform-origin: 50% 50%;
388
- box-shadow: 2px 2px inset;
389
- pointer-events: none;
390
- }
391
- }
392
- :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
393
- rotate: 45deg;
394
- translate: 0 1px;
395
- }
396
- :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) {
397
- &.menu-focus, &:focus-visible {
398
- cursor: pointer;
399
- background-color: var(--color-base-content);
400
- @supports (color: color-mix(in lab, red, red)) {
401
- background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
402
- }
403
- color: var(--color-base-content);
404
- outline-style: none;
405
- @media (forced-colors: active) {
406
- outline: 2px solid transparent;
407
- outline-offset: 2px;
408
- }
409
- }
410
- }
411
- :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
412
- cursor: pointer;
413
- background-color: var(--color-base-content);
414
- @supports (color: color-mix(in lab, red, red)) {
415
- background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
416
- }
417
- outline-style: none;
418
- @media (forced-colors: active) {
419
- outline: 2px solid transparent;
420
- outline-offset: 2px;
421
- }
422
- box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
423
- }
424
- :where(li:empty) {
425
- background-color: var(--color-base-content);
426
- opacity: 10%;
427
- margin: 0.5rem 1rem;
428
- height: 1px;
429
- }
430
- :where(li) {
431
- position: relative;
432
- display: flex;
433
- flex-shrink: 0;
434
- flex-direction: column;
435
- flex-wrap: wrap;
436
- align-items: stretch;
437
- .badge {
438
- justify-self: flex-end;
439
- }
440
- & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active {
441
- outline-style: none;
442
- @media (forced-colors: active) {
443
- outline: 2px solid transparent;
444
- outline-offset: 2px;
445
- }
446
- color: var(--menu-active-fg);
447
- background-color: var(--menu-active-bg);
448
- background-size: auto, calc(var(--noise) * 100%);
449
- background-image: none, var(--fx-noise);
450
- &:not(&:active) {
451
- box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
452
- }
453
- }
454
- &.menu-disabled {
455
- pointer-events: none;
456
- color: var(--color-base-content);
457
- @supports (color: color-mix(in lab, red, red)) {
458
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
459
- }
460
- }
461
- }
462
- .dropdown:focus-within {
463
- .menu-dropdown-toggle:after {
464
- rotate: 45deg;
465
- translate: 0 1px;
466
- }
467
- }
468
- .dropdown-content {
469
- margin-top: calc(0.25rem * 2);
470
- padding: calc(0.25rem * 2);
471
- &:before {
472
- display: none;
473
- }
474
- }
475
- }
476
- .collapse-plus {
477
- > .collapse-title:after {
478
- position: absolute;
479
- display: block;
480
- height: 0.5rem;
481
- width: 0.5rem;
482
- transition-property: all;
483
- transition-duration: 300ms;
484
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
485
- top: 0.9rem;
486
- inset-inline-end: 1.4rem;
487
- content: "+";
488
- pointer-events: none;
489
- }
490
- }
491
- .dropdown {
492
- position: relative;
493
- display: inline-block;
494
- position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
495
- & > *:not(summary):focus {
496
- outline-style: none;
497
- @media (forced-colors: active) {
498
- outline: 2px solid transparent;
499
- outline-offset: 2px;
500
- }
501
- }
502
- .dropdown-content {
503
- position: absolute;
504
- }
505
- &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {
506
- .dropdown-content {
507
- display: none;
508
- transform-origin: top;
509
- opacity: 0%;
510
- scale: 95%;
511
- }
512
- }
513
- &[popover], .dropdown-content {
514
- @starting-style {
515
- scale: 95%;
516
- }
517
- @starting-style {
518
- opacity: 0;
519
- }
520
- z-index: 999;
521
- animation: dropdown 0.2s;
522
- transition-property: opacity, scale, display;
523
- transition-behavior: allow-discrete;
524
- transition-duration: 0.2s;
525
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
526
- }
527
- &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
528
- > [tabindex]:first-child {
529
- pointer-events: none;
530
- }
531
- .dropdown-content {
532
- opacity: 100%;
533
- }
534
- }
535
- &.dropdown-hover:hover {
536
- .dropdown-content {
537
- opacity: 100%;
538
- scale: 100%;
539
- }
540
- }
541
- &:is(details) {
542
- summary {
543
- &::-webkit-details-marker {
544
- display: none;
545
- }
546
- }
547
- }
548
- &.dropdown-open, &:focus, &:focus-within {
549
- .dropdown-content {
550
- scale: 100%;
551
- }
552
- }
553
- &:where([popover]) {
554
- background: #0000;
555
- }
556
- &[popover] {
557
- position: fixed;
558
- color: inherit;
559
- @supports not (position-area: bottom) {
560
- margin: auto;
561
- &.dropdown-open:not(:popover-open) {
562
- display: none;
563
- transform-origin: top;
564
- opacity: 0%;
565
- scale: 95%;
566
- }
567
- &::backdrop {
568
- background-color: color-mix(in oklab, #000 30%, #0000);
569
- }
570
- }
571
- &:not(.dropdown-open, :popover-open) {
572
- display: none;
573
- transform-origin: top;
574
- opacity: 0%;
575
- scale: 95%;
576
- }
577
- }
578
- }
579
- .btn {
580
- display: inline-flex;
581
- flex-shrink: 0;
582
- cursor: pointer;
583
- flex-wrap: nowrap;
584
- align-items: center;
585
- justify-content: center;
586
- gap: calc(0.25rem * 1.5);
587
- text-align: center;
588
- vertical-align: middle;
589
- text-decoration-line: none;
590
- outline-offset: 2px;
591
- webkit-user-select: none;
592
- user-select: none;
593
- padding-inline: var(--btn-p);
594
- color: var(--btn-fg);
595
- height: var(--size);
596
- font-size: 0.875rem;
597
- font-weight: 600;
598
- outline-color: var(--btn-color, var(--color-base-content));
599
- transition-property: color, background-color, border-color, box-shadow;
600
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
601
- transition-duration: 0.2s;
602
- border-start-start-radius: var(--join-ss, var(--radius-field));
603
- border-start-end-radius: var(--join-se, var(--radius-field));
604
- border-end-start-radius: var(--join-es, var(--radius-field));
605
- border-end-end-radius: var(--join-ee, var(--radius-field));
606
- background-color: var(--btn-bg);
607
- background-size: auto, calc(var(--noise) * 100%);
608
- background-image: none, var(--btn-noise);
609
- border-width: var(--border);
610
- border-style: solid;
611
- border-color: var(--btn-border);
612
- text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
613
- box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
614
- --size: calc(var(--size-field, 0.25rem) * 10);
615
- --btn-bg: var(--btn-color, var(--color-base-200));
616
- --btn-fg: var(--color-base-content);
617
- --btn-p: 1rem;
618
- --btn-border: var(--btn-bg);
619
- @supports (color: color-mix(in lab, red, red)) {
620
- --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
621
- }
622
- --btn-shadow: 0 3px 2px -2px var(--btn-bg),
623
- 0 4px 3px -2px var(--btn-bg);
624
- @supports (color: color-mix(in lab, red, red)) {
625
- --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
626
- 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
627
- }
628
- --btn-noise: var(--fx-noise);
629
- @media (hover: hover) {
630
- &:hover {
631
- --btn-bg: var(--btn-color, var(--color-base-200));
632
- @supports (color: color-mix(in lab, red, red)) {
633
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
634
- }
635
- }
636
- }
637
- &.btn-active {
638
- --btn-bg: var(--btn-color, var(--color-base-200));
639
- @supports (color: color-mix(in lab, red, red)) {
640
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
641
- }
642
- --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
643
- isolation: isolate;
644
- }
645
- &:focus-visible {
646
- outline-width: 2px;
647
- outline-style: solid;
648
- }
649
- &:active:not(.btn-active) {
650
- translate: 0 0.5px;
651
- --btn-bg: var(--btn-color, var(--color-base-200));
652
- @supports (color: color-mix(in lab, red, red)) {
653
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
654
- }
655
- --btn-border: var(--btn-color, var(--color-base-200));
656
- @supports (color: color-mix(in lab, red, red)) {
657
- --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
658
- }
659
- --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
660
- }
661
- &:is(:disabled, [disabled], .btn-disabled) {
662
- &:not(.btn-link, .btn-ghost) {
663
- background-color: var(--color-base-content);
664
- @supports (color: color-mix(in lab, red, red)) {
665
- background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
666
- }
667
- box-shadow: none;
668
- }
669
- pointer-events: none;
670
- --btn-border: #0000;
671
- --btn-noise: none;
672
- --btn-fg: var(--color-base-content);
673
- @supports (color: color-mix(in lab, red, red)) {
674
- --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
675
- }
676
- @media (hover: hover) {
677
- &:hover {
678
- pointer-events: none;
679
- background-color: var(--color-neutral);
680
- @supports (color: color-mix(in lab, red, red)) {
681
- background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
682
- }
683
- --btn-border: #0000;
684
- --btn-fg: var(--color-base-content);
685
- @supports (color: color-mix(in lab, red, red)) {
686
- --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
687
- }
688
- }
689
- }
690
- }
691
- &:is(input[type="checkbox"], input[type="radio"]) {
692
- appearance: none;
693
- &::after {
694
- content: attr(aria-label);
695
- }
696
- &:checked {
697
- outline-width: 2px;
698
- outline-style: solid;
699
- --btn-bg: var(--btn-color, var(--color-base-200));
700
- @supports (color: color-mix(in lab, red, red)) {
701
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
702
- }
703
- --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
704
- isolation: isolate;
705
- }
706
- }
707
- }
708
- .\!loading {
709
- pointer-events: none !important;
710
- display: inline-block !important;
711
- aspect-ratio: 1 / 1 !important;
712
- background-color: currentColor !important;
713
- vertical-align: middle !important;
714
- width: calc(var(--size-selector, 0.25rem) * 6) !important;
715
- mask-size: 100% !important;
716
- mask-repeat: no-repeat !important;
717
- mask-position: center !important;
718
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important;
719
- }
720
- .loading {
721
- pointer-events: none;
722
- display: inline-block;
723
- aspect-ratio: 1 / 1;
724
- background-color: currentColor;
725
- vertical-align: middle;
726
- width: calc(var(--size-selector, 0.25rem) * 6);
727
- mask-size: 100%;
728
- mask-repeat: no-repeat;
729
- mask-position: center;
730
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
731
- }
732
- .pointer-events-none {
733
- pointer-events: none;
734
- }
735
- .collapse {
736
- &:not(td, tr, colgroup) {
737
- visibility: visible;
738
- }
739
- position: relative;
740
- display: grid;
741
- overflow: hidden;
742
- border-radius: var(--rounded-box, 1rem);
743
- width: 100%;
744
- grid-template-rows: max-content 0fr;
745
- transition: grid-template-rows 0.2s;
746
- > input:is([type="checkbox"], [type="radio"]) {
747
- grid-column-start: 1;
748
- grid-row-start: 1;
749
- appearance: none;
750
- opacity: 0;
751
- z-index: 1;
752
- width: 100%;
753
- padding: 1rem;
754
- padding-inline-end: 3rem;
755
- min-height: 3.75rem;
756
- transition: background-color 0.2s ease-out;
757
- }
758
- &:is([open], :focus:not(.collapse-close)),
759
- &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
760
- grid-template-rows: max-content 1fr;
761
- }
762
- &:is([open], :focus:not(.collapse-close)) > .collapse-content,
763
- &:not(.collapse-close)
764
- > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
765
- visibility: visible;
766
- min-height: fit-content;
767
- }
768
- &:focus-visible,
769
- &:has(> input:is([type="checkbox"], [type="radio"]):focus-visible) {
770
- outline-color: var(--color-base-content);
771
- outline-style: solid;
772
- outline-width: 2px;
773
- outline-offset: 2px;
774
- }
775
- &:not(.collapse-close) {
776
- > input[type="checkbox"],
777
- > input[type="radio"]:not(:checked),
778
- > .collapse-title {
779
- cursor: pointer;
780
- }
781
- }
782
- &:focus:not(.collapse-close, .collapse[open]) > .collapse-title {
783
- cursor: unset;
784
- }
785
- &:is([open], :focus:not(.collapse-close)) > :where(.collapse-content),
786
- &:not(.collapse-close)
787
- > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
788
- padding-bottom: 1rem;
789
- transition: padding 0.2s ease-out,
790
- background-color 0.2s ease-out;
791
- }
792
- &:is([open]) {
793
- &.collapse-arrow {
794
- > .collapse-title:after {
795
- transform: translateY(-50%) rotate(225deg);
796
- }
797
- }
798
- }
799
- &.collapse-open {
800
- &.collapse-arrow {
801
- > .collapse-title:after {
802
- transform: translateY(-50%) rotate(225deg);
803
- }
804
- }
805
- &.collapse-plus {
806
- > .collapse-title:after {
807
- content: "−";
808
- }
809
- }
810
- }
811
- &.collapse-arrow:focus:not(.collapse-close) {
812
- > .collapse-title:after {
813
- transform: translateY(-50%) rotate(225deg);
814
- }
815
- }
816
- &.collapse-arrow:not(.collapse-close) {
817
- > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
818
- transform: translateY(-50%) rotate(225deg);
819
- }
820
- }
821
- &[open] {
822
- &.collapse-plus {
823
- > .collapse-title:after {
824
- content: "−";
825
- }
826
- }
827
- }
828
- &.collapse-plus:focus:not(.collapse-close) {
829
- > .collapse-title:after {
830
- content: "−";
831
- }
832
- }
833
- &.collapse-plus:not(.collapse-close) {
834
- > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
835
- content: "−";
836
- }
837
- }
838
- &:is(details) {
839
- width: 100%;
840
- & summary {
841
- position: relative;
842
- display: block;
843
- &::-webkit-details-marker {
844
- display: none;
845
- }
846
- }
847
- }
848
- &:is(details) summary {
849
- outline: none;
850
- }
851
- }
852
- .collapse-content {
853
- grid-row-start: 1;
854
- visibility: hidden;
855
- grid-column-start: 1;
856
- grid-row-start: 2;
857
- min-height: 0;
858
- transition: visibility 0.2s;
859
- transition: padding 0.2s ease-out,
860
- background-color 0.2s ease-out;
861
- padding-left: 1rem;
862
- padding-right: 1rem;
863
- cursor: unset;
864
- }
865
- .validator {
866
- &:user-valid, &:has(:user-valid) {
867
- &, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
868
- --input-color: var(--color-success);
869
- }
870
- }
871
- &:user-invalid, &:has(:user-invalid) {
872
- &, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
873
- --input-color: var(--color-error);
874
- }
875
- & ~ .validator-hint {
876
- visibility: visible;
877
- display: block;
878
- color: var(--color-error);
879
- }
880
- }
881
- & ~ .validator-hint {
882
- visibility: hidden;
883
- }
884
- }
885
- .collapse {
886
- visibility: collapse;
887
- }
888
- .list {
889
- display: flex;
890
- flex-direction: column;
891
- font-size: 0.875rem;
892
- :where(.list-row) {
893
- --list-grid-cols: minmax(0, auto) 1fr;
894
- position: relative;
895
- display: grid;
896
- grid-auto-flow: column;
897
- gap: calc(0.25rem * 4);
898
- border-radius: var(--radius-box);
899
- padding: calc(0.25rem * 4);
900
- word-break: break-word;
901
- grid-template-columns: var(--list-grid-cols);
902
- &:has(.list-col-grow:nth-child(1)) {
903
- --list-grid-cols: 1fr;
904
- }
905
- &:has(.list-col-grow:nth-child(2)) {
906
- --list-grid-cols: minmax(0, auto) 1fr;
907
- }
908
- &:has(.list-col-grow:nth-child(3)) {
909
- --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;
910
- }
911
- &:has(.list-col-grow:nth-child(4)) {
912
- --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
913
- }
914
- &:has(.list-col-grow:nth-child(5)) {
915
- --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
916
- }
917
- &:has(.list-col-grow:nth-child(6)) {
918
- --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto)
919
- minmax(0, auto) 1fr;
920
- }
921
- :not(.list-col-wrap) {
922
- grid-row-start: 1;
923
- }
924
- }
925
- & > :not(:last-child) {
926
- &.list-row, .list-row {
927
- &:after {
928
- content: "";
929
- border-bottom: var(--border) solid;
930
- inset-inline: var(--radius-box);
931
- position: absolute;
932
- bottom: calc(0.25rem * 0);
933
- border-color: var(--color-base-content);
934
- @supports (color: color-mix(in lab, red, red)) {
935
- border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
936
- }
937
- }
938
- }
939
- }
940
- }
941
- .toggle {
942
- border: var(--border) solid currentColor;
943
- color: var(--input-color);
944
- position: relative;
945
- display: inline-grid;
946
- flex-shrink: 0;
947
- cursor: pointer;
948
- appearance: none;
949
- place-content: center;
950
- vertical-align: middle;
951
- webkit-user-select: none;
952
- user-select: none;
953
- grid-template-columns: 0fr 1fr 1fr;
954
- --radius-selector-max: calc(
955
- var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
956
- );
957
- border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
958
- padding: var(--toggle-p);
959
- box-shadow: 0 1px currentColor inset;
960
- @supports (color: color-mix(in lab, red, red)) {
961
- box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
962
- }
963
- transition: color 0.3s, grid-template-columns 0.2s;
964
- --input-color: var(--color-base-content);
965
- @supports (color: color-mix(in lab, red, red)) {
966
- --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
967
- }
968
- --toggle-p: 0.1875rem;
969
- --size: calc(var(--size-selector, 0.25rem) * 6);
970
- width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
971
- height: var(--size);
972
- > * {
973
- z-index: 1;
974
- grid-column: span 1 / span 1;
975
- grid-column-start: 2;
976
- grid-row-start: 1;
977
- height: 100%;
978
- cursor: pointer;
979
- appearance: none;
980
- background-color: transparent;
981
- padding: calc(0.25rem * 0.5);
982
- transition: opacity 0.2s, rotate 0.4s;
983
- border: none;
984
- &:focus {
985
- outline-style: none;
986
- @media (forced-colors: active) {
987
- outline: 2px solid transparent;
988
- outline-offset: 2px;
989
- }
990
- }
991
- &:nth-child(2) {
992
- color: var(--color-base-100);
993
- rotate: 0deg;
994
- }
995
- &:nth-child(3) {
996
- color: var(--color-base-100);
997
- opacity: 0%;
998
- rotate: -15deg;
999
- }
1000
- }
1001
- &:has(:checked) {
1002
- > :nth-child(2) {
1003
- opacity: 0%;
1004
- rotate: 15deg;
1005
- }
1006
- > :nth-child(3) {
1007
- opacity: 100%;
1008
- rotate: 0deg;
1009
- }
1010
- }
1011
- &:before {
1012
- position: relative;
1013
- inset-inline-start: calc(0.25rem * 0);
1014
- grid-column-start: 2;
1015
- grid-row-start: 1;
1016
- aspect-ratio: 1 / 1;
1017
- height: 100%;
1018
- border-radius: var(--radius-selector);
1019
- background-color: currentColor;
1020
- @media print {
1021
- outline: .25rem solid;
1022
- }
1023
- @media print {
1024
- outline-offset: -1rem;
1025
- }
1026
- translate: 0;
1027
- --tw-content: "";
1028
- content: var(--tw-content);
1029
- transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
1030
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor;
1031
- @supports (color: color-mix(in lab, red, red)) {
1032
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
1033
- }
1034
- background-size: auto, calc(var(--noise) * 100%);
1035
- background-image: none, var(--fx-noise);
1036
- @media (forced-colors: active) {
1037
- outline-style: var(--tw-outline-style);
1038
- outline-width: 1px;
1039
- outline-offset: calc(1px * -1);
1040
- }
1041
- }
1042
- &:focus-visible, &:has(:focus-visible) {
1043
- outline: 2px solid currentColor;
1044
- outline-offset: 2px;
1045
- }
1046
- &:checked, &[aria-checked="true"], &:has(> input:checked) {
1047
- grid-template-columns: 1fr 1fr 0fr;
1048
- background-color: var(--color-base-100);
1049
- --input-color: var(--color-base-content);
1050
- &:before {
1051
- background-color: currentColor;
1052
- @starting-style {
1053
- opacity: 0;
1054
- }
1055
- }
1056
- }
1057
- &:indeterminate {
1058
- grid-template-columns: 0.5fr 1fr 0.5fr;
1059
- }
1060
- &:disabled {
1061
- cursor: not-allowed;
1062
- opacity: 30%;
1063
- &:before {
1064
- background-color: transparent;
1065
- border: var(--border) solid currentColor;
1066
- }
1067
- }
1068
- }
1069
- .input {
1070
- cursor: text;
1071
- border: var(--border) solid #0000;
1072
- position: relative;
1073
- display: inline-flex;
1074
- flex-shrink: 1;
1075
- appearance: none;
1076
- align-items: center;
1077
- gap: calc(0.25rem * 2);
1078
- background-color: var(--color-base-100);
1079
- padding-inline: calc(0.25rem * 3);
1080
- vertical-align: middle;
1081
- white-space: nowrap;
1082
- width: clamp(3rem, 20rem, 100%);
1083
- height: var(--size);
1084
- font-size: 0.875rem;
1085
- border-start-start-radius: var(--join-ss, var(--radius-field));
1086
- border-start-end-radius: var(--join-se, var(--radius-field));
1087
- border-end-start-radius: var(--join-es, var(--radius-field));
1088
- border-end-end-radius: var(--join-ee, var(--radius-field));
1089
- border-color: var(--input-color);
1090
- box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1091
- @supports (color: color-mix(in lab, red, red)) {
1092
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1093
- }
1094
- --size: calc(var(--size-field, 0.25rem) * 10);
1095
- --input-color: var(--color-base-content);
1096
- @supports (color: color-mix(in lab, red, red)) {
1097
- --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1098
- }
1099
- &:where(input) {
1100
- display: inline-flex;
1101
- }
1102
- :where(input) {
1103
- display: inline-flex;
1104
- height: 100%;
1105
- width: 100%;
1106
- appearance: none;
1107
- background-color: transparent;
1108
- border: none;
1109
- &:focus, &:focus-within {
1110
- outline-style: none;
1111
- @media (forced-colors: active) {
1112
- outline: 2px solid transparent;
1113
- outline-offset: 2px;
1114
- }
1115
- }
1116
- }
1117
- &:focus, &:focus-within {
1118
- --input-color: var(--color-base-content);
1119
- box-shadow: 0 1px var(--input-color);
1120
- @supports (color: color-mix(in lab, red, red)) {
1121
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1122
- }
1123
- outline: 2px solid var(--input-color);
1124
- outline-offset: 2px;
1125
- isolation: isolate;
1126
- }
1127
- &:has(> input[disabled]), &:is(:disabled, [disabled]) {
1128
- cursor: not-allowed;
1129
- border-color: var(--color-base-200);
1130
- background-color: var(--color-base-200);
1131
- color: var(--color-base-content);
1132
- @supports (color: color-mix(in lab, red, red)) {
1133
- color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1134
- }
1135
- &::placeholder {
1136
- color: var(--color-base-content);
1137
- @supports (color: color-mix(in lab, red, red)) {
1138
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1139
- }
1140
- }
1141
- box-shadow: none;
1142
- }
1143
- &:has(> input[disabled]) > input[disabled] {
1144
- cursor: not-allowed;
1145
- }
1146
- &::-webkit-date-and-time-value {
1147
- text-align: inherit;
1148
- }
1149
- &[type="number"] {
1150
- &::-webkit-inner-spin-button {
1151
- margin-block: calc(0.25rem * -3);
1152
- margin-inline-end: calc(0.25rem * -3);
1153
- }
1154
- }
1155
- &::-webkit-calendar-picker-indicator {
1156
- position: absolute;
1157
- inset-inline-end: 0.75em;
1158
- }
1159
- }
1160
- .indicator {
1161
- position: relative;
1162
- display: inline-flex;
1163
- width: max-content;
1164
- :where(.indicator-item) {
1165
- z-index: 1;
1166
- position: absolute;
1167
- white-space: nowrap;
1168
- top: var(--inidicator-t, 0);
1169
- bottom: var(--inidicator-b, auto);
1170
- left: var(--inidicator-s, auto);
1171
- right: var(--inidicator-e, 0);
1172
- translate: var(--inidicator-x, 50%) var(--indicator-y, -50%);
1173
- }
1174
- }
1175
- .table {
1176
- font-size: 0.875rem;
1177
- position: relative;
1178
- width: 100%;
1179
- border-radius: var(--radius-box);
1180
- text-align: left;
1181
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1182
- text-align: right;
1183
- }
1184
- tr.row-hover {
1185
- &, &:nth-child(even) {
1186
- &:hover {
1187
- @media (hover: hover) {
1188
- background-color: var(--color-base-200);
1189
- }
1190
- }
1191
- }
1192
- }
1193
- :where(th, td) {
1194
- padding-inline: calc(0.25rem * 4);
1195
- padding-block: calc(0.25rem * 3);
1196
- vertical-align: middle;
1197
- }
1198
- :where(thead, tfoot) {
1199
- white-space: nowrap;
1200
- color: var(--color-base-content);
1201
- @supports (color: color-mix(in lab, red, red)) {
1202
- color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
1203
- }
1204
- font-size: 0.875rem;
1205
- font-weight: 600;
1206
- }
1207
- :where(tfoot) {
1208
- border-top: var(--border) solid var(--color-base-content);
1209
- @supports (color: color-mix(in lab, red, red)) {
1210
- border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1211
- }
1212
- }
1213
- :where(.table-pin-rows thead tr) {
1214
- position: sticky;
1215
- top: calc(0.25rem * 0);
1216
- z-index: 1;
1217
- background-color: var(--color-base-100);
1218
- }
1219
- :where(.table-pin-rows tfoot tr) {
1220
- position: sticky;
1221
- bottom: calc(0.25rem * 0);
1222
- z-index: 1;
1223
- background-color: var(--color-base-100);
1224
- }
1225
- :where(.table-pin-cols tr th) {
1226
- position: sticky;
1227
- right: calc(0.25rem * 0);
1228
- left: calc(0.25rem * 0);
1229
- background-color: var(--color-base-100);
1230
- }
1231
- :where(thead tr, tbody tr:not(:last-child)) {
1232
- border-bottom: var(--border) solid var(--color-base-content);
1233
- @supports (color: color-mix(in lab, red, red)) {
1234
- border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1235
- }
1236
- }
1237
- }
1238
- .avatar-offline {
1239
- &:before {
1240
- content: "";
1241
- position: absolute;
1242
- z-index: 1;
1243
- display: block;
1244
- border-radius: calc(infinity * 1px);
1245
- background-color: var(--color-base-300);
1246
- outline: 2px solid var(--color-base-100);
1247
- width: 15%;
1248
- height: 15%;
1249
- top: 7%;
1250
- right: 7%;
1251
- }
1252
- }
1253
- .avatar-online {
1254
- &:before {
1255
- content: "";
1256
- position: absolute;
1257
- z-index: 1;
1258
- display: block;
1259
- border-radius: calc(infinity * 1px);
1260
- background-color: var(--color-success);
1261
- outline: 2px solid var(--color-base-100);
1262
- width: 15%;
1263
- height: 15%;
1264
- top: 7%;
1265
- right: 7%;
1266
- }
1267
- }
1268
- .steps {
1269
- display: inline-grid;
1270
- grid-auto-flow: column;
1271
- overflow: hidden;
1272
- overflow-x: auto;
1273
- counter-reset: step;
1274
- grid-auto-columns: 1fr;
1275
- .step {
1276
- display: grid;
1277
- grid-template-columns: repeat(1, minmax(0, 1fr));
1278
- grid-template-columns: auto;
1279
- grid-template-rows: repeat(2, minmax(0, 1fr));
1280
- grid-template-rows: 40px 1fr;
1281
- place-items: center;
1282
- text-align: center;
1283
- min-width: 4rem;
1284
- --step-bg: var(--color-base-300);
1285
- --step-fg: var(--color-base-content);
1286
- &:before {
1287
- top: calc(0.25rem * 0);
1288
- grid-column-start: 1;
1289
- grid-row-start: 1;
1290
- height: calc(0.25rem * 2);
1291
- width: 100%;
1292
- border: 1px solid;
1293
- color: var(--step-bg);
1294
- background-color: var(--step-bg);
1295
- --tw-content: "";
1296
- content: var(--tw-content);
1297
- margin-inline-start: -100%;
1298
- }
1299
- > .step-icon, &:not(:has(.step-icon)):after {
1300
- content: counter(step);
1301
- counter-increment: step;
1302
- z-index: 1;
1303
- color: var(--step-fg);
1304
- background-color: var(--step-bg);
1305
- border: 1px solid var(--step-bg);
1306
- position: relative;
1307
- grid-column-start: 1;
1308
- grid-row-start: 1;
1309
- display: grid;
1310
- height: calc(0.25rem * 8);
1311
- width: calc(0.25rem * 8);
1312
- place-items: center;
1313
- place-self: center;
1314
- border-radius: calc(infinity * 1px);
1315
- }
1316
- &:first-child:before {
1317
- content: none;
1318
- }
1319
- &[data-content]:after {
1320
- content: attr(data-content);
1321
- }
1322
- }
1323
- .step-neutral {
1324
- + .step-neutral:before, &:after, > .step-icon {
1325
- --step-bg: var(--color-neutral);
1326
- --step-fg: var(--color-neutral-content);
1327
- }
1328
- }
1329
- .step-primary {
1330
- + .step-primary:before, &:after, > .step-icon {
1331
- --step-bg: var(--color-primary);
1332
- --step-fg: var(--color-primary-content);
1333
- }
1334
- }
1335
- .step-secondary {
1336
- + .step-secondary:before, &:after, > .step-icon {
1337
- --step-bg: var(--color-secondary);
1338
- --step-fg: var(--color-secondary-content);
1339
- }
1340
- }
1341
- .step-accent {
1342
- + .step-accent:before, &:after, > .step-icon {
1343
- --step-bg: var(--color-accent);
1344
- --step-fg: var(--color-accent-content);
1345
- }
1346
- }
1347
- .step-info {
1348
- + .step-info:before, &:after, > .step-icon {
1349
- --step-bg: var(--color-info);
1350
- --step-fg: var(--color-info-content);
1351
- }
1352
- }
1353
- .step-success {
1354
- + .step-success:before, &:after, > .step-icon {
1355
- --step-bg: var(--color-success);
1356
- --step-fg: var(--color-success-content);
1357
- }
1358
- }
1359
- .step-warning {
1360
- + .step-warning:before, &:after, > .step-icon {
1361
- --step-bg: var(--color-warning);
1362
- --step-fg: var(--color-warning-content);
1363
- }
1364
- }
1365
- .step-error {
1366
- + .step-error:before, &:after, > .step-icon {
1367
- --step-bg: var(--color-error);
1368
- --step-fg: var(--color-error-content);
1369
- }
1370
- }
1371
- }
1372
- .range {
1373
- appearance: none;
1374
- webkit-appearance: none;
1375
- --range-thumb: var(--color-base-100);
1376
- --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
1377
- --range-progress: currentColor;
1378
- --range-fill: 1;
1379
- --range-p: 0.25rem;
1380
- --range-bg: currentColor;
1381
- @supports (color: color-mix(in lab, red, red)) {
1382
- --range-bg: color-mix(in oklab, currentColor 10%, #0000);
1383
- }
1384
- cursor: pointer;
1385
- overflow: hidden;
1386
- background-color: transparent;
1387
- vertical-align: middle;
1388
- width: clamp(3rem, 20rem, 100%);
1389
- --radius-selector-max: calc(
1390
- var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
1391
- );
1392
- border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
1393
- border: none;
1394
- height: var(--range-thumb-size);
1395
- [dir="rtl"] & {
1396
- --range-dir: -1;
1397
- }
1398
- &:focus {
1399
- outline: none;
1400
- }
1401
- &:focus-visible {
1402
- outline: 2px solid;
1403
- outline-offset: 2px;
1404
- }
1405
- &::-webkit-slider-runnable-track {
1406
- width: 100%;
1407
- background-color: var(--range-bg);
1408
- border-radius: var(--radius-selector);
1409
- height: calc(var(--range-thumb-size) * 0.5);
1410
- @media (forced-colors: active) {
1411
- border: 1px solid;
1412
- }
1413
- }
1414
- &::-webkit-slider-thumb {
1415
- position: relative;
1416
- box-sizing: border-box;
1417
- border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
1418
- background-color: currentColor;
1419
- height: var(--range-thumb-size);
1420
- width: var(--range-thumb-size);
1421
- border: var(--range-p) solid;
1422
- appearance: none;
1423
- webkit-appearance: none;
1424
- top: 50%;
1425
- color: var(--range-progress);
1426
- transform: translateY(-50%);
1427
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1428
- @supports (color: color-mix(in lab, red, red)) {
1429
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1430
- }
1431
- }
1432
- &::-moz-range-track {
1433
- width: 100%;
1434
- background-color: var(--range-bg);
1435
- border-radius: var(--radius-selector);
1436
- height: calc(var(--range-thumb-size) * 0.5);
1437
- @media (forced-colors: active) {
1438
- border: 1px solid;
1439
- }
1440
- }
1441
- &::-moz-range-thumb {
1442
- position: relative;
1443
- box-sizing: border-box;
1444
- border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
1445
- background-color: currentColor;
1446
- height: var(--range-thumb-size);
1447
- width: var(--range-thumb-size);
1448
- border: var(--range-p) solid;
1449
- top: 50%;
1450
- color: var(--range-progress);
1451
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1452
- @supports (color: color-mix(in lab, red, red)) {
1453
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1454
- }
1455
- }
1456
- &:disabled {
1457
- cursor: not-allowed;
1458
- opacity: 30%;
1459
- }
1460
- }
1461
- .card {
1462
- position: relative;
1463
- display: flex;
1464
- flex-direction: column;
1465
- border-radius: var(--radius-box);
1466
- outline-width: 2px;
1467
- transition: outline 0.2s ease-in-out;
1468
- outline: 0 solid #0000;
1469
- outline-offset: 2px;
1470
- &:focus {
1471
- outline-style: none;
1472
- @media (forced-colors: active) {
1473
- outline: 2px solid transparent;
1474
- outline-offset: 2px;
1475
- }
1476
- }
1477
- &:focus-visible {
1478
- outline-color: currentColor;
1479
- }
1480
- :where(figure:first-child) {
1481
- overflow: hidden;
1482
- border-start-start-radius: inherit;
1483
- border-start-end-radius: inherit;
1484
- border-end-start-radius: unset;
1485
- border-end-end-radius: unset;
1486
- }
1487
- :where(figure:last-child) {
1488
- overflow: hidden;
1489
- border-start-start-radius: unset;
1490
- border-start-end-radius: unset;
1491
- border-end-start-radius: inherit;
1492
- border-end-end-radius: inherit;
1493
- }
1494
- &:where(.card-border) {
1495
- border: var(--border) solid var(--color-base-200);
1496
- }
1497
- &:where(.card-dash) {
1498
- border: var(--border) dashed var(--color-base-200);
1499
- }
1500
- &.image-full {
1501
- display: grid;
1502
- &:before {
1503
- position: relative;
1504
- grid-column-start: 1;
1505
- grid-row-start: 1;
1506
- border-radius: var(--radius-box);
1507
- background-color: var(--color-neutral);
1508
- opacity: 75%;
1509
- content: "";
1510
- }
1511
- > * {
1512
- grid-column-start: 1;
1513
- grid-row-start: 1;
1514
- }
1515
- > .card-body {
1516
- position: relative;
1517
- color: var(--color-neutral-content);
1518
- }
1519
- :where(figure) {
1520
- overflow: hidden;
1521
- border-radius: inherit;
1522
- }
1523
- > figure img {
1524
- height: 100%;
1525
- object-fit: cover;
1526
- }
1527
- }
1528
- figure {
1529
- display: flex;
1530
- align-items: center;
1531
- justify-content: center;
1532
- }
1533
- &:has(> input:is(input[type="checkbox"], input[type="radio"])) {
1534
- cursor: pointer;
1535
- user-select: none;
1536
- }
1537
- &:has(> :checked) {
1538
- outline: 2px solid currentColor;
1539
- }
1540
- }
1541
- .swap {
1542
- position: relative;
1543
- display: inline-grid;
1544
- cursor: pointer;
1545
- place-content: center;
1546
- vertical-align: middle;
1547
- webkit-user-select: none;
1548
- user-select: none;
1549
- input {
1550
- appearance: none;
1551
- border: none;
1552
- }
1553
- > * {
1554
- grid-column-start: 1;
1555
- grid-row-start: 1;
1556
- transition-property: transform, rotate, opacity;
1557
- transition-duration: 0.2s;
1558
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1559
- }
1560
- .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on {
1561
- opacity: 0%;
1562
- }
1563
- input:is(:checked, :indeterminate) {
1564
- & ~ .swap-off {
1565
- opacity: 0%;
1566
- }
1567
- }
1568
- input:checked ~ .swap-on, input:indeterminate ~ .swap-indeterminate {
1569
- opacity: 100%;
1570
- }
1571
- }
1572
- .collapse-title {
1573
- grid-column-start: 1;
1574
- grid-row-start: 1;
1575
- position: relative;
1576
- width: 100%;
1577
- padding: 1rem;
1578
- padding-inline-end: 3rem;
1579
- min-height: 3.75rem;
1580
- transition: background-color 0.2s ease-out;
1581
- }
1582
- .select {
1583
- border: var(--border) solid #0000;
1584
- position: relative;
1585
- display: inline-flex;
1586
- flex-shrink: 1;
1587
- appearance: none;
1588
- align-items: center;
1589
- gap: calc(0.25rem * 1.5);
1590
- background-color: var(--color-base-100);
1591
- padding-inline-start: calc(0.25rem * 4);
1592
- padding-inline-end: calc(0.25rem * 7);
1593
- vertical-align: middle;
1594
- width: clamp(3rem, 20rem, 100%);
1595
- height: var(--size);
1596
- font-size: 0.875rem;
1597
- border-start-start-radius: var(--join-ss, var(--radius-field));
1598
- border-start-end-radius: var(--join-se, var(--radius-field));
1599
- border-end-start-radius: var(--join-es, var(--radius-field));
1600
- border-end-end-radius: var(--join-ee, var(--radius-field));
1601
- background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
1602
- background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
1603
- background-size: 4px 4px, 4px 4px;
1604
- background-repeat: no-repeat;
1605
- text-overflow: ellipsis;
1606
- box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1607
- @supports (color: color-mix(in lab, red, red)) {
1608
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1609
- }
1610
- border-color: var(--input-color);
1611
- --input-color: var(--color-base-content);
1612
- @supports (color: color-mix(in lab, red, red)) {
1613
- --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1614
- }
1615
- --size: calc(var(--size-field, 0.25rem) * 10);
1616
- [dir="rtl"] & {
1617
- background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
1618
- }
1619
- select {
1620
- margin-inline-start: calc(0.25rem * -4);
1621
- margin-inline-end: calc(0.25rem * -7);
1622
- width: calc(100% + 2.75rem);
1623
- appearance: none;
1624
- padding-inline-start: calc(0.25rem * 4);
1625
- padding-inline-end: calc(0.25rem * 7);
1626
- height: calc(100% - 2px);
1627
- background: inherit;
1628
- border-radius: inherit;
1629
- border-style: none;
1630
- &:focus, &:focus-within {
1631
- outline-style: none;
1632
- @media (forced-colors: active) {
1633
- outline: 2px solid transparent;
1634
- outline-offset: 2px;
1635
- }
1636
- }
1637
- }
1638
- &:focus, &:focus-within {
1639
- --input-color: var(--color-base-content);
1640
- box-shadow: 0 1px var(--input-color);
1641
- @supports (color: color-mix(in lab, red, red)) {
1642
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1643
- }
1644
- outline: 2px solid var(--input-color);
1645
- outline-offset: 2px;
1646
- }
1647
- &:has(> select[disabled]), &:is(:disabled, [disabled]) {
1648
- cursor: not-allowed;
1649
- border-color: var(--color-base-200);
1650
- background-color: var(--color-base-200);
1651
- color: var(--color-base-content);
1652
- @supports (color: color-mix(in lab, red, red)) {
1653
- color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1654
- }
1655
- &::placeholder {
1656
- color: var(--color-base-content);
1657
- @supports (color: color-mix(in lab, red, red)) {
1658
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1659
- }
1660
- }
1661
- }
1662
- &:has(> select[disabled]) > select[disabled] {
1663
- cursor: not-allowed;
1664
- }
1665
- }
1666
- .avatar {
1667
- position: relative;
1668
- display: inline-flex;
1669
- vertical-align: middle;
1670
- & > div {
1671
- display: block;
1672
- aspect-ratio: 1 / 1;
1673
- overflow: hidden;
1674
- }
1675
- img {
1676
- height: 100%;
1677
- width: 100%;
1678
- object-fit: cover;
1679
- }
1680
- }
1681
- .checkbox {
1682
- border: var(--border) solid var(--input-color, var(--color-base-content));
1683
- @supports (color: color-mix(in lab, red, red)) {
1684
- border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
1685
- }
1686
- position: relative;
1687
- flex-shrink: 0;
1688
- cursor: pointer;
1689
- appearance: none;
1690
- border-radius: var(--radius-selector);
1691
- padding: calc(0.25rem * 1);
1692
- vertical-align: middle;
1693
- color: var(--color-base-content);
1694
- box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
1695
- transition: background-color 0.2s, box-shadow 0.2s;
1696
- --size: calc(var(--size-selector, 0.25rem) * 6);
1697
- width: var(--size);
1698
- height: var(--size);
1699
- background-size: auto, calc(var(--noise) * 100%);
1700
- background-image: none, var(--fx-noise);
1701
- &:before {
1702
- --tw-content: "";
1703
- content: var(--tw-content);
1704
- display: block;
1705
- width: 100%;
1706
- height: 100%;
1707
- rotate: 45deg;
1708
- background-color: currentColor;
1709
- opacity: 0%;
1710
- transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
1711
- transition-delay: 0.1s;
1712
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
1713
- box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1714
- font-size: 1rem;
1715
- line-height: 0.75;
1716
- }
1717
- &:focus-visible {
1718
- outline: 2px solid var(--input-color, currentColor);
1719
- outline-offset: 2px;
1720
- }
1721
- &:checked, &[aria-checked="true"] {
1722
- background-color: var(--input-color, #0000);
1723
- box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
1724
- &:before {
1725
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
1726
- opacity: 100%;
1727
- @media print {
1728
- rotate: 0deg;
1729
- }
1730
- @media print {
1731
- background-color: transparent;
1732
- }
1733
- @media print {
1734
- --tw-content: "✔︎";
1735
- }
1736
- @media print {
1737
- clip-path: none;
1738
- }
1739
- @media (forced-colors: active) {
1740
- rotate: 0deg;
1741
- background-color: transparent;
1742
- --tw-content: "✔︎";
1743
- clip-path: none;
1744
- }
1745
- }
1746
- }
1747
- &:indeterminate {
1748
- &:before {
1749
- rotate: 0deg;
1750
- opacity: 100%;
1751
- translate: 0 -35%;
1752
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
1753
- }
1754
- }
1755
- &:disabled {
1756
- cursor: not-allowed;
1757
- opacity: 20%;
1758
- }
1759
- }
1760
- .radio {
1761
- position: relative;
1762
- flex-shrink: 0;
1763
- cursor: pointer;
1764
- appearance: none;
1765
- border-radius: calc(infinity * 1px);
1766
- padding: calc(0.25rem * 1);
1767
- vertical-align: middle;
1768
- border: var(--border) solid var(--input-color, currentColor);
1769
- @supports (color: color-mix(in lab, red, red)) {
1770
- border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
1771
- }
1772
- box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
1773
- --size: calc(var(--size-selector, 0.25rem) * 6);
1774
- width: var(--size);
1775
- height: var(--size);
1776
- color: var(--input-color, currentColor);
1777
- &:before {
1778
- display: block;
1779
- width: 100%;
1780
- height: 100%;
1781
- border-radius: calc(infinity * 1px);
1782
- --tw-content: "";
1783
- content: var(--tw-content);
1784
- background-size: auto, calc(var(--noise) * 100%);
1785
- background-image: none, var(--fx-noise);
1786
- }
1787
- &:focus-visible {
1788
- outline: 2px solid currentColor;
1789
- }
1790
- &:checked, &[aria-checked="true"] {
1791
- animation: radio 0.2s ease-out;
1792
- border-color: currentColor;
1793
- background-color: var(--color-base-100);
1794
- &:before {
1795
- background-color: currentColor;
1796
- @media print {
1797
- outline: .25rem solid;
1798
- }
1799
- @media print {
1800
- outline-offset: -1rem;
1801
- }
1802
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
1803
- @media (forced-colors: active) {
1804
- outline-style: var(--tw-outline-style);
1805
- outline-width: 1px;
1806
- outline-offset: calc(1px * -1);
1807
- }
1808
- }
1809
- }
1810
- &:disabled {
1811
- cursor: not-allowed;
1812
- opacity: 20%;
1813
- }
1814
- }
1815
- .rating {
1816
- position: relative;
1817
- display: inline-flex;
1818
- vertical-align: middle;
1819
- & input {
1820
- border: none;
1821
- appearance: none;
1822
- }
1823
- :where(*) {
1824
- animation: rating 0.25s ease-out;
1825
- height: calc(0.25rem * 6);
1826
- width: calc(0.25rem * 6);
1827
- border-radius: 0;
1828
- background-color: var(--color-base-content);
1829
- opacity: 20%;
1830
- &:is(input) {
1831
- cursor: pointer;
1832
- }
1833
- }
1834
- & .rating-hidden {
1835
- width: calc(0.25rem * 2);
1836
- background-color: transparent;
1837
- }
1838
- input[type="radio"]:checked {
1839
- background-image: none;
1840
- }
1841
- * {
1842
- &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
1843
- opacity: 100%;
1844
- }
1845
- &:focus-visible {
1846
- transition: scale 0.2s ease-out;
1847
- scale: 1.1;
1848
- }
1849
- }
1850
- & *:active:focus {
1851
- animation: none;
1852
- scale: 1.1;
1853
- }
1854
- &.rating-xs :where(*:not(.rating-hidden)) {
1855
- width: calc(0.25rem * 4);
1856
- height: calc(0.25rem * 4);
1857
- }
1858
- &.rating-sm :where(*:not(.rating-hidden)) {
1859
- width: calc(0.25rem * 5);
1860
- height: calc(0.25rem * 5);
1861
- }
1862
- &.rating-md :where(*:not(.rating-hidden)) {
1863
- width: calc(0.25rem * 6);
1864
- height: calc(0.25rem * 6);
1865
- }
1866
- &.rating-lg :where(*:not(.rating-hidden)) {
1867
- width: calc(0.25rem * 7);
1868
- height: calc(0.25rem * 7);
1869
- }
1870
- &.rating-xl :where(*:not(.rating-hidden)) {
1871
- width: calc(0.25rem * 8);
1872
- height: calc(0.25rem * 8);
1873
- }
1874
- }
1875
- .progress {
1876
- position: relative;
1877
- height: calc(0.25rem * 2);
1878
- width: 100%;
1879
- appearance: none;
1880
- overflow: hidden;
1881
- border-radius: var(--radius-box);
1882
- background-color: currentColor;
1883
- @supports (color: color-mix(in lab, red, red)) {
1884
- background-color: color-mix(in oklab, currentColor 20%, transparent);
1885
- }
1886
- color: var(--color-base-content);
1887
- &:indeterminate {
1888
- background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
1889
- background-size: 200%;
1890
- background-position-x: 15%;
1891
- animation: progress 5s ease-in-out infinite;
1892
- @supports (-moz-appearance: none) {
1893
- &::-moz-progress-bar {
1894
- background-color: transparent;
1895
- background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
1896
- background-size: 200%;
1897
- background-position-x: 15%;
1898
- animation: progress 5s ease-in-out infinite;
1899
- }
1900
- }
1901
- }
1902
- @supports (-moz-appearance: none) {
1903
- &::-moz-progress-bar {
1904
- border-radius: var(--radius-box);
1905
- background-color: currentColor;
1906
- }
1907
- }
1908
- @supports (-webkit-appearance: none) {
1909
- &::-webkit-progress-bar {
1910
- border-radius: var(--radius-box);
1911
- background-color: transparent;
1912
- }
1913
- &::-webkit-progress-value {
1914
- border-radius: var(--radius-box);
1915
- background-color: currentColor;
1916
- }
1917
- }
1918
- }
1919
- .absolute {
1920
- position: absolute;
1921
- }
1922
- .fixed {
1923
- position: fixed;
1924
- }
1925
- .relative {
1926
- position: relative;
1927
- }
1928
- .dropdown-right {
1929
- --anchor-h: right;
1930
- --anchor-v: span-bottom;
1931
- .dropdown-content {
1932
- inset-inline-start: 100%;
1933
- top: calc(0.25rem * 0);
1934
- bottom: auto;
1935
- transform-origin: left;
1936
- }
1937
- }
1938
- .dropdown-left {
1939
- --anchor-h: left;
1940
- --anchor-v: span-bottom;
1941
- .dropdown-content {
1942
- inset-inline-end: 100%;
1943
- top: calc(0.25rem * 0);
1944
- bottom: auto;
1945
- transform-origin: right;
1946
- }
1947
- }
1948
- .dropdown-end {
1949
- --anchor-h: span-left;
1950
- :where(.dropdown-content) {
1951
- inset-inline-end: calc(0.25rem * 0);
1952
- }
1953
- &.dropdown-left {
1954
- --anchor-h: left;
1955
- --anchor-v: span-top;
1956
- .dropdown-content {
1957
- top: auto;
1958
- bottom: calc(0.25rem * 0);
1959
- }
1960
- }
1961
- &.dropdown-right {
1962
- --anchor-h: right;
1963
- --anchor-v: span-top;
1964
- .dropdown-content {
1965
- top: auto;
1966
- bottom: calc(0.25rem * 0);
1967
- }
1968
- }
1969
- }
1970
- .dropdown-bottom {
1971
- --anchor-v: bottom;
1972
- .dropdown-content {
1973
- top: 100%;
1974
- bottom: auto;
1975
- transform-origin: top;
1976
- }
1977
- }
1978
- .dropdown-top {
1979
- --anchor-v: top;
1980
- .dropdown-content {
1981
- top: auto;
1982
- bottom: 100%;
1983
- transform-origin: bottom;
1984
- }
1985
- }
1986
- .top-1\/2 {
1987
- top: calc(1/2 * 100%);
1988
- }
1989
- .top-4 {
1990
- top: calc(var(--spacing) * 4);
1991
- }
1992
- .top-full {
1993
- top: 100%;
1994
- }
1995
- .right-0 {
1996
- right: calc(var(--spacing) * 0);
1997
- }
1998
- .right-5 {
1999
- right: calc(var(--spacing) * 5);
2000
- }
2001
- .bottom-5 {
2002
- bottom: calc(var(--spacing) * 5);
2003
- }
2004
- .left-0 {
2005
- left: calc(var(--spacing) * 0);
2006
- }
2007
- .left-5 {
2008
- left: calc(var(--spacing) * 5);
2009
- }
2010
- .modal-backdrop {
2011
- grid-column-start: 1;
2012
- grid-row-start: 1;
2013
- display: grid;
2014
- align-self: stretch;
2015
- justify-self: stretch;
2016
- color: transparent;
2017
- z-index: -1;
2018
- button {
2019
- cursor: pointer;
2020
- }
2021
- }
2022
- .z-1 {
2023
- z-index: 1;
2024
- }
2025
- .z-10 {
2026
- z-index: 10;
2027
- }
2028
- .z-30 {
2029
- z-index: 30;
2030
- }
2031
- .z-50 {
2032
- z-index: 50;
2033
- }
2034
- .tab-content {
2035
- order: var(--tabcontent-order);
2036
- display: none;
2037
- border-color: transparent;
2038
- --tabcontent-radius-ss: 0;
2039
- --tabcontent-radius-se: 0;
2040
- --tabcontent-radius-es: 0;
2041
- --tabcontent-radius-ee: 0;
2042
- --tabcontent-order: 1;
2043
- width: 100%;
2044
- margin: var(--tabcontent-margin);
2045
- border-width: var(--border);
2046
- border-start-start-radius: var(--tabcontent-radius-ss);
2047
- border-start-end-radius: var(--tabcontent-radius-se);
2048
- border-end-start-radius: var(--tabcontent-radius-es);
2049
- border-end-end-radius: var(--tabcontent-radius-ee);
2050
- }
2051
- .hero {
2052
- display: grid;
2053
- width: 100%;
2054
- place-items: center;
2055
- background-size: cover;
2056
- background-position: center;
2057
- & > * {
2058
- grid-column-start: 1;
2059
- grid-row-start: 1;
2060
- }
2061
- }
2062
- .modal-box {
2063
- grid-column-start: 1;
2064
- grid-row-start: 1;
2065
- max-height: 100vh;
2066
- width: calc(11/12 * 100%);
2067
- max-width: 32rem;
2068
- background-color: var(--color-base-100);
2069
- padding: calc(0.25rem * 6);
2070
- transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out;
2071
- border-top-left-radius: var(--modal-tl, var(--radius-box));
2072
- border-top-right-radius: var(--modal-tr, var(--radius-box));
2073
- border-bottom-left-radius: var(--modal-bl, var(--radius-box));
2074
- border-bottom-right-radius: var(--modal-br, var(--radius-box));
2075
- scale: 95%;
2076
- opacity: 0;
2077
- box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;
2078
- overflow-y: auto;
2079
- overscroll-behavior: contain;
2080
- }
2081
- .container {
2082
- width: 100%;
2083
- @media (width >= 40rem) {
2084
- max-width: 40rem;
2085
- }
2086
- @media (width >= 48rem) {
2087
- max-width: 48rem;
2088
- }
2089
- @media (width >= 64rem) {
2090
- max-width: 64rem;
2091
- }
2092
- @media (width >= 80rem) {
2093
- max-width: 80rem;
2094
- }
2095
- @media (width >= 96rem) {
2096
- max-width: 96rem;
2097
- }
2098
- }
2099
- .m-1 {
2100
- margin: calc(var(--spacing) * 1);
2101
- }
2102
- .filter {
2103
- display: flex;
2104
- flex-wrap: wrap;
2105
- input[type="radio"] {
2106
- width: auto;
2107
- }
2108
- input {
2109
- overflow: hidden;
2110
- opacity: 100%;
2111
- scale: 1;
2112
- transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s;
2113
- &:not(:last-child) {
2114
- margin-inline-end: calc(0.25rem * 1);
2115
- }
2116
- &.filter-reset {
2117
- aspect-ratio: 1 / 1;
2118
- &::after {
2119
- content: "×";
2120
- }
2121
- }
2122
- }
2123
- &:not(:has(input:checked:not(.filter-reset))) {
2124
- .filter-reset, input[type="reset"] {
2125
- scale: 0;
2126
- border-width: 0;
2127
- margin-inline: calc(0.25rem * 0);
2128
- width: calc(0.25rem * 0);
2129
- padding-inline: calc(0.25rem * 0);
2130
- opacity: 0%;
2131
- }
2132
- }
2133
- &:has(input:checked:not(.filter-reset)) {
2134
- input:not(:checked, .filter-reset, input[type="reset"]) {
2135
- scale: 0;
2136
- border-width: 0;
2137
- margin-inline: calc(0.25rem * 0);
2138
- width: calc(0.25rem * 0);
2139
- padding-inline: calc(0.25rem * 0);
2140
- opacity: 0%;
2141
- }
2142
- }
2143
- }
2144
- .mx-2 {
2145
- margin-inline: calc(var(--spacing) * 2);
2146
- }
2147
- .mx-auto {
2148
- margin-inline: auto;
2149
- }
2150
- .input-lg {
2151
- --size: calc(var(--size-field, 0.25rem) * 12);
2152
- font-size: 1.125rem;
2153
- &[type="number"] {
2154
- &::-webkit-inner-spin-button {
2155
- margin-block: calc(0.25rem * -3);
2156
- margin-inline-end: calc(0.25rem * -3);
2157
- }
2158
- }
2159
- }
2160
- .input-md {
2161
- --size: calc(var(--size-field, 0.25rem) * 10);
2162
- font-size: 0.875rem;
2163
- &[type="number"] {
2164
- &::-webkit-inner-spin-button {
2165
- margin-block: calc(0.25rem * -3);
2166
- margin-inline-end: calc(0.25rem * -3);
2167
- }
2168
- }
2169
- }
2170
- .input-sm {
2171
- --size: calc(var(--size-field, 0.25rem) * 8);
2172
- font-size: 0.75rem;
2173
- &[type="number"] {
2174
- &::-webkit-inner-spin-button {
2175
- margin-block: calc(0.25rem * -2);
2176
- margin-inline-end: calc(0.25rem * -3);
2177
- }
2178
- }
2179
- }
2180
- .input-xl {
2181
- --size: calc(var(--size-field, 0.25rem) * 14);
2182
- font-size: 1.375rem;
2183
- &[type="number"] {
2184
- &::-webkit-inner-spin-button {
2185
- margin-block: calc(0.25rem * -4);
2186
- margin-inline-end: calc(0.25rem * -3);
2187
- }
2188
- }
2189
- }
2190
- .input-xs {
2191
- --size: calc(var(--size-field, 0.25rem) * 6);
2192
- font-size: 0.6875rem;
2193
- &[type="number"] {
2194
- &::-webkit-inner-spin-button {
2195
- margin-block: calc(0.25rem * -1);
2196
- margin-inline-end: calc(0.25rem * -3);
2197
- }
2198
- }
2199
- }
2200
- .my-2 {
2201
- margin-block: calc(var(--spacing) * 2);
2202
- }
2203
- .my-4 {
2204
- margin-block: calc(var(--spacing) * 4);
2205
- }
2206
- .label {
2207
- display: inline-flex;
2208
- align-items: center;
2209
- gap: calc(0.25rem * 1.5);
2210
- white-space: nowrap;
2211
- color: currentColor;
2212
- @supports (color: color-mix(in lab, red, red)) {
2213
- color: color-mix(in oklab, currentColor 60%, transparent);
2214
- }
2215
- &:has(input) {
2216
- cursor: pointer;
2217
- }
2218
- &:is(.input > *, .select > *) {
2219
- display: flex;
2220
- height: calc(100% - 0.5rem);
2221
- align-items: center;
2222
- padding-inline: calc(0.25rem * 3);
2223
- white-space: nowrap;
2224
- font-size: inherit;
2225
- &:first-child {
2226
- margin-inline-start: calc(0.25rem * -3);
2227
- margin-inline-end: calc(0.25rem * 3);
2228
- border-inline-end: var(--border) solid currentColor;
2229
- @supports (color: color-mix(in lab, red, red)) {
2230
- border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2231
- }
2232
- }
2233
- &:last-child {
2234
- margin-inline-start: calc(0.25rem * 3);
2235
- margin-inline-end: calc(0.25rem * -3);
2236
- border-inline-start: var(--border) solid currentColor;
2237
- @supports (color: color-mix(in lab, red, red)) {
2238
- border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2239
- }
2240
- }
2241
- }
2242
- }
2243
- .steps-vertical {
2244
- grid-auto-rows: 1fr;
2245
- grid-auto-flow: row;
2246
- .step {
2247
- display: grid;
2248
- grid-template-columns: repeat(2, minmax(0, 1fr));
2249
- grid-template-columns: 40px 1fr;
2250
- grid-template-rows: repeat(1, minmax(0, 1fr));
2251
- grid-template-rows: auto;
2252
- gap: 0.5rem;
2253
- min-height: 4rem;
2254
- justify-items: start;
2255
- &:before {
2256
- height: 100%;
2257
- width: calc(0.25rem * 2);
2258
- translate: -50% -50%;
2259
- margin-inline-start: 50%;
2260
- }
2261
- [dir="rtl"] &:before {
2262
- translate: 50% -50%;
2263
- }
2264
- }
2265
- }
2266
- .join-item {
2267
- &:where(*:not(:first-child)) {
2268
- margin-inline-start: calc(var(--border, 1px) * -1);
2269
- margin-block-start: 0;
2270
- }
2271
- }
2272
- .modal-action {
2273
- margin-top: calc(0.25rem * 6);
2274
- display: flex;
2275
- justify-content: flex-end;
2276
- gap: calc(0.25rem * 2);
2277
- }
2278
- .validator-hint {
2279
- margin-top: calc(0.25rem * 2);
2280
- font-size: var(--text-xs);
2281
- line-height: var(--tw-leading, var(--text-xs--line-height));
2282
- }
2283
- .mt-1 {
2284
- margin-top: calc(var(--spacing) * 1);
2285
- }
2286
- .mt-2 {
2287
- margin-top: calc(var(--spacing) * 2);
2288
- }
2289
- .mt-4 {
2290
- margin-top: calc(var(--spacing) * 4);
2291
- }
2292
- .mt-9 {
2293
- margin-top: calc(var(--spacing) * 9);
2294
- }
2295
- .mt-10 {
2296
- margin-top: calc(var(--spacing) * 10);
2297
- }
2298
- .mt-auto {
2299
- margin-top: auto;
2300
- }
2301
- .mr-2 {
2302
- margin-right: calc(var(--spacing) * 2);
2303
- }
2304
- .footer-title {
2305
- margin-bottom: calc(0.25rem * 2);
2306
- text-transform: uppercase;
2307
- opacity: 60%;
2308
- font-weight: 600;
2309
- }
2310
- .mb-2 {
2311
- margin-bottom: calc(var(--spacing) * 2);
2312
- }
2313
- .ml-1 {
2314
- margin-left: calc(var(--spacing) * 1);
2315
- }
2316
- .ml-2 {
2317
- margin-left: calc(var(--spacing) * 2);
2318
- }
2319
- .carousel-item {
2320
- box-sizing: content-box;
2321
- display: flex;
2322
- flex: none;
2323
- scroll-snap-align: start;
2324
- }
2325
- .status {
2326
- display: inline-block;
2327
- aspect-ratio: 1 / 1;
2328
- width: calc(0.25rem * 2);
2329
- height: calc(0.25rem * 2);
2330
- border-radius: var(--radius-selector);
2331
- background-color: var(--color-base-content);
2332
- @supports (color: color-mix(in lab, red, red)) {
2333
- background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
2334
- }
2335
- background-position: center;
2336
- background-repeat: no-repeat;
2337
- vertical-align: middle;
2338
- color: color-mix(in srgb, #000 30%, transparent);
2339
- @supports (color: color-mix(in lab, red, red)) {
2340
- color: color-mix(in oklab, var(--color-black) 30%, transparent);
2341
- }
2342
- background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 );
2343
- box-shadow: 0 2px 3px -1px currentColor;
2344
- @supports (color: color-mix(in lab, red, red)) {
2345
- box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
2346
- }
2347
- }
2348
- .badge {
2349
- display: inline-flex;
2350
- align-items: center;
2351
- justify-content: center;
2352
- gap: calc(0.25rem * 2);
2353
- border-radius: var(--radius-selector);
2354
- vertical-align: middle;
2355
- color: var(--color-base-content);
2356
- border: var(--border) solid var(--badge-color, var(--color-base-200));
2357
- font-size: 0.875rem;
2358
- width: fit-content;
2359
- padding-inline: calc(0.25rem * 3 - var(--border));
2360
- background-size: auto, calc(var(--noise) * 100%);
2361
- background-image: none, var(--fx-noise);
2362
- background-color: var(--badge-color, var(--color-base-100));
2363
- --size: calc(var(--size-selector, 0.25rem) * 6);
2364
- height: var(--size);
2365
- &.badge-outline {
2366
- color: var(--badge-color, var(--color-base-content));
2367
- border-color: currentColor;
2368
- background-color: transparent;
2369
- background-image: none;
2370
- box-shadow: none;
2371
- }
2372
- &.badge-dash {
2373
- color: var(--badge-color, var(--color-base-content));
2374
- background-color: transparent;
2375
- border-style: dashed;
2376
- background-image: none;
2377
- box-shadow: none;
2378
- }
2379
- &.badge-soft {
2380
- color: var(--badge-color, var(--color-base-content));
2381
- background-color: var(--badge-color, var(--color-base-content));
2382
- @supports (color: color-mix(in lab, red, red)) {
2383
- background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
2384
- }
2385
- border-color: var(--badge-color, var(--color-base-content));
2386
- @supports (color: color-mix(in lab, red, red)) {
2387
- border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
2388
- }
2389
- background-image: none;
2390
- box-shadow: none;
2391
- }
2392
- }
2393
- .tabs {
2394
- display: flex;
2395
- flex-wrap: wrap;
2396
- --tabs-height: auto;
2397
- --tabs-direction: row;
2398
- height: var(--tabs-height);
2399
- flex-direction: var(--tabs-direction);
2400
- }
2401
- .navbar {
2402
- display: flex;
2403
- width: 100%;
2404
- align-items: center;
2405
- padding: 0.5rem;
2406
- min-height: 4rem;
2407
- }
2408
- .footer {
2409
- display: grid;
2410
- width: 100%;
2411
- grid-auto-flow: row;
2412
- place-items: start;
2413
- column-gap: calc(0.25rem * 4);
2414
- row-gap: calc(0.25rem * 10);
2415
- font-size: 0.875rem;
2416
- line-height: 1.25rem;
2417
- & > * {
2418
- display: grid;
2419
- place-items: start;
2420
- gap: calc(0.25rem * 2);
2421
- }
2422
- &.footer-center {
2423
- grid-auto-flow: column dense;
2424
- place-items: center;
2425
- text-align: center;
2426
- & > * {
2427
- place-items: center;
2428
- }
2429
- }
2430
- }
2431
- .navbar-end {
2432
- display: inline-flex;
2433
- align-items: center;
2434
- width: 50%;
2435
- justify-content: flex-end;
2436
- }
2437
- .navbar-start {
2438
- display: inline-flex;
2439
- align-items: center;
2440
- width: 50%;
2441
- justify-content: flex-start;
2442
- }
2443
- .hero-content {
2444
- display: flex;
2445
- max-width: 80rem;
2446
- align-items: center;
2447
- justify-content: center;
2448
- gap: calc(0.25rem * 4);
2449
- padding: calc(0.25rem * 4);
2450
- }
2451
- .card-body {
2452
- display: flex;
2453
- flex: auto;
2454
- flex-direction: column;
2455
- gap: calc(0.25rem * 2);
2456
- padding: var(--card-p, 1.5rem);
2457
- font-size: var(--card-fs, 0.875rem);
2458
- :where(p) {
2459
- flex-grow: 1;
2460
- }
2461
- }
2462
- .navbar-center {
2463
- display: inline-flex;
2464
- align-items: center;
2465
- flex-shrink: 0;
2466
- }
2467
- .carousel {
2468
- display: inline-flex;
2469
- overflow-x: scroll;
2470
- scroll-snap-type: x mandatory;
2471
- scroll-behavior: smooth;
2472
- scrollbar-width: none;
2473
- &::-webkit-scrollbar {
2474
- display: none;
2475
- }
2476
- }
2477
- .card-actions {
2478
- display: flex;
2479
- flex-wrap: wrap;
2480
- align-items: flex-start;
2481
- gap: calc(0.25rem * 2);
2482
- }
2483
- .card-title {
2484
- display: flex;
2485
- align-items: center;
2486
- gap: calc(0.25rem * 2);
2487
- font-size: var(--cardtitle-fs, 1.125rem);
2488
- font-weight: 600;
2489
- }
2490
- .join {
2491
- display: inline-flex;
2492
- align-items: stretch;
2493
- --join-ss: 0;
2494
- --join-se: 0;
2495
- --join-es: 0;
2496
- --join-ee: 0;
2497
- :where(.join-item) {
2498
- border-start-start-radius: var(--join-ss, 0);
2499
- border-start-end-radius: var(--join-se, 0);
2500
- border-end-start-radius: var(--join-es, 0);
2501
- border-end-end-radius: var(--join-ee, 0);
2502
- * {
2503
- --join-ss: var(--radius-field);
2504
- --join-se: var(--radius-field);
2505
- --join-es: var(--radius-field);
2506
- --join-ee: var(--radius-field);
2507
- }
2508
- }
2509
- > .join-item:where(:first-child) {
2510
- --join-ss: var(--radius-field);
2511
- --join-se: 0;
2512
- --join-es: var(--radius-field);
2513
- --join-ee: 0;
2514
- }
2515
- :first-child:not(:last-child) {
2516
- :where(.join-item) {
2517
- --join-ss: var(--radius-field);
2518
- --join-se: 0;
2519
- --join-es: var(--radius-field);
2520
- --join-ee: 0;
2521
- }
2522
- }
2523
- > .join-item:where(:last-child) {
2524
- --join-ss: 0;
2525
- --join-se: var(--radius-field);
2526
- --join-es: 0;
2527
- --join-ee: var(--radius-field);
2528
- }
2529
- :last-child:not(:first-child) {
2530
- :where(.join-item) {
2531
- --join-ss: 0;
2532
- --join-se: var(--radius-field);
2533
- --join-es: 0;
2534
- --join-ee: var(--radius-field);
2535
- }
2536
- }
2537
- }
2538
- .mask {
2539
- display: inline-block;
2540
- vertical-align: middle;
2541
- mask-size: contain;
2542
- mask-repeat: no-repeat;
2543
- mask-position: center;
2544
- }
2545
- .block {
2546
- display: block;
2547
- }
2548
- .contents\! {
2549
- display: contents !important;
2550
- }
2551
- .flex {
2552
- display: flex;
2553
- }
2554
- .hidden {
2555
- display: none;
2556
- }
2557
- .inline {
2558
- display: inline;
2559
- }
2560
- .inline-block {
2561
- display: inline-block;
2562
- }
2563
- .inline-flex {
2564
- display: inline-flex;
2565
- }
2566
- .table {
2567
- display: table;
2568
- }
2569
- .modal-bottom {
2570
- place-items: end;
2571
- :where(.modal-box) {
2572
- height: auto;
2573
- width: 100%;
2574
- max-width: none;
2575
- max-height: calc(100vh - 5em);
2576
- translate: 0 100%;
2577
- scale: 1;
2578
- --modal-tl: var(--radius-box);
2579
- --modal-tr: var(--radius-box);
2580
- --modal-bl: 0;
2581
- --modal-br: 0;
2582
- }
2583
- }
2584
- .modal-middle {
2585
- place-items: center;
2586
- :where(.modal-box) {
2587
- height: auto;
2588
- width: calc(11/12 * 100%);
2589
- max-width: 32rem;
2590
- max-height: calc(100vh - 5em);
2591
- translate: 0 2%;
2592
- scale: 98%;
2593
- --modal-tl: var(--radius-box);
2594
- --modal-tr: var(--radius-box);
2595
- --modal-bl: var(--radius-box);
2596
- --modal-br: var(--radius-box);
2597
- }
2598
- }
2599
- .modal-top {
2600
- place-items: start;
2601
- :where(.modal-box) {
2602
- height: auto;
2603
- width: 100%;
2604
- max-width: none;
2605
- max-height: calc(100vh - 5em);
2606
- translate: 0 -100%;
2607
- scale: 1;
2608
- --modal-tl: 0;
2609
- --modal-tr: 0;
2610
- --modal-bl: var(--radius-box);
2611
- --modal-br: var(--radius-box);
2612
- }
2613
- }
2614
- .card-side {
2615
- align-items: stretch;
2616
- flex-direction: row;
2617
- :where(figure:first-child) {
2618
- overflow: hidden;
2619
- border-start-start-radius: inherit;
2620
- border-start-end-radius: unset;
2621
- border-end-start-radius: inherit;
2622
- border-end-end-radius: unset;
2623
- }
2624
- :where(figure:last-child) {
2625
- overflow: hidden;
2626
- border-start-start-radius: unset;
2627
- border-start-end-radius: inherit;
2628
- border-end-start-radius: unset;
2629
- border-end-end-radius: inherit;
2630
- }
2631
- figure > * {
2632
- max-width: unset;
2633
- }
2634
- :where(figure > *) {
2635
- width: 100%;
2636
- height: 100%;
2637
- object-fit: cover;
2638
- }
2639
- }
2640
- .btn-circle {
2641
- border-radius: calc(infinity * 1px);
2642
- padding-inline: calc(0.25rem * 0);
2643
- width: var(--size);
2644
- height: var(--size);
2645
- }
2646
- .btn-square {
2647
- padding-inline: calc(0.25rem * 0);
2648
- width: var(--size);
2649
- height: var(--size);
2650
- }
2651
- .tabs-lg {
2652
- :where(.tab) {
2653
- height: calc(var(--size-field, 0.25rem) * 12);
2654
- font-size: 1.125rem;
2655
- --tab-p: 1rem;
2656
- --tab-radius-min: calc(1.5rem - var(--border));
2657
- }
2658
- }
2659
- .h-0 {
2660
- height: calc(var(--spacing) * 0);
2661
- }
2662
- .h-0\.5 {
2663
- height: calc(var(--spacing) * 0.5);
2664
- }
2665
- .h-1 {
2666
- height: calc(var(--spacing) * 1);
2667
- }
2668
- .h-1\.5 {
2669
- height: calc(var(--spacing) * 1.5);
2670
- }
2671
- .h-1\/2 {
2672
- height: calc(1/2 * 100%);
2673
- }
2674
- .h-1\/3 {
2675
- height: calc(1/3 * 100%);
2676
- }
2677
- .h-1\/4 {
2678
- height: calc(1/4 * 100%);
2679
- }
2680
- .h-1\/5 {
2681
- height: calc(1/5 * 100%);
2682
- }
2683
- .h-1\/6 {
2684
- height: calc(1/6 * 100%);
2685
- }
2686
- .h-2 {
2687
- height: calc(var(--spacing) * 2);
2688
- }
2689
- .h-2\.5 {
2690
- height: calc(var(--spacing) * 2.5);
2691
- }
2692
- .h-2\/3 {
2693
- height: calc(2/3 * 100%);
2694
- }
2695
- .h-2\/4 {
2696
- height: calc(2/4 * 100%);
2697
- }
2698
- .h-2\/5 {
2699
- height: calc(2/5 * 100%);
2700
- }
2701
- .h-2\/6 {
2702
- height: calc(2/6 * 100%);
2703
- }
2704
- .h-3 {
2705
- height: calc(var(--spacing) * 3);
2706
- }
2707
- .h-3\.5 {
2708
- height: calc(var(--spacing) * 3.5);
2709
- }
2710
- .h-3\/4 {
2711
- height: calc(3/4 * 100%);
2712
- }
2713
- .h-3\/5 {
2714
- height: calc(3/5 * 100%);
2715
- }
2716
- .h-3\/6 {
2717
- height: calc(3/6 * 100%);
2718
- }
2719
- .h-4 {
2720
- height: calc(var(--spacing) * 4);
2721
- }
2722
- .h-4\/5 {
2723
- height: calc(4/5 * 100%);
2724
- }
2725
- .h-4\/6 {
2726
- height: calc(4/6 * 100%);
2727
- }
2728
- .h-5 {
2729
- height: calc(var(--spacing) * 5);
2730
- }
2731
- .h-5\/6 {
2732
- height: calc(5/6 * 100%);
2733
- }
2734
- .h-6 {
2735
- height: calc(var(--spacing) * 6);
2736
- }
2737
- .h-7 {
2738
- height: calc(var(--spacing) * 7);
2739
- }
2740
- .h-8 {
2741
- height: calc(var(--spacing) * 8);
2742
- }
2743
- .h-9 {
2744
- height: calc(var(--spacing) * 9);
2745
- }
2746
- .h-10 {
2747
- height: calc(var(--spacing) * 10);
2748
- }
2749
- .h-11 {
2750
- height: calc(var(--spacing) * 11);
2751
- }
2752
- .h-12 {
2753
- height: calc(var(--spacing) * 12);
2754
- }
2755
- .h-14 {
2756
- height: calc(var(--spacing) * 14);
2757
- }
2758
- .h-16 {
2759
- height: calc(var(--spacing) * 16);
2760
- }
2761
- .h-20 {
2762
- height: calc(var(--spacing) * 20);
2763
- }
2764
- .h-24 {
2765
- height: calc(var(--spacing) * 24);
2766
- }
2767
- .h-28 {
2768
- height: calc(var(--spacing) * 28);
2769
- }
2770
- .h-32 {
2771
- height: calc(var(--spacing) * 32);
2772
- }
2773
- .h-36 {
2774
- height: calc(var(--spacing) * 36);
2775
- }
2776
- .h-40 {
2777
- height: calc(var(--spacing) * 40);
2778
- }
2779
- .h-44 {
2780
- height: calc(var(--spacing) * 44);
2781
- }
2782
- .h-48 {
2783
- height: calc(var(--spacing) * 48);
2784
- }
2785
- .h-52 {
2786
- height: calc(var(--spacing) * 52);
2787
- }
2788
- .h-56 {
2789
- height: calc(var(--spacing) * 56);
2790
- }
2791
- .h-60 {
2792
- height: calc(var(--spacing) * 60);
2793
- }
2794
- .h-64 {
2795
- height: calc(var(--spacing) * 64);
2796
- }
2797
- .h-72 {
2798
- height: calc(var(--spacing) * 72);
2799
- }
2800
- .h-80 {
2801
- height: calc(var(--spacing) * 80);
2802
- }
2803
- .h-96 {
2804
- height: calc(var(--spacing) * 96);
2805
- }
2806
- .h-auto {
2807
- height: auto;
2808
- }
2809
- .h-dvh {
2810
- height: 100dvh;
2811
- }
2812
- .h-fit {
2813
- height: fit-content;
2814
- }
2815
- .h-full {
2816
- height: 100%;
2817
- }
2818
- .h-lvh {
2819
- height: 100lvh;
2820
- }
2821
- .h-max {
2822
- height: max-content;
2823
- }
2824
- .h-min {
2825
- height: min-content;
2826
- }
2827
- .h-px {
2828
- height: 1px;
2829
- }
2830
- .h-screen {
2831
- height: 100vh;
2832
- }
2833
- .h-svh {
2834
- height: 100svh;
2835
- }
2836
- .max-h-60 {
2837
- max-height: calc(var(--spacing) * 60);
2838
- }
2839
- .min-h-10 {
2840
- min-height: calc(var(--spacing) * 10);
2841
- }
2842
- .min-h-40 {
2843
- min-height: calc(var(--spacing) * 40);
2844
- }
2845
- .min-h-max {
2846
- min-height: max-content;
2847
- }
2848
- .btn-wide {
2849
- width: 100%;
2850
- max-width: calc(0.25rem * 64);
2851
- }
2852
- .cally {
2853
- font-size: 0.7rem;
2854
- &::part(container) {
2855
- padding: 0.5rem 1rem;
2856
- user-select: none;
2857
- }
2858
- ::part(th) {
2859
- font-weight: normal;
2860
- block-size: auto;
2861
- }
2862
- &::part(header) {
2863
- direction: ltr;
2864
- }
2865
- ::part(head) {
2866
- opacity: 0.5;
2867
- font-size: 0.7rem;
2868
- }
2869
- &::part(button) {
2870
- border-radius: var(--radius-field);
2871
- border: none;
2872
- padding: 0.5rem;
2873
- background: #0000;
2874
- }
2875
- &::part(button):hover {
2876
- background: var(--color-base-200);
2877
- }
2878
- ::part(day) {
2879
- border-radius: var(--radius-field);
2880
- font-size: 0.7rem;
2881
- }
2882
- ::part(button day today) {
2883
- background: var(--color-primary);
2884
- color: var(--color-primary-content);
2885
- }
2886
- ::part(selected) {
2887
- color: var(--color-base-100);
2888
- background: var(--color-base-content);
2889
- border-radius: var(--radius-field);
2890
- }
2891
- ::part(range-inner) {
2892
- border-radius: 0;
2893
- }
2894
- ::part(range-start) {
2895
- border-start-end-radius: 0;
2896
- border-end-end-radius: 0;
2897
- }
2898
- ::part(range-end) {
2899
- border-start-start-radius: 0;
2900
- border-end-start-radius: 0;
2901
- }
2902
- ::part(range-start range-end) {
2903
- border-radius: var(--radius-field);
2904
- }
2905
- calendar-month {
2906
- width: 100%;
2907
- }
2908
- }
2909
- .rating-half {
2910
- :where(*:not(.rating-hidden)) {
2911
- width: calc(0.25rem * 3);
2912
- }
2913
- &.rating-xs *:not(.rating-hidden) {
2914
- width: calc(0.25rem * 2);
2915
- }
2916
- &.rating-sm *:not(.rating-hidden) {
2917
- width: calc(0.25rem * 2.5);
2918
- }
2919
- &.rating-md *:not(.rating-hidden) {
2920
- width: calc(0.25rem * 3);
2921
- }
2922
- &.rating-lg *:not(.rating-hidden) {
2923
- width: .875rem;
2924
- }
2925
- &.rating-xl *:not(.rating-hidden) {
2926
- width: calc(0.25rem * 4);
2927
- }
2928
- }
2929
- .loading-lg {
2930
- width: calc(var(--size-selector, 0.25rem) * 7);
2931
- }
2932
- .loading-md {
2933
- width: calc(var(--size-selector, 0.25rem) * 6);
2934
- }
2935
- .loading-sm {
2936
- width: calc(var(--size-selector, 0.25rem) * 5);
2937
- }
2938
- .loading-xl {
2939
- width: calc(var(--size-selector, 0.25rem) * 8);
2940
- }
2941
- .loading-xs {
2942
- width: calc(var(--size-selector, 0.25rem) * 4);
2943
- }
2944
- .w-0 {
2945
- width: calc(var(--spacing) * 0);
2946
- }
2947
- .w-0\.5 {
2948
- width: calc(var(--spacing) * 0.5);
2949
- }
2950
- .w-1 {
2951
- width: calc(var(--spacing) * 1);
2952
- }
2953
- .w-1\.5 {
2954
- width: calc(var(--spacing) * 1.5);
2955
- }
2956
- .w-1\/2 {
2957
- width: calc(1/2 * 100%);
2958
- }
2959
- .w-1\/3 {
2960
- width: calc(1/3 * 100%);
2961
- }
2962
- .w-1\/4 {
2963
- width: calc(1/4 * 100%);
2964
- }
2965
- .w-1\/5 {
2966
- width: calc(1/5 * 100%);
2967
- }
2968
- .w-1\/6 {
2969
- width: calc(1/6 * 100%);
2970
- }
2971
- .w-2 {
2972
- width: calc(var(--spacing) * 2);
2973
- }
2974
- .w-2\.5 {
2975
- width: calc(var(--spacing) * 2.5);
2976
- }
2977
- .w-2\/3 {
2978
- width: calc(2/3 * 100%);
2979
- }
2980
- .w-2\/4 {
2981
- width: calc(2/4 * 100%);
2982
- }
2983
- .w-2\/5 {
2984
- width: calc(2/5 * 100%);
2985
- }
2986
- .w-2\/6 {
2987
- width: calc(2/6 * 100%);
2988
- }
2989
- .w-3 {
2990
- width: calc(var(--spacing) * 3);
2991
- }
2992
- .w-3\.5 {
2993
- width: calc(var(--spacing) * 3.5);
2994
- }
2995
- .w-3\/4 {
2996
- width: calc(3/4 * 100%);
2997
- }
2998
- .w-3\/5 {
2999
- width: calc(3/5 * 100%);
3000
- }
3001
- .w-3\/6 {
3002
- width: calc(3/6 * 100%);
3003
- }
3004
- .w-4 {
3005
- width: calc(var(--spacing) * 4);
3006
- }
3007
- .w-4\/5 {
3008
- width: calc(4/5 * 100%);
3009
- }
3010
- .w-4\/6 {
3011
- width: calc(4/6 * 100%);
3012
- }
3013
- .w-5 {
3014
- width: calc(var(--spacing) * 5);
3015
- }
3016
- .w-5\/6 {
3017
- width: calc(5/6 * 100%);
3018
- }
3019
- .w-6 {
3020
- width: calc(var(--spacing) * 6);
3021
- }
3022
- .w-7 {
3023
- width: calc(var(--spacing) * 7);
3024
- }
3025
- .w-8 {
3026
- width: calc(var(--spacing) * 8);
3027
- }
3028
- .w-9 {
3029
- width: calc(var(--spacing) * 9);
3030
- }
3031
- .w-10 {
3032
- width: calc(var(--spacing) * 10);
3033
- }
3034
- .w-11 {
3035
- width: calc(var(--spacing) * 11);
3036
- }
3037
- .w-12 {
3038
- width: calc(var(--spacing) * 12);
3039
- }
3040
- .w-14 {
3041
- width: calc(var(--spacing) * 14);
3042
- }
3043
- .w-16 {
3044
- width: calc(var(--spacing) * 16);
3045
- }
3046
- .w-20 {
3047
- width: calc(var(--spacing) * 20);
3048
- }
3049
- .w-24 {
3050
- width: calc(var(--spacing) * 24);
3051
- }
3052
- .w-28 {
3053
- width: calc(var(--spacing) * 28);
3054
- }
3055
- .w-32 {
3056
- width: calc(var(--spacing) * 32);
3057
- }
3058
- .w-36 {
3059
- width: calc(var(--spacing) * 36);
3060
- }
3061
- .w-40 {
3062
- width: calc(var(--spacing) * 40);
3063
- }
3064
- .w-44 {
3065
- width: calc(var(--spacing) * 44);
3066
- }
3067
- .w-48 {
3068
- width: calc(var(--spacing) * 48);
3069
- }
3070
- .w-52 {
3071
- width: calc(var(--spacing) * 52);
3072
- }
3073
- .w-56 {
3074
- width: calc(var(--spacing) * 56);
3075
- }
3076
- .w-60 {
3077
- width: calc(var(--spacing) * 60);
3078
- }
3079
- .w-64 {
3080
- width: calc(var(--spacing) * 64);
3081
- }
3082
- .w-72 {
3083
- width: calc(var(--spacing) * 72);
3084
- }
3085
- .w-80 {
3086
- width: calc(var(--spacing) * 80);
3087
- }
3088
- .w-96 {
3089
- width: calc(var(--spacing) * 96);
3090
- }
3091
- .w-\[inherit\] {
3092
- width: inherit;
3093
- }
3094
- .w-auto {
3095
- width: auto;
3096
- }
3097
- .w-dvh {
3098
- width: 100dvh;
3099
- }
3100
- .w-fit {
3101
- width: fit-content;
3102
- }
3103
- .w-full {
3104
- width: 100%;
3105
- }
3106
- .w-lvh {
3107
- width: 100lvh;
3108
- }
3109
- .w-max {
3110
- width: max-content;
3111
- }
3112
- .w-min {
3113
- width: min-content;
3114
- }
3115
- .w-px {
3116
- width: 1px;
3117
- }
3118
- .w-screen {
3119
- width: 100vw;
3120
- }
3121
- .w-svh {
3122
- width: 100svh;
3123
- }
3124
- .max-w-full {
3125
- max-width: 100%;
3126
- }
3127
- .max-w-xs {
3128
- max-width: var(--container-xs);
3129
- }
3130
- .min-w-64 {
3131
- min-width: calc(var(--spacing) * 64);
3132
- }
3133
- .min-w-\[inherit\] {
3134
- min-width: inherit;
3135
- }
3136
- .min-w-max {
3137
- min-width: max-content;
3138
- }
3139
- .flex-shrink {
3140
- flex-shrink: 1;
3141
- }
3142
- .shrink {
3143
- flex-shrink: 1;
3144
- }
3145
- .flex-grow {
3146
- flex-grow: 1;
3147
- }
3148
- .grow {
3149
- flex-grow: 1;
3150
- }
3151
- .-translate-y-1\/2 {
3152
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
3153
- translate: var(--tw-translate-x) var(--tw-translate-y);
3154
- }
3155
- .swap-rotate {
3156
- .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on {
3157
- rotate: 45deg;
3158
- }
3159
- input:is(:checked, :indeterminate) ~ .swap-on, &.swap-active .swap-on {
3160
- rotate: 0deg;
3161
- }
3162
- input:is(:checked, :indeterminate) ~ .swap-off, &.swap-active .swap-off {
3163
- rotate: calc(45deg * -1);
3164
- }
3165
- }
3166
- .rotate-180 {
3167
- rotate: 180deg;
3168
- }
3169
- .transform {
3170
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
3171
- }
3172
- .skeleton {
3173
- border-radius: var(--radius-box);
3174
- background-color: var(--color-base-300);
3175
- @media (prefers-reduced-motion: reduce) {
3176
- transition-duration: 15s;
3177
- }
3178
- will-change: background-position;
3179
- animation: skeleton 1.8s ease-in-out infinite;
3180
- background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% );
3181
- background-size: 200% auto;
3182
- background-repeat: no-repeat;
3183
- background-position-x: -50%;
3184
- }
3185
- .link {
3186
- cursor: pointer;
3187
- text-decoration-line: underline;
3188
- &:focus {
3189
- outline-style: none;
3190
- @media (forced-colors: active) {
3191
- outline: 2px solid transparent;
3192
- outline-offset: 2px;
3193
- }
3194
- }
3195
- &:focus-visible {
3196
- outline: 2px solid currentColor;
3197
- outline-offset: 2px;
3198
- }
3199
- }
3200
- .cursor-default {
3201
- cursor: default;
3202
- }
3203
- .cursor-pointer {
3204
- cursor: pointer;
3205
- }
3206
- .resize {
3207
- resize: both;
3208
- }
3209
- .carousel-horizontal {
3210
- flex-direction: row;
3211
- overflow-x: scroll;
3212
- scroll-snap-type: x mandatory;
3213
- }
3214
- .carousel-vertical {
3215
- flex-direction: column;
3216
- overflow-y: scroll;
3217
- scroll-snap-type: y mandatory;
3218
- }
3219
- .flex-col {
3220
- flex-direction: column;
3221
- }
3222
- .flex-row {
3223
- flex-direction: row;
3224
- }
3225
- .flex-nowrap {
3226
- flex-wrap: nowrap;
3227
- }
3228
- .flex-wrap {
3229
- flex-wrap: wrap;
3230
- }
3231
- .place-content-center {
3232
- place-content: center;
3233
- }
3234
- .place-items-center {
3235
- place-items: center;
3236
- }
3237
- .place-items-start {
3238
- place-items: start;
3239
- }
3240
- .items-center {
3241
- align-items: center;
3242
- }
3243
- .justify-between {
3244
- justify-content: space-between;
3245
- }
3246
- .justify-center {
3247
- justify-content: center;
3248
- }
3249
- .gap-2 {
3250
- gap: calc(var(--spacing) * 2);
3251
- }
3252
- .gap-2\.5 {
3253
- gap: calc(var(--spacing) * 2.5);
3254
- }
3255
- .gap-4 {
3256
- gap: calc(var(--spacing) * 4);
3257
- }
3258
- .truncate {
3259
- overflow: hidden;
3260
- text-overflow: ellipsis;
3261
- white-space: nowrap;
3262
- }
3263
- .overflow-hidden {
3264
- overflow: hidden;
3265
- }
3266
- .overflow-x-auto {
3267
- overflow-x: auto;
3268
- }
3269
- .overflow-x-hidden {
3270
- overflow-x: hidden;
3271
- }
3272
- .overflow-x-scroll {
3273
- overflow-x: scroll;
3274
- }
3275
- .overflow-y-auto {
3276
- overflow-y: auto;
3277
- }
3278
- .scroll-smooth {
3279
- scroll-behavior: smooth;
3280
- }
3281
- .rounded {
3282
- border-radius: 0.25rem;
3283
- }
3284
- .rounded-box {
3285
- border-radius: var(--radius-box);
3286
- }
3287
- .rounded-box {
3288
- border-radius: var(--radius-box);
3289
- }
3290
- .rounded-full {
3291
- border-radius: calc(infinity * 1px);
3292
- }
3293
- .rounded-md {
3294
- border-radius: var(--radius-md);
3295
- }
3296
- .rounded-sm {
3297
- border-radius: var(--radius-sm);
3298
- }
3299
- .border {
3300
- border-style: var(--tw-border-style);
3301
- border-width: 1px;
3302
- }
3303
- .border-2 {
3304
- border-style: var(--tw-border-style);
3305
- border-width: 2px;
3306
- }
3307
- .border-4 {
3308
- border-style: var(--tw-border-style);
3309
- border-width: 4px;
3310
- }
3311
- .border-x-0 {
3312
- border-inline-style: var(--tw-border-style);
3313
- border-inline-width: 0px;
3314
- }
3315
- .border-t-2 {
3316
- border-top-style: var(--tw-border-style);
3317
- border-top-width: 2px;
3318
- }
3319
- .border-b-0 {
3320
- border-bottom-style: var(--tw-border-style);
3321
- border-bottom-width: 0px;
3322
- }
3323
- .border-b-2 {
3324
- border-bottom-style: var(--tw-border-style);
3325
- border-bottom-width: 2px;
3326
- }
3327
- .border-b-4 {
3328
- border-bottom-style: var(--tw-border-style);
3329
- border-bottom-width: 4px;
3330
- }
3331
- .border-none {
3332
- --tw-border-style: none;
3333
- border-style: none;
3334
- }
3335
- .badge-ghost {
3336
- border-color: var(--color-base-200);
3337
- background-color: var(--color-base-200);
3338
- color: var(--color-base-content);
3339
- background-image: none;
3340
- box-shadow: none;
3341
- }
3342
- .input-ghost {
3343
- background-color: transparent;
3344
- box-shadow: none;
3345
- border-color: #0000;
3346
- &:focus, &:focus-within {
3347
- background-color: var(--color-base-100);
3348
- color: var(--color-base-content);
3349
- border-color: #0000;
3350
- box-shadow: none;
3351
- }
3352
- }
3353
- .border-base-100 {
3354
- border-color: var(--color-base-100);
3355
- }
3356
- .border-base-300 {
3357
- border-color: var(--color-base-300);
3358
- }
3359
- .border-base-300\/25 {
3360
- border-color: var(--color-base-300);
3361
- @supports (color: color-mix(in lab, red, red)) {
3362
- border-color: color-mix(in oklab, var(--color-base-300) 25%, transparent);
3363
- }
3364
- }
3365
- .border-base-content\/20 {
3366
- border-color: var(--color-base-content);
3367
- @supports (color: color-mix(in lab, red, red)) {
3368
- border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
3369
- }
3370
- }
3371
- .border-primary {
3372
- border-color: var(--color-primary);
3373
- }
3374
- .bg-accent {
3375
- background-color: var(--color-accent);
3376
- }
3377
- .bg-base-100 {
3378
- background-color: var(--color-base-100);
3379
- }
3380
- .bg-base-200 {
3381
- background-color: var(--color-base-200);
3382
- }
3383
- .bg-blue-100 {
3384
- background-color: var(--color-blue-100);
3385
- }
3386
- .bg-error {
3387
- background-color: var(--color-error);
3388
- }
3389
- .bg-info {
3390
- background-color: var(--color-info);
3391
- }
3392
- .bg-neutral {
3393
- background-color: var(--color-neutral);
3394
- }
3395
- .bg-primary {
3396
- background-color: var(--color-primary);
3397
- }
3398
- .bg-secondary {
3399
- background-color: var(--color-secondary);
3400
- }
3401
- .bg-success {
3402
- background-color: var(--color-success);
3403
- }
3404
- .bg-transparent {
3405
- background-color: transparent;
3406
- }
3407
- .bg-warning {
3408
- background-color: var(--color-warning);
3409
- }
3410
- .bg-yellow-400 {
3411
- background-color: var(--color-yellow-400);
3412
- }
3413
- .loading-bars {
3414
- 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%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
3415
- }
3416
- .loading-dots {
3417
- 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%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");
3418
- }
3419
- .loading-infinity {
3420
- 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='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.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.589'/%3E%3C/path%3E%3C/svg%3E");
3421
- }
3422
- .loading-ring {
3423
- 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='white'%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");
3424
- }
3425
- .loading-spinner {
3426
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3427
- }
3428
- .mask-decagon {
3429
- 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");
3430
- }
3431
- .mask-diamond {
3432
- 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");
3433
- }
3434
- .mask-heart {
3435
- 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");
3436
- }
3437
- .mask-hexagon {
3438
- 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");
3439
- }
3440
- .mask-hexagon-2 {
3441
- 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");
3442
- }
3443
- .mask-pentagon {
3444
- 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");
3445
- }
3446
- .mask-star {
3447
- 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");
3448
- }
3449
- .mask-star-2 {
3450
- 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");
3451
- }
3452
- .mask-triangle {
3453
- 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");
3454
- }
3455
- .mask-triangle-2 {
3456
- 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");
3457
- }
3458
- .mask-triangle-3 {
3459
- 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");
3460
- }
3461
- .mask-triangle-4 {
3462
- 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");
3463
- }
3464
- .mask-half-1 {
3465
- mask-size: 200%;
3466
- mask-position: left;
3467
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
3468
- mask-position: right;
3469
- }
3470
- }
3471
- .mask-half-2 {
3472
- mask-size: 200%;
3473
- mask-position: right;
3474
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
3475
- mask-position: left;
3476
- }
3477
- }
3478
- .fill-current {
3479
- fill: currentcolor;
3480
- }
3481
- .object-cover {
3482
- object-fit: cover;
3483
- }
3484
- .p-0 {
3485
- padding: calc(var(--spacing) * 0);
3486
- }
3487
- .p-1 {
3488
- padding: calc(var(--spacing) * 1);
3489
- }
3490
- .p-2 {
3491
- padding: calc(var(--spacing) * 2);
3492
- }
3493
- .p-4 {
3494
- padding: calc(var(--spacing) * 4);
3495
- }
3496
- .p-6 {
3497
- padding: calc(var(--spacing) * 6);
3498
- }
3499
- .p-\[25\%\] {
3500
- padding: 25%;
3501
- }
3502
- .badge-lg {
3503
- --size: calc(var(--size-selector, 0.25rem) * 7);
3504
- font-size: 1rem;
3505
- padding-inline: calc(0.25rem * 3.5 - var(--border));
3506
- }
3507
- .badge-md {
3508
- --size: calc(var(--size-selector, 0.25rem) * 6);
3509
- font-size: 0.875rem;
3510
- padding-inline: calc(0.25rem * 3 - var(--border));
3511
- }
3512
- .badge-sm {
3513
- --size: calc(var(--size-selector, 0.25rem) * 5);
3514
- font-size: 0.75rem;
3515
- padding-inline: calc(0.25rem * 2.5 - var(--border));
3516
- }
3517
- .badge-xs {
3518
- --size: calc(var(--size-selector, 0.25rem) * 4);
3519
- font-size: 0.625rem;
3520
- padding-inline: calc(0.25rem * 2 - var(--border));
3521
- }
3522
- .px-0\! {
3523
- padding-inline: calc(var(--spacing) * 0) !important;
3524
- }
3525
- .px-1\! {
3526
- padding-inline: calc(var(--spacing) * 1) !important;
3527
- }
3528
- .px-3 {
3529
- padding-inline: calc(var(--spacing) * 3);
3530
- }
3531
- .px-4 {
3532
- padding-inline: calc(var(--spacing) * 4);
3533
- }
3534
- .px-5 {
3535
- padding-inline: calc(var(--spacing) * 5);
3536
- }
3537
- .py-0\! {
3538
- padding-block: calc(var(--spacing) * 0) !important;
3539
- }
3540
- .py-1 {
3541
- padding-block: calc(var(--spacing) * 1);
3542
- }
3543
- .py-2 {
3544
- padding-block: calc(var(--spacing) * 2);
3545
- }
3546
- .py-5 {
3547
- padding-block: calc(var(--spacing) * 5);
3548
- }
3549
- .py-6 {
3550
- padding-block: calc(var(--spacing) * 6);
3551
- }
3552
- .py-9 {
3553
- padding-block: calc(var(--spacing) * 9);
3554
- }
3555
- .py-10 {
3556
- padding-block: calc(var(--spacing) * 10);
3557
- }
3558
- .pr-4 {
3559
- padding-right: calc(var(--spacing) * 4);
3560
- }
3561
- .text-center {
3562
- text-align: center;
3563
- }
3564
- .text-left {
3565
- text-align: left;
3566
- }
3567
- .text-start {
3568
- text-align: start;
3569
- }
3570
- .text-2xl {
3571
- font-size: var(--text-2xl);
3572
- line-height: var(--tw-leading, var(--text-2xl--line-height));
3573
- }
3574
- .text-4xl {
3575
- font-size: var(--text-4xl);
3576
- line-height: var(--tw-leading, var(--text-4xl--line-height));
3577
- }
3578
- .text-lg {
3579
- font-size: var(--text-lg);
3580
- line-height: var(--tw-leading, var(--text-lg--line-height));
3581
- }
3582
- .text-sm {
3583
- font-size: var(--text-sm);
3584
- line-height: var(--tw-leading, var(--text-sm--line-height));
3585
- }
3586
- .text-xl {
3587
- font-size: var(--text-xl);
3588
- line-height: var(--tw-leading, var(--text-xl--line-height));
3589
- }
3590
- .text-xs {
3591
- font-size: var(--text-xs);
3592
- line-height: var(--tw-leading, var(--text-xs--line-height));
3593
- }
3594
- .btn-lg {
3595
- font-size: 1.125rem;
3596
- --btn-p: 1.25rem;
3597
- --size: calc(var(--size-field, 0.25rem) * 12);
3598
- }
3599
- .btn-sm {
3600
- font-size: 0.75rem;
3601
- --btn-p: 0.75rem;
3602
- --size: calc(var(--size-field, 0.25rem) * 8);
3603
- }
3604
- .btn-xs {
3605
- font-size: 0.6875rem;
3606
- --btn-p: 0.5rem;
3607
- --size: calc(var(--size-field, 0.25rem) * 6);
3608
- }
3609
- .font-bold {
3610
- --tw-font-weight: var(--font-weight-bold);
3611
- font-weight: var(--font-weight-bold);
3612
- }
3613
- .font-medium {
3614
- --tw-font-weight: var(--font-weight-medium);
3615
- font-weight: var(--font-weight-medium);
3616
- }
3617
- .font-semibold {
3618
- --tw-font-weight: var(--font-weight-semibold);
3619
- font-weight: var(--font-weight-semibold);
3620
- }
3621
- .badge-accent {
3622
- --badge-color: var(--color-accent);
3623
- color: var(--color-accent-content);
3624
- }
3625
- .badge-error {
3626
- --badge-color: var(--color-error);
3627
- color: var(--color-error-content);
3628
- }
3629
- .badge-info {
3630
- --badge-color: var(--color-info);
3631
- color: var(--color-info-content);
3632
- }
3633
- .badge-neutral {
3634
- --badge-color: var(--color-neutral);
3635
- color: var(--color-neutral-content);
3636
- }
3637
- .badge-primary {
3638
- --badge-color: var(--color-primary);
3639
- color: var(--color-primary-content);
3640
- }
3641
- .badge-secondary {
3642
- --badge-color: var(--color-secondary);
3643
- color: var(--color-secondary-content);
3644
- }
3645
- .badge-success {
3646
- --badge-color: var(--color-success);
3647
- color: var(--color-success-content);
3648
- }
3649
- .badge-warning {
3650
- --badge-color: var(--color-warning);
3651
- color: var(--color-warning-content);
3652
- }
3653
- .text-accent {
3654
- color: var(--color-accent);
3655
- }
3656
- .text-accent-content {
3657
- color: var(--color-accent-content);
3658
- }
3659
- .text-base-100 {
3660
- color: var(--color-base-100);
3661
- }
3662
- .text-base-content {
3663
- color: var(--color-base-content);
3664
- }
3665
- .text-base-content\/50 {
3666
- color: var(--color-base-content);
3667
- @supports (color: color-mix(in lab, red, red)) {
3668
- color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
3669
- }
3670
- }
3671
- .text-blue-500 {
3672
- color: var(--color-blue-500);
3673
- }
3674
- .text-blue-800 {
3675
- color: var(--color-blue-800);
3676
- }
3677
- .text-error {
3678
- color: var(--color-error);
3679
- }
3680
- .text-error-content {
3681
- color: var(--color-error-content);
3682
- }
3683
- .text-green-500 {
3684
- color: var(--color-green-500);
3685
- }
3686
- .text-info {
3687
- color: var(--color-info);
3688
- }
3689
- .text-info-content {
3690
- color: var(--color-info-content);
3691
- }
3692
- .text-neutral {
3693
- color: var(--color-neutral);
3694
- }
3695
- .text-neutral-content {
3696
- color: var(--color-neutral-content);
3697
- }
3698
- .text-primary {
3699
- color: var(--color-primary);
3700
- }
3701
- .text-primary-content {
3702
- color: var(--color-primary-content);
3703
- }
3704
- .text-red-500 {
3705
- color: var(--color-red-500);
3706
- }
3707
- .text-secondary {
3708
- color: var(--color-secondary);
3709
- }
3710
- .text-secondary-content {
3711
- color: var(--color-secondary-content);
3712
- }
3713
- .text-success {
3714
- color: var(--color-success);
3715
- }
3716
- .text-success-content {
3717
- color: var(--color-success-content);
3718
- }
3719
- .text-warning {
3720
- color: var(--color-warning);
3721
- }
3722
- .text-warning-content {
3723
- color: var(--color-warning-content);
3724
- }
3725
- .btn-link {
3726
- text-decoration-line: underline;
3727
- outline-color: currentColor;
3728
- --btn-border: #0000;
3729
- --btn-bg: #0000;
3730
- --btn-fg: var(--color-primary);
3731
- --btn-noise: none;
3732
- --btn-shadow: "";
3733
- &:is(.btn-active, :hover, :active:focus, :focus-visible) {
3734
- text-decoration-line: underline;
3735
- --btn-border: #0000;
3736
- --btn-bg: #0000;
3737
- }
3738
- }
3739
- .link-hover {
3740
- text-decoration-line: none;
3741
- &:hover {
3742
- @media (hover: hover) {
3743
- text-decoration-line: underline;
3744
- }
3745
- }
3746
- }
3747
- .opacity-35 {
3748
- opacity: 35%;
3749
- }
3750
- .opacity-75 {
3751
- opacity: 75%;
3752
- }
3753
- .shadow {
3754
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3755
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3756
- }
3757
- .shadow-lg {
3758
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3759
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3760
- }
3761
- .shadow-md {
3762
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3763
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3764
- }
3765
- .shadow-sm {
3766
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3767
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3768
- }
3769
- .shadow-xl {
3770
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3771
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3772
- }
3773
- .ring {
3774
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3775
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3776
- }
3777
- .ring-blue-500 {
3778
- --tw-ring-color: var(--color-blue-500);
3779
- }
3780
- .outline {
3781
- outline-style: var(--tw-outline-style);
3782
- outline-width: 1px;
3783
- }
3784
- .btn-ghost {
3785
- &:not(.btn-active, :hover, :active:focus, :focus-visible) {
3786
- --btn-shadow: "";
3787
- --btn-bg: #0000;
3788
- --btn-border: #0000;
3789
- --btn-noise: none;
3790
- &:not(:disabled, [disabled], .btn-disabled) {
3791
- outline-color: currentColor;
3792
- --btn-fg: currentColor;
3793
- }
3794
- }
3795
- }
3796
- .blur {
3797
- --tw-blur: blur(8px);
3798
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
3799
- }
3800
- .filter {
3801
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
3802
- }
3803
- .transition {
3804
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3805
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3806
- transition-duration: var(--tw-duration, var(--default-transition-duration));
3807
- }
3808
- .transition-all {
3809
- transition-property: all;
3810
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3811
- transition-duration: var(--tw-duration, var(--default-transition-duration));
3812
- }
3813
- .btn-outline {
3814
- &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
3815
- --btn-shadow: "";
3816
- --btn-bg: #0000;
3817
- --btn-fg: var(--btn-color);
3818
- --btn-border: var(--btn-color);
3819
- --btn-noise: none;
3820
- }
3821
- }
3822
- .btn-accent {
3823
- --btn-color: var(--color-accent);
3824
- --btn-fg: var(--color-accent-content);
3825
- }
3826
- .btn-error {
3827
- --btn-color: var(--color-error);
3828
- --btn-fg: var(--color-error-content);
3829
- }
3830
- .btn-info {
3831
- --btn-color: var(--color-info);
3832
- --btn-fg: var(--color-info-content);
3833
- }
3834
- .btn-neutral {
3835
- --btn-color: var(--color-neutral);
3836
- --btn-fg: var(--color-neutral-content);
3837
- }
3838
- .btn-primary {
3839
- --btn-color: var(--color-primary);
3840
- --btn-fg: var(--color-primary-content);
3841
- }
3842
- .btn-secondary {
3843
- --btn-color: var(--color-secondary);
3844
- --btn-fg: var(--color-secondary-content);
3845
- }
3846
- .btn-success {
3847
- --btn-color: var(--color-success);
3848
- --btn-fg: var(--color-success-content);
3849
- }
3850
- .btn-warning {
3851
- --btn-color: var(--color-warning);
3852
- --btn-fg: var(--color-warning-content);
3853
- }
3854
- .input-accent {
3855
- &, &:focus, &:focus-within {
3856
- --input-color: var(--color-accent);
3857
- }
3858
- }
3859
- .input-error {
3860
- &, &:focus, &:focus-within {
3861
- --input-color: var(--color-error);
3862
- }
3863
- }
3864
- .input-info {
3865
- &, &:focus, &:focus-within {
3866
- --input-color: var(--color-info);
3867
- }
3868
- }
3869
- .input-neutral {
3870
- &, &:focus, &:focus-within {
3871
- --input-color: var(--color-neutral);
3872
- }
3873
- }
3874
- .input-primary {
3875
- &, &:focus, &:focus-within {
3876
- --input-color: var(--color-primary);
3877
- }
3878
- }
3879
- .input-secondary {
3880
- &, &:focus, &:focus-within {
3881
- --input-color: var(--color-secondary);
3882
- }
3883
- }
3884
- .input-success {
3885
- &, &:focus, &:focus-within {
3886
- --input-color: var(--color-success);
3887
- }
3888
- }
3889
- .input-warning {
3890
- &, &:focus, &:focus-within {
3891
- --input-color: var(--color-warning);
3892
- }
3893
- }
3894
- .group-hover\:text-primary {
3895
- &:is(:where(.group):hover *) {
3896
- @media (hover: hover) {
3897
- color: var(--color-primary);
3898
- }
3899
- }
3900
- }
3901
- .after\:absolute {
3902
- &::after {
3903
- content: var(--tw-content);
3904
- position: absolute;
3905
- }
3906
- }
3907
- .after\:top-0 {
3908
- &::after {
3909
- content: var(--tw-content);
3910
- top: calc(var(--spacing) * 0);
3911
- }
3912
- }
3913
- .after\:-right-2 {
3914
- &::after {
3915
- content: var(--tw-content);
3916
- right: calc(var(--spacing) * -2);
3917
- }
3918
- }
3919
- .after\:h-10 {
3920
- &::after {
3921
- content: var(--tw-content);
3922
- height: calc(var(--spacing) * 10);
3923
- }
3924
- }
3925
- .after\:w-px {
3926
- &::after {
3927
- content: var(--tw-content);
3928
- width: 1px;
3929
- }
3930
- }
3931
- .after\:bg-base-200 {
3932
- &::after {
3933
- content: var(--tw-content);
3934
- background-color: var(--color-base-200);
3935
- }
3936
- }
3937
- .after\:content-none {
3938
- &::after {
3939
- content: var(--tw-content);
3940
- --tw-content: none;
3941
- content: none;
3942
- }
3943
- }
3944
- .last\:border-b-0 {
3945
- &:last-child {
3946
- border-bottom-style: var(--tw-border-style);
3947
- border-bottom-width: 0px;
3948
- }
3949
- }
3950
- .first-of-type\:flex-auto {
3951
- &:first-of-type {
3952
- flex: auto;
3953
- }
3954
- }
3955
- .last-of-type\:flex-auto {
3956
- &:last-of-type {
3957
- flex: auto;
3958
- }
3959
- }
3960
- .last-of-type\:after\:content-none {
3961
- &:last-of-type {
3962
- &::after {
3963
- content: var(--tw-content);
3964
- --tw-content: none;
3965
- content: none;
3966
- }
3967
- }
3968
- }
3969
- .open\:-m-0\.5 {
3970
- &:is([open], :popover-open, :open) {
3971
- margin: calc(var(--spacing) * -0.5);
3972
- }
3973
- }
3974
- .open\:rounded {
3975
- &:is([open], :popover-open, :open) {
3976
- border-radius: 0.25rem;
3977
- }
3978
- }
3979
- .open\:bg-primary {
3980
- &:is([open], :popover-open, :open) {
3981
- background-color: var(--color-primary);
3982
- }
3983
- }
3984
- .open\:p-1 {
3985
- &:is([open], :popover-open, :open) {
3986
- padding: calc(var(--spacing) * 1);
3987
- }
3988
- }
3989
- .hover\:-mb-0\.5 {
3990
- &:hover {
3991
- @media (hover: hover) {
3992
- margin-bottom: calc(var(--spacing) * -0.5);
3993
- }
3994
- }
3995
- }
3996
- .hover\:border-b-2 {
3997
- &:hover {
3998
- @media (hover: hover) {
3999
- border-bottom-style: var(--tw-border-style);
4000
- border-bottom-width: 2px;
4001
- }
4002
- }
4003
- }
4004
- .hover\:bg-base-200 {
4005
- &:hover {
4006
- @media (hover: hover) {
4007
- background-color: var(--color-base-200);
4008
- }
4009
- }
4010
- }
4011
- .hover\:text-base-content\/80 {
4012
- &:hover {
4013
- @media (hover: hover) {
4014
- color: var(--color-base-content);
4015
- @supports (color: color-mix(in lab, red, red)) {
4016
- color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
4017
- }
4018
- }
4019
- }
4020
- }
4021
- .focus\:outline-none {
4022
- &:focus {
4023
- --tw-outline-style: none;
4024
- outline-style: none;
4025
- }
4026
- }
4027
- .max-md\:input {
4028
- @media (width < 48rem) {
4029
- cursor: text;
4030
- border: var(--border) solid #0000;
4031
- position: relative;
4032
- display: inline-flex;
4033
- flex-shrink: 1;
4034
- appearance: none;
4035
- align-items: center;
4036
- gap: calc(0.25rem * 2);
4037
- background-color: var(--color-base-100);
4038
- padding-inline: calc(0.25rem * 3);
4039
- vertical-align: middle;
4040
- white-space: nowrap;
4041
- width: clamp(3rem, 20rem, 100%);
4042
- height: var(--size);
4043
- font-size: 0.875rem;
4044
- border-start-start-radius: var(--join-ss, var(--radius-field));
4045
- border-start-end-radius: var(--join-se, var(--radius-field));
4046
- border-end-start-radius: var(--join-es, var(--radius-field));
4047
- border-end-end-radius: var(--join-ee, var(--radius-field));
4048
- border-color: var(--input-color);
4049
- box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
4050
- @supports (color: color-mix(in lab, red, red)) {
4051
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
4052
- }
4053
- --size: calc(var(--size-field, 0.25rem) * 10);
4054
- --input-color: var(--color-base-content);
4055
- @supports (color: color-mix(in lab, red, red)) {
4056
- --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
4057
- }
4058
- &:where(input) {
4059
- display: inline-flex;
4060
- }
4061
- :where(input) {
4062
- display: inline-flex;
4063
- height: 100%;
4064
- width: 100%;
4065
- appearance: none;
4066
- background-color: transparent;
4067
- border: none;
4068
- &:focus, &:focus-within {
4069
- outline-style: none;
4070
- @media (forced-colors: active) {
4071
- outline: 2px solid transparent;
4072
- outline-offset: 2px;
4073
- }
4074
- }
4075
- }
4076
- &:focus, &:focus-within {
4077
- --input-color: var(--color-base-content);
4078
- box-shadow: 0 1px var(--input-color);
4079
- @supports (color: color-mix(in lab, red, red)) {
4080
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
4081
- }
4082
- outline: 2px solid var(--input-color);
4083
- outline-offset: 2px;
4084
- isolation: isolate;
4085
- }
4086
- &:has(> input[disabled]), &:is(:disabled, [disabled]) {
4087
- cursor: not-allowed;
4088
- border-color: var(--color-base-200);
4089
- background-color: var(--color-base-200);
4090
- color: var(--color-base-content);
4091
- @supports (color: color-mix(in lab, red, red)) {
4092
- color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
4093
- }
4094
- &::placeholder {
4095
- color: var(--color-base-content);
4096
- @supports (color: color-mix(in lab, red, red)) {
4097
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
4098
- }
4099
- }
4100
- box-shadow: none;
4101
- }
4102
- &:has(> input[disabled]) > input[disabled] {
4103
- cursor: not-allowed;
4104
- }
4105
- &::-webkit-date-and-time-value {
4106
- text-align: inherit;
4107
- }
4108
- &[type="number"] {
4109
- &::-webkit-inner-spin-button {
4110
- margin-block: calc(0.25rem * -3);
4111
- margin-inline-end: calc(0.25rem * -3);
4112
- }
4113
- }
4114
- &::-webkit-calendar-picker-indicator {
4115
- position: absolute;
4116
- inset-inline-end: 0.75em;
4117
- }
4118
- }
4119
- }
4120
- .max-md\:max-w-xs {
4121
- @media (width < 48rem) {
4122
- max-width: var(--container-xs);
4123
- }
4124
- }
4125
- .sm\:grid {
4126
- @media (width >= 40rem) {
4127
- display: grid;
4128
- }
4129
- }
4130
- .sm\:hidden {
4131
- @media (width >= 40rem) {
4132
- display: none;
4133
- }
4134
- }
4135
- .sm\:footer-horizontal {
4136
- @media (width >= 40rem) {
4137
- grid-auto-flow: column;
4138
- &.footer-center {
4139
- grid-auto-flow: row dense;
4140
- }
4141
- }
4142
- }
4143
- .md\:block {
4144
- @media (width >= 48rem) {
4145
- display: block;
4146
- }
4147
- }
4148
- .md\:flex {
4149
- @media (width >= 48rem) {
4150
- display: flex;
4151
- }
4152
- }
4153
- .md\:min-w-full {
4154
- @media (width >= 48rem) {
4155
- min-width: 100%;
4156
- }
4157
- }
4158
- .md\:cursor-auto {
4159
- @media (width >= 48rem) {
4160
- cursor: auto;
4161
- }
4162
- }
4163
- .md\:snap-none {
4164
- @media (width >= 48rem) {
4165
- scroll-snap-type: none;
4166
- }
4167
- }
4168
- .md\:px-10 {
4169
- @media (width >= 48rem) {
4170
- padding-inline: calc(var(--spacing) * 10);
4171
- }
4172
- }
4173
- .md\:btn-sm {
4174
- @media (width >= 48rem) {
4175
- font-size: 0.75rem;
4176
- --btn-p: 0.75rem;
4177
- --size: calc(var(--size-field, 0.25rem) * 8);
4178
- }
4179
- }
4180
- .md\:after\:content-\[\'\'\] {
4181
- @media (width >= 48rem) {
4182
- &::after {
4183
- --tw-content: '';
4184
- content: var(--tw-content);
4185
- }
4186
- }
4187
- }
4188
- .lg\:steps-horizontal {
4189
- @media (width >= 64rem) {
4190
- grid-auto-columns: 1fr;
4191
- display: inline-grid;
4192
- grid-auto-flow: column;
4193
- overflow: hidden;
4194
- overflow-x: auto;
4195
- .step {
4196
- display: grid;
4197
- grid-template-columns: repeat(1, minmax(0, 1fr));
4198
- grid-template-columns: auto;
4199
- grid-template-rows: repeat(2, minmax(0, 1fr));
4200
- grid-template-rows: 40px 1fr;
4201
- place-items: center;
4202
- text-align: center;
4203
- min-width: 4rem;
4204
- &:before {
4205
- height: calc(0.25rem * 2);
4206
- width: 100%;
4207
- translate: 0;
4208
- content: "";
4209
- margin-inline-start: -100%;
4210
- }
4211
- [dir="rtl"] &:before {
4212
- translate: 0;
4213
- }
4214
- }
4215
- }
4216
- }
4217
- .lg\:w-full {
4218
- @media (width >= 64rem) {
4219
- width: 100%;
4220
- }
4221
- }
4222
- .lg\:text-4xl {
4223
- @media (width >= 64rem) {
4224
- font-size: var(--text-4xl);
4225
- line-height: var(--tw-leading, var(--text-4xl--line-height));
4226
- }
4227
- }
4228
- .xl\:min-w-52 {
4229
- @media (width >= 80rem) {
4230
- min-width: calc(var(--spacing) * 52);
4231
- }
4232
- }
4233
- }
4234
- @layer base {
4235
- *, ::after, ::before, ::backdrop, ::file-selector-button {
4236
- border-color: var(--color-gray-200, currentColor);
4237
- }
4238
- }
4239
- @layer base {
4240
- :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
4241
- color-scheme: light;
4242
- --color-base-100: oklch(100% 0 0);
4243
- --color-base-200: oklch(98% 0 0);
4244
- --color-base-300: oklch(95% 0 0);
4245
- --color-base-content: oklch(21% 0.006 285.885);
4246
- --color-primary: oklch(45% 0.24 277.023);
4247
- --color-primary-content: oklch(93% 0.034 272.788);
4248
- --color-secondary: oklch(65% 0.241 354.308);
4249
- --color-secondary-content: oklch(94% 0.028 342.258);
4250
- --color-accent: oklch(77% 0.152 181.912);
4251
- --color-accent-content: oklch(38% 0.063 188.416);
4252
- --color-neutral: oklch(14% 0.005 285.823);
4253
- --color-neutral-content: oklch(92% 0.004 286.32);
4254
- --color-info: oklch(74% 0.16 232.661);
4255
- --color-info-content: oklch(29% 0.066 243.157);
4256
- --color-success: oklch(76% 0.177 163.223);
4257
- --color-success-content: oklch(37% 0.077 168.94);
4258
- --color-warning: oklch(82% 0.189 84.429);
4259
- --color-warning-content: oklch(41% 0.112 45.904);
4260
- --color-error: oklch(71% 0.194 13.428);
4261
- --color-error-content: oklch(27% 0.105 12.094);
4262
- --radius-selector: 0.5rem;
4263
- --radius-field: 0.25rem;
4264
- --radius-box: 0.5rem;
4265
- --size-selector: 0.25rem;
4266
- --size-field: 0.25rem;
4267
- --border: 1px;
4268
- --depth: 1;
4269
- --noise: 0;
4270
- }
4271
- }
4272
- @layer base {
4273
- @media (prefers-color-scheme: dark) {
4274
- :root {
4275
- color-scheme: dark;
4276
- --color-base-100: oklch(25.33% 0.016 252.42);
4277
- --color-base-200: oklch(23.26% 0.014 253.1);
4278
- --color-base-300: oklch(21.15% 0.012 254.09);
4279
- --color-base-content: oklch(97.807% 0.029 256.847);
4280
- --color-primary: oklch(58% 0.233 277.117);
4281
- --color-primary-content: oklch(96% 0.018 272.314);
4282
- --color-secondary: oklch(65% 0.241 354.308);
4283
- --color-secondary-content: oklch(94% 0.028 342.258);
4284
- --color-accent: oklch(77% 0.152 181.912);
4285
- --color-accent-content: oklch(38% 0.063 188.416);
4286
- --color-neutral: oklch(14% 0.005 285.823);
4287
- --color-neutral-content: oklch(92% 0.004 286.32);
4288
- --color-info: oklch(74% 0.16 232.661);
4289
- --color-info-content: oklch(29% 0.066 243.157);
4290
- --color-success: oklch(76% 0.177 163.223);
4291
- --color-success-content: oklch(37% 0.077 168.94);
4292
- --color-warning: oklch(82% 0.189 84.429);
4293
- --color-warning-content: oklch(41% 0.112 45.904);
4294
- --color-error: oklch(71% 0.194 13.428);
4295
- --color-error-content: oklch(27% 0.105 12.094);
4296
- --radius-selector: 0.5rem;
4297
- --radius-field: 0.25rem;
4298
- --radius-box: 0.5rem;
4299
- --size-selector: 0.25rem;
4300
- --size-field: 0.25rem;
4301
- --border: 1px;
4302
- --depth: 1;
4303
- --noise: 0;
4304
- }
4305
- }
4306
- }
4307
- @layer base {
4308
- :root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
4309
- color-scheme: light;
4310
- --color-base-100: oklch(100% 0 0);
4311
- --color-base-200: oklch(98% 0 0);
4312
- --color-base-300: oklch(95% 0 0);
4313
- --color-base-content: oklch(21% 0.006 285.885);
4314
- --color-primary: oklch(45% 0.24 277.023);
4315
- --color-primary-content: oklch(93% 0.034 272.788);
4316
- --color-secondary: oklch(65% 0.241 354.308);
4317
- --color-secondary-content: oklch(94% 0.028 342.258);
4318
- --color-accent: oklch(77% 0.152 181.912);
4319
- --color-accent-content: oklch(38% 0.063 188.416);
4320
- --color-neutral: oklch(14% 0.005 285.823);
4321
- --color-neutral-content: oklch(92% 0.004 286.32);
4322
- --color-info: oklch(74% 0.16 232.661);
4323
- --color-info-content: oklch(29% 0.066 243.157);
4324
- --color-success: oklch(76% 0.177 163.223);
4325
- --color-success-content: oklch(37% 0.077 168.94);
4326
- --color-warning: oklch(82% 0.189 84.429);
4327
- --color-warning-content: oklch(41% 0.112 45.904);
4328
- --color-error: oklch(71% 0.194 13.428);
4329
- --color-error-content: oklch(27% 0.105 12.094);
4330
- --radius-selector: 0.5rem;
4331
- --radius-field: 0.25rem;
4332
- --radius-box: 0.5rem;
4333
- --size-selector: 0.25rem;
4334
- --size-field: 0.25rem;
4335
- --border: 1px;
4336
- --depth: 1;
4337
- --noise: 0;
4338
- }
4339
- }
4340
- @layer base {
4341
- :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {
4342
- color-scheme: dark;
4343
- --color-base-100: oklch(25.33% 0.016 252.42);
4344
- --color-base-200: oklch(23.26% 0.014 253.1);
4345
- --color-base-300: oklch(21.15% 0.012 254.09);
4346
- --color-base-content: oklch(97.807% 0.029 256.847);
4347
- --color-primary: oklch(58% 0.233 277.117);
4348
- --color-primary-content: oklch(96% 0.018 272.314);
4349
- --color-secondary: oklch(65% 0.241 354.308);
4350
- --color-secondary-content: oklch(94% 0.028 342.258);
4351
- --color-accent: oklch(77% 0.152 181.912);
4352
- --color-accent-content: oklch(38% 0.063 188.416);
4353
- --color-neutral: oklch(14% 0.005 285.823);
4354
- --color-neutral-content: oklch(92% 0.004 286.32);
4355
- --color-info: oklch(74% 0.16 232.661);
4356
- --color-info-content: oklch(29% 0.066 243.157);
4357
- --color-success: oklch(76% 0.177 163.223);
4358
- --color-success-content: oklch(37% 0.077 168.94);
4359
- --color-warning: oklch(82% 0.189 84.429);
4360
- --color-warning-content: oklch(41% 0.112 45.904);
4361
- --color-error: oklch(71% 0.194 13.428);
4362
- --color-error-content: oklch(27% 0.105 12.094);
4363
- --radius-selector: 0.5rem;
4364
- --radius-field: 0.25rem;
4365
- --radius-box: 0.5rem;
4366
- --size-selector: 0.25rem;
4367
- --size-field: 0.25rem;
4368
- --border: 1px;
4369
- --depth: 1;
4370
- --noise: 0;
4371
- }
4372
- }
4373
- @layer base {
4374
- :root {
4375
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
4376
- }
4377
- .chat {
4378
- --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
4379
- }
4380
- }
4381
- @layer base {
4382
- :root,
4383
- [data-theme] {
4384
- background-color: var(--root-bg, var(--color-base-100));
4385
- color: var(--color-base-content);
4386
- }
4387
- }
4388
- @layer base {
4389
- :where(
4390
- :root:has(
4391
- .modal-open,
4392
- .modal[open],
4393
- .modal:target,
4394
- .modal-toggle:checked,
4395
- .drawer:not(.drawer-open) > .drawer-toggle:checked
4396
- )
4397
- ) {
4398
- scrollbar-gutter: stable;
4399
- background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
4400
- --root-bg: var(--color-base-100);
4401
- @supports (color: color-mix(in lab, red, red)) {
4402
- --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
4403
- }
4404
- }
4405
- }
4406
- @layer base {
4407
- @property --radialprogress {
4408
- syntax: "<percentage>";
4409
- inherits: true;
4410
- initial-value: 0%;
4411
- }
4412
- }
4413
- @layer base {
4414
- :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
4415
- overflow: hidden;
4416
- }
4417
- }
4418
- @layer base {
4419
- :root {
4420
- scrollbar-color: currentColor #0000;
4421
- @supports (color: color-mix(in lab, red, red)) {
4422
- scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
4423
- }
4424
- }
4425
- }
4426
- @keyframes dropdown {
4427
- 0% {
4428
- opacity: 0;
4429
- }
4430
- }
4431
- @keyframes rating {
4432
- 0%, 40% {
4433
- scale: 1.1;
4434
- filter: brightness(1.05) contrast(1.05);
4435
- }
4436
- }
4437
- @keyframes radio {
4438
- 0% {
4439
- padding: 5px;
4440
- }
4441
- 50% {
4442
- padding: 3px;
4443
- }
4444
- }
4445
- @keyframes progress {
4446
- 50% {
4447
- background-position-x: -115%;
4448
- }
4449
- }
4450
- @keyframes skeleton {
4451
- 0% {
4452
- background-position: 150%;
4453
- }
4454
- 100% {
4455
- background-position: -50%;
4456
- }
4457
- }
4458
- @keyframes toast {
4459
- 0% {
4460
- scale: 0.9;
4461
- opacity: 0;
4462
- }
4463
- 100% {
4464
- scale: 1;
4465
- opacity: 1;
4466
- }
4467
- }
4468
- @layer base {
4469
- :where(:root),:root:has(input.theme-controller[value=reserveren]:checked),[data-theme="reserveren"] {
4470
- color-scheme: light;
4471
- --color-base-100: #f5f8ff;
4472
- --color-base-200: oklch(96% 0.018 272.314);
4473
- --color-base-300: oklch(95% 0.026 236.824);
4474
- --color-base-content: oklch(29% 0.066 243.157);
4475
- --color-primary: oklch(70% 0.165 254.624);
4476
- --color-primary-content: oklch(28% 0.091 267.935);
4477
- --color-secondary: #001a57;
4478
- --color-secondary-content: oklch(93% 0.032 255.585);
4479
- --color-accent: #2667ff;
4480
- --color-accent-content: oklch(97% 0.014 254.604);
4481
- --color-neutral: oklch(86% 0.022 252.894);
4482
- --color-neutral-content: oklch(39% 0.09 240.876);
4483
- --color-info: oklch(78% 0.154 211.53);
4484
- --color-info-content: oklch(30% 0.056 229.695);
4485
- --color-success: oklch(87% 0.15 154.449);
4486
- --color-success-content: oklch(27% 0.046 192.524);
4487
- --color-warning: oklch(92% 0.12 95.746);
4488
- --color-warning-content: oklch(27% 0.077 45.635);
4489
- --color-error: oklch(70% 0.191 22.216);
4490
- --color-error-content: oklch(28% 0.109 3.907);
4491
- --radius-selector: 0rem;
4492
- --radius-field: 0rem;
4493
- --radius-box: 0rem;
4494
- --size-selector: 0.21875rem;
4495
- --size-field: 0.1875rem;
4496
- --border: 1px;
4497
- --depth: 1;
4498
- --noise: 1;
4499
- }
4500
- }
4501
- @property --tw-translate-x {
4502
- syntax: "*";
4503
- inherits: false;
4504
- initial-value: 0;
4505
- }
4506
- @property --tw-translate-y {
4507
- syntax: "*";
4508
- inherits: false;
4509
- initial-value: 0;
4510
- }
4511
- @property --tw-translate-z {
4512
- syntax: "*";
4513
- inherits: false;
4514
- initial-value: 0;
4515
- }
4516
- @property --tw-rotate-x {
4517
- syntax: "*";
4518
- inherits: false;
4519
- }
4520
- @property --tw-rotate-y {
4521
- syntax: "*";
4522
- inherits: false;
4523
- }
4524
- @property --tw-rotate-z {
4525
- syntax: "*";
4526
- inherits: false;
4527
- }
4528
- @property --tw-skew-x {
4529
- syntax: "*";
4530
- inherits: false;
4531
- }
4532
- @property --tw-skew-y {
4533
- syntax: "*";
4534
- inherits: false;
4535
- }
4536
- @property --tw-border-style {
4537
- syntax: "*";
4538
- inherits: false;
4539
- initial-value: solid;
4540
- }
4541
- @property --tw-font-weight {
4542
- syntax: "*";
4543
- inherits: false;
4544
- }
4545
- @property --tw-shadow {
4546
- syntax: "*";
4547
- inherits: false;
4548
- initial-value: 0 0 #0000;
4549
- }
4550
- @property --tw-shadow-color {
4551
- syntax: "*";
4552
- inherits: false;
4553
- }
4554
- @property --tw-shadow-alpha {
4555
- syntax: "<percentage>";
4556
- inherits: false;
4557
- initial-value: 100%;
4558
- }
4559
- @property --tw-inset-shadow {
4560
- syntax: "*";
4561
- inherits: false;
4562
- initial-value: 0 0 #0000;
4563
- }
4564
- @property --tw-inset-shadow-color {
4565
- syntax: "*";
4566
- inherits: false;
4567
- }
4568
- @property --tw-inset-shadow-alpha {
4569
- syntax: "<percentage>";
4570
- inherits: false;
4571
- initial-value: 100%;
4572
- }
4573
- @property --tw-ring-color {
4574
- syntax: "*";
4575
- inherits: false;
4576
- }
4577
- @property --tw-ring-shadow {
4578
- syntax: "*";
4579
- inherits: false;
4580
- initial-value: 0 0 #0000;
4581
- }
4582
- @property --tw-inset-ring-color {
4583
- syntax: "*";
4584
- inherits: false;
4585
- }
4586
- @property --tw-inset-ring-shadow {
4587
- syntax: "*";
4588
- inherits: false;
4589
- initial-value: 0 0 #0000;
4590
- }
4591
- @property --tw-ring-inset {
4592
- syntax: "*";
4593
- inherits: false;
4594
- }
4595
- @property --tw-ring-offset-width {
4596
- syntax: "<length>";
4597
- inherits: false;
4598
- initial-value: 0px;
4599
- }
4600
- @property --tw-ring-offset-color {
4601
- syntax: "*";
4602
- inherits: false;
4603
- initial-value: #fff;
4604
- }
4605
- @property --tw-ring-offset-shadow {
4606
- syntax: "*";
4607
- inherits: false;
4608
- initial-value: 0 0 #0000;
4609
- }
4610
- @property --tw-outline-style {
4611
- syntax: "*";
4612
- inherits: false;
4613
- initial-value: solid;
4614
- }
4615
- @property --tw-blur {
4616
- syntax: "*";
4617
- inherits: false;
4618
- }
4619
- @property --tw-brightness {
4620
- syntax: "*";
4621
- inherits: false;
4622
- }
4623
- @property --tw-contrast {
4624
- syntax: "*";
4625
- inherits: false;
4626
- }
4627
- @property --tw-grayscale {
4628
- syntax: "*";
4629
- inherits: false;
4630
- }
4631
- @property --tw-hue-rotate {
4632
- syntax: "*";
4633
- inherits: false;
4634
- }
4635
- @property --tw-invert {
4636
- syntax: "*";
4637
- inherits: false;
4638
- }
4639
- @property --tw-opacity {
4640
- syntax: "*";
4641
- inherits: false;
4642
- }
4643
- @property --tw-saturate {
4644
- syntax: "*";
4645
- inherits: false;
4646
- }
4647
- @property --tw-sepia {
4648
- syntax: "*";
4649
- inherits: false;
4650
- }
4651
- @property --tw-drop-shadow {
4652
- syntax: "*";
4653
- inherits: false;
4654
- }
4655
- @property --tw-drop-shadow-color {
4656
- syntax: "*";
4657
- inherits: false;
4658
- }
4659
- @property --tw-drop-shadow-alpha {
4660
- syntax: "<percentage>";
4661
- inherits: false;
4662
- initial-value: 100%;
4663
- }
4664
- @property --tw-drop-shadow-size {
4665
- syntax: "*";
4666
- inherits: false;
4667
- }
4668
- @property --tw-content {
4669
- syntax: "*";
4670
- initial-value: "";
4671
- inherits: false;
4672
- }
4673
- @layer properties {
4674
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
4675
- *, ::before, ::after, ::backdrop {
4676
- --tw-translate-x: 0;
4677
- --tw-translate-y: 0;
4678
- --tw-translate-z: 0;
4679
- --tw-rotate-x: initial;
4680
- --tw-rotate-y: initial;
4681
- --tw-rotate-z: initial;
4682
- --tw-skew-x: initial;
4683
- --tw-skew-y: initial;
4684
- --tw-border-style: solid;
4685
- --tw-font-weight: initial;
4686
- --tw-shadow: 0 0 #0000;
4687
- --tw-shadow-color: initial;
4688
- --tw-shadow-alpha: 100%;
4689
- --tw-inset-shadow: 0 0 #0000;
4690
- --tw-inset-shadow-color: initial;
4691
- --tw-inset-shadow-alpha: 100%;
4692
- --tw-ring-color: initial;
4693
- --tw-ring-shadow: 0 0 #0000;
4694
- --tw-inset-ring-color: initial;
4695
- --tw-inset-ring-shadow: 0 0 #0000;
4696
- --tw-ring-inset: initial;
4697
- --tw-ring-offset-width: 0px;
4698
- --tw-ring-offset-color: #fff;
4699
- --tw-ring-offset-shadow: 0 0 #0000;
4700
- --tw-outline-style: solid;
4701
- --tw-blur: initial;
4702
- --tw-brightness: initial;
4703
- --tw-contrast: initial;
4704
- --tw-grayscale: initial;
4705
- --tw-hue-rotate: initial;
4706
- --tw-invert: initial;
4707
- --tw-opacity: initial;
4708
- --tw-saturate: initial;
4709
- --tw-sepia: initial;
4710
- --tw-drop-shadow: initial;
4711
- --tw-drop-shadow-color: initial;
4712
- --tw-drop-shadow-alpha: 100%;
4713
- --tw-drop-shadow-size: initial;
4714
- --tw-content: "";
4715
- }
4716
- }
4717
- }