| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304 |
- .alert {
- display: flex;
- width: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- gap: 1rem
- }
- .alert > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
- }
- @media (min-width: 768px) {
- .alert {
- flex-direction: row
- }
- .alert > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(0px * var(--tw-space-y-reverse))
- }
- }
- .alert > :where(*) {
- display: flex;
- align-items: center;
- gap: 0.5rem
- }
- .artboard {
- width: 100%
- }
- .avatar {
- position: relative;
- display: inline-flex
- }
- .avatar > div {
- display: block;
- aspect-ratio: 1 / 1;
- overflow: hidden
- }
- .avatar img {
- height: 100%;
- width: 100%;
- object-fit: cover
- }
- .avatar.placeholder > div {
- display: flex;
- align-items: center;
- justify-content: center
- }
- .badge {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
- transition-duration: 200ms;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- height: 1.25rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- width: fit-content;
- padding-left: 0.563rem;
- padding-right: 0.563rem
- }
- .btm-nav {
- position: fixed;
- bottom: 0px;
- left: 0px;
- right: 0px;
- display: flex;
- width: 100%;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- padding-bottom: env(safe-area-inset-bottom)
- }
- .btm-nav>* {
- position: relative;
- display: flex;
- height: 100%;
- flex-basis: 100%;
- cursor: pointer;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 0.25rem
- }
- .breadcrumbs {
- max-width: 100%;
- overflow-x: auto
- }
- .breadcrumbs > ul,.breadcrumbs > ol {
- display: flex;
- align-items: center;
- white-space: nowrap;
- min-height: min-content
- }
- .breadcrumbs > ul > li, .breadcrumbs > ol > li {
- display: flex;
- align-items: center
- }
- .breadcrumbs > ul > li > a, .breadcrumbs > ol > li > a {
- display: flex;
- cursor: pointer;
- align-items: center
- }
- .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover {
- text-decoration-line: underline
- }
- .btn {
- display: inline-flex;
- flex-shrink: 0;
- cursor: pointer;
- user-select: none;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- border-color: transparent;
- text-align: center;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
- transition-duration: 200ms;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- border-radius: var(--rounded-btn, 0.5rem);
- height: 3rem;
- padding-left: 1rem;
- padding-right: 1rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- min-height: 3rem;
- line-height: 1em;
- }
- /* disabled */
- .btn-disabled,
- .btn[disabled] {
- pointer-events: none;
- }
- /* shapes */
- .btn-square {
- height: 3rem;
- width: 3rem;
- padding: 0px;
- }
- .btn-circle {
- height: 3rem;
- width: 3rem;
- border-radius: 9999px;
- padding: 0px;
- }
- /* loading */
- .btn.loading,
- .btn.loading:hover {
- pointer-events: none;
- }
- .btn.loading:before {
- margin-right: 0.5rem;
- height: 1rem;
- width: 1rem;
- border-radius: 9999px;
- border-width: 2px;
- animation: spin 2s linear infinite;
- content: "";
- border-top-color: transparent;
- border-left-color: transparent;
- border-bottom-color: currentColor;
- border-right-color: currentColor;
- }
- @media (prefers-reduced-motion: reduce) {
- .btn.loading:before {
- animation: spin 10s linear infinite;
- }
- }
- @keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
- /* group */
- .btn-group {
- display: inline-flex;
- }
- .btn-group > input[type="radio"].btn {
- appearance: none;
- }
- .btn-group > input[type="radio"].btn:before {
- content: attr(data-title);
- }.card {
- position: relative;
- display: flex;
- flex-direction: column
- }
- .card:focus {
- outline: 2px solid transparent;
- outline-offset: 2px
- }
- .card-body {
- display: flex;
- flex: 1 1 auto;
- flex-direction: column
- }
- .card-body :where(p) {
- flex-grow: 1
- }
- .card-actions {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
- gap: 0.5rem
- }
- .card figure {
- display: flex;
- align-items: center;
- justify-content: center
- }
- .card.image-full {
- display: grid
- }
- .card.image-full:before {
- position: relative;
- content: ""
- }
- .card.image-full:before,
- .card.image-full > * {
- grid-column-start: 1;
- grid-row-start: 1
- }
- .card.image-full > figure img {
- height: 100%;
- object-fit: cover
- }
- .card.image-full > .card-body {
- position: relative
- }
- .carousel {
- display: flex;
- overflow-x: scroll;
- scroll-snap-type: x mandatory;
- scroll-behavior: smooth;
- }
- .carousel-vertical {
- flex-direction: column;
- overflow-y: scroll;
- scroll-snap-type: y mandatory;
- }
- .carousel-item {
- box-sizing: content-box;
- display: flex;
- flex: none;
- scroll-snap-align: start;
- }
- .carousel-center .carousel-item {
- scroll-snap-align: center;
- }
- .carousel-end .carousel-item {
- scroll-snap-align: end;
- }
- .chat {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- column-gap: 0.75rem;
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
- }
- .chat-image {
- grid-row: span 2 / span 2;
- align-self: flex-end;
- }
- .chat-header {
- grid-row-start: 1;
- font-size: 0.875rem;
- line-height: 1.25rem;
- }
- .chat-footer {
- grid-row-start: 3;
- font-size: 0.875rem;
- line-height: 1.25rem;
- }
- .chat-bubble {
- position: relative;
- display: block;
- width: fit-content;
- padding-left: 1rem;
- padding-right: 1rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- max-width: 90%;
- }
- .chat-bubble:before {
- position: absolute;
- bottom: 0px;
- height: 0.75rem;
- width: 0.75rem;
- background-color: inherit;
- content: "";
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- }
- .chat-start {
- place-items: start;
- grid-template-columns: auto 1fr;
- }
- .chat-start .chat-header {
- grid-column-start: 2;
- }
- .chat-start .chat-footer {
- grid-column-start: 2;
- }
- .chat-start .chat-image {
- grid-column-start: 1;
- }
- .chat-start .chat-bubble {
- grid-column-start: 2;
- }
- .chat-start .chat-bubble:before {
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
- }
- [dir="rtl"] .chat-start .chat-bubble:before {
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
- }
- .chat-end {
- place-items: end;
- grid-template-columns: 1fr auto;
- }
- .chat-end .chat-header {
- grid-column-start: 1;
- }
- .chat-end .chat-footer {
- grid-column-start: 1;
- }
- .chat-end .chat-image {
- grid-column-start: 2;
- }
- .chat-end .chat-bubble {
- grid-column-start: 1;
- }
- .chat-end .chat-bubble:before {
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
- }
- [dir="rtl"] .chat-end .chat-bubble:before {
- -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
- mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
- }
- .checkbox {
- flex-shrink: 0
- }
- .collapse.collapse {
- visibility: visible;
- }
- .collapse {
- position: relative;
- display: grid;
- overflow: hidden;
- grid-template-rows: 1fr auto;
- }
- .collapse-title,
- .collapse > input[type="checkbox"],
- .collapse-content {
- grid-column-start: 1;
- grid-row-start: 1;
- }
- .collapse > input[type="checkbox"] {
- appearance: none;
- opacity: 0;
- }
- .collapse-content {
- grid-row-start: 2;
- overflow: hidden;
- max-height: 0px;
- }
- .collapse-open .collapse-content,
- .collapse:focus:not(.collapse-close) .collapse-content,
- .collapse:not(.collapse-close)
- input[type="checkbox"]:checked
- ~ .collapse-content {
- max-height: none;
- }
- :root .countdown {
- line-height: 1em;
- }
- .countdown {
- display: inline-flex;
- }
- .countdown > * {
- height: 1em;
- display: inline-block;
- overflow-y: hidden;
- }
- .countdown > *:before {
- position: relative;
- 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";
- white-space: pre;
- top: calc(var(--value) * -1em);
- }
- .divider {
- display: flex;
- flex-direction: row;
- align-items: center;
- align-self: stretch;
- }
- .divider:before,
- .divider:after {
- content: "";
- flex-grow: 1;
- height: 0.125rem;
- width: 100%;
- }
- .drawer {
- display: grid;
- width: 100%;
- overflow: hidden;
- height: 100vh;
- height: 100dvh;
- }
- .drawer.drawer-end {
- direction: rtl;
- }
- .drawer.drawer-end > * {
- direction: ltr;
- }
- .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 100%;
- 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));
- justify-self: end;
- }
- .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 0px;
- 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));
- }
- :where(.drawer-toggle ~ .drawer-content) {
- height: inherit;
- }
- .drawer-toggle {
- position: absolute;
- height: 0px;
- width: 0px;
- appearance: none;
- opacity: 0;
- }
- .drawer-toggle ~ .drawer-content {
- z-index: 0;
- grid-column-start: 1;
- grid-row-start: 1;
- overflow-y: auto;
- }
- .drawer-toggle ~ .drawer-side {
- grid-column-start: 1;
- grid-row-start: 1;
- display: grid;
- max-height: 100vh;
- overflow-x: hidden;
- }
- .drawer-toggle ~ .drawer-side > .drawer-overlay {
- visibility: hidden;
- grid-column-start: 1;
- grid-row-start: 1;
- opacity: 0;
- }
- .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
- z-index: 10;
- grid-column-start: 1;
- grid-row-start: 1;
- --tw-translate-x: -100%;
- 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));
- }
- .drawer-toggle:checked ~ .drawer-side {
- isolation: isolate;
- overflow-y: auto;
- overflow-x: hidden;
- }
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
- visibility: visible;
- }
- .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 0px;
- 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));
- }
- [dir="rtl"] .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 100%;
- 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));
- }
- [dir="rtl"] .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 0px;
- 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));
- }
- [dir="rtl"] .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: -100%;
- }
- [dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 0px;
- }
- [dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
- --tw-translate-x: 0.5rem;
- }
- @media (min-width: 1024px) {
- .drawer-mobile {
- grid-auto-columns: max-content auto;
- }
- .drawer-mobile > .drawer-toggle ~ .drawer-content {
- height: auto;
- }
- @media (min-width: 1024px) {
- .drawer-mobile > .drawer-toggle ~ .drawer-content {
- grid-column-start: 2;
- }
- }
- .drawer-mobile > .drawer-toggle ~ .drawer-side {
- overflow-y: auto;
- }
- @media (min-width: 1024px) {
- .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay {
- visibility: visible;
- }
- .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 0px;
- 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));
- }
- }
- .drawer-mobile.drawer-end {
- grid-auto-columns: auto max-content;
- direction: ltr;
- }
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
- height: auto;
- }
- @media (min-width: 1024px) {
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
- grid-column-start: 1;
- }
- }
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
- overflow-y: auto;
- }
- @media (min-width: 1024px) {
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
- grid-column-start: 2;
- }
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay {
- visibility: visible;
- }
- .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
- --tw-translate-x: 0px;
- 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));
- }
- }
- }
- .dropdown {
- position: relative;
- display: inline-block
- }
- .dropdown > *:focus {
- outline: 2px solid transparent;
- outline-offset: 2px
- }
- .dropdown .dropdown-content {
- visibility: hidden;
- position: absolute;
- z-index: 50;
- opacity: 0
- }
- .dropdown-end .dropdown-content {
- right: 0px
- }
- .dropdown-left .dropdown-content {
- top: 0px;
- right: 100%;
- bottom: auto
- }
- .dropdown-right .dropdown-content {
- left: 100%;
- top: 0px;
- bottom: auto
- }
- .dropdown-bottom .dropdown-content {
- bottom: auto;
- top: 100%
- }
- .dropdown-top .dropdown-content {
- bottom: 100%;
- top: auto
- }
- .dropdown-end.dropdown-right .dropdown-content {
- bottom: 0px;
- top: auto
- }
- .dropdown-end.dropdown-left .dropdown-content {
- bottom: 0px;
- top: auto
- }
- .dropdown.dropdown-open .dropdown-content,
- .dropdown.dropdown-hover:hover .dropdown-content,
- .dropdown:not(.dropdown-hover):focus .dropdown-content,
- .dropdown:not(.dropdown-hover):focus-within .dropdown-content {
- visibility: visible;
- opacity: 1
- }
- .file-input {
- height: 3rem;
- flex-shrink: 1;
- padding-right: 1rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- line-height: 2
- }
- .file-input::file-selector-button {
- margin-right: 1rem;
- display: inline-flex;
- height: 2.875rem;
- min-height: 2.875rem;
- flex-shrink: 0;
- cursor: pointer;
- user-select: none;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- padding-left: 1rem;
- padding-right: 1rem;
- text-align: center;
- font-size: 0.875rem;
- line-height: 1.25rem;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
- transition-duration: 200ms;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- line-height: 1em
- }
- .footer {
- display: grid;
- width: 100%;
- grid-auto-flow: row;
- place-items: start;
- }
- .footer > * {
- display: grid;
- place-items: start;
- }
- .footer-center {
- place-items: center;
- text-align: center;
- }
- .footer-center > * {
- place-items: center;
- }
- @media (min-width: 48rem) {
- .footer {
- grid-auto-flow: column;
- }
- .footer-center {
- grid-auto-flow: row dense;
- }
- }
- .form-control {
- display: flex;
- flex-direction: column
- }
- .label {
- display: flex;
- user-select: none;
- align-items: center;
- justify-content: space-between
- }
- .hero {
- display: grid;
- width: 100%;
- place-items: center;
- background-size: cover;
- background-position: center
- }
- .hero > * {
- grid-column-start: 1;
- grid-row-start: 1
- }
- .hero-overlay {
- grid-column-start: 1;
- grid-row-start: 1;
- height: 100%;
- width: 100%
- }
- .hero-content {
- z-index: 0;
- display: flex;
- align-items: center;
- justify-content: center
- }
- .indicator {
- position: relative;
- display: inline-flex;
- width: max-content;
- }
- .indicator :where(.indicator-item) {
- z-index: 1;
- position: absolute;
- 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));
- white-space: nowrap;
- }
- .input {
- flex-shrink: 1;
- height: 3rem;
- padding-left: 1rem;
- padding-right: 1rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- line-height: 2;
- }
- .input-group {
- display: flex;
- width: 100%;
- align-items: stretch;
- }
- .input-group > .input {
- isolation: isolate;
- }
- .input-group > *,
- .input-group > .input,
- .input-group > .textarea,
- .input-group > .select {
- border-radius: 0px;
- }
- .input-group-md {
- font-size: 0.875rem;
- line-height: 1.25rem;
- line-height: 2;
- }
- .input-group-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
- line-height: 2;
- }
- .input-group-sm {
- font-size: 0.875rem;
- line-height: 2rem;
- }
- .input-group-xs {
- font-size: 0.75rem;
- line-height: 1rem;
- line-height: 1.625;
- }
- .input-group :where(span) {
- display: flex;
- align-items: center;
- --tw-bg-opacity: 1;
- background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
- padding-left: 1rem;
- padding-right: 1rem;
- }
- .input-group > :first-child {
- border-top-left-radius: var(--rounded-btn, 0.5rem);
- border-top-right-radius: 0;
- border-bottom-left-radius: var(--rounded-btn, 0.5rem);
- border-bottom-right-radius: 0;
- }
- .input-group > :last-child {
- border-top-left-radius: 0;
- border-top-right-radius: var(--rounded-btn, 0.5rem);
- border-bottom-left-radius: 0;
- border-bottom-right-radius: var(--rounded-btn, 0.5rem);
- }
- .input-group-vertical {
- flex-direction: column;
- }
- .input-group-vertical :first-child {
- border-top-left-radius: var(--rounded-btn, 0.5rem);
- border-top-right-radius: var(--rounded-btn, 0.5rem);
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .input-group-vertical :last-child {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-left-radius: var(--rounded-btn, 0.5rem);
- border-bottom-right-radius: var(--rounded-btn, 0.5rem);
- }
- .kbd {
- display: inline-flex;
- align-items: center;
- justify-content: center
- }
- .link {
- cursor: pointer;
- text-decoration-line: underline
- }
- .link-hover {
- text-decoration-line: none
- }
- .link-hover:hover {
- text-decoration-line: underline
- }
- .mask {
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- }
- .mask-half-1 {
- -webkit-mask-size: 200%;
- mask-size: 200%;
- -webkit-mask-position: left;
- mask-position: left;
- }
- .mask-half-2 {
- -webkit-mask-size: 200%;
- mask-size: 200%;
- -webkit-mask-position: right;
- mask-position: right;
- }
- .menu {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap
- }
- .menu.horizontal {
- display: inline-flex;
- flex-direction: row
- }
- .menu.horizontal :where(li) {
- flex-direction: row
- }
- :where(.menu li) {
- position: relative;
- display: flex;
- flex-shrink: 0;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: stretch
- }
- .menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
- display: flex
- }
- .menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
- cursor: pointer;
- user-select: none;
- align-items: center;
- outline: 2px solid transparent;
- outline-offset: 2px
- }
- .menu > :where(li > *:not(ul):focus) {
- outline: 2px solid transparent;
- outline-offset: 2px
- }
- .menu > :where(li.disabled > *:not(ul):focus) {
- cursor: auto
- }
- .menu > :where(li) :where(ul) {
- display: flex;
- flex-direction: column;
- align-items: stretch
- }
- .menu > :where(li) > :where(ul) {
- position: absolute;
- display: none;
- top: initial;
- left: 100%
- }
- .menu > :where(li:hover) > :where(ul) {
- display: flex
- }
- .menu > :where(li:focus) > :where(ul) {
- display: flex
- }
- .mockup-code {
- position: relative;
- overflow: hidden;
- overflow-x: auto;
- }
- .mockup-code pre[data-prefix]:before {
- content: attr(data-prefix);
- display: inline-block;
- text-align: right;
- }
- .mockup-window {
- position: relative;
- overflow: hidden;
- overflow-x: auto;
- }
- .mockup-window pre[data-prefix]:before {
- content: attr(data-prefix);
- display: inline-block;
- text-align: right;
- }
- .modal {
- pointer-events: none;
- visibility: hidden;
- position: fixed;
- inset: 0px;
- display: flex;
- justify-content: center;
- opacity: 0;
- z-index: 999;
- }
- :where(.modal) {
- align-items: center;
- }
- .modal-box {
- max-height: calc(100vh - 5em);
- }
- .modal-open,
- .modal:target,
- .modal-toggle:checked + .modal {
- pointer-events: auto;
- visibility: visible;
- opacity: 1;
- }
- .modal-action {
- display: flex;
- }
- .modal-toggle {
- position: fixed;
- height: 0px;
- width: 0px;
- appearance: none;
- opacity: 0;
- }
- .navbar {
- display: flex;
- align-items: center;
- }
- :where(.navbar > *) {
- display: inline-flex;
- align-items: center;
- }
- .navbar-start {
- width: 50%;
- justify-content: flex-start;
- }
- .navbar-center {
- flex-shrink: 0;
- }
- .navbar-end {
- width: 50%;
- justify-content: flex-end;
- }
- .progress {
- position: relative;
- width: 100%;
- appearance: none;
- overflow: hidden
- }
- .radial-progress {
- position: relative;
- display: inline-grid;
- height: var(--size);
- width: var(--size);
- place-content: center;
- border-radius: 9999px;
- background-color: transparent;
- vertical-align: middle;
- box-sizing: content-box;
- }
- .radial-progress::-moz-progress-bar {
- appearance: none;
- background-color: transparent;
- }
- .radial-progress::-webkit-progress-value {
- appearance: none;
- background-color: transparent;
- }
- .radial-progress::-webkit-progress-bar {
- appearance: none;
- background-color: transparent;
- }
- .radial-progress:before,
- .radial-progress:after {
- position: absolute;
- border-radius: 9999px;
- content: "";
- }
- .radial-progress:before {
- inset: 0px;
- background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
- -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
- mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
- }
- .radial-progress:after {
- inset: calc(50% - var(--thickness) / 2);
- transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
- }
- .radio {
- flex-shrink: 0
- }
- .range {
- height: 1.5rem;
- width: 100%;
- cursor: pointer;
- }
- .range:focus {
- outline: none;
- }
- .rating {
- position: relative;
- display: inline-flex
- }
- .rating :where(input) {
- cursor: pointer;
- border-radius: 0px
- }
- .select {
- display: inline-flex;
- flex-shrink: 0;
- cursor: pointer;
- user-select: none;
- appearance: none;
- height: 3rem;
- padding-left: 1rem;
- padding-right: 2.5rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- line-height: 2;
- min-height: 3rem
- /* disabled */
- /* &-disabled,
- &[disabled] {
- @apply pointer-events-none;
- } */
- }
- /* multiple */
- .select[multiple] {
- height: auto
- }
- .stack {
- display: inline-grid;
- }
- .stack > * {
- grid-column-start: 1;
- grid-row-start: 1;
- transform: translateY(10%) scale(0.9);
- z-index: 1;
- }
- .stack > *:nth-child(2) {
- transform: translateY(5%) scale(0.95);
- z-index: 2;
- }
- .stack > *:nth-child(1) {
- transform: translateY(0) scale(1);
- z-index: 3;
- }
- .stats {
- display: inline-grid
- }
- :where(.stats) {
- grid-auto-flow: column
- }
- .stat {
- display: inline-grid;
- width: 100%;
- grid-template-columns: repeat(1, 1fr)
- }
- .stat-figure {
- grid-column-start: 2;
- grid-row: span 3 / span 3;
- grid-row-start: 1;
- place-self: center;
- justify-self: end
- }
- .stat-title {
- grid-column-start: 1;
- white-space: nowrap
- }
- .stat-value {
- grid-column-start: 1;
- white-space: nowrap
- }
- .stat-desc {
- grid-column-start: 1;
- white-space: nowrap
- }
- .stat-actions {
- grid-column-start: 1;
- white-space: nowrap
- }
- /* .stats.grid-flow-row {
- @apply auto-rows-fr;
- } */
- .steps {
- display: inline-grid;
- grid-auto-flow: column;
- overflow: hidden;
- overflow-x: auto;
- counter-reset: step;
- grid-auto-columns: 1fr
- }
- .steps .step {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr));
- grid-template-rows: repeat(2, minmax(0, 1fr));
- place-items: center;
- text-align: center
- }
- .swap {
- position: relative;
- display: inline-grid;
- user-select: none;
- place-content: center
- }
- .swap > * {
- grid-column-start: 1;
- grid-row-start: 1
- }
- .swap input {
- appearance: none
- }
- .swap .swap-on,
- .swap .swap-indeterminate,
- .swap input:indeterminate ~ .swap-on {
- opacity: 0
- }
- .swap input:checked ~ .swap-off,
- .swap.swap-active .swap-off,
- .swap input:indeterminate ~ .swap-off {
- opacity: 0
- }
- .swap input:checked ~ .swap-on,
- .swap-active .swap-on,
- .swap input:indeterminate ~ .swap-indeterminate {
- opacity: 1
- }
- .tabs {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-end
- }
- .tab {
- position: relative;
- display: inline-flex;
- cursor: pointer;
- user-select: none;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- text-align: center;
- height: 2rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- line-height: 2;
- --tab-padding: 1rem
- }
- .table {
- position: relative;
- }
- .table th:first-child {
- /* because safari */
- position: sticky;
- left: 0px;
- z-index: 11;
- }
- .textarea {
- flex-shrink: 1;
- min-height: 3rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- padding-left: 1rem;
- padding-right: 1rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- line-height: 2
- }
- .toast {
- position: fixed;
- display: flex;
- min-width: fit-content;
- flex-direction: column
- }
- .toggle {
- flex-shrink: 0
- }
- .tooltip {
- position: relative;
- display: inline-block;
- --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
- }
- .tooltip:before {
- position: absolute;
- pointer-events: none;
- z-index: 1;
- content: var(--tw-content);
- --tw-content: attr(data-tip);
- }
- .tooltip:before, .tooltip-top:before {
- transform: translateX(-50%);
- top: auto;
- left: 50%;
- right: auto;
- bottom: var(--tooltip-offset);
- }
- .tooltip-bottom:before {
- transform: translateX(-50%);
- top: var(--tooltip-offset);
- left: 50%;
- right: auto;
- bottom: auto;
- }
- .tooltip-left:before {
- transform: translateY(-50%);
- top: 50%;
- left: auto;
- right: var(--tooltip-offset);
- bottom: auto;
- }
- .tooltip-right:before {
- transform: translateY(-50%);
- top: 50%;
- left: var(--tooltip-offset);
- right: auto;
- bottom: auto;
- }
|