UNPKG

27.2 kBCSSView Raw
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 /* disabled */
139
140 .btn-disabled,
141 .btn[disabled] {
142 pointer-events: none;
143}
144
145 /* shapes */
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 /* loading */
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/* group */
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 /* disabled */
972 /* &-disabled,
973 &[disabled] {
974 @apply pointer-events-none;
975 } */
976}
977 /* multiple */
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/* .stats.grid-flow-row {
1033 @apply auto-rows-fr;
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 /* because safari */
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 }