diff --git a/package-lock.json b/package-lock.json index d0f08cc..42bc222 100755 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,16 @@ "dependencies": { "@apollo/client": "^3.8.10", "@apollo/link-context": "^2.0.0-beta.3", + "@flavorly/vanilla-components": "^0.7.65", "@headlessui/tailwindcss": "^0.2.0", - "@headlessui/vue": "^1.7.16", + "@headlessui/vue": "^1.7.19", "@heroicons/vue": "^2.0.18", "@lottiefiles/lottie-player": "^2.0.2", "@phosphor-icons/vue": "^2.1.6", + "@popperjs/core": "^2.11.8", "@types/qs": "^6.9.9", "@types/uuid": "^9.0.2", + "@types/vue-select": "^3.16.8", "@vue/apollo-components": "^4.0.0", "@vue/apollo-composable": "^4.0.1", "@vue/apollo-option": "^4.0.0", @@ -46,7 +49,7 @@ "@rushstack/eslint-patch": "^1.5.1", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/forms": "^0.5.6", + "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "^0.5.10", "@tsconfig/node18": "^2.0.1", "@types/file-saver": "^2.0.6", @@ -1131,6 +1134,27 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz", "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==" }, + "node_modules/@flavorly/vanilla-components": { + "version": "0.7.65", + "resolved": "https://registry.npmjs.org/@flavorly/vanilla-components/-/vanilla-components-0.7.65.tgz", + "integrity": "sha512-qgXio7iR83WoR+PD6htb+7PReG9AJ8yAngmtjAyKYeMJKo7Dvxm4Wgi6NrwskqtyuS45MQvrfEr4+uAJLjwPbA==", + "dependencies": { + "@headlessui/vue": "^1.7.4", + "@popperjs/core": "^2.11.6" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "v-calendar": "^3.0.3" + }, + "peerDependencies": { + "@headlessui/vue": "^1.7.0", + "@popperjs/core": "^2.11.6", + "v-calendar": "^3.0.3", + "vue": "^3.2.45" + } + }, "node_modules/@graphql-typed-document-node/core": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz", @@ -1466,6 +1490,21 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@pkgr/utils/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "extraneous": true + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz", @@ -1651,6 +1690,12 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==", + "optional": true + }, "node_modules/@types/node": { "version": "18.19.17", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.17.tgz", @@ -1676,6 +1721,12 @@ "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==", "optional": true }, + "node_modules/@types/resize-observer-browser": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz", + "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==", + "optional": true + }, "node_modules/@types/semver": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz", @@ -1698,6 +1749,52 @@ "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==" }, + "node_modules/@types/vue-select": { + "version": "3.16.8", + "resolved": "https://registry.npmjs.org/@types/vue-select/-/vue-select-3.16.8.tgz", + "integrity": "sha512-ZBovlBrWf/wnPqCmMw24ryIC7ghQLfIBmkl1qssqBGONdx7yOmi/GLwtPxll/6UwXWGNWMeokleOgVAZPis+Ag==", + "dependencies": { + "vue": "^2.0.0" + } + }, + "node_modules/@types/vue-select/node_modules/@vue/compiler-sfc": { + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz", + "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==", + "dependencies": { + "@babel/parser": "^7.23.5", + "postcss": "^8.4.14", + "source-map": "^0.6.1" + }, + "optionalDependencies": { + "prettier": "^1.18.2 || ^2.0.0" + } + }, + "node_modules/@types/vue-select/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "optional": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/@types/vue-select/node_modules/vue": { + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz", + "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==", + "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.", + "dependencies": { + "@vue/compiler-sfc": "2.7.16", + "csstype": "^3.1.0" + } + }, "node_modules/@types/web-bluetooth": { "version": "0.0.20", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", @@ -3699,6 +3796,31 @@ "node": ">=14" } }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "optional": true, + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, + "node_modules/date-fns-tz": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz", + "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==", + "optional": true, + "peerDependencies": { + "date-fns": ">=2.0.0" + } + }, "node_modules/dayjs": { "version": "1.11.10", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", @@ -6443,7 +6565,7 @@ "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "devOptional": true }, "node_modules/lodash.castarray": { "version": "4.4.0", @@ -8374,6 +8496,14 @@ "node": ">=8" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -9363,6 +9493,24 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/v-calendar": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz", + "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==", + "optional": true, + "dependencies": { + "@types/lodash": "^4.14.165", + "@types/resize-observer-browser": "^0.1.7", + "date-fns": "^2.16.1", + "date-fns-tz": "^2.0.0", + "lodash": "^4.17.20", + "vue-screen-utils": "^1.0.0-beta.13" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "vue": "^3.2.0" + } + }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -9632,6 +9780,15 @@ "vue": "^3.2.0" } }, + "node_modules/vue-screen-utils": { + "version": "1.0.0-beta.13", + "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz", + "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==", + "optional": true, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/vue-tailwind-datepicker": { "version": "1.6.5", "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.5.tgz", diff --git a/package.json b/package.json index 9365670..76301b0 100755 --- a/package.json +++ b/package.json @@ -17,13 +17,16 @@ "dependencies": { "@apollo/client": "^3.8.10", "@apollo/link-context": "^2.0.0-beta.3", + "@flavorly/vanilla-components": "^0.7.65", "@headlessui/tailwindcss": "^0.2.0", - "@headlessui/vue": "^1.7.16", + "@headlessui/vue": "^1.7.19", "@heroicons/vue": "^2.0.18", "@lottiefiles/lottie-player": "^2.0.2", "@phosphor-icons/vue": "^2.1.6", + "@popperjs/core": "^2.11.8", "@types/qs": "^6.9.9", "@types/uuid": "^9.0.2", + "@types/vue-select": "^3.16.8", "@vue/apollo-components": "^4.0.0", "@vue/apollo-composable": "^4.0.1", "@vue/apollo-option": "^4.0.0", @@ -53,7 +56,7 @@ "@rushstack/eslint-patch": "^1.5.1", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/forms": "^0.5.6", + "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "^0.5.10", "@tsconfig/node18": "^2.0.1", "@types/file-saver": "^2.0.6", diff --git a/src/assets/css/style.css b/src/assets/css/style.css index ee4d47d..a899e7f 100755 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -979,6 +979,11 @@ body { inset: 0px; } +.inset-x-0 { + left: 0px; + right: 0px; +} + .inset-y-0 { top: 0px; bottom: 0px; @@ -1044,12 +1049,32 @@ body { top: 0.875rem; } +.top-5 { + top: 1.25rem; +} + +.top-\[-5px\] { + top: -5px; +} + +.top-\[0\.8rem\] { + top: 0.8rem; +} + .top-full { top: 100%; } -.top-16 { - top: 4rem; +.top-px { + top: 1px; +} + +.-z-\[1\] { + z-index: -1; +} + +.z-0 { + z-index: 0; } .z-10 { @@ -1060,6 +1085,10 @@ body { z-index: 20; } +.z-30 { + z-index: 30; +} + .z-40 { z-index: 40; } @@ -1068,6 +1097,22 @@ body { z-index: 50; } +.z-\[100\] { + z-index: 100; +} + +.z-\[30\] { + z-index: 30; +} + +.z-\[40\] { + z-index: 40; +} + +.z-\[99\] { + z-index: 99; +} + .order-last { order: 9999; } @@ -1076,10 +1121,79 @@ body { grid-column: span 7 / span 7; } +.-m-px { + margin: -1px; +} + +.m-0 { + margin: 0px; +} + +.m-0\.5 { + margin: 0.125rem; +} + +.m-1 { + margin: 0.25rem; +} + +.m-3 { + margin: 0.75rem; +} + +.m-3\.5 { + margin: 0.875rem; +} + .m-auto { margin: auto; } +.-mx-1 { + margin-left: -0.25rem; + margin-right: -0.25rem; +} + +.-mx-1\.5 { + margin-left: -0.375rem; + margin-right: -0.375rem; +} + +.-mx-2 { + margin-left: -0.5rem; + margin-right: -0.5rem; +} + +.-my-1 { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} + +.-my-1\.5 { + margin-top: -0.375rem; + margin-bottom: -0.375rem; +} + +.-my-2 { + margin-top: -0.5rem; + margin-bottom: -0.5rem; +} + +.mx-0 { + margin-left: 0px; + margin-right: 0px; +} + +.mx-0\.5 { + margin-left: 0.125rem; + margin-right: 0.125rem; +} + +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; @@ -1090,6 +1204,11 @@ body { margin-right: 0.75rem; } +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -1100,11 +1219,28 @@ body { margin-bottom: 0.25rem; } +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + .my-auto { margin-top: auto; margin-bottom: auto; } +.-ml-1 { + margin-left: -0.25rem; +} + +.-ml-1\.5 { + margin-left: -0.375rem; +} + +.-ml-px { + margin-left: -1px; +} + .-mr-1 { margin-right: -0.25rem; } @@ -1113,6 +1249,10 @@ body { margin-right: -3rem; } +.-mr-2 { + margin-right: -0.5rem; +} + .-mt-px { margin-top: -1px; } @@ -1145,6 +1285,14 @@ body { margin-inline-end: 0.25rem; } +.ml-0 { + margin-left: 0px; +} + +.ml-0\.5 { + margin-left: 0.125rem; +} + .ml-1 { margin-left: 0.25rem; } @@ -1161,6 +1309,10 @@ body { margin-left: 1rem; } +.ml-auto { + margin-left: auto; +} + .mr-1 { margin-right: 0.25rem; } @@ -1244,6 +1396,10 @@ body { display: inline-block; } +.inline { + display: inline; +} + .flex { display: flex; } @@ -1264,6 +1420,14 @@ body { height: 0px; } +.h-1 { + height: 0.25rem; +} + +.h-1\.5 { + height: 0.375rem; +} + .h-10 { height: 2.5rem; } @@ -1280,10 +1444,26 @@ body { height: 4rem; } +.h-2 { + height: 0.5rem; +} + +.h-20 { + height: 5rem; +} + +.h-28 { + height: 7rem; +} + .h-3 { height: 0.75rem; } +.h-3\.5 { + height: 0.875rem; +} + .h-4 { height: 1rem; } @@ -1357,6 +1537,10 @@ body { max-height: 1000px; } +.max-h-\[10rem\] { + max-height: 10rem; +} + .max-h-\[calc\(100vh-140px\)\] { max-height: calc(100vh - 140px); } @@ -1373,6 +1557,14 @@ body { width: 0px; } +.w-1 { + width: 0.25rem; +} + +.w-1\.5 { + width: 0.375rem; +} + .w-1\/2 { width: 50%; } @@ -1381,6 +1573,10 @@ body { width: 2.5rem; } +.w-11 { + width: 2.75rem; +} + .w-12 { width: 3rem; } @@ -1401,14 +1597,30 @@ body { width: 0.625rem; } +.w-20 { + width: 5rem; +} + +.w-28 { + width: 7rem; +} + .w-3 { width: 0.75rem; } +.w-3\.5 { + width: 0.875rem; +} + .w-4 { width: 1rem; } +.w-48 { + width: 12rem; +} + .w-5 { width: 1.25rem; } @@ -1421,6 +1633,14 @@ body { width: 1.5rem; } +.w-64 { + width: 16rem; +} + +.w-72 { + width: 18rem; +} + .w-8 { width: 2rem; } @@ -1433,6 +1653,14 @@ body { width: 2.25rem; } +.w-96 { + width: 24rem; +} + +.w-\[10px\] { + width: 10px; +} + .w-\[170px\] { width: 170px; } @@ -1445,6 +1673,10 @@ body { width: 266px; } +.w-\[60px\] { + width: 60px; +} + .w-auto { width: auto; } @@ -1453,8 +1685,20 @@ body { width: 100%; } -.w-72 { - width: 18rem; +.w-px { + width: 1px; +} + +.w-screen { + width: 100vw; +} + +.min-w-0 { + min-width: 0px; +} + +.min-w-full { + min-width: 100%; } .max-w-2xl { @@ -1469,6 +1713,14 @@ body { max-width: 100%; } +.max-w-lg { + max-width: 32rem; +} + +.max-w-md { + max-width: 28rem; +} + .max-w-sm { max-width: 24rem; } @@ -1509,15 +1761,28 @@ body { flex-grow: 1; } +.table-fixed { + table-layout: fixed; +} + .origin-top-left { transform-origin: top left; } +.origin-top-right { + transform-origin: top right; +} + .-translate-x-full { --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)); } +.-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-y-2\/4 { --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)); @@ -1538,6 +1803,16 @@ body { 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-5 { + --tw-translate-x: 1.25rem; + 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-full { + --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)); +} + .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)); @@ -1579,6 +1854,27 @@ body { 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)); } +@keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + @keyframes spin { to { transform: rotate(360deg); @@ -1607,6 +1903,10 @@ body { user-select: none; } +.resize-y { + resize: vertical; +} + .scroll-py-2 { scroll-padding-top: 0.5rem; scroll-padding-bottom: 0.5rem; @@ -1630,6 +1930,10 @@ body { grid-auto-flow: column; } +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1654,10 +1958,18 @@ body { place-items: center; } +.content-center { + align-content: center; +} + .items-start { align-items: flex-start; } +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } @@ -1718,6 +2030,16 @@ body { row-gap: 0.25rem; } +.gap-y-2 { + row-gap: 0.5rem; +} + +.-space-y-px > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(-1px * var(--tw-space-y-reverse)); +} + .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); @@ -1730,6 +2052,18 @@ body { margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse))); } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + 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-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); @@ -1748,18 +2082,17 @@ body { margin-bottom: calc(0.75rem * var(--tw-space-y-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)); -} - .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-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / 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)); @@ -1777,6 +2110,10 @@ body { overflow: hidden; } +.overflow-x-auto { + overflow-x: auto; +} + .overflow-y-auto { overflow-y: auto; } @@ -1831,6 +2168,10 @@ body { border-radius: 0.375rem; } +.rounded-none { + border-radius: 0px; +} + .rounded-sm { border-radius: 0.125rem; } @@ -1849,6 +2190,16 @@ body { border-bottom-left-radius: 1rem; } +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.rounded-b-md { + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} + .rounded-b-none { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; @@ -1859,11 +2210,46 @@ body { border-bottom-left-radius: 9999px; } +.rounded-l-lg { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.rounded-l-md { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} + +.rounded-l-none { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.rounded-r { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; +} + .rounded-r-full { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; } +.rounded-r-lg { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.rounded-r-md { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; +} + +.rounded-r-none { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; @@ -1874,11 +2260,53 @@ body { border-top-right-radius: 1rem; } +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} + .rounded-t-none { border-top-left-radius: 0px; border-top-right-radius: 0px; } +.rounded-bl-lg { + border-bottom-left-radius: 0.5rem; +} + +.rounded-bl-md { + border-bottom-left-radius: 0.375rem; +} + +.rounded-br-lg { + border-bottom-right-radius: 0.5rem; +} + +.rounded-br-md { + border-bottom-right-radius: 0.375rem; +} + +.rounded-tl-lg { + border-top-left-radius: 0.5rem; +} + +.rounded-tl-md { + border-top-left-radius: 0.375rem; +} + +.rounded-tr-lg { + border-top-right-radius: 0.5rem; +} + +.rounded-tr-md { + border-top-right-radius: 0.375rem; +} + .border { border-width: 1px; } @@ -1887,6 +2315,10 @@ body { border-width: 0px; } +.border-2 { + border-width: 2px; +} + .border-b { border-bottom-width: 1px; } @@ -1895,6 +2327,10 @@ body { border-bottom-width: 0px; } +.border-l-4 { + border-left-width: 4px; +} + .border-r { border-right-width: 1px; } @@ -1903,6 +2339,10 @@ body { border-top-width: 1px; } +.border-t-0 { + border-top-width: 0px; +} + .border-solid { border-style: solid; } @@ -1915,30 +2355,123 @@ body { border-color: rgb(0 0 0 / .1); } +.border-blue-400 { + --tw-border-opacity: 1; + border-color: rgb(96 165 250 / var(--tw-border-opacity)); +} + +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.border-gray-400 { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} + .border-gray-600 { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); } +.border-green-200 { + --tw-border-opacity: 1; + border-color: rgb(187 247 208 / var(--tw-border-opacity)); +} + +.border-green-400 { + --tw-border-opacity: 1; + border-color: rgb(74 222 128 / var(--tw-border-opacity)); +} + +.border-orange-200 { + --tw-border-opacity: 1; + border-color: rgb(254 215 170 / var(--tw-border-opacity)); +} + +.border-primary-200 { + --tw-border-opacity: 1; + border-color: rgb(154 189 198 / var(--tw-border-opacity)); +} + +.border-primary-400 { + --tw-border-opacity: 1; + border-color: rgb(53 124 141 / var(--tw-border-opacity)); +} + .border-primary-500 { --tw-border-opacity: 1; border-color: rgb(3 91 113 / var(--tw-border-opacity)); } +.border-purple-200 { + --tw-border-opacity: 1; + border-color: rgb(233 213 255 / var(--tw-border-opacity)); +} + +.border-red-200 { + --tw-border-opacity: 1; + border-color: rgb(255 153 153 / var(--tw-border-opacity)); +} + +.border-red-300 { + --tw-border-opacity: 1; + border-color: rgb(255 102 102 / var(--tw-border-opacity)); +} + +.border-red-400 { + --tw-border-opacity: 1; + border-color: rgb(255 51 51 / var(--tw-border-opacity)); +} + .border-transparent { border-color: transparent; } +.border-yellow-400 { + --tw-border-opacity: 1; + border-color: rgb(255 255 51 / var(--tw-border-opacity)); +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } +.bg-black\/50 { + background-color: rgb(0 0 0 / 0.5); +} + +.bg-blue-100 { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); +} + +.bg-blue-300\/10 { + background-color: rgb(147 197 253 / 0.1); +} + +.bg-blue-400 { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); +} + +.bg-blue-50 { + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity)); +} + +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1969,11 +2502,38 @@ body { background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } +.bg-gray-600\/50 { + background-color: rgb(75 85 99 / 0.5); +} + +.bg-gray-700\/50 { + background-color: rgb(55 65 81 / 0.5); +} + .bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } +.bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); +} + +.bg-green-300\/10 { + background-color: rgb(134 239 172 / 0.1); +} + +.bg-green-400 { + --tw-bg-opacity: 1; + background-color: rgb(74 222 128 / var(--tw-bg-opacity)); +} + +.bg-green-50 { + --tw-bg-opacity: 1; + background-color: rgb(240 253 244 / var(--tw-bg-opacity)); +} + .bg-green-500 { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -1984,6 +2544,11 @@ body { background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } +.bg-indigo-500 { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity)); +} + .bg-indigo-600 { --tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity)); @@ -1994,11 +2559,34 @@ body { background-color: rgb(243 247 249 / var(--tw-bg-opacity)); } +.bg-orange-100 { + --tw-bg-opacity: 1; + background-color: rgb(255 237 213 / var(--tw-bg-opacity)); +} + +.bg-orange-500 { + --tw-bg-opacity: 1; + background-color: rgb(249 115 22 / var(--tw-bg-opacity)); +} + +.bg-orange-600 { + --tw-bg-opacity: 1; + background-color: rgb(234 88 12 / var(--tw-bg-opacity)); +} + .bg-primary-100 { --tw-bg-opacity: 1; background-color: rgb(205 222 227 / var(--tw-bg-opacity)); } +.bg-primary-100\/50 { + background-color: rgb(205 222 227 / 0.5); +} + +.bg-primary-300\/10 { + background-color: rgb(104 157 170 / 0.1); +} + .bg-primary-400 { --tw-bg-opacity: 1; background-color: rgb(53 124 141 / var(--tw-bg-opacity)); @@ -2014,16 +2602,59 @@ body { background-color: rgb(3 91 113 / var(--tw-bg-opacity)); } +.bg-primary-600 { + --tw-bg-opacity: 1; + background-color: rgb(2 73 90 / var(--tw-bg-opacity)); +} + +.bg-purple-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 232 255 / var(--tw-bg-opacity)); +} + +.bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); +} + .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(255 204 204 / var(--tw-bg-opacity)); } +.bg-red-300 { + --tw-bg-opacity: 1; + background-color: rgb(255 102 102 / var(--tw-bg-opacity)); +} + +.bg-red-300\/10 { + background-color: rgb(255 102 102 / 0.1); +} + +.bg-red-400 { + --tw-bg-opacity: 1; + background-color: rgb(255 51 51 / var(--tw-bg-opacity)); +} + +.bg-red-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 229 229 / var(--tw-bg-opacity)); +} + +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); +} + .bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(204 0 0 / var(--tw-bg-opacity)); } +.bg-red-600\/50 { + background-color: rgb(204 0 0 / 0.5); +} + .bg-secondary-100 { --tw-bg-opacity: 1; background-color: rgb(204 235 239 / var(--tw-bg-opacity)); @@ -2063,26 +2694,25 @@ body { background-color: rgb(255 255 204 / var(--tw-bg-opacity)); } +.bg-yellow-300\/10 { + background-color: rgb(255 255 102 / 0.1); +} + +.bg-yellow-400 { + --tw-bg-opacity: 1; + background-color: rgb(255 255 51 / var(--tw-bg-opacity)); +} + +.bg-yellow-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 255 229 / var(--tw-bg-opacity)); +} + .bg-yellow-600 { --tw-bg-opacity: 1; background-color: rgb(204 204 0 / var(--tw-bg-opacity)); } -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); -} - -.bg-blue-200 { - --tw-bg-opacity: 1; - background-color: rgb(191 219 254 / var(--tw-bg-opacity)); -} - -.bg-secondary-300 { - --tw-bg-opacity: 1; - background-color: rgb(102 194 208 / var(--tw-bg-opacity)); -} - .bg-opacity-100 { --tw-bg-opacity: 1; } @@ -2111,6 +2741,10 @@ body { --tw-bg-opacity: 0.8; } +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + .bg-multiselect-caret { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e"); } @@ -2127,6 +2761,20 @@ body { background-image: none; } +.from-gray-100 { + --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.to-gray-200 { + --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position); +} + +.bg-cover { + background-size: cover; +} + .bg-center { background-position: center; } @@ -2135,6 +2783,14 @@ body { background-repeat: no-repeat; } +.fill-\[\#4f46e5\] { + fill: #4f46e5; +} + +.fill-current { + fill: currentColor; +} + .fill-gray-500 { fill: #6b7280; } @@ -2143,10 +2799,18 @@ body { fill: #4b5563; } +.fill-green-300 { + fill: #86efac; +} + .fill-green-600 { fill: #16a34a; } +.fill-orange-300 { + fill: #fdba74; +} + .fill-primary-300 { fill: #689daa; } @@ -2155,6 +2819,14 @@ body { fill: #035b71; } +.fill-purple-300 { + fill: #d8b4fe; +} + +.fill-red-300 { + fill: #ff6666; +} + .fill-red-600 { fill: #cc0000; } @@ -2172,10 +2844,19 @@ body { object-fit: contain; } +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} + .p-0 { padding: 0px; } +.p-0\.5 { + padding: 0.125rem; +} + .p-1 { padding: 0.25rem; } @@ -2192,6 +2873,10 @@ body { padding: 1rem; } +.p-5 { + padding: 1.25rem; +} + .px-0 { padding-left: 0px; padding-right: 0px; @@ -2232,6 +2917,11 @@ body { padding-right: 1rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; @@ -2282,19 +2972,47 @@ body { padding-bottom: 0.75rem; } +.py-3\.5 { + padding-top: 0.875rem; + padding-bottom: 0.875rem; +} + .py-4 { padding-top: 1rem; padding-bottom: 1rem; } +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.py-\[5px\] { + padding-top: 5px; + padding-bottom: 5px; +} + +.py-px { + padding-top: 1px; + padding-bottom: 1px; +} + +.pb-10 { + padding-bottom: 2.5rem; +} + +.pb-2 { + padding-bottom: 0.5rem; } .pb-4 { @@ -2313,6 +3031,10 @@ body { padding-left: 2.75rem; } +.pl-12 { + padding-left: 3rem; +} + .pl-2 { padding-left: 0.5rem; } @@ -2325,6 +3047,14 @@ body { padding-left: 0.875rem; } +.pr-0 { + padding-right: 0px; +} + +.pr-0\.5 { + padding-right: 0.125rem; +} + .pr-10 { padding-right: 2.5rem; } @@ -2361,6 +3091,10 @@ body { padding-right: 1.75rem; } +.pr-8 { + padding-right: 2rem; +} + .pt-0 { padding-top: 0px; } @@ -2369,6 +3103,14 @@ body { padding-top: 0.125rem; } +.pt-1 { + padding-top: 0.25rem; +} + +.pt-10 { + padding-top: 2.5rem; +} + .pt-2 { padding-top: 0.5rem; } @@ -2385,10 +3127,18 @@ body { text-align: center; } +.text-right { + text-align: right; +} + .text-start { text-align: start; } +.align-middle { + vertical-align: middle; +} + .font-sans { font-family: Plus Jakarta Sans, sans-serif; } @@ -2465,6 +3215,10 @@ body { font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } +.leading-4 { + line-height: 1rem; +} + .leading-5 { line-height: 1.25rem; } @@ -2501,6 +3255,10 @@ body { letter-spacing: 0.025em; } +.tracking-wider { + letter-spacing: 0.05em; +} + .text-aside { --tw-text-opacity: 1; color: rgb(46 53 54 / var(--tw-text-opacity)); @@ -2511,6 +3269,26 @@ body { color: rgb(96 165 250 / var(--tw-text-opacity)); } +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + +.text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +.text-blue-700 { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} + +.text-blue-800 { + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity)); +} + .text-dark { --tw-text-opacity: 1; color: rgb(21 22 23 / var(--tw-text-opacity)); @@ -2536,6 +3314,10 @@ body { color: rgb(107 114 128 / var(--tw-text-opacity)); } +.text-gray-500\/90 { + color: rgb(107 114 128 / 0.9); +} + .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); @@ -2566,11 +3348,31 @@ body { color: rgb(74 222 128 / var(--tw-text-opacity)); } +.text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity)); +} + .text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity)); } +.text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity)); +} + +.text-green-800 { + --tw-text-opacity: 1; + color: rgb(22 101 52 / var(--tw-text-opacity)); +} + +.text-green-900 { + --tw-text-opacity: 1; + color: rgb(20 83 45 / var(--tw-text-opacity)); +} + .text-indigo-600 { --tw-text-opacity: 1; color: rgb(79 70 229 / var(--tw-text-opacity)); @@ -2586,6 +3388,21 @@ body { color: rgb(234 88 12 / var(--tw-text-opacity)); } +.text-orange-700 { + --tw-text-opacity: 1; + color: rgb(194 65 12 / var(--tw-text-opacity)); +} + +.text-orange-900 { + --tw-text-opacity: 1; + color: rgb(124 45 18 / var(--tw-text-opacity)); +} + +.text-primary-400 { + --tw-text-opacity: 1; + color: rgb(53 124 141 / var(--tw-text-opacity)); +} + .text-primary-50 { --tw-text-opacity: 1; color: rgb(230 239 241 / var(--tw-text-opacity)); @@ -2596,21 +3413,71 @@ body { color: rgb(3 91 113 / var(--tw-text-opacity)); } +.text-primary-600 { + --tw-text-opacity: 1; + color: rgb(2 73 90 / var(--tw-text-opacity)); +} + +.text-primary-700 { + --tw-text-opacity: 1; + color: rgb(2 73 90 / var(--tw-text-opacity)); +} + .text-primary-800 { --tw-text-opacity: 1; color: rgb(1 36 45 / var(--tw-text-opacity)); } +.text-primary-900 { + --tw-text-opacity: 1; + color: rgb(1 18 23 / var(--tw-text-opacity)); +} + +.text-purple-700 { + --tw-text-opacity: 1; + color: rgb(126 34 206 / var(--tw-text-opacity)); +} + +.text-purple-900 { + --tw-text-opacity: 1; + color: rgb(88 28 135 / var(--tw-text-opacity)); +} + +.text-red-300 { + --tw-text-opacity: 1; + color: rgb(255 102 102 / var(--tw-text-opacity)); +} + .text-red-400 { --tw-text-opacity: 1; color: rgb(255 51 51 / var(--tw-text-opacity)); } +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(255 0 0 / var(--tw-text-opacity)); +} + .text-red-600 { --tw-text-opacity: 1; color: rgb(204 0 0 / var(--tw-text-opacity)); } +.text-red-700 { + --tw-text-opacity: 1; + color: rgb(153 0 0 / var(--tw-text-opacity)); +} + +.text-red-800 { + --tw-text-opacity: 1; + color: rgb(102 0 0 / var(--tw-text-opacity)); +} + +.text-red-900 { + --tw-text-opacity: 1; + color: rgb(51 0 0 / var(--tw-text-opacity)); +} + .text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity)); @@ -2645,15 +3512,39 @@ body { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-yellow-400 { + --tw-text-opacity: 1; + color: rgb(255 255 51 / var(--tw-text-opacity)); +} + +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(255 255 0 / var(--tw-text-opacity)); +} + +.text-yellow-600 { + --tw-text-opacity: 1; + color: rgb(204 204 0 / var(--tw-text-opacity)); +} + .text-yellow-700 { --tw-text-opacity: 1; color: rgb(153 153 0 / var(--tw-text-opacity)); } +.text-yellow-800 { + --tw-text-opacity: 1; + color: rgb(102 102 0 / var(--tw-text-opacity)); +} + .text-opacity-40 { --tw-text-opacity: 0.4; } +.underline { + text-decoration-line: underline; +} + .placeholder-gray-500::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(107 114 128 / var(--tw-placeholder-opacity)); @@ -2664,6 +3555,34 @@ body { color: rgb(107 114 128 / var(--tw-placeholder-opacity)); } +.placeholder-gray-500\/60::-moz-placeholder { + color: rgb(107 114 128 / 0.6); +} + +.placeholder-gray-500\/60::placeholder { + color: rgb(107 114 128 / 0.6); +} + +.placeholder-red-300::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(255 102 102 / var(--tw-placeholder-opacity)); +} + +.placeholder-red-300::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(255 102 102 / var(--tw-placeholder-opacity)); +} + +.placeholder-red-400::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(255 51 51 / var(--tw-placeholder-opacity)); +} + +.placeholder-red-400::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(255 51 51 / var(--tw-placeholder-opacity)); +} + .opacity-0 { opacity: 0; } @@ -2688,6 +3607,10 @@ body { opacity: 0.5; } +.opacity-60 { + opacity: 0.6; +} + .opacity-75 { opacity: 0.75; } @@ -2708,6 +3631,12 @@ body { 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); @@ -2762,6 +3691,12 @@ body { 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-inset { --tw-ring-inset: inset; } @@ -2771,19 +3706,115 @@ body { --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity)); } +.ring-blue-400\/50 { + --tw-ring-color: rgb(96 165 250 / 0.5); +} + .ring-gray-300 { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } -.ring-black\/5 { - --tw-ring-color: rgb(0 0 0 / 0.05); +.ring-gray-400\/50 { + --tw-ring-color: rgb(156 163 175 / 0.5); +} + +.ring-gray-500\/20 { + --tw-ring-color: rgb(107 114 128 / 0.2); +} + +.ring-gray-900\/10 { + --tw-ring-color: rgb(17 24 39 / 0.1); +} + +.ring-green-400\/50 { + --tw-ring-color: rgb(74 222 128 / 0.5); +} + +.ring-green-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity)); +} + +.ring-green-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity)); +} + +.ring-orange-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity)); +} + +.ring-orange-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity)); +} + +.ring-primary-400\/50 { + --tw-ring-color: rgb(53 124 141 / 0.5); +} + +.ring-primary-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); +} + +.ring-primary-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity)); +} + +.ring-purple-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity)); +} + +.ring-purple-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity)); +} + +.ring-red-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 102 102 / var(--tw-ring-opacity)); +} + +.ring-red-400 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 51 51 / var(--tw-ring-opacity)); +} + +.ring-red-400\/50 { + --tw-ring-color: rgb(255 51 51 / 0.5); +} + +.ring-red-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity)); +} + +.ring-red-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(204 0 0 / var(--tw-ring-opacity)); +} + +.ring-yellow-400\/50 { + --tw-ring-color: rgb(255 255 51 / 0.5); } .ring-opacity-5 { --tw-ring-opacity: 0.05; } +.ring-offset-2 { + --tw-ring-offset-width: 2px; +} + +.ring-offset-white { + --tw-ring-offset-color: #fff; +} + .blur { --tw-blur: blur(8px); 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); @@ -2799,6 +3830,12 @@ body { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-blur-sm { + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + .transition { 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; @@ -2895,6 +3932,188 @@ body { color: rgb(156 163 175 / var(--tw-text-opacity)); } +.before\:visible::before { + content: var(--tw-content); + visibility: visible; +} + +.before\:absolute::before { + content: var(--tw-content); + position: absolute; +} + +.before\:h-2::before { + content: var(--tw-content); + height: 0.5rem; +} + +.before\:w-2::before { + content: var(--tw-content); + width: 0.5rem; +} + +.before\:rotate-45::before { + content: var(--tw-content); + --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)); +} + +.before\:rounded-sm::before { + content: var(--tw-content); + border-radius: 0.125rem; +} + +.before\:border::before { + content: var(--tw-content); + border-width: 1px; +} + +.before\:border-b-0::before { + content: var(--tw-content); + border-bottom-width: 0px; +} + +.before\:border-r-0::before { + content: var(--tw-content); + border-right-width: 0px; +} + +.before\:border-gray-300::before { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.before\:bg-white::before { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.after\:absolute::after { + content: var(--tw-content); + position: absolute; +} + +.after\:-inset-0::after { + content: var(--tw-content); + inset: -0px; +} + +.after\:-inset-0\.5::after { + content: var(--tw-content); + inset: -0.125rem; +} + +.after\:inline-block::after { + content: var(--tw-content); + display: inline-block; +} + +.after\:h-5::after { + content: var(--tw-content); + height: 1.25rem; +} + +.after\:w-full::after { + content: var(--tw-content); + width: 100%; +} + +.after\:min-w-\[2rem\]::after { + content: var(--tw-content); + min-width: 2rem; +} + +@keyframes pulse { + 50% { + content: var(--tw-content); + opacity: .5; + } +} + +.after\:animate-pulse::after { + content: var(--tw-content); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.after\:rounded::after { + content: var(--tw-content); + border-radius: 0.25rem; +} + +.after\:bg-gradient-to-r::after { + content: var(--tw-content); + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.after\:from-gray-100::after { + content: var(--tw-content); + --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.after\:to-gray-200::after { + content: var(--tw-content); + --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position); +} + +.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\:duration-500::after { + content: var(--tw-content); + transition-duration: 500ms; +} + +.after\:content-\[\'\'\]::after { + --tw-content: ''; + content: var(--tw-content); +} + +.checked\:border-0:checked { + border-width: 0px; +} + +.checked\:bg-primary-100:checked { + --tw-bg-opacity: 1; + background-color: rgb(205 222 227 / var(--tw-bg-opacity)); +} + +.checked\:bg-red-100:checked { + --tw-bg-opacity: 1; + background-color: rgb(255 204 204 / var(--tw-bg-opacity)); +} + +.checked\:bg-red-600:checked { + --tw-bg-opacity: 1; + background-color: rgb(204 0 0 / var(--tw-bg-opacity)); +} + +.checked\:font-semibold:checked { + font-weight: 600; +} + +.checked\:text-primary-900:checked { + --tw-text-opacity: 1; + color: rgb(1 18 23 / var(--tw-text-opacity)); +} + +.checked\:text-red-900:checked { + --tw-text-opacity: 1; + color: rgb(51 0 0 / var(--tw-text-opacity)); +} + +.checked\:text-white:checked { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .hover\:border-primary-500:hover { --tw-border-opacity: 1; border-color: rgb(3 91 113 / var(--tw-border-opacity)); @@ -2905,11 +4124,34 @@ body { background-color: rgb(0 0 0 / 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\/20:hover { + background-color: rgb(96 165 250 / 0.2); +} + +.hover\:bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / 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-green-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); +} + +.hover\:bg-green-400\/20:hover { + background-color: rgb(74 222 128 / 0.2); +} + .hover\:bg-indigo-500:hover { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity)); @@ -2930,11 +4172,29 @@ body { background-color: rgb(154 189 198 / var(--tw-bg-opacity)); } +.hover\:bg-primary-400\/20:hover { + background-color: rgb(53 124 141 / 0.2); +} + .hover\:bg-primary-600:hover { --tw-bg-opacity: 1; background-color: rgb(2 73 90 / var(--tw-bg-opacity)); } +.hover\:bg-red-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 204 204 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 153 153 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-400\/20:hover { + background-color: rgb(255 51 51 / 0.2); +} + .hover\:bg-red-500:hover { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); @@ -2945,6 +4205,15 @@ body { background-color: rgb(2 73 90 / var(--tw-bg-opacity)); } +.hover\:bg-yellow-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 255 204 / var(--tw-bg-opacity)); +} + +.hover\:bg-yellow-400\/20:hover { + background-color: rgb(255 255 51 / 0.2); +} + .hover\:bg-yellow-500:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 0 / var(--tw-bg-opacity)); @@ -2954,11 +4223,26 @@ body { --tw-bg-opacity: 0.1; } +.hover\:text-gray-400:hover { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.hover\:text-gray-500:hover { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + .hover\:text-primary-500:hover { --tw-text-opacity: 1; color: rgb(3 91 113 / var(--tw-text-opacity)); } +.hover\:text-red-800:hover { + --tw-text-opacity: 1; + color: rgb(102 0 0 / var(--tw-text-opacity)); +} + .hover\:text-vtd-primary-700:hover { --tw-text-opacity: 1; color: rgb(2 73 90 / var(--tw-text-opacity)); @@ -2968,30 +4252,102 @@ body { opacity: 0.8; } +.hover\:shadow-sm:hover { + --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); +} + +.focus\:z-10:focus { + z-index: 10; +} + .focus\:border-0:focus { border-width: 0px; } +.focus\:border-b:focus { + border-bottom-width: 1px; +} + +.focus\:border-t:focus { + border-top-width: 1px; +} + +.focus\:border-primary-500:focus { + --tw-border-opacity: 1; + border-color: rgb(3 91 113 / var(--tw-border-opacity)); +} + +.focus\:border-red-400:focus { + --tw-border-opacity: 1; + border-color: rgb(255 51 51 / var(--tw-border-opacity)); +} + .focus\:border-vtd-primary-300:focus { --tw-border-opacity: 1; border-color: rgb(104 157 170 / var(--tw-border-opacity)); } +.focus\:bg-gray-300\/10:focus { + background-color: rgb(209 213 219 / 0.1); +} + +.focus\:bg-primary-500:focus { + --tw-bg-opacity: 1; + background-color: rgb(3 91 113 / var(--tw-bg-opacity)); +} + +.focus\:bg-red-500:focus { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); +} + .focus\:bg-vtd-primary-50:focus { --tw-bg-opacity: 1; background-color: rgb(230 239 241 / var(--tw-bg-opacity)); } +.focus\:text-gray-200:focus { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + .focus\:text-gray-500:focus { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } +.focus\:text-gray-600:focus { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.focus\:text-red-600:focus { + --tw-text-opacity: 1; + color: rgb(204 0 0 / var(--tw-text-opacity)); +} + .focus\:text-vtd-primary-600:focus { --tw-text-opacity: 1; color: rgb(2 73 90 / var(--tw-text-opacity)); } +.focus\:text-white:focus { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.focus\:underline:focus { + text-decoration-line: underline; +} + +.focus\:shadow-none:focus { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -3023,6 +4379,21 @@ body { --tw-ring-inset: inset; } +.focus\:ring-blue-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(37 99 235 / 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-green-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity)); +} + .focus\:ring-indigo-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); @@ -3033,6 +4404,21 @@ body { --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); } +.focus\:ring-primary-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity)); +} + +.focus\:ring-red-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity)); +} + +.focus\:ring-red-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(204 0 0 / var(--tw-ring-opacity)); +} + .focus\:ring-vtd-primary-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); @@ -3043,10 +4429,23 @@ body { --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); } +.focus\:ring-yellow-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(204 204 0 / var(--tw-ring-opacity)); +} + .focus\:ring-opacity-10:focus { --tw-ring-opacity: 0.1; } +.focus\:ring-opacity-50:focus { + --tw-ring-opacity: 0.5; +} + +.focus\:ring-opacity-70:focus { + --tw-ring-opacity: 0.7; +} + .focus\:ring-offset-0:focus { --tw-ring-offset-width: 0px; } @@ -3055,6 +4454,26 @@ body { --tw-ring-offset-width: 2px; } +.focus\:ring-offset-blue-50:focus { + --tw-ring-offset-color: #eff6ff; +} + +.focus\:ring-offset-green-50:focus { + --tw-ring-offset-color: #f0fdf4; +} + +.focus\:ring-offset-red-50:focus { + --tw-ring-offset-color: #ffe5e5; +} + +.focus\:ring-offset-white:focus { + --tw-ring-offset-color: #fff; +} + +.focus\:ring-offset-yellow-50:focus { + --tw-ring-offset-color: #ffffe5; +} + .focus-visible\:outline:focus-visible { outline-style: solid; } @@ -3077,15 +4496,21 @@ body { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus-visible\:ring-primary-600:focus-visible { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity)); +} + +.focus-visible\:ring-red-500:focus-visible { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity)); +} + .focus-visible\:ring-white:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); } -.focus-visible\:ring-white\/75:focus-visible { - --tw-ring-color: rgb(255 255 255 / 0.75); -} - .focus-visible\:ring-opacity-75:focus-visible { --tw-ring-opacity: 0.75; } @@ -3132,10 +4557,23 @@ body { color: rgb(53 124 141 / var(--tw-text-opacity)); } +.disabled\:opacity-50:disabled { + opacity: 0.5; +} + +.group:hover .group-hover\:visible { + visibility: visible; +} + .group:hover .group-hover\:block { display: block; } +.group:hover .group-hover\:bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + .group:hover .group-hover\:bg-primary-500 { --tw-bg-opacity: 1; background-color: rgb(3 91 113 / var(--tw-bg-opacity)); @@ -3172,11 +4610,747 @@ body { opacity: 0.6; } +.group:focus .group-focus\:visible { + visibility: visible; +} + .peer:checked ~ .peer-checked\:text-primary-500 { --tw-text-opacity: 1; color: rgb(3 91 113 / var(--tw-text-opacity)); } +:is(.dark .dark\:divide-gray-700) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-divide-opacity)); +} + +:is(.dark .dark\:divide-gray-700\/90) > :not([hidden]) ~ :not([hidden]) { + border-color: rgb(55 65 81 / 0.9); +} + +:is(.dark .dark\:divide-gray-800) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(31 41 55 / var(--tw-divide-opacity)); +} + +:is(.dark .dark\:divide-gray-900) > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-divide-opacity)); +} + +:is(.dark .dark\:border) { + border-width: 1px; +} + +:is(.dark .dark\:border-blue-600) { + --tw-border-opacity: 1; + border-color: rgb(37 99 235 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-gray-500) { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-gray-600) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-gray-700) { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-green-500) { + --tw-border-opacity: 1; + border-color: rgb(34 197 94 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-green-600) { + --tw-border-opacity: 1; + border-color: rgb(22 163 74 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-orange-500) { + --tw-border-opacity: 1; + border-color: rgb(249 115 22 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-primary-500) { + --tw-border-opacity: 1; + border-color: rgb(3 91 113 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-purple-500) { + --tw-border-opacity: 1; + border-color: rgb(168 85 247 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-red-500) { + --tw-border-opacity: 1; + border-color: rgb(255 0 0 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-red-600) { + --tw-border-opacity: 1; + border-color: rgb(204 0 0 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:border-yellow-600) { + --tw-border-opacity: 1; + border-color: rgb(204 204 0 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:bg-blue-200) { + --tw-bg-opacity: 1; + background-color: rgb(191 219 254 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-blue-600\/10) { + background-color: rgb(37 99 235 / 0.1); +} + +:is(.dark .dark\:bg-gray-600) { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-gray-700) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-gray-700\/50) { + background-color: rgb(55 65 81 / 0.5); +} + +:is(.dark .dark\:bg-gray-800) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-gray-800\/50) { + background-color: rgb(31 41 55 / 0.5); +} + +:is(.dark .dark\:bg-gray-800\/70) { + background-color: rgb(31 41 55 / 0.7); +} + +:is(.dark .dark\:bg-gray-900) { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-gray-900\/80) { + background-color: rgb(17 24 39 / 0.8); +} + +:is(.dark .dark\:bg-green-200) { + --tw-bg-opacity: 1; + background-color: rgb(187 247 208 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-green-500) { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-green-500\/30) { + background-color: rgb(34 197 94 / 0.3); +} + +:is(.dark .dark\:bg-green-600\/10) { + background-color: rgb(22 163 74 / 0.1); +} + +:is(.dark .dark\:bg-green-700) { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-orange-500) { + --tw-bg-opacity: 1; + background-color: rgb(249 115 22 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-orange-500\/30) { + background-color: rgb(249 115 22 / 0.3); +} + +:is(.dark .dark\:bg-orange-700) { + --tw-bg-opacity: 1; + background-color: rgb(194 65 12 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-primary-300) { + --tw-bg-opacity: 1; + background-color: rgb(104 157 170 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-primary-400) { + --tw-bg-opacity: 1; + background-color: rgb(53 124 141 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-primary-500) { + --tw-bg-opacity: 1; + background-color: rgb(3 91 113 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-primary-500\/20) { + background-color: rgb(3 91 113 / 0.2); +} + +:is(.dark .dark\:bg-primary-500\/60) { + background-color: rgb(3 91 113 / 0.6); +} + +:is(.dark .dark\:bg-primary-600\/10) { + background-color: rgb(2 73 90 / 0.1); +} + +:is(.dark .dark\:bg-purple-500) { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-purple-500\/30) { + background-color: rgb(168 85 247 / 0.3); +} + +:is(.dark .dark\:bg-purple-700) { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-red-200) { + --tw-bg-opacity: 1; + background-color: rgb(255 153 153 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-red-500) { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-red-500\/20) { + background-color: rgb(255 0 0 / 0.2); +} + +:is(.dark .dark\:bg-red-500\/30) { + background-color: rgb(255 0 0 / 0.3); +} + +:is(.dark .dark\:bg-red-500\/70) { + background-color: rgb(255 0 0 / 0.7); +} + +:is(.dark .dark\:bg-red-600\/10) { + background-color: rgb(204 0 0 / 0.1); +} + +:is(.dark .dark\:bg-red-700) { + --tw-bg-opacity: 1; + background-color: rgb(153 0 0 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-yellow-200) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 153 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:bg-yellow-600\/10) { + background-color: rgb(204 204 0 / 0.1); +} + +:is(.dark .dark\:bg-opacity-50) { + --tw-bg-opacity: 0.5; +} + +:is(.dark .dark\:from-gray-500) { + --tw-gradient-from: #6b7280 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +:is(.dark .dark\:to-gray-700) { + --tw-gradient-to: #374151 var(--tw-gradient-to-position); +} + +:is(.dark .dark\:fill-\[\#fff\]) { + fill: #fff; +} + +:is(.dark .dark\:text-black) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-blue-200) { + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-blue-400) { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-blue-700) { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-blue-900) { + --tw-text-opacity: 1; + color: rgb(30 58 138 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-blue-900\/90) { + color: rgb(30 58 138 / 0.9); +} + +:is(.dark .dark\:text-gray-200) { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-300) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-400) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-50) { + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-600) { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-green-200) { + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-green-400) { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-green-600) { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-green-700) { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-green-900) { + --tw-text-opacity: 1; + color: rgb(20 83 45 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-green-900\/90) { + color: rgb(20 83 45 / 0.9); +} + +:is(.dark .dark\:text-primary-200) { + --tw-text-opacity: 1; + color: rgb(154 189 198 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-primary-400) { + --tw-text-opacity: 1; + color: rgb(53 124 141 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-200) { + --tw-text-opacity: 1; + color: rgb(255 153 153 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-300) { + --tw-text-opacity: 1; + color: rgb(255 102 102 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-300\/70) { + color: rgb(255 102 102 / 0.7); +} + +:is(.dark .dark\:text-red-400) { + --tw-text-opacity: 1; + color: rgb(255 51 51 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-600) { + --tw-text-opacity: 1; + color: rgb(204 0 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-700) { + --tw-text-opacity: 1; + color: rgb(153 0 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-900) { + --tw-text-opacity: 1; + color: rgb(51 0 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-red-900\/90) { + color: rgb(51 0 0 / 0.9); +} + +:is(.dark .dark\:text-vtd-primary-400) { + --tw-text-opacity: 1; + color: rgb(53 124 141 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-yellow-200) { + --tw-text-opacity: 1; + color: rgb(255 255 153 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-yellow-400) { + --tw-text-opacity: 1; + color: rgb(255 255 51 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-yellow-600) { + --tw-text-opacity: 1; + color: rgb(204 204 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-yellow-700) { + --tw-text-opacity: 1; + color: rgb(153 153 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-yellow-900) { + --tw-text-opacity: 1; + color: rgb(51 51 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:text-yellow-900\/90) { + color: rgb(51 51 0 / 0.9); +} + +:is(.dark .dark\:text-opacity-70) { + --tw-text-opacity: 0.7; +} + +:is(.dark .dark\:ring-gray-200\/20) { + --tw-ring-color: rgb(229 231 235 / 0.2); +} + +:is(.dark .dark\:ring-gray-600\/60) { + --tw-ring-color: rgb(75 85 99 / 0.6); +} + +:is(.dark .dark\:ring-red-400) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 51 51 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:ring-red-500\/60) { + --tw-ring-color: rgb(255 0 0 / 0.6); +} + +:is(.dark .dark\:ring-white\/10) { + --tw-ring-color: rgb(255 255 255 / 0.1); +} + +:is(.dark .dark\:ring-white\/20) { + --tw-ring-color: rgb(255 255 255 / 0.2); +} + +:is(.dark .dark\:ring-white\/30) { + --tw-ring-color: rgb(255 255 255 / 0.3); +} + +:is(.dark .dark\:ring-offset-gray-900) { + --tw-ring-offset-color: #111827; +} + +:is(.dark .before\:dark\:border-gray-700)::before { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); +} + +:is(.dark .before\:dark\:bg-gray-900)::before { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:after\:from-gray-500)::after { + content: var(--tw-content); + --tw-gradient-from: #6b7280 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +:is(.dark .dark\:after\:to-gray-700)::after { + content: var(--tw-content); + --tw-gradient-to: #374151 var(--tw-gradient-to-position); +} + +:is(.dark .checked\:dark\:bg-primary-300):checked { + --tw-bg-opacity: 1; + background-color: rgb(104 157 170 / var(--tw-bg-opacity)); +} + +:is(.dark .checked\:dark\:bg-red-300):checked { + --tw-bg-opacity: 1; + background-color: rgb(255 102 102 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:checked\:bg-primary-600:checked) { + --tw-bg-opacity: 1; + background-color: rgb(2 73 90 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:checked\:bg-red-600:checked) { + --tw-bg-opacity: 1; + background-color: rgb(204 0 0 / var(--tw-bg-opacity)); +} + +:is(.dark .checked\:dark\:text-black):checked { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:hover\:bg-blue-300:hover) { + --tw-bg-opacity: 1; + background-color: rgb(147 197 253 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:hover\:bg-blue-700\/20:hover) { + background-color: rgb(29 78 216 / 0.2); +} + +:is(.dark .dark\:hover\:bg-gray-700:hover) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:hover\:bg-green-300:hover) { + --tw-bg-opacity: 1; + background-color: rgb(134 239 172 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:hover\:bg-green-700\/20:hover) { + background-color: rgb(21 128 61 / 0.2); +} + +:is(.dark .dark\:hover\:bg-primary-400\/20:hover) { + background-color: rgb(53 124 141 / 0.2); +} + +:is(.dark .dark\:hover\:bg-primary-700\/20:hover) { + background-color: rgb(2 73 90 / 0.2); +} + +:is(.dark .dark\:hover\:bg-red-300:hover) { + --tw-bg-opacity: 1; + background-color: rgb(255 102 102 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:hover\:bg-red-400\/20:hover) { + background-color: rgb(255 51 51 / 0.2); +} + +:is(.dark .dark\:hover\:bg-red-700\/20:hover) { + background-color: rgb(153 0 0 / 0.2); +} + +:is(.dark .dark\:hover\:bg-yellow-300:hover) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 102 / var(--tw-bg-opacity)); +} + +:is(.dark .dark\:hover\:bg-yellow-700\/20:hover) { + background-color: rgb(153 153 0 / 0.2); +} + +:is(.dark .dark\:hover\:text-gray-100:hover) { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:hover\:text-gray-300:hover) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:hover\:text-red-200:hover) { + --tw-text-opacity: 1; + color: rgb(255 153 153 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:hover\:text-vtd-primary-300:hover) { + --tw-text-opacity: 1; + color: rgb(104 157 170 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:focus\:border-primary-600:focus) { + --tw-border-opacity: 1; + border-color: rgb(2 73 90 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:focus\:border-red-400:focus) { + --tw-border-opacity: 1; + border-color: rgb(255 51 51 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:focus\:border-vtd-primary-500:focus) { + --tw-border-opacity: 1; + border-color: rgb(3 91 113 / var(--tw-border-opacity)); +} + +:is(.dark .dark\:focus\:bg-primary-500\/20:focus) { + background-color: rgb(3 91 113 / 0.2); +} + +:is(.dark .dark\:focus\:bg-red-500\/20:focus) { + background-color: rgb(255 0 0 / 0.2); +} + +:is(.dark .dark\:focus\:bg-opacity-50:focus) { + --tw-bg-opacity: 0.5; +} + +:is(.dark .dark\:focus\:text-vtd-primary-300:focus) { + --tw-text-opacity: 1; + color: rgb(104 157 170 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:focus\:text-white:focus) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +:is(.dark .dark\:focus\:ring-blue-800:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-green-800:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-primary-500:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-primary-600:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-red-400:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 51 51 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-red-500:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-red-800:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(102 0 0 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-yellow-800:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(102 102 0 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-opacity-20:focus) { + --tw-ring-opacity: 0.2; +} + +:is(.dark .dark\:focus\:ring-opacity-25:focus) { + --tw-ring-opacity: 0.25; +} + +:is(.dark .dark\:focus\:ring-offset-blue-200:focus) { + --tw-ring-offset-color: #bfdbfe; +} + +:is(.dark .dark\:focus\:ring-offset-gray-800:focus) { + --tw-ring-offset-color: #1f2937; +} + +:is(.dark .dark\:focus\:ring-offset-gray-900:focus) { + --tw-ring-offset-color: #111827; +} + +:is(.dark .dark\:focus\:ring-offset-green-200:focus) { + --tw-ring-offset-color: #bbf7d0; +} + +:is(.dark .dark\:focus\:ring-offset-red-200:focus) { + --tw-ring-offset-color: #ff9999; +} + +:is(.dark .dark\:focus\:ring-offset-yellow-200:focus) { + --tw-ring-offset-color: #ffff99; +} + +:is(.dark .dark\:focus-visible\:ring-red-500:focus-visible) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity)); +} + +:is(.dark .group:hover .dark\:group-hover\:bg-gray-600) { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + @media (min-width: 640px) { .sm\:static { position: static; @@ -3186,6 +5360,10 @@ body { position: relative; } + .sm\:left-auto { + left: auto; + } + .sm\:z-auto { z-index: auto; } @@ -3194,6 +5372,10 @@ body { order: 0; } + .sm\:col-span-2 { + grid-column: span 2 / span 2; + } + .sm\:col-start-1 { grid-column-start: 1; } @@ -3241,6 +5423,10 @@ body { margin-left: 1rem; } + .sm\:mr-1 { + margin-right: 0.25rem; + } + .sm\:mr-2 { margin-right: 0.5rem; } @@ -3273,6 +5459,18 @@ body { margin-top: 1.5rem; } + .sm\:mt-px { + margin-top: 1px; + } + + .sm\:block { + display: block; + } + + .sm\:inline { + display: inline; + } + .sm\:flex { display: flex; } @@ -3305,10 +5503,18 @@ body { max-width: 32rem; } + .sm\:max-w-md { + max-width: 28rem; + } + .sm\:max-w-sm { max-width: 24rem; } + .sm\:max-w-xs { + max-width: 20rem; + } + .sm\:flex-1 { flex: 1 1 0%; } @@ -3334,6 +5540,10 @@ body { grid-auto-flow: row dense; } + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -3342,6 +5552,10 @@ body { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .sm\:flex-row { + flex-direction: row; + } + .sm\:flex-row-reverse { flex-direction: row-reverse; } @@ -3362,18 +5576,33 @@ body { justify-content: flex-start; } + .sm\:justify-end { + justify-content: flex-end; + } + .sm\:justify-between { justify-content: space-between; } + .sm\:gap-2 { + gap: 0.5rem; + } + .sm\:gap-3 { gap: 0.75rem; } - .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(2.5rem * var(--tw-space-x-reverse)); - margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse))); + .sm\:gap-4 { + gap: 1rem; + } + + .sm\:gap-x-2 { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + } + + .sm\:gap-y-0 { + row-gap: 0px; } .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { @@ -3398,6 +5627,17 @@ body { --tw-space-x-reverse: 1; } + .sm\: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)); + } + + .sm\:divide-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); + } + .sm\:overflow-visible { overflow: visible; } @@ -3446,6 +5686,16 @@ body { padding-right: 1rem; } + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; @@ -3456,6 +5706,11 @@ body { padding-bottom: 1rem; } + .sm\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } + .sm\:pb-4 { padding-bottom: 1rem; } @@ -3464,6 +5719,10 @@ body { padding-right: 1.5rem; } + .sm\:pt-0 { + padding-top: 0px; + } + .sm\:text-left { text-align: left; } @@ -3491,6 +5750,10 @@ body { --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); } + + .sm\:duration-700 { + transition-duration: 700ms; + } } @media (min-width: 768px) { @@ -3733,45 +5996,3 @@ body { .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) { text-align: right; } - -@media (prefers-color-scheme: dark) { - .dark\:bg-opacity-50 { - --tw-bg-opacity: 0.5; - } - - .dark\:text-vtd-primary-400 { - --tw-text-opacity: 1; - color: rgb(53 124 141 / var(--tw-text-opacity)); - } - - .dark\:text-opacity-70 { - --tw-text-opacity: 0.7; - } - - .dark\:hover\:text-vtd-primary-300:hover { - --tw-text-opacity: 1; - color: rgb(104 157 170 / var(--tw-text-opacity)); - } - - .dark\:focus\:border-vtd-primary-500:focus { - --tw-border-opacity: 1; - border-color: rgb(3 91 113 / var(--tw-border-opacity)); - } - - .dark\:focus\:bg-opacity-50:focus { - --tw-bg-opacity: 0.5; - } - - .dark\:focus\:text-vtd-primary-300:focus { - --tw-text-opacity: 1; - color: rgb(104 157 170 / var(--tw-text-opacity)); - } - - .dark\:focus\:ring-opacity-20:focus { - --tw-ring-opacity: 0.2; - } - - .dark\:focus\:ring-opacity-25:focus { - --tw-ring-opacity: 0.25; - } -} diff --git a/src/components/Select.vue b/src/components/Select.vue index 2ec4d57..bec93bd 100755 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -4,16 +4,8 @@ interface DataItem { name: any } -import { ref, computed, watch } from 'vue' -import { - Combobox, - ComboboxInput, - ComboboxButton, - ComboboxOptions, - ComboboxOption, - TransitionRoot -} from '@headlessui/vue' -import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid' +import { ref, computed } from 'vue' +import { RichSelect } from '@flavorly/vanilla-components' const props = defineProps({ placeholder: { @@ -32,106 +24,24 @@ const props = defineProps({ const emit = defineEmits(['update:selected']) const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]) - -computed(() => { - if (props.selected.id === 0) { - selected.value = { id: 0, name: props.placeholder } - } -}) - -watch( - () => props.selected, - (value) => { - if (value.id === 0) { - selected.value = { id: 0, name: props.placeholder } - } - } -) - -let selected = ref(data.value[0]) -let query = ref('') -let filteredData = computed(() => - query.value === '' - ? data.value - : data.value.filter((item: DataItem) => - item.name - .toLowerCase() - .replace(/\s+/g, '') - .includes(query.value.toLowerCase().replace(/\s+/g, '')) - ) -) - -const show = ref(false) +const selected = ref(data.value[0].id) diff --git a/src/main.ts b/src/main.ts index 472bf77..dec27b9 100755 --- a/src/main.ts +++ b/src/main.ts @@ -7,14 +7,30 @@ import router from './router' import { createApp, provide, h } from 'vue' import { DefaultApolloClient } from '@vue/apollo-composable' import { apolloClient } from './utils/graphql' +import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components' const app = createApp({ setup() { provide(DefaultApolloClient, apolloClient()) }, - render: () => h(App), + render: () => h(App) }) +app.use( + VanillaComponents, + defineConfiguration({ + RichSelect: { + classes: { + trigger: + 'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3', + searchInput: + 'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200', + selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white' + } + } + }) +) + app.use(createPinia()) app.use(router) -app.mount('#app') \ No newline at end of file +app.mount('#app') diff --git a/src/types/flavorly-vanilla-components.d.ts b/src/types/flavorly-vanilla-components.d.ts new file mode 100644 index 0000000..1043071 --- /dev/null +++ b/src/types/flavorly-vanilla-components.d.ts @@ -0,0 +1 @@ +declare module '@flavorly/vanilla-components' diff --git a/src/views/TestView.vue b/src/views/TestView.vue index cc340bc..a805d6f 100755 --- a/src/views/TestView.vue +++ b/src/views/TestView.vue @@ -1 +1,33 @@ - + + + diff --git a/tailwind.config.js b/tailwind.config.js index 7078f2c..f820933 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,8 +6,11 @@ export default { './index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './src/**/**/*.{vue,js,ts,jsx,tsx}', - './node_modules/vue-tailwind-datepicker/**/*.js' + './node_modules/vue-tailwind-datepicker/**/*.js', + './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json' ], + mode: 'jit', + darkMode: 'class', theme: { extend: { backgroundImage: (theme) => ({ @@ -120,4 +123,4 @@ export default { require('@headlessui/tailwindcss'), require('@headlessui/tailwindcss')({ prefix: 'ui' }) ] -} \ No newline at end of file +} diff --git a/tsconfig.json b/tsconfig.json index e72d361..dbc7b2c 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,7 @@ ], "compilerOptions": { "strict": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "typeRoots": ["./src/types", "./node_modules/@types"] } -} \ No newline at end of file +}