rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
tsiry-sandratraina.com
1/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2@layer properties;
3.carousel-prev {
4 position: absolute;
5 inset-block: calc(0.25rem * 0);
6 margin-block: auto;
7 display: inline-flex;
8 height: max-content;
9 cursor: pointer;
10 align-items: center;
11 justify-content: center;
12 &.disabled {
13 pointer-events: none;
14 }
15 border-start-start-radius: var(--radius-2xl);
16 border-end-start-radius: var(--radius-2xl);
17}
18.carousel-next {
19 position: absolute;
20 inset-block: calc(0.25rem * 0);
21 margin-block: auto;
22 display: inline-flex;
23 height: max-content;
24 cursor: pointer;
25 align-items: center;
26 justify-content: center;
27 &.disabled {
28 pointer-events: none;
29 }
30 border-start-end-radius: var(--radius-2xl);
31 border-end-end-radius: var(--radius-2xl);
32}
33.menu {
34 display: flex;
35 flex-direction: column;
36 flex-wrap: wrap;
37 gap: calc(0.25rem * 0.5);
38 border-radius: var(--radius-box);
39 padding: calc(0.25rem * 2);
40 font-size: var(--text-base);
41 line-height: var(--tw-leading, var(--text-base--line-height));
42 --menu-active-fg: var(--color-primary);
43 --menu-active-bg: var(--color-primary);
44 @supports (color: color-mix(in lab, red, red)) {
45 --menu-active-bg: color-mix(in oklab, var(--color-primary) 10%, #0000);
46 }
47 --menu-hover-fg: var(--color-base-content);
48 --menu-hover-bg: var(--color-neutral);
49 @supports (color: color-mix(in lab, red, red)) {
50 --menu-hover-bg: color-mix(in oklab, var(--color-neutral) 10%, #0000);
51 }
52 :where(li ul) {
53 position: relative;
54 white-space: nowrap;
55 }
56 :where(li:not(.dropdown) ul) {
57 margin-inline-start: calc(0.25rem * 4);
58 padding-inline-start: calc(0.25rem * 2);
59 &:before {
60 position: absolute;
61 inset-inline-start: calc(0.25rem * 0);
62 top: calc(0.25rem * 3);
63 bottom: calc(0.25rem * 2.5);
64 background-color: var(--color-base-content);
65 opacity: 10%;
66 width: var(--border);
67 content: "";
68 }
69 }
70 :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
71 display: none;
72 }
73 :where(.menu li:empty) {
74 background-color: var(--color-base-content);
75 opacity: 10%;
76 margin: 0.5rem 1rem;
77 height: 1px;
78 }
79 :where(li:not(.menu-title, .tooltip) > *:not(ul, .collapse, .accordion-content, .menu-title, .btn)) {
80 border-radius: var(--radius-field);
81 padding-inline: calc(0.25rem * 4);
82 padding-block: calc(0.25rem * 2.5);
83 text-align: start;
84 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;
85 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
86 transition-timing-function: var(--ease-out);
87 transition-duration: var(--tw-duration, var(--default-transition-duration));
88 transition-duration: 200ms;
89 --tw-duration: 200ms;
90 --tw-ease: var(--ease-out);
91 text-wrap: balance;
92 }
93 :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title, .btn)) {
94 display: grid;
95 grid-auto-flow: column;
96 align-content: flex-start;
97 align-items: center;
98 gap: calc(0.25rem * 2);
99 grid-auto-columns: minmax(auto, max-content) auto max-content;
100 user-select: none;
101 }
102 :where(li.tooltip) > * {
103 border-radius: var(--radius-field);
104 padding-inline: calc(0.25rem * 4);
105 padding-block: calc(0.25rem * 2.5);
106 text-align: start;
107 }
108 :where(.menu li:not(.menu-title, .menu-disabled)) {
109 color: var(--color-base-content);
110 }
111 :where( .menu li:not(.menu-title, .menu-disabled) > *:not(ul, .collapse, .accordion-content, .dropdown-active, .menu-title) ) {
112 &:not(.btn):focus-visible {
113 cursor: pointer;
114 --tw-outline-style: none;
115 outline-style: none;
116 color: var(--menu-hover-fg);
117 background-color: var(--menu-hover-bg);
118 }
119 &:hover {
120 cursor: pointer;
121 --tw-outline-style: none;
122 outline-style: none;
123 color: var(--menu-hover-fg);
124 background-color: var(--menu-hover-bg);
125 }
126 }
127 li:not(.menu-title, .menu-disabled) > :not(ul, .menu-title, .collapse, .accordion-content, .btn).menu-active {
128 color: var(--menu-active-fg);
129 background-color: var(--menu-active-bg);
130 background-size: auto, calc(var(--noise) * 100%);
131 background-image: none, var(--fx-noise);
132 }
133 li.menu-disabled {
134 pointer-events: none;
135 opacity: 50%;
136 webkit-user-select: none;
137 user-select: none;
138 }
139 :where(& li) {
140 position: relative;
141 display: flex;
142 flex-shrink: 0;
143 flex-direction: column;
144 flex-wrap: wrap;
145 align-items: stretch;
146 .badge {
147 justify-self: flex-end;
148 }
149 }
150}
151.range {
152 appearance: none;
153 webkit-appearance: none;
154 --range-color: var(--color-base-content);
155 --range-thumb-border-width: 3px;
156 --range-track-height: 8px;
157 --range-thumb-size: 16px;
158 position: relative;
159 width: 100%;
160 border-radius: calc(infinity * 1px);
161 background-color: transparent;
162 transition-property: all;
163 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
164 transition-duration: var(--tw-duration, var(--default-transition-duration));
165 height: var(--range-track-height);
166 &::-webkit-slider-runnable-track {
167 width: 100%;
168 border-radius: calc(infinity * 1px);
169 background-color: var(--color-neutral);
170 @supports (color: color-mix(in lab, red, red)) {
171 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
172 }
173 height: var(--range-track-height);
174 }
175 &::-moz-range-track {
176 width: 100%;
177 border-radius: calc(infinity * 1px);
178 background-color: var(--color-neutral);
179 @supports (color: color-mix(in lab, red, red)) {
180 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
181 }
182 height: var(--range-track-height);
183 }
184 &::-webkit-slider-thumb {
185 position: relative;
186 top: calc(1/2 * 100%);
187 --tw-translate-y: calc(calc(1/2 * 100%) * -1);
188 translate: var(--tw-translate-x) var(--tw-translate-y);
189 border-radius: calc(infinity * 1px);
190 background-color: var(--color-base-100);
191 --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));
192 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
193 --tw-shadow-color: var(--color-base-300);
194 @supports (color: color-mix(in lab, red, red)) {
195 --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent);
196 }
197 transition-property: all;
198 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
199 transition-timing-function: var(--ease-in-out);
200 transition-duration: var(--tw-duration, var(--default-transition-duration));
201 transition-duration: 150ms;
202 --tw-duration: 150ms;
203 --tw-ease: var(--ease-in-out);
204 &:hover {
205 @media (hover: hover) {
206 --tw-scale-x: 125%;
207 --tw-scale-y: 125%;
208 --tw-scale-z: 125%;
209 scale: var(--tw-scale-x) var(--tw-scale-y);
210 }
211 cursor: grab;
212 box-shadow: 0 0 0 2px var(--range-color);
213 }
214 &:active {
215 --tw-scale-x: 125%;
216 --tw-scale-y: 125%;
217 --tw-scale-z: 125%;
218 scale: var(--tw-scale-x) var(--tw-scale-y);
219 cursor: grabbing;
220 box-shadow: 0 0 0 3px var(--range-color);
221 }
222 appearance: none;
223 box-sizing: border-box;
224 webkit-appearance: none;
225 color: var(--range-color);
226 border-color: var(--range-color);
227 border-style: solid;
228 border-width: var(--range-thumb-border-width);
229 height: var(--range-thumb-size);
230 width: var(--range-thumb-size);
231 }
232 &::-moz-range-thumb {
233 position: relative;
234 border-radius: calc(infinity * 1px);
235 background-color: var(--color-base-100);
236 --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));
237 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
238 transition-property: all;
239 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
240 transition-timing-function: var(--ease-in-out);
241 transition-duration: var(--tw-duration, var(--default-transition-duration));
242 transition-duration: 150ms;
243 --tw-duration: 150ms;
244 --tw-ease: var(--ease-in-out);
245 top: 50%;
246 color: var(--range-color);
247 box-sizing: border-box;
248 border-color: var(--range-color);
249 border-style: solid;
250 border-width: var(--range-thumb-border-width);
251 height: var(--range-thumb-size);
252 width: var(--range-thumb-size);
253 &:hover {
254 cursor: grab;
255 box-shadow: 0 0 0 2px var(--range-color);
256 }
257 &:active {
258 cursor: grabbing;
259 box-shadow: 0 0 0 3px var(--range-color);
260 }
261 }
262 &:focus {
263 outline: none;
264 }
265 &.disabled {
266 pointer-events: none;
267 opacity: 50%;
268 }
269 &:disabled {
270 pointer-events: none;
271 opacity: 50%;
272 }
273 &[disabled] {
274 pointer-events: none;
275 opacity: 50%;
276 }
277 [dir="rtl"] &::-webkit-slider-thumb {
278 transform: scaleX(-1);
279 }
280 [dir="rtl"] &::-moz-range-thumb {
281 transform: scaleX(-1);
282 }
283 [dir="rtl"] &::-webkit-slider-runnable-track {
284 direction: rtl;
285 }
286 [dir="rtl"] &::-moz-range-track {
287 direction: rtl;
288 }
289}
290.tab {
291 .tabs-lifted > &:focus-visible {
292 border-end-end-radius: 0;
293 border-end-start-radius: 0;
294 }
295 position: relative;
296 display: inline-flex;
297 cursor: pointer;
298 appearance: none;
299 align-items: center;
300 justify-content: center;
301 text-align: center;
302 font-size: var(--text-base);
303 line-height: var(--tw-leading, var(--text-base--line-height));
304 color: var(--color-base-content);
305 webkit-user-select: none;
306 user-select: none;
307 height: var(--size);
308 --size: calc(var(--size-field, 0.25rem) * 9.5);
309 --tab-p: 1rem;
310 --tab-bg: var(--color-base-100);
311 --tab-border-color: var(--color-base-content);
312 @supports (color: color-mix(in lab, red, red)) {
313 --tab-border-color: color-mix(in oklab, var(--color-base-content), #0000 90%);
314 }
315 padding-inline: var(--tab-p, 1rem);
316 &:focus, &:focus-visible {
317 --tw-outline-style: none;
318 outline-style: none;
319 }
320 &[disabled] {
321 pointer-events: none;
322 opacity: 40%;
323 }
324 @media (hover: hover) {
325 &[disabled]:hover {
326 pointer-events: none;
327 opacity: 40%;
328 }
329 }
330 .tabs-bordered > & {
331 border-color: var(--color-base-content);
332 @supports (color: color-mix(in lab, red, red)) {
333 border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
334 }
335 @media (hover:hover) {
336 &:hover {
337 @media (hover: hover) {
338 border-color: var(--color-primary);
339 @supports (color: color-mix(in lab, red, red)) {
340 border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
341 }
342 }
343 }
344 }
345 @media (hover:hover) {
346 &:hover {
347 @media (hover: hover) {
348 color: var(--color-primary);
349 }
350 }
351 }
352 border-style: solid;
353 border-bottom-width: calc(var(--border, 1px) + 1px);
354 }
355 .tabs-lifted > & {
356 @media (hover:hover) {
357 &:hover {
358 @media (hover: hover) {
359 border-color: var(--color-primary);
360 @supports (color: color-mix(in lab, red, red)) {
361 border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
362 }
363 }
364 }
365 }
366 @media (hover:hover) {
367 &:hover {
368 @media (hover: hover) {
369 color: var(--color-primary);
370 }
371 }
372 }
373 border: var(--tab-border, 1px) solid transparent;
374 border-width: 0 0 var(--tab-border, 1px) 0;
375 border-radius: var(--radius-field, 0.375rem);
376 border-bottom-color: var(--tab-border-color);
377 padding-inline-start: var(--tab-p, 1rem);
378 padding-inline-end: var(--tab-p, 1rem);
379 padding-top: var(--tab-border, 1px);
380 }
381 .tabs-lifted > &.tab-active:not([disabled]) {
382 background-color: var(--tab-bg);
383 border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
384 border-color: var(--tab-border-color);
385 border-end-start-radius: 0;
386 border-end-end-radius: 0;
387 padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px));
388 padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px));
389 padding-bottom: var(--tab-border, 1px);
390 padding-top: 0;
391 }
392 .tabs-lifted > &.tab-active:not([disabled]):before {
393 content: "";
394 display: block;
395 position: absolute;
396 z-index: 1;
397 width: calc(100% + var(--radius-field, 0.375rem) * 2);
398 height: var(--radius-field, 0.375rem);
399 bottom: 0;
400 background-size: var(--radius-field, 0.375rem);
401 background-repeat: no-repeat;
402 background-position: top left, top right;
403 --tab-grad: calc(69% - var(--tab-border, 1px));
404 --radius-start: radial-gradient(
405 circle at top left,
406 transparent var(--tab-grad),
407 var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
408 var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
409 var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
410 );
411 --radius-end: radial-gradient(
412 circle at top right,
413 transparent var(--tab-grad),
414 var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
415 var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
416 var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
417 );
418 background-image: var(--radius-start), var(--radius-end);
419 }
420 .tabs-lifted > &.tab-active:not([disabled]):first-child:before {
421 background-image: var(--radius-end);
422 background-position: top right;
423 }
424 .tabs-lifted > &.tab-active:not([disabled]):last-child:before {
425 background-image: var(--radius-start);
426 background-position: top left;
427 }
428 [dir="rtl"] .tabs-lifted > &.tab-active:not([disabled]):first-child:before {
429 background-image: var(--radius-start);
430 background-position: top left;
431 }
432 [dir="rtl"] .tabs-lifted > &.tab-active:not([disabled]):last-child:before {
433 background-image: var(--radius-end);
434 background-position: top right;
435 }
436 .tabs-xl :where(&) {
437 font-size: var(--text-xl);
438 line-height: var(--tw-leading, var(--text-xl--line-height));
439 --size: calc(var(--size-field, 0.25rem) * 14);
440 --tab-p: 1.5rem;
441 }
442 .tabs-lg :where(&) {
443 font-size: var(--text-lg);
444 line-height: var(--tw-leading, var(--text-lg--line-height));
445 --size: calc(var(--size-field, 0.25rem) * 11.5);
446 --tab-p: 1.25rem;
447 }
448 .tabs-md :where(&) {
449 font-size: var(--text-base);
450 line-height: var(--tw-leading, var(--text-base--line-height));
451 --size: calc(var(--size-field, 0.25rem) * 9.5);
452 --tab-p: 1rem;
453 }
454 .tabs-sm :where(&) {
455 font-size: var(--text-sm);
456 line-height: var(--tw-leading, var(--text-sm--line-height));
457 --size: calc(var(--size-field, 0.25rem) * 7.5);
458 --tab-p: 0.75rem;
459 }
460 .tabs-xs :where(&) {
461 font-size: var(--text-sm);
462 line-height: var(--tw-leading, var(--text-sm--line-height));
463 --size: calc(var(--size-field, 0.25rem) * 6);
464 --tab-p: 0.5rem;
465 }
466}
467.btn {
468 display: inline-flex;
469 flex-shrink: 0;
470 cursor: pointer;
471 flex-wrap: nowrap;
472 align-items: center;
473 justify-content: center;
474 gap: calc(0.25rem * 2);
475 text-align: center;
476 vertical-align: middle;
477 font-size: var(--text-base);
478 line-height: var(--tw-leading, var(--text-base--line-height));
479 --tw-font-weight: var(--font-weight-medium);
480 font-weight: var(--font-weight-medium);
481 text-decoration-line: none;
482 webkit-user-select: none;
483 user-select: none;
484 @media (prefers-reduced-motion: reduce) {
485 transition-property: none;
486 }
487 padding-inline: var(--btn-p);
488 color: var(--btn-fg);
489 height: var(--size);
490 outline-color: var(--btn-color, var(--color-neutral));
491 @supports (color: color-mix(in lab, red, red)) {
492 outline-color: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, var(--color-base-100));
493 }
494 transition-property: color, background-color, border-color, box-shadow;
495 transition-timing-function: cubic-bezier(0, 0, 0.96, 1.03);
496 transition-duration: 0.25s;
497 border-start-start-radius: var(--join-ss, var(--radius-field));
498 border-start-end-radius: var(--join-se, var(--radius-field));
499 border-end-start-radius: var(--join-es, var(--radius-field));
500 border-end-end-radius: var(--join-ee, var(--radius-field));
501 background-color: var(--btn-bg);
502 background-size: auto, calc(var(--noise) * 100%);
503 background-image: none, var(--btn-noise);
504 border: var(--border) solid var(--btn-border);
505 box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow);
506 --size: calc(var(--size-field, 0.25rem) * 9.5);
507 --btn-bg: var(--btn-color, var(--color-neutral));
508 --btn-fg: var(--color-neutral-content);
509 --btn-p: 1rem;
510 --btn-border: var(--btn-bg);
511 @supports (color: color-mix(in lab, red, red)) {
512 --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
513 }
514 --btn-shadow: 0px 1px 3px 0px var(--color-base-300),
515 0px 1px 2px -1px var(--color-base-300);
516 @supports (color: color-mix(in lab, red, red)) {
517 --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000),
518 0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000);
519 }
520 --btn-noise: var(--fx-noise);
521 @media (hover: hover) {
522 &:hover {
523 --btn-bg: var(--btn-color, var(--color-neutral));
524 @supports (color: color-mix(in lab, red, red)) {
525 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000);
526 }
527 }
528 }
529 &:active:hover:not(.btn-active), &:active:focus:not(.btn-active) {
530 --tw-scale-x: 95%;
531 --tw-scale-y: 95%;
532 --tw-scale-z: 95%;
533 scale: var(--tw-scale-x) var(--tw-scale-y);
534 transition-property: transform, translate, scale, rotate;
535 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
536 transition-timing-function: ease-out;
537 transition-duration: var(--tw-duration, var(--default-transition-duration));
538 transition-duration: 300ms;
539 --tw-duration: 300ms;
540 }
541 &:focus-visible {
542 --btn-bg: var(--btn-color, var(--color-neutral));
543 @supports (color: color-mix(in lab, red, red)) {
544 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), #000 10%);
545 }
546 outline-width: 2px;
547 outline-style: solid;
548 }
549 &:is(:disabled, [disabled], .btn-disabled) {
550 pointer-events: none;
551 opacity: 50%;
552 --tw-shadow: 0 0 #0000;
553 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
554 }
555 &:is(input[type="checkbox"], input[type="radio"]) {
556 appearance: none;
557 &::after {
558 content: attr(aria-label);
559 }
560 &:checked {
561 background: var(--color-primary);
562 color: var(--color-primary-content);
563 outline-color: var(--color-primary);
564 --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
565 isolation: isolate;
566 }
567 }
568}
569.pin-input {
570 border-radius: var(--radius-field);
571 border-style: var(--tw-border-style);
572 border-width: 1px;
573 border-color: var(--color-base-content);
574 @supports (color: color-mix(in lab, red, red)) {
575 border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
576 }
577 background-color: var(--color-base-100);
578 text-align: center;
579 font-size: var(--text-base);
580 line-height: var(--tw-leading, var(--text-base--line-height));
581 &::placeholder {
582 color: var(--color-base-content);
583 @supports (color: color-mix(in lab, red, red)) {
584 color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
585 }
586 }
587 height: var(--size);
588 width: var(--size);
589 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
590 --size: calc(var(--size-field, 0.25rem) * 9.5);
591 &:hover:not(:focus, :focus-within) {
592 border-color: var(--color-base-content);
593 @supports (color: color-mix(in lab, red, red)) {
594 border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
595 }
596 }
597 &:focus, &:focus-within {
598 border-color: var(--color-primary);
599 --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
600 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
601 --tw-shadow-color: var(--color-primary);
602 @supports (color: color-mix(in lab, red, red)) {
603 --tw-shadow-color: color-mix(in oklab, var(--color-primary) 30%, #0000);
604 }
605 outline: 1px solid var(--color-primary);
606 isolation: isolate;
607 }
608 &.disabled, &:disabled, &[disabled] {
609 pointer-events: none;
610 border-color: var(--color-base-content);
611 @supports (color: color-mix(in lab, red, red)) {
612 border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
613 }
614 background-color: var(--color-base-content);
615 @supports (color: color-mix(in lab, red, red)) {
616 background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
617 }
618 color: var(--color-base-content);
619 @supports (color: color-mix(in lab, red, red)) {
620 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
621 }
622 &::placeholder {
623 color: var(--color-base-content);
624 @supports (color: color-mix(in lab, red, red)) {
625 color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
626 }
627 }
628 }
629}
630.dropdown-item {
631 clear: both;
632 display: flex;
633 width: 100%;
634 align-items: center;
635 column-gap: calc(0.25rem * 2);
636 border-radius: var(--radius-field);
637 background-color: transparent;
638 padding-inline: calc(0.25rem * 4);
639 padding-block: calc(0.25rem * 2.5);
640 color: var(--color-base-content);
641 text-decoration-line: none;
642 text-decoration-thickness: 0px;
643 text-align: inherit;
644 &:hover:not(.dropdown-active), &:focus:not(.dropdown-active), &:focus-within:not(.dropdown-active), &:focus-visible:not(.dropdown-active) {
645 background-color: var(--color-neutral);
646 @supports (color: color-mix(in lab, red, red)) {
647 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
648 }
649 --tw-outline-style: none;
650 outline-style: none;
651 }
652 &.dropdown-disabled, &:disabled, &[disabled] {
653 pointer-events: none;
654 background-color: var(--color-neutral);
655 @supports (color: color-mix(in lab, red, red)) {
656 background-color: color-mix(in oklab, var(--color-neutral) 5%, transparent);
657 }
658 color: var(--color-base-content);
659 @supports (color: color-mix(in lab, red, red)) {
660 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
661 }
662 }
663}
664.loading {
665 pointer-events: none;
666 display: inline-block;
667 aspect-ratio: 1 / 1;
668 background-color: currentColor;
669 vertical-align: middle;
670 width: calc(var(--size-selector, 0.25rem) * 6);
671 mask-size: 100%;
672 mask-repeat: no-repeat;
673 mask-position: center;
674 mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
675}
676.accordion-toggle {
677 width: 100%;
678 cursor: pointer;
679 padding-inline: calc(0.25rem * 5);
680 padding-block: calc(0.25rem * 4);
681 font-size: var(--text-lg);
682 line-height: var(--tw-leading, var(--text-lg--line-height));
683 --tw-font-weight: var(--font-weight-medium);
684 font-weight: var(--font-weight-medium);
685 color: var(--color-base-content);
686 &:disabled {
687 pointer-events: none;
688 opacity: 50%;
689 }
690}
691.disabled {
692 .range& {
693 pointer-events: none;
694 opacity: 50%;
695 }
696}
697.disabled {
698 .carousel-prev& {
699 pointer-events: none;
700 }
701 .carousel-next& {
702 pointer-events: none;
703 }
704}
705.tooltip-content {
706 visibility: hidden;
707 position: absolute;
708 display: inline-block;
709 padding: calc(0.25rem * 2);
710 opacity: 0%;
711 transition-property: opacity;
712 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
713 transition-duration: var(--tw-duration, var(--default-transition-duration));
714 width: max-content;
715 z-index: 20;
716}
717.collapse {
718 visibility: collapse;
719}
720.collapse {
721 &:not(td):not(tr):not(colgroup) {
722 visibility: visible;
723 }
724}
725.invisible {
726 visibility: hidden;
727}
728.table {
729 position: relative;
730 width: 100%;
731 overflow-x: hidden;
732 overflow-y: auto;
733 border-radius: var(--radius-box);
734 text-align: left;
735 font-size: var(--text-sm);
736 line-height: var(--tw-leading, var(--text-sm--line-height));
737 &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
738 text-align: right;
739 }
740 tr.row-hover {
741 &, &:nth-child(even) {
742 &:hover {
743 @media (hover: hover) {
744 background-color: var(--color-base-200);
745 @supports (color: color-mix(in lab, red, red)) {
746 background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent);
747 }
748 }
749 }
750 }
751 }
752 tr.row-active {
753 &, &:nth-child(even) {
754 background-color: var(--color-base-200);
755 }
756 }
757 :where(th, td) {
758 padding-inline: calc(0.25rem * 5);
759 padding-block: calc(0.25rem * 3);
760 vertical-align: middle;
761 text-wrap: nowrap;
762 }
763 :where(thead, tfoot) {
764 font-size: var(--text-sm);
765 line-height: var(--tw-leading, var(--text-sm--line-height));
766 white-space: nowrap;
767 color: var(--color-base-content);
768 text-transform: uppercase;
769 letter-spacing: 1px;
770 }
771 :where(th) {
772 --tw-font-weight: var(--font-weight-medium);
773 font-weight: var(--font-weight-medium);
774 }
775 :where(.table-pin-rows thead tr) {
776 position: sticky;
777 top: calc(0.25rem * 0);
778 z-index: 1;
779 background-color: var(--color-base-100);
780 }
781 :where(.table-pin-rows tfoot tr) {
782 position: sticky;
783 bottom: calc(0.25rem * 0);
784 z-index: 1;
785 background-color: var(--color-base-100);
786 }
787 :where(.table-pin-cols tr th) {
788 position: sticky;
789 right: calc(0.25rem * 0);
790 left: calc(0.25rem * 0);
791 background-color: var(--color-base-100);
792 }
793 :where(thead tr) {
794 border-bottom: var(--border) solid var(--color-base-content);
795 @supports (color: color-mix(in lab, red, red)) {
796 border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000);
797 }
798 }
799 :where(tbody tr:not(:last-child)) {
800 border-bottom: var(--border) solid var(--color-base-content);
801 @supports (color: color-mix(in lab, red, red)) {
802 border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 10%, #0000);
803 }
804 }
805 :where(tfoot) {
806 border-top: var(--border) solid var(--color-base-content);
807 @supports (color: color-mix(in lab, red, red)) {
808 border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000);
809 }
810 }
811}
812.select {
813 position: relative;
814 display: inline-flex;
815 width: 100%;
816 flex-shrink: 1;
817 cursor: pointer;
818 appearance: none;
819 background-color: var(--color-base-100);
820 padding-inline-start: calc(0.25rem * 3);
821 padding-inline-end: calc(0.25rem * 10);
822 vertical-align: middle;
823 font-size: var(--text-base);
824 line-height: var(--tw-leading, var(--text-base--line-height));
825 color: var(--color-base-content);
826 webkit-user-select: none;
827 user-select: none;
828 height: var(--size);
829 border-start-start-radius: var(--join-ss, var(--radius-field));
830 border-start-end-radius: var(--join-se, var(--radius-field));
831 border-end-start-radius: var(--join-es, var(--radius-field));
832 border-end-end-radius: var(--join-ee, var(--radius-field));
833 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");
834 background-size: 1.3em;
835 background-position: calc(100% - 0.5rem) center;
836 background-repeat: no-repeat;
837 touch-action: manipulation;
838 text-overflow: ellipsis;
839 border: var(--border) solid #0000;
840 border-color: var(--input-color);
841 --input-color: var(--color-base-content);
842 @supports (color: color-mix(in lab, red, red)) {
843 --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000);
844 }
845 --size: calc(var(--size-field, 0.25rem) * 9.5);
846 &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) {
847 border-color: var(--color-base-content);
848 @supports (color: color-mix(in lab, red, red)) {
849 border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
850 }
851 }
852 [dir="rtl"] & {
853 background-position: calc(0% + 1.3em) center;
854 }
855 select {
856 margin-inline-end: calc(0.25rem * -10);
857 height: 100%;
858 width: calc(100% + 2.75rem);
859 appearance: none;
860 padding-inline-start: calc(0.25rem * 3);
861 padding-inline-end: calc(0.25rem * 10);
862 background-color: transparent;
863 border-style: none;
864 &:focus, &:focus-within {
865 --tw-outline-style: none;
866 outline-style: none;
867 }
868 }
869 &[multiple] {
870 background-image: none;
871 }
872 &:focus, &:focus-within {
873 --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
874 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
875 --input-color: var(--color-primary);
876 --tw-shadow-color: var(--input-color);
877 @supports (color: color-mix(in lab, red, red)) {
878 --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000);
879 }
880 outline: 1px solid var(--input-color);
881 border-color: var(--input-color);
882 isolation: isolate;
883 }
884 &:has(> select[disabled]), &:is(:disabled, [disabled]) {
885 cursor: not-allowed;
886 border-style: var(--tw-border-style);
887 border-width: 0px;
888 border-color: var(--color-base-content);
889 @supports (color: color-mix(in lab, red, red)) {
890 border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
891 }
892 background-color: var(--color-neutral);
893 @supports (color: color-mix(in lab, red, red)) {
894 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
895 }
896 color: var(--color-base-content);
897 @supports (color: color-mix(in lab, red, red)) {
898 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
899 }
900 &::placeholder {
901 color: var(--color-base-content);
902 @supports (color: color-mix(in lab, red, red)) {
903 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
904 }
905 }
906 }
907 &:has(> select[disabled]) > select[disabled] {
908 cursor: not-allowed;
909 }
910 .input > & {
911 height: auto;
912 border-style: var(--tw-border-style);
913 border-width: 0px;
914 &:focus, &:focus-within {
915 --tw-shadow: 0 0 #0000;
916 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
917 outline-style: var(--tw-outline-style);
918 outline-width: 0px;
919 }
920 }
921 &:has(> .select-floating) select {
922 &::placeholder {
923 color: transparent;
924 }
925 &:focus {
926 &::placeholder {
927 color: var(--color-base-content);
928 @supports (color: color-mix(in lab, red, red)) {
929 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
930 }
931 }
932 }
933 }
934}
935.avatar {
936 position: relative;
937 display: inline-flex;
938 vertical-align: middle;
939 font-size: var(--text-base);
940 line-height: var(--tw-leading, var(--text-base--line-height));
941 & > div {
942 display: block;
943 aspect-ratio: 1 / 1;
944 overflow: hidden;
945 }
946 & > span {
947 display: block;
948 aspect-ratio: 1 / 1;
949 overflow: hidden;
950 }
951 :where(&) img {
952 height: 100%;
953 width: 100%;
954 object-fit: cover;
955 }
956}
957.checkbox {
958 position: relative;
959 flex-shrink: 0;
960 cursor: pointer;
961 appearance: none;
962 border-radius: var(--radius-selector);
963 padding: calc(0.25rem * 1);
964 vertical-align: middle;
965 color: var(--color-neutral-content);
966 border: var(--border) solid var(--color-base-content);
967 @supports (color: color-mix(in lab, red, red)) {
968 border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000);
969 }
970 --input-color: var(--color-neutral);
971 box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
972 transition: background-color 0.2s, box-shadow 0.2s;
973 --size: calc(var(--size-selector, 0.25rem) * 6);
974 width: var(--size);
975 height: var(--size);
976 background-size: auto, calc(var(--noise) * 100%);
977 background-image: none, var(--fx-noise);
978 &:before {
979 --tw-content: "";
980 content: var(--tw-content);
981 display: block;
982 width: 100%;
983 height: 100%;
984 rotate: 45deg;
985 background-color: currentColor;
986 opacity: 0%;
987 transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
988 transition-delay: 0.1s;
989 clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
990 box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
991 font-size: 1rem;
992 line-height: 0.75;
993 }
994 &:focus-visible {
995 outline: 2px solid var(--input-color, var(--color-neutral));
996 @supports (color: color-mix(in lab, red, red)) {
997 outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000);
998 }
999 outline-offset: 0px;
1000 }
1001 &:checked, &[aria-checked="true"] {
1002 background-color: var(--input-color, #0000);
1003 border-color: var(--input-color, #0000);
1004 box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 var(--color-base-300);
1005 @supports (color: color-mix(in lab, red, red)) {
1006 box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000);
1007 }
1008 &:before {
1009 clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
1010 opacity: 100%;
1011 }
1012 @media (forced-colors: active) {
1013 &:before {
1014 rotate: 0deg;
1015 background-color: transparent;
1016 --tw-content: "鉁旓笌";
1017 clip-path: none;
1018 }
1019 }
1020 @media print {
1021 &:before {
1022 rotate: 0deg;
1023 background-color: transparent;
1024 --tw-content: "鉁旓笌";
1025 clip-path: none;
1026 }
1027 }
1028 }
1029 &:indeterminate {
1030 background-color: var(--color-neutral);
1031 &:before {
1032 rotate: 0deg;
1033 opacity: 100%;
1034 translate: 0 -35%;
1035 clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
1036 }
1037 }
1038 &:disabled {
1039 cursor: not-allowed;
1040 opacity: 50%;
1041 }
1042}
1043.carousel {
1044 position: relative;
1045 width: 100%;
1046 overflow: hidden;
1047 border-radius: var(--radius-2xl);
1048}
1049.absolute {
1050 position: absolute;
1051}
1052.fixed {
1053 position: fixed;
1054}
1055.relative {
1056 position: relative;
1057}
1058.static {
1059 position: static;
1060}
1061.sticky {
1062 position: sticky;
1063}
1064.top-\[0\] {
1065 top: 0;
1066}
1067.top-full {
1068 top: 100%;
1069}
1070.right-\[0\] {
1071 right: 0;
1072}
1073.bottom-full {
1074 bottom: 100%;
1075}
1076.input {
1077 display: inline-flex;
1078 width: 100%;
1079 flex-shrink: 1;
1080 cursor: text;
1081 appearance: none;
1082 background-color: var(--color-base-100);
1083 padding-inline: calc(0.25rem * 3);
1084 font-size: var(--text-base);
1085 line-height: var(--tw-leading, var(--text-base--line-height));
1086 --tw-font-weight: var(--font-weight-normal);
1087 font-weight: var(--font-weight-normal);
1088 color: var(--color-base-content);
1089 &::placeholder {
1090 color: var(--color-base-content);
1091 @supports (color: color-mix(in lab, red, red)) {
1092 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
1093 }
1094 }
1095 &:focus-visible {
1096 --tw-outline-style: none;
1097 outline-style: none;
1098 }
1099 border: var(--border) solid #0000;
1100 height: var(--size);
1101 touch-action: manipulation;
1102 border-start-start-radius: var(--join-ss, var(--radius-field));
1103 border-start-end-radius: var(--join-se, var(--radius-field));
1104 border-end-start-radius: var(--join-es, var(--radius-field));
1105 border-end-end-radius: var(--join-ee, var(--radius-field));
1106 border-color: var(--input-color);
1107 --input-color: var(--color-base-content);
1108 @supports (color: color-mix(in lab, red, red)) {
1109 --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000);
1110 }
1111 --size: calc(var(--size-field, 0.25rem) * 9.5);
1112 &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) {
1113 border-color: var(--color-base-content);
1114 @supports (color: color-mix(in lab, red, red)) {
1115 border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
1116 }
1117 }
1118 &:where(input) {
1119 display: inline-block;
1120 }
1121 :where(input:not([type="checkbox"]):not([type="radio"])) {
1122 display: inline-block;
1123 height: 100%;
1124 width: 100%;
1125 appearance: none;
1126 background-color: transparent;
1127 border: none;
1128 &:focus, &:focus-within, &:focus-visible {
1129 --tw-outline-style: none;
1130 outline-style: none;
1131 }
1132 }
1133 &:focus, &:focus-within {
1134 --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1135 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1136 --input-color: var(--color-primary);
1137 --tw-shadow-color: var(--input-color);
1138 @supports (color: color-mix(in lab, red, red)) {
1139 --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000);
1140 }
1141 outline: 1px solid var(--input-color);
1142 isolation: isolate;
1143 }
1144 &:has(> input[disabled]), &:is(:disabled, [disabled]) {
1145 cursor: not-allowed;
1146 border-style: var(--tw-border-style);
1147 border-width: 0px;
1148 background-color: var(--color-neutral);
1149 @supports (color: color-mix(in lab, red, red)) {
1150 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
1151 }
1152 color: var(--color-base-content);
1153 @supports (color: color-mix(in lab, red, red)) {
1154 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
1155 }
1156 box-shadow: none;
1157 }
1158 &:has(> input[disabled]) > input[disabled] {
1159 cursor: not-allowed;
1160 }
1161 &::-webkit-date-and-time-value {
1162 text-align: inherit;
1163 }
1164 &[type="number"] {
1165 &::-webkit-inner-spin-button {
1166 margin-block: calc(0.25rem * -3);
1167 margin-inline-end: calc(0.25rem * -3);
1168 }
1169 }
1170 &:has(> .input-floating) input {
1171 &::placeholder {
1172 color: transparent;
1173 }
1174 &:focus {
1175 &::placeholder {
1176 color: var(--color-base-content);
1177 @supports (color: color-mix(in lab, red, red)) {
1178 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
1179 }
1180 }
1181 }
1182 }
1183}
1184.textarea {
1185 display: inline-flex;
1186 min-height: calc(0.25rem * 20);
1187 width: 100%;
1188 flex-shrink: 1;
1189 appearance: none;
1190 border-radius: var(--radius-field);
1191 background-color: var(--color-base-100);
1192 padding-inline: calc(0.25rem * 4);
1193 padding-block: calc(0.25rem * 2);
1194 font-size: var(--text-base);
1195 line-height: var(--tw-leading, var(--text-base--line-height));
1196 color: var(--color-base-content);
1197 &::placeholder {
1198 color: var(--color-base-content);
1199 @supports (color: color-mix(in lab, red, red)) {
1200 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
1201 }
1202 }
1203 &:hover {
1204 @media (hover: hover) {
1205 border-color: var(--color-base-content);
1206 @supports (color: color-mix(in lab, red, red)) {
1207 border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
1208 }
1209 }
1210 }
1211 &:focus-visible {
1212 --tw-outline-style: none;
1213 outline-style: none;
1214 }
1215 border: var(--border) solid #0000;
1216 border-color: var(--input-color);
1217 touch-action: manipulation;
1218 --input-color: var(--color-base-content);
1219 @supports (color: color-mix(in lab, red, red)) {
1220 --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000);
1221 }
1222 :where(textarea) {
1223 appearance: none;
1224 background-color: transparent;
1225 border: none;
1226 &:focus, &:focus-within {
1227 --tw-outline-style: none;
1228 outline-style: none;
1229 }
1230 }
1231 &:focus, &:focus-within {
1232 --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1233 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1234 --input-color: var(--color-primary);
1235 --tw-shadow-color: var(--input-color);
1236 @supports (color: color-mix(in lab, red, red)) {
1237 --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000);
1238 }
1239 outline: 1px solid var(--input-color);
1240 border-color: var(--input-color);
1241 isolation: isolate;
1242 }
1243 &:has(> textarea[disabled]), &:is(:disabled, [disabled]) {
1244 cursor: not-allowed;
1245 border-color: var(--color-base-200);
1246 background-color: var(--color-base-200);
1247 color: var(--color-base-content);
1248 @supports (color: color-mix(in lab, red, red)) {
1249 color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1250 }
1251 &::placeholder {
1252 color: var(--color-base-content);
1253 @supports (color: color-mix(in lab, red, red)) {
1254 color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1255 }
1256 }
1257 }
1258 &:has(> textarea[disabled]) > textarea[disabled] {
1259 cursor: not-allowed;
1260 }
1261 &:has(> textarea) {
1262 padding: calc(0.25rem * 0);
1263 textarea {
1264 height: auto;
1265 min-height: calc(0.25rem * 20);
1266 width: 100%;
1267 &:first-child {
1268 padding-block: calc(0.25rem * 2);
1269 padding-inline-start: calc(0.25rem * 4);
1270 }
1271 &:nth-child(2) {
1272 padding-block: calc(0.25rem * 2);
1273 }
1274 &:last-child {
1275 padding-block: calc(0.25rem * 2);
1276 padding-inline-end: calc(0.25rem * 4);
1277 }
1278 }
1279 }
1280 &:has(> .textarea-floating) {
1281 padding: calc(0.25rem * 0);
1282 :where(.textarea-floating:first-child) > textarea {
1283 padding-block: calc(0.25rem * 2);
1284 padding-inline-start: calc(0.25rem * 4);
1285 }
1286 :where(.textarea-floating:nth-child(2)) > textarea {
1287 padding-block: calc(0.25rem * 2);
1288 }
1289 :where(.textarea-floating:last-child) > textarea {
1290 padding-block: calc(0.25rem * 2);
1291 padding-inline-end: calc(0.25rem * 4);
1292 }
1293 :where(.textarea-floating:nth-child(2)) .textarea-floating-label, :where(.textarea-floating:last-child) .textarea-floating-label {
1294 margin-inline-start: calc(0.25rem * 0);
1295 }
1296 & * > textarea {
1297 width: 100%;
1298 height: 100%;
1299 min-height: calc(0.25rem * 20);
1300 }
1301 }
1302 &:has(> .textarea-floating) textarea {
1303 &::placeholder {
1304 color: transparent;
1305 }
1306 &:focus {
1307 &::placeholder {
1308 color: var(--color-base-content);
1309 @supports (color: color-mix(in lab, red, red)) {
1310 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
1311 }
1312 }
1313 }
1314 }
1315}
1316.dropdown-menu {
1317 z-index: 10;
1318 margin-top: calc(0.25rem * 2);
1319 :where(& > :not(:last-child)) {
1320 --tw-space-y-reverse: 0;
1321 margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));
1322 margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));
1323 }
1324 border-radius: var(--radius-box);
1325 background-color: var(--color-base-100);
1326 padding: calc(0.25rem * 2);
1327 font-size: var(--text-base);
1328 line-height: var(--tw-leading, var(--text-base--line-height));
1329 text-wrap: nowrap;
1330 opacity: 0%;
1331 --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));
1332 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1333 --tw-shadow-color: var(--color-base-300);
1334 @supports (color: color-mix(in lab, red, red)) {
1335 --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent);
1336 }
1337 transition-property: opacity,margin;
1338 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1339 transition-duration: var(--tw-duration, var(--default-transition-duration));
1340 transition-duration: 300ms;
1341 --tw-duration: 300ms;
1342}
1343.container {
1344 width: 100%;
1345}
1346.m-\[0px\] {
1347 margin: 0px;
1348}
1349.m-\[20px\] {
1350 margin: 20px;
1351}
1352.m-auto {
1353 margin: auto;
1354}
1355.filter {
1356 display: flex;
1357 flex-wrap: wrap;
1358 input[type="radio"] {
1359 width: auto;
1360 }
1361 input {
1362 overflow: hidden;
1363 opacity: 100%;
1364 scale: 1;
1365 border-width: 0;
1366 transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s;
1367 &:not(:last-child) {
1368 margin-inline-end: calc(0.25rem * 1);
1369 }
1370 &.filter-reset {
1371 aspect-ratio: 1 / 1;
1372 &::after {
1373 content: "脳";
1374 }
1375 }
1376 }
1377 &:not(:has(input:checked:not(.filter-reset))) {
1378 .filter-reset, input[type="reset"] {
1379 scale: 0;
1380 border-width: 0;
1381 margin-inline: calc(0.25rem * 0);
1382 width: calc(0.25rem * 0);
1383 padding-inline: calc(0.25rem * 0);
1384 opacity: 0%;
1385 }
1386 }
1387 &:has(input:checked:not(.filter-reset)) {
1388 input:not(:checked, .filter-reset, input[type="reset"]) {
1389 scale: 0;
1390 border-width: 0;
1391 margin-inline: calc(0.25rem * 0);
1392 width: calc(0.25rem * 0);
1393 padding-inline: calc(0.25rem * 0);
1394 opacity: 0%;
1395 }
1396 }
1397}
1398.\!ms-auto {
1399 margin-inline-start: auto !important;
1400}
1401.input {
1402 &::file-selector-button {
1403 margin-inline-end: calc(0.25rem * 4);
1404 display: inline-flex;
1405 height: 100%;
1406 flex-shrink: 0;
1407 cursor: pointer;
1408 flex-wrap: wrap;
1409 align-items: center;
1410 justify-content: center;
1411 border-style: var(--tw-border-style);
1412 border-width: 0px;
1413 background-color: var(--color-primary);
1414 padding-inline: calc(0.25rem * 4);
1415 text-align: center;
1416 font-size: var(--text-base);
1417 line-height: var(--tw-leading, var(--text-base--line-height));
1418 --tw-leading: 1;
1419 --tw-font-weight: var(--font-weight-semibold);
1420 font-weight: var(--font-weight-semibold);
1421 color: var(--color-primary-content);
1422 text-transform: uppercase;
1423 text-decoration-line: none;
1424 webkit-user-select: none;
1425 user-select: none;
1426 --input-color: var(--color-primary);
1427 &.input-sm {
1428 font-size: var(--text-sm);
1429 line-height: var(--tw-leading, var(--text-sm--line-height));
1430 }
1431 &.input-md {
1432 font-size: var(--text-base);
1433 line-height: var(--tw-leading, var(--text-base--line-height));
1434 }
1435 &.input-lg {
1436 font-size: var(--text-lg);
1437 line-height: var(--tw-leading, var(--text-lg--line-height));
1438 }
1439 &.input-xl {
1440 font-size: var(--text-xl);
1441 line-height: var(--tw-leading, var(--text-xl--line-height));
1442 }
1443 }
1444 &[type="file"] {
1445 overflow: hidden;
1446 padding-inline-start: calc(0.25rem * 0);
1447 }
1448 .input-floating &::file-selector-button {
1449 background-color: var(--color-base-100);
1450 color: var(--color-base-content);
1451 border-inline-end: var(--border) solid var(--color-base-content);
1452 @supports (color: color-mix(in lab, red, red)) {
1453 border-inline-end: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000);
1454 }
1455 outline: none;
1456 }
1457}
1458.mt-\[-3px\] {
1459 margin-top: -3px;
1460}
1461.mt-\[-6px\] {
1462 margin-top: -6px;
1463}
1464.mt-\[3px\] {
1465 margin-top: 3px;
1466}
1467.mt-\[10px\] {
1468 margin-top: 10px;
1469}
1470.mt-\[20px\] {
1471 margin-top: 20px;
1472}
1473.mr-\[8px\] {
1474 margin-right: 8px;
1475}
1476.mr-\[10px\] {
1477 margin-right: 10px;
1478}
1479.mr-\[20px\] {
1480 margin-right: 20px;
1481}
1482.mr-\[25px\] {
1483 margin-right: 25px;
1484}
1485.mb-\[5px\] {
1486 margin-bottom: 5px;
1487}
1488.mb-\[10px\] {
1489 margin-bottom: 10px;
1490}
1491.mb-\[15px\] {
1492 margin-bottom: 15px;
1493}
1494.mb-\[20px\] {
1495 margin-bottom: 20px;
1496}
1497.mb-\[25px\] {
1498 margin-bottom: 25px;
1499}
1500.status {
1501 display: inline-block;
1502 aspect-ratio: 1 / 1;
1503 width: calc(0.25rem * 2.5);
1504 height: calc(0.25rem * 2.5);
1505 border-radius: calc(infinity * 1px);
1506 background-color: var(--color-neutral);
1507 background-position: center;
1508 background-repeat: no-repeat;
1509 vertical-align: middle;
1510 color: var(--color-neutral);
1511 background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000);
1512 box-shadow: 0 2px 3px -1px currentColor;
1513 @supports (color: color-mix(in lab, red, red)) {
1514 box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
1515 }
1516}
1517.divider {
1518 display: flex;
1519 width: 100%;
1520 align-items: center;
1521 align-self: stretch;
1522 font-size: var(--text-sm);
1523 line-height: var(--tw-leading, var(--text-sm--line-height));
1524 white-space: nowrap;
1525 &:not(:empty) {
1526 gap: calc(0.25rem * 4);
1527 }
1528 &:before {
1529 content: "";
1530 height: 1px;
1531 width: 100%;
1532 flex-grow: 1;
1533 border-inline-end-style: var(--tw-border-style);
1534 border-inline-end-width: 0px;
1535 border-top-style: var(--tw-border-style);
1536 border-top-width: 1px;
1537 --tw-border-style: solid;
1538 border-style: solid;
1539 border-color: var(--color-base-content);
1540 @supports (color: color-mix(in lab, red, red)) {
1541 border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1542 }
1543 }
1544 &:after {
1545 content: "";
1546 height: 1px;
1547 width: 100%;
1548 flex-grow: 1;
1549 border-inline-end-style: var(--tw-border-style);
1550 border-inline-end-width: 0px;
1551 border-top-style: var(--tw-border-style);
1552 border-top-width: 1px;
1553 --tw-border-style: solid;
1554 border-style: solid;
1555 border-color: var(--color-base-content);
1556 @supports (color: color-mix(in lab, red, red)) {
1557 border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1558 }
1559 }
1560}
1561.progress {
1562 display: flex;
1563 height: calc(0.25rem * 1.5);
1564 width: 100%;
1565 overflow: hidden;
1566 border-radius: var(--radius-box);
1567 background-color: var(--color-base-200);
1568}
1569.icon-\[tabler--trending-down\] {
1570 display: inline-block;
1571 width: 1em;
1572 height: 1em;
1573 background-color: currentColor;
1574 -webkit-mask-image: var(--svg);
1575 mask-image: var(--svg);
1576 -webkit-mask-repeat: no-repeat;
1577 mask-repeat: no-repeat;
1578 -webkit-mask-size: 100% 100%;
1579 mask-size: 100% 100%;
1580 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 7l6 6l4-4l8 8'/%3E%3Cpath d='M21 10v7h-7'/%3E%3C/g%3E%3C/svg%3E");
1581}
1582.icon-\[tabler--trending-up\] {
1583 display: inline-block;
1584 width: 1em;
1585 height: 1em;
1586 background-color: currentColor;
1587 -webkit-mask-image: var(--svg);
1588 mask-image: var(--svg);
1589 -webkit-mask-repeat: no-repeat;
1590 mask-repeat: no-repeat;
1591 -webkit-mask-size: 100% 100%;
1592 mask-size: 100% 100%;
1593 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 17l6-6l4 4l8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/g%3E%3C/svg%3E");
1594}
1595.tabs {
1596 display: flex;
1597 --tabs-height: auto;
1598 --tabs-direction: row;
1599 height: var(--tabs-height);
1600 flex-direction: var(--tabs-direction);
1601}
1602.progress-bar {
1603 display: flex;
1604 align-items: center;
1605 justify-content: center;
1606 overflow: hidden;
1607 border-radius: var(--radius-box);
1608 background-color: var(--color-neutral);
1609 font-size: var(--text-xs);
1610 line-height: var(--tw-leading, var(--text-xs--line-height));
1611 --tw-font-weight: var(--font-weight-medium);
1612 font-weight: var(--font-weight-medium);
1613 white-space: nowrap;
1614 color: var(--color-neutral-content);
1615 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;
1616 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1617 transition-timing-function: var(--ease-in-out);
1618 transition-duration: var(--tw-duration, var(--default-transition-duration));
1619 transition-duration: 500ms;
1620 --tw-duration: 500ms;
1621 --tw-ease: var(--ease-in-out);
1622 &.progress-indeterminate {
1623 width: 100%;
1624 background: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, var(--progress-color) 50%);
1625 background-size: 50% 100%;
1626 background-repeat: no-repeat;
1627 animation: indeterminate-progress 4s infinite ease-in-out;
1628 }
1629}
1630.stats {
1631 display: inline-grid;
1632 grid-auto-flow: column;
1633 :where(& > :not(:last-child)) {
1634 --tw-divide-x-reverse: 0;
1635 border-inline-style: var(--tw-border-style);
1636 border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
1637 border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
1638 --tw-divide-y-reverse: 0;
1639 border-bottom-style: var(--tw-border-style);
1640 border-top-style: var(--tw-border-style);
1641 border-top-width: calc(0px * var(--tw-divide-y-reverse));
1642 border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
1643 }
1644 overflow-x: auto;
1645 border-radius: var(--radius-box);
1646 --tw-border-style: solid;
1647 border-style: solid;
1648 border-color: var(--color-base-content);
1649 @supports (color: color-mix(in lab, red, red)) {
1650 border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1651 }
1652 background-color: var(--color-base-100);
1653 box-shadow: var( --card-shadow, 0 1px 3px 0 var(--color-base-300), 0 1px 2px -1px var(--color-base-300) );
1654 @supports (color: color-mix(in lab, red, red)) {
1655 box-shadow: var( --card-shadow, 0 1px 3px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000), 0 1px 2px -1px color-mix(in oklab, var(--color-base-300) 20%, #0000) );
1656 }
1657 border-width: var(--card-border, 0px);
1658 &:where(.stats-border) {
1659 border: var(--border) solid var(--color-base-content);
1660 @supports (color: color-mix(in lab, red, red)) {
1661 border: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
1662 }
1663 }
1664}
1665.carousel-body {
1666 display: flex;
1667 flex-wrap: nowrap;
1668 transition-property: transform, translate, scale, rotate;
1669 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1670 transition-duration: var(--tw-duration, var(--default-transition-duration));
1671 transition-duration: 700ms;
1672 --tw-duration: 700ms;
1673}
1674.tooltip {
1675 display: inline-block;
1676 text-align: center;
1677}
1678.\!flex {
1679 display: flex !important;
1680}
1681.block {
1682 display: block;
1683}
1684.contents {
1685 display: contents;
1686}
1687.flex {
1688 display: flex;
1689}
1690.hidden {
1691 display: none;
1692}
1693.inline {
1694 display: inline;
1695}
1696.inline-block {
1697 display: inline-block;
1698}
1699.table {
1700 display: table;
1701}
1702.btn-circle {
1703 border-radius: calc(infinity * 1px);
1704 padding-inline: calc(0.25rem * 0);
1705 width: var(--size);
1706 height: var(--size);
1707}
1708.input {
1709 & > .select {
1710 height: auto;
1711 border-style: var(--tw-border-style);
1712 border-width: 0px;
1713 &:focus, &:focus-within {
1714 --tw-shadow: 0 0 #0000;
1715 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1716 outline-style: var(--tw-outline-style);
1717 outline-width: 0px;
1718 }
1719 }
1720}
1721.h-\[30px\] {
1722 height: 30px;
1723}
1724.h-\[60px\] {
1725 height: 60px;
1726}
1727.max-h-\[18px\] {
1728 max-height: 18px;
1729}
1730.max-h-\[25px\] {
1731 max-height: 25px;
1732}
1733.max-h-\[60px\] {
1734 max-height: 60px;
1735}
1736.max-h-\[70px\] {
1737 max-height: 70px;
1738}
1739.max-h-\[100px\] {
1740 max-height: 100px;
1741}
1742.max-h-\[280px\] {
1743 max-height: 280px;
1744}
1745.min-h-screen {
1746 min-height: 100vh;
1747}
1748.advance-select-option {
1749 width: 100%;
1750 cursor: pointer;
1751 border-radius: var(--radius-field);
1752 padding-inline: calc(0.25rem * 4);
1753 padding-block: calc(0.25rem * 2.5);
1754 font-size: var(--text-base);
1755 line-height: var(--tw-leading, var(--text-base--line-height));
1756 --tw-font-weight: var(--font-weight-normal);
1757 font-weight: var(--font-weight-normal);
1758 color: var(--color-base-content);
1759 &:hover {
1760 @media (hover: hover) {
1761 background-color: var(--color-neutral);
1762 @supports (color: color-mix(in lab, red, red)) {
1763 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
1764 }
1765 }
1766 }
1767 &:focus {
1768 background-color: var(--color-neutral);
1769 @supports (color: color-mix(in lab, red, red)) {
1770 background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
1771 }
1772 --tw-outline-style: none;
1773 outline-style: none;
1774 }
1775}
1776.w-1\/3 {
1777 width: calc(1/3 * 100%);
1778}
1779.w-\[30px\] {
1780 width: 30px;
1781}
1782.w-\[60px\] {
1783 width: 60px;
1784}
1785.w-fit {
1786 width: fit-content;
1787}
1788.w-full {
1789 width: 100%;
1790}
1791.max-w-\[18px\] {
1792 max-width: 18px;
1793}
1794.max-w-\[25px\] {
1795 max-width: 25px;
1796}
1797.max-w-\[60px\] {
1798 max-width: 60px;
1799}
1800.max-w-\[70px\] {
1801 max-width: 70px;
1802}
1803.max-w-\[100px\] {
1804 max-width: 100px;
1805}
1806.max-w-\[280px\] {
1807 max-width: 280px;
1808}
1809.max-w-full {
1810 max-width: 100%;
1811}
1812.min-w-\[30px\] {
1813 min-width: 30px;
1814}
1815.flex-1 {
1816 flex: 1;
1817}
1818.shrink-0 {
1819 flex-shrink: 0;
1820}
1821.transform {
1822 transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1823}
1824.cursor-pointer {
1825 cursor: pointer;
1826}
1827.resize {
1828 resize: both;
1829}
1830.flex-col {
1831 flex-direction: column;
1832}
1833.flex-row {
1834 flex-direction: row;
1835}
1836.flex-nowrap {
1837 flex-wrap: nowrap;
1838}
1839.items-center {
1840 align-items: center;
1841}
1842.items-end {
1843 align-items: flex-end;
1844}
1845.items-start {
1846 align-items: flex-start;
1847}
1848.\!justify-between {
1849 justify-content: space-between !important;
1850}
1851.justify-between {
1852 justify-content: space-between;
1853}
1854.justify-center {
1855 justify-content: center;
1856}
1857.justify-end {
1858 justify-content: flex-end;
1859}
1860.accordion {
1861 &:where(.accordion-bordered) {
1862 :where(& > :not(:last-child)) {
1863 --tw-divide-y-reverse: 0;
1864 border-bottom-style: var(--tw-border-style);
1865 border-top-style: var(--tw-border-style);
1866 border-top-width: calc(1px * var(--tw-divide-y-reverse));
1867 border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1868 border-color: var(--color-base-content);
1869 @supports (color: color-mix(in lab, red, red)) {
1870 border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
1871 }
1872 }
1873 border-radius: var(--radius-box);
1874 border-style: var(--tw-border-style);
1875 border-width: 1px;
1876 border-color: var(--color-base-content);
1877 @supports (color: color-mix(in lab, red, red)) {
1878 border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
1879 }
1880 background-color: var(--color-base-100);
1881 }
1882}
1883.truncate {
1884 overflow: hidden;
1885 text-overflow: ellipsis;
1886 white-space: nowrap;
1887}
1888.overflow-x-auto {
1889 overflow-x: auto;
1890}
1891.overflow-y-auto {
1892 overflow-y: auto;
1893}
1894.collapse {
1895 :where(.menu-horizontal > li:not(.menu-title) > & > ul) {
1896 border-radius: var(--radius-box);
1897 background-color: var(--color-base-100);
1898 --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));
1899 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1900 --tw-shadow-color: var(--color-base-300);
1901 @supports (color: color-mix(in lab, red, red)) {
1902 --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent);
1903 }
1904 }
1905}
1906.\!rounded-full {
1907 border-radius: calc(infinity * 1px) !important;
1908}
1909.rounded-\[5px\] {
1910 border-radius: 5px;
1911}
1912.rounded-\[10px\] {
1913 border-radius: 10px;
1914}
1915.rounded-box {
1916 border-radius: var(--radius-box);
1917}
1918.rounded-box {
1919 border-radius: var(--radius-box);
1920}
1921.rounded-field {
1922 border-radius: var(--radius-field);
1923}
1924.rounded-field {
1925 border-radius: var(--radius-field);
1926}
1927.rounded-full {
1928 border-radius: calc(infinity * 1px);
1929}
1930.border {
1931 border-style: var(--tw-border-style);
1932 border-width: 1px;
1933}
1934.btn-text {
1935 --btn-shadow: "";
1936 color: var(--btn-color, var(--color-neutral));
1937 --btn-bg: "";
1938 --btn-border: "";
1939 --btn-noise: none;
1940 border-width: 0;
1941 outline-color: var(--btn-color, var(--color-neutral));
1942 @media (hover: hover) {
1943 &:hover {
1944 --btn-bg: var(--btn-color, var(--color-neutral));
1945 @supports (color: color-mix(in lab, red, red)) {
1946 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000);
1947 }
1948 }
1949 }
1950 &:focus-visible {
1951 --btn-bg: var(--btn-color, var(--color-neutral));
1952 @supports (color: color-mix(in lab, red, red)) {
1953 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000);
1954 }
1955 }
1956 &.btn-active {
1957 --btn-bg: var(--btn-color, var(--color-neutral));
1958 @supports (color: color-mix(in lab, red, red)) {
1959 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000);
1960 }
1961 }
1962}
1963.btn-soft {
1964 --btn-shadow: "";
1965 color: var(--btn-color, var(--color-neutral));
1966 --btn-bg: var(--btn-color, var(--color-neutral));
1967 @supports (color: color-mix(in lab, red, red)) {
1968 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100));
1969 }
1970 border-width: 0;
1971 --btn-noise: none;
1972 &:focus-visible {
1973 --btn-bg: var(--btn-color, var(--color-neutral));
1974 @supports (color: color-mix(in lab, red, red)) {
1975 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100));
1976 }
1977 }
1978 @media (hover: hover) {
1979 &:hover {
1980 --btn-bg: var(--btn-color, var(--color-neutral));
1981 @supports (color: color-mix(in lab, red, red)) {
1982 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100));
1983 }
1984 }
1985 }
1986 &.btn-active {
1987 --btn-bg: var(--btn-color, var(--color-neutral));
1988 @supports (color: color-mix(in lab, red, red)) {
1989 --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100));
1990 }
1991 }
1992}
1993.table-borderless {
1994 --tw-border-style: none;
1995 border-style: none;
1996 :where(thead, tbody) {
1997 :where(tr:not(:last-child)), :where(tr:first-child:last-child) {
1998 --tw-border-style: none;
1999 border-style: none;
2000 }
2001 }
2002}
2003.\!border-none {
2004 --tw-border-style: none !important;
2005 border-style: none !important;
2006}
2007.border-none {
2008 --tw-border-style: none;
2009 border-style: none;
2010}
2011.input {
2012 &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) {
2013 border-color: var(--color-success);
2014 &:hover {
2015 @media (hover: hover) {
2016 border-color: var(--color-success);
2017 }
2018 }
2019 &:has(:hover):not(:focus, :focus-within) {
2020 border-color: var(--color-success);
2021 }
2022 &:focus, &:focus-within {
2023 --input-color: var(--color-success);
2024 }
2025 }
2026 &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) {
2027 border-color: var(--color-error);
2028 &:hover {
2029 @media (hover: hover) {
2030 border-color: var(--color-error);
2031 }
2032 }
2033 &:has(:hover):not(:focus, :focus-within) {
2034 border-color: var(--color-error);
2035 }
2036 &:focus, &:focus-within {
2037 --input-color: var(--color-error);
2038 }
2039 }
2040 &.is-valid::file-selector-button {
2041 background-color: var(--color-success);
2042 color: var(--color-success-content);
2043 --input-color: var(--color-success);
2044 }
2045 .validate &:valid::file-selector-button {
2046 background-color: var(--color-success);
2047 color: var(--color-success-content);
2048 --input-color: var(--color-success);
2049 }
2050 &.is-invalid::file-selector-button {
2051 background-color: var(--color-error);
2052 color: var(--color-error-content);
2053 --input-color: var(--color-error);
2054 }
2055 .validate &:invalid::file-selector-button {
2056 background-color: var(--color-error);
2057 color: var(--color-error-content);
2058 --input-color: var(--color-error);
2059 }
2060 .input-floating > &.is-valid::file-selector-button {
2061 background-color: var(--color-base-100);
2062 color: var(--color-base-content);
2063 border-inline-end: var(--border) solid var(--color-success);
2064 }
2065 .validate .input-floating > &:valid::file-selector-button {
2066 background-color: var(--color-base-100);
2067 color: var(--color-base-content);
2068 border-inline-end: var(--border) solid var(--color-success);
2069 }
2070 .input-floating > &.is-invalid::file-selector-button {
2071 background-color: var(--color-base-100);
2072 color: var(--color-base-content);
2073 border-inline-end: var(--border) solid var(--color-error);
2074 }
2075 .validate .input-floating > &:invalid::file-selector-button {
2076 background-color: var(--color-base-100);
2077 color: var(--color-base-content);
2078 border-inline-end: var(--border) solid var(--color-error);
2079 }
2080}
2081.is-invalid {
2082 .input&::file-selector-button {
2083 background-color: var(--color-error);
2084 color: var(--color-error-content);
2085 --input-color: var(--color-error);
2086 }
2087 .input-floating > .input&::file-selector-button {
2088 background-color: var(--color-base-100);
2089 color: var(--color-base-content);
2090 border-inline-end: var(--border) solid var(--color-error);
2091 }
2092 .label-text:has(~ &) {
2093 color: var(--color-error);
2094 }
2095 .label-text:has(~ * &) {
2096 color: var(--color-error);
2097 }
2098 :is(&) ~ .helper-text {
2099 color: var(--color-error);
2100 }
2101 *:has(&) ~ .helper-text {
2102 color: var(--color-error);
2103 }
2104 :is(&) ~ .label-text {
2105 color: var(--color-error);
2106 }
2107 :is(&) ~ .label-text * {
2108 color: var(--color-error);
2109 }
2110 :is(&) ~ * >.label-text {
2111 color: var(--color-error);
2112 }
2113 select& + .advance-select-toggle {
2114 --input-color: var(--color-error);
2115 &:focus, &:focus-within {
2116 --input-color: var(--color-error);
2117 }
2118 }
2119 .advance-select-tag:has(> &) {
2120 --input-color: var(--color-error);
2121 &:focus, &:focus-within {
2122 --input-color: var(--color-error);
2123 }
2124 }
2125 .input-floating:has(&) {
2126 &:hover {
2127 @media (hover: hover) {
2128 border-color: var(--color-error);
2129 }
2130 }
2131 .input-floating-label {
2132 color: var(--color-error);
2133 }
2134 &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) {
2135 .input-floating-label {
2136 color: var(--color-error);
2137 }
2138 }
2139 }
2140 .textarea-floating:has(&) {
2141 .textarea-floating-label {
2142 color: var(--color-error);
2143 }
2144 &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) {
2145 .textarea-floating-label {
2146 color: var(--color-error);
2147 }
2148 }
2149 }
2150 .select-floating:has(&) {
2151 .select-floating-label {
2152 color: var(--color-error);
2153 }
2154 &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) {
2155 .select-floating-label {
2156 color: var(--color-error);
2157 }
2158 }
2159 }
2160}
2161.is-valid {
2162 .input&::file-selector-button {
2163 background-color: var(--color-success);
2164 color: var(--color-success-content);
2165 --input-color: var(--color-success);
2166 }
2167 .input-floating > .input&::file-selector-button {
2168 background-color: var(--color-base-100);
2169 color: var(--color-base-content);
2170 border-inline-end: var(--border) solid var(--color-success);
2171 }
2172 .label-text:has(~ &) {
2173 color: var(--color-success);
2174 }
2175 .label-text:has(~ * &) {
2176 color: var(--color-success);
2177 }
2178 :is(&) ~ .helper-text {
2179 color: var(--color-success);
2180 }
2181 *:has(&) ~ .helper-text {
2182 color: var(--color-success);
2183 }
2184 :is(&) ~ .label-text {
2185 color: var(--color-success);
2186 }
2187 :is(&) ~ .label-text * {
2188 color: var(--color-success);
2189 }
2190 :is(&) ~ * >.label-text {
2191 color: var(--color-success);
2192 }
2193 select& + .advance-select-toggle {
2194 --input-color: var(--color-success);
2195 &:focus, &:focus-within {
2196 --input-color: var(--color-success);
2197 }
2198 }
2199 .advance-select-tag:has(> &) {
2200 --input-color: var(--color-success);
2201 &:focus, &:focus-within {
2202 --input-color: var(--color-success);
2203 }
2204 }
2205 .input-floating:has(&) {
2206 &:hover {
2207 @media (hover: hover) {
2208 border-color: var(--color-success);
2209 }
2210 }
2211 .input-floating-label {
2212 color: var(--color-success);
2213 }
2214 &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) {
2215 .input-floating-label {
2216 color: var(--color-success);
2217 }
2218 }
2219 }
2220 .textarea-floating:has(&) {
2221 .textarea-floating-label {
2222 color: var(--color-success);
2223 }
2224 &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) {
2225 .textarea-floating-label {
2226 color: var(--color-success);
2227 }
2228 }
2229 }
2230 .select-floating:has(&) {
2231 .select-floating-label {
2232 color: var(--color-success);
2233 }
2234 &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) {
2235 .select-floating-label {
2236 color: var(--color-success);
2237 }
2238 }
2239 }
2240}
2241.checkbox {
2242 &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) {
2243 --input-color: var(--color-success);
2244 border-color: var(--input-color);
2245 &:checked, &[aria-checked="true"], &:has(> input:checked) {
2246 --input-color: var(--color-success);
2247 }
2248 }
2249 &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) {
2250 --input-color: var(--color-error);
2251 border-color: var(--input-color);
2252 &:checked, &[aria-checked="true"], &:has(> input:checked) {
2253 --input-color: var(--color-error);
2254 }
2255 }
2256 &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) {
2257 color: var(--color-success-content);
2258 }
2259 &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) {
2260 color: var(--color-error-content);
2261 }
2262}
2263.select {
2264 &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) {
2265 border-color: var(--color-success);
2266 &:hover {
2267 @media (hover: hover) {
2268 border-color: var(--color-success);
2269 }
2270 }
2271 &:has(:hover):not(:focus, :focus-within) {
2272 border-color: var(--color-success);
2273 }
2274 &:focus, &:focus-within {
2275 --input-color: var(--color-success);
2276 }
2277 }
2278 &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) {
2279 border-color: var(--color-error);
2280 &:hover {
2281 @media (hover: hover) {
2282 border-color: var(--color-error);
2283 }
2284 }
2285 &:has(:hover):not(:focus, :focus-within) {
2286 border-color: var(--color-error);
2287 }
2288 &:focus, &:focus-within {
2289 --input-color: var(--color-error);
2290 }
2291 }
2292}
2293.textarea {
2294 &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) {
2295 border-color: var(--color-success);
2296 &:hover {
2297 @media (hover: hover) {
2298 border-color: var(--color-success);
2299 }
2300 }
2301 &:has(:hover):not(:focus, :focus-within) {
2302 border-color: var(--color-success);
2303 }
2304 &:focus, &:focus-within {
2305 --input-color: var(--color-success);
2306 }
2307 }
2308 &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) {
2309 border-color: var(--color-error);
2310 &:hover {
2311 @media (hover: hover) {
2312 border-color: var(--color-error);
2313 }
2314 }
2315 &:has(:hover):not(:focus, :focus-within) {
2316 border-color: var(--color-error);
2317 }
2318 &:focus, &:focus-within {
2319 --input-color: var(--color-error);
2320 }
2321 }
2322}
2323.\!border-base-content\/40 {
2324 border-color: var(--color-base-content) !important;
2325 @supports (color: color-mix(in lab, red, red)) {
2326 border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
2327 }
2328}
2329.border-base-content\/20 {
2330 border-color: var(--color-base-content);
2331 @supports (color: color-mix(in lab, red, red)) {
2332 border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
2333 }
2334}
2335.border-base-content\/40 {
2336 border-color: var(--color-base-content);
2337 @supports (color: color-mix(in lab, red, red)) {
2338 border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
2339 }
2340}
2341.progress-primary {
2342 background-color: var(--color-primary);
2343 color: var(--color-primary-content);
2344}
2345.\!bg-base-100 {
2346 background-color: var(--color-base-100) !important;
2347}
2348.bg-\[\#00fff3\] {
2349 background-color: #00fff3;
2350}
2351.bg-\[var\(--color-avatar-background\)\] {
2352 background-color: var(--color-avatar-background);
2353}
2354.bg-base-100 {
2355 background-color: var(--color-base-100);
2356}
2357.bg-base-300\/60 {
2358 background-color: var(--color-base-300);
2359 @supports (color: color-mix(in lab, red, red)) {
2360 background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent);
2361 }
2362}
2363.loading-spinner {
2364 mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
2365}
2366.p-\[15px\] {
2367 padding: 15px;
2368}
2369.pr-\[0px\] {
2370 padding-right: 0px;
2371}
2372.pr-\[15px\] {
2373 padding-right: 15px;
2374}
2375.pl-\[0px\] {
2376 padding-left: 0px;
2377}
2378.text-center {
2379 text-align: center;
2380}
2381.align-bottom {
2382 vertical-align: bottom;
2383}
2384.font-rockford-light {
2385 font-family: var(--font-rockford-light);
2386}
2387.btn-sm {
2388 font-size: var(--text-sm);
2389 line-height: var(--tw-leading, var(--text-sm--line-height));
2390 --btn-p: 0.75rem;
2391 --size: calc(var(--size-field, 0.25rem) * 7.5);
2392}
2393.text-\[12px\] {
2394 font-size: 12px;
2395}
2396.text-\[13px\] {
2397 font-size: 13px;
2398}
2399.text-\[14px\] {
2400 font-size: 14px;
2401}
2402.text-\[15px\] {
2403 font-size: 15px;
2404}
2405.text-\[18px\] {
2406 font-size: 18px;
2407}
2408.text-\[20px\] {
2409 font-size: 20px;
2410}
2411.text-\[24px\] {
2412 font-size: 24px;
2413}
2414.whitespace-nowrap {
2415 white-space: nowrap;
2416}
2417.text-\[\#ff2876\] {
2418 color: #ff2876;
2419}
2420.text-\[var\(--color-genre\)\] {
2421 color: var(--color-genre);
2422}
2423.text-\[var\(--color-text-muted\)\] {
2424 color: var(--color-text-muted);
2425}
2426.text-base-content {
2427 color: var(--color-base-content);
2428}
2429.text-base-content\/50 {
2430 color: var(--color-base-content);
2431 @supports (color: color-mix(in lab, red, red)) {
2432 color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
2433 }
2434}
2435.text-base-content\/80 {
2436 color: var(--color-base-content);
2437 @supports (color: color-mix(in lab, red, red)) {
2438 color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
2439 }
2440}
2441.text-error {
2442 color: var(--color-error);
2443}
2444.text-inherit {
2445 color: inherit;
2446}
2447.text-primary {
2448 color: var(--color-primary);
2449}
2450.text-success {
2451 color: var(--color-success);
2452}
2453.lowercase {
2454 text-transform: lowercase;
2455}
2456.uppercase {
2457 text-transform: uppercase;
2458}
2459.no-underline {
2460 text-decoration-line: none;
2461}
2462.opacity-0 {
2463 opacity: 0%;
2464}
2465.opacity-60 {
2466 opacity: 60%;
2467}
2468.opacity-100 {
2469 opacity: 100%;
2470}
2471.shadow-base-300\/20 {
2472 --tw-shadow-color: var(--color-base-300);
2473 @supports (color: color-mix(in lab, red, red)) {
2474 --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent);
2475 }
2476}
2477.outline {
2478 outline-style: var(--tw-outline-style);
2479 outline-width: 1px;
2480}
2481.filter {
2482 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,);
2483}
2484.carousel-slide {
2485 transition-property: transform, translate, scale, rotate;
2486 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2487 transition-duration: var(--tw-duration, var(--default-transition-duration));
2488 transition-duration: 700ms;
2489 --tw-duration: 700ms;
2490}
2491.transition {
2492 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;
2493 transition-timing-function: var(--tw-ease, ease);
2494 transition-duration: var(--tw-duration, 0s);
2495}
2496.transition-all {
2497 transition-property: all;
2498 transition-timing-function: var(--tw-ease, ease);
2499 transition-duration: var(--tw-duration, 0s);
2500}
2501.duration-300 {
2502 --tw-duration: 300ms;
2503 transition-duration: 300ms;
2504}
2505.duration-500 {
2506 --tw-duration: 500ms;
2507 transition-duration: 500ms;
2508}
2509.btn-primary {
2510 --btn-color: var(--color-primary);
2511 --btn-fg: var(--color-primary-content);
2512}
2513.selected {
2514 .validate select:has(~ * > &) + .advance-select-toggle {
2515 --input-color: var(--color-success);
2516 &:focus, &:focus-within {
2517 --input-color: var(--color-success);
2518 }
2519 }
2520}
2521.hover\:underline {
2522 &:hover {
2523 @media (hover: hover) {
2524 text-decoration-line: underline;
2525 }
2526 }
2527}
2528.focus\:border-primary {
2529 &:focus {
2530 border-color: var(--color-primary);
2531 }
2532}
2533.focus\:outline-1 {
2534 &:focus {
2535 outline-style: var(--tw-outline-style);
2536 outline-width: 1px;
2537 }
2538}
2539.focus\:outline-primary {
2540 &:focus {
2541 outline-color: var(--color-primary);
2542 }
2543}
2544.combo-box-selected\:block {
2545 &.selected {
2546 display: block;
2547 }
2548 .selected & {
2549 display: block;
2550 }
2551}
2552.combo-box-selected\:dropdown-active {
2553 &.selected {
2554 background-color: var(--color-primary);
2555 @supports (color: color-mix(in lab, red, red)) {
2556 background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
2557 }
2558 color: var(--color-primary);
2559 }
2560 .selected & {
2561 background-color: var(--color-primary);
2562 @supports (color: color-mix(in lab, red, red)) {
2563 background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
2564 }
2565 color: var(--color-primary);
2566 }
2567}
2568.file-upload-complete\:progress-success {
2569 &.complete {
2570 background-color: var(--color-success);
2571 color: var(--color-success-content);
2572 }
2573 .complete & {
2574 background-color: var(--color-success);
2575 color: var(--color-success-content);
2576 }
2577}
2578@font-face {
2579 font-family: "RockfordSansLight";
2580 src: url("/public/fonts/RockfordSans-Light.otf") format("opentype");
2581 font-weight: 300;
2582 font-style: normal;
2583}
2584@font-face {
2585 font-family: "RockfordSansRegular";
2586 src: url("/public/fonts/RockfordSans-Regular.otf") format("opentype");
2587 font-weight: 400;
2588 font-style: normal;
2589}
2590@font-face {
2591 font-family: "RockfordSansRegularItalic";
2592 src: url("/public/fonts/RockfordSans-RegularItalic.otf") format("opentype");
2593 font-weight: 400;
2594 font-style: italic;
2595}
2596@font-face {
2597 font-family: "RockfordSansMedium";
2598 src: url("/public/fonts/RockfordSans-Medium.otf") format("opentype");
2599 font-weight: 500;
2600 font-style: normal;
2601}
2602@font-face {
2603 font-family: "RockfordSansBold";
2604 src: url("/public/fonts/RockfordSans-Bold.otf") format("opentype");
2605 font-weight: 700;
2606 font-style: normal;
2607}
2608@font-face {
2609 font-family: "RockfordSansBoldItalic";
2610 src: url("/public/fonts/RockfordSans-BoldItalic.otf") format("opentype");
2611 font-weight: 700;
2612 font-style: italic;
2613}
2614@font-face {
2615 font-family: "RockfordSansExtraBold";
2616 src: url("/public/fonts/RockfordSans-ExtraBold.otf") format("opentype");
2617 font-weight: 800;
2618 font-style: normal;
2619}
2620@font-face {
2621 font-family: "RockfordSansRegular";
2622 src: url("/public/fonts/RockfordSans-Regular.otf") format("opentype");
2623 font-weight: 400;
2624 font-style: normal;
2625}
2626@font-face {
2627 font-family: "RockfordSansBold";
2628 src: url("/public/fonts/RockfordSans-Bold.otf") format("opentype");
2629 font-weight: 700;
2630 font-style: normal;
2631}
2632:root, :host {
2633 --font-rockford-light: "RockfordSansLight";
2634 --color-text-muted: #42576ca6;
2635 --color-genre: #3f03fb;
2636 --color-avatar-background: #f4f0ff;
2637}
2638.dark {
2639 --color-text-muted: rgb(191 174 195 / 65%) !important;
2640 --color-genre: #3f03fb;
2641}
2642body {
2643 font-family: "RockfordSansRegular";
2644}
2645@layer base {
2646 :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
2647 color-scheme: light;
2648 --color-base-100: oklch(100% 0 0);
2649 --color-base-200: oklch(97.8% 0.005 297.73);
2650 --color-base-300: oklch(37.01% 0.0069 297.49);
2651 --color-base-content: oklch(37.57% 0.022 281.8);
2652 --color-primary: oklch(57.59% 0.247 287.24);
2653 --color-primary-content: oklch(96.57% 0.017 289.61);
2654 --color-secondary: oklch(55.79% 0.022 301.91);
2655 --color-secondary-content: oklch(97.64% 0.001 286.38);
2656 --color-accent: oklch(62.31% 0.188 259.81);
2657 --color-accent-content: oklch(97.05% 0.014 254.6);
2658 --color-neutral: oklch(37.57% 0.0222 281.8);
2659 --color-neutral-content: oklch(0.98 0.0013 286.38);
2660 --color-info: oklch(71.48% 0.126 215.22);
2661 --color-info-content: oklch(98.41% 0.019 200.87);
2662 --color-success: oklch(73.11% 0.217 147.04);
2663 --color-success-content: oklch(98.1% 0.014 174.18);
2664 --color-warning: oklch(79.87% 0.164 73.09);
2665 --color-warning-content: oklch(99.34% 0.011 95.16);
2666 --color-error: oklch(65.39% 0.222 25.86);
2667 --color-error-content: oklch(98.76% 0.009 67.73);
2668 --radius-selector: 0.25rem;
2669 --radius-field: 0.375rem;
2670 --radius-box: 0.5rem;
2671 --size-selector: 0.25rem;
2672 --size-field: 0.25rem;
2673 --border: 1px;
2674 --depth: 0;
2675 --noise: 0;
2676 }
2677}
2678@layer base {
2679 @media (prefers-color-scheme: dark) {
2680 :root {
2681 color-scheme: dark;
2682 --color-base-100: oklch(31.23% 0.026 301.24);
2683 --color-base-200: oklch(25.39% 0.025 298.72);
2684 --color-base-300: oklch(23.44% 0.0194 298.63);
2685 --color-base-content: oklch(84.98% 0.014 295.28);
2686 --color-primary: oklch(53.93% 0.271 286.75);
2687 --color-primary-content: oklch(88.22% 0.062 290.17);
2688 --color-secondary: oklch(49.12% 0.021 303.05);
2689 --color-secondary-content: oklch(88.83% 0.007 304.23);
2690 --color-accent: oklch(54.61% 0.215 262.88);
2691 --color-accent-content: oklch(88.23% 0.057 254.13);
2692 --color-neutral: oklch(65.75% 0.022 294.95);
2693 --color-neutral-content: oklch(18.51% 0.017 301.92);
2694 --color-info: oklch(60.89% 0.111 221.72);
2695 --color-info-content: oklch(91.67% 0.077 205.04);
2696 --color-success: oklch(67.35% 0.201 146.84);
2697 --color-success-content: oklch(91.38% 0.069 168.24);
2698 --color-warning: oklch(72.59% 0.152 69.05);
2699 --color-warning-content: oklch(96.07% 0.057 93.2);
2700 --color-error: oklch(59.54% 0.208 26.28);
2701 --color-error-content: oklch(93.4% 0.039 54.86);
2702 --radius-selector: 0.25rem;
2703 --radius-field: 0.375rem;
2704 --radius-box: 0.5rem;
2705 --size-selector: 0.25rem;
2706 --size-field: 0.25rem;
2707 --border: 1px;
2708 --depth: 0;
2709 --noise: 0;
2710 }
2711 }
2712}
2713@layer base {
2714 :root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
2715 color-scheme: light;
2716 --color-base-100: oklch(100% 0 0);
2717 --color-base-200: oklch(97.8% 0.005 297.73);
2718 --color-base-300: oklch(37.01% 0.0069 297.49);
2719 --color-base-content: oklch(37.57% 0.022 281.8);
2720 --color-primary: oklch(57.59% 0.247 287.24);
2721 --color-primary-content: oklch(96.57% 0.017 289.61);
2722 --color-secondary: oklch(55.79% 0.022 301.91);
2723 --color-secondary-content: oklch(97.64% 0.001 286.38);
2724 --color-accent: oklch(62.31% 0.188 259.81);
2725 --color-accent-content: oklch(97.05% 0.014 254.6);
2726 --color-neutral: oklch(37.57% 0.0222 281.8);
2727 --color-neutral-content: oklch(0.98 0.0013 286.38);
2728 --color-info: oklch(71.48% 0.126 215.22);
2729 --color-info-content: oklch(98.41% 0.019 200.87);
2730 --color-success: oklch(73.11% 0.217 147.04);
2731 --color-success-content: oklch(98.1% 0.014 174.18);
2732 --color-warning: oklch(79.87% 0.164 73.09);
2733 --color-warning-content: oklch(99.34% 0.011 95.16);
2734 --color-error: oklch(65.39% 0.222 25.86);
2735 --color-error-content: oklch(98.76% 0.009 67.73);
2736 --radius-selector: 0.25rem;
2737 --radius-field: 0.375rem;
2738 --radius-box: 0.5rem;
2739 --size-selector: 0.25rem;
2740 --size-field: 0.25rem;
2741 --border: 1px;
2742 --depth: 0;
2743 --noise: 0;
2744 }
2745}
2746@layer base {
2747 :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {
2748 color-scheme: dark;
2749 --color-base-100: oklch(31.23% 0.026 301.24);
2750 --color-base-200: oklch(25.39% 0.025 298.72);
2751 --color-base-300: oklch(23.44% 0.0194 298.63);
2752 --color-base-content: oklch(84.98% 0.014 295.28);
2753 --color-primary: oklch(53.93% 0.271 286.75);
2754 --color-primary-content: oklch(88.22% 0.062 290.17);
2755 --color-secondary: oklch(49.12% 0.021 303.05);
2756 --color-secondary-content: oklch(88.83% 0.007 304.23);
2757 --color-accent: oklch(54.61% 0.215 262.88);
2758 --color-accent-content: oklch(88.23% 0.057 254.13);
2759 --color-neutral: oklch(65.75% 0.022 294.95);
2760 --color-neutral-content: oklch(18.51% 0.017 301.92);
2761 --color-info: oklch(60.89% 0.111 221.72);
2762 --color-info-content: oklch(91.67% 0.077 205.04);
2763 --color-success: oklch(67.35% 0.201 146.84);
2764 --color-success-content: oklch(91.38% 0.069 168.24);
2765 --color-warning: oklch(72.59% 0.152 69.05);
2766 --color-warning-content: oklch(96.07% 0.057 93.2);
2767 --color-error: oklch(59.54% 0.208 26.28);
2768 --color-error-content: oklch(93.4% 0.039 54.86);
2769 --radius-selector: 0.25rem;
2770 --radius-field: 0.375rem;
2771 --radius-box: 0.5rem;
2772 --size-selector: 0.25rem;
2773 --size-field: 0.25rem;
2774 --border: 1px;
2775 --depth: 0;
2776 --noise: 0;
2777 }
2778}
2779@layer base {
2780 :root {
2781 --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");
2782 }
2783 .chat {
2784 --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");
2785 }
2786 .tooltip {
2787 --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
2788 }
2789}
2790@layer base {
2791 :root {
2792 scrollbar-color: currentColor #0000;
2793 @supports (color: color-mix(in lab, red, red)) {
2794 scrollbar-color: color-mix(in oklch, currentColor 20%, #0000) #0000;
2795 }
2796 }
2797}
2798@layer base {
2799 @property --radialprogress {
2800 syntax: "<percentage>";
2801 inherits: true;
2802 initial-value: 0%;
2803 }
2804}
2805@layer base {
2806 :root, [data-theme] {
2807 background-color: var(--root-bg, var(--color-base-100));
2808 color: var(--color-base-content);
2809 }
2810}
2811@layer base {
2812 button:not(:disabled), [role="button"]:not(:disabled) {
2813 cursor: pointer;
2814 }
2815}
2816@keyframes radio {
2817 0% {
2818 padding: 5px;
2819 }
2820 50% {
2821 padding: 3px;
2822 }
2823}
2824@keyframes radio-inset {
2825 0% {
2826 padding: 1px;
2827 }
2828 50% {
2829 padding: 4px;
2830 }
2831}
2832@keyframes skeleton {
2833 0% {
2834 background-position: 150%;
2835 }
2836 100% {
2837 background-position: -50%;
2838 }
2839}
2840@keyframes indeterminate-progress {
2841 0% {
2842 background-position-x: -75%;
2843 }
2844 50% {
2845 background-position-x: 125%;
2846 }
2847 100% {
2848 background-position-x: -75%;
2849 }
2850}
2851@keyframes progress-bar-stripes {
2852 0% {
2853 background-position-x: 0.75rem;
2854 }
2855}
2856@property --tw-rotate-x {
2857 syntax: "*";
2858 inherits: false;
2859}
2860@property --tw-rotate-y {
2861 syntax: "*";
2862 inherits: false;
2863}
2864@property --tw-rotate-z {
2865 syntax: "*";
2866 inherits: false;
2867}
2868@property --tw-skew-x {
2869 syntax: "*";
2870 inherits: false;
2871}
2872@property --tw-skew-y {
2873 syntax: "*";
2874 inherits: false;
2875}
2876@property --tw-border-style {
2877 syntax: "*";
2878 inherits: false;
2879 initial-value: solid;
2880}
2881@property --tw-shadow {
2882 syntax: "*";
2883 inherits: false;
2884 initial-value: 0 0 #0000;
2885}
2886@property --tw-shadow-color {
2887 syntax: "*";
2888 inherits: false;
2889}
2890@property --tw-shadow-alpha {
2891 syntax: "<percentage>";
2892 inherits: false;
2893 initial-value: 100%;
2894}
2895@property --tw-inset-shadow {
2896 syntax: "*";
2897 inherits: false;
2898 initial-value: 0 0 #0000;
2899}
2900@property --tw-inset-shadow-color {
2901 syntax: "*";
2902 inherits: false;
2903}
2904@property --tw-inset-shadow-alpha {
2905 syntax: "<percentage>";
2906 inherits: false;
2907 initial-value: 100%;
2908}
2909@property --tw-ring-color {
2910 syntax: "*";
2911 inherits: false;
2912}
2913@property --tw-ring-shadow {
2914 syntax: "*";
2915 inherits: false;
2916 initial-value: 0 0 #0000;
2917}
2918@property --tw-inset-ring-color {
2919 syntax: "*";
2920 inherits: false;
2921}
2922@property --tw-inset-ring-shadow {
2923 syntax: "*";
2924 inherits: false;
2925 initial-value: 0 0 #0000;
2926}
2927@property --tw-ring-inset {
2928 syntax: "*";
2929 inherits: false;
2930}
2931@property --tw-ring-offset-width {
2932 syntax: "<length>";
2933 inherits: false;
2934 initial-value: 0px;
2935}
2936@property --tw-ring-offset-color {
2937 syntax: "*";
2938 inherits: false;
2939 initial-value: #fff;
2940}
2941@property --tw-ring-offset-shadow {
2942 syntax: "*";
2943 inherits: false;
2944 initial-value: 0 0 #0000;
2945}
2946@property --tw-outline-style {
2947 syntax: "*";
2948 inherits: false;
2949 initial-value: solid;
2950}
2951@property --tw-blur {
2952 syntax: "*";
2953 inherits: false;
2954}
2955@property --tw-brightness {
2956 syntax: "*";
2957 inherits: false;
2958}
2959@property --tw-contrast {
2960 syntax: "*";
2961 inherits: false;
2962}
2963@property --tw-grayscale {
2964 syntax: "*";
2965 inherits: false;
2966}
2967@property --tw-hue-rotate {
2968 syntax: "*";
2969 inherits: false;
2970}
2971@property --tw-invert {
2972 syntax: "*";
2973 inherits: false;
2974}
2975@property --tw-opacity {
2976 syntax: "*";
2977 inherits: false;
2978}
2979@property --tw-saturate {
2980 syntax: "*";
2981 inherits: false;
2982}
2983@property --tw-sepia {
2984 syntax: "*";
2985 inherits: false;
2986}
2987@property --tw-drop-shadow {
2988 syntax: "*";
2989 inherits: false;
2990}
2991@property --tw-drop-shadow-color {
2992 syntax: "*";
2993 inherits: false;
2994}
2995@property --tw-drop-shadow-alpha {
2996 syntax: "<percentage>";
2997 inherits: false;
2998 initial-value: 100%;
2999}
3000@property --tw-drop-shadow-size {
3001 syntax: "*";
3002 inherits: false;
3003}
3004@property --tw-duration {
3005 syntax: "*";
3006 inherits: false;
3007}
3008@layer properties {
3009 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3010 *, ::before, ::after, ::backdrop {
3011 --tw-rotate-x: initial;
3012 --tw-rotate-y: initial;
3013 --tw-rotate-z: initial;
3014 --tw-skew-x: initial;
3015 --tw-skew-y: initial;
3016 --tw-border-style: solid;
3017 --tw-shadow: 0 0 #0000;
3018 --tw-shadow-color: initial;
3019 --tw-shadow-alpha: 100%;
3020 --tw-inset-shadow: 0 0 #0000;
3021 --tw-inset-shadow-color: initial;
3022 --tw-inset-shadow-alpha: 100%;
3023 --tw-ring-color: initial;
3024 --tw-ring-shadow: 0 0 #0000;
3025 --tw-inset-ring-color: initial;
3026 --tw-inset-ring-shadow: 0 0 #0000;
3027 --tw-ring-inset: initial;
3028 --tw-ring-offset-width: 0px;
3029 --tw-ring-offset-color: #fff;
3030 --tw-ring-offset-shadow: 0 0 #0000;
3031 --tw-outline-style: solid;
3032 --tw-blur: initial;
3033 --tw-brightness: initial;
3034 --tw-contrast: initial;
3035 --tw-grayscale: initial;
3036 --tw-hue-rotate: initial;
3037 --tw-invert: initial;
3038 --tw-opacity: initial;
3039 --tw-saturate: initial;
3040 --tw-sepia: initial;
3041 --tw-drop-shadow: initial;
3042 --tw-drop-shadow-color: initial;
3043 --tw-drop-shadow-alpha: 100%;
3044 --tw-drop-shadow-size: initial;
3045 --tw-duration: initial;
3046 }
3047 }
3048}