diff --git a/client/.prettierrc.cjs b/client/.prettierrc.cjs index e340799..a71ff54 100644 --- a/client/.prettierrc.cjs +++ b/client/.prettierrc.cjs @@ -1,3 +1,11 @@ module.exports = { + printWidth: 120, + tabWidth: 2, + tabs: false, + semi: true, singleQuote: true, + trailingComma: 'all', + bracketSpacing: true, + arrowParens: 'always', + endOfLine: 'auto', }; diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json new file mode 100644 index 0000000..d3e9288 --- /dev/null +++ b/client/.stylelintrc.json @@ -0,0 +1,7 @@ +{ + "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"], + "rules": { + "selector-class-pattern": null, + "scss/load-partial-extension": "always" + } +} diff --git a/client/README.md b/client/README.md index 4ca0a18..ecee7a1 100644 --- a/client/README.md +++ b/client/README.md @@ -3,6 +3,7 @@ A Al project ## Install the dependencies + ```bash yarn # or @@ -10,24 +11,25 @@ npm install ``` ### Start the app in development mode (hot-code reloading, error reporting, etc.) + ```bash quasar dev ``` - ### Lint the files + ```bash yarn lint # or npm run lint ``` - - ### Build the app for production + ```bash quasar build ``` ### Customize the configuration + See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js). diff --git a/client/babel.config.cjs b/client/babel.config.cjs index 3f718b8..2d72577 100644 --- a/client/babel.config.cjs +++ b/client/babel.config.cjs @@ -5,9 +5,7 @@ module.exports = (api) => { presets: [ [ '@quasar/babel-preset-app', - api.caller((caller) => caller && caller.target === 'node') - ? { targets: { node: 'current' } } - : {}, + api.caller((caller) => caller && caller.target === 'node') ? { targets: { node: 'current' } } : {}, ], ], }; diff --git a/client/jsconfig.json b/client/jsconfig.json index 456944a..dcce845 100644 --- a/client/jsconfig.json +++ b/client/jsconfig.json @@ -2,38 +2,16 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "src/*": [ - "src/*" - ], - "app/*": [ - "*" - ], - "components/*": [ - "src/components/*" - ], - "layouts/*": [ - "src/layouts/*" - ], - "pages/*": [ - "src/pages/*" - ], - "assets/*": [ - "src/assets/*" - ], - "boot/*": [ - "src/boot/*" - ], - "stores/*": [ - "src/stores/*" - ], - "vue$": [ - "node_modules/vue/dist/vue.runtime.esm-bundler.js" - ] + "src/*": ["src/*"], + "app/*": ["*"], + "components/*": ["src/components/*"], + "layouts/*": ["src/layouts/*"], + "pages/*": ["src/pages/*"], + "assets/*": ["src/assets/*"], + "boot/*": ["src/boot/*"], + "stores/*": ["src/stores/*"], + "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"] } }, - "exclude": [ - "dist", - ".quasar", - "node_modules" - ] -} \ No newline at end of file + "exclude": ["dist", ".quasar", "node_modules"] +} diff --git a/client/package-lock.json b/client/package-lock.json index e1a920d..569fbe1 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -54,6 +54,10 @@ "postcss-simple-vars": "^7.0.1", "prettier": "^3.3.2", "sass-loader": "^13.3.2", + "stylelint": "^16.7.0", + "stylelint-config-clean-order": "^6.1.0", + "stylelint-config-standard": "^36.0.1", + "stylelint-config-standard-scss": "^13.1.0", "vue-loader": "^17.3.0" }, "engines": { @@ -2011,9 +2015,9 @@ } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz", - "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz", + "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==", "dev": true, "funding": [ { @@ -2728,9 +2732,9 @@ } }, "node_modules/@csstools/selector-specificity": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", - "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "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": [ { @@ -2758,6 +2762,16 @@ "node": ">=10.0.0" } }, + "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/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4599,6 +4613,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/array.prototype.findlastindex": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz", @@ -5018,12 +5041,12 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -5856,6 +5879,15 @@ "postcss": "^8.0.9" } }, + "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-has-pseudo": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.0.tgz", @@ -6191,9 +6223,9 @@ "dev": true }, "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", + "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", "dev": true, "dependencies": { "ms": "2.1.2" @@ -6569,6 +6601,15 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -7627,6 +7668,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", @@ -7714,9 +7764,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" @@ -7824,9 +7874,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==" }, "node_modules/focus-trap": { "version": "7.5.4", @@ -8285,6 +8335,44 @@ "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==", "dev": true }, + "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/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": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -8328,6 +8416,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", @@ -8607,6 +8701,18 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/html-tags": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/html-webpack-plugin": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz", @@ -8808,9 +8914,9 @@ ] }, "node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "dev": true, "engines": { "node": ">= 4" @@ -8863,6 +8969,12 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "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/inquirer": { "version": "8.2.2", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.2.tgz", @@ -9615,6 +9727,12 @@ "node": ">= 8" } }, + "node_modules/known-css-properties": { + "version": "0.34.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz", + "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==", + "dev": true + }, "node_modules/launch-editor": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz", @@ -9980,6 +10098,16 @@ "node": "*" } }, + "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.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -10007,6 +10135,18 @@ "node": ">= 4.0.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-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -10038,12 +10178,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": { @@ -11022,9 +11162,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "funding": [ { "type": "opencollective", @@ -11041,7 +11181,7 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "source-map-js": "^1.2.0" }, "engines": { @@ -12134,6 +12274,12 @@ "node": ">=0.8.0" } }, + "node_modules/postcss-media-query-parser": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", + "dev": true + }, "node_modules/postcss-merge-longhand": { "version": "5.1.7", "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz", @@ -12762,6 +12908,12 @@ "postcss": "^8.1.0" } }, + "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-rtlcss": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-4.0.1.tgz", @@ -12777,6 +12929,58 @@ "postcss": "^8.4.6" } }, + "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-scss": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", + "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-scss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.4.29" + } + }, "node_modules/postcss-selector-not": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.1.tgz", @@ -12797,9 +13001,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", + "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -12825,6 +13029,15 @@ "postcss": "^8.2.1" } }, + "node_modules/postcss-sorting": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", + "dev": true, + "peerDependencies": { + "postcss": "^8.4.20" + } + }, "node_modules/postcss-svgo": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz", @@ -14171,6 +14384,415 @@ "postcss": "^8.2.15" } }, + "node_modules/stylelint": { + "version": "16.7.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.7.0.tgz", + "integrity": "sha512-Q1ATiXlz+wYr37a7TGsfvqYn2nSR3T/isw3IWlZQzFzCNoACHuGBb6xBplZXz56/uDRJHIygxjh7jbV/8isewA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "dependencies": { + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1", + "@csstools/media-query-list-parser": "^2.1.13", + "@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.5", + "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.34.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.39", + "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-clean-order": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-clean-order/-/stylelint-config-clean-order-6.1.0.tgz", + "integrity": "sha512-Xe1U0stw57Evdcx+7q7XYAniyE7XAKv/bwfH9LcsFCcKTPZflzTiJLXGkQUsPMlA4cfMyxEebqm5bRN2doTD3w==", + "dev": true, + "dependencies": { + "stylelint-order": "^6.0.4" + }, + "peerDependencies": { + "stylelint": ">=14" + } + }, + "node_modules/stylelint-config-recommended": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", + "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint-config-recommended-scss": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz", + "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==", + "dev": true, + "dependencies": { + "postcss-scss": "^4.0.9", + "stylelint-config-recommended": "^14.0.1", + "stylelint-scss": "^6.4.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "postcss": "^8.3.3", + "stylelint": "^16.6.1" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + } + } + }, + "node_modules/stylelint-config-standard": { + "version": "36.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", + "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "dependencies": { + "stylelint-config-recommended": "^14.0.1" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint-config-standard-scss": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz", + "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==", + "dev": true, + "dependencies": { + "stylelint-config-recommended-scss": "^14.0.0", + "stylelint-config-standard": "^36.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "postcss": "^8.3.3", + "stylelint": "^16.3.1" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + } + } + }, + "node_modules/stylelint-order": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", + "dev": true, + "dependencies": { + "postcss": "^8.4.32", + "postcss-sorting": "^8.0.2" + }, + "peerDependencies": { + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1" + } + }, + "node_modules/stylelint-scss": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.4.1.tgz", + "integrity": "sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==", + "dev": true, + "dependencies": { + "known-css-properties": "^0.34.0", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-selector-parser": "^6.1.0", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.0.2" + } + }, + "node_modules/stylelint/node_modules/@csstools/css-parser-algorithms": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz", + "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==", + "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.4.1" + } + }, + "node_modules/stylelint/node_modules/@csstools/media-query-list-parser": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz", + "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==", + "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.7.1", + "@csstools/css-tokenizer": "^2.4.1" + } + }, + "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/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/stylelint/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/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/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/stylelint/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/stylelint/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/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/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "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/stylelint/node_modules/typescript": { + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz", + "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==", + "dev": true, + "optional": true, + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/sugarss": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz", @@ -14199,6 +14821,40 @@ "node": ">=4" } }, + "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/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "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/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", @@ -14211,6 +14867,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "node_modules/svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -15760,6 +16422,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": "7.5.10", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", @@ -17193,9 +17880,9 @@ "requires": {} }, "@csstools/css-tokenizer": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz", - "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz", + "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==", "dev": true }, "@csstools/media-query-list-parser": { @@ -17468,9 +18155,9 @@ "requires": {} }, "@csstools/selector-specificity": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", - "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "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, "requires": {} }, @@ -17480,6 +18167,12 @@ "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "dev": true }, + "@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 + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -18897,6 +19590,12 @@ "is-string": "^1.0.7" } }, + "array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true + }, "array.prototype.findlastindex": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz", @@ -19211,12 +19910,12 @@ } }, "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "requires": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" } }, "browserslist": { @@ -19826,6 +20525,12 @@ "dev": true, "requires": {} }, + "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 + }, "css-has-pseudo": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.0.tgz", @@ -20031,9 +20736,9 @@ "dev": true }, "debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", + "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", "dev": true, "requires": { "ms": "2.1.2" @@ -20310,6 +21015,12 @@ "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", "dev": true }, + "env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true + }, "error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -21093,6 +21804,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "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 + }, "fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -21153,9 +21870,9 @@ } }, "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "requires": { "to-regex-range": "^5.0.1" @@ -21241,9 +21958,9 @@ } }, "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==" }, "focus-trap": { "version": "7.5.4", @@ -21555,6 +22272,37 @@ "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==", "dev": true }, + "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, + "requires": { + "global-prefix": "^3.0.0" + } + }, + "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, + "requires": { + "ini": "^1.3.5", + "kind-of": "^6.0.2", + "which": "^1.3.1" + }, + "dependencies": { + "which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -21583,6 +22331,12 @@ "slash": "^4.0.0" } }, + "globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", + "dev": true + }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -21795,6 +22549,12 @@ } } }, + "html-tags": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", + "dev": true + }, "html-webpack-plugin": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz", @@ -21921,9 +22681,9 @@ "dev": true }, "ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "dev": true }, "immutable": { @@ -21964,6 +22724,12 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "ini": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true + }, "inquirer": { "version": "8.2.2", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.2.tgz", @@ -22498,6 +23264,12 @@ "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", "dev": true }, + "known-css-properties": { + "version": "0.34.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz", + "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==", + "dev": true + }, "launch-editor": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz", @@ -22806,6 +23578,12 @@ } } }, + "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 + }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -22827,6 +23605,12 @@ "fs-monkey": "^1.0.4" } }, + "meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -22852,12 +23636,12 @@ "dev": true }, "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, "requires": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" } }, @@ -23539,12 +24323,12 @@ } }, "postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "requires": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "source-map-js": "^1.2.0" } }, @@ -24207,6 +24991,12 @@ } } }, + "postcss-media-query-parser": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", + "dev": true + }, "postcss-merge-longhand": { "version": "5.1.7", "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz", @@ -24576,6 +25366,12 @@ "thenby": "^1.3.4" } }, + "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 + }, "postcss-rtlcss": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-4.0.1.tgz", @@ -24585,6 +25381,20 @@ "rtlcss": "4.0.0" } }, + "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, + "requires": {} + }, + "postcss-scss": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", + "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", + "dev": true, + "requires": {} + }, "postcss-selector-not": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.1.tgz", @@ -24595,9 +25405,9 @@ } }, "postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", + "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", "dev": true, "requires": { "cssesc": "^3.0.0", @@ -24611,6 +25421,13 @@ "dev": true, "requires": {} }, + "postcss-sorting": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", + "dev": true, + "requires": {} + }, "postcss-svgo": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz", @@ -25612,6 +26429,246 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylelint": { + "version": "16.7.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.7.0.tgz", + "integrity": "sha512-Q1ATiXlz+wYr37a7TGsfvqYn2nSR3T/isw3IWlZQzFzCNoACHuGBb6xBplZXz56/uDRJHIygxjh7jbV/8isewA==", + "dev": true, + "requires": { + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1", + "@csstools/media-query-list-parser": "^2.1.13", + "@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.5", + "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.34.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.39", + "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" + }, + "dependencies": { + "@csstools/css-parser-algorithms": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz", + "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==", + "dev": true, + "requires": {} + }, + "@csstools/media-query-list-parser": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz", + "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==", + "dev": true, + "requires": {} + }, + "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 + }, + "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 + }, + "cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "requires": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + } + }, + "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, + "requires": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + } + }, + "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, + "requires": { + "flat-cache": "^5.0.0" + } + }, + "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, + "requires": { + "flatted": "^3.3.1", + "keyv": "^4.5.4" + } + }, + "globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "requires": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + } + }, + "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 + }, + "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 + }, + "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 + }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + }, + "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, + "requires": { + "ansi-regex": "^6.0.1" + } + }, + "typescript": { + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz", + "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==", + "dev": true, + "optional": true, + "peer": true + } + } + }, + "stylelint-config-clean-order": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-clean-order/-/stylelint-config-clean-order-6.1.0.tgz", + "integrity": "sha512-Xe1U0stw57Evdcx+7q7XYAniyE7XAKv/bwfH9LcsFCcKTPZflzTiJLXGkQUsPMlA4cfMyxEebqm5bRN2doTD3w==", + "dev": true, + "requires": { + "stylelint-order": "^6.0.4" + } + }, + "stylelint-config-recommended": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", + "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", + "dev": true, + "requires": {} + }, + "stylelint-config-recommended-scss": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz", + "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==", + "dev": true, + "requires": { + "postcss-scss": "^4.0.9", + "stylelint-config-recommended": "^14.0.1", + "stylelint-scss": "^6.4.0" + } + }, + "stylelint-config-standard": { + "version": "36.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", + "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", + "dev": true, + "requires": { + "stylelint-config-recommended": "^14.0.1" + } + }, + "stylelint-config-standard-scss": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz", + "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==", + "dev": true, + "requires": { + "stylelint-config-recommended-scss": "^14.0.0", + "stylelint-config-standard": "^36.0.0" + } + }, + "stylelint-order": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", + "dev": true, + "requires": { + "postcss": "^8.4.32", + "postcss-sorting": "^8.0.2" + } + }, + "stylelint-scss": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.4.1.tgz", + "integrity": "sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==", + "dev": true, + "requires": { + "known-css-properties": "^0.34.0", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-selector-parser": "^6.1.0", + "postcss-value-parser": "^4.2.0" + } + }, "sugarss": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz", @@ -25628,12 +26685,45 @@ "has-flag": "^3.0.0" } }, + "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, + "requires": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "dependencies": { + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "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, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -26726,6 +27816,24 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "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, + "requires": { + "imurmurhash": "^0.1.4", + "signal-exit": "^4.0.1" + }, + "dependencies": { + "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 + } + } + }, "ws": { "version": "7.5.10", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", diff --git a/client/package.json b/client/package.json index e4cd63d..a9b07e3 100644 --- a/client/package.json +++ b/client/package.json @@ -7,7 +7,9 @@ "private": true, "scripts": { "lint": "eslint --ext .js,.vue ./", - "lint:fix": "eslint --ext .js,.vue --fix ./", + "lint:fix": "eslint --ext .js,.vue, --fix ./", + "lint:css": "stylelint '**/*.scss'", + "lint:css:fix": "npm run lint:css -- --fix", "test": "echo \"No test specified\" && exit 0", "serve": "npx cross-env NODE_ENV=development quasar dev", "serve:ssr": "quasar dev -m ssr", @@ -64,6 +66,10 @@ "postcss-simple-vars": "^7.0.1", "prettier": "^3.3.2", "sass-loader": "^13.3.2", + "stylelint": "^16.7.0", + "stylelint-config-clean-order": "^6.1.0", + "stylelint-config-standard": "^36.0.1", + "stylelint-config-standard-scss": "^13.1.0", "vue-loader": "^17.3.0" }, "browserslist": [ diff --git a/client/quasar.config.js b/client/quasar.config.js index 414ef9e..e11f205 100644 --- a/client/quasar.config.js +++ b/client/quasar.config.js @@ -80,9 +80,7 @@ module.exports = configure(function (ctx) { // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain chainWebpack(chain) { - chain - .plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]); + chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]); // chain.plugin('normal-module-replacement').use( // new webpack.NormalModuleReplacementPlugin(/settings$/, function(resource) { // resource.request = resource.request.replace(/settings$/, `settings/${process.env.NODE_ENV}`); @@ -193,9 +191,7 @@ module.exports = configure(function (ctx) { // Tell browser when a file from the server should expire from cache (in ms) chainWebpackWebserver(chain) { - chain - .plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); + chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]); }, middlewares: [ @@ -213,9 +209,7 @@ module.exports = configure(function (ctx) { // if using workbox in InjectManifest mode chainWebpackCustomSW(chain) { - chain - .plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); + chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]); }, manifest: { @@ -290,15 +284,11 @@ module.exports = configure(function (ctx) { // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain chainWebpackMain(chain) { - chain - .plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); + chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]); }, chainWebpackPreload(chain) { - chain - .plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); + chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]); }, }, }; diff --git a/client/src/App.vue b/client/src/App.vue index e8a7ca0..b29fc49 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -23,15 +23,7 @@ import Player from '@/components/player.vue'; import ChangingUser from '@/components/modal/сhanging-user.vue'; export default { - async preFetch({ - store, - currentRoute, - previousRoute, - redirect, - ssrContext, - urlPath, - publicPath, - }) {}, + async preFetch({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {}, components: { ChangingUser, Player, diff --git a/client/src/assets/css/common.scss b/client/src/assets/css/common.scss index 2346053..6d72295 100644 --- a/client/src/assets/css/common.scss +++ b/client/src/assets/css/common.scss @@ -1,80 +1,90 @@ *, *::before, *::after { - box-sizing: border-box; - outline: none !important; -} -h1{ - margin: 0; - position: relative; - z-index: 2; -} -.text{ - @mixin p; -} -.h1 { - @mixin h1; + box-sizing: border-box; + outline: none !important; } -.h2, h2 { - @mixin h2; +h1 { + position: relative; + z-index: 2; + margin: 0; +} + +.text { + @mixin p; +} + +.h1 { + @mixin h1; +} + +.h2, +h2 { + @mixin h2; } .h3 { - @mixin h3; + @mixin h3; } .h4 { - @mixin h4; + @mixin h4; } .p { - @mixin p; + @mixin p; } .title { - @mixin p; - color: transparent; - background-clip: text; - background-image: var(--linear-gradient); - font-size: 34px; - &.m--white{ - color: var(--color-white); - } + @mixin p; + + font-size: 34px; + color: transparent; + background-image: var(--linear-gradient); + background-clip: text; + + &.m--white { + color: var(--color-white); + } } .ul { - @mixin ul; + @mixin ul; } .ol { - @mixin ol; + @mixin ol; } .hr { - @mixin hr; + @mixin hr; } .a, a { - @mixin a; - /*@mixin a--color $color-base;*/ + @mixin a; + + /* @mixin a--color $color-base; */ } -html{ - scrollbar-color: var(--color-black) var(--bg-opacity); - scrollbar-gutter: stable; - scrollbar-width: thin; +html { + scrollbar-color: var(--color-black) var(--bg-opacity); + scrollbar-width: thin; + scrollbar-gutter: stable; } -body{ - font-size: var(--base-fz); - line-height: var(--base-lh); - background: var(--color-black); - font-family: var(--font-family-base); - color: var(--color-white); - padding: 0 !important; + +body { + padding: 0 !important; + + font-family: var(--font-family-base); + font-size: var(--base-fz); + line-height: var(--base-lh); + color: var(--color-white); + + background: var(--color-black); } .button { - @mixin button; + @mixin button; } diff --git a/client/src/assets/css/index.scss b/client/src/assets/css/index.scss index e1db805..1f08ed4 100644 --- a/client/src/assets/css/index.scss +++ b/client/src/assets/css/index.scss @@ -1,31 +1,29 @@ -@import "./mixins/responsive.scss"; -@import "./setting.scss"; -@import "./lib/reset.css"; +@import './mixins/responsive.scss'; +@import './setting.scss'; +@import './lib/reset.css'; @import './lib/fonts.css'; -@import "./mixins/form.scss"; -@import "./mixins/text.scss"; -@import "./common.scss"; -@import "./module/app.scss"; -@import "./module/app-header.scss"; -@import "./module/app-footer.scss"; -@import "./module/app-breadcrumbs.scss"; -@import "./module/modal.scss"; -@import "./module/fiald.scss"; -@import "./module/pagination.scss"; -@import "./module/home.scss"; -@import "./module/team.scss"; -@import "./module/rubric.scss"; -@import "./module/blog.scss"; -@import "./module/authentication.scss"; -@import "./module/tabs.scss"; -@import "./module/about.scss"; -@import "./module/playlists.scss"; -@import "./module/playlist.scss"; -@import "./module/contacts.scss"; -@import "./module/support.scss"; -@import "./module/player.scss"; -@import "./module/loader.scss"; -@import "./module/profile.scss"; -@import "./module/song.scss"; - - +@import './mixins/form.scss'; +@import './mixins/text.scss'; +@import './common.scss'; +@import './module/app.scss'; +@import './module/app-header.scss'; +@import './module/app-footer.scss'; +@import './module/app-breadcrumbs.scss'; +@import './module/modal.scss'; +@import './module/fiald.scss'; +@import './module/pagination.scss'; +@import './module/home.scss'; +@import './module/team.scss'; +@import './module/rubric.scss'; +@import './module/blog.scss'; +@import './module/authentication.scss'; +@import './module/tabs.scss'; +@import './module/about.scss'; +@import './module/playlists.scss'; +@import './module/playlist.scss'; +@import './module/contacts.scss'; +@import './module/support.scss'; +@import './module/player.scss'; +@import './module/loader.scss'; +@import './module/profile.scss'; +@import './module/song.scss'; diff --git a/client/src/assets/css/lib/fonts.css b/client/src/assets/css/lib/fonts.css index 7535344..75f49b0 100644 --- a/client/src/assets/css/lib/fonts.css +++ b/client/src/assets/css/lib/fonts.css @@ -1,71 +1,70 @@ @font-face { - font-family: 'Manrope'; - /* src: url('assets/fonts/Manrope-ExtraLight.woff') format('woff'), + font-family: 'Manrope'; + /* src: url('assets/fonts/Manrope-ExtraLight.woff') format('woff'), url('assets/fonts/Manrope-ExtraLight.woff2') format('woff2'), url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype'); - font-weight: 200; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Manrope'; - /*src: url('assets/fonts/Manrope-Light.woff') format('woff'), + font-family: 'Manrope'; + /*src: url('assets/fonts/Manrope-Light.woff') format('woff'), url('assets/fonts/Manrope-Light.woff2') format('woff2'), url('assets/fonts/Manrope-Light.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Manrope'; - /*src: url('assets/fonts/Manrope-Regular.ttf.woff') format('woff'), + font-family: 'Manrope'; + /*src: url('assets/fonts/Manrope-Regular.ttf.woff') format('woff'), url('assets/fonts/Manrope-Regular.ttf.woff2') format('woff2'), url('assets/fonts/Manrope-Regular.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Manrope'; - /*src: url('assets/fonts/Manrope-Medium.woff') format('woff'), + font-family: 'Manrope'; + /*src: url('assets/fonts/Manrope-Medium.woff') format('woff'), url('assets/fonts/Manrope-Medium.woff2') format('woff2'), url('assets/fonts/Manrope-Medium.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Manrope'; - /*src: url('assets/fonts/Manrope-SemiBold.woff') format('woff'), + font-family: 'Manrope'; + /*src: url('assets/fonts/Manrope-SemiBold.woff') format('woff'), url('assets/fonts/Manrope-SemiBold.woff2') format('woff2'), url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Manrope'; - /*src: url('assets/fonts/Manrope-Bold.woff') format('woff'), + font-family: 'Manrope'; + /*src: url('assets/fonts/Manrope-Bold.woff') format('woff'), url('assets/fonts/Manrope-Bold.woff2') format('woff2'), url('assets/fonts/Manrope-Bold.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Manrope'; - /*src: url('assets/fonts/Manrope-ExtraBold.woff') format('woff'), + font-family: 'Manrope'; + /*src: url('assets/fonts/Manrope-ExtraBold.woff') format('woff'), url('assets/fonts/Manrope-ExtraBold.woff2') format('woff2'), url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');*/ - src: url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype'); - font-weight: 800; - font-style: normal; - font-display: swap; + src: url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; + font-display: swap; } - diff --git a/client/src/assets/css/lib/reset.css b/client/src/assets/css/lib/reset.css index 53e51d0..726fb73 100644 --- a/client/src/assets/css/lib/reset.css +++ b/client/src/assets/css/lib/reset.css @@ -1,57 +1,140 @@ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - font-size: 100%; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; } -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -input, textarea, select { - font-family: inherit; - font-size: inherit; - font-weight: inherit; +input, +textarea, +select { + font-family: inherit; + font-size: inherit; + font-weight: inherit; } -img{ - width: 100%; - max-width: 100%; +img { + width: 100%; + max-width: 100%; } diff --git a/client/src/assets/css/mixins/form.scss b/client/src/assets/css/mixins/form.scss index 5125a7e..30a8a6a 100644 --- a/client/src/assets/css/mixins/form.scss +++ b/client/src/assets/css/mixins/form.scss @@ -1,53 +1,66 @@ @define-mixin input { + width: 100%; + margin-bottom: 10px; + padding: 1rem 1.2rem; + + color: var(--color-white); + background: transparent; border: 1px solid var(--color-white); border-radius: 40px; - padding: 1rem 1.2rem; - width: 100%; - color: var(--color-white); - margin-bottom: 10px; } -@define-mixin button { - font-family: var(--font-family-base); - color: var(--color-white); - min-width: 220px; +@define-mixin button { + cursor: pointer; + + position: relative; + z-index: 2; + display: flex; flex-direction: row; align-items: center; justify-content: center; + box-sizing: border-box; - vertical-align: middle; + min-width: 220px; + min-height: 3rem; + + font-family: var(--font-family-base); + font-size: 1rem; + font-weight: 500; + line-height: 1rem; + color: var(--color-white); text-align: center; text-decoration: none; - font-weight: 500; - font-size: 1rem; - line-height: 1rem; - border-radius: 100px; - cursor: pointer; - border: 1px solid var(--color-white); - min-height: 3rem; - transition: border 0.5s ease, background 0.5s ease, color 0.5s ease; - background: transparent; - position: relative; - z-index: 2; + vertical-align: middle; + background: transparent; + border: 1px solid var(--color-white); + border-radius: 100px; + + transition: + border 0.5s ease, + background 0.5s ease, + color 0.5s ease; &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; color: var(--color-black); background: var(--color-white); } - &-violet{ - border-color: var(--color-primary); + + &-violet { color: var(--color-primary); + border-color: var(--color-primary); + &:hover { - border-color: transparent; + border-color: transparent; } } + &.is-active, &:active { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; color: var(--color-black); background: var(--color-white-darker); } @@ -67,9 +80,10 @@ &.m--blur { min-width: 0; padding: 1rem 1.5rem; + background: var(--bg-opacity); - border: none; backdrop-filter: blur(5px); + border: none; &:hover { background: var(--color-white); @@ -84,25 +98,30 @@ &.m--arrow { &::after { - margin-left: 10px; content: ''; + width: 20px; height: 20px; + margin-left: 10px; + background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; background-size: cover; - transition: background 0.3s ease, width 0.3s ease; + + transition: + background 0.3s ease, + width 0.3s ease; } &:hover::after { - background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%; width: 45px; height: 20px; + background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%; } &.m--active, &:active { - background:transparent; color: var(--color-white); + background: transparent; } } @@ -124,7 +143,9 @@ content: ''; background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%; background-size: cover; - transition: background 0.3s ease, width 0.3s ease; + transition: + background 0.3s ease, + width 0.3s ease; } &:hover::after { @@ -132,58 +153,65 @@ } } } - &.m--text-link{ - border: none; - pad: 0; + + &.m--text-link { + @mixin a; + min-width: 0; min-height: 0; padding: 0; - &:hover{ + + border: none; + + pad: 0; + + &:hover { background: transparent; } - @mixin a; } + &.m--circle { - width: 56px; - height: 56px; - min-width: 0; - border-color: var(--color-white-opacity); overflow: hidden; - &:before { - background: var(--linear-gradient); + width: 56px; + min-width: 0; + height: 56px; + + border-color: var(--color-white-opacity); + + &::before { content: ''; + position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; + opacity: 0; - transition: opacity .3s ease; + background: var(--linear-gradient); + + transition: opacity 0.3s ease; } - &:after { + &::after { content: ''; + position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; + transform: rotate(-45deg); + width: 18px; height: 18px; - margin: auto auto; + margin: auto; + background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#404145FF) no-repeat 100%; - transform: rotate(-45deg); } - &:hover:before { + &:hover::before { + cursor: url('./assets/img/icon/cursor.svg'), auto; opacity: 1; - cursor: url("./assets/img/icon/cursor.svg"), auto; } - &:hover:after { + &:hover::after { background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; } - } } diff --git a/client/src/assets/css/mixins/responsive.scss b/client/src/assets/css/mixins/responsive.scss index 35e50ff..1fd55ae 100644 --- a/client/src/assets/css/mixins/responsive.scss +++ b/client/src/assets/css/mixins/responsive.scss @@ -1,41 +1,35 @@ -@define-mixin responsive-xl{ - @media (max-width: $document-width-xl) { - @mixin-content; - - } +@define-mixin responsive-xl { + @media (max-width: $document-width-xl) { + @mixin-content; + } } @define-mixin responsive-l { - @media (max-width: $document-width-l) { - @mixin-content; - } + @media (max-width: $document-width-l) { + @mixin-content; + } } - @define-mixin responsive-m { - @media (max-width: $document-width-m) { - @mixin-content; - } + @media (max-width: $document-width-m) { + @mixin-content; + } } - @define-mixin responsive-s { - @media (max-width: $document-width-s) { - @mixin-content; - } + @media (max-width: $document-width-s) { + @mixin-content; + } } - @define-mixin responsive-xs { - @media (max-width: $document-width-xs) { - @mixin-content; - } + @media (max-width: $document-width-xs) { + @mixin-content; + } } - - @define-mixin responsive-xxs { - @media (max-width: $document-width-xxs) { - @mixin-content; - } +@define-mixin responsive-xxs { + @media (max-width: $document-width-xxs) { + @mixin-content; + } } - diff --git a/client/src/assets/css/mixins/text.scss b/client/src/assets/css/mixins/text.scss index 0de661e..f0711ae 100644 --- a/client/src/assets/css/mixins/text.scss +++ b/client/src/assets/css/mixins/text.scss @@ -1,145 +1,161 @@ @define-mixin __p { - position: relative; - z-index: 2; - &:first-child { - margin-top: 0; - } + position: relative; + z-index: 2; - &:last-child { - margin-bottom: 0; - } + &:first-child { + margin-top: 0; + } - &.m--mb-1 { - margin-bottom: 1rem; - } + &:last-child { + margin-bottom: 0; + } - &.m--mb-2 { - margin-bottom: 2rem; - } + &.m--mb-1 { + margin-bottom: 1rem; + } - &.m--mb-3 { - margin-bottom: 3rem; - } + &.m--mb-2 { + margin-bottom: 2rem; + } - &.m--mb-4 { - margin-bottom: 4rem; - } + &.m--mb-3 { + margin-bottom: 3rem; + } - &.m--mb-5 { - margin-bottom: 5rem; - } + &.m--mb-4 { + margin-bottom: 4rem; + } + + &.m--mb-5 { + margin-bottom: 5rem; + } } @define-mixin h1 { - @mixin __p; + @mixin __p; - /*margin-top: 32px;*/ - margin-bottom: 1.5rem; - font-size: 100px; - line-height: 1.2; - font-weight: 500; - color: var(--color-white); - padding-bottom: 6px; - @mixin responsive-l { - font-size: 84px; - } - @mixin responsive-m { - font-size: 48px; - } - @mixin responsive-s { - font-size: 36px; - } + @mixin responsive-l { + font-size: 84px; + } + + @mixin responsive-m { + font-size: 48px; + } + + @mixin responsive-s { + font-size: 36px; + } + + /* margin-top: 32px; */ + margin-bottom: 1.5rem; + padding-bottom: 6px; + + font-size: 100px; + font-weight: 500; + line-height: 1.2; + color: var(--color-white); } @define-mixin h2 { - @mixin __p; + @mixin __p; - margin: 2.5rem 0; - font-size: 3.375rem; - line-height: 1.3; - font-weight: 500; - color: transparent; - padding-bottom: 6px; - background-clip: text; - background-image: var(--linear-gradient); - text-transform: uppercase; - @mixin responsive-l { - font-size:40px; - line-height: 1.1; - } - @mixin responsive-m { - font-size:32px; - } - /*@mixin responsive-s { + @mixin responsive-l { + font-size: 40px; + line-height: 1.1; + } + + @mixin responsive-m { + font-size: 32px; + } + + margin: 2.5rem 0; + padding-bottom: 6px; + + font-size: 3.375rem; + font-weight: 500; + line-height: 1.3; + color: transparent; + text-transform: uppercase; + + background-image: var(--linear-gradient); + background-clip: text; + + /* @mixin responsive-s { font-size: 36px; - }*/ - &.m--white { - color: var(--color-white); - margin: 1.5rem 0; - } + } */ + &.m--white { + margin: 1.5rem 0; + color: var(--color-white); + } - &.m--border { - &:after { - margin-top: 10px; - content: ''; - display: block; - background: url("./assets/img/icon/borderLine.svg"); - max-width: 260px; - width: 100%; - height: 10px; - } - } + &.m--border { + &::after { + content: ''; - a { - text-decoration: none; - font-weight: 500; - color: var(--color-white); - transition: color 0.5s ease; + display: block; - &:hover { - color: var(--color-white); - } + width: 100%; + max-width: 260px; + height: 10px; + margin-top: 10px; + + background: url('./assets/img/icon/borderLine.svg'); } + } + + a { + font-weight: 500; + color: var(--color-white); + text-decoration: none; + transition: color 0.5s ease; + + &:hover { + color: var(--color-white); + } + } } @define-mixin h3 { - @mixin __p; + @mixin __p; - margin-top: 24px; - margin-bottom: 16px; - font-weight: 700; - font-size: 20px; - line-height: 1.2; + margin-top: 24px; + margin-bottom: 16px; + + font-size: 20px; + font-weight: 700; + line-height: 1.2; } @define-mixin h4 { - @mixin __p; + @mixin __p; - margin-top: 16px; - margin-bottom: 8px; - font-weight: 500; - font-size: 18px; - line-height: 1.2; + margin-top: 16px; + margin-bottom: 8px; + + font-size: 18px; + font-weight: 500; + line-height: 1.2; } @define-mixin p { - @mixin __p; - margin-top: 8px; - margin-bottom: 8px; + @mixin __p; + + margin-top: 8px; + margin-bottom: 8px; } @define-mixin ul { - @mixin p; + @mixin p; - list-style: none; - padding: 0; + padding: 0; + list-style: none; - li { - padding-left: 15px; - position: relative; - margin-bottom: 16px; + li { + position: relative; + margin-bottom: 16px; + padding-left: 15px; - /* &:before { + /* &:before { content: ''; position: absolute; left: 0; @@ -150,187 +166,206 @@ background-position: center; background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red); background-repeat: no-repeat; - }*/ - &:before { - content: ''; - position: absolute; - left: 0; - width: 5px; - height: 5px; - top: 7px; - background: var(--color-white); - border-radius: 50%; - } + } */ + &::before { + content: ''; - &:last-child { - margin-bottom: 0; - } + position: absolute; + top: 7px; + left: 0; + + width: 5px; + height: 5px; + + background: var(--color-white); + border-radius: 50%; } - &.m--dots { - li { - padding-left: 1rem; - - &:before { - content: '•'; - top: 0; - height: auto; - width: auto; - background: none; - } - } + &:last-child { + margin-bottom: 0; } + } + + &.m--dots { + li { + padding-left: 1rem; + + &::before { + content: '•'; + + top: 0; + + width: auto; + height: auto; + + background: none; + } + } + } } @define-mixin ol { - @mixin p; + @mixin p; - list-style: none; - counter-reset: item; - li { - counter-increment: item; - margin-bottom: 16px; - vertical-align: middle; + counter-reset: item; + list-style: none; - &:before { - content: counter(item); - padding-left: 12px; - font-weight: 500; - font-size: 18px; - line-height: 24px; - color: var(--color-white); - } + li { + counter-increment: item; + margin-bottom: 16px; + vertical-align: middle; + + &::before { + content: counter(item); + + padding-left: 12px; + + font-size: 18px; + font-weight: 500; + line-height: 24px; + color: var(--color-white); } + } } @define-mixin hr { - @mixin p; + @mixin p; } @define-mixin a { + position: relative; + z-index: 2; + + font-weight: 500; + color: var(--color-white); + text-decoration: none; + + transition: all 0.5s ease; + + &:hover { + cursor: url('./assets/img/icon/cursor.svg'), auto; + + color: transparent; text-decoration: none; - font-weight: 500; - transition: all 0.5s ease; - color: var(--color-white); - position: relative; - z-index: 2; + + background-image: var(--linear-gradient); + background-clip: text; + } + + &.m--link { + display: flex; + align-items: center; + border-bottom: 1px solid transparent; + + &::after { + content: ''; + + width: 20px; + height: 20px; + margin-left: 10px; + + background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; + background-size: cover; + + transition: + background 0.3s ease, + width 0.3s ease; + } + &:hover { - color: transparent; - -webkit-background-clip: text; - background-image: var(--linear-gradient); - cursor: url("./assets/img/icon/cursor.svg"), auto; - text-decoration: none; + color: var(--color-white); + border-bottom: 1px solid var(--color-white); } - &.m--link { - display: flex; - align-items: center; - border-bottom: 1px solid transparent; - - &::after { - margin-left: 10px; - content: ''; - width: 20px; - height: 20px; - background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; - background-size: cover; - transition: background 0.3s ease, width 0.3s ease; - } - - &:hover { - color: var(--color-white); - border-bottom: 1px solid var(--color-white); - } - - &:hover::after { - width: 40px; - } + &:hover::after { + width: 40px; } + } - &.m--underline { - text-decoration: underline; - } + &.m--underline { + text-decoration: underline; + } } @define-mixin a--color $color { - color: $color; - border-color: rgba($color, 0.5); + color: $color; + border-color: rgba($color, 0.5); } @define-mixin table { - /* dummy */ + /* dummy */ } @define-mixin base { - font: $font-size-base/$line-height-base $font-family-base; - color: $color-base; + font: $font-size-base/$line-height-base $font-family-base; + color: $color-base; } @define-mixin format { - h1:not(.nostyle) { - @mixin h1; - } + h1:not(.nostyle) { + @mixin h1; + } - h2:not(.nostyle) { - @mixin h2; - } + h2:not(.nostyle) { + @mixin h2; + } - h3:not(.nostyle) { - @mixin h3; - } + h3:not(.nostyle) { + @mixin h3; + } - h4:not(.nostyle) { - @mixin h4; - } + h4:not(.nostyle) { + @mixin h4; + } - p:not(.nostyle) { - @mixin p; - } + p:not(.nostyle) { + @mixin p; + } - ul:not(.nostyle) { - @mixin ul; - } + ul:not(.nostyle) { + @mixin ul; + } - ol:not(.nostyle) { - @mixin ol; - } + ol:not(.nostyle) { + @mixin ol; + } - hr:not(.nostyle) { - @mixin hr; - } + hr:not(.nostyle) { + @mixin hr; + } - a:not(.nostyle) { - @mixin a; - } + a:not(.nostyle) { + @mixin a; + } - table:not(.nostyle) { - @mixin table; - } + table:not(.nostyle) { + @mixin table; + } - b:not(.nostyle), - strong:not(.nostyle) { - font-weight: bold; - } + b:not(.nostyle), + strong:not(.nostyle) { + font-weight: bold; + } - i:not(.nostyle), - em:not(.nostyle) { - font-style: italic; - } + i:not(.nostyle), + em:not(.nostyle) { + font-style: italic; + } - u:not(.nostyle), - ins:not(.nostyle) { - text-decoration: underline; - } + u:not(.nostyle), + ins:not(.nostyle) { + text-decoration: underline; + } - strike:not(.nostyle), - del:not(.nostyle) { - text-decoration: line-through; - } + strike:not(.nostyle), + del:not(.nostyle) { + text-decoration: line-through; + } } @define-mixin text { - @mixin format; + @mixin format; - font: $font-size-text/$line-height-text $font-family-text; - color: $color-text; + font: $font-size-text/$line-height-text $font-family-text; + color: $color-text; } diff --git a/client/src/assets/css/module/about.scss b/client/src/assets/css/module/about.scss index 668c98b..cbf8fac 100644 --- a/client/src/assets/css/module/about.scss +++ b/client/src/assets/css/module/about.scss @@ -1,117 +1,120 @@ .about { - &__header { - margin-bottom: var(--space-between-sections); + &__header { + margin-bottom: var(--space-between-sections); - &-top { - display: flex; - gap: 20px; - margin-bottom: var(--space-between-block); - } - - &-left { - width: calc(42% - 10px); - } - - &-right { - flex: 1 1 auto; - background: url("./assets/img/bg/about-banner.svg") no-repeat 50% 60%; - position: relative; - z-index: 2; - } - - &-description { - font-size: 1.5rem; - } - - &-bottom { - width: calc(58% - 10px); - margin-left: auto; - text-align: end; - } + &-top { + display: flex; + gap: 20px; + margin-bottom: var(--space-between-block); } - &__description { - margin-bottom: var(--space-between-block); - - &-info { - display: flex; - gap: var(--space-between-block); - } - - &-item { - flex: 1 1 auto; - - &.m--left { - width: calc(70% - 40px); - } - } + &-left { + width: calc(42% - 10px); } - &__video { - position: relative; - z-index: 2; - width: 100%; - margin-bottom: var(--space-between-sections); + &-right { + position: relative; + z-index: 2; + flex: 1 1 auto; + background: url('./assets/img/bg/about-banner.svg') no-repeat 50% 60%; } - &__gallery { - display: flex; - gap: 20px; - margin-bottom: var(--space-between-sections); - - &-item { - width: calc(100% / 3 - 20px / 3); - min-height: 725px; - position: relative; - z-index: 2; - background-size: cover; - background-repeat: no-repeat; - - &.m--gallery-item-one { - background-image: url("./assets/img/bg/gallery-item-one.svg"); - } - - &.m--gallery-item-two { - background-image: url("./assets/img/bg/gallery-item-two.svg"); - - } - - &.m--gallery-item-three { - background-image: url("./assets/img/bg/gallery-item-three.svg"); - } - } + &-description { + font-size: 1.5rem; } - &__history { - margin-bottom: var(--space-between-sections); - - &-header { - display: flex; - align-items: flex-end; - margin-bottom: var(--space-between-block); - } - - &-title { - flex: 1 1 auto; - margin: 0; - } - - &-date { - width: 220px; - } - - &-list { - - } - - &-item { - display: flex; - align-items: center; - padding-bottom: 1.5rem; - margin-bottom: 1.5rem; - position: relative; - z-index: 2; - border-bottom: 1px solid var(--color-white-opacity); - } + &-bottom { + width: calc(58% - 10px); + margin-left: auto; + text-align: end; } + } + + &__description { + margin-bottom: var(--space-between-block); + + &-info { + display: flex; + gap: var(--space-between-block); + } + + &-item { + flex: 1 1 auto; + + &.m--left { + width: calc(70% - 40px); + } + } + } + + &__video { + position: relative; + z-index: 2; + width: 100%; + margin-bottom: var(--space-between-sections); + } + + &__gallery { + display: flex; + gap: 20px; + margin-bottom: var(--space-between-sections); + + &-item { + position: relative; + z-index: 2; + + width: calc(100% / 3 - 20px / 3); + min-height: 725px; + + background-repeat: no-repeat; + background-size: cover; + + &.m--gallery-item-one { + background-image: url('./assets/img/bg/gallery-item-one.svg'); + } + + &.m--gallery-item-two { + background-image: url('./assets/img/bg/gallery-item-two.svg'); + } + + &.m--gallery-item-three { + background-image: url('./assets/img/bg/gallery-item-three.svg'); + } + } + } + + &__history { + margin-bottom: var(--space-between-sections); + + &-header { + display: flex; + align-items: flex-end; + margin-bottom: var(--space-between-block); + } + + &-title { + flex: 1 1 auto; + margin: 0; + } + + &-date { + width: 220px; + } + + &-list { + } + + &-item { + position: relative; + z-index: 2; + + display: flex; + align-items: center; + + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + + border-bottom: 1px solid var(--color-white-opacity); + } + } } diff --git a/client/src/assets/css/module/app-breadcrumbs.scss b/client/src/assets/css/module/app-breadcrumbs.scss index afa94bc..892202d 100644 --- a/client/src/assets/css/module/app-breadcrumbs.scss +++ b/client/src/assets/css/module/app-breadcrumbs.scss @@ -1,18 +1,22 @@ -.breadcrumbs{ +.breadcrumbs { display: flex; margin-top: 80px; margin-bottom: var(--space-between-block); - &__item{ + + &__item { display: flex; align-items: center; - &:last-child:after{ + + &::after { + content: '/'; + margin: 0 10px; + } + + &:last-child::after { display: none; } - &:after{ - margin: 0 10px; - content: '/'; - } - &-link{ + + &-link { font-size: 0.875rem; } } diff --git a/client/src/assets/css/module/app-footer.scss b/client/src/assets/css/module/app-footer.scss index f5ee14f..1715548 100644 --- a/client/src/assets/css/module/app-footer.scss +++ b/client/src/assets/css/module/app-footer.scss @@ -1,81 +1,87 @@ .footer { - padding-bottom: var(--space-between-block); - width: 100%; + width: 100%; + padding-bottom: var(--space-between-block); - &__top { - padding-bottom: 80px; - margin-bottom: 80px; - border-bottom: 1px solid var(--color-white-opacity); + &__top { + margin-bottom: 80px; + padding-bottom: 80px; + border-bottom: 1px solid var(--color-white-opacity); + } + + &__question { + @mixin responsive-xs { + flex-direction: column; + align-items: flex-start; } - &__question { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - @mixin responsive-xs { - align-items: flex-start; - flex-direction: column; - } + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; - &-button { - margin-left: auto; - } + &-button { + margin-left: auto; + } + } + + &__bottom { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + &__menu { + @mixin responsive-m { + grid-row-gap: 10px; + grid-template-columns: min-content min-content min-content; + grid-template-rows: min-content; + + width: 100%; + margin-bottom: var(--space-between-block); } - &__bottom { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + @mixin responsive-s { + display: flex; + flex-wrap: wrap; } - &__menu { - display: grid; - grid-template-columns: var(--space-between-sections) var(--space-between-sections); - grid-template-rows: fit-content fit-content; - grid-column-gap: var(--space-between-sections); - grid-row-gap: var(--space-between-block); - @mixin responsive-m { - width: 100%; - grid-row-gap: 10px; - grid-template-rows: min-content; - grid-template-columns: min-content min-content min-content; - margin-bottom: var(--space-between-block); - } - @mixin responsive-s { - display: flex; - flex-wrap: wrap; - } - &-item { - @mixin responsive-s { - width: 100%; - } - } + display: grid; + grid-gap: var(--space-between-block) var(--space-between-sections); + grid-template-columns: var(--space-between-sections) var(--space-between-sections); + grid-template-rows: fit-content fit-content; - &-link { - font-size: 1.2rem; - } + &-item { + @mixin responsive-s { + width: 100%; + } } - &__social { - display: flex; - flex-wrap: wrap; - gap: var(--space-between-block); - @mixin responsive-m { - margin-bottom: var(--space-between-block); - grid-row-gap: 10px; - } + &-link { + font-size: 1.2rem; + } + } + + &__social { + @mixin responsive-m { + grid-row-gap: 10px; + margin-bottom: var(--space-between-block); } - &__connection { - display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: space-between; - gap: 1rem; - @mixin responsive-m { - width: 100%; - align-items: flex-start; - } + display: flex; + flex-wrap: wrap; + gap: var(--space-between-block); + } + + &__connection { + @mixin responsive-m { + align-items: flex-start; + width: 100%; } + + display: flex; + flex-direction: column; + gap: 1rem; + align-items: flex-end; + justify-content: space-between; + } } diff --git a/client/src/assets/css/module/app-header.scss b/client/src/assets/css/module/app-header.scss index c5b3cfb..3f6d4a5 100644 --- a/client/src/assets/css/module/app-header.scss +++ b/client/src/assets/css/module/app-header.scss @@ -1,186 +1,204 @@ .header { - position: sticky; - top: -30px; - z-index: 11; - width: 100%; - backdrop-filter: blur(100px); + @mixin responsive-l { + top: 0; + } + + position: sticky; + z-index: 11; + top: -30px; + + width: 100%; + + backdrop-filter: blur(100px); + + &__wrapper { @mixin responsive-l { - top: 0; + padding: 10px 20px; } - &__wrapper { - padding: 40px 20px 10px; - width: 100%; - display: flex; - align-items: center; - @mixin responsive-l { - padding: 10px 20px; - } + display: flex; + align-items: center; + width: 100%; + padding: 40px 20px 10px; + } + + &__logo { + position: relative; + width: 220px; + height: 43px; + margin-right: auto; + + &.m--menu { + @mixin responsive-l { + display: block; + } + + display: none; + margin-bottom: var(--space-between-block); } - &__logo { - position: relative; - width: 220px; - height: 43px; - margin-right: auto; + &:hover { + cursor: url('./assets/img/icon/cursor.svg'), auto; + } + } - &.m--menu { - display: none; - margin-bottom: var(--space-between-block); - @mixin responsive-l { - display: block; - } + &__menu { + @mixin responsive-xl { + gap: 20px; + } + + @mixin responsive-l { + position: fixed; + z-index: 10; + top: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + + flex-direction: column; + align-items: start; + + width: 320px; + min-height: calc(100vh + 30px); + padding: 40px 20px 0; + + background: var(--color-black); + + &.m--active { + transform: translateX(0); + } + } + + display: flex; + align-items: center; + transition: transform 0.3s ease; + + &-item { + @mixin responsive-xl { + margin: 0 10px; + + &.m--tools { + margin: 0 5px 0 10px; } + } + + @mixin responsive-l { + } + + margin: 0 25px; + + &.m--tools { + margin: 0 10px 0 25px; + } + } + + &-link { + text-transform: uppercase; + + &.is-subactive { + color: transparent; + background-image: var(--linear-gradient); + background-clip: text; + } + } + + &-icon { + cursor: url('./assets/img/icon/cursor.svg'), auto; + + width: 24px; + height: 24px; + + background: none; + border: none; + + transition: all 0.3s ease; + + &.m--profile { + background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%; &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%; } + } + + &.m--exit { + background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%; + + &:hover { + background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%; + } + } + } + } + + &__btn { + @mixin responsive-l { + margin-top: auto; + margin-bottom: 60px; + } + } + + &__burger { + @mixin responsive-l { + display: block; } - &__menu { - display: flex; - align-items: center; - transition: transform .3s ease; - @mixin responsive-xl { - gap: 20px; - } - @mixin responsive-l { - position: fixed; - flex-direction: column; - align-items: start; - top: 0; - left: 0; - width: 320px; - bottom: 0; - min-height: calc(100vh + 30px); - transform: translateX(-100%); - background: var(--color-black); - padding: 40px 20px 0; - z-index: 10; - &.m--active { - transform: translateX(0); - } - } + position: relative; + display: none; + width: 38px; + height: 24px; + &::after, + &::before, + span { + content: ''; - &-item { - margin: 0 25px; + position: absolute; - &.m--tools { - margin: 0 10px 0 25px; - } + width: 100%; + height: 4px; - @mixin responsive-xl { - margin: 0 10px; - &.m--tools { - margin: 0 5px 0 10px; - } - } - @mixin responsive-l { + background: var(--color-white); + border-radius: 20px; - } - } - - &-link { - text-transform: uppercase; - - &.is-subactive { - color: transparent; - -webkit-background-clip: text; - background-image: var(--linear-gradient); - } - } - - &-icon { - background: none; - border: none; - width: 24px; - height: 24px; - cursor: url("./assets/img/icon/cursor.svg"), auto; - transition: all .3s ease; - - &.m--profile { - background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%; - - &:hover { - background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%; - } - } - - &.m--exit { - background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%; - - &:hover { - background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%; - } - } - } + transition: all 0.3s ease; } - &__btn { - @mixin responsive-l { - margin-top: auto; - margin-bottom: 60px; - } + &::before { + top: 0; } - &__burger { - width: 38px; - height: 24px; - position: relative; + &::after { + bottom: 0; + } + + &:hover { + cursor: url('./assets/img/icon/cursor.svg'), auto; + } + + &.m--menu { + position: absolute; + top: 15px; + right: 15px; + } + + &.m--active { + &::after { + bottom: 10px; + transform: rotate(45deg); + } + + &::before { + top: 10px; + transform: rotate(-45deg); + } + span { display: none; - - &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; - } - - &.m--menu { - position: absolute; - right: 15px; - top: 15px; - } - - &.m--active { - span { - display: none; - } - - &:after { - transform: rotate(45deg); - bottom: 10px; - } - - &:before { - transform: rotate(-45deg); - top: 10px; - } - } - - @mixin responsive-l { - display: block; - } - - &:after, &:before, span { - content: ''; - position: absolute; - width: 100%; - height: 4px; - background: var(--color-white); - border-radius: 20px; - transition: all 0.3s ease; - } - - &:before { - top: 0; - } - - span { - top: 10px; - } - - &:after { - bottom: 0; - } + } } + span { + top: 10px; + } + } } diff --git a/client/src/assets/css/module/app.scss b/client/src/assets/css/module/app.scss index d954e32..404c7ca 100644 --- a/client/src/assets/css/module/app.scss +++ b/client/src/assets/css/module/app.scss @@ -1,39 +1,43 @@ -.app{ - display: flex; - flex-direction: column; +.app { + display: flex; + flex-direction: column; + min-height: 100vh; + padding-bottom: 100px; + + &::after { + content: ''; + + position: fixed; + z-index: 1; + inset: 0; + + background: url('./assets/img/bg/bg.svg'); + } + + &__block { + flex: 1 1 auto; + } + + &__overlay { + position: fixed; + z-index: 5; + inset: 0; + min-height: 100vh; - padding-bottom: 100px; - &:after{ - content: ''; - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: url("./assets/img/bg/bg.svg"); - z-index: 1; + + background: var(--color-black-cc); + } + + &__content { + @mixin responsive-l { + padding: 0 20px; } - &__block{ - flex: 1 1 auto; - } - &__overlay{ - position: fixed; - z-index: 5; - min-height: 100vh; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--color-black-cc); - } - &__content{ - max-width: var(--container); - margin: 0 auto; - padding: 0 50px; - @mixin responsive-l { - padding: 0 20px; - } - .m--indentation{ - } + + max-width: var(--container); + margin: 0 auto; + padding: 0 50px; + + .m--indentation { } + } } diff --git a/client/src/assets/css/module/blog.scss b/client/src/assets/css/module/blog.scss index 3a12aaa..936b73d 100644 --- a/client/src/assets/css/module/blog.scss +++ b/client/src/assets/css/module/blog.scss @@ -3,77 +3,94 @@ &__header { display: flex; - justify-content: space-between; - align-items: start; flex-wrap: wrap; - margin-bottom: var(--space-between-block); row-gap: var(--space-between-block); - &-title{ + align-items: start; + justify-content: space-between; + + margin-bottom: var(--space-between-block); + + &-title { margin-bottom: 0; } - &-btn{ - margin-left: auto; + + &-btn { @mixin responsive-xxs { width: 100%; } + + margin-left: auto; } } &__content { - display: flex; - gap: 80px; @mixin responsive-m { flex-direction: column; } + + display: flex; + gap: 80px; } &__cover { - width: 100%; - max-height: 640px; - background: url("./assets/img/bg/blog.svg") no-repeat center; - position: relative; - z-index: 2; - background-size: cover; @mixin responsive-m { height: calc(var(--base-content-size) / 2); max-height: none; } + + position: relative; + z-index: 2; + + width: 100%; + max-height: 640px; + + background: url('./assets/img/bg/blog.svg') no-repeat center; + background-size: cover; } &__list { - } &__item { - border-bottom: 1px solid var(--color-white-opacity); - color: var(--color-white-opacity); - padding: 2rem 0; position: relative; z-index: 2; - transition: all .3s ease; - &:after, &:before { - position: absolute; + padding: 2rem 0; + + color: var(--color-white-opacity); + + border-bottom: 1px solid var(--color-white-opacity); + + transition: all 0.3s ease; + + &::after, + &::before { content: ''; - left: 0; + + position: absolute; right: 0; - background: var(--color-white-opacity); - height: 1px; + left: 0; + display: none; - transition: background .3s ease; + + height: 1px; + + background: var(--color-white-opacity); + + transition: background 0.3s ease; } - &:before { + &::before { top: -1px; } - &:after { - display: block; + &::after { bottom: -1px; + display: block; } &:first-child { - &:before { + &::before { display: block; } } @@ -81,33 +98,34 @@ &:hover { color: var(--color-white); - &:after, &:before { + &::after, + &::before { display: block; background: var(--linear-gradient); } } &:hover &-btn { - &:before { + &::before { opacity: 1; } - &:after { + &::after { background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; } } &-header { display: flex; - justify-content: space-between; - align-items: center; gap: 1rem; + align-items: center; + justify-content: space-between; } &-title { - font-size: 2rem; width: calc(100% - 56px - 1rem); margin-bottom: 2rem; + font-size: 2rem; } } diff --git a/client/src/assets/css/module/contacts.scss b/client/src/assets/css/module/contacts.scss index 39c4f2c..deb55c2 100644 --- a/client/src/assets/css/module/contacts.scss +++ b/client/src/assets/css/module/contacts.scss @@ -1,65 +1,84 @@ -.contacts{ - &__content{ - display: flex; - gap: var(--space-between-block); - margin-bottom: var(--space-between-sections); - } - &__info{ - &:before { - content: ''; - display: block; - height: 50px; - position: relative; - z-index: 2; - width: 50px; - background: url("./assets/img/icon/one-circle.svg") no-repeat center; - margin-bottom: 20px; - } - } - &__item{ - display: flex; - flex-direction: column; +.contacts { + &__content { + display: flex; + gap: var(--space-between-block); + margin-bottom: var(--space-between-sections); + } - &:not(&:last-child){ - margin-bottom: 20px; - } + &__info { + &::before { + content: ''; + + position: relative; + z-index: 2; + + display: block; + + width: 50px; + height: 50px; + margin-bottom: 20px; + + background: url('./assets/img/icon/one-circle.svg') no-repeat center; } - &__social{ - display: flex; - gap: 10px; - &.m--telegram, &.m--vk{ - width: 25px; - height: 25px; - } - &.m--telegram{ - background: url("./assets/img/icon/telegram.svg") no-repeat; - } - &.m--vk{ - background: url("./assets/img/icon/vk.svg") no-repeat; - } + } + + &__item { + display: flex; + flex-direction: column; + + &:not(&:last-child) { + margin-bottom: 20px; } - &__map{ - position: relative; - z-index: 2; - flex: 1 1 auto; - &-frame{ - height: 100%; - } + } + + &__social { + display: flex; + gap: 10px; + + &.m--telegram, + &.m--vk { + width: 25px; + height: 25px; } - &__form{ - position: relative; - z-index: 2; - max-width: 360px; - width: 100%; - &:before { - content: ''; - display: block; - height: 50px; - position: relative; - z-index: 2; - width: 100px; - background: url("./assets/img/icon/two-circle.svg") no-repeat center; - margin-bottom: 20px; - } + + &.m--telegram { + background: url('./assets/img/icon/telegram.svg') no-repeat; } + + &.m--vk { + background: url('./assets/img/icon/vk.svg') no-repeat; + } + } + + &__map { + position: relative; + z-index: 2; + flex: 1 1 auto; + + &-frame { + height: 100%; + } + } + + &__form { + position: relative; + z-index: 2; + width: 100%; + max-width: 360px; + + &::before { + content: ''; + + position: relative; + z-index: 2; + + display: block; + + width: 100px; + height: 50px; + margin-bottom: 20px; + + background: url('./assets/img/icon/two-circle.svg') no-repeat center; + } + } } diff --git a/client/src/assets/css/module/fiald.scss b/client/src/assets/css/module/fiald.scss index 3770ce7..fa4f9cc 100644 --- a/client/src/assets/css/module/fiald.scss +++ b/client/src/assets/css/module/fiald.scss @@ -1,16 +1,18 @@ .field { position: relative; + display: flex; flex-direction: column; - padding-bottom: 28px; + margin-bottom: 8px; + padding-bottom: 28px; padding-bottom: 0; + &&.m--100 { width: 100%; margin-right: 0; } - &__inner { display: flex; flex-direction: column; @@ -18,7 +20,6 @@ height: 100%; } - &__label { display: none; } @@ -26,92 +27,121 @@ .input { @mixin input; } - &__input{ + + &__input { &.m--search { position: relative; - &:before{ + + &::before { content: ''; - width: 24px; - height: 24px; + + position: absolute; top: 16px; left: 16px; - position: absolute; + + width: 24px; + height: 24px; + background: svg-load('./assets/img/icon/search-icon.svg') no-repeat 100%; } - .input{ + + .input { padding: 1rem 1.2rem 1rem 3rem; border: 1px solid var(--color-primary); } } - &.m--hidden{ + + &.m--hidden { display: none; } } + &__checkbox { - &-label{ - padding-left: 50px; + &-label { display: flex; + padding-left: 50px; font-size: 1rem; color: var(--color-white-opacity); + &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; } - &:before{ - content: ""; + + &::before { cursor: pointer; + content: ''; + user-select: none; + user-select: none; + user-select: none; + user-select: none; + user-select: none; + position: absolute; left: 0; - text-indent: -9999px; + + display: block; + width: 40px; height: 24px; + + text-indent: -9999px; + background: var(--color-white-opacity); - display: block; border-radius: 100px; - transition: all .3s ease; + + transition: all 0.3s ease; + -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } - &:after{ - content: ""; + + &::after { + content: ''; + position: absolute; top: 3px; left: 3px; + width: 18px; height: 18px; + background: #fff; border-radius: 90px; - transition: all .3s ease; + + transition: all 0.3s ease; } } - &-input{ + + &-input { display: none; } - &-input:checked + &-label{ - &:before{ + + &-input:checked + &-label { + &::before { background: var(--color-primary); } - &:after{ + + &::after { left: 37px; transform: translateX(-100%); } } } - textarea{ - border-radius: 30px !important; + + textarea { resize: none; - min-height: 80px; scrollbar-color: var(--color-black) var(--color-white-opacity); - scrollbar-gutter: stable; scrollbar-width: thin; + scrollbar-gutter: stable; scroll-margin-right: 20px; + + min-height: 80px; + + border-radius: 30px !important; } - &__comment{ - font-size: 1rem; + + &__comment { margin-bottom: 1rem; + font-size: 1rem; } } diff --git a/client/src/assets/css/module/home.scss b/client/src/assets/css/module/home.scss index e6430c0..15ab396 100644 --- a/client/src/assets/css/module/home.scss +++ b/client/src/assets/css/module/home.scss @@ -1,276 +1,335 @@ .home { - overflow-x: hidden; - &__meaning { - min-height: var(--base-content-size); - display: flex; + overflow-x: hidden; + + &__meaning { + position: relative; + z-index: 2; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + min-height: var(--base-content-size); + + &::after, + &::before { + content: ''; + + position: absolute; + z-index: 1; + + background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%; + background-size: 100%; + } + + &::after { + right: 50vh; + bottom: 10vh; + + width: 300px; + height: 300px; + + animation: moving-circle-2 9s infinite linear; + + @keyframes moving-circle-2 { + 0% { + transform: rotate(360deg) translateX(100%) translateY(100%) scale(1.5); + } + + 100% { + transform: rotate(0deg) translateX(100%) translateY(100%) scale(1.5); + } + } + } + + &::before { + bottom: 10vh; + left: 10vh; + + width: 250px; + height: 250px; + + animation: moving-circle-3 8s infinite linear; + + @keyframes moving-circle-3 { + 0% { + transform: rotate(360deg) translateX(-100%) translateY(150%) scale(1.5); + } + + 100% { + transform: rotate(0deg) translateX(-100%) translateY(200%) scale(1.5); + } + } + } + } + + &__subtitle { + @mixin responsive-l { + padding: 0 20px; + } + + max-width: 600px; + margin: 0 auto; + text-align: center; + + &::after { + content: ''; + + position: absolute; + z-index: -1; + top: 0; + + width: 400px; + height: 400px; + + background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%; + background-size: 100%; + + animation: moving-circle 10s infinite linear; + + @keyframes moving-circle { + 0% { + transform: rotate(0) translateX(-400px) translateY(-100px) scale(1.5); + } + + 50% { + transform: rotate(180deg) translateX(-200px) translateY(-200px) scale(1); + } + + 100% { + transform: rotate(360deg) translateX(-400px) translateY(-100px) scale(1.5); + } + } + } + + span { + font-weight: 700; + } + } + + &__title { + @mixin h1; + + padding: 0 20px; + + text-align: center; + + background-image: linear-gradient( + 91.17deg, + var(--color-white) -4.01%, + var(--color-white) 36.14%, + var(--color-white) 77.44%, + var(--color-white) 106.11% + ); + background-clip: text; + background-clip: text; + + span { + color: var(--color-black); + background-clip: text; + + -webkit-text-stroke: 3px transparent; + } + } + + &__banner { + position: absolute; + z-index: 0; + inset: 0; + scale: 0.8; + + width: 1920px; + max-height: var(--base-content-size); + margin-left: calc((100vw + -1 * 1920px) / 2); + + background: url('./assets/img/bg/home-banner.png') no-repeat center; + background-size: contain; + } + + &__description { + @mixin responsive-m { + gap: var(--space-between-block); + } + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + margin-top: calc(var(--space-between-sections) / 2); + margin-bottom: var(--space-between-sections); + } + + &__info { + @mixin responsive-m { + width: 100%; + } + + width: 60%; + + &--item { + @mixin responsive-s { flex-direction: column; - align-items: center; - justify-content: center; + gap: 10px; + } + + display: flex; + justify-content: space-between; + + color: transparent; + + background-image: var(--linear-gradient); + background-clip: text; + + &.m--circle { + align-items: end; + + &::before { + @mixin responsive-s { + width: 80px; + height: 80px; + margin-right: auto; + background-size: contain; + } + + content: ''; + + display: block; + + width: 130px; + height: 130px; + + background: url('./assets/img/icon/circleGradient.svg') no-repeat center; + } + } + + span { + @mixin responsive-m { + width: 75%; + } + + @mixin responsive-s { + width: 100%; + } + + width: 57%; + font-weight: 400; + color: var(--color-white); + } + } + } + + &__content { + @mixin responsive-m { + display: flex; + flex-wrap: wrap; + gap: calc(var(--space-between-block) / 2); + align-items: flex-start; + + max-width: none; + } + + max-width: 360px; + + &--item { + @mixin responsive-m { + width: calc((100% - var(--space-between-block)) / 3); + } + + @mixin responsive-s { + width: 100%; + } + + position: relative; + z-index: 2; + + display: flex; + flex-direction: column; + align-items: flex-start; + + font-size: 16px; + + &::before { + content: ''; + position: relative; z-index: 2; - &:after, &:before { - content: ''; - position: absolute; - background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%; - background-size: 100%; - z-index: 1; - } - &:after { - right: 50vh; - bottom: 10vh; - width: 300px; - height: 300px; - animation: moving-circle-2 9s infinite linear; - @keyframes moving-circle-2 { - 0%{ - -webkit-transform: rotate(360deg) translatex(100%) translatey(100%) scale(1.5); - } - 100%{ - -webkit-transform: rotate(0deg) translatex(100%) translatey(100%) scale(1.5); - } - } - } + height: 50px; + margin-bottom: 10px; + } - &:before { - width: 250px; - height: 250px; - left: 10vh; - bottom: 10vh; - animation: moving-circle-3 8s infinite linear; - @keyframes moving-circle-3 { - 0%{ - -webkit-transform: rotate(360deg) translatex(-100%) translatey(150%) scale(1.5); - } - 100%{ - -webkit-transform:rotate(0deg) translatex(-100%) translatey(200%) scale(1.5); - } - } - } - } + &:not(&:last-child) { + margin-bottom: var(--space-between-block); + } - &__subtitle { - text-align: center; - max-width: 600px; - margin: 0 auto; + &.m--one-circle::before { + width: 50px; + background: url('./assets/img/icon/one-circle.svg') no-repeat center; + } - @mixin responsive-l { - padding: 0 20px; - } - span { - font-weight: 700; - } - &:after{ - content: ''; - position: absolute; - top: 0; - width: 400px; - height: 400px; - background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%; - background-size: 100%; - animation: moving-circle 10s infinite linear; - z-index: -1; - @keyframes moving-circle { - 0%{ - -webkit-transform: rotate(0) translatex(-400px) translatey(-100px) scale(1.5); - } - 50%{ - -webkit-transform: rotate(180deg) translatex(-200px) translatey(-200px) scale(1); - } - 100%{ - -webkit-transform: rotate(360deg) translatex(-400px) translatey(-100px) scale(1.5); - } - } - } + &.m--two-circle::before { + width: 100px; + background: url('./assets/img/icon/two-circle.svg') no-repeat center; + } - } + &.m--three-circle::before { + width: 150px; + background: url('./assets/img/icon/three-circle.svg') no-repeat center; + } - &__title { - @mixin h1; - -webkit-background-clip: text; - text-align: center; + span { + color: transparent; + background-image: var(--linear-gradient); background-clip: text; - background-image: linear-gradient(91.17deg, var(--color-white) -4.01%, var(--color-white) 36.14%, var(--color-white) 77.44%, var(--color-white) 106.11%); - padding: 0 20px; - span { - color: var(--color-black); - -webkit-background-clip: text; - -webkit-text-stroke: 3px transparent; - } + } } - &__banner { - position: absolute; - z-index: 0; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url("./assets/img/bg/home-banner.png") no-repeat center; - width: 1920px; - max-height: var(--base-content-size); - background-size: contain; - scale: 0.8; - margin-left: calc((100vw + -1 * 1920px) / 2); + } + + &__social { + position: relative; + z-index: 2; + + display: flex; + align-items: flex-end; + justify-content: center; + + height: var(--base-content-size); + max-height: 900px; + margin-bottom: var(--space-between-sections); + padding: 3rem 2.5rem; + + background: url('./assets/img/bg/bg-social.svg') no-repeat center; + background-size: cover; + + &::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(179.74deg, rgb(0 0 0 / 0%) 0.23%, rgb(0 0 0 / 66%) 99.77%); } - &__description { - margin-top: calc(var(--space-between-sections) / 2); - display: flex; - justify-content: space-between; - flex-wrap: wrap; - margin-bottom: var(--space-between-sections); - @mixin responsive-m { - gap: var(--space-between-block); - } + &--tools { + display: flex; + flex-wrap: wrap; + row-gap: var(--space-between-block); + align-items: flex-end; + justify-content: space-between; } - &__info { - width: 60%; - @mixin responsive-m { - width: 100%; - } - &--item { - display: flex; - justify-content: space-between; - color: transparent; - background-clip: text; - background-image: var(--linear-gradient); - @mixin responsive-s { - flex-direction: column; - gap: 10px; - } - &.m--circle { - align-items: end; + &--description { + @mixin responsive-xs { + max-width: 100%; + } - &:before { - content: ''; - display: block; - width: 130px; - height: 130px; - background: url("./assets/img/icon/circleGradient.svg") no-repeat center; - @mixin responsive-s { - margin-right: auto; - width: 80px; - height: 80px; - background-size: contain; - } - } - } - - span { - font-weight: 400; - color: var(--color-white); - width: 57%; - @mixin responsive-m { - width: 75%; - } - @mixin responsive-s { - width: 100%; - } - } - } + max-width: 45%; } - &__content { - max-width: 360px; - @mixin responsive-m { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - gap: calc(var(--space-between-block) / 2); - max-width: none; - } - &--item { - display: flex; - flex-direction: column; - align-items: flex-start; - font-size: 16px; - position: relative; - z-index: 2; - &:not(&:last-child){ - margin-bottom: var(--space-between-block); - } - @mixin responsive-m { - width: calc((100% - var(--space-between-block)) / 3); - } - @mixin responsive-s { - width: 100%; - } - &:before { - content: ''; - height: 50px; - margin-bottom: 10px; - position: relative; - z-index: 2; - } - - &.m--one-circle:before { - width: 50px; - background: url("./assets/img/icon/one-circle.svg") no-repeat center; - } - - &.m--two-circle:before { - width: 100px; - background: url("./assets/img/icon/two-circle.svg") no-repeat center; - } - - &.m--three-circle:before { - width: 150px; - background: url("./assets/img/icon/three-circle.svg") no-repeat center; - } - - span { - color: transparent; - background-clip: text; - background-image: var(--linear-gradient); - } - } + &--btns { + display: grid; + grid-gap: 8px; + grid-template-columns: min-content min-content; + grid-template-rows: min-content min-content; } - - &__social { - height: var(--base-content-size); - max-height: 900px; - background: url("./assets/img/bg/bg-social.svg") no-repeat center; - padding: 3rem 2.5rem; - display: flex; - align-items: flex-end; - justify-content: center; - position: relative; - z-index: 2; - margin-bottom: var(--space-between-sections); - background-size: cover; - &:after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(179.74deg, rgba(0, 0, 0, 0) 0.23%, rgba(0, 0, 0, 0.66) 99.77%); - } - - &--tools { - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: wrap; - row-gap: var(--space-between-block); - } - - &--description { - max-width: 45%; - @mixin responsive-xs { - max-width: 100%; - } - } - - &--btns { - display: grid; - grid-template-columns: min-content min-content; - grid-template-rows: min-content min-content; - grid-column-gap: 8px; - grid-row-gap: 8px; - } - } - + } } diff --git a/client/src/assets/css/module/loader.scss b/client/src/assets/css/module/loader.scss index 5394552..3d65322 100644 --- a/client/src/assets/css/module/loader.scss +++ b/client/src/assets/css/module/loader.scss @@ -1,63 +1,83 @@ .loader { - display: flex; - align-items: center; - font-size: 1.25rem; - font-weight: 600; - color: transparent; - background-clip: text; - background-image: var(--linear-gradient); - margin: 0.75rem 0; - gap: 1rem; + position: relative; + z-index: 2; + + display: flex; + gap: 1rem; + align-items: center; + + margin: 0.75rem 0; + + font-size: 1.25rem; + font-weight: 600; + color: transparent; + + background-image: var(--linear-gradient); + background-clip: text; + + .spinner { position: relative; - z-index: 2; - .spinner { - width: 48px; - height: 48px; - border-radius: 50%; - position: relative; - animation: rotate 1s linear infinite; - &:before, &:after { - content: ""; - box-sizing: border-box; - position: absolute; - inset: 0px; - border-radius: 50%; - border: 5px solid var(--color-primary); - animation: prixClipFix 5s linear infinite; - } + width: 48px; + height: 48px; - &:after { - border-color: var(--color-white); - animation: prixClipFix 5s linear infinite, rotate 0.5s linear infinite reverse; - inset: 6px; - } + border-radius: 50%; + + animation: rotate 1s linear infinite; + + &::before, + &::after { + content: ''; + + position: absolute; + inset: 0; + + box-sizing: border-box; + + border: 5px solid var(--color-primary); + border-radius: 50%; + + animation: prixClipFix 5s linear infinite; } + + &::after { + inset: 6px; + border-color: var(--color-white); + animation: + prixClipFix 5s linear infinite, + rotate 0.5s linear infinite reverse; + } + } } @keyframes rotate { - 0% { - transform: rotate(0deg) - } - 100% { - transform: rotate(360deg) - } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } @keyframes prixClipFix { - 0% { - clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0) - } - 25% { - clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0) - } - 50% { - clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) - } - 75% { - clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%) - } - 100% { - clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0) - } + 0% { + clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); + } + + 25% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); + } + + 50% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); + } + + 75% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); + } + + 100% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); + } } diff --git a/client/src/assets/css/module/modal.scss b/client/src/assets/css/module/modal.scss index 67ab205..df34111 100644 --- a/client/src/assets/css/module/modal.scss +++ b/client/src/assets/css/module/modal.scss @@ -1,38 +1,45 @@ .modal { &__container { - display: flex; - justify-content: center; - align-items: center; z-index: 100; + display: flex; + align-items: center; + justify-content: center; .vfm__overlay { background: var(--bg-wrapper-modal); } - &.m--right{ - justify-content: flex-end; + &.m--right { align-items: stretch; + justify-content: flex-end; } } - &__container.m--right &__block{ - margin: 0; + + &__container.m--right &__block { max-height: none; + margin: 0; } + &__block { position: relative; + display: flex; flex-direction: column; - margin: 0 1.5rem; - padding: 2.5rem; - background: var(--color-black); + + min-width: 360px; + max-width: 90vw; min-height: 96px; max-height: 90vh; - max-width: 90vw; - min-width: 360px; - &.m--half{ - max-width: 950px; + margin: 0 1.5rem; + padding: 2.5rem; + + background: var(--color-black); + + &.m--half { width: 50%; + max-width: 950px; } + &.m--long { width: 100%; max-width: 950px; @@ -48,41 +55,56 @@ max-width: 420px; } } - &__content{ + + &__content { min-width: 360px; } - &__title{ - font-size: 2rem; + + &__title { margin-bottom: 2.5rem; + font-size: 2rem; } - &__close{ - width: 30px; - height: 30px; + + &__close { position: absolute; top: 5px; right: 5px; - background: transparent; - border: none; + + width: 30px; min-width: 0; + height: 30px; min-height: 0; padding: 0; - &:after,&:before{ + + background: transparent; + border: none; + + &::after, + &::before { content: ''; + position: absolute; - background: var(--color-white); - left: 5px; right: 5px; + left: 5px; + height: 2px; + + background: var(--color-white); border-radius: 20px; - transition: all .3s ease; + + transition: all 0.3s ease; } - &:after{ + + &::after { transform: rotate(45deg); } - &:before{ + + &::before { transform: rotate(-45deg); } - &:hover:after, &:hover:before{ + + &:hover::after, + &:hover::before { background: var(--color-black); } } diff --git a/client/src/assets/css/module/pagination.scss b/client/src/assets/css/module/pagination.scss index 81ecaef..6ab0b0d 100644 --- a/client/src/assets/css/module/pagination.scss +++ b/client/src/assets/css/module/pagination.scss @@ -3,52 +3,58 @@ justify-content: center; margin-top: var(--space-between-block); margin-bottom: var(--space-between-sections); + &__list { display: flex; } &__item { margin: 0 5px; - } &__link { padding: 0 5px; - &.m--current{ + + &.m--current { color: transparent; - -webkit-background-clip: text; background-image: var(--linear-gradient); + background-clip: text; } } &__btn { - min-height: 25px; - min-width: 25px; position: relative; + min-width: 25px; + min-height: 25px; border-radius: 50%; - &:after { + + &::after { content: ''; + position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; + margin: 5px; } - &:hover{ + + &:hover { background: var(--color-white); } - &.m--prev:after { - background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; + + &.m--prev::after { transform: rotate(180deg); + background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; } - &.m--prev:hover:after{ + + &.m--prev:hover::after { background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%; } - &.m--next:after { + + &.m--next::after { background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%; } - &.m--next:hover:after{ + + &.m--next:hover::after { background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%; } } diff --git a/client/src/assets/css/module/player.scss b/client/src/assets/css/module/player.scss index 88fa53a..0dff923 100644 --- a/client/src/assets/css/module/player.scss +++ b/client/src/assets/css/module/player.scss @@ -1,13 +1,17 @@ .player { position: fixed; + z-index: 3; + right: 0; bottom: 0; left: 0; - right: 0; - backdrop-filter: blur(100px); - z-index: 3; - padding: 10px var(--space-between-block); + display: flex; gap: var(--space-between-block); + + padding: 10px var(--space-between-block); + + backdrop-filter: blur(100px); + //display: none; &__cover { width: 80px; @@ -20,20 +24,24 @@ } &__top { - margin-bottom: 10px; display: flex; align-items: center; + margin-bottom: 10px; } &__executor { - font-size: 1rem; display: flex; flex-direction: column; - margin-left: 20px; gap: 0.25rem; + + margin-left: 20px; + + font-size: 1rem; + span { color: var(--color-white-opacity); } + &.m--skeleton { min-width: 135px; } @@ -42,179 +50,204 @@ &__favorites { width: 27px; height: 27px; - background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) - no-repeat 100%; margin-left: var(--space-between-block); + background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%; + &.m--skeleton { background: none; } + &:hover { cursor: url('./assets/img/icon/cursor.svg'), auto; } + &.m--active { - background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) - no-repeat 100%; + background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%; } } &__bottom { display: flex; - align-items: center; gap: 20px; + align-items: center; } &__time { - font-size: 1rem; - color: var(--color-white-opacity); - font-weight: 500; position: relative; + min-width: 105px; + + font-size: 1rem; + font-weight: 500; + color: var(--color-white-opacity); + &.m--ether { padding-right: 10px; - &:after { + &::after { content: ''; - animation: blink 1s infinite; + position: absolute; - border-radius: 50%; - left: 40px; top: 0; + left: 40px; + width: 5px; height: 5px; + background: var(--color-emmit); + border-radius: 50%; + + animation: blink 1s infinite; } } } + &__tools { display: flex; gap: var(--space-between-block); align-items: center; margin-left: auto; + &.m--skeleton { min-width: 200px; } } + &__volume { - display: flex; - align-items: center; position: relative; + display: flex; gap: 10px; + align-items: center; + &-on { width: 24px; height: 24px; - background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat - 100%; + background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat 100%; + &:hover { cursor: url('./assets/img/icon/cursor.svg'), auto; } } + &-off { width: 24px; height: 24px; - background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) - no-repeat 100%; + background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) no-repeat 100%; + &:hover { cursor: url('./assets/img/icon/cursor.svg'), auto; } } + input { position: relative; - appearance: none; + + overflow: hidden; + display: block; + width: calc(100% - 34px); height: 5px; - border-radius: 10px; - display: block; - background: var(--color-white-opacity); - overflow: hidden; margin: 0; - &:hover { - cursor: url('./assets/img/icon/cursor.svg'), auto; - } + appearance: none; + background: var(--color-white-opacity); + border-radius: 10px; &::-webkit-slider-thumb, &::-webkit-slider-thumb { - -webkit-appearance: none; width: 1px; height: 5px; + appearance: none; box-shadow: -100vmax 0 0 100vmax var(--color-white); } + + &:hover { + cursor: url('./assets/img/icon/cursor.svg'), auto; + } } } + &__progress { - flex: 1 1 auto; position: relative; + flex: 1 1 auto; input { position: relative; - appearance: none; + + overflow: hidden; + display: block; + width: 100%; height: 5px; - border-radius: 10px; - display: block; - background: var(--color-white-opacity); - margin-bottom: 20px; - overflow: hidden; margin: 0; + margin-bottom: 20px; - &:hover { - cursor: url('./assets/img/icon/cursor.svg'), auto; - } + appearance: none; + background: var(--color-white-opacity); + border-radius: 10px; &::-webkit-slider-thumb, &::-webkit-slider-thumb { - -webkit-appearance: none; width: 1px; height: 5px; + appearance: none; box-shadow: -100vmax 0 0 100vmax var(--color-primary); } + + &:hover { + cursor: url('./assets/img/icon/cursor.svg'), auto; + } } } &__btn { - min-height: 0; - min-width: 0; - width: 50px; - height: 50px; - border-radius: 50%; - border: none; - background: var(--color-primary); position: relative; + width: 50px; + min-width: 0; + height: 50px; + min-height: 0; + + background: var(--color-primary); + border: none; + border-radius: 50%; + &.m--play { - &:after { + &::after { content: ''; + position: absolute; + width: 18px; height: 18px; margin: auto; - background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat - 100%; + + background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%; background-size: contain; } - &:hover:after { - background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) - no-repeat 100%; + &:hover::after { + background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%; background-size: contain; } } &.m--pause { - &:after { + &::after { content: ''; + position: absolute; + width: 18px; height: 18px; margin: auto; - background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) - no-repeat 100%; + + background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%; background-size: contain; } - &:hover:after { - background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) - no-repeat 100%; + &:hover::after { + background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%; background-size: contain; } } @@ -229,6 +262,7 @@ from { opacity: 1; } + to { opacity: 0; } diff --git a/client/src/assets/css/module/playlist.scss b/client/src/assets/css/module/playlist.scss index ec6cf5e..b45fe41 100644 --- a/client/src/assets/css/module/playlist.scss +++ b/client/src/assets/css/module/playlist.scss @@ -1,136 +1,176 @@ .playlist { + position: relative; + z-index: 2; + + &__header { + display: flex; + gap: calc(var(--space-between-block) / 2); + align-items: center; + margin-bottom: var(--space-between-block); + } + + &__title { + margin: 0; + padding: 0; + font-size: 32px; + + &.m--margin { + margin-bottom: 1rem; + } + } + + &__back { + cursor: url('./assets/img/icon/cursor.svg'), auto; + + width: 30px; + height: 30px; + + background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%; + + transition: all 0.3s ease; + + &:hover { + background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%; + } + } + + &__edit { + cursor: url('./assets/img/icon/cursor.svg'), auto; + + width: 30px; + height: 30px; + + background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%; + + transition: all 0.3s ease; + + &:hover { + background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%; + } + } + + &-roster { + display: flex; + flex-wrap: wrap; + gap: calc(var(--space-between-block) / 2); + width: 100%; + } + + &-edit { position: relative; z-index: 2; - &__header{ - display: flex; - align-items: center; - gap: calc(var(--space-between-block) / 2); - margin-bottom: var(--space-between-block); - } - &__title{ - font-size: 32px; - margin: 0; - padding: 0; - &.m--margin{ - margin-bottom: 1rem; - } - } - &__back{ - width: 30px; - height: 30px; - background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%; - cursor: url("./assets/img/icon/cursor.svg"), auto; - transition: all .3s ease; - &:hover{ - background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%; - } - } - &__edit{ - width: 30px; - height: 30px; - background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%; - cursor: url("./assets/img/icon/cursor.svg"), auto; - transition: all .3s ease; - &:hover{ - background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%; - } - } - &-roster { - display: flex; - flex-wrap: wrap; - gap: calc(var(--space-between-block) / 2); - width: 100%; - } - &-edit{ - position: relative; - z-index: 2; - &__search{ - margin-bottom: var(--space-between-block); - } - &__search{ - min-width: 320px; - width: 40%; - } - &__list{ - display: flex; - gap: var(--space-between-block); - } - &__item{ - width: calc(50% - var(--space-between-block) / 2) ; - } - &__title{ - color: transparent; - font-size: 2rem; - background-clip: text; - background-image: var(--linear-gradient); - margin-bottom: 1rem; - } - &__upload{ - cursor: url("./assets/img/icon/cursor.svg"), auto; - border: none; - padding: 0; - background-clip: text; - color: transparent; - background-image: var(--linear-gradient-highlight); - margin: 0 0 var(--space-between-block); - transition: all .3s ease; - display: flex; - gap: 10px; - &:before{ - content: ''; - width: 20px; - height: 20px; - background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%; - } - &:hover{ - color: var(--color-white); - } - } + + &__search { + margin-bottom: var(--space-between-block); } - &-item { - z-index: 2; - position: relative; - display: flex; - flex-direction: column; - min-width: 220px; - cursor: url("./assets/img/icon/cursor.svg"), auto; - - &__cover { - background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%; - border-radius: 10px; - margin-bottom: 10px; - transition: all .3s ease; - min-height: 220px; - &:hover{ - background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%; - border-radius: 10px; - margin-bottom: 10px; - } - } - - &.m--create &__cover { - position: relative; - background: var(--bg-opacity); - &:after { - content: ''; - width: 63px; - height: 63px; - background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%; - transition: all .3s ease; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - } - &:hover{ - background: var(--color-primary); - &:after{ - background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%; - } - } - } + &__search { + width: 40%; + min-width: 320px; } + + &__list { + display: flex; + gap: var(--space-between-block); + } + + &__item { + width: calc(50% - var(--space-between-block) / 2); + } + + &__title { + margin-bottom: 1rem; + + font-size: 2rem; + color: transparent; + + background-image: var(--linear-gradient); + background-clip: text; + } + + &__upload { + cursor: url('./assets/img/icon/cursor.svg'), auto; + + display: flex; + gap: 10px; + + margin: 0 0 var(--space-between-block); + padding: 0; + + color: transparent; + + background-image: var(--linear-gradient-highlight); + background-clip: text; + border: none; + + transition: all 0.3s ease; + + &::before { + content: ''; + width: 20px; + height: 20px; + background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%; + } + + &:hover { + color: var(--color-white); + } + } + } + + &-item { + cursor: url('./assets/img/icon/cursor.svg'), auto; + + position: relative; + z-index: 2; + + display: flex; + flex-direction: column; + + min-width: 220px; + + &__cover { + min-height: 220px; + margin-bottom: 10px; + + background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%; + border-radius: 10px; + + transition: all 0.3s ease; + + &:hover { + margin-bottom: 10px; + background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%; + border-radius: 10px; + } + } + + &.m--create &__cover { + position: relative; + background: var(--bg-opacity); + + &::after { + content: ''; + + position: absolute; + inset: 0; + + width: 63px; + height: 63px; + margin: auto; + + background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%; + + transition: all 0.3s ease; + } + + &:hover { + background: var(--color-primary); + + &::after { + background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%; + } + } + } + } } diff --git a/client/src/assets/css/module/playlists.scss b/client/src/assets/css/module/playlists.scss index cb2127e..253fb9a 100644 --- a/client/src/assets/css/module/playlists.scss +++ b/client/src/assets/css/module/playlists.scss @@ -1,38 +1,44 @@ .playlists { &__content { - } &__list { - } &__item { - display: flex; position: relative; - padding-bottom: 1rem; - align-items: center; - gap: 20px; - padding-top: 1rem; - &:after{ + display: flex; + gap: 20px; + align-items: center; + + padding-top: 1rem; + padding-bottom: 1rem; + + &::after { + content: ''; + position: absolute; bottom: 0; - content: ''; + width: 100%; height: 1px; + background: var(--linear-gradient); } } - &__time{ + + &__time { width: 100px; margin: 0; } - &__param{ - margin: 0; + + &__param { width: 25%; - &.m--long{ - flex: 1 1 auto; + margin: 0; + + &.m--long { + flex: 1 1 auto; } } } diff --git a/client/src/assets/css/module/profile.scss b/client/src/assets/css/module/profile.scss index 47e4da5..5855b87 100644 --- a/client/src/assets/css/module/profile.scss +++ b/client/src/assets/css/module/profile.scss @@ -1,10 +1,11 @@ .profile { - &__title { - margin-bottom: 0.5rem; - padding: 0; - font-size: 1.5rem; - } - &__tabs{ - margin-top: var(--space-between-block); - } + &__title { + margin-bottom: 0.5rem; + padding: 0; + font-size: 1.5rem; + } + + &__tabs { + margin-top: var(--space-between-block); + } } diff --git a/client/src/assets/css/module/rubric.scss b/client/src/assets/css/module/rubric.scss index 5b766d1..b673a22 100644 --- a/client/src/assets/css/module/rubric.scss +++ b/client/src/assets/css/module/rubric.scss @@ -1,110 +1,142 @@ .rubric { &-block { margin-bottom: var(--space-between-sections); + &__header { display: flex; - justify-content: space-between; - align-items: start; flex-wrap: wrap; + align-items: start; + justify-content: space-between; + &-title{ margin-bottom: 0; } } &__description{ - max-width: 60%; - margin-bottom: 2.5rem; @mixin responsive-xxs { max-width: none; } + + max-width: 60%; + margin-bottom: 2.5rem; + &.m--50{ - margin-bottom: 0; - max-width: 50%; width: 100%; + max-width: 50%; + margin-bottom: 0; } } + &__link{ @mixin responsive-xxs { order: 1; - margin: var(--space-between-block) 0; width: 100%; + margin: var(--space-between-block) 0; } } + &__list{ position: relative; padding-bottom: 10px; - &:before{ + + &::before{ + content: ''; + + position: absolute; top: 0; bottom: 0; + width: 100%; - position: absolute; - content: ''; + background: url("./assets/img/bg/rubric-list.svg") no-repeat; background-position: 25%; background-size: 35%; } } + &__item{ + position: relative; + z-index: 2; + display: flex; align-items: center; - position: relative; + padding: 20px 0; - z-index: 2; + &:hover{ cursor: url("./assets/img/icon/cursor.svg"), auto; } - &:after{ + + &::after{ + content: ''; + position: absolute; bottom: 0; - content: ''; - background: #000; + width: 100%; height: 1px; + + background: #000; background: var(--linear-gradient); } } + &__title{ - transition: all .3s ease; margin-right: auto; + padding-right: 10px; + color: var(--color-white); text-wrap: nowrap; - padding-right: 10px; + + transition: all .3s ease; } + &__btn{ - transition: all .35s ease, visibility .0s ease; - visibility: hidden; - text-wrap: nowrap; - min-width: 0; width: 0; + min-width: 0; + + text-wrap: nowrap; + + visibility: hidden; + + transition: all .35s ease, visibility .0s ease; } + &__item:hover &__btn{ - visibility: visible; - min-width: 240px; width: 240px; + min-width: 240px; margin-left: 20px; + visibility: visible; } + &__item:hover &__title{ color: transparent; - background-clip: text; background-image: var(--linear-gradient); + background-clip: text; } } + &-modal{ &__header{ display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; margin-bottom: 1rem; } + &__title{ margin-bottom: 0; } + &__close{ position: relative; } + &__cover{ margin-bottom: 1.5rem; } + &__description{ margin-bottom: 1.5rem; } diff --git a/client/src/assets/css/module/song.scss b/client/src/assets/css/module/song.scss index b4da84e..123387c 100644 --- a/client/src/assets/css/module/song.scss +++ b/client/src/assets/css/module/song.scss @@ -4,26 +4,34 @@ flex-wrap: wrap; gap: 0 var(--space-between-block); } + .m--column &-item{ width: 100%; } + &-item { - width: calc(50% - var(--space-between-block) / 2); - position: relative; - display: flex; - align-items: center; - z-index: 2; - border-left: 3px solid transparent; - padding: 10px; - transition: border .5s ease, background .5s ease; - background: transparent; @mixin responsive-m { width: 100%; } + + position: relative; + z-index: 2; + + display: flex; + align-items: center; + + width: calc(50% - var(--space-between-block) / 2); + padding: 10px; + + background: transparent; + border-left: 3px solid transparent; + + transition: border .5s ease, background .5s ease; + &.m--select &__selected { - margin-right: 20px; width: 35px; height: 33px; + margin-right: 20px; &.m--stop { path { @@ -33,8 +41,8 @@ } &__selected { - width: 0; overflow: hidden; + width: 0; transition: all .2s ease; path:nth-child(n) { @@ -53,110 +61,133 @@ &:hover { cursor: url("./assets/img/icon/cursor.svg"), auto; + background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%); border-color: var(--color-primary); - background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); } &__btn { - min-height: 0; - min-width: 0; - width: 50px; - height: 50px; - border-radius: 50%; - border: none; - background: var(--color-primary); position: relative; + width: 50px; + min-width: 0; + height: 50px; + min-height: 0; + + background: var(--color-primary); + border: none; + border-radius: 50%; + &.m--small { - background: transparent; width: 25px; height: 25px; + background: transparent; } &.m--favorites { - &:after { + &::after { content: ''; + position: absolute; + width: 25px; height: 25px; margin: auto; + background: svg-load('./assets/img/icon/favorites.svg', fill=$color-primary) no-repeat 100%; background-size: contain; + transition: all .3s ease; } - &:hover:after { + &:hover::after { background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%; background-size: contain; } } &.m--add { - &:after { + &::after { content: ''; + position: absolute; + width: 25px; height: 25px; margin: auto; + background: svg-load('./assets/img/icon/add-icon.svg', fill=$color-primary) no-repeat 100%; background-size: contain; + transition: all .3s ease; } - &:hover:after { + &:hover::after { background: svg-load('./assets/img/icon/add-icon.svg', fill=#FFF) no-repeat 100%; background-size: contain; } } + &.m--already{ - &:after { + &::after { content: ''; + position: absolute; + width: 25px; height: 25px; margin: auto; + background: svg-load('./assets/img/icon/icon-trash.svg', stroke=$color-primary) no-repeat 100%; background-size: contain; + transition: all .3s ease; } - &:hover:after { + &:hover::after { background: svg-load('./assets/img/icon/icon-trash.svg', stroke=#FFF) no-repeat 100%; background-size: contain; } } &.m--play { - &:after { + &::after { content: ''; + position: absolute; + width: 18px; height: 18px; margin: auto; + background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%; background-size: contain; + transition: all .3s ease; } - &:hover:after { + &:hover::after { background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%; background-size: contain; } } &.m--pause { - &:after { + &::after { content: ''; + position: absolute; + width: 18px; height: 18px; margin: auto; + background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%; background-size: contain; + transition: all .3s ease; } - &:hover:after { + &:hover::after { background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%; background-size: contain; } @@ -166,21 +197,23 @@ &__info { display: flex; flex-direction: column; - font-size: 1rem; - color: var(--color-white-opacity); - line-height: 21px; + margin-left: 20px; + font-size: 1rem; + line-height: 21px; + color: var(--color-white-opacity); + span { color: var(--color-white); } } &__tools { - margin-left: auto; display: flex; - align-items: center; gap: 20px; + align-items: center; + margin-left: auto; } } } @@ -189,9 +222,11 @@ 0% { transform: translateY(0); } + 50% { transform: translateY(50%); } + 100% { transform: translateY(0); } diff --git a/client/src/assets/css/module/support.scss b/client/src/assets/css/module/support.scss index e1fd964..5e6d815 100644 --- a/client/src/assets/css/module/support.scss +++ b/client/src/assets/css/module/support.scss @@ -1,38 +1,46 @@ .support{ &-block{ margin-bottom: var(--space-between-sections); + &__item { - width: calc(100% / 3); + position: relative; + z-index: 2; + display: flex; flex-direction: column; align-items: flex-start; - font-size: 16px; + + width: calc(100% / 3); margin-bottom: 2.5rem; - position: relative; - z-index: 2; - &:before { + + font-size: 16px; + + &::before { content: ''; - height: 50px; - margin-bottom: 10px; + position: relative; z-index: 2; + + height: 50px; + margin-bottom: 10px; } - &.m--one-circle:before { + &.m--one-circle::before { width: 50px; background: url("./assets/img/icon/one-circle.svg") no-repeat center; } - &.m--two-circle:before { + &.m--two-circle::before { width: 100px; background: url("./assets/img/icon/two-circle.svg") no-repeat center; } - &.m--three-circle:before { + &.m--three-circle::before { width: 150px; background: url("./assets/img/icon/three-circle.svg") no-repeat center; } } + &__list{ display: flex; gap: var(--space-between-block); diff --git a/client/src/assets/css/module/tabs.scss b/client/src/assets/css/module/tabs.scss index f1b5acd..b3bce97 100644 --- a/client/src/assets/css/module/tabs.scss +++ b/client/src/assets/css/module/tabs.scss @@ -2,50 +2,61 @@ display: flex; flex-wrap: wrap; margin-bottom: var(--space-between-block); + &.m--btns{ - gap: 10px; @mixin responsive-xs { .button{ width: 100%; } } + gap: 10px; + } + &__item { - border: none; - background: none; + position: relative; + + display: flex; + + margin-right: 10px; + padding: 0; + + font-size: 2rem; color: var(--color-white); text-transform: uppercase; - font-size: 2rem; - margin-right: 10px; - position: relative; - display: flex; - padding: 0; + + background: none; + border: none; + transition: all 0.5s ease; - &:after { + &::after { content: ''; + display: block; + + width: 3px; + height: 100%; + margin-left: 10px; + background: var(--color-white); border-radius: 20px; - height: 100%; - width: 3px; - margin-left: 10px; } &:last-child { margin: 0; - &:after { + &::after { display: none; } } &.is-active, &:hover { - color: transparent; - -webkit-background-clip: text; - background-image: var(--linear-gradient); cursor: url("./assets/img/icon/cursor.svg"), auto; + color: transparent; + background-image: var(--linear-gradient); + background-clip: text; } } } diff --git a/client/src/assets/css/module/team.scss b/client/src/assets/css/module/team.scss index d650f09..3602e60 100644 --- a/client/src/assets/css/module/team.scss +++ b/client/src/assets/css/module/team.scss @@ -1,31 +1,36 @@ .team { - margin-left: auto; - max-width: calc(100vw - ((100vw - var(--container)) / 2)); - margin-bottom: var(--space-between-sections); - position: relative; - z-index: 2; @mixin responsive-xl { padding: 0 0 0 20px; } + position: relative; + z-index: 2; + + max-width: calc(100vw - ((100vw - var(--container)) / 2)); + margin-bottom: var(--space-between-sections); + margin-left: auto; + &__header { - display: flex; - max-width: var(--container); - margin-right: auto; - padding: 0 50px 0; - margin-bottom: var(--space-between-block); @mixin responsive-xl { - padding: 0 40px 0 0; column-gap: var(--space-between-block); + padding: 0 40px 0 0; } + @mixin responsive-s { flex-wrap: wrap; } + + display: flex; + + max-width: var(--container); + margin-right: auto; + margin-bottom: var(--space-between-block); + padding: 0 50px; } &__title { - margin-bottom: 0; margin-right: auto; + margin-bottom: 0; text-wrap: nowrap; } @@ -44,79 +49,93 @@ } &__tools { - margin-top: 65px; - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-between; - max-width: var(--container); - margin-right: auto; - row-gap: 1.5rem; - padding: 0 50px 0; @mixin responsive-xl { padding: 0 80px 0 35px; } + @mixin responsive-l { padding: 0 40px 0 0; } + + display: flex; + flex-wrap: wrap; + row-gap: 1.5rem; + align-items: center; + justify-content: space-between; + + max-width: var(--container); + margin-top: 65px; + margin-right: auto; + padding: 0 50px; + .m--link{ @mixin responsive-s { - width: 100%; display: flex; justify-content: flex-end; + width: 100%; } } } &__progress { - width: 100%; - height: 4px; - position: relative; - max-width: 460px; - background: var(--color-white-opacity); - border-radius: 20px; - overflow: hidden; @mixin responsive-s { max-width: none; } + + position: relative; + + overflow: hidden; + + width: 100%; + max-width: 460px; + height: 4px; + + background: var(--color-white-opacity); + border-radius: 20px; + span { - background: var(--color-white); position: absolute; - left: 0; top: 0; + left: 0; + transform-origin: left top; + width: 100%; height: 100%; - transform-origin: left top; + + background: var(--color-white); } } &__cover { - margin-bottom: 0.5rem; - height: 450px; overflow: hidden; + height: 450px; + margin-bottom: 0.5rem; } &__name { - font-weight: 500; - font-size: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; + font-size: 1.5rem; + font-weight: 500; + span { - font-weight: 400; font-size: 1.125rem; + font-weight: 400; } } &__description { - max-width: 820px; @mixin responsive-xl { max-width: calc(100% - var(--space-between-block)); } + @mixin responsive-s { - max-width: none; width: 100%; + max-width: none; } + + max-width: 820px; } } diff --git a/client/src/assets/css/setting.scss b/client/src/assets/css/setting.scss index c4cf9e3..72602f5 100644 --- a/client/src/assets/css/setting.scss +++ b/client/src/assets/css/setting.scss @@ -5,8 +5,9 @@ $document-width-s: 730px; $document-width-xs: 640px; $document-width-xxs: 480px; $color-primary: #5e5bfc; -$color-white: #ffffff; +$color-white: #fff; $color-white-opacity: #bbb9ca; + :root { --color-black: #232323; --color-white: $color-white; @@ -14,24 +15,14 @@ $color-white-opacity: #bbb9ca; --color-white-opacity: $color-white-opacity; --bg-wrapper-modal: #000000e5; --color-primary: $color-primary; - --color-black-cc: #000000cc; + --color-black-cc: #000c; --color-emmit: #e81717; --bg-opacity: #74767d; --base-fz: 18px; --base-lh: 1.3; --font-family-base: 'Manrope', 'Tahoma', sans-serif; - --linear-gradient-highlight: linear-gradient( - 259.3deg, - #5e5bfc 0.44%, - #871df0 97.88% - ); - --linear-gradient: linear-gradient( - 91.17deg, - #c6f1f7 -4.01%, - #f983e9 36.14%, - #b877ff 77.44%, - #c2e9cd 106.11% - ); + --linear-gradient-highlight: linear-gradient(259.3deg, #5e5bfc 0.44%, #871df0 97.88%); + --linear-gradient: linear-gradient(91.17deg, #c6f1f7 -4.01%, #f983e9 36.14%, #b877ff 77.44%, #c2e9cd 106.11%); --container: $document-width-xl; --space-between-block: calc(var(--base-fz) * 2.25); --space-between-sections: calc(var(--base-fz) * 7); @@ -40,13 +31,16 @@ $color-white-opacity: #bbb9ca; @media (max-width: $document-width-xl) { --container: $document-width-l; } + @media (max-width: $document-width-l) { --container: $document-width-m; } + @media (max-width: $document-width-m) { --container: $document-width-s; --space-between-sections: calc(var(--base-fz) * 2.7); } + @media (max-width: $document-width-s) { --container: $document-width-xs; } diff --git a/client/src/assets/img/favicon/fav-1.svg b/client/src/assets/img/favicon/fav-1.svg new file mode 100644 index 0000000..18a35b3 --- /dev/null +++ b/client/src/assets/img/favicon/fav-1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/client/src/assets/img/favicon/fav-2.svg b/client/src/assets/img/favicon/fav-2.svg new file mode 100644 index 0000000..3b209df --- /dev/null +++ b/client/src/assets/img/favicon/fav-2.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/client/src/assets/img/favicon/fav.svg b/client/src/assets/img/favicon/fav.svg new file mode 100644 index 0000000..de765c8 --- /dev/null +++ b/client/src/assets/img/favicon/fav.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/client/src/assets/img/mock/template-artist.png b/client/src/assets/img/mock/template-artist.png new file mode 100644 index 0000000..04b8a23 Binary files /dev/null and b/client/src/assets/img/mock/template-artist.png differ diff --git a/client/src/components/app-breadcrumbs.vue b/client/src/components/app-breadcrumbs.vue index 486c610..be57727 100644 --- a/client/src/components/app-breadcrumbs.vue +++ b/client/src/components/app-breadcrumbs.vue @@ -1,12 +1,6 @@ diff --git a/client/src/components/pagination.vue b/client/src/components/pagination.vue index 5a8d363..468bb0c 100644 --- a/client/src/components/pagination.vue +++ b/client/src/components/pagination.vue @@ -97,28 +97,16 @@ export default { if (count <= 4) { items.push({ text: item, value: item }); } else { - if ( - item === 1 && - this.currentPage !== item && - this.currentPage - 1 !== 1 && - this.currentPage - 2 !== 1 - ) { + if (item === 1 && this.currentPage !== item && this.currentPage - 1 !== 1 && this.currentPage - 2 !== 1) { items.push({ text: '1', value: 1 }); items.push({ text: '...', value: null }); - } else if ( - item === count && - this.currentPage + 1 !== count && - this.currentPage + 2 !== count - ) { + } else if (item === count && this.currentPage + 1 !== count && this.currentPage + 2 !== count) { items.push({ text: '...', value: null }); items.push({ text: count, value: count }); } else { let deltaPrev = count - this.currentPage <= 3 ? 3 : 2; let deltaAfter = this.currentPage <= 3 ? 4 - this.currentPage : 2; - if ( - item > this.currentPage - deltaPrev && - item < this.currentPage + deltaAfter - ) { + if (item > this.currentPage - deltaPrev && item < this.currentPage + deltaAfter) { console.log(item); items.push({ text: item, value: item }); } diff --git a/client/src/components/player.vue b/client/src/components/player.vue index e3b2d9d..3e78a69 100644 --- a/client/src/components/player.vue +++ b/client/src/components/player.vue @@ -2,26 +2,17 @@
- player +
- +
@@ -37,12 +28,7 @@
-
+
@@ -60,26 +46,14 @@ - +
-
+