From c9e84fc09c5b3925c2640491dbcd168e0eedbbe2 Mon Sep 17 00:00:00 2001 From: Melodycel <166515998+Melodycel@users.noreply.github.com> Date: Tue, 9 Jul 2024 15:15:46 +0200 Subject: [PATCH] Adding stylelint #105 (#118) Co-authored-by: Alexander Stanik --- .github/workflows/ci-build.yml | 4 + .stylelintrc.json | 15 + README.md | 6 + package-lock.json | 794 +++++++- package.json | 6 +- public/aura-light-green/theme.css | 2720 +++++++++++++++++++++------- src/assets/layout/_config.scss | 7 +- src/assets/layout/_menu.scss | 2 +- src/assets/layout/_preloading.scss | 7 +- src/assets/layout/_responsive.scss | 6 +- src/assets/layout/_topbar.scss | 9 +- src/assets/layout/_typography.scss | 6 +- src/assets/layout/_utils.scss | 2 +- src/assets/styles.scss | 9 +- src/components/HelloWorld.vue | 2 +- src/components/LeoModal.vue | 7 +- src/views/LandingPageView.vue | 39 +- 17 files changed, 2902 insertions(+), 739 deletions(-) create mode 100644 .stylelintrc.json diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml index 541a57bb..d87ca35b 100644 --- a/.github/workflows/ci-build.yml +++ b/.github/workflows/ci-build.yml @@ -61,6 +61,8 @@ jobs: wait-on-timeout: 180 - name: Check style with ESLint (lint) run: npm run lint + - name: Check css with Stylelint (stylelint) + run: npm run stylelint - name: Save PR number to file for subsequently Sonar Analysis if: github.event_name == 'pull_request' env: @@ -119,6 +121,8 @@ jobs: wait-on-timeout: 180 - name: Check style with ESLint (lint) run: npm run lint + - name: Check css with Stylelint (stylelint) + run: npm run stylelint check-branches: name: "Check Pull Request Conditions" runs-on: ubuntu-latest diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 00000000..f9f2e1b1 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,15 @@ +{ "extends": [ + "stylelint-config-standard", + "stylelint-config-recommended-vue" +], + "rules": { + "alpha-value-notation": "number", + "no-descending-specificity": null, + "no-duplicate-selectors": null, + "number-max-precision": 5, + "no-empty-source": null, + "custom-property-pattern": null, + "at-rule-no-unknown": null, + "import-notation": "string" + } +} \ No newline at end of file diff --git a/README.md b/README.md index e56f3391..8300c2bc 100644 --- a/README.md +++ b/README.md @@ -52,3 +52,9 @@ npm run test:unit ```sh npm run lint ``` + +### Lint with [Stylelint](https://stylelint.io/) + +```sh +npm run stylelint +``` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 37d4b308..e581c804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,9 @@ "prettier": "^3.3.2", "sass": "^1.69.7", "start-server-and-test": "^2.0.4", + "stylelint": "^16.6.1", + "stylelint-config-recommended-vue": "^1.5.0", + "stylelint-config-standard": "^36.0.0", "typescript": "~5.4.5", "vite": "^5.3.3", "vite-plugin-vue-devtools": "^7.2.1", @@ -706,6 +709,92 @@ "node": ">=0.1.90" } }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.3.tgz", + "integrity": "sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^2.3.1" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.3.1.tgz", + "integrity": "sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.11.tgz", + "integrity": "sha512-uox5MVhvNHqitPP+SynrB1o8oPxPMt2JLgp5ghJOWf54WGQ5OKu47efne49r1SWqs3wRP8xSWjnO9MBKxhB1dA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.6.3", + "@csstools/css-tokenizer": "^2.3.1" + } + }, + "node_modules/@csstools/selector-specificity": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", + "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, "node_modules/@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -768,6 +857,16 @@ "ms": "^2.1.1" } }, + "node_modules/@dual-bundle/import-meta-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/@electron/get": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz", @@ -3690,6 +3789,12 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", @@ -3802,6 +3907,32 @@ "node": ">= 0.10" } }, + "node_modules/cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3830,6 +3961,28 @@ } } }, + "node_modules/css-functions-list": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz", + "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==", + "dev": true, + "engines": { + "node": ">=12 || >=16" + } + }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -4296,6 +4449,65 @@ "node": ">=6.0.0" } }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dev": true, + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "peer": true + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dev": true, + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dev": true, + "peer": true, + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -4527,6 +4739,15 @@ "node": ">=6" } }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/error-stack-parser-es": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.4.tgz", @@ -4967,6 +5188,15 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "node_modules/fastest-levenshtein": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", + "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==", + "dev": true, + "engines": { + "node": ">= 4.9.1" + } + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -5064,9 +5294,9 @@ } }, "node_modules/flatted": { - "version": "3.2.9", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz", - "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, "node_modules/follow-redirects": { @@ -5345,6 +5575,50 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/global-modules": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", + "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", + "dev": true, + "dependencies": { + "global-prefix": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/global-prefix": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz", + "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", + "dev": true, + "dependencies": { + "ini": "^1.3.5", + "kind-of": "^6.0.2", + "which": "^1.3.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/global-prefix/node_modules/ini": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true + }, + "node_modules/global-prefix/node_modules/which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "which": "bin/which" + } + }, "node_modules/globals": { "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", @@ -5397,6 +5671,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", + "dev": true + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -5566,6 +5846,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/htmlparser2": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", + "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "dev": true, + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "entities": "^4.4.0" + } + }, "node_modules/http-cache-semantics": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", @@ -5755,6 +6055,12 @@ "url": "https://github.com/sponsors/brc-dd" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -5876,6 +6182,15 @@ "node": ">=8" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -6248,6 +6563,21 @@ "json-buffer": "3.0.1" } }, + "node_modules/kind-of": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/known-css-properties": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.31.0.tgz", + "integrity": "sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==", + "dev": true + }, "node_modules/kolorist": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz", @@ -6276,6 +6606,12 @@ "node": ">= 0.8.0" } }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true + }, "node_modules/listr2": { "version": "3.14.0", "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz", @@ -6369,6 +6705,12 @@ "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==", "dev": true }, + "node_modules/lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", + "dev": true + }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", @@ -6514,6 +6856,22 @@ "node": ">=10" } }, + "node_modules/mathml-tag-names": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", + "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, "node_modules/memorystream": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", @@ -6523,6 +6881,18 @@ "node": ">= 0.10.0" } }, + "node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -6539,12 +6909,12 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", + "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -7027,6 +7397,30 @@ "node": ">=6" } }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parse-json/node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "node_modules/parse5": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", @@ -7265,6 +7659,78 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-html": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.7.0.tgz", + "integrity": "sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==", + "dev": true, + "peer": true, + "dependencies": { + "htmlparser2": "^8.0.0", + "js-tokens": "^9.0.0", + "postcss": "^8.4.0", + "postcss-safe-parser": "^6.0.0" + }, + "engines": { + "node": "^12 || >=14" + } + }, + "node_modules/postcss-html/node_modules/js-tokens": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz", + "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==", + "dev": true, + "peer": true + }, + "node_modules/postcss-html/node_modules/postcss-safe-parser": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", + "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.3.3" + } + }, + "node_modules/postcss-resolve-nested-selector": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", + "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", + "dev": true + }, + "node_modules/postcss-safe-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, "node_modules/postcss-selector-parser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz", @@ -7278,6 +7744,12 @@ "node": ">=4" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -7538,6 +8010,15 @@ "throttleit": "^1.0.0" } }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -8316,6 +8797,200 @@ "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==", "dev": true }, + "node_modules/stylelint": { + "version": "16.6.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.6.1.tgz", + "integrity": "sha512-yNgz2PqWLkhH2hw6X9AweV9YvoafbAD5ZsFdKN9BvSDVwGvPh+AUIrn7lYwy1S7IHmtFin75LLfX1m0D2tHu8Q==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "dependencies": { + "@csstools/css-parser-algorithms": "^2.6.3", + "@csstools/css-tokenizer": "^2.3.1", + "@csstools/media-query-list-parser": "^2.1.11", + "@csstools/selector-specificity": "^3.1.1", + "@dual-bundle/import-meta-resolve": "^4.1.0", + "balanced-match": "^2.0.0", + "colord": "^2.9.3", + "cosmiconfig": "^9.0.0", + "css-functions-list": "^3.2.2", + "css-tree": "^2.3.1", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "fastest-levenshtein": "^1.0.16", + "file-entry-cache": "^9.0.0", + "global-modules": "^2.0.0", + "globby": "^11.1.0", + "globjoin": "^0.1.4", + "html-tags": "^3.3.1", + "ignore": "^5.3.1", + "imurmurhash": "^0.1.4", + "is-plain-object": "^5.0.0", + "known-css-properties": "^0.31.0", + "mathml-tag-names": "^2.1.3", + "meow": "^13.2.0", + "micromatch": "^4.0.7", + "normalize-path": "^3.0.0", + "picocolors": "^1.0.1", + "postcss": "^8.4.38", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.1.0", + "postcss-value-parser": "^4.2.0", + "resolve-from": "^5.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^7.1.0", + "supports-hyperlinks": "^3.0.0", + "svg-tags": "^1.0.0", + "table": "^6.8.2", + "write-file-atomic": "^5.0.1" + }, + "bin": { + "stylelint": "bin/stylelint.mjs" + }, + "engines": { + "node": ">=18.12.0" + } + }, + "node_modules/stylelint-config-html": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-html/-/stylelint-config-html-1.1.0.tgz", + "integrity": "sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==", + "dev": true, + "engines": { + "node": "^12 || >=14" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + }, + "peerDependencies": { + "postcss-html": "^1.0.0", + "stylelint": ">=14.0.0" + } + }, + "node_modules/stylelint-config-recommended": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", + "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", + "dev": true, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.0.0" + } + }, + "node_modules/stylelint-config-recommended-vue": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended-vue/-/stylelint-config-recommended-vue-1.5.0.tgz", + "integrity": "sha512-65TAK/clUqkNtkZLcuytoxU0URQYlml+30Nhop7sRkCZ/mtWdXt7T+spPSB3KMKlb+82aEVJ4OrcstyDBdbosg==", + "dev": true, + "dependencies": { + "semver": "^7.3.5", + "stylelint-config-html": ">=1.0.0", + "stylelint-config-recommended": ">=6.0.0" + }, + "engines": { + "node": "^12 || >=14" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + }, + "peerDependencies": { + "postcss-html": "^1.0.0", + "stylelint": ">=14.0.0" + } + }, + "node_modules/stylelint-config-standard": { + "version": "36.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", + "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", + "dev": true, + "dependencies": { + "stylelint-config-recommended": "^14.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/stylelint/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true + }, + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz", + "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==", + "dev": true, + "dependencies": { + "flat-cache": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/stylelint/node_modules/flat-cache": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz", + "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==", + "dev": true, + "dependencies": { + "flatted": "^3.3.1", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/stylelint/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/sumchecker": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz", @@ -8343,6 +9018,31 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/supports-hyperlinks/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/svg-tags": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", @@ -8371,6 +9071,61 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/table": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", + "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", + "dev": true, + "dependencies": { + "ajv": "^8.0.1", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/table/node_modules/ajv": { + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.16.0.tgz", + "integrity": "sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.3", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.4.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/table/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/table/node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, "node_modules/test-exclude": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", @@ -9692,6 +10447,31 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/write-file-atomic": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, + "node_modules/write-file-atomic/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/ws": { "version": "8.17.1", "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", diff --git a/package.json b/package.json index cb65704e..f0dd4d9b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "build-only": "vite build", "type-check": "vue-tsc --build --force", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", - "format": "prettier --write src/" + "format": "prettier --write src/", + "stylelint": "stylelint '{src,public}/**/*.{vue,css,scss}'" }, "dependencies": { "axios": "^1.6.3", @@ -50,6 +51,9 @@ "prettier": "^3.3.2", "sass": "^1.69.7", "start-server-and-test": "^2.0.4", + "stylelint": "^16.6.1", + "stylelint-config-recommended-vue": "^1.5.0", + "stylelint-config-standard": "^36.0.0", "typescript": "~5.4.5", "vite": "^5.3.3", "vite-plugin-vue-devtools": "^7.2.1", diff --git a/public/aura-light-green/theme.css b/public/aura-light-green/theme.css index a645b71f..698e00ae 100644 --- a/public/aura-light-green/theme.css +++ b/public/aura-light-green/theme.css @@ -2,13 +2,14 @@ font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; + --font-family: "Inter var", sans-serif; --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --text-color: #334155; --text-color-secondary: #64748b; --primary-color: #10b981; - --primary-color-text: #ffffff; - --surface-0: #ffffff; + --primary-color-text: #fff; + --surface-0: #fff; --surface-50: #f8fafc; --surface-100: #f1f5f9; --surface-200: #e2e8f0; @@ -20,7 +21,7 @@ --surface-800: #1e293b; --surface-900: #0f172a; --surface-950: #020617; - --gray-0: #ffffff; + --gray-0: #fff; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; @@ -36,17 +37,19 @@ --inline-spacing: 0.5rem; --border-radius: 6px; --surface-ground: #f8fafc; - --surface-section: #ffffff; - --surface-card: #ffffff; - --surface-overlay: #ffffff; + --surface-section: #fff; + --surface-card: #fff; + --surface-overlay: #fff; --surface-border: #e2e8f0; --surface-hover: #f1f5f9; --focus-ring: none; - --maskbg: rgba(0, 0, 0, 0.4); + --maskbg: rgb(0 0 0 / 0.4); --highlight-bg: #ecfdf5; --highlight-text-color: #047857; --p-anchor-gutter: 2px; + color-scheme: light; + --p-focus-ring-color: var(--primary-color); --blue-50:#f5f9ff; --blue-100:#d0e1fd; @@ -177,6 +180,7 @@ font-style: normal; src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); } + @font-face { font-family: "Inter var"; font-weight: 100 900; @@ -186,98 +190,122 @@ } .p-editor-container .p-editor-toolbar { - background: #ffffff; + background: #fff; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-editor-container .p-editor-toolbar.ql-snow { border: 1px solid #e2e8f0; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { stroke: #64748b; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-fill { fill: #64748b; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { border: 0 none; color: #64748b; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { color: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { stroke: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { fill: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { color: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { color: #334155; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: #1e293b; background: #f1f5f9; } + .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.5rem 0.75rem; } + .p-editor-container .p-editor-content { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-editor-container .p-editor-content.ql-snow { border: 1px solid #e2e8f0; } + .p-editor-container .p-editor-content .ql-editor { - background: #ffffff; + background: #fff; color: #334155; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-editor-container .ql-snow.ql-toolbar button:hover, .p-editor-container .ql-snow.ql-toolbar button:focus { color: #334155; } + .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, .p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { stroke: #334155; } + .p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, .p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { fill: #334155; } + .p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: #10b981; } + .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { stroke: #10b981; } + .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { fill: #10b981; } + .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { @@ -425,7 +453,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.4); + background-color: rgb(0 0 0 / 0.4); transition-duration: 0.2s; } @@ -462,14 +490,17 @@ from { background-color: transparent; } + to { background-color: var(--maskbg); } } + @keyframes p-component-overlay-leave-animation { from { background-color: var(--maskbg); } + to { background-color: transparent; } @@ -498,7 +529,7 @@ .p-autocomplete-dd .p-autocomplete-dropdown { border-top-left-radius: 0; - border-bottom-left-radius: 0px; + border-bottom-left-radius: 0; } .p-autocomplete .p-autocomplete-panel { @@ -510,11 +541,11 @@ overflow: auto; top: 0; left: 0; - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .p-autocomplete-items { @@ -579,26 +610,32 @@ .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { right: 3.25rem; } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { border-color: #94a3b8; } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; gap: 0.5rem; outline-color: transparent; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -607,26 +644,31 @@ padding: 0; margin: 0; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 0.75rem; background: #f1f5f9; color: #1e293b; border-radius: 16px; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { margin-left: 0.5rem; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { background: #e2e8f0; color: #0f172a; } + .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f87171; } .p-autocomplete-panel .p-autocomplete-items { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { margin: 2px 0; padding: 0.5rem 0.75rem; @@ -636,28 +678,34 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { margin-top: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { margin-bottom: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { background: #d1fae5; } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight, .p-disabled).p-focus { color: #1e293b; background: #f1f5f9; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; padding: 0.5rem 0.75rem; color: #94a3b8; - background: #ffffff; + background: #fff; font-weight: 600; } @@ -702,7 +750,7 @@ .p-datepicker { width: auto; padding: 0.75rem; - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 6px; @@ -748,18 +796,22 @@ width: 100%; border-collapse: collapse; font-size: 1rem; - margin: 0.5rem 0 0 0; + margin: 0.5rem 0 0; } + .p-datepicker table th { padding: 0.25rem; } + .p-datepicker table th > span { width: 2rem; height: 2rem; } + .p-datepicker table td { padding: 0.25rem; } + .p-datepicker table td > span { width: 2rem; height: 2rem; @@ -768,20 +820,24 @@ border: 1px solid transparent; outline-color: transparent; } + .p-datepicker table td > span.p-highlight { color: #047857; background: #ecfdf5; } + .p-datepicker table td > span:focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-datepicker table td.p-datepicker-today > span { background: #e2e8f0; color: #0f172a; border-color: transparent; } + .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #047857; background: #ecfdf5; @@ -857,6 +913,7 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; @@ -865,23 +922,26 @@ } .p-datepicker:not(.p-datepicker-inline) { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { - background: #ffffff; + background: #fff; } + .p-datepicker .p-datepicker-header { - padding: 0 0 0.5rem 0; + padding: 0 0 0.5rem; color: #334155; - background: #ffffff; + background: #fff; font-weight: 500; - margin: 0 0 0 0; + margin: 0; border-bottom: 1px solid #e2e8f0; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-datepicker .p-datepicker-header .p-datepicker-prev, .p-datepicker .p-datepicker-header .p-datepicker-next { width: 1.75rem; @@ -893,21 +953,25 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 1.75rem; } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #334155; @@ -915,24 +979,30 @@ font-weight: 500; padding: 0.25rem; } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #10b981; } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; } + .p-datepicker .p-datepicker-buttonbar { - padding: 0.5rem 0 0 0; + padding: 0.5rem 0 0; border-top: 1px solid #e2e8f0; } + .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } + .p-datepicker .p-timepicker { border-top: 1px solid #e2e8f0; padding: 0; } + .p-datepicker .p-timepicker button { width: 1.75rem; height: 1.75rem; @@ -943,98 +1013,120 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-datepicker .p-timepicker button:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-datepicker .p-timepicker button:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-datepicker .p-timepicker button:last-child { margin-top: 0.2em; } + .p-datepicker .p-timepicker span { font-size: 1rem; } + .p-datepicker .p-timepicker > div { padding: 0 0.5rem; } + .p-datepicker.p-datepicker-timeonly .p-timepicker { border-top: 0 none; } + .p-datepicker .p-monthpicker { - margin: 0.5rem 0 0 0; + margin: 0.5rem 0 0; } + .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.25rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { color: #047857; background: #ecfdf5; } + .p-datepicker .p-yearpicker { - margin: 0.5rem 0 0 0; + margin: 0.5rem 0 0; } + .p-datepicker .p-yearpicker .p-yearpicker-year { padding: 0.25rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { color: #047857; background: #ecfdf5; } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid #e2e8f0; - padding-right: 0.75rem; - padding-left: 0.75rem; - padding-top: 0; - padding-bottom: 0; + padding: 0 0.75rem; } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; border-left: 0 none; } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td { padding: 0.25rem; } - .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight, .p-disabled) { outline-color: transparent; } - .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight, .p-disabled):hover { background: #f1f5f9; } - .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight, .p-disabled):focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { outline-color: transparent; } - .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled, .p-highlight):hover { background: #f1f5f9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { outline-color: transparent; } - .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled, .p-highlight):hover { background: #f1f5f9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -1045,7 +1137,7 @@ display: inline-flex; cursor: pointer; user-select: none; - background: #ffffff; + background: #fff; border: 1px solid #cbd5e1; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; @@ -1150,24 +1242,30 @@ .p-cascadeselect.p-variant-filled { background-color: #f8fafc; } + .p-cascadeselect.p-variant-filled:enabled:hover { background-color: #f8fafc; } + .p-cascadeselect.p-variant-filled:enabled:focus { - background-color: #ffffff; + background-color: #fff; } + .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; padding: 0.5rem 0.75rem; } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { color: #64748b; } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { outline: 0 none; box-shadow: none; } + .p-cascadeselect .p-cascadeselect-trigger { background: transparent; color: #94a3b8; @@ -1175,20 +1273,23 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } .p-cascadeselect-panel { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-cascadeselect-panel .p-cascadeselect-items { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { margin: 2px 0; border: 0 none; @@ -1197,26 +1298,33 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { margin-top: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { margin-bottom: 0; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { background: #d1fae5; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight, .p-disabled).p-focus { color: #1e293b; background: #f1f5f9; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 0.5rem 0.75rem; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } @@ -1255,9 +1363,10 @@ border: 1px solid #cbd5e1; border-radius: 6px; } + .p-checkbox .p-checkbox-box { border: 1px solid #cbd5e1; - background: #ffffff; + background: #fff; width: 1.25rem; height: 1.25rem; color: #334155; @@ -1265,45 +1374,56 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: #ffffff; + color: #fff; font-size: 0.875rem; } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { width: 0.875rem; height: 0.875rem; } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #10b981; background: #10b981; } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #94a3b8; } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #059669; background: #059669; - color: #ffffff; + color: #fff; } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f87171; } + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #f8fafc; } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { background: #10b981; } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f8fafc; } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #059669; } @@ -1311,12 +1431,15 @@ .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8fafc; } + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #10b981; } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f8fafc; } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #059669; } @@ -1370,16 +1493,19 @@ .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-chips .p-chips-multiple-container { padding: 0.25rem 0.75rem; outline-color: transparent; } + .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; @@ -1387,16 +1513,20 @@ color: #1e293b; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { background: #e2e8f0; color: #0f172a; } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } + .p-chips .p-chips-multiple-container .p-chips-input-token { padding: 0.25rem 0; } + .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1405,12 +1535,13 @@ padding: 0; margin: 0; } + .p-chips.p-invalid.p-component > .p-inputtext { border-color: #f87171; } .p-colorpicker-panel .p-colorpicker-color { - background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%); } .p-colorpicker-panel .p-colorpicker-hue { @@ -1426,13 +1557,14 @@ background: #323232; border: 1px solid #191919; } + .p-colorpicker-panel .p-colorpicker-color-handle, .p-colorpicker-panel .p-colorpicker-hue-handle { - border-color: #ffffff; + border-color: #fff; } .p-colorpicker-overlay-panel { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .p-dropdown { @@ -1440,15 +1572,17 @@ cursor: pointer; position: relative; user-select: none; - background: #ffffff; + background: #fff; border: 1px solid #cbd5e1; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; outline-color: transparent; } + .p-dropdown:not(.p-disabled):hover { border-color: #94a3b8; } + .p-dropdown:not(.p-disabled).p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; @@ -1496,11 +1630,11 @@ position: absolute; top: 0; left: 0; - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .p-dropdown-items-wrapper { @@ -1552,29 +1686,37 @@ .p-dropdown.p-variant-filled { background: #f8fafc; } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { background-color: #f8fafc; } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: #ffffff; + background-color: #fff; } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } + .p-dropdown .p-dropdown-label { background: transparent; border: 0 none; } + .p-dropdown .p-dropdown-label.p-placeholder { color: #64748b; } + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } + .p-dropdown .p-dropdown-trigger { background: transparent; color: #94a3b8; @@ -1582,34 +1724,40 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-dropdown .p-dropdown-clear-icon { color: #94a3b8; right: 2.5rem; } + .p-dropdown.p-invalid.p-component { border-color: #f87171; } .p-dropdown-panel .p-dropdown-header { - padding: 0.5rem 0.5rem 0 0.5rem; + padding: 0.5rem 0.5rem 0; border-bottom: 0 none; color: #334155; - background: #ffffff; - margin: 0 0 0 0; + background: #fff; + margin: 0; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-dropdown-panel .p-dropdown-header .p-dropdown-filter { padding-right: 1.75rem; margin-right: -1.75rem; } + .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { right: 0.75rem; color: #94a3b8; } + .p-dropdown-panel .p-dropdown-items { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { margin: 2px 0; padding: 0.5rem 0.75rem; @@ -1619,35 +1767,43 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { margin-top: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { margin-bottom: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { background: #d1fae5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight, .p-disabled).p-focus { color: #1e293b; background: #f1f5f9; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; margin-left: -0.5rem; margin-right: 0.5rem; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.5rem 0.75rem; color: #94a3b8; - background: #ffffff; + background: #fff; font-weight: 600; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { padding: 0.5rem 0.75rem; color: #334155; @@ -1731,7 +1887,7 @@ display: flex; align-items: center; justify-content: center; - background: #ffffff; + background: #fff; color: #64748b; border-top: 1px solid #cbd5e1; border-left: 1px solid #cbd5e1; @@ -1764,16 +1920,19 @@ border-radius: 0; margin: 0; } + .p-inputgroup > .p-component + .p-inputgroup-addon, .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } + .p-inputgroup > .p-component:focus, .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } + .p-inputgroup > .p-component:focus ~ label, .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label { @@ -1811,6 +1970,7 @@ .p-fluid .p-inputgroup .p-button { width: auto; } + .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.5rem; } @@ -1934,14 +2094,17 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { background-color: #f8fafc; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { background-color: #f8fafc; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { - background-color: #ffffff; + background-color: #fff; } .p-inputswitch { @@ -1955,14 +2118,11 @@ .p-inputswitch-slider { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; border: 1px solid transparent; } - .p-inputswitch-slider:before { + .p-inputswitch-slider::before { position: absolute; content: ""; top: 50%; @@ -1972,6 +2132,7 @@ width: 2.5rem; height: 1.5rem; } + .p-inputswitch .p-inputswitch-input { appearance: none; position: absolute; @@ -1986,14 +2147,16 @@ outline: 0 none; border-radius: 30px; } + .p-inputswitch .p-inputswitch-slider { background: #cbd5e1; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 30px; outline-color: transparent; } - .p-inputswitch .p-inputswitch-slider:before { - background: #ffffff; + + .p-inputswitch .p-inputswitch-slider::before { + background: #fff; width: 1rem; height: 1rem; left: 0.25rem; @@ -2001,24 +2164,30 @@ border-radius: 50%; transition-duration: 0.2s; } + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #10b981; } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + + .p-inputswitch.p-highlight .p-inputswitch-slider::before { + background: #fff; transform: translateX(1rem); } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #94a3b8; } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #059669; } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f87171; } @@ -2032,7 +2201,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: #334155; - background: #ffffff; + background: #fff; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -2040,31 +2209,39 @@ border-radius: 6px; outline-color: transparent; } + .p-inputtext:enabled:hover { border-color: #94a3b8; } + .p-inputtext:enabled:focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-inputtext.p-invalid.p-component { border-color: #f87171; } + .p-inputtext.p-variant-filled { background-color: #f8fafc; } + .p-inputtext.p-variant-filled:enabled:hover { background-color: #f8fafc; } + .p-inputtext.p-variant-filled:enabled:focus { - background-color: #ffffff; + background-color: #fff; } + .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext.p-inputtext-lg { font-size: 1.25rem; padding: 0.625rem 0.9375rem; @@ -2092,30 +2269,20 @@ padding-right: 2.5rem; } - ::-webkit-input-placeholder { - color: #64748b; - } - - :-moz-placeholder { - color: #64748b; - } - - ::-moz-placeholder { - color: #64748b; - } - - :-ms-input-placeholder { + ::placeholder { color: #64748b; } .p-input-filled .p-inputtext { background-color: #f8fafc; } + .p-input-filled .p-inputtext:enabled:hover { background-color: #f8fafc; } + .p-input-filled .p-inputtext:enabled:focus { - background-color: #ffffff; + background-color: #fff; } .p-inputtext-sm .p-inputtext { @@ -2149,6 +2316,7 @@ stroke-dashoffset: 0; } } + .p-listbox-list-wrapper { overflow: auto; } @@ -2184,33 +2352,38 @@ } .p-listbox { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-listbox .p-listbox-header { - padding: 0.5rem 0.5rem 0 0.5rem; + padding: 0.5rem 0.5rem 0; border-bottom: 0 none; color: #334155; - background: #ffffff; - margin: 0 0 0 0; + background: #fff; + margin: 0; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-listbox .p-listbox-header .p-listbox-filter { padding-right: 1.75rem; } + .p-listbox .p-listbox-header .p-listbox-filter-icon { right: 0.75rem; color: #94a3b8; } + .p-listbox .p-listbox-list { - padding: 0.25rem 0.25rem; + padding: 0.25rem; outline: 0 none; } + .p-listbox .p-listbox-list .p-listbox-item { margin: 2px 0; padding: 0.5rem 0.75rem; @@ -2219,49 +2392,60 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { margin-top: 0; } + .p-listbox .p-listbox-list .p-listbox-item:last-child { margin-bottom: 0; } + .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.5rem 0.75rem; color: #94a3b8; - background: #ffffff; + background: #fff; font-weight: 600; } + .p-listbox .p-listbox-list .p-listbox-empty-message { padding: 0.5rem 0.75rem; color: #334155; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { background: #d1fae5; } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight, .p-disabled).p-focus { color: #1e293b; background: #f1f5f9; } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight, .p-disabled):hover { color: #1e293b; background: #f1f5f9; } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight, .p-disabled):hover.p-focus { color: #1e293b; background: #f1f5f9; } + .p-listbox.p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-listbox.p-invalid { border-color: #f87171; } @@ -2373,37 +2557,45 @@ } .p-multiselect { - background: #ffffff; + background: #fff; border: 1px solid #cbd5e1; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; outline-color: transparent; } + .p-multiselect:not(.p-disabled):hover { border-color: #94a3b8; } + .p-multiselect:not(.p-disabled).p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-multiselect.p-variant-filled { background: #f8fafc; } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { background-color: #f8fafc; } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: #ffffff; + background-color: #fff; } + .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-multiselect .p-multiselect-label.p-placeholder { color: #64748b; } + .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; @@ -2411,9 +2603,11 @@ color: #1e293b; border-radius: 16px; } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { margin-left: 0.5rem; } + .p-multiselect .p-multiselect-trigger { background: transparent; color: #94a3b8; @@ -2421,6 +2615,7 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-invalid.p-component { border-color: #f87171; } @@ -2430,31 +2625,36 @@ } .p-multiselect-panel { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-multiselect-panel .p-multiselect-header { - padding: 0.5rem 0.5rem 0 0.5rem; + padding: 0.5rem 0.5rem 0; border-bottom: 0 none; color: #334155; - background: #ffffff; - margin: 0 0 0 0; + background: #fff; + margin: 0; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } + .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { right: 0.75rem; color: #94a3b8; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { margin-right: 0.5rem; } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close { margin-left: 0.5rem; width: 1.75rem; @@ -2466,19 +2666,23 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-multiselect-panel .p-multiselect-items { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { margin: 2px 0; padding: 0.5rem 0.75rem; @@ -2488,33 +2692,41 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { margin-top: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { margin-bottom: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { background: #d1fae5; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight, .p-disabled).p-focus { color: #1e293b; background: #f1f5f9; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { margin: 0; padding: 0.5rem 0.75rem; color: #94a3b8; - background: #ffffff; + background: #fff; font-weight: 600; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { padding: 0.5rem 0.75rem; color: #334155; @@ -2553,23 +2765,27 @@ } .p-password-panel { - padding: 0 1.125rem 1.125rem 1.125rem; - background: #ffffff; + padding: 0 1.125rem 1.125rem; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-password-panel .p-password-meter { margin-bottom: 0.5rem; background: #e2e8f0; } + .p-password-panel .p-password-meter .p-password-strength.weak { background: #ef4444; } + .p-password-panel .p-password-meter .p-password-strength.medium { background: #f59e0b; } + .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } @@ -2592,7 +2808,6 @@ } .p-radiobutton-icon { - -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0) scale(0.1); border-radius: 50%; @@ -2608,6 +2823,7 @@ width: 1.25rem; height: 1.25rem; } + .p-radiobutton .p-radiobutton-input { appearance: none; position: absolute; @@ -2623,9 +2839,10 @@ border: 1px solid #cbd5e1; border-radius: 50%; } + .p-radiobutton .p-radiobutton-box { border: 1px solid #cbd5e1; - background: #ffffff; + background: #fff; width: 1.25rem; height: 1.25rem; color: #334155; @@ -2633,59 +2850,73 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 0.75rem; height: 0.75rem; transition-duration: 0.2s; background-color: #10b981; } + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #10b981; - background: #ffffff; + background: #fff; } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border-color: #94a3b8; } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #059669; - background: #ffffff; + background: #fff; } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { background-color: #059669; } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f87171; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { background-color: #f8fafc; } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffffff; + background: #fff; } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f8fafc; } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + background: #fff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8fafc; } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #ffffff; + background: #fff; } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f8fafc; } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + background: #fff; } .p-rating { @@ -2707,34 +2938,42 @@ .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { outline-color: transparent; border-radius: 50%; } + .p-rating .p-rating-item .p-rating-icon { color: #64748b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; font-size: 1rem; } + .p-rating .p-rating-item .p-rating-icon.p-icon { width: 1rem; height: 1rem; } + .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f87171; } + .p-rating .p-rating-item.p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #10b981; } - .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + + .p-rating:not(.p-disabled, .p-readonly) .p-rating-item:hover .p-rating-icon { color: #10b981; } - .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + + .p-rating:not(.p-disabled, .p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #ef4444; } @@ -2744,37 +2983,45 @@ color: #64748b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-selectbutton .p-button .p-button-icon-left, .p-selectbutton .p-button .p-button-icon-right { color: #64748b; } - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + + .p-selectbutton .p-button:not(.p-disabled, .p-highlight):hover { background: #f1f5f9; border-color: #f1f5f9; color: #334155; } - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + + .p-selectbutton .p-button:not(.p-disabled, .p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled, .p-highlight):hover .p-button-icon-right { color: #334155; } + .p-selectbutton .p-button.p-highlight { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, .p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #0f172a; } + .p-selectbutton .p-button.p-highlight:hover { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #0f172a; } + .p-selectbutton.p-invalid > .p-button { border-color: #f87171; } @@ -2822,20 +3069,25 @@ border: 0 none; border-radius: 6px; } + .p-slider.p-slider-horizontal { height: 3px; } + .p-slider.p-slider-horizontal .p-slider-handle { margin-top: -10px; margin-left: -10px; } + .p-slider.p-slider-vertical { width: 3px; } + .p-slider.p-slider-vertical .p-slider-handle { margin-left: -10px; margin-bottom: -10px; } + .p-slider .p-slider-handle { height: 20px; width: 20px; @@ -2845,15 +3097,18 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-slider .p-slider-handle:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-slider .p-slider-range { background: #10b981; border-radius: 6px; } + .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #e2e8f0; border-color: transparent; @@ -2920,37 +3175,45 @@ } .p-treeselect { - background: #ffffff; + background: #fff; border: 1px solid #cbd5e1; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; outline-color: transparent; } + .p-treeselect:not(.p-disabled):hover { border-color: #94a3b8; } + .p-treeselect:not(.p-disabled).p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-treeselect.p-variant-filled { background: #f8fafc; } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { background-color: #f8fafc; } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: #ffffff; + background-color: #fff; } + .p-treeselect .p-treeselect-label { padding: 0.5rem 0.75rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-treeselect .p-treeselect-label.p-placeholder { color: #64748b; } + .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; @@ -2958,6 +3221,7 @@ color: #1e293b; border-radius: 16px; } + .p-treeselect .p-treeselect-trigger { background: transparent; color: #94a3b8; @@ -2965,6 +3229,7 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-invalid.p-component { border-color: #f87171; } @@ -2974,15 +3239,17 @@ } .p-treeselect-panel { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-treeselect-panel .p-treeselect-items-wrapper .p-tree { border: 0 none; } + .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { padding: 0.5rem 0.75rem; color: #334155; @@ -2992,11 +3259,13 @@ .p-input-filled .p-treeselect { background: #f8fafc; } + .p-input-filled .p-treeselect:not(.p-disabled):hover { background-color: #f8fafc; } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + background-color: #fff; } .p-togglebutton { @@ -3029,6 +3298,7 @@ border: 1px solid #f1f5f9; border-radius: 6px; } + .p-togglebutton .p-button { background: #f1f5f9; border: 1px solid #f1f5f9; @@ -3036,43 +3306,52 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-togglebutton .p-button .p-button-icon-left, .p-togglebutton .p-button .p-button-icon-right { color: #64748b; } + .p-togglebutton.p-highlight .p-button { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #0f172a; } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { background: #f1f5f9; border-color: #f1f5f9; color: #334155; } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { color: #334155; } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #0f172a; } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-togglebutton.p-invalid > .p-button { border-color: #f87171; } @@ -3126,7 +3405,7 @@ border-right: 0 none; } - .p-button-group .p-button:not(:first-of-type):not(:last-of-type) { + .p-button-group .p-button:not(:first-of-type, :last-of-type) { border-radius: 0; } @@ -3146,7 +3425,7 @@ } .p-button { - color: #ffffff; + color: #fff; background: #10b981; border: 1px solid #10b981; padding: 0.5rem 1rem; @@ -3155,132 +3434,164 @@ border-radius: 6px; outline-color: transparent; } + .p-button:not(:disabled):hover { background: #059669; - color: #ffffff; + color: #fff; border-color: #059669; } + .p-button:not(:disabled):active { background: #047857; - color: #ffffff; + color: #fff; border-color: #047857; } + .p-button.p-button-outlined { background-color: transparent; color: #10b981; border: 1px solid; } + .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(16, 185, 129, 0.04); + background: rgb(16 185 129 / 0.04); color: #10b981; border: 1px solid; } + .p-button.p-button-outlined:not(:disabled):active { - background: rgba(16, 185, 129, 0.16); + background: rgb(16 185 129 / 0.16); color: #10b981; border: 1px solid; } + .p-button.p-button-outlined.p-button-plain { color: #334155; border-color: #334155; } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f1f5f9; color: #334155; } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e2e8f0; color: #334155; } + .p-button.p-button-text { background-color: transparent; color: #10b981; border-color: transparent; } + .p-button.p-button-text:not(:disabled):hover { - background: rgba(16, 185, 129, 0.04); + background: rgb(16 185 129 / 0.04); color: #10b981; border-color: transparent; } + .p-button.p-button-text:not(:disabled):active { - background: rgba(16, 185, 129, 0.16); + background: rgb(16 185 129 / 0.16); color: #10b981; border-color: transparent; } + .p-button.p-button-text.p-button-plain { color: #334155; } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f1f5f9; color: #334155; } + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e2e8f0; color: #334155; } + .p-button:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-button .p-button-label { transition-duration: 0.2s; } + .p-button .p-button-icon-left { margin-right: 0.5rem; } + .p-button .p-button-icon-right { margin-left: 0.5rem; } + .p-button .p-button-icon-bottom { margin-top: 0.5rem; } + .p-button .p-button-icon-top { margin-bottom: 0.5rem; } + .p-button .p-badge { margin-left: 0.5rem; min-width: 1rem; height: 1rem; line-height: 1rem; color: #10b981; - background-color: #ffffff; + background-color: #fff; } + .p-button.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgb(0 0 0 / 0.2), 0 2px 2px 0 rgb(0 0 0 / 0.14), 0 1px 5px 0 rgb(0 0 0 / 0.12); } + .p-button.p-button-rounded { border-radius: 2rem; } + .p-button.p-button-icon-only { width: 2.5rem; padding: 0.5rem 0; } + .p-button.p-button-icon-only .p-button-icon-left, .p-button.p-button-icon-only .p-button-icon-right { margin: 0; } + .p-button.p-button-icon-only.p-button-rounded { border-radius: 50%; height: 2.5rem; } + .p-button.p-button-sm { font-size: 0.875rem; padding: 0.4375rem 0.875rem; } + .p-button.p-button-sm .p-button-icon { font-size: 0.875rem; } + .p-button.p-button-lg { font-size: 1.25rem; padding: 0.625rem 1.25rem; } + .p-button.p-button-lg .p-button-icon { font-size: 1.25rem; } + .p-button.p-button-loading-label-only .p-button-label { margin-left: 0.5rem; } + .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } @@ -3288,12 +3599,15 @@ .p-fluid .p-button { width: 100%; } + .p-fluid .p-button-icon-only { width: 2.5rem; } + .p-fluid .p-button-group { display: flex; } + .p-fluid .p-button-group .p-button { flex: 1; } @@ -3303,340 +3617,403 @@ background: #f1f5f9; border: 1px solid #f1f5f9; } + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #e2e8f0; color: #334155; border-color: #e2e8f0; } + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #cbd5e1; color: #1e293b; border-color: #cbd5e1; } + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #f1f5f9; border: 1px solid; } + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(241, 245, 249, 0.04); + background: rgb(241 245 249 / 0.04); color: #f1f5f9; border: 1px solid; } + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(241, 245, 249, 0.16); + background: rgb(241 245 249 / 0.16); color: #f1f5f9; border: 1px solid; } + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #f1f5f9; border-color: transparent; } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { - background: rgba(241, 245, 249, 0.04); + background: rgb(241 245 249 / 0.04); border-color: transparent; color: #f1f5f9; } + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { - background: rgba(241, 245, 249, 0.16); + background: rgb(241 245 249 / 0.16); border-color: transparent; color: #f1f5f9; } .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { - color: #ffffff; + color: #fff; background: #0ea5e9; border: 1px solid #0ea5e9; } + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; - color: #ffffff; + color: #fff; border-color: #0284c7; } + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; - color: #ffffff; + color: #fff; border-color: #0369a1; } + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(14, 165, 233, 0.04); + background: rgb(14 165 233 / 0.04); color: #0ea5e9; border: 1px solid; } + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(14, 165, 233, 0.16); + background: rgb(14 165 233 / 0.16); color: #0ea5e9; border: 1px solid; } + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { - background: rgba(14, 165, 233, 0.04); + background: rgb(14 165 233 / 0.04); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { - background: rgba(14, 165, 233, 0.16); + background: rgb(14 165 233 / 0.16); border-color: transparent; color: #0ea5e9; } .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { - color: #ffffff; + color: #fff; background: #22c55e; border: 1px solid #22c55e; } + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; - color: #ffffff; + color: #fff; border-color: #16a34a; } + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; - color: #ffffff; + color: #fff; border-color: #15803d; } + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(34, 197, 94, 0.04); + background: rgb(34 197 94 / 0.04); color: #22c55e; border: 1px solid; } + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(34, 197, 94, 0.16); + background: rgb(34 197 94 / 0.16); color: #22c55e; border: 1px solid; } + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { - background: rgba(34, 197, 94, 0.04); + background: rgb(34 197 94 / 0.04); border-color: transparent; color: #22c55e; } + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { - background: rgba(34, 197, 94, 0.16); + background: rgb(34 197 94 / 0.16); border-color: transparent; color: #22c55e; } .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { - color: #ffffff; + color: #fff; background: #f97316; border: 1px solid #f97316; } + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; - color: #ffffff; + color: #fff; border-color: #ea580c; } + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; - color: #ffffff; + color: #fff; border-color: #c2410c; } + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(249, 115, 22, 0.04); + background: rgb(249 115 22 / 0.04); color: #f97316; border: 1px solid; } + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(249, 115, 22, 0.16); + background: rgb(249 115 22 / 0.16); color: #f97316; border: 1px solid; } + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { - background: rgba(249, 115, 22, 0.04); + background: rgb(249 115 22 / 0.04); border-color: transparent; color: #f97316; } + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { - background: rgba(249, 115, 22, 0.16); + background: rgb(249 115 22 / 0.16); border-color: transparent; color: #f97316; } .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { - color: #ffffff; + color: #fff; background: #a855f7; border: 1px solid #a855f7; } + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; - color: #ffffff; + color: #fff; border-color: #9333ea; } + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; - color: #ffffff; + color: #fff; border-color: #7e22ce; } + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(168, 85, 247, 0.04); + background: rgb(168 85 247 / 0.04); color: #a855f7; border: 1px solid; } + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(168, 85, 247, 0.16); + background: rgb(168 85 247 / 0.16); color: #a855f7; border: 1px solid; } + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { - background: rgba(168, 85, 247, 0.04); + background: rgb(168 85 247 / 0.04); border-color: transparent; color: #a855f7; } + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { - background: rgba(168, 85, 247, 0.16); + background: rgb(168 85 247 / 0.16); border-color: transparent; color: #a855f7; } .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { - color: #ffffff; + color: #fff; background: #ef4444; border: 1px solid #ef4444; } + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; - color: #ffffff; + color: #fff; border-color: #dc2626; } + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; - color: #ffffff; + color: #fff; border-color: #b91c1c; } + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(239, 68, 68, 0.04); + background: rgb(239 68 68 / 0.04); color: #ef4444; border: 1px solid; } + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(239, 68, 68, 0.16); + background: rgb(239 68 68 / 0.16); color: #ef4444; border: 1px solid; } + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { - background: rgba(239, 68, 68, 0.04); + background: rgb(239 68 68 / 0.04); border-color: transparent; color: #ef4444; } + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { - background: rgba(239, 68, 68, 0.16); + background: rgb(239 68 68 / 0.16); border-color: transparent; color: #ef4444; } .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; + color: #fff; background: #020617; border: 1px solid #020617; } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { background: #1e293b; - color: #ffffff; + color: #fff; border-color: #1e293b; } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { box-shadow: none; } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { background: #334155; - color: #ffffff; + color: #fff; border-color: #334155; } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { background-color: transparent; color: #020617; border: 1px solid; } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(2, 6, 23, 0.04); + background: rgb(2 6 23 / 0.04); color: #020617; border: 1px solid; } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { - background: rgba(2, 6, 23, 0.16); + background: rgb(2 6 23 / 0.16); color: #020617; border: 1px solid; } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { background-color: transparent; color: #020617; border-color: transparent; } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { - background: rgba(2, 6, 23, 0.04); + background: rgb(2 6 23 / 0.04); border-color: transparent; color: #020617; } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { - background: rgba(2, 6, 23, 0.16); + background: rgb(2 6 23 / 0.16); border-color: transparent; color: #020617; } @@ -3646,19 +4023,23 @@ background: transparent; border: transparent; } + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #059669; border-color: transparent; } + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #059669; @@ -3746,9 +4127,11 @@ width: 2.5rem; height: 2.5rem; } + .p-speeddial-button.p-button.p-button-icon-only .p-button-icon { font-size: 1rem; } + .p-speeddial-button.p-button.p-button-icon-only .p-icon { width: 1rem; height: 1rem; @@ -3772,6 +4155,7 @@ outline-color: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-speeddial-action:hover { background: #e2e8f0; color: #334155; @@ -3780,6 +4164,7 @@ .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } + .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } @@ -3787,6 +4172,7 @@ .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } + .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } @@ -3794,6 +4180,7 @@ .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } + .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } @@ -3801,6 +4188,7 @@ .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } + .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } @@ -3810,6 +4198,7 @@ .p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, .p-speeddial-semi-circle .p-speeddial-item:first-child, .p-speeddial-semi-circle .p-speeddial-item:last-child, @@ -3819,7 +4208,7 @@ } .p-speeddial-mask { - background-color: rgba(0, 0, 0, 0.4); + background-color: rgb(0 0 0 / 0.4); border-radius: 6px; } @@ -3859,14 +4248,17 @@ .p-splitbutton { border-radius: 6px; } + .p-splitbutton.p-button-rounded { border-radius: 2rem; } + .p-splitbutton.p-button-rounded > .p-button { border-radius: 2rem; } + .p-splitbutton.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgb(0 0 0 / 0.2), 0 2px 2px 0 rgb(0 0 0 / 0.14), 0 1px 5px 0 rgb(0 0 0 / 0.12); } .p-carousel { @@ -3909,9 +4301,8 @@ .p-carousel-indicators { display: flex; - flex-direction: row; + flex-flow: row wrap; justify-content: center; - flex-wrap: wrap; } .p-carousel-indicator > button { @@ -3951,25 +4342,30 @@ outline-color: transparent; margin: 0.5rem; } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, .p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-carousel .p-carousel-indicators { padding: 1rem; } + .p-carousel .p-carousel-indicators .p-carousel-indicator { margin-right: 0.5rem; margin-bottom: 0.5rem; } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { background-color: #e2e8f0; width: 2rem; @@ -3977,9 +4373,11 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { background: #cbd5e1; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #ecfdf5; color: #047857; @@ -3990,7 +4388,7 @@ } .p-datatable-table { - border-spacing: 0px; + border-spacing: 0; width: 100%; } @@ -4087,7 +4485,7 @@ margin: 0; width: 0.5rem; height: 100%; - padding: 0px; + padding: 0; cursor: col-resize; border: 1px solid transparent; } @@ -4221,52 +4619,59 @@ } .p-datatable .p-paginator-top { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-radius: 0; } + .p-datatable .p-paginator-bottom { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-radius: 0; } + .p-datatable .p-datatable-header { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; font-weight: 600; } + .p-datatable .p-datatable-footer { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; font-weight: 600; } + .p-datatable .p-datatable-thead > tr > th { text-align: left; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; font-weight: 600; color: #334155; - background: #ffffff; + background: #fff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-datatable .p-datatable-tfoot > tr > td { text-align: left; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; font-weight: 600; color: #334155; - background: #ffffff; + background: #fff; } + .p-datatable .p-sortable-column .p-sortable-column-icon { color: #64748b; margin-left: 0.5rem; } + .p-datatable .p-sortable-column .p-sortable-column-badge { border-radius: 50%; height: 1rem; @@ -4276,42 +4681,52 @@ background: #ecfdf5; margin-left: 0.5rem; } + .p-datatable .p-sortable-column:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { color: #475569; } + .p-datatable .p-sortable-column.p-highlight { background: #ecfdf5; color: #047857; } + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { color: #047857; } + .p-datatable .p-sortable-column.p-highlight:hover { background: #ecfdf5; color: #047857; } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { color: #047857; } + .p-datatable .p-sortable-column:focus-visible { box-shadow: 0 none; outline: 0 none; } + .p-datatable .p-datatable-tbody > tr { - background: #ffffff; + background: #fff; color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-datatable .p-datatable-tbody > tr > td { text-align: left; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; } + .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, @@ -4325,6 +4740,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, @@ -4333,6 +4749,7 @@ border-color: transparent; background: #f1f5f9; } + .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, @@ -4341,174 +4758,222 @@ outline-offset: 2px; box-shadow: none; } + .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { margin-right: 0.5rem; } + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { font-weight: 600; } + .p-datatable .p-datatable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; } + .p-datatable .p-datatable-tbody > tr.p-highlight { background: #ecfdf5; color: #047857; } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #ecfdf5; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #ecfdf5; } + .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-datatable .p-column-resizer-helper { background: #10b981; } + .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { - background-color: #ffffff; + background-color: #fff; } + .p-datatable .p-datatable-loading-icon { font-size: 2rem; } + .p-datatable .p-datatable-loading-icon.p-icon { width: 2rem; height: 2rem; } + .p-datatable.p-datatable-gridlines .p-datatable-header { - border-width: 1px 1px 0 1px; + border-width: 1px 1px 0; } + .p-datatable.p-datatable-gridlines .p-datatable-footer { - border-width: 0 1px 1px 1px; + border-width: 0 1px 1px; } + .p-datatable.p-datatable-gridlines .p-paginator-top { - border-width: 0 1px 0 1px; + border-width: 0 1px; } + .p-datatable.p-datatable-gridlines .p-paginator-bottom { - border-width: 0 1px 1px 1px; + border-width: 0 1px 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { border-width: 1px 0 1px 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { border-width: 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { border-width: 1px 0 0 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { - border-width: 1px 1px 0 1px; + border-width: 1px 1px 0; } + .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { border-width: 1px 0 1px 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { border-width: 1px 0 1px 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { - border-width: 1px 1px 1px 1px; + border-width: 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { border-width: 0 0 1px 1px; } + .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { - border-width: 0 1px 1px 1px; + border-width: 0 1px 1px; } + .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { border-width: 0 0 1px 1px; } + .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { - border-width: 0 1px 1px 1px; + border-width: 0 1px 1px; } + .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { border-width: 0 0 0 1px; } + .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { - border-width: 0 1px 0 1px; + border-width: 0 1px; } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f8fafc; } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { background: #ecfdf5; color: #047857; } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { color: #047857; } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #047857; } + .p-datatable.p-datatable-sm .p-datatable-header { padding: 0.375rem 0.5rem; } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { padding: 0.375rem 0.5rem; } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { padding: 0.375rem 0.5rem; } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { padding: 0.375rem 0.5rem; } + .p-datatable.p-datatable-sm .p-datatable-footer { padding: 0.375rem 0.5rem; } + .p-datatable.p-datatable-lg .p-datatable-header { padding: 0.9375rem 1.25rem; } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { padding: 0.9375rem 1.25rem; } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { padding: 0.9375rem 1.25rem; } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { padding: 0.9375rem 1.25rem; } + .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 1.25rem; } .p-dataview .p-paginator-top { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-radius: 0; } + .p-dataview .p-paginator-bottom { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-radius: 0; } + .p-dataview .p-dataview-header { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; font-weight: 600; } + .p-dataview .p-dataview-content { - background: #ffffff; + background: #fff; color: #334155; border: 0 none; padding: 0; } + .p-dataview .p-dataview-footer { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; font-weight: 600; border-bottom-left-radius: 6px; @@ -4530,19 +4995,23 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-column-filter-menu-button:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { background: #f1f5f9; color: #475569; } + .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { background: #ecfdf5; color: #047857; } + .p-column-filter-menu-button:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -4559,11 +5028,13 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-column-filter-clear-button:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-column-filter-clear-button:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -4571,16 +5042,18 @@ } .p-column-filter-overlay { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); min-width: 12.5rem; } + .p-column-filter-overlay .p-column-filter-row-items { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { margin: 2px 0; padding: 0.5rem 0.75rem; @@ -4590,57 +5063,69 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { margin-top: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { margin-bottom: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #047857; background: #ecfdf5; } - .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight, .p-disabled):hover { color: #1e293b; background: #f1f5f9; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: 0 none; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } .p-column-filter-overlay-menu .p-column-filter-operator { - padding: 0.5rem 0.5rem 0 0.5rem; + padding: 0.5rem 0.5rem 0; border-bottom: 0 none; color: #334155; - background: #ffffff; - margin: 0 0 0 0; + background: #fff; + margin: 0; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-column-filter-overlay-menu .p-column-filter-constraint { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; border-bottom: 1px solid #e2e8f0; } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { margin-top: 0.5rem; } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child { border-bottom: 0 none; } + .p-column-filter-overlay-menu .p-column-filter-add-rule { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } .p-orderlist { @@ -4682,37 +5167,44 @@ } .p-orderlist .p-orderlist-controls { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } + .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-orderlist .p-orderlist-list-container.p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-orderlist .p-orderlist-header { color: #334155; padding: 1.125rem; font-weight: 600; } + .p-orderlist .p-orderlist-list { color: #334155; - padding: 0.25rem 0.25rem; + padding: 0.25rem; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { border-top: 1px solid #e2e8f0; } + .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 0.75rem; margin: 2px 0; @@ -4721,34 +5213,43 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { margin-top: 0; } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { margin-bottom: 0; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { color: #1e293b; background: #f1f5f9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #1e293b; background: #f1f5f9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { background: #d1fae5; } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f8fafc; } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f1f5f9; } @@ -4795,7 +5296,7 @@ } .p-organizationchart-line-right { - border-radius: 0px; + border-radius: 0; } .p-organizationchart-line-left { @@ -4810,36 +5311,44 @@ background: #f1f5f9; color: #1e293b; } + .p-organizationchart .p-organizationchart-node-content.p-highlight { background: #ecfdf5; color: #047857; } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { color: #79f1b8; } + .p-organizationchart .p-organizationchart-line-down { background: #e2e8f0; } + .p-organizationchart .p-organizationchart-line-left { border-right: 1px solid #e2e8f0; border-color: #e2e8f0; } + .p-organizationchart .p-organizationchart-line-top { border-top: 1px solid #e2e8f0; border-color: #e2e8f0; } + .p-organizationchart .p-organizationchart-node-content { border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { background: inherit; color: inherit; border-radius: 50%; outline-color: transparent; } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -4887,13 +5396,14 @@ } .p-paginator { - background: #ffffff; + background: #fff; color: #334155; border: solid #e2e8f0; border-width: 0; padding: 0.5rem 1rem; border-radius: 6px; } + .p-paginator .p-paginator-first, .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, @@ -4907,37 +5417,45 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 50%; } - .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, -.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, -.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, -.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + + .p-paginator .p-paginator-first:not(.p-disabled, .p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled, .p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled, .p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled, .p-highlight):hover { background: #f1f5f9; border-color: transparent; color: #475569; } + .p-paginator .p-paginator-first { border-top-left-radius: 50%; border-bottom-left-radius: 50%; } + .p-paginator .p-paginator-last { border-top-right-radius: 50%; border-bottom-right-radius: 50%; } + .p-paginator .p-dropdown { margin-left: 0.5rem; margin-right: 0.5rem; height: 2.5rem; } + .p-paginator .p-dropdown .p-dropdown-label { padding-right: 0; } + .p-paginator .p-paginator-page-input { margin-left: 0.5rem; margin-right: 0.5rem; } + .p-paginator .p-paginator-page-input .p-inputtext { max-width: 2.5rem; } + .p-paginator .p-paginator-current { background-color: transparent; border: 0 none; @@ -4947,6 +5465,7 @@ margin: 0.143rem; padding: 0 0.5rem; } + .p-paginator .p-paginator-pages .p-paginator-page { background-color: transparent; border: 0 none; @@ -4957,11 +5476,13 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 50%; } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: #ecfdf5; border-color: #ecfdf5; color: #047857; } + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #f1f5f9; border-color: transparent; @@ -5003,37 +5524,44 @@ } .p-picklist .p-picklist-buttons { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } + .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-picklist .p-picklist-list-wrapper.p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-picklist .p-picklist-header { color: #334155; padding: 1.125rem; font-weight: 600; } + .p-picklist .p-picklist-list { color: #334155; - padding: 0.25rem 0.25rem; + padding: 0.25rem; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { border-top: 1px solid #e2e8f0; } + .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 0.75rem; margin: 2px 0; @@ -5042,34 +5570,43 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { margin-top: 0; } + .p-picklist .p-picklist-list .p-picklist-item:last-child { margin-bottom: 0; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { color: #1e293b; background: #f1f5f9; } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #1e293b; background: #f1f5f9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #047857; background: #ecfdf5; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: #d1fae5; } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f8fafc; } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f1f5f9; } @@ -5190,22 +5727,27 @@ border-radius: 50%; width: 1.125rem; height: 1.125rem; - background-color: #ffffff; + background-color: #fff; } + .p-timeline .p-timeline-event-connector { background-color: #e2e8f0; } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, .p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, .p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } @@ -5294,25 +5836,29 @@ .p-tree { border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; border-radius: 6px; } + .p-tree .p-tree-container .p-treenode { - padding: 0 0; + padding: 0; outline: 0 none; } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: 0 none; } + .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; padding: 0.25rem 0.5rem; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { margin-right: 0.5rem; width: 1.75rem; @@ -5324,59 +5870,74 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { margin-right: 0.5rem; color: #475569; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #ecfdf5; color: #047857; } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #047857; } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #047857; } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-tree .p-tree-filter-container { margin-bottom: 0.5rem; } + .p-tree .p-tree-filter-container .p-tree-filter { width: 100%; padding-right: 1.75rem; } + .p-tree .p-tree-filter-container .p-tree-filter-icon { right: 0.75rem; color: #94a3b8; } + .p-tree .p-treenode-children { padding: 0 0 0 1rem; } + .p-tree .p-tree-loading-icon { font-size: 2rem; } + .p-tree .p-tree-loading-icon.p-icon { width: 2rem; height: 2rem; @@ -5457,7 +6018,7 @@ margin: 0; width: 0.5rem; height: 100%; - padding: 0px; + padding: 0; cursor: col-resize; border: 1px solid transparent; } @@ -5552,55 +6113,63 @@ } .p-treetable .p-paginator-top { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-radius: 0; } + .p-treetable .p-paginator-bottom { - border-width: 0 0 1px 0; + border-width: 0 0 1px; border-radius: 0; } + .p-treetable .p-treetable-header { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; font-weight: 600; } + .p-treetable .p-treetable-footer { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; font-weight: 600; } + .p-treetable .p-treetable-thead > tr > th { text-align: left; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; font-weight: 600; color: #334155; - background: #ffffff; + background: #fff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-treetable .p-treetable-tfoot > tr > td { text-align: left; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; font-weight: 600; color: #334155; - background: #ffffff; + background: #fff; } + .p-treetable .p-sortable-column { outline-color: var(--p-focus-ring-color); } + .p-treetable .p-sortable-column .p-sortable-column-icon { color: #64748b; margin-left: 0.5rem; } + .p-treetable .p-sortable-column .p-sortable-column-badge { border-radius: 50%; height: 1rem; @@ -5610,31 +6179,38 @@ background: #ecfdf5; margin-left: 0.5rem; } + .p-treetable .p-sortable-column:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { color: #475569; } + .p-treetable .p-sortable-column.p-highlight { background: #ecfdf5; color: #047857; } + .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { color: #047857; } + .p-treetable .p-treetable-tbody > tr { - background: #ffffff; + background: #fff; color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-treetable .p-treetable-tbody > tr > td { text-align: left; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; padding: 0.75rem 1rem; } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 1.75rem; height: 1.75rem; @@ -5646,105 +6222,136 @@ outline-color: transparent; margin-right: 0.5rem; } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { margin-right: 0.5rem; } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; } + .p-treetable .p-treetable-tbody > tr.p-highlight { background: #ecfdf5; color: #047857; } + .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { color: #047857; } + .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { color: #047857; } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { color: #1e293b; } + .p-treetable .p-column-resizer-helper { background: #10b981; } + .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { - background: #ffffff; + background: #fff; } + .p-treetable .p-treetable-loading-icon { font-size: 2rem; } + .p-treetable .p-treetable-loading-icon.p-icon { width: 2rem; height: 2rem; } + .p-treetable.p-treetable-gridlines .p-datatable-header { - border-width: 1px 1px 0 1px; + border-width: 1px 1px 0; } + .p-treetable.p-treetable-gridlines .p-treetable-footer { - border-width: 0 1px 1px 1px; + border-width: 0 1px 1px; } + .p-treetable.p-treetable-gridlines .p-treetable-top { - border-width: 0 1px 0 1px; + border-width: 0 1px; } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { - border-width: 0 1px 1px 1px; + border-width: 0 1px 1px; } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { border-width: 1px; } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { border-width: 1px; } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { border-width: 1px; } + .p-treetable.p-treetable-sm .p-treetable-header { padding: 0.65625rem 0.875rem; } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { padding: 0.375rem 0.5rem; } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { padding: 0.375rem 0.5rem; } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { padding: 0.375rem 0.5rem; } + .p-treetable.p-treetable-sm .p-treetable-footer { padding: 0.375rem 0.5rem; } + .p-treetable.p-treetable-lg .p-treetable-header { padding: 0.9375rem 1.25rem; } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { padding: 0.9375rem 1.25rem; } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { padding: 0.9375rem 1.25rem; } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { padding: 0.9375rem 1.25rem; } + .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 1.25rem; } @@ -5767,104 +6374,120 @@ } .p-accordion .p-accordion-header .p-accordion-header-link { - padding: 1.125rem 1.125rem 1.125rem 1.125rem; + padding: 1.125rem; border: 0 none; color: #64748b; - background: #ffffff; + background: #fff; font-weight: 600; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; } + .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: -2px; box-shadow: inset none; } - .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { - background: #ffffff; + + .p-accordion .p-accordion-header:not(.p-highlight, .p-disabled):hover .p-accordion-header-link { + background: #fff; border-color: #e2e8f0; color: #334155; } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { - background: #ffffff; + background: #fff; border-color: #e2e8f0; color: #334155; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { border-color: #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; } + .p-accordion .p-accordion-content { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; border: 0 none; - background: #ffffff; + background: #fff; color: #334155; border-top: 0; - border-top-right-radius: 0; - border-top-left-radius: 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; + border-radius: 0 0 6px 6px; } + .p-accordion .p-accordion-tab { margin-bottom: 0; } + .p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link { border-radius: 0; } + .p-accordion .p-accordion-tab .p-accordion-content { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link { border-top: 0 none; } - .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + + .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight, .p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { border-top: 0 none; } + .p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link { border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-accordion .p-accordion-tab:last-child .p-accordion-content { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } .p-card { - background: #ffffff; + background: #fff; color: #334155; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-card .p-card-body { padding: 1.5rem; } + .p-card .p-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } + .p-card .p-card-subtitle { font-weight: 400; margin-bottom: 0.5rem; color: #64748b; } + .p-card .p-card-content { - padding: 0 0 0 0; + padding: 0; } + .p-card .p-card-footer { - padding: 0 0 0 0; + padding: 0; } .p-fieldset-legend > a, @@ -5888,22 +6511,25 @@ .p-fieldset { border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; border-radius: 6px; } + .p-fieldset .p-fieldset-legend { padding: 1.125rem; border: 1px solid #e2e8f0; color: #334155; - background: #ffffff; + background: #fff; font-weight: 600; border-radius: 6px; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { padding: 0; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 1.125rem; color: #334155; @@ -5911,24 +6537,29 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { color: #1e293b; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { - background: #ffffff; - border-color: #ffffff; + background: #fff; + border-color: #fff; color: #1e293b; } + .p-fieldset .p-fieldset-content { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } .p-divider-horizontal { @@ -5938,7 +6569,7 @@ align-items: center; } - .p-divider-horizontal:before { + .p-divider-horizontal::before { position: absolute; display: block; top: 50%; @@ -5959,7 +6590,7 @@ justify-content: center; } - .p-divider-vertical:before { + .p-divider-vertical::before { position: absolute; display: block; top: 0; @@ -5968,45 +6599,56 @@ content: ""; } - .p-divider.p-divider-solid.p-divider-horizontal:before { + .p-divider.p-divider-solid.p-divider-horizontal::before { border-top-style: solid; } - .p-divider.p-divider-solid.p-divider-vertical:before { + + .p-divider.p-divider-solid.p-divider-vertical::before { border-left-style: solid; } - .p-divider.p-divider-dashed.p-divider-horizontal:before { + + .p-divider.p-divider-dashed.p-divider-horizontal::before { border-top-style: dashed; } - .p-divider.p-divider-dashed.p-divider-vertical:before { + + .p-divider.p-divider-dashed.p-divider-vertical::before { border-left-style: dashed; } - .p-divider.p-divider-dotted.p-divider-horizontal:before { + + .p-divider.p-divider-dotted.p-divider-horizontal::before { border-top-style: dotted; } - .p-divider.p-divider-dotted.p-divider-vertical:before { + + .p-divider.p-divider-dotted.p-divider-vertical::before { border-left-style: dotted; } .p-divider .p-divider-content { - background-color: #ffffff; + background-color: #fff; } + .p-divider.p-divider-horizontal { margin: 1rem 0; padding: 0 1rem; } - .p-divider.p-divider-horizontal:before { + + .p-divider.p-divider-horizontal::before { border-top: 1px solid #e2e8f0; } + .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; } + .p-divider.p-divider-vertical { margin: 0 1rem; padding: 1rem 0; } - .p-divider.p-divider-vertical:before { + + .p-divider.p-divider-vertical::before { border-left: 1px solid #e2e8f0; } + .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } @@ -6034,14 +6676,16 @@ .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; - background: #ffffff; + background: #fff; color: #334155; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-panel .p-panel-header .p-panel-title { font-weight: 600; } + .p-panel .p-panel-header .p-panel-header-icon { width: 1.75rem; height: 1.75rem; @@ -6052,34 +6696,40 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-panel.p-panel-toggleable .p-panel-header { padding: 0.75rem 1.125rem; } + .p-panel .p-panel-content { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; border-top: 0 none; } + .p-panel .p-panel-content:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-panel .p-panel-footer { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; @@ -6148,6 +6798,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -6216,24 +6867,28 @@ .p-splitter { border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; border-radius: 6px; color: #334155; } + .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; background: #e2e8f0; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e2e8f0; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-splitter .p-splitter-gutter-resizing { background: #e2e8f0; } @@ -6259,6 +6914,7 @@ flex: 1 1 auto; align-items: center; } + .p-stepper-header:last-of-type { flex: initial; } @@ -6270,6 +6926,7 @@ text-decoration: none; cursor: pointer; } + .p-stepper-header .p-stepper-action:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -6309,20 +6966,23 @@ padding: 0; list-style-type: none; } + .p-stepper .p-stepper-header { padding: 0.5rem; } + .p-stepper .p-stepper-header .p-stepper-action { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; - background: #ffffff; + background: #fff; outline-color: transparent; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { color: #64748b; border: 1px solid #e2e8f0; border-width: 2px; - background: #ffffff; + background: #fff; min-width: 2rem; height: 2rem; line-height: 2rem; @@ -6330,37 +6990,45 @@ border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { margin-left: 0.5rem; color: #334155; font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ecfdf5; color: #047857; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { color: #334155; } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { background-color: #10b981; } + .p-stepper .p-stepper-panels { - background: #ffffff; - padding: 0.875rem 1.125rem 1.125rem 1.125rem; + background: #fff; + padding: 0.875rem 1.125rem 1.125rem; color: #334155; } + .p-stepper .p-stepper-separator { background-color: #e2e8f0; width: 100%; @@ -6368,40 +7036,49 @@ margin-inline-start: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-stepper.p-stepper-vertical { display: flex; flex-direction: column; } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { display: flex; flex: 1 1 auto; - background: #ffffff; + background: #fff; color: #334155; } + .p-stepper.p-stepper-vertical .p-stepper-panel { display: flex; flex-direction: column; flex: initial; } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { flex: 1 1 auto; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { flex: initial; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; height: auto; margin-inline-start: calc(1.75rem + 2px); } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { background-color: #10b981; } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { padding-left: 3rem; } @@ -6415,8 +7092,7 @@ } .p-tabview-nav-content { - overflow-x: auto; - overflow-y: hidden; + overflow: auto hidden; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior: contain auto; @@ -6477,58 +7153,66 @@ } .p-tabview .p-tabview-nav { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; } + .p-tabview .p-tabview-nav li { margin-right: 0; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { border: solid #e2e8f0; - border-width: 0 0 1px 0; - border-color: transparent transparent #e2e8f0 transparent; - background: #ffffff; + border-width: 0 0 1px; + border-color: transparent transparent #e2e8f0; + background: #fff; color: #64748b; padding: 1rem 1.125rem; font-weight: 600; border-top-right-radius: 6px; border-top-left-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; - margin: 0 0 -1px 0; + margin: 0 0 -1px; outline-color: transparent; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: -2px; box-shadow: inset none; } - .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { - background: #ffffff; + + .p-tabview .p-tabview-nav li:not(.p-highlight, .p-disabled):hover .p-tabview-nav-link { + background: #fff; border-color: #e2e8f0; color: #334155; } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { - background: #ffffff; + background: #fff; border-color: #e2e8f0; color: #10b981; } + .p-tabview .p-tabview-nav-btn.p-link { - background: #ffffff; + background: #fff; color: #10b981; width: 2.5rem; - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgb(0 0 0 / 0.2), 0 2px 2px 0 rgb(0 0 0 / 0.14), 0 1px 5px 0 rgb(0 0 0 / 0.12); border-radius: 0; outline-color: transparent; } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: -2px; box-shadow: inset none; } + .p-tabview .p-tabview-panels { - background: #ffffff; - padding: 0.875rem 1.125rem 1.125rem 1.125rem; + background: #fff; + padding: 0.875rem 1.125rem 1.125rem; border: 0 none; color: #334155; border-bottom-right-radius: 6px; @@ -6556,12 +7240,13 @@ } .p-toolbar { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; padding: 1.125rem; border-radius: 6px; gap: 0.5rem; } + .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } @@ -6596,8 +7281,9 @@ transition: opacity 0.1s linear; } - .p-confirm-popup:after, -.p-confirm-popup:before { + .p-confirm-popup::before { + border-width: 10px; + margin-left: -10px; bottom: 100%; left: calc(var(--overlayArrowLeft, 0) + 1.25rem); content: " "; @@ -6605,30 +7291,25 @@ width: 0; position: absolute; pointer-events: none; + border-style: solid; + border-color: rgb(226 232 240 / 0); + border-bottom-color: #d3dce8; } - .p-confirm-popup:after { - border-width: 8px; - margin-left: -8px; - } - - .p-confirm-popup:before { - border-width: 10px; - margin-left: -10px; - } - - .p-confirm-popup-flipped:after, -.p-confirm-popup-flipped:before { + .p-confirm-popup-flipped::after, +.p-confirm-popup-flipped::before { bottom: auto; top: 100%; } - .p-confirm-popup.p-confirm-popup-flipped:after { + .p-confirm-popup.p-confirm-popup-flipped::after { border-bottom-color: transparent; + border-top-color: #fff; } - .p-confirm-popup.p-confirm-popup-flipped:before { + .p-confirm-popup.p-confirm-popup-flipped::before { border-bottom-color: transparent; + border-top-color: #e2e8f0; } .p-confirm-popup .p-confirm-popup-content { @@ -6637,49 +7318,55 @@ } .p-confirm-popup { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } + .p-confirm-popup .p-confirm-popup-content { padding: 1rem; } + .p-confirm-popup .p-confirm-popup-footer { text-align: right; - padding: 0 1rem 1rem 1rem; + padding: 0 1rem 1rem; } + .p-confirm-popup .p-confirm-popup-footer button { margin: 0 0.5rem 0 0; width: auto; } + .p-confirm-popup .p-confirm-popup-footer button:last-child { margin: 0; } - .p-confirm-popup:after { - border-style: solid; - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #ffffff; - } - .p-confirm-popup:before { + + .p-confirm-popup::after { border-style: solid; - border-color: rgba(226, 232, 240, 0); - border-bottom-color: #d3dce8; - } - .p-confirm-popup.p-confirm-popup-flipped:after { - border-top-color: #ffffff; - } - .p-confirm-popup.p-confirm-popup-flipped:before { - border-top-color: #e2e8f0; + border-color: rgb(255 255 255 / 0); + border-bottom-color: #fff; + border-width: 8px; + margin-left: -8px; + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } + .p-confirm-popup .p-confirm-popup-icon { font-size: 1.5rem; } + .p-confirm-popup .p-confirm-popup-icon.p-icon { width: 1.5rem; height: 1.5rem; } + .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } @@ -6727,6 +7414,7 @@ } /* Animation */ + /* Center */ .p-dialog-enter-active { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); @@ -6752,7 +7440,7 @@ .p-dialog-bottomleft .p-dialog, .p-dialog-bottomright .p-dialog { margin: 0.75rem; - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0, 0, 0); } .p-dialog-top .p-dialog-enter-active, @@ -6776,12 +7464,12 @@ .p-dialog-top .p-dialog-enter-from, .p-dialog-top .p-dialog-leave-to { - transform: translate3d(0px, -100%, 0px); + transform: translate3d(0, -100%, 0); } .p-dialog-bottom .p-dialog-enter-from, .p-dialog-bottom .p-dialog-leave-to { - transform: translate3d(0px, 100%, 0px); + transform: translate3d(0, 100%, 0); } .p-dialog-left .p-dialog-enter-from, @@ -6790,7 +7478,7 @@ .p-dialog-topleft .p-dialog-leave-to, .p-dialog-bottomleft .p-dialog-enter-from, .p-dialog-bottomleft .p-dialog-leave-to { - transform: translate3d(-100%, 0px, 0px); + transform: translate3d(-100%, 0, 0); } .p-dialog-right .p-dialog-enter-from, @@ -6799,15 +7487,15 @@ .p-dialog-topright .p-dialog-leave-to, .p-dialog-bottomright .p-dialog-enter-from, .p-dialog-bottomright .p-dialog-leave-to { - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0, 0); } /* Maximize */ .p-dialog-maximized { width: 100vw !important; height: 100vh !important; - top: 0px !important; - left: 0px !important; + top: 0 !important; + left: 0 !important; max-height: 100%; } @@ -6822,21 +7510,24 @@ .p-dialog { border-radius: 6px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); border: 1px solid #e2e8f0; } + .p-dialog .p-dialog-header { border-bottom: 0 none; - background: #ffffff; + background: #fff; color: #334155; padding: 1.5rem; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-dialog .p-dialog-header .p-dialog-title { font-weight: 600; font-size: 1.25rem; } + .p-dialog .p-dialog-header .p-dialog-header-icon { width: 1.75rem; height: 1.75rem; @@ -6848,42 +7539,50 @@ outline-color: transparent; margin-right: 0.5rem; } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; } + .p-dialog .p-dialog-content { - background: #ffffff; + background: #fff; color: #334155; - padding: 0 1.5rem 1.5rem 1.5rem; + padding: 0 1.5rem 1.5rem; } + .p-dialog .p-dialog-content:last-of-type { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-dialog .p-dialog-footer { border-top: 0 none; - background: #ffffff; + background: #fff; color: #334155; - padding: 0 1.5rem 1.5rem 1.5rem; + padding: 0 1.5rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.5rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { margin-left: 1rem; } @@ -6923,8 +7622,8 @@ transition: opacity 0.1s linear; } - .p-overlaypanel:after, -.p-overlaypanel:before { + .p-overlaypanel::after, +.p-overlaypanel::before { bottom: 100%; left: calc(var(--overlayArrowLeft, 0) + 1.25rem); content: " "; @@ -6934,43 +7633,48 @@ pointer-events: none; } - .p-overlaypanel:after { + .p-overlaypanel::after { border-width: 8px; margin-left: -8px; + border-style: solid; + border-color: rgb(255 255 255 / 0); + border-bottom-color: #fff; } - .p-overlaypanel:before { + .p-overlaypanel::before { border-width: 10px; margin-left: -10px; + border-style: solid; + border-color: rgb(226 232 240 / 0); + border-bottom-color: #d3dce8; } - .p-overlaypanel-flipped:after, -.p-overlaypanel-flipped:before { + .p-overlaypanel-flipped::after, +.p-overlaypanel-flipped::before { bottom: auto; top: 100%; } - .p-overlaypanel.p-overlaypanel-flipped:after { - border-bottom-color: transparent; - } - - .p-overlaypanel.p-overlaypanel-flipped:before { + .p-overlaypanel.p-overlaypanel-flipped::after { border-bottom-color: transparent; + border-top-color: #fff; } .p-overlaypanel { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } + .p-overlaypanel .p-overlaypanel-content { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } + .p-overlaypanel .p-overlaypanel-close { background: #10b981; - color: #ffffff; + color: #fff; width: 1.75rem; height: 1.75rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -6979,25 +7683,15 @@ top: -0.875rem; right: -0.875rem; } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #059669; - color: #ffffff; - } - .p-overlaypanel:after { - border-style: solid; - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #ffffff; - } - .p-overlaypanel:before { - border-style: solid; - border-color: rgba(226, 232, 240, 0); - border-bottom-color: #d3dce8; + color: #fff; } - .p-overlaypanel.p-overlaypanel-flipped:after { - border-top-color: #ffffff; - } - .p-overlaypanel.p-overlaypanel-flipped:before { + + .p-overlaypanel.p-overlaypanel-flipped::before { border-top-color: #e2e8f0; + border-bottom-color: transparent; } .p-sidebar-mask { @@ -7019,7 +7713,7 @@ display: flex; flex-direction: column; pointer-events: auto; - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0, 0, 0); position: relative; transition: transform 0.3s; } @@ -7050,11 +7744,12 @@ width: 100vw !important; height: 100vh !important; max-height: 100%; - top: 0px !important; - left: 0px !important; + top: 0 !important; + left: 0 !important; } /* Animation */ + /* Center */ .p-sidebar-left .p-sidebar-enter-from, .p-sidebar-left .p-sidebar-leave-to { @@ -7145,7 +7840,7 @@ height: 100%; } - @media screen and (max-width: 64em) { + @media screen and (width <= 64em) { .p-sidebar-left .p-sidebar-lg, .p-sidebar-left .p-sidebar-md, .p-sidebar-right .p-sidebar-lg, @@ -7153,19 +7848,23 @@ width: 20rem; } } + .p-sidebar { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } + .p-sidebar .p-sidebar-header { padding: 1.125rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { font-weight: 600; font-size: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 1.75rem; @@ -7177,23 +7876,27 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-sidebar .p-sidebar-header + .p-sidebar-content { padding-top: 0; } + .p-sidebar .p-sidebar-content { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } .p-tooltip { @@ -7253,20 +7956,24 @@ .p-tooltip .p-tooltip-text { background: #334155; - color: #ffffff; + color: #fff; padding: 0.5rem 0.75rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { border-right-color: #334155; } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { border-left-color: #334155; } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { border-top-color: #334155; } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #334155; } @@ -7292,8 +7999,8 @@ flex-wrap: wrap; } - .p-fileupload > input[type=file], -.p-fileupload-basic input[type=file] { + .p-fileupload > input[type="file"], +.p-fileupload-basic input[type="file"] { display: none; } @@ -7316,7 +8023,7 @@ } .p-fileupload .p-fileupload-buttonbar { - background: #ffffff; + background: #fff; padding: 1.125rem; border: 1px solid #e2e8f0; color: #334155; @@ -7325,23 +8032,27 @@ border-top-left-radius: 6px; gap: 0.5rem; } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-fileupload .p-fileupload-content { - background: #ffffff; - padding: 0 1.125rem 1.125rem 1.125rem; + background: #fff; + padding: 0 1.125rem 1.125rem; border: 1px solid #e2e8f0; color: #334155; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { border: 1px dashed #10b981; background-color: #ecfdf5; } + .p-fileupload .p-fileupload-file { padding: 1rem; border: 1px solid #e2e8f0; @@ -7349,33 +8060,40 @@ gap: 0.5rem; margin-bottom: 0.5rem; } + .p-fileupload .p-fileupload-file:last-child { margin-bottom: 0; } + .p-fileupload .p-fileupload-file-name { margin-bottom: 0.5rem; } + .p-fileupload .p-fileupload-file-size { margin-right: 0.5rem; } + .p-fileupload .p-progressbar { height: 0.25rem; } + .p-fileupload .p-fileupload-row > div { padding: 0.75rem 1rem; } + .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } .p-fileupload-choose:not(.p-disabled):hover { background: #059669; - color: #ffffff; + color: #fff; border-color: #059669; } + .p-fileupload-choose:not(.p-disabled):active { background: #047857; - color: #ffffff; + color: #fff; border-color: #047857; } @@ -7412,34 +8130,41 @@ } .p-breadcrumb { - background: #ffffff; + background: #fff; border: 0 none; border-radius: 6px; padding: 1rem; } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; outline-color: transparent; } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { color: #94a3b8; } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { - margin: 0 0.5rem 0 0.5rem; + margin: 0 0.5rem; color: #94a3b8; } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { color: #334155; } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #94a3b8; } @@ -7487,103 +8212,129 @@ } .p-contextmenu { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; min-width: 12.5rem; } + .p-contextmenu .p-contextmenu-root-list { outline: 0 none; } + .p-contextmenu .p-submenu-list { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-contextmenu .p-menuitem { margin: 2px 0; } + .p-contextmenu .p-menuitem:first-child { margin-top: 0; } + .p-contextmenu .p-menuitem:last-child { margin-bottom: 0; } + .p-contextmenu .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { color: #334155; padding: 0.5rem 0.75rem; user-select: none; } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { color: #047857; background: #ecfdf5; } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } + .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: #d1fae5; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content { color: #334155; background: #f1f5f9; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-contextmenu .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-contextmenu .p-submenu-icon { font-size: 0.875rem; } + .p-contextmenu .p-submenu-icon.p-icon { width: 0.875rem; height: 0.875rem; @@ -7643,6 +8394,7 @@ } /* Position */ + /* top */ .p-dock-top { left: 0; @@ -7696,67 +8448,82 @@ } .p-dock .p-dock-list-container { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - padding: 0.5rem 0.5rem; + background: rgb(255 255 255 / 0.1); + border: 1px solid rgb(255 255 255 / 0.2); + padding: 0.5rem; border-radius: 0.5rem; } + .p-dock .p-dock-list-container .p-dock-list { outline: 0 none; } + .p-dock .p-dock-item { padding: 0.5rem; border-radius: 6px; } + .p-dock .p-dock-item.p-focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: 0 none; } + .p-dock .p-dock-link { width: 3rem; height: 3rem; } + .p-dock.p-dock-top .p-dock-item-second-prev, .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, .p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } + .p-dock.p-dock-top .p-dock-item-prev, .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, .p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } + .p-dock.p-dock-left .p-dock-item-second-prev, .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, .p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } + .p-dock.p-dock-left .p-dock-item-prev, .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, .p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container { overflow-x: auto; width: 100%; } + .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list { margin: 0 auto; } + .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container { overflow-y: auto; height: 100%; } + .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list { margin: auto 0; } + .p-dock.p-dock-mobile .p-dock-list .p-dock-item { transform: none; margin: 0; @@ -7924,149 +8691,186 @@ } .p-megamenu { - padding: 0.5rem 0.5rem; - background: #ffffff; + padding: 0.5rem; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; } + .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { margin: 2px 0; } + .p-megamenu .p-menuitem:first-child { margin-top: 0; } + .p-megamenu .p-menuitem:last-child { margin-bottom: 0; } + .p-megamenu .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { color: #334155; padding: 0.5rem 0.75rem; user-select: none; } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { color: #047857; background: #ecfdf5; } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: #d1fae5; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content { color: #334155; background: #f1f5f9; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-megamenu .p-megamenu-panel { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-megamenu .p-submenu-header { margin: 0; padding: 0.5rem 0.75rem; color: #94a3b8; - background: #ffffff; + background: #fff; font-weight: 600; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-megamenu .p-submenu-list { - padding: 0.25rem 0.25rem; + padding: 0.25rem; min-width: 12.5rem; } + .p-megamenu .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-megamenu.p-megamenu-vertical { min-width: 12.5rem; - padding: 0.25rem 0.25rem; + padding: 0.25rem; } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { padding: 0.5rem 0.75rem; user-select: none; } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; margin-left: 0.5rem; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { width: 100%; - padding: 0.5rem 0.5rem; + padding: 0.5rem; } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { width: 1.75rem; height: 1.75rem; @@ -8075,42 +8879,52 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { color: #334155; background: #f1f5f9; } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { font-size: 0.875rem; } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-left: auto; transition: transform 0.2s; } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { transform: rotate(-180deg); } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { transition: transform 0.2s; transform: rotate(90deg); } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { transform: rotate(-90deg); } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { padding-left: 1.5rem; } @@ -8135,99 +8949,123 @@ } .p-menu { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; min-width: 12.5rem; } + .p-menu .p-menuitem { margin: 2px 0; } + .p-menu .p-menuitem:first-child { margin-top: 0; } + .p-menu .p-menuitem:last-child { margin-bottom: 0; } + .p-menu .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { color: #334155; padding: 0.5rem 0.75rem; user-select: none; } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content { color: #047857; background: #ecfdf5; } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } + .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: #d1fae5; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content { color: #334155; background: #f1f5f9; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-menu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-menu.p-menu-overlay { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-menu .p-submenu-header { margin: 0; padding: 0.5rem 0.75rem; color: #94a3b8; - background: #ffffff; + background: #fff; font-weight: 600; border-top-right-radius: 0; border-top-left-radius: 0; } + .p-menu .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; @@ -8340,132 +9178,166 @@ } .p-menubar { - padding: 0.5rem 0.5rem; - background: #ffffff; + padding: 0.5rem; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; } + .p-menubar .p-menubar-root-list { outline: 0 none; } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { padding: 0.5rem 0.75rem; user-select: none; } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; margin-left: 0.5rem; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-menubar .p-menuitem { margin: 2px 0; } + .p-menubar .p-menuitem:first-child { margin-top: 0; } + .p-menubar .p-menuitem:last-child { margin-bottom: 0; } + .p-menubar .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { color: #334155; padding: 0.5rem 0.75rem; user-select: none; } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { color: #047857; background: #ecfdf5; } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: #d1fae5; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content { color: #334155; background: #f1f5f9; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-menubar .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-menubar .p-submenu-list { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); min-width: 12.5rem; border-radius: 6px; } + .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + .p-menubar.p-menubar-mobile .p-menubar-button { width: 1.75rem; height: 1.75rem; @@ -8474,54 +9346,68 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { color: #334155; background: #f1f5f9; } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-menubar.p-menubar-mobile .p-menubar-root-list { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { font-size: 0.875rem; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-left: auto; transition: transform 0.2s; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { transform: rotate(-180deg); } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon { transition: transform 0.2s; transform: rotate(90deg); } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { transform: rotate(-90deg); } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { padding-left: 1.5rem; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { padding-left: 2.5rem; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { padding-left: 3.5rem; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { padding-left: 4.5rem; } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { padding-left: 5.5rem; } @@ -8562,167 +9448,206 @@ .p-panelmenu .p-panelmenu-header { outline: 0 none; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { border: 0 none; color: #64748b; - background: #ffffff; + background: #fff; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #64748b; - padding: 1.125rem 1.125rem 1.125rem 1.125rem; + padding: 1.125rem; font-weight: 600; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { margin-right: 0.5rem; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { margin-right: 0.5rem; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { outline: 1px solid var(--p-focus-ring-color); outline-offset: -2px; box-shadow: inset none; } - .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { - background: #ffffff; + + .p-panelmenu .p-panelmenu-header:not(.p-highlight, .p-disabled):hover .p-panelmenu-header-content { + background: #fff; border-color: #e2e8f0; color: #334155; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { - background: #ffffff; + background: #fff; border-color: #e2e8f0; color: #334155; border-bottom-right-radius: 0; border-bottom-left-radius: 0; margin-bottom: 0; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content { border-color: #e2e8f0; - background: #ffffff; + background: #fff; color: #334155; } + .p-panelmenu .p-panelmenu-content { - padding: 0.25rem 0.25rem; + padding: 0.25rem; border: 0 none; - background: #ffffff; + background: #fff; color: #334155; border-top: 0; - border-top-right-radius: 0; - border-top-left-radius: 0; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; + border-radius: 0 0 6px 6px; } + .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { margin: 2px 0; } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { margin-top: 0; } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { margin-bottom: 0; } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { color: #334155; padding: 0.5rem 0.75rem; user-select: none; } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { color: #047857; background: #ecfdf5; } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: #d1fae5; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content { color: #334155; background: #f1f5f9; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } + .p-panelmenu .p-panelmenu-content .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { padding: 0 0 0 1rem; } + .p-panelmenu .p-panelmenu-panel { margin-bottom: 0; } + .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content { border-radius: 0; } + .p-panelmenu .p-panelmenu-panel .p-panelmenu-content { border-radius: 0; } + .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content { border-top: 0 none; } - .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content { + + .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight, .p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content { border-top: 0 none; } + .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content { border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; @@ -8784,13 +9709,14 @@ .p-steps .p-steps-item .p-menuitem-link { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 6px; - background: #ffffff; + background: #fff; outline-color: transparent; } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #64748b; border: 1px solid #e2e8f0; - background: #ffffff; + background: #fff; min-width: 2rem; height: 2rem; line-height: 2rem; @@ -8798,24 +9724,29 @@ z-index: 1; border-radius: 50%; } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { margin-top: 0.5rem; color: #334155; } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #ecfdf5; color: #047857; } + .p-steps .p-steps-item.p-highlight .p-steps-title { font-weight: 500; color: #334155; } - .p-steps .p-steps-item:before { + + .p-steps .p-steps-item::before { content: " "; border-top: 1px solid #e2e8f0; width: 100%; @@ -8866,42 +9797,48 @@ } .p-tabmenu .p-tabmenu-nav { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; - border-width: 0 0 1px 0; + border-width: 0 0 1px; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem { margin-right: 0; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { border: solid #e2e8f0; - border-width: 0 0 1px 0; - border-color: transparent transparent #e2e8f0 transparent; - background: #ffffff; + border-width: 0 0 1px; + border-color: transparent transparent #e2e8f0; + background: #fff; color: #64748b; padding: 1rem 1.125rem; font-weight: 600; border-top-right-radius: 6px; border-top-left-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; - margin: 0 0 -1px 0; + margin: 0 0 -1px; outline-color: transparent; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: -2px; box-shadow: inset none; } - .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { - background: #ffffff; + + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight, .p-disabled):hover .p-menuitem-link { + background: #fff; border-color: #e2e8f0; color: #334155; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { - background: #ffffff; + background: #fff; border-color: #e2e8f0; color: #10b981; } @@ -8956,107 +9893,134 @@ } .p-tieredmenu { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 6px; min-width: 12.5rem; } + .p-tieredmenu.p-tieredmenu-overlay { - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-tieredmenu .p-tieredmenu-root-list { outline: 0 none; } + .p-tieredmenu .p-submenu-list { - padding: 0.25rem 0.25rem; - background: #ffffff; + padding: 0.25rem; + background: #fff; border: 1px solid #e2e8f0; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-tieredmenu .p-menuitem { margin: 2px 0; } + .p-tieredmenu .p-menuitem:first-child { margin-top: 0; } + .p-tieredmenu .p-menuitem:last-child { margin-bottom: 0; } + .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #334155; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 4px; } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { color: #334155; padding: 0.5rem 0.75rem; user-select: none; } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { color: #94a3b8; margin-right: 0.5rem; } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #94a3b8; } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { color: #047857; background: #ecfdf5; } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #047857; } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #047857; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: #d1fae5; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content { color: #334155; background: #f1f5f9; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover { color: #334155; background: #f1f5f9; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { color: #334155; } - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + + .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight, .p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #334155; } + .p-tieredmenu .p-menuitem-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } + .p-tieredmenu .p-submenu-icon { font-size: 0.875rem; } + .p-tieredmenu .p-submenu-icon.p-icon { width: 0.875rem; height: 0.875rem; @@ -9087,67 +10051,82 @@ margin: 0; border-radius: 6px; } + .p-inline-message.p-inline-message-info { - background: rgba(239, 246, 255, 0.95); + background: rgb(239 246 255 / 0.95); border: solid #bfdbfe; border-width: 1px; color: #2563eb; } + .p-inline-message.p-inline-message-info .p-inline-message-icon { color: #2563eb; } + .p-inline-message.p-inline-message-success { - background: rgba(240, 253, 244, 0.95); + background: rgb(240 253 244 / 0.95); border: solid #bbf7d0; border-width: 1px; color: #16a34a; } + .p-inline-message.p-inline-message-success .p-inline-message-icon { color: #16a34a; } + .p-inline-message.p-inline-message-warn { - background: rgba(254, 252, 232, 0.95); + background: rgb(254 252 232 / 0.95); border: solid #fde68a; border-width: 1px; color: #ca8a04; } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { color: #ca8a04; } + .p-inline-message.p-inline-message-error { - background: rgba(254, 242, 242, 0.95); + background: rgb(254 242 242 / 0.95); border: solid #fecaca; border-width: 1px; color: #dc2626; } + .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #dc2626; } + .p-inline-message.p-inline-message-secondary { background: #f1f5f9; border: solid #e2e8f0; border-width: 1px; color: #475569; } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { color: #475569; } + .p-inline-message.p-inline-message-contrast { background: #020617; border: solid #64748b; border-width: 1px; color: #f8fafc; } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { color: #f8fafc; } + .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; } + .p-inline-message .p-inline-message-text { font-size: 1rem; } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } @@ -9205,9 +10184,11 @@ margin: 1rem 0; border-radius: 6px; } + .p-message .p-message-wrapper { padding: 0.5rem 0.75rem; } + .p-message .p-message-close { width: 1.75rem; height: 1.75rem; @@ -9216,94 +10197,117 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-message .p-message-close:hover { - background: rgba(255, 255, 255, 0.5); + background: rgb(255 255 255 / 0.5); } + .p-message .p-message-close:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-message.p-message-info { - background: rgba(239, 246, 255, 0.95); + background: rgb(239 246 255 / 0.95); border: solid #bfdbfe; border-width: 1px; color: #2563eb; } + .p-message.p-message-info .p-message-icon { color: #2563eb; } + .p-message.p-message-info .p-message-close { color: #2563eb; } + .p-message.p-message-success { - background: rgba(240, 253, 244, 0.95); + background: rgb(240 253 244 / 0.95); border: solid #bbf7d0; border-width: 1px; color: #16a34a; } + .p-message.p-message-success .p-message-icon { color: #16a34a; } + .p-message.p-message-success .p-message-close { color: #16a34a; } + .p-message.p-message-warn { - background: rgba(254, 252, 232, 0.95); + background: rgb(254 252 232 / 0.95); border: solid #fde68a; border-width: 1px; color: #ca8a04; } + .p-message.p-message-warn .p-message-icon { color: #ca8a04; } + .p-message.p-message-warn .p-message-close { color: #ca8a04; } + .p-message.p-message-error { - background: rgba(254, 242, 242, 0.95); + background: rgb(254 242 242 / 0.95); border: solid #fecaca; border-width: 1px; color: #dc2626; } + .p-message.p-message-error .p-message-icon { color: #dc2626; } + .p-message.p-message-error .p-message-close { color: #dc2626; } + .p-message.p-message-secondary { background: #f1f5f9; border: solid #e2e8f0; border-width: 1px; color: #475569; } + .p-message.p-message-secondary .p-message-icon { color: #475569; } + .p-message.p-message-secondary .p-message-close { color: #475569; } + .p-message.p-message-contrast { background: #020617; border: solid #64748b; border-width: 1px; color: #f8fafc; } + .p-message.p-message-contrast .p-message-icon { color: #f8fafc; } + .p-message.p-message-contrast .p-message-close { color: #f8fafc; } + .p-message .p-message-text { font-size: 1rem; font-weight: 500; } + .p-message .p-message-icon { font-size: 1rem; margin-right: 0.5rem; } + .p-message .p-icon:not(.p-message-close-icon) { width: 1rem; height: 1rem; @@ -9356,8 +10360,6 @@ /* Animations */ .p-toast-message-enter-from { opacity: 0; - -webkit-transform: translateY(50%); - -ms-transform: translateY(50%); transform: translateY(50%); } @@ -9373,43 +10375,49 @@ } .p-toast-message-enter-active { - -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .p-toast-message-leave-active { - -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; } .p-toast { opacity: 1; } + .p-toast .p-toast-message { - margin: 0 0 1rem 0; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + margin: 0 0 1rem; + box-shadow: 0 2px 12px 0 rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-toast .p-toast-message .p-toast-message-content { padding: 0.75rem; border-width: 1px; } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { margin: 0 0 0 0.5rem; } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { font-size: 1.125rem; } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { width: 1.125rem; height: 1.125rem; } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { font-weight: 500; } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { - margin: 0.5rem 0 0 0; + margin: 0.5rem 0 0; } + .p-toast .p-toast-message .p-toast-icon-close { width: 1.125rem; height: 1.125rem; @@ -9418,70 +10426,84 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.5); + background: rgb(255 255 255 / 0.5); } + .p-toast .p-toast-message .p-toast-icon-close:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-toast .p-toast-message.p-toast-message-info { - background: rgba(239, 246, 255, 0.95); + background: rgb(239 246 255 / 0.95); border: solid #bfdbfe; border-width: 1px; color: #2563eb; } + .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #2563eb; } + .p-toast .p-toast-message.p-toast-message-success { - background: rgba(240, 253, 244, 0.95); + background: rgb(240 253 244 / 0.95); border: solid #bbf7d0; border-width: 1px; color: #16a34a; } + .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #16a34a; } + .p-toast .p-toast-message.p-toast-message-warn { - background: rgba(254, 252, 232, 0.95); + background: rgb(254 252 232 / 0.95); border: solid #fde68a; border-width: 1px; color: #ca8a04; } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #ca8a04; } + .p-toast .p-toast-message.p-toast-message-error { - background: rgba(254, 242, 242, 0.95); + background: rgb(254 242 242 / 0.95); border: solid #fecaca; border-width: 1px; color: #dc2626; } + .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #dc2626; } + .p-toast .p-toast-message.p-toast-message-secondary { background: #f1f5f9; border: solid #e2e8f0; border-width: 1px; color: #475569; } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { color: #475569; } + .p-toast .p-toast-message.p-toast-message-contrast { background: #020617; border: solid #64748b; border-width: 1px; color: #f8fafc; } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { color: #f8fafc; @@ -9615,6 +10637,7 @@ } /* Positions */ + /* Thumbnails */ .p-galleria-thumbnails-left .p-galleria-content, .p-galleria-thumbnails-right .p-galleria-content { @@ -9780,17 +10803,21 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 50%; } + .p-galleria .p-galleria-close .p-galleria-close-icon { font-size: 2rem; } + .p-galleria .p-galleria-close .p-icon { width: 2rem; height: 2rem; } + .p-galleria .p-galleria-close:hover { - background: rgba(255, 255, 255, 0.1); + background: rgb(255 255 255 / 0.1); color: #f1f5f9; } + .p-galleria .p-galleria-item-nav { background: transparent; color: #f1f5f9; @@ -9800,26 +10827,32 @@ border-radius: 6px; margin: 0 0.5rem; } + .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } + .p-galleria .p-galleria-item-nav .p-icon { width: 2rem; height: 2rem; } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.1); + background: rgb(255 255 255 / 0.1); color: #f1f5f9; } + .p-galleria .p-galleria-caption { - background: rgba(0, 0, 0, 0.5); + background: rgb(0 0 0 / 0.5); color: #f1f5f9; padding: 1rem; } + .p-galleria .p-galleria-indicators { padding: 1rem; } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { background-color: #e2e8f0; width: 1rem; @@ -9827,36 +10860,46 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 50%; } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { background: #cbd5e1; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #ecfdf5; color: #047857; } + .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { margin-right: 0.5rem; } + .p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { margin-bottom: 0.5rem; } + .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { - background: rgba(0, 0, 0, 0.5); + background: rgb(0 0 0 / 0.5); } + .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { - background: rgba(255, 255, 255, 0.4); + background: rgb(255 255 255 / 0.4); } + .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { - background: rgba(255, 255, 255, 0.6); + background: rgb(255 255 255 / 0.6); } + .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #ecfdf5; color: #047857; } + .p-galleria .p-galleria-thumbnail-container { - background: rgba(0, 0, 0, 0.9); + background: rgb(0 0 0 / 0.9); padding: 1rem 0.25rem; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; @@ -9867,14 +10910,17 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border-radius: 50%; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { - background: rgba(255, 255, 255, 0.1); + background: rgb(255 255 255 / 0.1); color: #f1f5f9; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { outline-color: transparent; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -9882,7 +10928,7 @@ } .p-galleria-mask { - --maskbg: rgba(0, 0, 0, 0.9); + --maskbg: rgb(0 0 0 / 0.9); } .p-image-mask { @@ -9960,7 +11006,7 @@ } .p-image-mask { - --maskbg: rgba(0, 0, 0, 0.9); + --maskbg: rgb(0 0 0 / 0.9); } .p-image-preview-indicator { @@ -9968,13 +11014,14 @@ color: #f8fafc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-image-preview-indicator .p-icon { width: 1.5rem; height: 1.5rem; } .p-image-preview-container:hover > .p-image-preview-indicator { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 0.5); } .p-image-toolbar { @@ -9990,16 +11037,20 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; margin-right: 0.5rem; } + .p-image-action.p-link:last-child { margin-right: 0; } + .p-image-action.p-link:hover { - color: #ffffff; - background-color: rgba(255, 255, 255, 0.1); + color: #fff; + background-color: rgb(255 255 255 / 0.1); } + .p-image-action.p-link i { font-size: 1.5rem; } + .p-image-action.p-link .p-icon { width: 1.5rem; height: 1.5rem; @@ -10048,25 +11099,29 @@ background-color: #e2e8f0; border-radius: 6px; } + .p-avatar.p-avatar-lg { width: 3rem; height: 3rem; font-size: 1.5rem; } + .p-avatar.p-avatar-lg .p-avatar-icon { font-size: 1.5rem; } + .p-avatar.p-avatar-xl { width: 4rem; height: 4rem; font-size: 2rem; } + .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } .p-avatar-group .p-avatar { - border: 2px solid #ffffff; + border: 2px solid #fff; } .p-badge { @@ -10104,47 +11159,56 @@ .p-badge { background: #10b981; - color: #ffffff; + color: #fff; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; height: 1.5rem; line-height: 1.5rem; } + .p-badge.p-badge-secondary { background-color: #f1f5f9; color: #475569; } + .p-badge.p-badge-success { background-color: #22c55e; - color: #ffffff; + color: #fff; } + .p-badge.p-badge-info { background-color: #0ea5e9; - color: #ffffff; + color: #fff; } + .p-badge.p-badge-warning { background-color: #f97316; - color: #ffffff; + color: #fff; } + .p-badge.p-badge-danger { background-color: #ef4444; - color: #ffffff; + color: #fff; } + .p-badge.p-badge-secondary { background-color: #f1f5f9; color: #475569; } + .p-badge.p-badge-contrast { background-color: #020617; - color: #ffffff; + color: #fff; } + .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; height: 2.25rem; line-height: 2.25rem; } + .p-badge.p-badge-xl { font-size: 1.5rem; min-width: 3rem; @@ -10196,31 +11260,37 @@ border-radius: 16px; padding: 0 0.75rem; } + .p-chip .p-chip-text { line-height: 1.5; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-chip .p-chip-icon { margin-right: 0.5rem; } + .p-chip img { width: 2rem; height: 2rem; margin-left: -0.75rem; margin-right: 0.5rem; } + .p-chip .p-chip-remove-icon { margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-chip .p-chip-remove-icon:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; box-shadow: none; } + .p-chip .p-chip-remove-icon:focus { outline: 0 none; } @@ -10249,10 +11319,12 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; outline-color: transparent; } + .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f1f5f9; color: #1e293b; } + .p-inplace .p-inplace-display:focus { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -10299,58 +11371,73 @@ .p-metergroup { gap: 1rem; } + .p-metergroup .p-metergroup-meters { background: #e2e8f0; border-radius: 6px; } + .p-metergroup .p-metergroup-meter { border: 0 none; background: #10b981; } + .p-metergroup .p-metergroup-labels .p-metergroup-label { gap: 0.5rem; } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { background: #10b981; width: 0.5rem; height: 0.5rem; border-radius: 100%; } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { width: 1rem; height: 1rem; } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { gap: 0.5rem; } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { gap: 1rem; } + .p-metergroup.p-metergroup-horizontal { flex-direction: column; } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { height: 0.5rem; } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-metergroup.p-metergroup-vertical { flex-direction: row; } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { width: 0.5rem; height: 100%; } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { border-top-left-radius: 6px; border-top-right-radius: 6px; } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; @@ -10388,7 +11475,6 @@ left: 0; bottom: 0; will-change: left, right; - -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } @@ -10400,81 +11486,93 @@ left: 0; bottom: 0; will-change: left, right; - -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } - @-webkit-keyframes p-progressbar-indeterminate-anim { + @keyframes p-progressbar-indeterminate-anim { 0% { left: -35%; right: 100%; } + 60% { left: 100%; right: -90%; } + 100% { left: 100%; right: -90%; } } + @keyframes p-progressbar-indeterminate-anim { 0% { left: -35%; right: 100%; } + 60% { left: 100%; right: -90%; } + 100% { left: 100%; right: -90%; } } - @-webkit-keyframes p-progressbar-indeterminate-anim-short { + + @keyframes p-progressbar-indeterminate-anim-short { 0% { left: -200%; right: 100%; } + 60% { left: 107%; right: -8%; } + 100% { left: 107%; right: -8%; } } + @keyframes p-progressbar-indeterminate-anim-short { 0% { left: -200%; right: 100%; } + 60% { left: 107%; right: -8%; } + 100% { left: 107%; right: -8%; } } + .p-progressbar { border: 0 none; height: 1.25rem; background: #e2e8f0; border-radius: 6px; } + .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; background: #10b981; } + .p-progressbar .p-progressbar-label { - color: #ffffff; + color: #fff; line-height: 1.25rem; } @@ -10497,10 +11595,7 @@ transform-origin: center center; width: 100%; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; margin: auto; } @@ -10521,34 +11616,42 @@ transform: rotate(360deg); } } + @keyframes p-progress-spinner-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } + 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } + 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } + @keyframes p-progress-spinner-color { 100%, 0% { stroke: #dc2626; } + 40% { stroke: #2563eb; } + 66% { stroke: #16a34a; } + 80%, 90% { stroke: #ca8a04; } } + .p-ripple { overflow: hidden; position: relative; @@ -10557,7 +11660,7 @@ .p-ink { display: block; position: absolute; - background: rgba(255, 255, 255, 0.5); + background: rgb(255 255 255 / 0.5); border-radius: 100%; transform: scale(0); pointer-events: none; @@ -10577,6 +11680,7 @@ transform: scale(2.5); } } + .p-scrolltop { position: fixed; bottom: 20px; @@ -10614,19 +11718,23 @@ width: 3rem; height: 3rem; border-radius: 50%; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-scrolltop.p-link { - background: rgba(0, 0, 0, 0.7); + background: rgb(0 0 0 / 0.7); } + .p-scrolltop.p-link:hover { - background: rgba(0, 0, 0, 0.8); + background: rgb(0 0 0 / 0.8); } + .p-scrolltop .p-scrolltop-icon { font-size: 1.5rem; color: #f8fafc; } + .p-scrolltop .p-scrolltop-icon.p-icon { width: 1.5rem; height: 1.5rem; @@ -10646,6 +11754,7 @@ top: 0; transform: translateX(-100%); z-index: 1; + background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.4), rgb(255 255 255 / 0)); } .p-skeleton.p-skeleton-circle { @@ -10660,17 +11769,16 @@ from { transform: translateX(-100%); } + to { transform: translateX(100%); } } + .p-skeleton { background-color: #e2e8f0; border-radius: 6px; } - .p-skeleton:after { - background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); - } .p-tag { display: inline-flex; @@ -10690,42 +11798,51 @@ .p-tag { background: #10b981; - color: #ffffff; + color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; border-radius: 6px; } + .p-tag.p-tag-success { background-color: #22c55e; - color: #ffffff; + color: #fff; } + .p-tag.p-tag-info { background-color: #0ea5e9; - color: #ffffff; + color: #fff; } + .p-tag.p-tag-warning { background-color: #f97316; - color: #ffffff; + color: #fff; } + .p-tag.p-tag-danger { background-color: #ef4444; - color: #ffffff; + color: #fff; } + .p-tag.p-tag-secondary { background-color: #f1f5f9; color: #475569; } + .p-tag.p-tag-contrast { background-color: #020617; - color: #ffffff; + color: #fff; } + .p-tag .p-tag-icon { font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { margin-right: 0.25rem; } + .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; @@ -10755,56 +11872,68 @@ } .p-terminal { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #e2e8f0; - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; } + .p-terminal .p-terminal-input { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; } } + @layer primevue { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; justify-content: space-between; } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { border-bottom-color: #e2e8f0; } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { transform: rotate(90deg); } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { transform: rotate(-180deg); } + .p-accordion .p-accordion-tab { border-bottom: 1px solid #e2e8f0; } + .p-accordion .p-accordion-tab:last-child { border-bottom: 0 none; } .p-autocomplete .p-autocomplete-multiple-container { - padding: 0.25rem 0.25rem; + padding: 0.25rem; gap: 0.25rem; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { border-radius: 4px; margin: 0; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { margin-left: 0.375rem; } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { margin-left: 0.5rem; } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { margin-left: 0.5rem; } + .p-autocomplete.p-disabled { opacity: 1; } @@ -10816,84 +11945,109 @@ .p-button.p-button-success:enabled:focus-visible { outline-color: #22c55e; } + .p-button.p-button-info:enabled:focus-visible { outline-color: #0ea5e9; } + .p-button.p-button-warning:enabled:focus-visible { outline-color: #f97316; } + .p-button.p-button-help:enabled:focus-visible { outline-color: #a855f7; } + .p-button.p-button-danger:enabled:focus-visible { outline-color: #ef4444; } + .p-button.p-button-contrast:enabled:focus-visible { outline-color: #020617; } + .p-button.p-button-outlined { border-color: var(--primary-200); } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { border-color: var(--primary-200); } + .p-button.p-button-outlined.p-button-secondary { border-color: var(--surface-200); color: #64748b; } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { color: #64748b; background-color: #f1f5f9; border-color: var(--surface-200); } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { color: #64748b; background-color: #e2e8f0; border-color: var(--surface-200); } + .p-button.p-button-outlined.p-button-success { border-color: #bbf7d0; } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { border-color: #bbf7d0; } + .p-button.p-button-outlined.p-button-info { border-color: #bae6fd; } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { border-color: #bae6fd; } + .p-button.p-button-outlined.p-button-warning { border-color: #fed7aa; } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { border-color: #fed7aa; } + .p-button.p-button-outlined.p-button-help { border-color: #e9d5ff; } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { border-color: #e9d5ff; } + .p-button.p-button-outlined.p-button-danger { border-color: #fecaca; } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { border-color: #fecaca; } + .p-button.p-button-outlined.p-button-contrast { border-color: #334155; } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { border-color: #334155; } + .p-button.p-button-secondary.p-button-text { color: #64748b; } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { background: #f1f5f9; color: #64748b; } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { background: #e2e8f0; color: #64748b; @@ -10908,6 +12062,7 @@ margin-top: 0.5rem; padding-top: 0.5rem; } + .p-datepicker table th { font-weight: 500; } @@ -10917,15 +12072,18 @@ display: flex; flex-direction: column; } + .p-card .p-card-caption { display: flex; flex-direction: column; gap: 0.5rem; } + .p-card .p-card-caption .p-card-title, .p-card .p-card-caption .p-card-subtitle { margin-bottom: 0; } + .p-card .p-card-body { display: flex; flex-direction: column; @@ -10937,15 +12095,18 @@ } .p-cascadeselect { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-cascadeselect .p-cascadeselect-label { box-shadow: none; } + .p-cascadeselect.p-disabled { opacity: 1; background-color: #e2e8f0; } + .p-cascadeselect.p-disabled .p-cascadeselect-label { color: #64748b; } @@ -10957,43 +12118,53 @@ .p-checkbox .p-checkbox-box { border-radius: 4px; - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline-width: 1px; outline-offset: 2px; } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { border-color: #10b981; } + .p-checkbox.p-disabled { opacity: 1; } + .p-checkbox.p-disabled .p-checkbox-box { background-color: #e2e8f0; border: 1px solid #cbd5e1; } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { color: #64748b; } .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.25rem; + padding: 0.25rem; gap: 0.25rem; } + .p-chips .p-chips-multiple-container .p-chips-token { border-radius: 4px; margin: 0; } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.375rem; } + .p-chips .p-chips-multiple-container .p-chips-input-token { margin-left: 0.5rem; } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { margin-left: 0.5rem; } + .p-chips.p-disabled .p-chips-multiple-container { opacity: 1; background-color: #e2e8f0; @@ -11003,16 +12174,20 @@ border-radius: 16px; padding: 0.25rem 0.75rem; } + .p-chip .p-chip-text { margin-top: 0; margin-bottom: 0; } + .p-chip .p-chip-remove-icon { margin-left: 0.375rem; } + .p-chip:has(.p-chip-remove-icon) { padding-right: 0.5rem; } + .p-chip img { margin-left: -0.5rem; } @@ -11020,26 +12195,31 @@ .p-colorpicker-preview { padding: 0; } + .p-colorpicker-preview:enabled:focus { outline-offset: 2px; } + .p-colorpicker-preview.p-inputtext.p-disabled { opacity: 0.6; } .p-confirm-popup { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #10b981; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #10b981; } + .p-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { border-bottom-color: #c0f8de; } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { border-bottom-color: #c0f8de; } @@ -11050,34 +12230,41 @@ .p-dialog { border-radius: 12px; - background-color: #ffffff; + background-color: #fff; } + .p-dialog.p-dialog-maximized { border-radius: 0; } + .p-dialog .p-dialog-header { border-top-right-radius: 12px; border-top-left-radius: 12px; } + .p-dialog .p-dialog-content:last-of-type { border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; } + .p-dialog .p-dialog-footer { border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; } .p-dropdown { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-dropdown .p-dropdown-label { box-shadow: none; } + .p-dropdown.p-disabled { opacity: 1; background-color: #e2e8f0; } + .p-dropdown.p-disabled .p-dropdown-label { color: #64748b; } @@ -11090,38 +12277,47 @@ .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { border-bottom-color: #c0f8de; } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { border-bottom-color: #c0f8de; } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { background-color: #ecfdf5; color: #047857; } .p-fieldset { - padding: 0 1.125rem 1.125rem 1.125rem; + padding: 0 1.125rem 1.125rem; margin: 0; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { padding: 0.5rem 0.75rem; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { padding: 0; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { color: #64748b; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { background-color: #f1f5f9; } + .p-fieldset .p-fieldset-legend { border: 0 none; padding: 0; margin-bottom: 0.375rem; } + .p-fieldset .p-fieldset-legend span { padding: 0.5rem 0.75rem; } + .p-fieldset .p-fieldset-content { padding: 0; } @@ -11132,26 +12328,33 @@ flex-direction: column; gap: 0.5rem; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0; } + .p-column-filter-overlay-menu .p-column-filter-constraints { display: flex; flex-direction: column; gap: 0.5rem; } + .p-column-filter-overlay-menu .p-column-filter-constraint { - padding: 0 0 0 0; + padding: 0; } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { margin-bottom: 0.5rem; } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { margin-bottom: 0; } + .p-column-filter-overlay-menu .p-column-filter-add-rule { padding: 0; } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0; } @@ -11174,27 +12377,27 @@ } .p-inline-message.p-inline-message-info { - box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + box-shadow: 0 4px 8px 0 rgb(59 130 246 / 0.04); } .p-inline-message.p-inline-message-success { - box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + box-shadow: 0 4px 8px 0 rgb(34 197 94 / 0.04); } .p-inline-message.p-inline-message-warn { - box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + box-shadow: 0 4px 8px 0 rgb(234 179 8 / 0.04); } .p-inline-message.p-inline-message-error { - box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + box-shadow: 0 4px 8px 0 rgb(239 68 68 / 0.04); } .p-inline-message.p-inline-message-secondary { - box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + box-shadow: 0 4px 8px 0 rgb(74 85 103 / 0.04); } .p-inline-message.p-inline-message-contrast { - box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + box-shadow: 0 4px 8px 0 rgb(2 6 23 / 0.04); } .p-inputgroup-addon { @@ -11204,16 +12407,19 @@ .p-inputnumber.p-inputnumber-buttons-stacked { position: relative; } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { position: absolute; top: 1px; right: 1px; height: calc(100% - 2px); } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { border-top-right-radius: 5px; border-bottom-right-radius: 5px; @@ -11221,49 +12427,61 @@ border: 0 none; color: #64748b; } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { background-color: #f1f5f9; color: #475569; } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { background-color: #e2e8f0; color: #334155; } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { background-color: transparent; border: 1px solid #cbd5e1; color: #64748b; } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { background-color: #f1f5f9; color: #475569; } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { background-color: #e2e8f0; color: #334155; } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { border-left: 0 none; } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { border-right: 0 none; } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { background-color: transparent; border: 1px solid #cbd5e1; color: #64748b; } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { background-color: #f1f5f9; color: #475569; } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { background-color: #e2e8f0; color: #334155; } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { border-bottom: 0 none; } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { border-top: 0 none; } @@ -11271,19 +12489,22 @@ .p-inputswitch .p-inputswitch-slider { border: 0 none; } - .p-inputswitch.p-highlight p-inputswitch-slider:before { + + .p-inputswitch.p-highlight p-inputswitch-slider::before { left: 1.25rem; transform: none; } + .p-inputswitch.p-invalid > .p-inputswitch-slider { background: #f87171; } - .p-inputswitch.p-invalid > .p-inputswitch-slider:before { - background: #ffffff; + + .p-inputswitch.p-invalid > .p-inputswitch-slider::before { + background: #fff; } .p-inputtext { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } .p-inputtext:disabled { @@ -11297,6 +12518,7 @@ outline-color: transparent; transition: outline-color 0.2s; } + .p-knob svg:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -11304,12 +12526,14 @@ } .p-listbox { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-listbox.p-disabled { opacity: 1; background-color: #e2e8f0; } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { color: #64748b; } @@ -11319,61 +12543,73 @@ } .p-message.p-message-info { - box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + box-shadow: 0 4px 8px 0 rgb(59 130 246 / 0.04); } + .p-message.p-message-info .p-message-close:focus-visible { outline-color: #2563eb; } + .p-message.p-message-info .p-message-close:hover { background: #dbeafe; } .p-message.p-message-success { - box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + box-shadow: 0 4px 8px 0 rgb(34 197 94 / 0.04); } + .p-message.p-message-success .p-message-close:focus-visible { outline-color: #16a34a; } + .p-message.p-message-success .p-message-close:hover { background: #dcfce7; } .p-message.p-message-warn { - box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + box-shadow: 0 4px 8px 0 rgb(234 179 8 / 0.04); } + .p-message.p-message-warn .p-message-close:focus-visible { outline-color: #ca8a04; } + .p-message.p-message-warn .p-message-close:hover { background: #fef9c3; } .p-message.p-message-error { - box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + box-shadow: 0 4px 8px 0 rgb(239 68 68 / 0.04); } + .p-message.p-message-error .p-message-close:focus-visible { outline-color: #dc2626; } + .p-message.p-message-error .p-message-close:hover { background: #fee2e2; } .p-message.p-message-secondary { - box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + box-shadow: 0 4px 8px 0 rgb(74 85 103 / 0.04); } + .p-message.p-message-secondary .p-message-close:focus-visible { outline-color: #475569; } + .p-message.p-message-secondary .p-message-close:hover { background: #e2e8f0; } .p-message.p-message-contrast { - box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + box-shadow: 0 4px 8px 0 rgb(2 6 23 / 0.04); } + .p-message.p-message-contrast .p-message-close:focus-visible { outline-color: #f8fafc; } + .p-message.p-message-contrast .p-message-close:hover { background: #1e293b; } @@ -11384,49 +12620,60 @@ } .p-multiselect { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-multiselect.p-disabled { opacity: 1; background-color: #e2e8f0; } + .p-multiselect.p-disabled .p-multiselect-label { color: #64748b; } + .p-multiselect.p-multiselect-chip .p-multiselect-token { border-radius: 4px; margin-right: 0.25rem; } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { margin-left: 0.375rem; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } .p-panelmenu .p-panelmenu-header { border-radius: 4px; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { outline: 0 none; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { background: #e2e8f0; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { color: #334155; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { color: #334155; } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { color: #334155; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #334155; padding: 0.5rem 0.75rem; @@ -11434,45 +12681,58 @@ border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { color: #334155; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { color: #94a3b8; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { color: #94a3b8; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { background: #f1f5f9; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { color: #334155; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { color: #334155; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { color: #334155; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { margin-right: 0.5rem; } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { margin-right: 0.5rem; } + .p-panelmenu .p-panelmenu-content { border-radius: 6px; padding: 0 0 0 1rem; } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { margin-top: 2px; } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { margin-top: 2px; } + .p-panelmenu .p-panelmenu-panel { - padding: 0.25rem 0.25rem; + padding: 0.25rem; overflow: hidden; margin-bottom: 0.75rem; border: 1px solid #e2e8f0; @@ -11480,26 +12740,31 @@ } .p-password-panel { - background-color: #ffffff; + background-color: #fff; border: 1px solid #e2e8f0; padding: 0.75rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border-radius: 6px; } + .p-password-panel .p-password-meter { margin-bottom: 0.75rem; background: #e2e8f0; border-radius: 6px; } + .p-password-panel .p-password-meter .p-password-strength { border-radius: 6px; } + .p-password-panel .p-password-meter .p-password-strength.weak { background: #ef4444; } + .p-password-panel .p-password-meter .p-password-strength.medium { background: #f59e0b; } + .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } @@ -11510,14 +12775,17 @@ background: #f1f5f9; border: 1px solid #f1f5f9; } + .p-orderlist-controls .p-button:not(:disabled):hover { background: #e2e8f0; color: #334155; border-color: #e2e8f0; } + .p-orderlist-controls .p-button:not(:disabled):focus { box-shadow: none; } + .p-orderlist-controls .p-button:not(:disabled):active { background: #cbd5e1; color: #1e293b; @@ -11525,25 +12793,28 @@ } .p-orderlist .p-orderlist-header { - background: #ffffff; + background: #fff; border: 0 none; - padding: 0.75rem 1rem 0.5rem 1rem; + padding: 0.75rem 1rem 0.5rem; font-weight: 600; color: #64748b; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-orderlist .p-orderlist-list { border: 0 none; - background: #ffffff; + background: #fff; color: #334155; - padding: 0.25rem 0.25rem; + padding: 0.25rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-orderlist .p-orderlist-list .p-orderlist-item { border-radius: 6px; } + .p-orderlist .p-orderlist-list:not(:first-child) { border: 0 none; } @@ -11552,6 +12823,7 @@ padding: 0.75rem 1rem; border-radius: 6px; } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; border: 1px solid #e2e8f0; @@ -11559,29 +12831,36 @@ justify-content: center; align-items: center; } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { position: static; } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { - padding: 0.75rem 1rem 1.25rem 1rem; + padding: 0.75rem 1rem 1.25rem; } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { border-right: 0 none; } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { border-top-right-radius: 6px; } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { border-left: 1px solid #e2e8f0; border-top-left-radius: 6px; } .p-overlaypanel { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } + .p-overlaypanel .p-overlaypanel-content { padding: 0.75rem; } + .p-overlaypanel .p-overlaypanel-close { width: 1.75rem; height: 1.75rem; @@ -11595,11 +12874,13 @@ top: 0.25rem; right: 0.25rem; } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { color: #475569; border-color: transparent; background: #f1f5f9; } + .p-overlaypanel .p-overlaypanel-close:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: 2px; @@ -11609,14 +12890,16 @@ .p-panel { border: 1px solid #e2e8f0; border-radius: 6px; - background-color: #ffffff; + background-color: #fff; } + .p-panel .p-panel-header, .p-panel .p-panel-content, .p-panel .p-panel-footer { background: transparent; border: 0 none; } + .p-panel:has(.p-panel-footer) .p-panel-content { padding-bottom: 0.875rem; } @@ -11627,14 +12910,17 @@ background: #f1f5f9; border: 1px solid #f1f5f9; } + .p-picklist-buttons .p-button:not(:disabled):hover { background: #e2e8f0; color: #334155; border-color: #e2e8f0; } + .p-picklist-buttons .p-button:not(:disabled):focus { box-shadow: none; } + .p-picklist-buttons .p-button:not(:disabled):active { background: #cbd5e1; color: #1e293b; @@ -11642,25 +12928,28 @@ } .p-picklist .p-picklist-header { - background: #ffffff; + background: #fff; border: 0 none; - padding: 0.75rem 1rem 0.5rem 1rem; + padding: 0.75rem 1rem 0.5rem; font-weight: 600; color: #64748b; border-top-right-radius: 6px; border-top-left-radius: 6px; } + .p-picklist .p-picklist-list { border: 0 none; - background: #ffffff; + background: #fff; color: #334155; - padding: 0.25rem 0.25rem; + padding: 0.25rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-picklist .p-picklist-list .p-picklist-item { border-radius: 6px; } + .p-picklist .p-picklist-list:not(:first-child) { border: 0 none; } @@ -11671,22 +12960,27 @@ } .p-radiobutton .p-radiobutton-box { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline-width: 1px; outline-offset: 2px; } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { border-color: #10b981; } + .p-radiobutton.p-disabled { opacity: 1; } + .p-radiobutton.p-disabled .p-radiobutton-box { border: 1px solid #cbd5e1; background-color: #e2e8f0; } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { background-color: #64748b; } @@ -11700,6 +12994,7 @@ position: relative; transition: none; } + .p-selectbutton .p-button::before { content: ""; background-color: transparent; @@ -11711,31 +13006,38 @@ height: calc(100% - 0.5rem); border-radius: 4px; } + .p-selectbutton .p-button.p-highlight::before { - background: #ffffff; - border-color: #ffffff; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + background: #fff; + border-color: #fff; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.02), 0 1px 2px 0 rgb(0 0 0 / 0.04); } + .p-selectbutton .p-button:focus-visible { outline: 1px solid var(--p-focus-ring-color); outline-offset: -1px; box-shadow: none; border-color: #94a3b8; } + .p-selectbutton .p-button.p-disabled { opacity: 1; color: #94a3b8; } + .p-selectbutton.p-invalid { box-shadow: 0 0 0 1px #f87171; border-radius: 6px; } + .p-selectbutton.p-invalid > .p-button { border: 1px solid #f1f5f9; } + .p-selectbutton.p-disabled { opacity: 1; } + .p-selectbutton.p-disabled .p-button { color: #94a3b8; } @@ -11745,18 +13047,20 @@ justify-content: center; align-items: center; } + .p-slider .p-slider-handle::before { content: ""; width: 16px; height: 16px; display: block; - background-color: #ffffff; + background-color: #fff; border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + box-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.08), 0 1px 1px 0 rgb(0 0 0 / 0.14); } + .p-slider .p-slider-handle:focus-visible { outline: 0 none; - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; } .p-speeddial-item.p-focus > .p-speeddial-action { @@ -11772,12 +13076,14 @@ } .p-stepper .p-stepper-header .p-stepper-number { - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06), 0 1px 1px 0 rgb(0 0 0 / 0.12); } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { - background: #ffffff; + background: #fff; color: #10b981; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { color: #10b981; } @@ -11786,40 +13092,49 @@ border-width: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-steps .p-steps-item .p-steps-number { position: relative; font-weight: 500; } + .p-steps .p-steps-item .p-steps-number::after { content: " "; position: absolute; width: 100%; height: 100%; border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06), 0 1px 1px 0 rgb(0 0 0 / 0.12); } + .p-steps .p-steps-item.p-highlight .p-steps-number { - background: #ffffff; + background: #fff; color: #10b981; } + .p-steps .p-steps-item.p-highlight .p-steps-title { color: #10b981; } + .p-steps .p-steps-item.p-disabled { opacity: 1; } - .p-steps .p-steps-item:before { + + .p-steps .p-steps-item::before { border-top-width: 2px; margin-top: calc(-1rem + 1px); } + .p-steps .p-steps-item:first-child::before { width: calc(50% + 1rem); transform: translateX(100%); } + .p-steps .p-steps-item:last-child::before { width: 50%; } @@ -11833,9 +13148,11 @@ background-color: #10b981; transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-tabmenu .p-tabmenu-nav { position: relative; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } @@ -11849,17 +13166,21 @@ background-color: #10b981; transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-tabview .p-tabview-nav { position: relative; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; } + .p-tabview .p-tabview-nav-btn.p-link { color: #64748b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; - box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + box-shadow: 0 0 10px 50px rgb(255 255 255 / 0.6); } + .p-tabview .p-tabview-nav-btn.p-link:hover { color: #475569; } @@ -11868,33 +13189,39 @@ background: var(--primary-100); color: var(--primary-700); } + .p-tag.p-tag-success { background: var(--green-100); color: var(--green-700); } + .p-tag.p-tag-info { background: var(--blue-100); color: var(--blue-700); } + .p-tag.p-tag-warning { background: var(--orange-100); color: var(--orange-700); } + .p-tag.p-tag-danger { background: var(--red-100); color: var(--red-700); } .p-terminal { - background: #ffffff; + background: #fff; color: #334155; border: 1px solid #cbd5e1; padding: 0.5rem 0.75rem; border-radius: 6px; } + .p-terminal .p-terminal-prompt { margin-right: 0.25rem; } + .p-terminal .p-terminal-response { margin: 2px 0; } @@ -11905,6 +13232,7 @@ justify-content: center; position: relative; } + .p-timeline .p-timeline-event-marker::before { content: " "; border-radius: 50%; @@ -11912,21 +13240,24 @@ height: 0.375rem; background-color: #10b981; } + .p-timeline .p-timeline-event-marker::after { content: " "; position: absolute; width: 100%; height: 100%; border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06), 0 1px 1px 0 rgb(0 0 0 / 0.12); } .p-toast .p-toast-message { backdrop-filter: blur(1.5px); } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { font-size: 0.875rem; } + .p-toast .p-toast-message .p-toast-icon-close { width: 1.75rem; height: 1.75rem; @@ -11936,68 +13267,89 @@ } .p-toast .p-toast-message.p-toast-message-info { - box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + box-shadow: 0 4px 8px 0 rgb(59 130 246 / 0.04); } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { color: #334155; } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { outline-color: #2563eb; } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { background: #dbeafe; } + .p-toast .p-toast-message.p-toast-message-success { - box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + box-shadow: 0 4px 8px 0 rgb(34 197 94 / 0.04); } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { color: #334155; } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { outline-color: #16a34a; } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { background: #dcfce7; } + .p-toast .p-toast-message.p-toast-message-warn { - box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + box-shadow: 0 4px 8px 0 rgb(234 179 8 / 0.04); } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { color: #334155; } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { outline-color: #ca8a04; } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { background: #fef9c3; } + .p-toast .p-toast-message.p-toast-message-error { - box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + box-shadow: 0 4px 8px 0 rgb(239 68 68 / 0.04); } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { color: #334155; } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { outline-color: #dc2626; } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { background: #fee2e2; } + .p-toast .p-toast-message.p-toast-message-secondary { - box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + box-shadow: 0 4px 8px 0 rgb(74 85 103 / 0.04); } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { outline-color: #dc2626; } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { background: #e2e8f0; } + .p-toast .p-toast-message.p-toast-message-contrast { - box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + box-shadow: 0 4px 8px 0 rgb(2 6 23 / 0.04); } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { outline-color: #dc2626; } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { background: #1e293b; } @@ -12007,6 +13359,7 @@ position: relative; transition: none; } + .p-togglebutton .p-button::before { content: ""; background-color: transparent; @@ -12018,17 +13371,21 @@ height: calc(100% - 0.5rem); border-radius: 4px; } + .p-togglebutton.p-highlight .p-button::before { - background: #ffffff; - border-color: #ffffff; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + background: #fff; + border-color: #fff; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.02), 0 1px 2px 0 rgb(0 0 0 / 0.04); } + .p-togglebutton.p-disabled { opacity: 1; } + .p-togglebutton.p-disabled .p-button { color: #94a3b8; } + .p-togglebutton.p-disabled .p-button .p-button-icon { color: #94a3b8; } @@ -12041,33 +13398,40 @@ border: 0 none; padding: 1rem; } + .p-tree .p-tree-container .p-treenode { margin: 2px 0; } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { outline-offset: -2px; } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { background-color: #ecfdf5; } + .p-tree .p-tree-container > .p-treenode:first-child { margin-top: 0; } + .p-tree .p-tree-container > .p-treenode:last-child { margin-bottom: 0; } .p-treeselect-panel .p-tree { - padding: 0.25rem 0.25rem; + padding: 0.25rem; } .p-treeselect { - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(18 18 23 / 0.05); } + .p-treeselect.p-disabled { opacity: 1; background-color: #e2e8f0; } + .p-treeselect.p-disabled .p-treeselect-label { color: #64748b; } diff --git a/src/assets/layout/_config.scss b/src/assets/layout/_config.scss index 2d78c1c3..2351178d 100644 --- a/src/assets/layout/_config.scss +++ b/src/assets/layout/_config.scss @@ -10,15 +10,12 @@ top: 50%; right: 0; margin-top: -1.5rem; - border-top-left-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-radius: var(--border-radius) 0 0 var(--border-radius); transition: background-color var(--transition-duration); overflow: hidden; cursor: pointer; z-index: 999; - box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15); + box-shadow: -0.25rem 0 1rem rgb(0 0 0 / 0.15); i { font-size: 2rem; diff --git a/src/assets/layout/_menu.scss b/src/assets/layout/_menu.scss index 3a9aa0ed..06db0331 100644 --- a/src/assets/layout/_menu.scss +++ b/src/assets/layout/_menu.scss @@ -11,7 +11,7 @@ background-color: var(--surface-overlay); border-radius: $borderRadius; padding: 0.5rem 1.5rem; - box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08); + box-shadow: 0 3px 5px rgb(0 0 0 / 0.02), 0 0 2px rgb(0 0 0 / 0.05), 0 1px 4px rgb(0 0 0 / 0.08); } .layout-menu { diff --git a/src/assets/layout/_preloading.scss b/src/assets/layout/_preloading.scss index a8141044..52ff0d59 100644 --- a/src/assets/layout/_preloading.scss +++ b/src/assets/layout/_preloading.scss @@ -5,6 +5,7 @@ width: 100%; height: 100%; } + .preloader-content { border: 0 solid transparent; border-radius: 50%; @@ -15,7 +16,7 @@ left: calc(50vw - 75px); } -.preloader-content:before, .preloader-content:after{ +.preloader-content::before, .preloader-content::after{ content: ''; border: 1em solid var(--primary-color); border-radius: 50%; @@ -28,7 +29,7 @@ opacity: 0; } -.preloader-content:before{ +.preloader-content::before{ animation-delay: 0.5s; } @@ -37,9 +38,11 @@ transform: scale(0); opacity: 0; } + 50%{ opacity: 1; } + 100%{ transform: scale(1); opacity: 0; diff --git a/src/assets/layout/_responsive.scss b/src/assets/layout/_responsive.scss index 4678f3db..2f2220d7 100644 --- a/src/assets/layout/_responsive.scss +++ b/src/assets/layout/_responsive.scss @@ -1,4 +1,4 @@ -@media screen and (min-width: 1960px) { +@media screen and (width >= 1960px) { .layout-main, .landing-wrapper { width: 1504px; margin-left: auto !important; @@ -7,7 +7,7 @@ } -@media (min-width: 992px) { +@media (width >= 992px) { .layout-wrapper { &.layout-overlay { .layout-main-container { @@ -55,7 +55,7 @@ } } -@media (max-width: 991px) { +@media (width <= 991px) { .blocked-scroll { overflow: hidden; } diff --git a/src/assets/layout/_topbar.scss b/src/assets/layout/_topbar.scss index c45d167d..512b32bf 100644 --- a/src/assets/layout/_topbar.scss +++ b/src/assets/layout/_topbar.scss @@ -10,7 +10,7 @@ transition: left $transitionDuration; display: flex; align-items: center; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); + box-shadow: 0 3px 5px rgb(0 0 0 / .02), 0 0 2px rgb(0 0 0 / .05), 0 1px 4px rgb(0 0 0 / .08); .layout-topbar-logo { display: flex; @@ -78,7 +78,7 @@ } i { - //font-size: 1.5rem; + /* font-size: 1.5rem; */ margin-right: 0.8rem; } @@ -112,7 +112,7 @@ } } -@media (max-width: 991px) { +@media (width <= 991px) { .layout-topbar { justify-content: space-between; @@ -138,14 +138,13 @@ position: absolute; flex-direction: column; background-color: var(--surface-overlay); - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); + box-shadow: 0 3px 5px rgb(0 0 0 / .02), 0 0 2px rgb(0 0 0 / .05), 0 1px 4px rgb(0 0 0 / .08); border-radius: 12px; padding: 1rem; right: 2rem; top: 5rem; min-width: 15rem; display: none; - -webkit-animation: scalein 0.15s linear; animation: scalein 0.15s linear; &.layout-topbar-menu-mobile-active { diff --git a/src/assets/layout/_typography.scss b/src/assets/layout/_typography.scss index b9a0c8ff..f0832a2d 100644 --- a/src/assets/layout/_typography.scss +++ b/src/assets/layout/_typography.scss @@ -1,5 +1,5 @@ h1, h2, h3, h4, h5, h6 { - margin: 1.5rem 0 1rem 0; + margin: 1.5rem 0 1rem; font-family: inherit; font-weight: 500; line-height: 1.2; @@ -49,12 +49,12 @@ blockquote { hr { border-top: solid var(--surface-border); - border-width: 1px 0 0 0; + border-width: 1px 0 0; margin: 1rem 0; } p { - margin: 0 0 1rem 0; + margin: 0 0 1rem; line-height: 1.5; &:last-child { diff --git a/src/assets/layout/_utils.scss b/src/assets/layout/_utils.scss index 3a6fb0dc..dedb0f90 100644 --- a/src/assets/layout/_utils.scss +++ b/src/assets/layout/_utils.scss @@ -1,5 +1,5 @@ /* Utils */ -.clearfix:after { +.clearfix::after { content: " "; display: block; clear: both; diff --git a/src/assets/styles.scss b/src/assets/styles.scss index 44ec4774..b1fadd9d 100644 --- a/src/assets/styles.scss +++ b/src/assets/styles.scss @@ -1,12 +1,13 @@ /* You can add global styles to this file, and also import other style files */ -$gutter: 1rem; //for primeflex grid system +$gutter: 1rem; /* for primeflex grid system */ + @import '@/assets/layout/layout.scss'; /* PrimeVue */ -// @import 'primevue/resources/primevue.min.css'; // version deplicated. You must open the command line if you are using < 3.29.00 + +/* @import 'primevue/resources/primevue.min.css'; // version deplicated. You must open the command line if you are using < 3.29.00 */ + @import 'primeflex/primeflex.scss'; @import 'primeicons/primeicons.css'; -/* Demos */ -//@import '@/assets/demo/demo.scss'; diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index 56be8d08..462de611 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -33,7 +33,7 @@ h3 { text-align: center; } -@media (min-width: 1024px) { +@media (width >= 1024px) { .greetings h1, .greetings h3 { text-align: left; diff --git a/src/components/LeoModal.vue b/src/components/LeoModal.vue index 7802016f..983426a1 100644 --- a/src/components/LeoModal.vue +++ b/src/components/LeoModal.vue @@ -125,6 +125,7 @@ if(hasInput.value && hasSelect.value){ .root { position: relative; } + .close { display: flex; cursor: pointer; @@ -132,16 +133,18 @@ if(hasInput.value && hasSelect.value){ align-items: end; align-self: flex-end; } + .link { cursor: pointer; color: #007bff; text-decoration: underline; } + .modal { position: absolute; top: 0; left: 0; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgb(0 0 0 / 0.3); width: 100%; height: 100%; display: flex; @@ -149,6 +152,7 @@ if(hasInput.value && hasSelect.value){ align-items: center; color: #495057; } + .modal > div { width: 50%; height: 50%; @@ -159,6 +163,7 @@ if(hasInput.value && hasSelect.value){ flex-direction: column; align-items: center; } + .modal > div > * { margin-bottom: 30px; text-align: center; diff --git a/src/views/LandingPageView.vue b/src/views/LandingPageView.vue index 48c6b86d..4380f83a 100644 --- a/src/views/LandingPageView.vue +++ b/src/views/LandingPageView.vue @@ -38,20 +38,16 @@ export default {