diff --git a/assets/layers/questions/questions.json b/assets/layers/questions/questions.json index 994ad6a5b..ae81c772d 100644 --- a/assets/layers/questions/questions.json +++ b/assets/layers/questions/questions.json @@ -1626,41 +1626,6 @@ } ] }, - { - "id": "last_edit", - "labels": [ - "added_by_default" - ], - "description": "Gives some metainfo about the last edit and who did edit it - rendering only", - "condition": { - "and": [ - "_last_edit:contributor~*", - "_last_edit:changeset~*" - ] - }, - "metacondition": { - "or": [ - "__featureSwitchIsTesting=true", - "__featureSwitchIsDebugging=true", - "mapcomplete-show_debug=yes", - "_csCount>=10" - ] - }, - "render": { - "special": { - "type": "link", - "href": "{_backend}/changeset/{_last_edit:changeset}", - "text": { - "en": "Last edited on {_last_edit:timestamp} by {_last_edit:contributor}", - "nl": "Laatst gewijzigd op {_last_edit:timestamp} door {_last_edit:contributor} ", - "de": "Zuletzt bearbeitet am {_last_edit:timestamp} von {_last_edit:contributor}", - "ca": "Darrera edició el {_last_edit:timestamp} per {_last_edit:contributor}", - "cs": "Naposledy upravil {_last_edit:timestamp} {_last_edit:contributor}" - }, - "class": "subtle font-small" - } - } - }, { "id": "all_tags", "description": "Shows a table with all the tags of the feature", @@ -2671,6 +2636,24 @@ "*": "{linked_data_from_website()}" } }, + { + "id": "share", + "labels": [ + "added_by_default" + ], + "metacondition": "_supports_sharing=yes", + "render": { + "special": { + "type": "share_link", + "text": { + "en": "Share this location", + "nl": "Deel deze locatie", + "de": "Standort teilen" + } + } + } + }, + { "id": "qr_code", "labels": [ @@ -2690,19 +2673,37 @@ } }, { - "id": "share", + "id": "last_edit", "labels": [ "added_by_default" ], - "metacondition": "_supports_sharing=yes", + "description": "Gives some metainfo about the last edit and who did edit it - rendering only", + "condition": { + "and": [ + "_last_edit:contributor~*", + "_last_edit:changeset~*" + ] + }, + "metacondition": { + "or": [ + "__featureSwitchIsTesting=true", + "__featureSwitchIsDebugging=true", + "mapcomplete-show_debug=yes", + "_csCount>=10" + ] + }, "render": { "special": { - "type": "share_link", + "type": "link", + "href": "{_backend}/changeset/{_last_edit:changeset}", "text": { - "en": "Share this location", - "nl": "Deel deze locatie", - "de": "Standort teilen" - } + "en": "Last edited on {_last_edit:timestamp} by {_last_edit:contributor}", + "nl": "Laatst gewijzigd op {_last_edit:timestamp} door {_last_edit:contributor} ", + "de": "Zuletzt bearbeitet am {_last_edit:timestamp} von {_last_edit:contributor}", + "ca": "Darrera edició el {_last_edit:timestamp} per {_last_edit:contributor}", + "cs": "Naposledy upravil {_last_edit:timestamp} {_last_edit:contributor}" + }, + "class": "subtle font-small" } } } diff --git a/assets/svg/download.svg b/assets/svg/download.svg deleted file mode 100644 index 1f7a0abd0..000000000 --- a/assets/svg/download.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/svg/download.svg.license b/assets/svg/download.svg.license deleted file mode 100644 index 87be97fae..000000000 --- a/assets/svg/download.svg.license +++ /dev/null @@ -1,2 +0,0 @@ -SPDX-FileCopyrightText: Engr.eponce -SPDX-License-Identifier: CC-BY-SA-4.0 \ No newline at end of file diff --git a/assets/svg/share.svg b/assets/svg/share.svg deleted file mode 100644 index d8410009d..000000000 --- a/assets/svg/share.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - diff --git a/assets/svg/share.svg.license b/assets/svg/share.svg.license deleted file mode 100644 index 22b8ca7a5..000000000 --- a/assets/svg/share.svg.license +++ /dev/null @@ -1,2 +0,0 @@ -SPDX-FileCopyrightText: -SPDX-License-Identifier: LicenseRef-TRIVIAL \ No newline at end of file diff --git a/assets/svg/up.svg b/assets/svg/up.svg deleted file mode 100644 index ed57d9b96..000000000 --- a/assets/svg/up.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/assets/svg/up.svg.license b/assets/svg/up.svg.license deleted file mode 100644 index 22b8ca7a5..000000000 --- a/assets/svg/up.svg.license +++ /dev/null @@ -1,2 +0,0 @@ -SPDX-FileCopyrightText: -SPDX-License-Identifier: LicenseRef-TRIVIAL \ No newline at end of file diff --git a/assets/svg/upload.svg b/assets/svg/upload.svg deleted file mode 100644 index 6342032c9..000000000 --- a/assets/svg/upload.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/assets/svg/upload.svg.license b/assets/svg/upload.svg.license deleted file mode 100644 index ed0288300..000000000 --- a/assets/svg/upload.svg.license +++ /dev/null @@ -1,2 +0,0 @@ -SPDX-FileCopyrightText: Pieter Vander Vennet -SPDX-License-Identifier: CC0-1.0 \ No newline at end of file diff --git a/public/assets/source-sans-pro.regular.ttf b/public/assets/source-sans-pro.regular.ttf new file mode 100644 index 000000000..ffe27865a Binary files /dev/null and b/public/assets/source-sans-pro.regular.ttf differ diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 8766ca84d..59e7e9f13 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -52,8 +52,7 @@ html { /* 3 */ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ - -webkit-font-feature-settings: normal; - font-feature-settings: normal; + font-feature-settings: normal; /* 5 */ } @@ -359,13 +358,6 @@ textarea { 2. Set the default placeholder color to the user's configured gray 400 color. */ -input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - input::placeholder, textarea::placeholder { opacity: 1; @@ -474,53 +466,6 @@ video { --tw-backdrop-sepia: ; } -::-webkit-backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; @@ -702,6 +647,13 @@ video { position: sticky; } +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + .-inset-1 { top: -0.25rem; right: -0.25rem; @@ -709,6 +661,16 @@ video { left: -0.25rem; } +.inset-y-0 { + top: 0px; + bottom: 0px; +} + +.inset-x-0 { + left: 0px; + right: 0px; +} + .left-24 { left: 6rem; } @@ -761,6 +723,86 @@ video { left: 25%; } +.top-6 { + top: 1.5rem; +} + +.bottom-4 { + bottom: 1rem; +} + +.bottom-5 { + bottom: 1.25rem; +} + +.left-1\/2 { + left: 50%; +} + +.-left-\[17px\] { + left: -17px; +} + +.top-\[72px\] { + top: 72px; +} + +.top-\[124px\] { + top: 124px; +} + +.top-\[178px\] { + top: 178px; +} + +.-right-\[17px\] { + right: -17px; +} + +.top-\[142px\] { + top: 142px; +} + +.-right-\[16px\] { + right: -16px; +} + +.top-\[40px\] { + top: 40px; +} + +.top-\[88px\] { + top: 88px; +} + +.top-3 { + top: 0.75rem; +} + +.top-1 { + top: 0.25rem; +} + +.top-2 { + top: 0.5rem; +} + +.top-\[calc\(100\%\+1rem\)\] { + top: calc(100% + 1rem); +} + +.top-1\/2 { + top: 50%; +} + +.bottom-6 { + bottom: 1.5rem; +} + +.top-5 { + top: 1.25rem; +} + .isolate { isolation: isolate; } @@ -773,6 +815,30 @@ video { z-index: -10; } +.z-10 { + z-index: 10; +} + +.z-50 { + z-index: 50; +} + +.z-30 { + z-index: 30; +} + +.z-0 { + z-index: 0; +} + +.z-40 { + z-index: 40; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + .float-right { float: right; } @@ -781,6 +847,10 @@ video { float: left; } +.m-8 { + margin: 2rem; +} + .m-4 { margin: 1rem; } @@ -793,10 +863,6 @@ video { margin: 0px; } -.m-8 { - margin: 2rem; -} - .m-2 { margin: 0.5rem; } @@ -890,6 +956,41 @@ video { margin-right: 0.25rem; } +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + +.-my-1\.5 { + margin-top: -0.375rem; + margin-bottom: -0.375rem; +} + +.-my-1 { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.-mx-1\.5 { + margin-left: -0.375rem; + margin-right: -0.375rem; +} + +.-mx-1 { + margin-left: -0.25rem; + margin-right: -0.25rem; +} + +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + .mx-12 { margin-left: 3rem; margin-right: 3rem; @@ -980,6 +1081,50 @@ video { margin-top: 3rem; } +.mb-3 { + margin-bottom: 0.75rem; +} + +.mb-5 { + margin-bottom: 1.25rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mt-6 { + margin-top: 1.5rem; +} + +.mb-2\.5 { + margin-bottom: 0.625rem; +} + +.mb-10 { + margin-bottom: 2.5rem; +} + +.mb-px { + margin-bottom: 1px; +} + +.-mt-px { + margin-top: -1px; +} + +.-mb-px { + margin-bottom: -1px; +} + +.mt-1\.5 { + margin-top: 0.375rem; +} + .mr-12 { margin-right: 3rem; } @@ -1076,18 +1221,22 @@ video { display: none; } +.\!hidden { + display: none !important; +} + .h-24 { height: 6rem; } -.h-full { - height: 100%; -} - .h-screen { height: 100vh; } +.h-full { + height: 100%; +} + .h-fit { height: -webkit-fit-content; height: -moz-fit-content; @@ -1111,6 +1260,10 @@ video { height: 3rem; } +.h-4 { + height: 1rem; +} + .h-6 { height: 1.5rem; } @@ -1119,10 +1272,6 @@ video { height: 0px; } -.h-4 { - height: 1rem; -} - .h-1\/2 { height: 50%; } @@ -1163,20 +1312,140 @@ video { height: 20rem; } -.h-36 { - height: 9rem; -} - -.h-56 { - height: 14rem; +.h-10 { + height: 2.5rem; } .h-20 { height: 5rem; } -.h-10 { - height: 2.5rem; +.h-36 { + height: 9rem; +} + +.h-96 { + height: 24rem; +} + +.h-56 { + height: 14rem; +} + +.h-\[600px\] { + height: 600px; +} + +.h-\[572px\] { + height: 572px; +} + +.h-\[18px\] { + height: 18px; +} + +.h-\[32px\] { + height: 32px; +} + +.h-\[46px\] { + height: 46px; +} + +.h-\[64px\] { + height: 64px; +} + +.h-\[140px\] { + height: 140px; +} + +.h-\[24px\] { + height: 24px; +} + +.h-\[55px\] { + height: 55px; +} + +.h-\[172px\] { + height: 172px; +} + +.h-\[156px\] { + height: 156px; +} + +.h-\[17px\] { + height: 17px; +} + +.h-\[5px\] { + height: 5px; +} + +.h-\[63px\] { + height: 63px; +} + +.h-\[193px\] { + height: 193px; +} + +.h-\[41px\] { + height: 41px; +} + +.h-\[213px\] { + height: 213px; +} + +.h-\[454px\] { + height: 454px; +} + +.h-\[426px\] { + height: 426px; +} + +.h-px { + height: 1px; +} + +.h-1 { + height: 0.25rem; +} + +.h-2 { + height: 0.5rem; +} + +.h-3\.5 { + height: 0.875rem; +} + +.h-auto { + height: auto; +} + +.h-2\.5 { + height: 0.625rem; +} + +.h-14 { + height: 3.5rem; +} + +.h-72 { + height: 18rem; +} + +.h-\[52px\] { + height: 52px; +} + +.h-\[10px\] { + height: 10px; } .max-h-12 { @@ -1191,10 +1460,26 @@ video { max-height: 16rem; } +.max-h-full { + max-height: 100%; +} + .max-h-60 { max-height: 15rem; } +.min-h-\[2\.4rem\] { + min-height: 2.4rem; +} + +.min-h-\[2\.7rem\] { + min-height: 2.7rem; +} + +.min-h-\[3\.2rem\] { + min-height: 3.2rem; +} + .w-full { width: 100%; } @@ -1215,6 +1500,10 @@ video { width: 3rem; } +.w-4 { + width: 1rem; +} + .w-6 { width: 1.5rem; } @@ -1237,10 +1526,6 @@ video { width: 0px; } -.w-4 { - width: 1rem; -} - .w-3 { width: 0.75rem; } @@ -1279,14 +1564,126 @@ video { width: min-content; } +.w-10 { + width: 2.5rem; +} + +.w-20 { + width: 5rem; +} + +.w-36 { + width: 9rem; +} + +.w-\[calc\(100\%-2rem\)\] { + width: calc(100% - 2rem); +} + +.\!w-full { + width: 100% !important; +} + +.w-\[300px\] { + width: 300px; +} + +.w-\[272px\] { + width: 272px; +} + +.w-\[148px\] { + width: 148px; +} + +.w-\[3px\] { + width: 3px; +} + +.w-\[56px\] { + width: 56px; +} + +.w-\[188px\] { + width: 188px; +} + +.w-\[6px\] { + width: 6px; +} + +.w-\[208px\] { + width: 208px; +} + +.w-80 { + width: 20rem; +} + +.w-\[1px\] { + width: 1px; +} + +.w-3\.5 { + width: 0.875rem; +} + +.w-9 { + width: 2.25rem; +} + +.w-14 { + width: 3.5rem; +} + +.w-2 { + width: 0.5rem; +} + +.w-2\.5 { + width: 0.625rem; +} + +.w-2\/4 { + width: 50%; +} + +.w-1 { + width: 0.25rem; +} + .w-48 { width: 12rem; } -.w-5\/6 { +.w-9\/12 { + width: 75%; +} + +.w-10\/12 { width: 83.333333%; } +.w-11\/12 { + width: 91.666667%; +} + +.w-8\/12 { + width: 66.666667%; +} + +.w-\[52px\] { + width: 52px; +} + +.w-\[10px\] { + width: 10px; +} + +.min-w-full { + min-width: 100%; +} + .max-w-full { max-width: 100%; } @@ -1297,14 +1694,90 @@ video { max-width: fit-content; } +.max-w-lg { + max-width: 32rem; +} + +.max-w-xs { + max-width: 20rem; +} + +.max-w-sm { + max-width: 24rem; +} + +.max-w-xl { + max-width: 36rem; +} + +.max-w-2xl { + max-width: 42rem; +} + +.max-w-screen-xl { + max-width: 1280px; +} + +.max-w-\[301px\] { + max-width: 301px; +} + +.max-w-\[83px\] { + max-width: 83px; +} + +.max-w-\[351px\] { + max-width: 351px; +} + +.max-w-\[133px\] { + max-width: 133px; +} + +.max-w-\[341px\] { + max-width: 341px; +} + +.max-w-screen-md { + max-width: 768px; +} + +.max-w-md { + max-width: 28rem; +} + +.max-w-4xl { + max-width: 56rem; +} + +.max-w-7xl { + max-width: 80rem; +} + +.max-w-\[640px\] { + max-width: 640px; +} + +.max-w-\[540px\] { + max-width: 540px; +} + .flex-none { flex: none; } +.flex-1 { + flex: 1 1 0%; +} + .flex-shrink { flex-shrink: 1; } +.flex-shrink-0 { + flex-shrink: 0; +} + .shrink-0 { flex-shrink: 0; } @@ -1325,33 +1798,87 @@ video { border-collapse: collapse; } +.origin-left { + transform-origin: left; +} + +.-translate-x-1\/2 { + --tw-translate-x: -50%; + 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)); +} + +.-translate-y-4 { + --tw-translate-y: -1rem; + 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)); +} + +.-translate-y-6 { + --tw-translate-y: -1.5rem; + 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)); +} + +.-translate-y-1\/2 { + --tw-translate-y: -50%; + 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)); +} + +.-translate-x-1\/3 { + --tw-translate-x: -33.333333%; + 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)); +} + +.-translate-y-1\/3 { + --tw-translate-y: -33.333333%; + 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)); +} + +.translate-x-1\/3 { + --tw-translate-x: 33.333333%; + 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)); +} + +.translate-y-1\/3 { + --tw-translate-y: 33.333333%; + 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)); +} + +.rotate-45 { + --tw-rotate: 45deg; + 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)); +} + +.scale-75 { + --tw-scale-x: .75; + --tw-scale-y: .75; + 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)); +} + .transform { - -webkit-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)); - 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)); + 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)); } .\!transform { - -webkit-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)) !important; - 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)) !important; -} - -@-webkit-keyframes spin { - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + 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)) !important; } @keyframes spin { to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + transform: rotate(360deg); } } .animate-spin { - -webkit-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .cursor-pointer { @@ -1362,15 +1889,48 @@ video { cursor: zoom-in; } +.cursor-not-allowed { + cursor: not-allowed; +} + +.touch-pinch-zoom { + --tw-pinch-zoom: pinch-zoom; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} + .resize { resize: both; } +.list-inside { + list-style-position: inside; +} + +.list-outside { + list-style-position: outside; +} + +.list-none { + list-style-type: none; +} + +.list-disc { + list-style-type: disc; +} + +.list-decimal { + list-style-type: decimal; +} + .appearance-none { -webkit-appearance: none; appearance: none; } +.grid-flow-row { + grid-auto-flow: row; +} + .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1415,6 +1975,10 @@ video { align-items: center; } +.items-baseline { + align-items: baseline; +} + .items-stretch { align-items: stretch; } @@ -1451,23 +2015,28 @@ video { gap: 0.5rem; } +.gap-3 { + gap: 0.75rem; +} + +.gap-8 { + gap: 2rem; +} + .gap-y-1 { row-gap: 0.25rem; } .gap-x-4 { - -webkit-column-gap: 1rem; - column-gap: 1rem; + column-gap: 1rem; } .gap-x-0\.5 { - -webkit-column-gap: 0.125rem; - column-gap: 0.125rem; + column-gap: 0.125rem; } .gap-x-0 { - -webkit-column-gap: 0px; - column-gap: 0px; + column-gap: 0px; } .gap-y-2 { @@ -1475,19 +2044,21 @@ video { } .gap-x-1 { - -webkit-column-gap: 0.25rem; - column-gap: 0.25rem; + column-gap: 0.25rem; } .gap-x-2 { - -webkit-column-gap: 0.5rem; - column-gap: 0.5rem; + column-gap: 0.5rem; } .gap-y-8 { row-gap: 2rem; } +.gap-y-4 { + row-gap: 1rem; +} + .space-x-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.125rem * var(--tw-space-x-reverse)); @@ -1524,6 +2095,60 @@ video { margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.-space-x-px > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(-1px * var(--tw-space-x-reverse)); + margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse))); +} + +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.space-y-2 > :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)); +} + +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); +} + +.space-x-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.5rem * var(--tw-space-x-reverse)); + margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-y-reverse > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 1; } @@ -1532,18 +2157,18 @@ video { --tw-space-x-reverse: 1; } -.divide-x > :not([hidden]) ~ :not([hidden]) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); -} - .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } +.divide-x > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); +} + .divide-y-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 1; } @@ -1552,6 +2177,71 @@ video { --tw-divide-x-reverse: 1; } +.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); +} + +.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-divide-opacity)); +} + +.divide-gray-700 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-divide-opacity)); +} + +.divide-gray-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-divide-opacity)); +} + +.divide-red-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(252 165 165 / var(--tw-divide-opacity)); +} + +.divide-yellow-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(253 224 71 / var(--tw-divide-opacity)); +} + +.divide-green-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(134 239 172 / var(--tw-divide-opacity)); +} + +.divide-indigo-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(165 180 252 / var(--tw-divide-opacity)); +} + +.divide-purple-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(216 180 254 / var(--tw-divide-opacity)); +} + +.divide-pink-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(249 168 212 / var(--tw-divide-opacity)); +} + +.divide-blue-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(147 197 253 / var(--tw-divide-opacity)); +} + +.divide-gray-500 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-divide-opacity)); +} + +.divide-orange-300 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(253 186 116 / var(--tw-divide-opacity)); +} + .self-start { align-self: flex-start; } @@ -1584,10 +2274,6 @@ video { overflow: hidden; } -.overflow-scroll { - overflow: scroll; -} - .overflow-x-auto { overflow-x: auto; } @@ -1596,6 +2282,14 @@ video { overflow-y: auto; } +.overflow-y-scroll { + overflow-y: scroll; +} + +.overscroll-contain { + overscroll-behavior: contain; +} + .truncate { overflow: hidden; text-overflow: ellipsis; @@ -1614,6 +2308,26 @@ video { text-overflow: clip; } +.whitespace-normal { + white-space: normal; +} + +.whitespace-nowrap { + white-space: nowrap; +} + +.whitespace-pre { + white-space: pre; +} + +.whitespace-pre-line { + white-space: pre-line; +} + +.whitespace-pre-wrap { + white-space: pre-wrap; +} + .break-words { overflow-wrap: break-word; } @@ -1646,13 +2360,75 @@ video { border-radius: 0.5rem; } +.\!rounded-md { + border-radius: 0.375rem !important; +} + +.rounded-\[2\.5rem\] { + border-radius: 2.5rem; +} + +.rounded-\[2rem\] { + border-radius: 2rem; +} + .rounded-sm { border-radius: 0.125rem; } -.rounded-t { +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.rounded-b-\[1rem\] { + border-bottom-right-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +.rounded-l-lg { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.rounded-r-lg { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.rounded-b-xl { + border-bottom-right-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} + +.rounded-t-xl { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; +} + +.rounded-t-sm { + border-top-left-radius: 0.125rem; + border-top-right-radius: 0.125rem; +} + +.rounded-t-\[2\.5rem\] { + border-top-left-radius: 2.5rem; + border-top-right-radius: 2.5rem; +} + +.rounded-b-\[2\.5rem\] { + border-bottom-right-radius: 2.5rem; + border-bottom-left-radius: 2.5rem; +} + +.rounded-l { border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .rounded-r { @@ -1660,13 +2436,18 @@ video { border-bottom-right-radius: 0.25rem; } -.rounded-b { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; +.rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; } -.rounded-l { +.rounded-t { border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.rounded-b { + border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } @@ -1694,6 +2475,30 @@ video { border-width: 2px; } +.\!border-0 { + border-width: 0px !important; +} + +.border-\[14px\] { + border-width: 14px; +} + +.border-\[16px\] { + border-width: 16px; +} + +.border-\[8px\] { + border-width: 8px; +} + +.border-\[10px\] { + border-width: 10px; +} + +.border-0 { + border-width: 0px; +} + .border-x { border-left-width: 1px; border-right-width: 1px; @@ -1775,6 +2580,149 @@ video { border-color: rgb(31 41 55 / var(--tw-border-opacity)); } +.border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.border-blue-400 { + --tw-border-opacity: 1; + border-color: rgb(96 165 250 / var(--tw-border-opacity)); +} + +.border-red-400 { + --tw-border-opacity: 1; + border-color: rgb(248 113 113 / var(--tw-border-opacity)); +} + +.border-green-400 { + --tw-border-opacity: 1; + border-color: rgb(74 222 128 / var(--tw-border-opacity)); +} + +.border-yellow-300 { + --tw-border-opacity: 1; + border-color: rgb(253 224 71 / var(--tw-border-opacity)); +} + +.border-indigo-400 { + --tw-border-opacity: 1; + border-color: rgb(129 140 248 / var(--tw-border-opacity)); +} + +.border-purple-400 { + --tw-border-opacity: 1; + border-color: rgb(192 132 252 / var(--tw-border-opacity)); +} + +.border-pink-400 { + --tw-border-opacity: 1; + border-color: rgb(244 114 182 / var(--tw-border-opacity)); +} + +.border-gray-100 { + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); +} + +.border-blue-700 { + --tw-border-opacity: 1; + border-color: rgb(29 78 216 / var(--tw-border-opacity)); +} + +.border-green-700 { + --tw-border-opacity: 1; + border-color: rgb(21 128 61 / var(--tw-border-opacity)); +} + +.border-purple-700 { + --tw-border-opacity: 1; + border-color: rgb(126 34 206 / var(--tw-border-opacity)); +} + +.border-red-700 { + --tw-border-opacity: 1; + border-color: rgb(185 28 28 / var(--tw-border-opacity)); +} + +.border-yellow-400 { + --tw-border-opacity: 1; + border-color: rgb(250 204 21 / var(--tw-border-opacity)); +} + +.border-gray-900 { + --tw-border-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-border-opacity)); +} + +.border-green-600 { + --tw-border-opacity: 1; + border-color: rgb(22 163 74 / var(--tw-border-opacity)); +} + +.border-red-600 { + --tw-border-opacity: 1; + border-color: rgb(220 38 38 / var(--tw-border-opacity)); +} + +.border-green-500 { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity)); +} + +.border-red-500 { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); +} + +.border-gray-700 { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); +} + +.border-transparent { + border-color: transparent; +} + +.border-red-300 { + --tw-border-opacity: 1; + border-color: rgb(252 165 165 / var(--tw-border-opacity)); +} + +.border-green-300 { + --tw-border-opacity: 1; + border-color: rgb(134 239 172 / var(--tw-border-opacity)); +} + +.border-indigo-300 { + --tw-border-opacity: 1; + border-color: rgb(165 180 252 / var(--tw-border-opacity)); +} + +.border-purple-300 { + --tw-border-opacity: 1; + border-color: rgb(216 180 254 / var(--tw-border-opacity)); +} + +.border-pink-300 { + --tw-border-opacity: 1; + border-color: rgb(249 168 212 / var(--tw-border-opacity)); +} + +.border-blue-300 { + --tw-border-opacity: 1; + border-color: rgb(147 197 253 / var(--tw-border-opacity)); +} + +.border-orange-300 { + --tw-border-opacity: 1; + border-color: rgb(253 186 116 / var(--tw-border-opacity)); +} + +.border-inherit { + border-color: inherit; +} + .border-opacity-50 { --tw-border-opacity: 0.5; } @@ -1809,15 +2757,538 @@ video { background-color: rgb(224 231 255 / var(--tw-bg-opacity)); } +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.bg-blue-100 { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); +} + +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity)); +} + +.bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); +} + +.bg-yellow-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 249 195 / var(--tw-bg-opacity)); +} + +.bg-purple-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 232 255 / var(--tw-bg-opacity)); +} + +.bg-pink-100 { + --tw-bg-opacity: 1; + background-color: rgb(252 231 243 / var(--tw-bg-opacity)); +} + +.bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.bg-blue-700 { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + +.bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +.bg-green-700 { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); +} + +.bg-purple-700 { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); +} + +.bg-red-700 { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); +} + +.bg-yellow-400 { + --tw-bg-opacity: 1; + background-color: rgb(250 204 21 / var(--tw-bg-opacity)); +} + +.bg-blue-400 { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); +} + +.bg-green-400 { + --tw-bg-opacity: 1; + background-color: rgb(74 222 128 / var(--tw-bg-opacity)); +} + +.bg-purple-400 { + --tw-bg-opacity: 1; + background-color: rgb(192 132 252 / var(--tw-bg-opacity)); +} + +.bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); +} + +.bg-white\/30 { + background-color: rgb(255 255 255 / 0.3); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-green-50 { + --tw-bg-opacity: 1; + background-color: rgb(240 253 244 / var(--tw-bg-opacity)); +} + +.bg-red-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity)); +} + +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + +.bg-inherit { + background-color: inherit; +} + +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.bg-orange-600 { + --tw-bg-opacity: 1; + background-color: rgb(234 88 12 / var(--tw-bg-opacity)); +} + +.bg-green-500 { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); +} + +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + +.bg-purple-500 { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity)); +} + +.bg-indigo-500 { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity)); +} + +.bg-teal-500 { + --tw-bg-opacity: 1; + background-color: rgb(20 184 166 / var(--tw-bg-opacity)); +} + +.bg-blue-50 { + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity)); +} + +.bg-gray-600 { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + .bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } +.bg-green-600 { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); +} + +.bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); +} + +.bg-indigo-600 { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity)); +} + +.bg-gray-400 { + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity)); +} + +.bg-pink-500 { + --tw-bg-opacity: 1; + background-color: rgb(236 72 153 / var(--tw-bg-opacity)); +} + +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + +.bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +.bg-red-900 { + --tw-bg-opacity: 1; + background-color: rgb(127 29 29 / var(--tw-bg-opacity)); +} + +.bg-yellow-600 { + --tw-bg-opacity: 1; + background-color: rgb(202 138 4 / var(--tw-bg-opacity)); +} + +.bg-green-800 { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); +} + +.bg-indigo-800 { + --tw-bg-opacity: 1; + background-color: rgb(55 48 163 / var(--tw-bg-opacity)); +} + +.bg-purple-800 { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); +} + +.bg-pink-800 { + --tw-bg-opacity: 1; + background-color: rgb(157 23 77 / var(--tw-bg-opacity)); +} + +.bg-blue-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgb(234 179 8 / var(--tw-bg-opacity)); +} + +.bg-blue-200 { + --tw-bg-opacity: 1; + background-color: rgb(191 219 254 / var(--tw-bg-opacity)); +} + +.bg-orange-100 { + --tw-bg-opacity: 1; + background-color: rgb(255 237 213 / var(--tw-bg-opacity)); +} + +.bg-yellow-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 252 232 / var(--tw-bg-opacity)); +} + +.bg-indigo-50 { + --tw-bg-opacity: 1; + background-color: rgb(238 242 255 / var(--tw-bg-opacity)); +} + +.bg-purple-50 { + --tw-bg-opacity: 1; + background-color: rgb(250 245 255 / var(--tw-bg-opacity)); +} + +.bg-pink-50 { + --tw-bg-opacity: 1; + background-color: rgb(253 242 248 / var(--tw-bg-opacity)); +} + +.bg-orange-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 247 237 / var(--tw-bg-opacity)); +} + +.bg-opacity-75 { + --tw-bg-opacity: 0.75; +} + +.bg-opacity-50 { + --tw-bg-opacity: 0.5; +} + +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.bg-gradient-to-br { + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); +} + +.from-blue-500 { + --tw-gradient-from: #3b82f6; + --tw-gradient-to: rgb(59 130 246 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-green-400 { + --tw-gradient-from: #4ade80; + --tw-gradient-to: rgb(74 222 128 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-cyan-400 { + --tw-gradient-from: #22d3ee; + --tw-gradient-to: rgb(34 211 238 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-teal-400 { + --tw-gradient-from: #2dd4bf; + --tw-gradient-to: rgb(45 212 191 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-lime-200 { + --tw-gradient-from: #d9f99d; + --tw-gradient-to: rgb(217 249 157 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-red-400 { + --tw-gradient-from: #f87171; + --tw-gradient-to: rgb(248 113 113 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-pink-400 { + --tw-gradient-from: #f472b6; + --tw-gradient-to: rgb(244 114 182 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-500 { + --tw-gradient-from: #a855f7; + --tw-gradient-to: rgb(168 85 247 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-600 { + --tw-gradient-from: #9333ea; + --tw-gradient-to: rgb(147 51 234 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-cyan-500 { + --tw-gradient-from: #06b6d4; + --tw-gradient-to: rgb(6 182 212 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-pink-500 { + --tw-gradient-from: #ec4899; + --tw-gradient-to: rgb(236 72 153 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-teal-200 { + --tw-gradient-from: #99f6e4; + --tw-gradient-to: rgb(153 246 228 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-red-200 { + --tw-gradient-from: #fecaca; + --tw-gradient-to: rgb(254 202 202 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-sky-400 { + --tw-gradient-from: #38bdf8; + --tw-gradient-to: rgb(56 189 248 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-blue-600 { + --tw-gradient-to: rgb(37 99 235 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #2563eb, var(--tw-gradient-to); +} + +.via-green-500 { + --tw-gradient-to: rgb(34 197 94 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #22c55e, var(--tw-gradient-to); +} + +.via-cyan-500 { + --tw-gradient-to: rgb(6 182 212 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #06b6d4, var(--tw-gradient-to); +} + +.via-teal-500 { + --tw-gradient-to: rgb(20 184 166 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #14b8a6, var(--tw-gradient-to); +} + +.via-lime-400 { + --tw-gradient-to: rgb(163 230 53 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #a3e635, var(--tw-gradient-to); +} + +.via-red-500 { + --tw-gradient-to: rgb(239 68 68 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to); +} + +.via-pink-500 { + --tw-gradient-to: rgb(236 72 153 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to); +} + +.via-purple-600 { + --tw-gradient-to: rgb(147 51 234 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #9333ea, var(--tw-gradient-to); +} + +.via-red-300 { + --tw-gradient-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #fca5a5, var(--tw-gradient-to); +} + +.to-blue-700 { + --tw-gradient-to: #1d4ed8; +} + +.to-green-600 { + --tw-gradient-to: #16a34a; +} + +.to-cyan-600 { + --tw-gradient-to: #0891b2; +} + +.to-teal-600 { + --tw-gradient-to: #0d9488; +} + +.to-lime-500 { + --tw-gradient-to: #84cc16; +} + +.to-red-600 { + --tw-gradient-to: #dc2626; +} + +.to-pink-600 { + --tw-gradient-to: #db2777; +} + +.to-purple-700 { + --tw-gradient-to: #7e22ce; +} + +.to-blue-500 { + --tw-gradient-to: #3b82f6; +} + +.to-blue-600 { + --tw-gradient-to: #2563eb; +} + +.to-pink-500 { + --tw-gradient-to: #ec4899; +} + +.to-orange-400 { + --tw-gradient-to: #fb923c; +} + +.to-lime-200 { + --tw-gradient-to: #d9f99d; +} + +.to-yellow-200 { + --tw-gradient-to: #fef08a; +} + +.to-emerald-600 { + --tw-gradient-to: #059669; +} + +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} + .bg-repeat { background-repeat: repeat; } +.fill-blue-600 { + fill: #2563eb; +} + +.fill-gray-600 { + fill: #4b5563; +} + +.fill-green-500 { + fill: #22c55e; +} + +.fill-red-600 { + fill: #dc2626; +} + +.fill-yellow-400 { + fill: #facc15; +} + +.fill-pink-600 { + fill: #db2777; +} + +.fill-purple-600 { + fill: #9333ea; +} + +.fill-white { + fill: #fff; +} + +.object-cover { + object-fit: cover; +} + .p-8 { padding: 2rem; } @@ -1842,6 +3313,34 @@ video { padding: 0.125rem; } +.p-5 { + padding: 1.25rem; +} + +.p-2\.5 { + padding: 0.625rem; +} + +.p-3 { + padding: 0.75rem; +} + +.\!p-0 { + padding: 0px !important; +} + +.p-1\.5 { + padding: 0.375rem; +} + +.\!p-3 { + padding: 0.75rem !important; +} + +.\!p-2 { + padding: 0.5rem !important; +} + .p-12 { padding: 3rem; } @@ -1871,6 +3370,81 @@ video { padding-bottom: 0.25rem; } +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + +.py-0\.5 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} + +.py-0 { + padding-top: 0px; + padding-bottom: 0px; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.py-3\.5 { + padding-top: 0.875rem; + padding-bottom: 0.875rem; +} + +.px-0 { + padding-left: 0px; + padding-right: 0px; +} + +.\!px-0 { + padding-left: 0px !important; + padding-right: 0px !important; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + .pr-2 { padding-right: 0.5rem; } @@ -1919,6 +3493,34 @@ video { padding-left: 0.75rem; } +.pb-1\.5 { + padding-bottom: 0.375rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.pb-1 { + padding-bottom: 0.25rem; +} + +.pb-2\.5 { + padding-bottom: 0.625rem; +} + +.pt-5 { + padding-top: 1.25rem; +} + +.pb-2 { + padding-bottom: 0.5rem; +} + +.pt-3 { + padding-top: 0.75rem; +} + .pt-1 { padding-top: 0.25rem; } @@ -1927,14 +3529,18 @@ video { padding-bottom: 2.5rem; } -.pb-2 { - padding-bottom: 0.5rem; +.text-left { + text-align: left; } .text-center { text-align: center; } +.text-right { + text-align: right; +} + .text-justify { text-align: justify; } @@ -1984,6 +3590,26 @@ video { line-height: 1; } +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.text-7xl { + font-size: 4.5rem; + line-height: 1; +} + +.text-8xl { + font-size: 6rem; + line-height: 1; +} + +.text-9xl { + font-size: 8rem; + line-height: 1; +} + .font-extrabold { font-weight: 800; } @@ -2000,6 +3626,26 @@ video { font-weight: 400; } +.font-medium { + font-weight: 500; +} + +.font-thin { + font-weight: 100; +} + +.font-extralight { + font-weight: 200; +} + +.font-light { + font-weight: 300; +} + +.font-black { + font-weight: 900; +} + .uppercase { text-transform: uppercase; } @@ -2063,25 +3709,330 @@ video { font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } +.leading-none { + line-height: 1; +} + +.leading-normal { + line-height: 1.5; +} + +.leading-relaxed { + line-height: 1.625; +} + +.leading-loose { + line-height: 2; +} + .tracking-tight { letter-spacing: -0.025em; } +.tracking-tighter { + letter-spacing: -0.05em; +} + +.tracking-normal { + letter-spacing: 0em; +} + +.tracking-wide { + letter-spacing: 0.025em; +} + +.tracking-wider { + letter-spacing: 0.05em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.text-blue-800 { + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity)); +} + +.text-red-800 { + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity)); +} + +.text-green-800 { + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity)); +} + +.text-yellow-800 { + --tw-text-opacity: 1; + color: rgb(133 77 14 / var(--tw-text-opacity)); +} + +.text-indigo-800 { + --tw-text-opacity: 1; + color: rgb(55 48 163 / var(--tw-text-opacity)); +} + +.text-purple-800 { + --tw-text-opacity: 1; + color: rgb(107 33 168 / var(--tw-text-opacity)); +} + +.text-pink-800 { + --tw-text-opacity: 1; + color: rgb(157 23 77 / var(--tw-text-opacity)); +} + +.text-blue-400 { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.text-red-400 { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity)); +} + +.text-green-400 { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity)); +} + +.text-yellow-400 { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity)); +} + +.text-indigo-400 { + --tw-text-opacity: 1; + color: rgb(129 140 248 / var(--tw-text-opacity)); +} + +.text-purple-400 { + --tw-text-opacity: 1; + color: rgb(192 132 252 / var(--tw-text-opacity)); +} + +.text-pink-400 { + --tw-text-opacity: 1; + color: rgb(244 114 182 / var(--tw-text-opacity)); +} + +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.text-blue-900 { + --tw-text-opacity: 1; + color: rgb(30 58 138 / var(--tw-text-opacity)); +} + +.text-green-900 { + --tw-text-opacity: 1; + color: rgb(20 83 45 / var(--tw-text-opacity)); +} + +.text-purple-900 { + --tw-text-opacity: 1; + color: rgb(88 28 135 / var(--tw-text-opacity)); +} + +.text-red-900 { + --tw-text-opacity: 1; + color: rgb(127 29 29 / var(--tw-text-opacity)); +} + +.text-yellow-900 { + --tw-text-opacity: 1; + color: rgb(113 63 18 / var(--tw-text-opacity)); +} + +.text-blue-700 { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} + +.text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity)); +} + +.text-purple-700 { + --tw-text-opacity: 1; + color: rgb(126 34 206 / var(--tw-text-opacity)); +} + +.text-red-700 { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity)); +} + +.\!text-gray-900 { + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + +.text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity)); +} + +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} + .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } +.text-purple-600 { + --tw-text-opacity: 1; + color: rgb(147 51 234 / var(--tw-text-opacity)); +} + +.text-teal-600 { + --tw-text-opacity: 1; + color: rgb(13 148 136 / var(--tw-text-opacity)); +} + +.text-orange-500 { + --tw-text-opacity: 1; + color: rgb(249 115 22 / var(--tw-text-opacity)); +} + +.text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +.text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.text-blue-100 { + --tw-text-opacity: 1; + color: rgb(219 234 254 / var(--tw-text-opacity)); +} + +.text-green-100 { + --tw-text-opacity: 1; + color: rgb(220 252 231 / var(--tw-text-opacity)); +} + +.text-red-100 { + --tw-text-opacity: 1; + color: rgb(254 226 226 / var(--tw-text-opacity)); +} + +.text-yellow-100 { + --tw-text-opacity: 1; + color: rgb(254 249 195 / var(--tw-text-opacity)); +} + +.text-purple-100 { + --tw-text-opacity: 1; + color: rgb(243 232 255 / var(--tw-text-opacity)); +} + +.text-indigo-100 { + --tw-text-opacity: 1; + color: rgb(224 231 255 / var(--tw-text-opacity)); +} + +.text-pink-100 { + --tw-text-opacity: 1; + color: rgb(252 231 243 / var(--tw-text-opacity)); +} + +.text-blue-50 { + --tw-text-opacity: 1; + color: rgb(239 246 255 / var(--tw-text-opacity)); +} + .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); } +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); +} + +.text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity)); +} + +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + +.text-indigo-500 { + --tw-text-opacity: 1; + color: rgb(99 102 241 / var(--tw-text-opacity)); +} + +.text-purple-500 { + --tw-text-opacity: 1; + color: rgb(168 85 247 / var(--tw-text-opacity)); +} + +.text-pink-500 { + --tw-text-opacity: 1; + color: rgb(236 72 153 / var(--tw-text-opacity)); +} + +.text-transparent { + color: transparent; +} + +.text-orange-800 { + --tw-text-opacity: 1; + color: rgb(154 52 18 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -2098,6 +4049,14 @@ video { text-decoration-line: none; } +.decoration-blue-400 { + text-decoration-color: #60a5fa; +} + +.decoration-2 { + text-decoration-thickness: 2px; +} + .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -2108,6 +4067,16 @@ video { -moz-osx-font-smoothing: auto; } +.placeholder-green-700::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(21 128 61 / var(--tw-placeholder-opacity)); +} + +.placeholder-red-700::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(185 28 28 / var(--tw-placeholder-opacity)); +} + .opacity-50 { opacity: 0.5; } @@ -2116,12 +4085,135 @@ video { opacity: 1; } +.opacity-60 { + opacity: 0.6; +} + +.opacity-30 { + opacity: 0.3; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-inner { + --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-gray-300 { + --tw-shadow-color: #d1d5db; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-blue-700 { + --tw-shadow-color: #1d4ed8; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-gray-800 { + --tw-shadow-color: #1f2937; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-green-700 { + --tw-shadow-color: #15803d; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-purple-700 { + --tw-shadow-color: #7e22ce; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-red-700 { + --tw-shadow-color: #b91c1c; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-yellow-500 { + --tw-shadow-color: #eab308; + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-gray-500\/50 { + --tw-shadow-color: rgb(107 114 128 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-blue-500\/50 { + --tw-shadow-color: rgb(59 130 246 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-green-500\/50 { + --tw-shadow-color: rgb(34 197 94 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-purple-500\/50 { + --tw-shadow-color: rgb(168 85 247 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-red-500\/50 { + --tw-shadow-color: rgb(239 68 68 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-yellow-500\/50 { + --tw-shadow-color: rgb(234 179 8 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-cyan-500\/50 { + --tw-shadow-color: rgb(6 182 212 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-teal-500\/50 { + --tw-shadow-color: rgb(20 184 166 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-lime-500\/50 { + --tw-shadow-color: rgb(132 204 22 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-pink-500\/50 { + --tw-shadow-color: rgb(236 72 153 / 0.5); + --tw-shadow: var(--tw-shadow-colored); +} + .outline-none { outline: 2px solid transparent; outline-offset: 2px; @@ -2131,66 +4223,83 @@ video { outline-style: solid; } +.\!outline { + outline-style: solid !important; +} + .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.ring-2 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-8 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + .ring-inset { --tw-ring-inset: inset; } +.ring-gray-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} + +.ring-white { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); +} + .blur { --tw-blur: blur(8px); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow-md { --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow-2xl { --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .grayscale { --tw-grayscale: grayscale(100%); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .invert { --tw-invert: invert(100%); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .sepia { --tw-sepia: sepia(100%); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .\!filter { - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .backdrop-blur { @@ -2223,9 +4332,9 @@ video { } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2236,14 +4345,38 @@ video { transition-duration: 150ms; } +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .duration-200 { transition-duration: 200ms; } +.duration-75 { + transition-duration: 75ms; +} + +.duration-300 { + transition-duration: 300ms; +} + .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + .\[key\:string\] { key: string; } @@ -2275,8 +4408,10 @@ video { --interactive-background: #dddddd; --interactive-foreground: black; --interactive-contrast: #ff00ff; - --button-background: black; + --button-background: #383838; + --button-background-hover: #686868; --button-foreground: white; + --disabled: #DBDBDB; /** * Base colour of interactive elements, mainly the 'subtle button' * @deprecated @@ -2294,6 +4429,12 @@ video { --svg-color: #000000; } +@font-face{ + font-family:"Source Sans Pro"; + + src:url("/assets/source-sans-pro.regular.ttf") format("woff"); +} + /***********************************************************************\ * Various tweaks and settings to make some behaviours more predictable * \***********************************************************************/ @@ -2307,7 +4448,11 @@ body { padding: 0; background-color: var(--background-color); color: var(--foreground-color); - font-family: "Helvetica Neue", Arial, sans-serif; + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 150%; } svg, @@ -2403,224 +4548,86 @@ input[type="text"] { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ -button.small, -.button.small { - line-height: 1rem; - margin: 0; - margin-left: 0.5rem; - padding: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; - font-size: unset; - border: 2px solid var(--button-background); - border-radius: 0.5rem; - font-weight: normal; - transition: all 250ms; - --tw-text-opacity: 1; - --tw-bg-opacity: 1; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); -} +/********* BUTTONS ***********/ -.button.theme-button { - margin: 0; - margin-top: 0.25rem; - margin-bottom: 0.25rem; - /* Margin should be removed on larger screens */ - @media (min-width: 768px) { - margin: 0; - - margin-top: 0; - - margin-bottom: 0; - } - /* Experimental support for foldable devices */ - @media (horizontal-viewport-segments: 2) { - margin: 0; - - margin-top: 0; - - margin-bottom: 0; - } -} - -button, -.button { - align-items: center; - display: inline-flex; - line-height: 1.25rem; - margin: 0.2rem; - padding: 0.4rem; - padding-left: 0.6rem; - padding-right: 0.6rem; - font-size: large; - font-weight: bold; - border: 2px solid var(--button-background); - border-radius: 0.5rem; - transition: all 250ms; - --tw-text-opacity: 1; - --tw-bg-opacity: 1; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); -} - -.button-shadow { - box-shadow: 0 5px 10px #88888888; -} - -button.selected, -.button.selected { - background-color: var(--catch-detail-color); - border-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); -} - -button.selected svg path, -.button.selected svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - -button:not(.no-image-background):not(.soft) svg path, -.button:not(.no-image-background):not(.soft) svg path { - fill: var(--interactive-foreground) !important; - transition: all 250ms; -} - -.interactive button, -.interactive .button { - background: var(--interactive-background); - color: var(--interactive-foreground); -} - -button:hover, -.button:hover { - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); - border: 2px solid var(--catch-detail-color-contrast); -} - -button:hover:not(.no-image-background) img, -.button:hover:not(.no-image-background) img { - background: var(--low-interaction-background); - border-radius: 100rem; -} - -button:hover:not(.no-image-background) svg path, -.button:hover:not(.no-image-background) svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - -button.disabled:hover:not(.no-image-background) svg path, -.button.disabled:hover:not(.no-image-background) svg path { - fill: var(--low-interaction-foreground) !important; -} - -button.primary, -.button.primary { - color: var(--button-foreground); - background: var(--button-background); -} - -button.primary:not(.no-image-background) svg path, -.button.primary:not(.no-image-background) svg path { - fill: var(--button-foreground) !important; - transition: all 250ms; -} - -button.disabled.low-interaction, -.button.disabled.low-interaction { - background-color: var(--low-interaction-background-50); -} - -button.disabled, -.button.disabled { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; - box-shadow: none; -} - -button.disabled:hover, -.button.disabled:hover { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; -} - -button.link { - border: none; - text-decoration: underline; - background-color: unset; -} - -button.link:hover { - color: unset; -} - -.interactive button.disabled svg path, -.interactive .button.disabled svg path { - fill: var(--interactive-foreground) !important; -} - -.low-interaction button.disabled svg path, -.low-interaction .button.disabled svg path { - fill: var(--low-interaction-foreground) !important; -} - -.normal-background button.disabled svg path, -.normal-background .button.disabled svg path { - fill: var(--foreground-color) !important; -} - -.links-w-full a:not(.weblate-link) { +button, .button { + box-sizing: border-box; + /* Auto layout */ display: flex; - -webkit-column-gap: 0.25rem; - column-gap: 0.25rem; + column-gap: 0.25rem; + justify-content: center; + align-items: center; + padding: 0.25rem 1rem; + margin: 0.25rem; + border: 1px solid var(--foreground-color); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + border-radius: 30px; + background: var(--background-color); + transition: all 200ms; +} + +button.w-full { + margin-left: 0; +} + +button:hover:not(.disabled):not(.as-link), .button:hover:not(.disabled):not(.as-link) { + background-color: var(--low-interaction-background); +} + +button:focus, .button:focus { + border-color: var(--interactive-contrast); +} + +button.primary, .button.primary { + color: var(--button-foreground); + background-color: var(--button-background); +} + +button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) { + background-color: var(--button-background-hover); +} + +button.disabled { + border-color: var(--disabled); + color: var(--disabled); +} + +button.primary.disabled, .button.primary.disabled { + color: var(--button-foreground); + background-color: var(--disabled); +} + +.low-interaction button:hover:not(.disabled):not(.as-link), .low-interaction .button:hover:not(.disabled):not(.as-link) { + box-sizing: border-box; + background-color: var(--interactive-background); +} + +button.as-link { + background-color: unset; + display: inline-flex; + justify-content: start; + border: none; + border-radius: 0; + text-decoration: underline; + box-shadow: none; + margin: 0; + padding: 0; +} + +/******* Other input elements ******/ + +.hover-alert:hover { + color: var(--catch-detail-color-contrast) +} + +.links-w-full a:not(.weblate-link), .links-w-full button.as-link { + display: flex; + column-gap: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; width: 100%; } -button.soft, -.button.soft { - border: 2px solid var(--interactive-background); - margin: 0; -} - -button.soft:hover, -.button.soft:hover { - background-color: var(--interactive-background); - color: var(--interactive-foreground); - border: 2px solid var(--catch-detail-color-contrast); -} - -.links-as-button a { - /* - * Let a 'link' mimick a button, but not entirely - */ - padding: 3px; - margin: 0; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); - border: 2px solid var(--interactive-background); - border-radius: 0.5rem; -} - -.links-as-button a:hover { - background-color: var(--interactive-background); - color: var(--interactive-foregroundcolor); - border-color: var(--catch-detail-color-contrast); -} - -.links-as-button a:hover svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - select { border: 2px solid #00000000; color: var(--foreground-color) !important; @@ -2880,7 +4887,6 @@ a.link-underline { stroke: white !important; stroke-width: 20px !important; overflow: visible !important; - -webkit-animation: glowing-drop-shadow 1s ease-in-out infinite alternate; animation: glowing-drop-shadow 1s ease-in-out infinite alternate; } @@ -2906,61 +4912,22 @@ svg.apply-fill path { } } -@-webkit-keyframes glowing-drop-shadow { - from { - -webkit-filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6)); - filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6)); - } - - to { - -webkit-filter: drop-shadow(5px 5px 80px rgb(0.5 0.5 0.5 / 0.8)); - filter: drop-shadow(5px 5px 80px rgb(0.5 0.5 0.5 / 0.8)); - } -} - -@-webkit-keyframes slide { - /* This is the animation on the marker to add a new point - it slides through all the possible presets */ - - from { - -webkit-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(calc(-100% + 42px)); - transform: translateX(calc(-100% + 42px)); - } -} - @keyframes slide { /* This is the animation on the marker to add a new point - it slides through all the possible presets */ from { - -webkit-transform: translateX(0%); - transform: translateX(0%); + transform: translateX(0%); } to { - -webkit-transform: translateX(calc(-100% + 42px)); - transform: translateX(calc(-100% + 42px)); + transform: translateX(calc(-100% + 42px)); } } .glowing-shadow { - -webkit-animation: glowing 1s ease-in-out infinite alternate; animation: glowing 1s ease-in-out infinite alternate; } -@-webkit-keyframes glowing { - from { - box-shadow: 0 0 20px 10px #eaaf2588, inset 0 0 0px 1px #eaaf25; - } - - to { - box-shadow: 0 0 20px 20px #eaaf2588, inset 0 0 5px 1px #eaaf25; - } -} - /************************* LEGACY MARKER - CLEANUP BELOW ********************************/ .slideshow-item img { @@ -2993,20 +4960,2176 @@ svg.apply-fill path { } } +.first-letter\:float-left::first-letter { + float: left; +} + +.first-letter\:text-7xl::first-letter { + font-size: 4.5rem; + line-height: 1; +} + +.first-letter\:font-bold::first-letter { + font-weight: 700; +} + +.first-letter\:text-gray-900::first-letter { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.first-line\:uppercase::first-line { + text-transform: uppercase; +} + +.first-line\:tracking-widest::first-line { + letter-spacing: 0.1em; +} + +.before\:absolute::before { + content: var(--tw-content); + position: absolute; +} + +.before\:z-10::before { + content: var(--tw-content); + z-index: 10; +} + +.before\:block::before { + content: var(--tw-content); + display: block; +} + +.before\:h-full::before { + content: var(--tw-content); + height: 100%; +} + +.before\:shadow-\[-10px_0_50px_65px_rgba\(256\2c 256\2c 256\2c 1\)\]::before { + content: var(--tw-content); + --tw-shadow: -10px 0 50px 65px rgba(256,256,256,1); + --tw-shadow-colored: -10px 0 50px 65px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.before\:content-\[\'\'\]::before { + --tw-content: ''; + content: var(--tw-content); +} + +.after\:absolute::after { + content: var(--tw-content); + position: absolute; +} + +.after\:top-\[2px\]::after { + content: var(--tw-content); + top: 2px; +} + +.after\:top-0\.5::after { + content: var(--tw-content); + top: 0.125rem; +} + +.after\:top-0::after { + content: var(--tw-content); + top: 0px; +} + +.after\:z-10::after { + content: var(--tw-content); + z-index: 10; +} + +.after\:block::after { + content: var(--tw-content); + display: block; +} + +.after\:h-4::after { + content: var(--tw-content); + height: 1rem; +} + +.after\:h-5::after { + content: var(--tw-content); + height: 1.25rem; +} + +.after\:h-6::after { + content: var(--tw-content); + height: 1.5rem; +} + +.after\:h-full::after { + content: var(--tw-content); + height: 100%; +} + +.after\:w-4::after { + content: var(--tw-content); + width: 1rem; +} + +.after\:w-5::after { + content: var(--tw-content); + width: 1.25rem; +} + +.after\:w-6::after { + content: var(--tw-content); + width: 1.5rem; +} + +.after\:rounded-full::after { + content: var(--tw-content); + border-radius: 9999px; +} + +.after\:border::after { + content: var(--tw-content); + border-width: 1px; +} + +.after\:border-gray-300::after { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.after\:bg-white::after { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.after\:shadow-\[10px_0_50px_65px_rgba\(256\2c 256\2c 256\2c 1\)\]::after { + content: var(--tw-content); + --tw-shadow: 10px 0 50px 65px rgba(256,256,256,1); + --tw-shadow-colored: 10px 0 50px 65px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.after\:transition-all::after { + content: var(--tw-content); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.after\:content-\[\'\'\]::after { + --tw-content: ''; + content: var(--tw-content); +} + +.first\:rounded-t-lg:first-child { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.last\:rounded-b-lg:last-child { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.last\:border-b-0:last-child { + border-bottom-width: 0px; +} + +.odd\:bg-white:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.odd\:bg-blue-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.odd\:bg-green-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); +} + +.odd\:bg-red-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity)); +} + +.odd\:bg-yellow-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(133 77 14 / var(--tw-bg-opacity)); +} + +.odd\:bg-purple-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); +} + +.even\:bg-gray-50:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.even\:bg-blue-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + +.even\:bg-green-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); +} + +.even\:bg-red-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); +} + +.even\:bg-yellow-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(161 98 7 / var(--tw-bg-opacity)); +} + +.even\:bg-purple-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); +} + +.focus-within\:z-10:focus-within { + z-index: 10; +} + +.focus-within\:bg-gray-900:focus-within { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.focus-within\:text-white:focus-within { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.focus-within\:outline-none:focus-within { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus-within\:ring-2:focus-within { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus-within\:ring-4:focus-within { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus-within\:ring-1:focus-within { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus-within\:ring-gray-200:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity)); +} + +.focus-within\:ring-blue-300:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); +} + +.focus-within\:ring-gray-300:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} + +.focus-within\:ring-green-300:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity)); +} + +.focus-within\:ring-purple-300:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity)); +} + +.focus-within\:ring-red-300:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); +} + +.focus-within\:ring-yellow-300:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity)); +} + +.hover\:border-gray-300:hover { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + .hover\:bg-indigo-200:hover { --tw-bg-opacity: 1; background-color: rgb(199 210 254 / var(--tw-bg-opacity)); } +.hover\:bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.hover\:bg-blue-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(191 219 254 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} + +.hover\:bg-green-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(187 247 208 / var(--tw-bg-opacity)); +} + +.hover\:bg-yellow-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 240 138 / var(--tw-bg-opacity)); +} + +.hover\:bg-purple-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(233 213 255 / var(--tw-bg-opacity)); +} + +.hover\:bg-pink-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(251 207 232 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.hover\:bg-blue-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-900:hover { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.hover\:bg-green-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); +} + +.hover\:bg-purple-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity)); +} + +.hover\:bg-yellow-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(234 179 8 / var(--tw-bg-opacity)); +} + +.hover\:bg-transparent:hover { + background-color: transparent; +} + +.hover\:bg-gray-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + +.hover\:bg-blue-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); +} + +.hover\:bg-blue-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); +} + +.hover\:bg-green-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(74 222 128 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 113 113 / var(--tw-bg-opacity)); +} + +.hover\:bg-yellow-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(250 204 21 / var(--tw-bg-opacity)); +} + +.hover\:bg-purple-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(192 132 252 / var(--tw-bg-opacity)); +} + +.hover\:bg-gradient-to-br:hover { + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); +} + +.hover\:bg-gradient-to-bl:hover { + background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); +} + +.hover\:bg-gradient-to-l:hover { + background-image: linear-gradient(to left, var(--tw-gradient-stops)); +} + .hover\:text-blue-800:hover { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity)); } +.hover\:text-blue-900:hover { + --tw-text-opacity: 1; + color: rgb(30 58 138 / var(--tw-text-opacity)); +} + +.hover\:text-gray-400:hover { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.hover\:text-red-900:hover { + --tw-text-opacity: 1; + color: rgb(127 29 29 / var(--tw-text-opacity)); +} + +.hover\:text-green-900:hover { + --tw-text-opacity: 1; + color: rgb(20 83 45 / var(--tw-text-opacity)); +} + +.hover\:text-yellow-900:hover { + --tw-text-opacity: 1; + color: rgb(113 63 18 / var(--tw-text-opacity)); +} + +.hover\:text-indigo-900:hover { + --tw-text-opacity: 1; + color: rgb(49 46 129 / var(--tw-text-opacity)); +} + +.hover\:text-purple-900:hover { + --tw-text-opacity: 1; + color: rgb(88 28 135 / var(--tw-text-opacity)); +} + +.hover\:text-pink-900:hover { + --tw-text-opacity: 1; + color: rgb(131 24 67 / var(--tw-text-opacity)); +} + +.hover\:text-gray-900:hover { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.hover\:\!text-inherit:hover { + color: inherit !important; +} + +.hover\:text-gray-600:hover { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.hover\:text-black:hover { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.hover\:text-blue-700:hover { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} + +.hover\:text-gray-700:hover { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.hover\:underline:hover { + text-decoration-line: underline; +} + .hover\:opacity-100:hover { opacity: 1; } +.focus\:z-40:focus { + z-index: 40; +} + +.focus\:border-blue-500:focus { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)); +} + +.focus\:border-green-600:focus { + --tw-border-opacity: 1; + border-color: rgb(22 163 74 / var(--tw-border-opacity)); +} + +.focus\:border-red-600:focus { + --tw-border-opacity: 1; + border-color: rgb(220 38 38 / var(--tw-border-opacity)); +} + +.focus\:border-green-500:focus { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity)); +} + +.focus\:border-red-500:focus { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); +} + +.focus\:border-gray-200:focus { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-4:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-0:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-1:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-gray-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity)); +} + +.focus\:ring-blue-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); +} + +.focus\:ring-green-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity)); +} + +.focus\:ring-cyan-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity)); +} + +.focus\:ring-teal-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity)); +} + +.focus\:ring-lime-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(190 242 100 / var(--tw-ring-opacity)); +} + +.focus\:ring-red-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); +} + +.focus\:ring-pink-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity)); +} + +.focus\:ring-purple-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity)); +} + +.focus\:ring-green-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity)); +} + +.focus\:ring-purple-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity)); +} + +.focus\:ring-pink-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(251 207 232 / var(--tw-ring-opacity)); +} + +.focus\:ring-lime-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(217 249 157 / var(--tw-ring-opacity)); +} + +.focus\:ring-red-100:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity)); +} + +.focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); +} + +.focus\:ring-green-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity)); +} + +.focus\:ring-red-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); +} + +.focus\:ring-gray-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity)); +} + +.focus\:ring-purple-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity)); +} + +.focus\:ring-teal-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity)); +} + +.focus\:ring-yellow-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity)); +} + +.focus\:ring-orange-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity)); +} + +.focus\:\!ring-gray-300:focus { + --tw-ring-opacity: 1 !important; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)) !important; +} + +.focus\:ring-red-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity)); +} + +.focus\:ring-yellow-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity)); +} + +.focus\:ring-green-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity)); +} + +.focus\:ring-indigo-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity)); +} + +.focus\:ring-purple-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity)); +} + +.focus\:ring-pink-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(244 114 182 / var(--tw-ring-opacity)); +} + +.focus\:ring-blue-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity)); +} + +.focus-visible\:outline-none:focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.disabled\:cursor-not-allowed:disabled { + cursor: not-allowed; +} + +.disabled\:text-gray-400:disabled { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.disabled\:opacity-50:disabled { + opacity: 0.5; +} + +.group:first-child .group-first\:rounded-t-xl { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; +} + +.group:first-child .group-first\:border-t { + border-top-width: 1px; +} + +.group:hover .group-hover\:rotate-45 { + --tw-rotate: 45deg; + 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)); +} + +.group:hover .group-hover\:bg-white\/50 { + background-color: rgb(255 255 255 / 0.5); +} + +.group:hover .group-hover\:\!bg-opacity-0 { + --tw-bg-opacity: 0 !important; +} + +.group:hover .group-hover\:\!text-inherit { + color: inherit !important; +} + +.group:focus .group-focus\:outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.group:focus .group-focus\:ring-4 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.group:focus .group-focus\:ring-white { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-green-600 { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-yellow-400 { + --tw-bg-opacity: 1; + background-color: rgb(250 204 21 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-teal-600 { + --tw-bg-opacity: 1; + background-color: rgb(13 148 136 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-orange-500 { + --tw-bg-opacity: 1; + background-color: rgb(249 115 22 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.peer:checked ~ .peer-checked\:after\:translate-x-full::after { + content: var(--tw-content); + --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)); +} + +.peer:checked ~ .peer-checked\:after\:border-white::after { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:top-1\/2 { + top: 50%; +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 { + --tw-translate-y: 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)); +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:-translate-y-1\/2 { + --tw-translate-y: -50%; + 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)); +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + 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)); +} + +.peer:focus ~ .peer-focus\:top-2 { + top: 0.5rem; +} + +.peer:focus ~ .peer-focus\:-translate-y-4 { + --tw-translate-y: -1rem; + 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)); +} + +.peer:focus ~ .peer-focus\:-translate-y-6 { + --tw-translate-y: -1.5rem; + 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)); +} + +.peer:focus ~ .peer-focus\:scale-75 { + --tw-scale-x: .75; + --tw-scale-y: .75; + 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)); +} + +.peer:focus ~ .peer-focus\:px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.peer:focus ~ .peer-focus\:ring-4 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.peer:focus ~ .peer-focus\:ring-red-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); +} + +.peer:focus ~ .peer-focus\:ring-green-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity)); +} + +.peer:focus ~ .peer-focus\:ring-purple-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity)); +} + +.peer:focus ~ .peer-focus\:ring-yellow-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity)); +} + +.peer:focus ~ .peer-focus\:ring-teal-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity)); +} + +.peer:focus ~ .peer-focus\:ring-orange-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity)); +} + +.peer:focus ~ .peer-focus\:ring-blue-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); +} + +[dir="rtl"] .rtl\:origin-right { + transform-origin: right; +} + +[dir="rtl"] .rtl\:translate-x-1\/2 { + --tw-translate-x: 50%; + 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"] .rtl\:translate-x-1\/3 { + --tw-translate-x: 33.333333%; + 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"] .rtl\:-translate-x-1\/3 { + --tw-translate-x: -33.333333%; + 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"] .rtl\:-scale-x-100 { + --tw-scale-x: -1; + 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"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 1; +} + +[dir="rtl"] .rtl\:divide-x-reverse > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 1; +} + +[dir="rtl"] .rtl\:text-right { + text-align: right; +} + +[dir="rtl"] .peer:checked ~ .rtl\:peer-checked\:after\:-translate-x-full::after { + content: var(--tw-content); + --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)); +} + +@media (prefers-color-scheme: dark) { + .dark\:block { + display: block; + } + + .dark\:hidden { + display: none; + } + + .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-divide-opacity)); + } + + .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-divide-opacity)); + } + + .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(31 41 55 / var(--tw-divide-opacity)); + } + + .dark\:divide-red-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-divide-opacity)); + } + + .dark\:divide-yellow-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(133 77 14 / var(--tw-divide-opacity)); + } + + .dark\:divide-green-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(22 101 52 / var(--tw-divide-opacity)); + } + + .dark\:divide-indigo-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(55 48 163 / var(--tw-divide-opacity)); + } + + .dark\:divide-purple-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(107 33 168 / var(--tw-divide-opacity)); + } + + .dark\:divide-pink-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(157 23 77 / var(--tw-divide-opacity)); + } + + .dark\:divide-blue-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(30 64 175 / var(--tw-divide-opacity)); + } + + .dark\:divide-orange-800 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(154 52 18 / var(--tw-divide-opacity)); + } + + .dark\:border-gray-700 { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); + } + + .dark\:border-gray-800 { + --tw-border-opacity: 1; + border-color: rgb(31 41 55 / var(--tw-border-opacity)); + } + + .dark\:border-blue-400 { + --tw-border-opacity: 1; + border-color: rgb(96 165 250 / var(--tw-border-opacity)); + } + + .dark\:border-gray-500 { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + } + + .dark\:border-red-400 { + --tw-border-opacity: 1; + border-color: rgb(248 113 113 / var(--tw-border-opacity)); + } + + .dark\:border-green-400 { + --tw-border-opacity: 1; + border-color: rgb(74 222 128 / var(--tw-border-opacity)); + } + + .dark\:border-yellow-300 { + --tw-border-opacity: 1; + border-color: rgb(253 224 71 / var(--tw-border-opacity)); + } + + .dark\:border-indigo-400 { + --tw-border-opacity: 1; + border-color: rgb(129 140 248 / var(--tw-border-opacity)); + } + + .dark\:border-purple-400 { + --tw-border-opacity: 1; + border-color: rgb(192 132 252 / var(--tw-border-opacity)); + } + + .dark\:border-pink-400 { + --tw-border-opacity: 1; + border-color: rgb(244 114 182 / var(--tw-border-opacity)); + } + + .dark\:border-gray-600 { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + } + + .dark\:border-blue-500 { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)); + } + + .dark\:border-green-500 { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity)); + } + + .dark\:border-red-500 { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); + } + + .dark\:border-gray-900 { + --tw-border-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-border-opacity)); + } + + .dark\:border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + } + + .dark\:\!border-gray-600 { + --tw-border-opacity: 1 !important; + border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important; + } + + .dark\:border-red-800 { + --tw-border-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-border-opacity)); + } + + .dark\:border-yellow-800 { + --tw-border-opacity: 1; + border-color: rgb(133 77 14 / var(--tw-border-opacity)); + } + + .dark\:border-green-800 { + --tw-border-opacity: 1; + border-color: rgb(22 101 52 / var(--tw-border-opacity)); + } + + .dark\:border-indigo-800 { + --tw-border-opacity: 1; + border-color: rgb(55 48 163 / var(--tw-border-opacity)); + } + + .dark\:border-purple-800 { + --tw-border-opacity: 1; + border-color: rgb(107 33 168 / var(--tw-border-opacity)); + } + + .dark\:border-pink-800 { + --tw-border-opacity: 1; + border-color: rgb(157 23 77 / var(--tw-border-opacity)); + } + + .dark\:border-blue-800 { + --tw-border-opacity: 1; + border-color: rgb(30 64 175 / var(--tw-border-opacity)); + } + + .dark\:border-orange-800 { + --tw-border-opacity: 1; + border-color: rgb(154 52 18 / var(--tw-border-opacity)); + } + + .dark\:bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + } + + .dark\:bg-gray-600 { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); + } + + .dark\:bg-blue-900 { + --tw-bg-opacity: 1; + background-color: rgb(30 58 138 / var(--tw-bg-opacity)); + } + + .dark\:bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + } + + .dark\:bg-red-900 { + --tw-bg-opacity: 1; + background-color: rgb(127 29 29 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-900 { + --tw-bg-opacity: 1; + background-color: rgb(20 83 45 / var(--tw-bg-opacity)); + } + + .dark\:bg-yellow-900 { + --tw-bg-opacity: 1; + background-color: rgb(113 63 18 / var(--tw-bg-opacity)); + } + + .dark\:bg-indigo-900 { + --tw-bg-opacity: 1; + background-color: rgb(49 46 129 / var(--tw-bg-opacity)); + } + + .dark\:bg-purple-900 { + --tw-bg-opacity: 1; + background-color: rgb(88 28 135 / var(--tw-bg-opacity)); + } + + .dark\:bg-pink-900 { + --tw-bg-opacity: 1; + background-color: rgb(131 24 67 / var(--tw-bg-opacity)); + } + + .dark\:bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); + } + + .dark\:bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-600 { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); + } + + .dark\:bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); + } + + .dark\:bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); + } + + .dark\:bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-500 { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + } + + .dark\:bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); + } + + .dark\:bg-purple-500 { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity)); + } + + .dark\:bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + } + + .dark\:bg-yellow-400 { + --tw-bg-opacity: 1; + background-color: rgb(250 204 21 / var(--tw-bg-opacity)); + } + + .dark\:bg-transparent { + background-color: transparent; + } + + .dark\:bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); + } + + .dark\:bg-gray-800\/30 { + background-color: rgb(31 41 55 / 0.3); + } + + .dark\:bg-inherit { + background-color: inherit; + } + + .dark\:bg-indigo-500 { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity)); + } + + .dark\:bg-yellow-600 { + --tw-bg-opacity: 1; + background-color: rgb(202 138 4 / var(--tw-bg-opacity)); + } + + .dark\:bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-400 { + --tw-bg-opacity: 1; + background-color: rgb(74 222 128 / var(--tw-bg-opacity)); + } + + .dark\:bg-indigo-400 { + --tw-bg-opacity: 1; + background-color: rgb(129 140 248 / var(--tw-bg-opacity)); + } + + .dark\:bg-purple-400 { + --tw-bg-opacity: 1; + background-color: rgb(192 132 252 / var(--tw-bg-opacity)); + } + + .dark\:bg-pink-400 { + --tw-bg-opacity: 1; + background-color: rgb(244 114 182 / var(--tw-bg-opacity)); + } + + .dark\:bg-blue-400 { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); + } + + .dark\:bg-red-800 { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity)); + } + + .dark\:bg-yellow-800 { + --tw-bg-opacity: 1; + background-color: rgb(133 77 14 / var(--tw-bg-opacity)); + } + + .dark\:bg-green-800 { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); + } + + .dark\:bg-blue-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); + } + + .dark\:bg-indigo-800 { + --tw-bg-opacity: 1; + background-color: rgb(55 48 163 / var(--tw-bg-opacity)); + } + + .dark\:bg-purple-800 { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); + } + + .dark\:bg-orange-700 { + --tw-bg-opacity: 1; + background-color: rgb(194 65 12 / var(--tw-bg-opacity)); + } + + .dark\:bg-orange-800 { + --tw-bg-opacity: 1; + background-color: rgb(154 52 18 / var(--tw-bg-opacity)); + } + + .dark\:bg-opacity-80 { + --tw-bg-opacity: 0.8; + } + + .dark\:fill-gray-300 { + fill: #d1d5db; + } + + .dark\:text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .dark\:text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); + } + + .dark\:text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); + } + + .dark\:text-blue-300 { + --tw-text-opacity: 1; + color: rgb(147 197 253 / var(--tw-text-opacity)); + } + + .dark\:text-red-300 { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); + } + + .dark\:text-green-300 { + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity)); + } + + .dark\:text-yellow-300 { + --tw-text-opacity: 1; + color: rgb(253 224 71 / var(--tw-text-opacity)); + } + + .dark\:text-indigo-300 { + --tw-text-opacity: 1; + color: rgb(165 180 252 / var(--tw-text-opacity)); + } + + .dark\:text-purple-300 { + --tw-text-opacity: 1; + color: rgb(216 180 254 / var(--tw-text-opacity)); + } + + .dark\:text-pink-300 { + --tw-text-opacity: 1; + color: rgb(249 168 212 / var(--tw-text-opacity)); + } + + .dark\:text-blue-400 { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity)); + } + + .dark\:text-red-400 { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity)); + } + + .dark\:text-green-400 { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity)); + } + + .dark\:text-indigo-400 { + --tw-text-opacity: 1; + color: rgb(129 140 248 / var(--tw-text-opacity)); + } + + .dark\:text-purple-400 { + --tw-text-opacity: 1; + color: rgb(192 132 252 / var(--tw-text-opacity)); + } + + .dark\:text-pink-400 { + --tw-text-opacity: 1; + color: rgb(244 114 182 / var(--tw-text-opacity)); + } + + .dark\:text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); + } + + .dark\:text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); + } + + .dark\:text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity)); + } + + .dark\:text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); + } + + .dark\:\!text-white { + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; + } + + .dark\:text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + } + + .dark\:text-gray-100 { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); + } + + .dark\:text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); + } + + .dark\:text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + } + + .dark\:text-blue-100 { + --tw-text-opacity: 1; + color: rgb(219 234 254 / var(--tw-text-opacity)); + } + + .dark\:text-green-100 { + --tw-text-opacity: 1; + color: rgb(220 252 231 / var(--tw-text-opacity)); + } + + .dark\:text-red-100 { + --tw-text-opacity: 1; + color: rgb(254 226 226 / var(--tw-text-opacity)); + } + + .dark\:text-yellow-100 { + --tw-text-opacity: 1; + color: rgb(254 249 195 / var(--tw-text-opacity)); + } + + .dark\:text-purple-100 { + --tw-text-opacity: 1; + color: rgb(243 232 255 / var(--tw-text-opacity)); + } + + .dark\:text-indigo-100 { + --tw-text-opacity: 1; + color: rgb(224 231 255 / var(--tw-text-opacity)); + } + + .dark\:text-pink-100 { + --tw-text-opacity: 1; + color: rgb(252 231 243 / var(--tw-text-opacity)); + } + + .dark\:text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); + } + + .dark\:text-red-200 { + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity)); + } + + .dark\:text-yellow-200 { + --tw-text-opacity: 1; + color: rgb(254 240 138 / var(--tw-text-opacity)); + } + + .dark\:text-green-200 { + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity)); + } + + .dark\:text-blue-200 { + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity)); + } + + .dark\:text-indigo-200 { + --tw-text-opacity: 1; + color: rgb(199 210 254 / var(--tw-text-opacity)); + } + + .dark\:text-purple-200 { + --tw-text-opacity: 1; + color: rgb(233 213 255 / var(--tw-text-opacity)); + } + + .dark\:text-orange-200 { + --tw-text-opacity: 1; + color: rgb(254 215 170 / var(--tw-text-opacity)); + } + + .dark\:text-orange-400 { + --tw-text-opacity: 1; + color: rgb(251 146 60 / var(--tw-text-opacity)); + } + + .dark\:decoration-blue-600 { + text-decoration-color: #2563eb; + } + + .dark\:placeholder-gray-400::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity)); + } + + .dark\:placeholder-green-500::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(34 197 94 / var(--tw-placeholder-opacity)); + } + + .dark\:placeholder-red-500::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(239 68 68 / var(--tw-placeholder-opacity)); + } + + .dark\:opacity-25 { + opacity: 0.25; + } + + .dark\:shadow-gray-800 { + --tw-shadow-color: #1f2937; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-blue-800 { + --tw-shadow-color: #1e40af; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-gray-900 { + --tw-shadow-color: #111827; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-green-800 { + --tw-shadow-color: #166534; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-gray-700 { + --tw-shadow-color: #374151; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-purple-800 { + --tw-shadow-color: #6b21a8; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-red-800 { + --tw-shadow-color: #991b1b; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-yellow-700 { + --tw-shadow-color: #a16207; + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-gray-800\/80 { + --tw-shadow-color: rgb(31 41 55 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-blue-800\/80 { + --tw-shadow-color: rgb(30 64 175 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-green-800\/80 { + --tw-shadow-color: rgb(22 101 52 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-purple-800\/80 { + --tw-shadow-color: rgb(107 33 168 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-red-800\/80 { + --tw-shadow-color: rgb(153 27 27 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-yellow-800\/80 { + --tw-shadow-color: rgb(133 77 14 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-cyan-800\/80 { + --tw-shadow-color: rgb(21 94 117 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-teal-800\/80 { + --tw-shadow-color: rgb(17 94 89 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-lime-800\/80 { + --tw-shadow-color: rgb(63 98 18 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:shadow-pink-800\/80 { + --tw-shadow-color: rgb(157 23 77 / 0.8); + --tw-shadow: var(--tw-shadow-colored); + } + + .dark\:ring-gray-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); + } + + .dark\:ring-gray-900 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity)); + } + + .dark\:ring-offset-gray-800 { + --tw-ring-offset-color: #1f2937; + } + + .dark\:first-letter\:text-gray-100::first-letter { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); + } + + .dark\:before\:shadow-\[-10px_0_50px_65px_rgba\(16\2c 24\2c 39\2c 1\)\]::before { + content: var(--tw-content); + --tw-shadow: -10px 0 50px 65px rgba(16,24,39,1); + --tw-shadow-colored: -10px 0 50px 65px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .dark\:after\:shadow-\[10px_0_50px_65px_rgba\(16\2c 24\2c 39\2c 1\)\]::after { + content: var(--tw-content); + --tw-shadow: 10px 0 50px 65px rgba(16,24,39,1); + --tw-shadow-colored: 10px 0 50px 65px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .odd\:dark\:bg-gray-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + } + + .odd\:dark\:bg-blue-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); + } + + .odd\:dark\:bg-green-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); + } + + .odd\:dark\:bg-red-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity)); + } + + .odd\:dark\:bg-yellow-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(133 77 14 / var(--tw-bg-opacity)); + } + + .odd\:dark\:bg-purple-800:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); + } + + .even\:dark\:bg-gray-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + } + + .even\:dark\:bg-blue-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + } + + .even\:dark\:bg-green-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); + } + + .even\:dark\:bg-red-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); + } + + .even\:dark\:bg-yellow-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(161 98 7 / var(--tw-bg-opacity)); + } + + .even\:dark\:bg-purple-700:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); + } + + .dark\:focus-within\:text-white:focus-within { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .dark\:focus-within\:ring-gray-700:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity)); + } + + .dark\:focus-within\:ring-blue-800:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity)); + } + + .dark\:focus-within\:ring-green-800:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity)); + } + + .dark\:focus-within\:ring-purple-900:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(88 28 135 / var(--tw-ring-opacity)); + } + + .dark\:focus-within\:ring-red-900:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity)); + } + + .dark\:focus-within\:ring-yellow-900:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(113 63 18 / var(--tw-ring-opacity)); + } + + .dark\:focus-within\:ring-gray-800:focus-within { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity)); + } + + .dark\:hover\:border-gray-600:hover { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + } + + .dark\:hover\:border-gray-500:hover { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + } + + .hover\:dark\:bg-gray-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-gray-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-blue-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-red-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-green-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-yellow-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(133 77 14 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-indigo-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 48 163 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-purple-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(107 33 168 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-pink-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(157 23 77 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-gray-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-blue-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-green-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-purple-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-red-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-gray-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-blue-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-green-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-purple-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-red-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); + } + + .dark\:hover\:bg-yellow-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(250 204 21 / var(--tw-bg-opacity)); + } + + .dark\:hover\:text-blue-300:hover { + --tw-text-opacity: 1; + color: rgb(147 197 253 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-gray-300:hover { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-red-300:hover { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-green-300:hover { + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-yellow-300:hover { + --tw-text-opacity: 1; + color: rgb(253 224 71 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-indigo-300:hover { + --tw-text-opacity: 1; + color: rgb(165 180 252 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-purple-300:hover { + --tw-text-opacity: 1; + color: rgb(216 180 254 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-pink-300:hover { + --tw-text-opacity: 1; + color: rgb(249 168 212 / var(--tw-text-opacity)); + } + + .dark\:hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .dark\:focus\:border-blue-500:focus { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)); + } + + .dark\:focus\:border-green-500:focus { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity)); + } + + .dark\:focus\:border-red-500:focus { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); + } + + .dark\:focus\:text-white:focus { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .dark\:focus\:ring-gray-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-blue-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-green-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-cyan-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-teal-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-lime-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-red-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-pink-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(157 23 77 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-purple-800:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-teal-700:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(15 118 110 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-red-400:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-green-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-red-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-red-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-green-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-purple-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-teal-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-yellow-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-orange-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-blue-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity)); + } + + .dark\:focus\:ring-gray-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); + } + + .dark\:disabled\:text-gray-500:disabled { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + } + + .group:hover .dark\:group-hover\:bg-gray-800\/60 { + background-color: rgb(31 41 55 / 0.6); + } + + .group:focus .dark\:group-focus\:ring-gray-800\/70 { + --tw-ring-color: rgb(31 41 55 / 0.7); + } + + .peer:focus ~ .dark\:peer-focus\:ring-red-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity)); + } + + .peer:focus ~ .dark\:peer-focus\:ring-green-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity)); + } + + .peer:focus ~ .dark\:peer-focus\:ring-purple-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity)); + } + + .peer:focus ~ .dark\:peer-focus\:ring-yellow-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity)); + } + + .peer:focus ~ .dark\:peer-focus\:ring-teal-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity)); + } + + .peer:focus ~ .dark\:peer-focus\:ring-orange-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(154 52 18 / var(--tw-ring-opacity)); + } + + .peer:focus ~ .dark\:peer-focus\:ring-blue-800 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity)); + } +} + @media (max-width: 480px) { .max-\[480px\]\:w-full { width: 100%; @@ -3014,6 +7137,10 @@ svg.apply-fill path { } @media (min-width: 640px) { + .sm\:order-last { + order: 9999; + } + .sm\:m-2 { margin: 0.5rem; } @@ -3039,10 +7166,38 @@ svg.apply-fill path { margin-right: 1rem; } + .sm\:mb-0 { + margin-bottom: 0px; + } + + .sm\:flex { + display: flex; + } + + .sm\:grid { + display: grid; + } + .sm\:h-24 { height: 6rem; } + .sm\:h-64 { + height: 16rem; + } + + .sm\:h-10 { + height: 2.5rem; + } + + .sm\:h-6 { + height: 1.5rem; + } + + .sm\:h-7 { + height: 1.75rem; + } + .sm\:w-24 { width: 6rem; } @@ -3051,10 +7206,40 @@ svg.apply-fill path { width: 50%; } + .sm\:w-auto { + width: auto; + } + + .sm\:w-10 { + width: 2.5rem; + } + + .sm\:w-6 { + width: 1.5rem; + } + + .sm\:w-96 { + width: 24rem; + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .sm\:flex-nowrap { flex-wrap: nowrap; } + .sm\:divide-x > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); + } + + .sm\:rounded-lg { + border-radius: 0.5rem; + } + .sm\:border-4 { border-width: 4px; } @@ -3067,17 +7252,60 @@ svg.apply-fill path { padding: 0.5rem; } + .sm\:p-5 { + padding: 1.25rem; + } + + .sm\:p-6 { + padding: 1.5rem; + } + + .sm\:p-8 { + padding: 2rem; + } + + .sm\:px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + .sm\:pt-1 { padding-top: 0.25rem; } + .sm\:text-center { + text-align: center; + } + .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } + + .sm\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .sm\:text-xs { + font-size: 0.75rem; + line-height: 1rem; + } + + .sm\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } } @media (min-width: 768px) { + .md\:inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + } + .md\:m-1 { margin: 0.25rem; } @@ -3095,14 +7323,78 @@ svg.apply-fill path { margin-right: 0.5rem; } + .md\:mb-0 { + margin-bottom: 0px; + } + + .md\:mt-0 { + margin-top: 0px; + } + + .md\:block { + display: block; + } + + .md\:flex { + display: flex; + } + .md\:grid { display: grid; } + .md\:hidden { + display: none; + } + .md\:h-8 { height: 2rem; } + .md\:h-auto { + height: auto; + } + + .md\:h-\[262px\] { + height: 262px; + } + + .md\:h-\[42px\] { + height: 42px; + } + + .md\:h-\[95px\] { + height: 95px; + } + + .md\:h-\[294px\] { + height: 294px; + } + + .md\:h-\[278px\] { + height: 278px; + } + + .md\:h-\[21px\] { + height: 21px; + } + + .md\:h-\[8px\] { + height: 8px; + } + + .md\:h-\[682px\] { + height: 682px; + } + + .md\:h-\[654px\] { + height: 654px; + } + + .md\:h-full { + height: 100%; + } + .md\:w-8 { width: 2rem; } @@ -3111,6 +7403,38 @@ svg.apply-fill path { width: 50%; } + .md\:w-48 { + width: 12rem; + } + + .md\:w-\[96px\] { + width: 96px; + } + + .md\:w-2\/3 { + width: 66.666667%; + } + + .md\:w-1\/3 { + width: 33.333333%; + } + + .md\:w-auto { + width: auto; + } + + .md\:max-w-\[512px\] { + max-width: 512px; + } + + .md\:max-w-\[142px\] { + max-width: 142px; + } + + .md\:max-w-\[597px\] { + max-width: 597px; + } + .md\:grid-flow-row { grid-auto-flow: row; } @@ -3119,14 +7443,74 @@ svg.apply-fill path { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .md\:flex-row { flex-direction: row; } + .md\:flex-row-reverse { + flex-direction: row-reverse; + } + .md\:flex-nowrap { flex-wrap: nowrap; } + .md\:items-center { + align-items: center; + } + + .md\:justify-between { + justify-content: space-between; + } + + .md\:gap-8 { + gap: 2rem; + } + + .md\:gap-x-0 { + column-gap: 0px; + } + + .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } + + .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(2rem * var(--tw-space-x-reverse)); + margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); + } + + .md\:space-y-0 > :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)); + } + + .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(0px * var(--tw-divide-y-reverse)); + } + + .md\:rounded-none { + border-radius: 0px; + } + + .md\:border-0 { + border-width: 0px; + } + + .md\:bg-transparent { + background-color: transparent; + } + .md\:p-6 { padding: 1.5rem; } @@ -3135,6 +7519,24 @@ svg.apply-fill path { padding: 0.75rem; } + .md\:p-5 { + padding: 1.25rem; + } + + .md\:p-0 { + padding: 0px; + } + + .md\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .md\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } + .md\:text-6xl { font-size: 3.75rem; line-height: 1; @@ -3144,6 +7546,44 @@ svg.apply-fill path { font-size: 1.25rem; line-height: 1.75rem; } + + .md\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .md\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .md\:font-medium { + font-weight: 500; + } + + .md\:hover\:bg-transparent:hover { + background-color: transparent; + } + + @media (prefers-color-scheme: dark) { + .md\:dark\:bg-transparent { + background-color: transparent; + } + + .md\:dark\:text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .md\:dark\:hover\:bg-transparent:hover { + background-color: transparent; + } + + .md\:dark\:hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + } } @media (min-width: 1024px) { @@ -3160,13 +7600,27 @@ svg.apply-fill path { width: 33.333333%; } + .lg\:max-w-7xl { + max-width: 80rem; + } + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { + .xl\:h-80 { + height: 20rem; + } + .xl\:w-4\/12 { width: 33.333333%; } } + +@media (min-width: 1536px) { + .\32xl\:h-96 { + height: 24rem; + } +} diff --git a/scripts/generateIncludedImages.ts b/scripts/generateIncludedImages.ts index e9336f201..d648df9c9 100644 --- a/scripts/generateIncludedImages.ts +++ b/scripts/generateIncludedImages.ts @@ -107,6 +107,7 @@ function genImages(dryrun = false) { "wikimedia-commons-white", "wikimedia_commons_white", "wikipedia", + "github" ].map((s) => s.toLowerCase()) const dir = fs.readdirSync("./assets/svg") diff --git a/src/Logic/State/FeatureSwitchState.ts b/src/Logic/State/FeatureSwitchState.ts index b20eac3f5..ca2d50508 100644 --- a/src/Logic/State/FeatureSwitchState.ts +++ b/src/Logic/State/FeatureSwitchState.ts @@ -50,7 +50,7 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches { public readonly featureSwitchWelcomeMessage: UIEventSource public readonly featureSwitchCommunityIndex: UIEventSource public readonly featureSwitchExtraLinkEnabled: UIEventSource - public readonly featureSwitchMoreQuests: UIEventSource + public readonly featureSwitchBackToThemeOverview: UIEventSource public readonly featureSwitchShareScreen: UIEventSource public readonly featureSwitchGeolocation: UIEventSource public readonly featureSwitchIsTesting: UIEventSource @@ -118,10 +118,10 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches { true, "Disables/Enables the extraLink button. By default, if in iframe mode and the welcome message is hidden, a popout button to the full mapcomplete instance is shown instead (unless disabled with this switch or another extraLink button is enabled)" ) - this.featureSwitchMoreQuests = FeatureSwitchUtils.initSwitch( - "fs-more-quests", + this.featureSwitchBackToThemeOverview = FeatureSwitchUtils.initSwitch( + "fs-homepage-link", layoutToUse?.enableMoreQuests ?? true, - "Disables/Enables the 'More Quests'-tab in the welcome message" + "Disables/Enables the various links which go back to the index page with the theme overview" ) this.featureSwitchShareScreen = FeatureSwitchUtils.initSwitch( "fs-share-screen", diff --git a/src/Logic/State/UserSettingsMetaTagging.ts b/src/Logic/State/UserSettingsMetaTagging.ts index 6e568c5c3..33a5ae85b 100644 --- a/src/Logic/State/UserSettingsMetaTagging.ts +++ b/src/Logic/State/UserSettingsMetaTagging.ts @@ -1,42 +1,14 @@ import { Utils } from "../../Utils" /** This code is autogenerated - do not edit. Edit ./assets/layers/usersettings/usersettings.json instead */ export class ThemeMetaTagging { - public static readonly themeName = "usersettings" + public static readonly themeName = "usersettings" - public metaTaggging_for_usersettings(feat: { properties: Record }) { - Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_md", () => - feat.properties._description - .match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/) - ?.at(1) - ) - Utils.AddLazyProperty( - feat.properties, - "_d", - () => feat.properties._description?.replace(/</g, "<")?.replace(/>/g, ">") ?? "" - ) - Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_a", () => - ((feat) => { - const e = document.createElement("div") - e.innerHTML = feat.properties._d - return Array.from(e.getElementsByTagName("a")).filter( - (a) => a.href.match(/mastodon|en.osm.town/) !== null - )[0]?.href - })(feat) - ) - Utils.AddLazyProperty(feat.properties, "_mastodon_link", () => - ((feat) => { - const e = document.createElement("div") - e.innerHTML = feat.properties._d - return Array.from(e.getElementsByTagName("a")).filter( - (a) => a.getAttribute("rel")?.indexOf("me") >= 0 - )[0]?.href - })(feat) - ) - Utils.AddLazyProperty( - feat.properties, - "_mastodon_candidate", - () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a - ) - feat.properties["__current_backgroun"] = "initial_value" - } -} + public metaTaggging_for_usersettings(feat: {properties: Record}) { + Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_md', () => feat.properties._description.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)?.at(1) ) + Utils.AddLazyProperty(feat.properties, '_d', () => feat.properties._description?.replace(/</g,'<')?.replace(/>/g,'>') ?? '' ) + Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href }) (feat) ) + Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat) ) + Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a ) + feat.properties['__current_backgroun'] = 'initial_value' + } +} \ No newline at end of file diff --git a/src/StylesheetTestGui.ts b/src/StylesheetTestGui.ts index e862f4701..29b9aa9d8 100644 --- a/src/StylesheetTestGui.ts +++ b/src/StylesheetTestGui.ts @@ -1,5 +1,5 @@ import StylesheetTestGui from "./UI/StylesheetTestGui.svelte" new StylesheetTestGui({ - target: document.getElementById("maindiv"), + target: document.getElementById("main"), }) diff --git a/src/UI/AllThemesGui.svelte b/src/UI/AllThemesGui.svelte index acf1b9ae6..bfcee56b3 100644 --- a/src/UI/AllThemesGui.svelte +++ b/src/UI/AllThemesGui.svelte @@ -148,15 +148,14 @@ - - +

- + @@ -192,7 +191,7 @@ - + diff --git a/src/UI/Base/OpenJosm.svelte b/src/UI/Base/OpenJosm.svelte index c6aaef32b..c576fd919 100644 --- a/src/UI/Base/OpenJosm.svelte +++ b/src/UI/Base/OpenJosm.svelte @@ -34,8 +34,8 @@ {#if $showButton} -
- diff --git a/src/UI/Base/ShareButton.svelte b/src/UI/Base/ShareButton.svelte index e24c10cfd..641ba3fa7 100644 --- a/src/UI/Base/ShareButton.svelte +++ b/src/UI/Base/ShareButton.svelte @@ -1,7 +1,7 @@ - \ No newline at end of file diff --git a/src/assets/svg/Satellite.svelte b/src/assets/svg/Satellite.svelte deleted file mode 100644 index 7c14f3c25..000000000 --- a/src/assets/svg/Satellite.svelte +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/src/assets/svg/Share.svelte b/src/assets/svg/Share.svelte deleted file mode 100644 index 37629f27a..000000000 --- a/src/assets/svg/Share.svelte +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/src/assets/svg/Up.svelte b/src/assets/svg/Up.svelte deleted file mode 100644 index a1a6b3ba8..000000000 --- a/src/assets/svg/Up.svelte +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/src/assets/svg/Upload.svelte b/src/assets/svg/Upload.svelte deleted file mode 100644 index 1552d7132..000000000 --- a/src/assets/svg/Upload.svelte +++ /dev/null @@ -1,4 +0,0 @@ - - \ No newline at end of file diff --git a/src/index.css b/src/index.css index be11f7942..e2c7d5eb8 100644 --- a/src/index.css +++ b/src/index.css @@ -35,8 +35,10 @@ --interactive-foreground: black; --interactive-contrast: #ff00ff; - --button-background: black; + --button-background: #383838; + --button-background-hover: #686868; --button-foreground: white; + --disabled: #DBDBDB; /** * Base colour of interactive elements, mainly the 'subtle button' @@ -57,6 +59,11 @@ --svg-color: #000000; } +@font-face{ + font-family:"Source Sans Pro"; + src:url("/assets/source-sans-pro.regular.ttf") format("woff"); +} + /***********************************************************************\ * Various tweaks and settings to make some behaviours more predictable * \***********************************************************************/ @@ -69,7 +76,12 @@ body { padding: 0; background-color: var(--background-color); color: var(--foreground-color); - font-family: "Helvetica Neue", Arial, sans-serif; + + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 150%; } svg, @@ -165,178 +177,86 @@ input[type="text"] { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ -button.small, -.button.small { - line-height: 1rem; - margin: 0; - margin-left: 0.5rem; - padding: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - height: fit-content; - font-size: unset; - border: 2px solid var(--button-background); - border-radius: 0.5rem; - font-weight: normal; - transition: all 250ms; - --tw-text-opacity: 1; - --tw-bg-opacity: 1; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); +/********* BUTTONS ***********/ + +button, .button { + box-sizing: border-box; + + /* Auto layout */ + display: flex; + column-gap: 0.25rem; + justify-content: center; + align-items: center; + padding: 0.25rem 1rem; + margin: 0.25rem; + + background: var(--background-color); + border: 1px solid var(--foreground-color); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + border-radius: 30px; + + background: var(--background-color); + transition: all 200ms; + } -.button.theme-button { - margin: 0; - margin-top: 0.25rem; - margin-bottom: 0.25rem; +button.w-full { + margin-left: 0; +} - /* Margin should be removed on larger screens */ - @media (min-width: 768px) { +button:hover:not(.disabled):not(.as-link), .button:hover:not(.disabled):not(.as-link) { + background-color: var(--low-interaction-background); +} + + +button:focus, .button:focus { + border-color: var(--interactive-contrast); +} + +button.primary, .button.primary { + color: var(--button-foreground); + background-color: var(--button-background); +} + +button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) { + background-color: var(--button-background-hover); +} + +button.disabled { + border-color: var(--disabled); + color: var(--disabled); +} + +button.primary.disabled, .button.primary.disabled { + color: var(--button-foreground); + background-color: var(--disabled); +} + + +.low-interaction button:hover:not(.disabled):not(.as-link), .low-interaction .button:hover:not(.disabled):not(.as-link) { + box-sizing: border-box; + background-color: var(--interactive-background); +} + +button.as-link { + background-color: unset; + display: inline-flex; + justify-content: start; + border: none; + border-radius: 0; + text-decoration: underline; + box-shadow: none; margin: 0; - margin-top: 0; - margin-bottom: 0; - } - - /* Experimental support for foldable devices */ - @media (horizontal-viewport-segments: 2) { - margin: 0; - margin-top: 0; - margin-bottom: 0; - } + padding: 0; } -button, -.button { - align-items: center; - display: inline-flex; - line-height: 1.25rem; - margin: 0.2rem; - padding: 0.4rem; - padding-left: 0.6rem; - padding-right: 0.6rem; - font-size: large; - font-weight: bold; - border: 2px solid var(--button-background); - border-radius: 0.5rem; - transition: all 250ms; - --tw-text-opacity: 1; - --tw-bg-opacity: 1; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); +/******* Other input elements ******/ + +.hover-alert:hover { + color: var(--catch-detail-color-contrast) } -.button-shadow { - box-shadow: 0 5px 10px #88888888; -} - -button.selected, -.button.selected { - background-color: var(--catch-detail-color); - border-color: var(--catch-detail-color); - - color: var(--catch-detail-foregroundcolor); -} - -button.selected svg path, -.button.selected svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - -button:not(.no-image-background):not(.soft) svg path, -.button:not(.no-image-background):not(.soft) svg path { - fill: var(--interactive-foreground) !important; - transition: all 250ms; -} - -.interactive button, -.interactive .button { - background: var(--interactive-background); - color: var(--interactive-foreground); -} - -button:hover, -.button:hover { - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); - border: 2px solid var(--catch-detail-color-contrast); -} - -button:hover:not(.no-image-background) img, -.button:hover:not(.no-image-background) img { - background: var(--low-interaction-background); - border-radius: 100rem; -} - -button:hover:not(.no-image-background) svg path, -.button:hover:not(.no-image-background) svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - -button.disabled:hover:not(.no-image-background) svg path, -.button.disabled:hover:not(.no-image-background) svg path { - fill: var(--low-interaction-foreground) !important; -} - -button.primary, -.button.primary { - color: var(--button-foreground); - background: var(--button-background); -} - -button.primary:not(.no-image-background) svg path, -.button.primary:not(.no-image-background) svg path { - fill: var(--button-foreground) !important; - transition: all 250ms; -} - -button.disabled.low-interaction, -.button.disabled.low-interaction { - background-color: var(--low-interaction-background-50); -} - -button.disabled, -.button.disabled { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; - box-shadow: none; -} - -button.disabled:hover, -.button.disabled:hover { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; -} - -button.link { - border: none; - text-decoration: underline; - background-color: unset; -} - -button.link:hover { - color: unset; -} - -.interactive button.disabled svg path, -.interactive .button.disabled svg path { - fill: var(--interactive-foreground) !important; -} - -.low-interaction button.disabled svg path, -.low-interaction .button.disabled svg path { - fill: var(--low-interaction-foreground) !important; -} - -.normal-background button.disabled svg path, -.normal-background .button.disabled svg path { - fill: var(--foreground-color) !important; -} - -.links-w-full a:not(.weblate-link) { +.links-w-full a:not(.weblate-link), .links-w-full button.as-link { display: flex; column-gap: 0.25rem; padding-left: 0.5rem; @@ -344,41 +264,6 @@ button.link:hover { width: 100%; } -button.soft, -.button.soft { - border: 2px solid var(--interactive-background); - margin: 0; -} - -button.soft:hover, -.button.soft:hover { - background-color: var(--interactive-background); - color: var(--interactive-foreground); - border: 2px solid var(--catch-detail-color-contrast); -} - -.links-as-button a { - /* - * Let a 'link' mimick a button, but not entirely - */ - padding: 3px; - margin: 0; - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); - border: 2px solid var(--interactive-background); - border-radius: 0.5rem; -} - -.links-as-button a:hover { - background-color: var(--interactive-background); - color: var(--interactive-foregroundcolor); - border-color: var(--catch-detail-color-contrast); -} - -.links-as-button a:hover svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - select { border: 2px solid #00000000; color: var(--foreground-color) !important; diff --git a/src/index.ts b/src/index.ts index 2a22bc245..262e06ad9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,8 +6,8 @@ import { FixedUiElement } from "./UI/Base/FixedUiElement" import Combine from "./UI/Base/Combine" import { SubtleButton } from "./UI/Base/SubtleButton" import { Utils } from "./Utils" -import Download from "./assets/svg/Download.svelte" import Constants from "./Models/Constants" +import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray" function webgl_support() { try { @@ -66,7 +66,7 @@ async function main() { new FixedUiElement(err.toString().split("\n").join("
")).SetClass("block alert"), customDefinition?.length > 0 - ? new SubtleButton(new SvelteUIElement(Download), "Download the raw file").onClick( + ? new SubtleButton(new SvelteUIElement(ArrowDownTray), "Download the raw file").onClick( () => Utils.offerContentsAsDownloadableFile( DetermineLayout.getCustomDefinition(),