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