From b2212576165ed1aad3e122dfc8f8c3b9a5ff0be6 Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Fri, 14 Aug 2026 09:13:53 +0200 Subject: [PATCH] Improve toolbox architecture and initial bundle loading --- eslint.config.js | 65 + package-lock.json | 1463 +++- package.json | 8 +- scripts/generate-list-indexes.mjs | 1 + server.mjs | 1 + tests/static-styles.test.mjs | 4 +- tests/static-toolboxes.test.mjs | 19 +- website/src/components/AppOverlays.jsx | 1 - website/src/components/Shell.jsx | 1 - .../src/components/ToastPositionSwitch.jsx | 1 - website/src/components/Tooltip.jsx | 8 +- website/src/features/games/GameListsPage.jsx | 1 - .../features/games/mhwilds/MhwildsLists.jsx | 7 +- .../src/features/toolboxes/ToolboxCard.jsx | 1 - .../src/features/toolboxes/ToolboxPages.jsx | 2 +- .../toolboxes/modules/CombosModule.jsx | 2 +- .../modules/EquipmentPlannerModule.jsx | 4 - .../toolboxes/modules/TableModule.jsx | 6 - .../toolboxes/modules/TimerModule.jsx | 2 +- .../src/features/toolboxes/modules/index.jsx | 37 +- .../toolboxes/modules/tableFormulaEngine.js | 2 +- .../features/toolboxes/modules/textImport.js | 4 +- .../toolboxes/storage/moduleDataCompactors.js | 173 + .../toolboxes/storage/toolboxStorage.js | 235 +- .../toolboxes/storage/useIndexedToolboxes.js | 2 +- .../toolboxes/toolboxModuleRegistry.js | 128 + website/src/main.jsx | 36 +- website/src/pages/AboutPage.jsx | 4 +- website/src/pages/HomeOnboardingSection.jsx | 2 +- website/src/pages/HomePage.jsx | 3 +- website/src/pages/LibraryPage.jsx | 59 +- website/src/router/RouteContent.jsx | 26 +- website/src/styles/_toolboxes.scss | 6398 +---------------- website/src/styles/toolboxes/_core.scss | 6396 ++++++++++++++++ 34 files changed, 8358 insertions(+), 6744 deletions(-) create mode 100644 eslint.config.js create mode 100644 website/src/features/toolboxes/storage/moduleDataCompactors.js create mode 100644 website/src/features/toolboxes/toolboxModuleRegistry.js create mode 100644 website/src/styles/toolboxes/_core.scss diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..e628cdc --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,65 @@ +// Rôle : configure ESLint pour le code React, les hooks et les scripts Node du projet. +import js from "@eslint/js"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import globals from "globals"; + +export default [ + { + ignores: [ + "node_modules/**", + "website/dist/**", + ".codex-home/**" + ] + }, + js.configs.recommended, + { + files: ["website/src/**/*.{js,jsx}"], + languageOptions: { + ecmaVersion: "latest", + sourceType: "module", + globals: { + ...globals.browser, + ...globals.es2024 + }, + parserOptions: { + ecmaFeatures: { + jsx: true + } + } + }, + plugins: { + "react-hooks": reactHooks, + "react-refresh": reactRefresh + }, + rules: { + ...reactHooks.configs.recommended.rules, + "react-hooks/purity": "off", + "react-hooks/set-state-in-effect": "off", + "no-unused-vars": ["error", { + argsIgnorePattern: "^_", + varsIgnorePattern: "^_", + caughtErrorsIgnorePattern: "^_" + }], + "react-refresh/only-export-components": "off" + } + }, + { + files: ["*.js", "*.mjs", "scripts/**/*.mjs", "tests/**/*.mjs"], + languageOptions: { + ecmaVersion: "latest", + sourceType: "module", + globals: { + ...globals.node, + ...globals.es2024 + } + }, + rules: { + "no-unused-vars": ["error", { + argsIgnorePattern: "^_", + varsIgnorePattern: "^_", + caughtErrorsIgnorePattern: "^_" + }] + } + } +]; diff --git a/package-lock.json b/package-lock.json index 27ea61e..2beb964 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,254 @@ "vite": "^8.1.5" }, "devDependencies": { + "@eslint/js": "^10.0.1", + "eslint": "^10.8.1", + "eslint-plugin-react-hooks": "^7.1.1", + "eslint-plugin-react-refresh": "^0.5.4", + "globals": "^17.11.0", "sass": "^1.101.3" } }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz", + "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.8", + "@babel/types": "^7.29.8", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz", + "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.8" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz", + "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.8", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.8", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.8", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz", + "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@emnapi/core": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", @@ -48,6 +293,250 @@ "tslib": "^2.4.0" } }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.10.1.tgz", + "integrity": "sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "eslint-visitor-keys": "^3.4.3" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz", + "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/config-array": { + "version": "0.23.5", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz", + "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/object-schema": "^3.0.5", + "debug": "^4.3.1", + "minimatch": "^10.2.4" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + } + }, + "node_modules/@eslint/config-helpers": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.7.0.tgz", + "integrity": "sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^1.2.1" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + } + }, + "node_modules/@eslint/core": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz", + "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + } + }, + "node_modules/@eslint/js": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz", + "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "eslint": "^10.0.0" + }, + "peerDependenciesMeta": { + "eslint": { + "optional": true + } + } + }, + "node_modules/@eslint/object-schema": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz", + "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + } + }, + "node_modules/@eslint/plugin-kit": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz", + "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^1.2.1", + "levn": "^0.4.1" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + } + }, + "node_modules/@humanfs/core": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz", + "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@humanfs/types": "^0.15.0" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/node": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz", + "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@humanfs/core": "^0.19.2", + "@humanfs/types": "^0.15.0", + "@humanwhocodes/retry": "^0.4.0" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/types": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz", + "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/retry": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz", + "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@napi-rs/wasm-runtime": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz", @@ -644,6 +1133,27 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/esrecurse": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz", + "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true, + "license": "MIT" + }, "node_modules/@vitejs/plugin-react": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz", @@ -669,6 +1179,137 @@ } } }, + "node_modules/acorn": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz", + "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==", + "dev": true, + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/ajv": { + "version": "6.15.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz", + "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/balanced-match": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", + "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.11.14", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.14.tgz", + "integrity": "sha512-JyJ954WzuIR8/FFzX0o5krdSTrBAkcCSRfWSleRsIHSWV+cZe2FI1PKggVkFke1hBldRs+LRxUczzE9iPmgZww==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/brace-expansion": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz", + "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/browserslist": { + "version": "4.28.8", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz", + "integrity": "sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.11.12", + "caniuse-lite": "^1.0.30001809", + "electron-to-chromium": "^1.5.402", + "node-releases": "^2.0.53", + "update-browserslist-db": "^1.3.0" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001809", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz", + "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, "node_modules/chokidar": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", @@ -685,6 +1326,53 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "license": "MIT" + }, + "node_modules/cross-spawn": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true, + "license": "MIT" + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", @@ -694,6 +1382,242 @@ "node": ">=8" } }, + "node_modules/electron-to-chromium": { + "version": "1.5.406", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.406.tgz", + "integrity": "sha512-hWH5ORBi3d0IipnMh7BN5GDTaAmrSSSWmznwt2zltdiRNEWoEQyTwF0FFSBxzHO7hLSRT6loQu3IQGV0wg/Tvg==", + "dev": true, + "license": "ISC" + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint": { + "version": "10.8.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.8.1.tgz", + "integrity": "sha512-wqA7W2jbsC/BnV9Iv1UZpKVFkO1AdNoSmYW8NWG4HNOBbkAMvIqDZ27pI2f07dqn583NcIC44ckjAcOXDL1QbQ==", + "dev": true, + "license": "MIT", + "workspaces": [ + "packages/*" + ], + "dependencies": { + "@eslint-community/eslint-utils": "^4.8.0", + "@eslint-community/regexpp": "^4.12.2", + "@eslint/config-array": "^0.23.5", + "@eslint/config-helpers": "^0.7.0", + "@eslint/core": "^1.2.1", + "@eslint/plugin-kit": "^0.7.2", + "@humanfs/node": "^0.16.6", + "@humanwhocodes/module-importer": "^1.0.1", + "@humanwhocodes/retry": "^0.4.2", + "@types/estree": "^1.0.6", + "ajv": "^6.14.0", + "cross-spawn": "^7.0.6", + "debug": "^4.3.2", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^9.1.2", + "eslint-visitor-keys": "^5.0.1", + "espree": "^11.2.0", + "esquery": "^1.7.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^8.0.0", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "minimatch": "^10.2.5", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } + } + }, + "node_modules/eslint-plugin-react-hooks": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz", + "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "hermes-parser": "^0.25.1", + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0" + } + }, + "node_modules/eslint-plugin-react-refresh": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.4.tgz", + "integrity": "sha512-7bqTKz7T0r+HKWFarNXByDE9/5+73wI2ru+M3zuqGbR7s/b/5/pQJXZoufWlrngqGqoZto73ZkGumCdLxk+4rw==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "eslint": "^9 || ^10" + } + }, + "node_modules/eslint-scope": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz", + "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "@types/esrecurse": "^4.3.1", + "@types/estree": "^1.0.8", + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz", + "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/espree": { + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz", + "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "acorn": "^8.16.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^5.0.1" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esquery": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz", + "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true, + "license": "MIT" + }, "node_modules/fdir": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", @@ -711,6 +1635,57 @@ } } }, + "node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "license": "MIT", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "license": "MIT", + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/flatted": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.4.tgz", + "integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==", + "dev": true, + "license": "ISC" + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -725,6 +1700,69 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/globals": { + "version": "17.11.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-17.11.0.tgz", + "integrity": "sha512-Z2I8hM+PbJDXQDq3Icgpzv+mPdwr68iZUU9d5WW4FuXfDUQfkZaZuvjMv42/5crNyw154+9+VWXbYrUgDXbxNw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/hermes-estree": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", + "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==", + "dev": true, + "license": "MIT" + }, + "node_modules/hermes-parser": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz", + "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "hermes-estree": "0.25.1" + } + }, + "node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, "node_modules/immutable": { "version": "5.1.9", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz", @@ -732,12 +1770,22 @@ "devOptional": true, "license": "MIT" }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.19" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "devOptional": true, "license": "MIT", - "optional": true, "engines": { "node": ">=0.10.0" } @@ -746,8 +1794,8 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "devOptional": true, "license": "MIT", - "optional": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -755,6 +1803,91 @@ "node": ">=0.10.0" } }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true, + "license": "ISC" + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "json-buffer": "3.0.1" + } + }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/lightningcss": { "version": "1.33.0", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz", @@ -1016,10 +2149,59 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/minimatch": { + "version": "10.2.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz", + "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.8" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, "node_modules/nanoid": { - "version": "3.3.16", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", - "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", + "version": "3.3.18", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz", + "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==", "funding": [ { "type": "github", @@ -1034,6 +2216,13 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true, + "license": "MIT" + }, "node_modules/node-addon-api": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", @@ -1041,6 +2230,86 @@ "license": "MIT", "optional": true }, + "node_modules/node-releases": { + "version": "2.0.53", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.53.tgz", + "integrity": "sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/optionator": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", + "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", + "dev": true, + "license": "MIT", + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -1060,9 +2329,9 @@ } }, "node_modules/postcss": { - "version": "8.5.20", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz", - "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==", + "version": "8.5.26", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz", + "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==", "funding": [ { "type": "opencollective", @@ -1079,7 +2348,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.16", + "nanoid": "^3.3.17", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1087,6 +2356,26 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/react": { "version": "19.2.7", "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz", @@ -1182,6 +2471,39 @@ "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", "license": "MIT" }, + "node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -1214,6 +2536,60 @@ "license": "0BSD", "optional": true }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "license": "MIT", + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.1.tgz", + "integrity": "sha512-ZZ61DsRsOnakl74HAmp3oSN4aXUmEWXf+i/yv0h7tIBfICc3VdrFErQKUUKPgu3AMsTUMbcongALEN4l6GSUrQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "punycode": "^2.1.0" + } + }, "node_modules/vite": { "version": "8.1.5", "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.5.tgz", @@ -1290,6 +2666,75 @@ "optional": true } } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/word-wrap": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, + "license": "ISC" + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/zod": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz", + "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/zod-validation-error": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz", + "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.25.0 || ^4.0.0" + } } } } diff --git a/package.json b/package.json index 36899d4..a62bc66 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build": "npm run lists:index && vite build", "preview": "vite preview", "lists:index": "node scripts/generate-list-indexes.mjs", - "check": "node --check server.mjs && node --check vite.config.js && npm run lists:index && npm test && npm run build", + "lint": "eslint .", + "check": "node --check server.mjs && node --check vite.config.js && npm run lint && npm run lists:index && npm test && npm run build", "test": "node --test" }, "dependencies": { @@ -19,6 +20,11 @@ "vite": "^8.1.5" }, "devDependencies": { + "@eslint/js": "^10.0.1", + "eslint": "^10.8.1", + "eslint-plugin-react-hooks": "^7.1.1", + "eslint-plugin-react-refresh": "^0.5.4", + "globals": "^17.11.0", "sass": "^1.101.3" } } diff --git a/scripts/generate-list-indexes.mjs b/scripts/generate-list-indexes.mjs index 4e96a47..8b69474 100644 --- a/scripts/generate-list-indexes.mjs +++ b/scripts/generate-list-indexes.mjs @@ -1,3 +1,4 @@ +// Rôle : génère les index JSON des listes de jeux à partir des fichiers éditables. import { access, readdir, readFile, writeFile } from "node:fs/promises"; import path from "node:path"; diff --git a/server.mjs b/server.mjs index be8b420..fb8ec24 100644 --- a/server.mjs +++ b/server.mjs @@ -1,3 +1,4 @@ +// Rôle : sert l'application Vite construite ou les sources publiques en local. import { createReadStream, existsSync, readFileSync, statSync } from "node:fs"; import { createServer } from "node:http"; import { extname, join, relative, resolve } from "node:path"; diff --git a/tests/static-styles.test.mjs b/tests/static-styles.test.mjs index e3b58f9..0fe0d53 100644 --- a/tests/static-styles.test.mjs +++ b/tests/static-styles.test.mjs @@ -12,7 +12,8 @@ test("style entrypoint and theme layers are wired", async () => { const styleShell = await readFile("website/src/styles/_shell.scss", "utf8"); const styleCards = await readFile("website/src/styles/_cards.scss", "utf8"); const styleHome = await readFile("website/src/styles/_home.scss", "utf8"); - const styleToolboxes = await readFile("website/src/styles/_toolboxes.scss", "utf8"); + const styleToolboxesEntry = await readFile("website/src/styles/_toolboxes.scss", "utf8"); + const styleToolboxes = await readFile("website/src/styles/toolboxes/_core.scss", "utf8"); const styleOverlays = await readFile("website/src/styles/_overlays.scss", "utf8"); const styleIcons = await readFile("website/src/styles/_icons.scss", "utf8"); const styleGames = await readFile("website/src/styles/_games.scss", "utf8"); @@ -22,6 +23,7 @@ test("style entrypoint and theme layers are wired", async () => { assert.match(styles, /@use "tokens"/); assert.match(styles, /@use "nebula"/); assert.match(styles, /@use "toolboxes"/); + assert.match(styleToolboxesEntry, /@use "toolboxes\/core"/); assert.match(styles, /@use "mhwilds"/); assert.match(styles, /@use "diablo4"/); assert.match(styleTokens, /--gradient-brand/); diff --git a/tests/static-toolboxes.test.mjs b/tests/static-toolboxes.test.mjs index 8db82a6..313b650 100644 --- a/tests/static-toolboxes.test.mjs +++ b/tests/static-toolboxes.test.mjs @@ -103,6 +103,7 @@ test("toolbox storage, cards and pages are wired", async () => { test("toolbox module registry and modules expose expected behavior", async () => { const source = await readFile("website/src/main.jsx", "utf8"); const moduleRegistry = await readFile("website/src/features/toolboxes/modules/index.jsx", "utf8"); + const moduleMetadataRegistry = await readFile("website/src/features/toolboxes/toolboxModuleRegistry.js", "utf8"); const notepadModule = await readFile("website/src/features/toolboxes/modules/NotepadModule.jsx", "utf8"); const combosModule = await readFile("website/src/features/toolboxes/modules/CombosModule.jsx", "utf8"); const calculatorModule = await readFile("website/src/features/toolboxes/modules/CalculatorModule.jsx", "utf8"); @@ -122,7 +123,9 @@ test("toolbox module registry and modules expose expected behavior", async () => const textImport = await readFile("website/src/features/toolboxes/modules/textImport.js", "utf8"); const imageViewer = await readFile("website/src/components/ImageViewer.jsx", "utf8"); - assert.match(moduleRegistry, /export const TOOLBOX_MODULES/); + assert.match(moduleMetadataRegistry, /export const TOOLBOX_MODULES/); + assert.match(moduleMetadataRegistry, /export const TOOLBOX_MODULE_DEFINITIONS/); + assert.match(moduleMetadataRegistry, /export function getDefaultModuleTitle/); assert.match(moduleRegistry, /export function AddToolControls/); assert.match(moduleRegistry, /export function ToolboxModules/); assert.match(moduleRegistry, /MODULE_COMPONENTS/); @@ -135,14 +138,14 @@ test("toolbox module registry and modules expose expected behavior", async () => assert.match(moduleRegistry, /CombosModule/); assert.match(moduleRegistry, /calculator:/); assert.match(moduleRegistry, /table:/); - assert.match(moduleRegistry, /table: \{ label: "Tableau", icon: "table", Component: TableModule, editable: true, scrollable: true \}/); + assert.match(moduleRegistry, /table: \{ \.\.\.TOOLBOX_MODULE_DEFINITIONS\.table, Component: TableModule \}/); assert.match(moduleRegistry, /timer:/); assert.match(moduleRegistry, /taskPlanner:/); assert.match(moduleRegistry, /equipmentPlanner:/); - assert.match(moduleRegistry, /Planificateur d'équipements/); + assert.match(moduleMetadataRegistry, /Planificateur d'équipements/); assert.match(moduleRegistry, /imageAnnotation:/); - assert.match(moduleRegistry, /Annotation d'images/); - assert.match(moduleRegistry, /notepad: \{ label: "Bloc notes", icon: "notepad", Component: NotepadModule, editable: true \}/); + assert.match(moduleMetadataRegistry, /Annotation d'images/); + assert.match(moduleRegistry, /notepad: \{ \.\.\.TOOLBOX_MODULE_DEFINITIONS\.notepad, Component: NotepadModule \}/); assert.match(moduleRegistry, /module-edit-button/); assert.match(moduleRegistry, /itemReorder\.startDrag/); assert.match(moduleRegistry, /onPointerDown/); @@ -152,7 +155,7 @@ test("toolbox module registry and modules expose expected behavior", async () => assert.match(moduleRegistry, /tool-add-card/); assert.match(moduleRegistry, /tool-quick-add-button/); assert.match(moduleRegistry, /tool-add-quick-toggle/); - assert.match(moduleRegistry, /scrollable: true/); + assert.match(moduleMetadataRegistry, /scrollable: true/); assert.match(moduleRegistry, /module-content/); assert.match(moduleRegistry, /module-scroll-button/); assert.match(moduleRegistry, /Icon name="dropdown"/); @@ -335,14 +338,14 @@ test("toolbox module registry and modules expose expected behavior", async () => assert.match(countersModule, /counter-drag-handle/); assert.match(countersModule, /TextExchangeActions/); assert.match(timerModule, /useGroupedReorder/); - assert.match(timerModule, /reorderEnabled=\{!data\.sortResults\}/); + assert.match(timerModule, /reorderEnabled={!data\.sortResults}/); assert.match(timerModule, /parentId=\{moduleId\}/); assert.match(timerModule, /timer-drag-handle/); assert.match(textImport, /export function parseColonImportLines/); assert.match(textImport, /export function exportModuleText/); assert.match(textImport, /export function importModuleText/); assert.match(textImport, /export function hasTextExchangeContent/); - assert.match(textImport, /line\.indexOf\(":\"\)/); + assert.match(textImport, /line\.indexOf\(":"\)/); assert.match(imageViewer, /image-viewer-media/); assert.match(imageViewer, /image-viewer-image-frame/); assert.match(imageViewer, /image-viewer-marker/); diff --git a/website/src/components/AppOverlays.jsx b/website/src/components/AppOverlays.jsx index 3094bec..d8d623b 100644 --- a/website/src/components/AppOverlays.jsx +++ b/website/src/components/AppOverlays.jsx @@ -1,5 +1,4 @@ // Rôle : regroupe les modales, notifications et viewers rendus au-dessus de l'application. -import React from "react"; import { Icon } from "./Icon.jsx"; import { ImageViewer } from "./ImageViewer.jsx"; import { ConfirmModal, CreateToolboxModal, LinkToolboxModal, NotificationToast } from "./ToolboxModals.jsx"; diff --git a/website/src/components/Shell.jsx b/website/src/components/Shell.jsx index d559aa0..d2ebe50 100644 --- a/website/src/components/Shell.jsx +++ b/website/src/components/Shell.jsx @@ -1,5 +1,4 @@ // Rôle : structure le layout global avec sidebar, topbar, navigation et contenu. -import React from "react"; import { Icon } from "./Icon.jsx"; import { ImportButton } from "./ImportButton.jsx"; diff --git a/website/src/components/ToastPositionSwitch.jsx b/website/src/components/ToastPositionSwitch.jsx index 81104d9..adfcdbf 100644 --- a/website/src/components/ToastPositionSwitch.jsx +++ b/website/src/components/ToastPositionSwitch.jsx @@ -1,5 +1,4 @@ // Rôle : affiche le switch global de position des notifications internes. -import React from "react"; import { Icon } from "./Icon.jsx"; export function ToastPositionSwitch({ position, labels, onChange }) { diff --git a/website/src/components/Tooltip.jsx b/website/src/components/Tooltip.jsx index 690a0b6..635d0fb 100644 --- a/website/src/components/Tooltip.jsx +++ b/website/src/components/Tooltip.jsx @@ -1,5 +1,5 @@ // Rôle : fournit une infobulle accessible et réutilisable pour les contrôles et données denses. -import { useEffect, useId, useRef, useState } from "react"; +import { useCallback, useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; export function Tooltip({ as: Component = "span", children, content, className = "", tooltipClassName = "", position = "top", ...props }) { @@ -8,7 +8,7 @@ export function Tooltip({ as: Component = "span", children, content, className = const [open, setOpen] = useState(false); const [style, setStyle] = useState({}); - function placeTooltip() { + const placeTooltip = useCallback(() => { const anchor = anchorRef.current; if (!anchor) return; const rect = anchor.getBoundingClientRect(); @@ -17,7 +17,7 @@ export function Tooltip({ as: Component = "span", children, content, className = return; } setStyle({ top: `${Math.max(8, rect.top - 8)}px`, left: `${Math.min(window.innerWidth - 8, Math.max(8, rect.left + rect.width / 2))}px` }); - } + }, [position]); useEffect(() => { if (!open) return undefined; @@ -28,7 +28,7 @@ export function Tooltip({ as: Component = "span", children, content, className = window.removeEventListener("resize", placeTooltip); window.removeEventListener("scroll", placeTooltip, true); }; - }, [open, position]); + }, [open, placeTooltip]); if (!content) return {children}; diff --git a/website/src/features/games/GameListsPage.jsx b/website/src/features/games/GameListsPage.jsx index e699220..9fd90f8 100644 --- a/website/src/features/games/GameListsPage.jsx +++ b/website/src/features/games/GameListsPage.jsx @@ -1,5 +1,4 @@ // Rôle : affiche les listes de jeu transformables en checklist. -import { Icon } from "../../components/Icon.jsx"; import { CopyChecklistItemsButton } from "./CopyChecklistItemsButton.jsx"; import { GameBreadcrumb } from "./GameBreadcrumb.jsx"; diff --git a/website/src/features/games/mhwilds/MhwildsLists.jsx b/website/src/features/games/mhwilds/MhwildsLists.jsx index e7109b0..5e9cb9d 100644 --- a/website/src/features/games/mhwilds/MhwildsLists.jsx +++ b/website/src/features/games/mhwilds/MhwildsLists.jsx @@ -1,14 +1,11 @@ // Rôle : affiche les listes Monster Hunter Wilds exportables en checklist. -import { useMemo, useState } from "react"; +import { useState } from "react"; import { GameListsPage } from "../GameListsPage.jsx"; export function MhwildsLists({ game, mhwilds, linkedToolboxId, actions }) { const lists = mhwilds.lists || []; const [selectedListId, setSelectedListId] = useState(""); - const selectedList = useMemo( - () => lists.find((list) => list.id === selectedListId) || lists[0] || null, - [lists, selectedListId] - ); + const selectedList = lists.find((list) => list.id === selectedListId) || lists[0] || null; return ( item.icon === icon)?.label || "Équipement"; -} - function getCharacteristicCategories(equipment) { const categories = equipment.characteristics.map((trait) => trait.category).filter(Boolean); return [ diff --git a/website/src/features/toolboxes/modules/TableModule.jsx b/website/src/features/toolboxes/modules/TableModule.jsx index 95af690..d6f3d37 100644 --- a/website/src/features/toolboxes/modules/TableModule.jsx +++ b/website/src/features/toolboxes/modules/TableModule.jsx @@ -396,12 +396,6 @@ export function TableModule({ toolboxId, moduleId, context, editing }) { }); } - function stopEditing(address) { - setEditingCell(""); - const parsed = parseCellAddress(address); - if (parsed) focusCell(parsed.rowIndex, parsed.columnIndex); - } - function insertFormulaText(text, options = {}) { const input = getActiveFormulaInput(); if (!input || !text) return false; diff --git a/website/src/features/toolboxes/modules/TimerModule.jsx b/website/src/features/toolboxes/modules/TimerModule.jsx index 8cb9e8e..363d2c6 100644 --- a/website/src/features/toolboxes/modules/TimerModule.jsx +++ b/website/src/features/toolboxes/modules/TimerModule.jsx @@ -1,5 +1,5 @@ // Rôle : fournit l'outil timer avec chronomètre, comptes à rebours et échange texte. -import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Icon } from "../../../components/Icon.jsx"; import { Tabs } from "../../../components/Tabs.jsx"; import { useDraftForm } from "../../../hooks/useDraftForm.js"; diff --git a/website/src/features/toolboxes/modules/index.jsx b/website/src/features/toolboxes/modules/index.jsx index e7de33f..752b101 100644 --- a/website/src/features/toolboxes/modules/index.jsx +++ b/website/src/features/toolboxes/modules/index.jsx @@ -6,6 +6,7 @@ import { Icon } from "../../../components/Icon.jsx"; import { useGroupedReorder } from "../../../hooks/useGroupedReorder.js"; import { useInlineEdit } from "../../../hooks/useInlineEdit.js"; import { lockBodyScroll } from "../../../utils/bodyScrollLock.js"; +import { TOOLBOX_MODULE_DEFINITIONS, TOOLBOX_MODULES } from "../toolboxModuleRegistry.js"; import { CalculatorModule } from "./CalculatorModule.jsx"; import { ChecklistModule } from "./ChecklistModule.jsx"; import { CombosModule } from "./CombosModule.jsx"; @@ -20,26 +21,23 @@ import { TaskPlannerModule } from "./TaskPlannerModule.jsx"; import { TimerModule } from "./TimerModule.jsx"; const MODULE_COMPONENTS = { - notepad: { label: "Bloc notes", icon: "notepad", Component: NotepadModule, editable: true }, - checklist: { label: "Checklist", icon: "checklist", Component: ChecklistModule, editable: true, scrollable: true }, - images: { label: "Images", icon: "picture", Component: ImagesModule, editable: true, scrollable: true }, - links: { label: "Liens", icon: "link", Component: LinksModule, editable: true, scrollable: true }, - counters: { label: "Compteurs", icon: "abacus", Component: CountersModule, editable: true, scrollable: true }, - combos: { label: "Combos", icon: "controller", Component: CombosModule, editable: true, scrollable: true }, - calculator: { label: "Calculateur", icon: "calculator", Component: CalculatorModule, editable: true }, - table: { label: "Tableau", icon: "table", Component: TableModule, editable: true, scrollable: true }, - timer: { label: "Timer", icon: "clock", Component: TimerModule, editable: true }, - taskPlanner: { label: "Planificateur de tâches", icon: "tasklist", Component: TaskPlannerModule, editable: true, scrollable: true }, - equipmentPlanner: { label: "Planificateur d'équipements", icon: "chest-armor", Component: EquipmentPlannerModule, editable: true, scrollable: true }, - imageAnnotation: { label: "Annotation d'images", icon: "map", Component: ImageAnnotationModule, editable: true } + notepad: { ...TOOLBOX_MODULE_DEFINITIONS.notepad, Component: NotepadModule }, + checklist: { ...TOOLBOX_MODULE_DEFINITIONS.checklist, Component: ChecklistModule }, + images: { ...TOOLBOX_MODULE_DEFINITIONS.images, Component: ImagesModule }, + links: { ...TOOLBOX_MODULE_DEFINITIONS.links, Component: LinksModule }, + counters: { ...TOOLBOX_MODULE_DEFINITIONS.counters, Component: CountersModule }, + combos: { ...TOOLBOX_MODULE_DEFINITIONS.combos, Component: CombosModule }, + calculator: { ...TOOLBOX_MODULE_DEFINITIONS.calculator, Component: CalculatorModule }, + table: { ...TOOLBOX_MODULE_DEFINITIONS.table, Component: TableModule }, + timer: { ...TOOLBOX_MODULE_DEFINITIONS.timer, Component: TimerModule }, + taskPlanner: { ...TOOLBOX_MODULE_DEFINITIONS.taskPlanner, Component: TaskPlannerModule }, + equipmentPlanner: { ...TOOLBOX_MODULE_DEFINITIONS.equipmentPlanner, Component: EquipmentPlannerModule }, + imageAnnotation: { ...TOOLBOX_MODULE_DEFINITIONS.imageAnnotation, Component: ImageAnnotationModule } }; const MODULE_COLUMN_IDS = ["left", "right"]; -export const TOOLBOX_MODULES = Object.fromEntries(Object.entries(MODULE_COMPONENTS).map(([type, module]) => [ - type, - { label: module.label, icon: module.icon } -])); +export { TOOLBOX_MODULES }; function getModuleMap(modules) { return new Map(modules.map((module) => [module.id, module])); @@ -191,13 +189,12 @@ export function AddToolControls({ onAdd }) { } export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUpdateModule, onDelete, onModuleOrderChange }) { - const moduleIdSignature = useMemo(() => toolbox.modules.map((module) => module.id).join("|"), [toolbox.modules]); - const twoColumnOrder = toolbox.moduleOrder?.two || [[], []]; - const orderedModules = useMemo(() => getModulesByIds(toolbox.modules, toolbox.moduleOrder?.one || []), [toolbox.modules, toolbox.moduleOrder?.one, moduleIdSignature]); + const twoColumnOrder = useMemo(() => toolbox.moduleOrder?.two || [[], []], [toolbox.moduleOrder?.two]); + const orderedModules = useMemo(() => getModulesByIds(toolbox.modules, toolbox.moduleOrder?.one || []), [toolbox.modules, toolbox.moduleOrder?.one]); const columns = useMemo(() => [ getModulesByIds(toolbox.modules, twoColumnOrder[0]), getModulesByIds(toolbox.modules, twoColumnOrder[1]) - ], [toolbox.modules, twoColumnOrder, moduleIdSignature]); + ], [toolbox.modules, twoColumnOrder]); const { itemReorder, getItemProps, diff --git a/website/src/features/toolboxes/modules/tableFormulaEngine.js b/website/src/features/toolboxes/modules/tableFormulaEngine.js index e3e98b1..271205c 100644 --- a/website/src/features/toolboxes/modules/tableFormulaEngine.js +++ b/website/src/features/toolboxes/modules/tableFormulaEngine.js @@ -60,7 +60,7 @@ function tokenize(expression) { continue; } - const numberMatch = expression.slice(index).match(/^(?:\d+(?:[\.,]\d*)?|[\.,]\d+)/); + const numberMatch = expression.slice(index).match(/^(?:\d+(?:[.,]\d*)?|[.,]\d+)/); if (numberMatch) { const value = Number(numberMatch[0].replace(",", ".")); if (!Number.isFinite(value)) throw new Error("invalid"); diff --git a/website/src/features/toolboxes/modules/textImport.js b/website/src/features/toolboxes/modules/textImport.js index 64966f1..2390d83 100644 --- a/website/src/features/toolboxes/modules/textImport.js +++ b/website/src/features/toolboxes/modules/textImport.js @@ -425,7 +425,7 @@ function exportComboInput(input) { } function parseComboInput(text) { - const match = String(text || "").trim().match(/^([a-zA-Z]+):([^\[]+?)(?:\[(hold|\d+s)\])?$/); + const match = String(text || "").trim().match(/^([a-zA-Z]+):([^[]+?)(?:\[(hold|\d+s)\])?$/); if (!match || !COMBO_INPUT_KINDS.has(match[1])) throw new Error(`Input combo invalide: ${text}`); const input = { kind: match[1], value: match[2].trim() }; if (!input.value) throw new Error(`Input combo invalide: ${text}`); @@ -481,7 +481,7 @@ function importCombosText(text, context) { const sequence = cleanLine.split("|").map((part) => part.trim()).filter((part, index) => index > 0 && !part.includes("=")).join(" | "); const comboDevice = lineMeta.device || device; if (!COMBO_DEVICES.has(comboDevice)) throw lineError(index, `périphérique combo invalide: ${comboDevice}`); - let inputs = []; + let inputs; try { inputs = sequence ? String(sequence).split(">").map((step) => step.split("+").map(parseComboInput)) : []; } catch (error) { diff --git a/website/src/features/toolboxes/storage/moduleDataCompactors.js b/website/src/features/toolboxes/storage/moduleDataCompactors.js new file mode 100644 index 0000000..0310dcf --- /dev/null +++ b/website/src/features/toolboxes/storage/moduleDataCompactors.js @@ -0,0 +1,173 @@ +// Rôle : fournit les compacteurs de données par type d'outil toolbox. +export function createModuleDataCompactors(deps) { + return { + notepad(value) { + const normalized = deps.normalizeNotepadData(value); + const compact = {}; + if (normalized.html && normalized.text) compact.html = normalized.html; + if (normalized.text) compact.text = normalized.text; + if (normalized.updatedAt) compact.updatedAt = normalized.updatedAt; + if (normalized.drawingMode === "permanent") compact.drawingMode = "permanent"; + if (normalized.drawingMode === "permanent" && normalized.drawings.strokes.length) compact.drawings = normalized.drawings; + return Object.keys(compact).length ? compact : null; + }, + checklist(value) { + const normalized = deps.normalizeChecklistData(value); + const sections = normalized.sections.map(deps.compactChecklistSectionForStorage).filter((section) => section.items.length); + if (!sections.length) return null; + const settings = { + ...(normalized.hideCompletedSections ? { hideCompletedSections: true } : {}), + ...(normalized.hideCompletedSectionsFully ? { hideCompletedSectionsFully: true } : {}) + }; + if (sections.length === 1 && !sections[0].title && typeof sections[0].hideWhenComplete !== "boolean") return { ...settings, items: sections[0].items }; + return { ...settings, sections }; + }, + images(value) { + const images = (Array.isArray(value?.images) ? value.images : []) + .filter((image) => image?.dataUrl) + .map((image) => { + const compact = { id: image.id || deps.uid("image"), dataUrl: image.dataUrl }; + if (image.label) compact.label = image.label; + return compact; + }); + return images.length ? { images } : null; + }, + imageAnnotation(value) { + const normalized = deps.normalizeImageAnnotationData(value); + if (!normalized.image) return null; + const compact = { + image: normalized.image, + markers: normalized.markers.map((marker) => { + const compact = { id: marker.id, x: marker.x, y: marker.y }; + if (marker.label) compact.label = marker.label; + return compact; + }) + }; + if (normalized.drawings.strokes.length) compact.drawings = normalized.drawings; + return compact; + }, + links(value) { + const links = deps.normalizeLinksData(value).links.map((link) => { + const compact = { id: link.id, url: link.url }; + if (link.title) compact.title = link.title; + return compact; + }); + return links.length ? { links } : null; + }, + counters(value) { + const counters = deps.normalizeCountersData(value).counters.map((counter) => ({ + id: counter.id, + label: counter.label, + value: counter.value + })); + return counters.length ? { counters } : null; + }, + combos(value) { + const normalized = deps.normalizeCombosData(value); + const compact = { + combos: normalized.combos.map((combo) => { + const compactCombo = { id: combo.id, name: combo.name, inputs: combo.inputs }; + if (combo.category) compactCombo.category = combo.category; + if (combo.device) compactCombo.device = combo.device; + return compactCombo; + }) + }; + if (normalized.device !== "playstation") compact.device = normalized.device; + if (normalized.collapsedCategories.length) compact.collapsedCategories = normalized.collapsedCategories; + if (normalized.categoryOrder.length) compact.categoryOrder = normalized.categoryOrder; + if (!compact.combos.length) delete compact.combos; + return compact.combos ? compact : null; + }, + calculator(value) { + const normalized = deps.normalizeCalculatorData(value); + const entries = normalized.entries.map((entry) => { + const compact = { id: entry.id, label: entry.label, value: entry.value }; + if (entry.parentId) compact.parentId = entry.parentId; + return compact; + }); + if (!entries.length && !normalized.scrollResults) return null; + return normalized.scrollResults ? { entries, scrollResults: true } : { entries }; + }, + table(value) { + const normalized = deps.normalizeTableData(value); + const compact = { cells: normalized.cells }; + if (normalized.rows !== 10) compact.rows = normalized.rows; + if (normalized.columns !== 6) compact.columns = normalized.columns; + if (Object.keys(normalized.rowLabels).length) compact.rowLabels = normalized.rowLabels; + if (Object.keys(normalized.columnLabels).length) compact.columnLabels = normalized.columnLabels; + return Object.keys(compact.cells).length || compact.rows || compact.columns || compact.rowLabels || compact.columnLabels ? compact : null; + }, + timer(value) { + const normalized = deps.normalizeTimerData(value); + const compact = {}; + if (normalized.activeTab !== "stopwatch") compact.activeTab = normalized.activeTab; + if (normalized.scrollResults) compact.scrollResults = true; + if (normalized.sortResults) compact.sortResults = true; + if (normalized.stopwatch.elapsedMs || normalized.stopwatch.startedAt || normalized.stopwatch.laps.length) { + compact.stopwatch = { + ...(normalized.stopwatch.elapsedMs ? { elapsedMs: normalized.stopwatch.elapsedMs } : {}), + ...(normalized.stopwatch.startedAt ? { startedAt: normalized.stopwatch.startedAt } : {}), + ...(normalized.stopwatch.laps.length ? { laps: normalized.stopwatch.laps } : {}) + }; + } + if (normalized.countdowns.length) { + compact.countdowns = normalized.countdowns.map((countdown) => { + const { alertMode, autoRefresh, startMode, startTime, ...compactCountdown } = countdown; + if (alertMode !== "off") compactCountdown.alertMode = alertMode; + if (autoRefresh) compactCountdown.autoRefresh = true; + if (startMode === "time" && startTime) { + compactCountdown.startMode = startMode; + compactCountdown.startTime = startTime; + } + return compactCountdown; + }); + } + return Object.keys(compact).length ? compact : null; + }, + taskPlanner(value) { + const normalized = deps.normalizeTaskPlannerData(value); + const compact = {}; + if (normalized.weeklyResetDay !== deps.defaultTaskPlannerWeeklyResetDay) compact.weeklyResetDay = normalized.weeklyResetDay; + if (normalized.resetTime !== deps.defaultTaskPlannerResetTime) compact.resetTime = normalized.resetTime; + if (normalized.lastResetAt) compact.lastResetAt = normalized.lastResetAt; + if (normalized.hideCompleted) compact.hideCompleted = true; + if (normalized.collapsedCategories.length) compact.collapsedCategories = normalized.collapsedCategories; + if (normalized.tasks.length) { + compact.tasks = normalized.tasks.map((task) => { + const compactTask = { id: task.id, title: task.title, type: task.type }; + if (task.description) compactTask.description = task.description; + if (task.category) compactTask.category = task.category; + if (task.checked) compactTask.checked = true; + if (task.checked && task.checkedAt) compactTask.checkedAt = task.checkedAt; + if (task.type === "daily" && task.dailyResetTime && task.dailyResetTime !== normalized.resetTime) compactTask.dailyResetTime = task.dailyResetTime; + if (task.type === "weekly" && task.weeklyResetDay !== undefined) compactTask.weeklyResetDay = task.weeklyResetDay; + return compactTask; + }); + } + if (normalized.categoryOrder.length) compact.categoryOrder = normalized.categoryOrder; + if (normalized.relations.length) { + compact.relations = normalized.relations.map((relation) => { + const compactRelation = { id: relation.id, fromTaskId: relation.fromTaskId, toTaskId: relation.toTaskId }; + if (relation.prerequisite) compactRelation.prerequisite = true; + return compactRelation; + }); + } + return Object.keys(compact).length ? compact : null; + }, + equipmentPlanner(value) { + const normalized = deps.normalizeEquipmentPlannerData(value); + if (!normalized.equipments.length) return null; + const compact = { + types: normalized.types.map((type) => { + const compactType = { id: type.id, title: type.title }; + if (type.icon !== "shield") compactType.icon = type.icon; + if (type.collapsed) compactType.collapsed = true; + return compactType; + }), + equipments: normalized.equipments.map(deps.compactEquipmentPlannerEquipmentForStorage) + }; + if (normalized.typeOrder.length) compact.typeOrder = normalized.typeOrder; + return compact; + } + }; +} diff --git a/website/src/features/toolboxes/storage/toolboxStorage.js b/website/src/features/toolboxes/storage/toolboxStorage.js index 681648b..2d6fa8d 100644 --- a/website/src/features/toolboxes/storage/toolboxStorage.js +++ b/website/src/features/toolboxes/storage/toolboxStorage.js @@ -1,4 +1,7 @@ // Rôle : normalise, compacte et sérialise les données toolbox persistées. +import { getDefaultModuleTitle } from "../toolboxModuleRegistry.js"; +import { createModuleDataCompactors } from "./moduleDataCompactors.js"; + const ID_PREFIXES = { tbx: "t", mod: "m", @@ -71,21 +74,6 @@ const TOOLBOX_ICON_FILES = [ "tower.png", "wheel.png" ]; -const DEFAULT_MODULE_TITLES = { - notepad: "Bloc notes", - checklist: "Checklist", - images: "Images", - links: "Liens", - counters: "Compteurs", - combos: "Combos", - calculator: "Calculateur", - table: "Tableau", - timer: "Timer", - taskPlanner: "Planificateur de tâches", - equipmentPlanner: "Planificateur d'équipements", - imageAnnotation: "Annotation d'images" -}; - export const TOOLBOX_ICONS = TOOLBOX_ICON_FILES.map((file) => `${TOOLBOX_ICON_BASE}${file}`); export const DEFAULT_TOOLBOX_ICON = `${TOOLBOX_ICON_BASE}toolbox.png`; @@ -102,10 +90,6 @@ export function uid(prefix) { return `${ID_PREFIXES[prefix] || "x"}${randomToken()}`; } -function getDefaultModuleTitle(type) { - return DEFAULT_MODULE_TITLES[type] || "Outil"; -} - export function normalizeToolboxIcon(icon) { const value = String(icon || "").trim(); const file = value.replace(TOOLBOX_ICON_BASE, "").split("/").pop(); @@ -859,7 +843,7 @@ function normalizeEquipmentPlannerEquipment(equipment, typeIds) { }) .filter(Boolean) .filter((link, index, links) => links.findIndex((item) => item.pairKey === link.pairKey) === index) - .map(({ pairKey, ...link }) => link); + .map(({ pairKey: _pairKey, ...link }) => link); const categories = [ ...characteristics.map((trait) => trait.category), ...socketItems.flatMap((socketItem) => socketItem.bonuses.map((bonus) => bonus.category)) @@ -999,7 +983,7 @@ export function summarizeEquipmentPlannerData(data) { }); const numericTotals = [...totals.values()] - .map(({ iconSources, sourceKinds, color, sourceKind, ...total }) => ({ + .map(({ iconSources: _iconSources, sourceKinds: _sourceKinds, color, sourceKind, ...total }) => ({ ...total, ...(color ? { color } : {}), sourceKind @@ -1122,195 +1106,28 @@ function compactEquipmentPlannerEquipmentForStorage(equipment) { return compact; } +const MODULE_DATA_COMPACTORS = createModuleDataCompactors({ + uid, + normalizeNotepadData, + normalizeChecklistData, + normalizeLinksData, + normalizeCountersData, + normalizeCombosData, + normalizeCalculatorData, + normalizeTableData, + normalizeTimerData, + normalizeTaskPlannerData, + normalizeEquipmentPlannerData, + normalizeImageAnnotationData, + compactChecklistSectionForStorage, + compactEquipmentPlannerEquipmentForStorage, + defaultTaskPlannerWeeklyResetDay: DEFAULT_TASK_PLANNER_WEEKLY_RESET_DAY, + defaultTaskPlannerResetTime: DEFAULT_TASK_PLANNER_RESET_TIME +}); + export function compactModuleDataForStorage(type, value) { - if (type === "notepad") { - const normalized = normalizeNotepadData(value); - const compact = {}; - if (normalized.html && normalized.text) compact.html = normalized.html; - if (normalized.text) compact.text = normalized.text; - if (normalized.updatedAt) compact.updatedAt = normalized.updatedAt; - if (normalized.drawingMode === "permanent") compact.drawingMode = "permanent"; - if (normalized.drawingMode === "permanent" && normalized.drawings.strokes.length) compact.drawings = normalized.drawings; - return Object.keys(compact).length ? compact : null; - } - if (type === "checklist") { - const normalized = normalizeChecklistData(value); - const sections = normalized.sections.map(compactChecklistSectionForStorage).filter((section) => section.items.length); - if (!sections.length) return null; - const settings = { - ...(normalized.hideCompletedSections ? { hideCompletedSections: true } : {}), - ...(normalized.hideCompletedSectionsFully ? { hideCompletedSectionsFully: true } : {}) - }; - if (sections.length === 1 && !sections[0].title && typeof sections[0].hideWhenComplete !== "boolean") return { ...settings, items: sections[0].items }; - return { ...settings, sections }; - } - if (type === "images") { - const images = (Array.isArray(value?.images) ? value.images : []) - .filter((image) => image?.dataUrl) - .map((image) => { - const compact = { id: image.id || uid("image"), dataUrl: image.dataUrl }; - if (image.label) compact.label = image.label; - return compact; - }); - return images.length ? { images } : null; - } - if (type === "imageAnnotation") { - const normalized = normalizeImageAnnotationData(value); - if (!normalized.image) return null; - const compact = { - image: normalized.image, - markers: normalized.markers.map((marker) => { - const compact = { id: marker.id, x: marker.x, y: marker.y }; - if (marker.label) compact.label = marker.label; - return compact; - }) - }; - if (normalized.drawings.strokes.length) compact.drawings = normalized.drawings; - return compact; - } - if (type === "links") { - const links = normalizeLinksData(value).links.map((link) => { - const compact = { - id: link.id, - url: link.url - }; - if (link.title) compact.title = link.title; - return compact; - }); - return links.length ? { links } : null; - } - if (type === "counters") { - const counters = normalizeCountersData(value).counters.map((counter) => ({ - id: counter.id, - label: counter.label, - value: counter.value - })); - return counters.length ? { counters } : null; - } - if (type === "combos") { - const normalized = normalizeCombosData(value); - const compact = { - combos: normalized.combos.map((combo) => { - const compactCombo = { - id: combo.id, - name: combo.name, - inputs: combo.inputs - }; - if (combo.category) compactCombo.category = combo.category; - if (combo.device) compactCombo.device = combo.device; - return compactCombo; - }) - }; - if (normalized.device !== "playstation") compact.device = normalized.device; - if (normalized.collapsedCategories.length) compact.collapsedCategories = normalized.collapsedCategories; - if (normalized.categoryOrder.length) compact.categoryOrder = normalized.categoryOrder; - if (!compact.combos.length) delete compact.combos; - return compact.combos ? compact : null; - } - if (type === "calculator") { - const normalized = normalizeCalculatorData(value); - const entries = normalized.entries.map((entry) => { - const compact = { - id: entry.id, - label: entry.label, - value: entry.value - }; - if (entry.parentId) compact.parentId = entry.parentId; - return compact; - }); - if (!entries.length && !normalized.scrollResults) return null; - return normalized.scrollResults ? { entries, scrollResults: true } : { entries }; - } - if (type === "table") { - const normalized = normalizeTableData(value); - const compact = { cells: normalized.cells }; - if (normalized.rows !== 10) compact.rows = normalized.rows; - if (normalized.columns !== 6) compact.columns = normalized.columns; - if (Object.keys(normalized.rowLabels).length) compact.rowLabels = normalized.rowLabels; - if (Object.keys(normalized.columnLabels).length) compact.columnLabels = normalized.columnLabels; - return Object.keys(compact.cells).length || compact.rows || compact.columns || compact.rowLabels || compact.columnLabels ? compact : null; - } - if (type === "timer") { - const normalized = normalizeTimerData(value); - const compact = {}; - if (normalized.activeTab !== "stopwatch") compact.activeTab = normalized.activeTab; - if (normalized.scrollResults) compact.scrollResults = true; - if (normalized.sortResults) compact.sortResults = true; - if (normalized.stopwatch.elapsedMs || normalized.stopwatch.startedAt || normalized.stopwatch.laps.length) { - compact.stopwatch = { - ...(normalized.stopwatch.elapsedMs ? { elapsedMs: normalized.stopwatch.elapsedMs } : {}), - ...(normalized.stopwatch.startedAt ? { startedAt: normalized.stopwatch.startedAt } : {}), - ...(normalized.stopwatch.laps.length ? { laps: normalized.stopwatch.laps } : {}) - }; - } - if (normalized.countdowns.length) { - compact.countdowns = normalized.countdowns.map((countdown) => { - const { alertMode, autoRefresh, startMode, startTime, ...compactCountdown } = countdown; - if (alertMode !== "off") compactCountdown.alertMode = alertMode; - if (autoRefresh) compactCountdown.autoRefresh = true; - if (startMode === "time" && startTime) { - compactCountdown.startMode = startMode; - compactCountdown.startTime = startTime; - } - return compactCountdown; - }); - } - return Object.keys(compact).length ? compact : null; - } - if (type === "taskPlanner") { - const normalized = normalizeTaskPlannerData(value); - const compact = {}; - if (normalized.weeklyResetDay !== DEFAULT_TASK_PLANNER_WEEKLY_RESET_DAY) compact.weeklyResetDay = normalized.weeklyResetDay; - if (normalized.resetTime !== DEFAULT_TASK_PLANNER_RESET_TIME) compact.resetTime = normalized.resetTime; - if (normalized.lastResetAt) compact.lastResetAt = normalized.lastResetAt; - if (normalized.hideCompleted) compact.hideCompleted = true; - if (normalized.collapsedCategories.length) compact.collapsedCategories = normalized.collapsedCategories; - if (normalized.tasks.length) { - compact.tasks = normalized.tasks.map((task) => { - const compactTask = { - id: task.id, - title: task.title, - type: task.type - }; - if (task.description) compactTask.description = task.description; - if (task.category) compactTask.category = task.category; - if (task.checked) compactTask.checked = true; - if (task.checked && task.checkedAt) compactTask.checkedAt = task.checkedAt; - if (task.type === "daily" && task.dailyResetTime && task.dailyResetTime !== normalized.resetTime) compactTask.dailyResetTime = task.dailyResetTime; - if (task.type === "weekly" && task.weeklyResetDay !== undefined) compactTask.weeklyResetDay = task.weeklyResetDay; - return compactTask; - }); - } - if (normalized.categoryOrder.length) compact.categoryOrder = normalized.categoryOrder; - if (normalized.relations.length) { - compact.relations = normalized.relations.map((relation) => { - const compactRelation = { - id: relation.id, - fromTaskId: relation.fromTaskId, - toTaskId: relation.toTaskId - }; - if (relation.prerequisite) compactRelation.prerequisite = true; - return compactRelation; - }); - } - return Object.keys(compact).length ? compact : null; - } - if (type === "equipmentPlanner") { - const normalized = normalizeEquipmentPlannerData(value); - if (!normalized.equipments.length) return null; - const compact = { - types: normalized.types.map((type) => { - const compactType = { id: type.id, title: type.title }; - if (type.icon !== "shield") compactType.icon = type.icon; - if (type.collapsed) compactType.collapsed = true; - return compactType; - }), - equipments: normalized.equipments.map(compactEquipmentPlannerEquipmentForStorage) - }; - if (normalized.typeOrder.length) compact.typeOrder = normalized.typeOrder; - return compact; - } - return value; + const compactor = MODULE_DATA_COMPACTORS[type]; + return compactor ? compactor(value) : value; } export function prepareModuleDataForStorage(toolboxes, toolboxId, moduleId, value, moduleType = "") { diff --git a/website/src/features/toolboxes/storage/useIndexedToolboxes.js b/website/src/features/toolboxes/storage/useIndexedToolboxes.js index b64fa8d..4e11837 100644 --- a/website/src/features/toolboxes/storage/useIndexedToolboxes.js +++ b/website/src/features/toolboxes/storage/useIndexedToolboxes.js @@ -65,7 +65,7 @@ export function useIndexedToolboxes(onError) { } loadStore(); return () => { cancelled = true; }; - }, []); + }, [onError]); function persistToolboxes(nextToolboxes) { const normalized = compactToolboxesForStorage(nextToolboxes).map(normalizeToolbox).filter(Boolean); diff --git a/website/src/features/toolboxes/toolboxModuleRegistry.js b/website/src/features/toolboxes/toolboxModuleRegistry.js new file mode 100644 index 0000000..420c57b --- /dev/null +++ b/website/src/features/toolboxes/toolboxModuleRegistry.js @@ -0,0 +1,128 @@ +// Rôle : centralise les métadonnées légères des outils toolbox sans importer leurs composants. +export const TOOLBOX_MODULE_DEFINITIONS = { + notepad: { + label: "Bloc notes", + defaultTitle: "Bloc notes", + mode: "Texte riche", + icon: "notepad", + editable: true, + libraryCategory: "notesTracking" + }, + checklist: { + label: "Checklist", + defaultTitle: "Checklist", + mode: "Catégories + sans catégorie", + icon: "checklist", + editable: true, + scrollable: true, + libraryCategory: "notesTracking" + }, + images: { + label: "Images", + defaultTitle: "Images", + mode: "Média", + icon: "picture", + editable: true, + scrollable: true, + libraryCategory: "references" + }, + links: { + label: "Liens", + defaultTitle: "Liens", + mode: "Liste simple", + icon: "link", + editable: true, + scrollable: true, + libraryCategory: "references" + }, + counters: { + label: "Compteurs", + defaultTitle: "Compteurs", + mode: "Valeurs", + icon: "abacus", + editable: true, + scrollable: true, + libraryCategory: "notesTracking" + }, + combos: { + label: "Combos", + defaultTitle: "Combos", + mode: "Catégories", + icon: "controller", + editable: true, + scrollable: true, + libraryCategory: "buildsCommands" + }, + calculator: { + label: "Calculateur", + defaultTitle: "Calculateur", + mode: "Arborescence", + icon: "calculator", + editable: true, + libraryCategory: "calculationData" + }, + table: { + label: "Tableau", + defaultTitle: "Tableau", + mode: "Grille + formules", + icon: "table", + editable: true, + scrollable: true, + libraryCategory: "calculationData" + }, + timer: { + label: "Timer", + defaultTitle: "Timer", + mode: "Chrono + comptes à rebours", + icon: "clock", + editable: true, + libraryCategory: "timeRoutines" + }, + taskPlanner: { + label: "Planificateur de tâches", + defaultTitle: "Planificateur de tâches", + mode: "Catégories + parent/enfant", + icon: "tasklist", + editable: true, + scrollable: true, + libraryCategory: "timeRoutines" + }, + equipmentPlanner: { + label: "Planificateur d'équipements", + defaultTitle: "Planificateur d'équipements", + mode: "Build + sertissages", + icon: "chest-armor", + editable: true, + scrollable: true, + libraryCategory: "buildsCommands" + }, + imageAnnotation: { + label: "Annotation d'images", + defaultTitle: "Annotation d'images", + mode: "Image + marqueurs", + icon: "map", + editable: true, + libraryCategory: "references" + } +}; + +export const TOOLBOX_MODULES = Object.fromEntries(Object.entries(TOOLBOX_MODULE_DEFINITIONS).map(([type, definition]) => [ + type, + { label: definition.label, icon: definition.icon } +])); + +export const LIBRARY_CATEGORY_DEFINITIONS = [ + { key: "notesTracking", types: ["notepad", "checklist", "counters"] }, + { key: "references", types: ["images", "imageAnnotation", "links"] }, + { key: "calculationData", types: ["calculator", "table"] }, + { key: "timeRoutines", types: ["timer", "taskPlanner"] }, + { key: "buildsCommands", types: ["combos", "equipmentPlanner"] } +]; + +export function getToolboxModuleDefinition(type) { + return TOOLBOX_MODULE_DEFINITIONS[type] || TOOLBOX_MODULE_DEFINITIONS.notepad; +} + +export function getDefaultModuleTitle(type) { + return getToolboxModuleDefinition(type).defaultTitle || "Outil"; +} diff --git a/website/src/main.jsx b/website/src/main.jsx index 4c0239b..cde9368 100644 --- a/website/src/main.jsx +++ b/website/src/main.jsx @@ -1,10 +1,9 @@ // Rôle : point d'entrée React, assemble données, routes, shell et overlays. -import React, { useCallback, useEffect, useState } from "react"; +import { lazy, Suspense, useCallback, useEffect, useState } from "react"; import { createRoot } from "react-dom/client"; import "./styles/main.scss"; import { AppOverlays } from "./components/AppOverlays.jsx"; import { Shell } from "./components/Shell.jsx"; -import { ToolboxDrawer } from "./features/toolboxes/ToolboxPages.jsx"; import { useIndexedToolboxes } from "./features/toolboxes/storage/useIndexedToolboxes.js"; import { useToolboxActions } from "./features/toolboxes/useToolboxActions.js"; import { useAppData } from "./hooks/useAppData.js"; @@ -14,6 +13,8 @@ import { RouteContent } from "./router/RouteContent.jsx"; import { useHashRoute } from "./router/hashRouter.js"; import { normalizeTimerData } from "./features/toolboxes/storage/toolboxStorage.js"; +const ToolboxDrawer = lazy(() => import("./features/toolboxes/ToolboxPages.jsx").then((module) => ({ default: module.ToolboxDrawer }))); + function App() { const route = useHashRoute(); const { siteContent, siteContentError, games, gamesError, mhwilds, diablo4 } = useAppData(route); @@ -25,7 +26,8 @@ function App() { const [image, setImage] = useState(null); const [notifications, setNotifications] = useState([]); const [storageError, setStorageError] = useState(""); - const store = useIndexedToolboxes((message) => setStorageError(message)); + const handleStorageError = useCallback((message) => setStorageError(message), []); + const store = useIndexedToolboxes(handleStorageError); const notify = useCallback((message) => { setNotifications((current) => [ @@ -113,19 +115,21 @@ function App() { addImageFiles={actions.addImageFiles} /> {drawerGameId && ( - + + + )} {content.sectionsTitle}
- {content.sections.map((section, index) => ( + {content.sections.map((section) => (

- +

Chargement de l'outil...

}> + + diff --git a/website/src/router/RouteContent.jsx b/website/src/router/RouteContent.jsx index 8d8f0af..0316a6b 100644 --- a/website/src/router/RouteContent.jsx +++ b/website/src/router/RouteContent.jsx @@ -1,22 +1,28 @@ // Rôle : choisit la page à rendre selon la route active. -import React from "react"; -import { GameRoute } from "../features/games/GameRoute.jsx"; -import { GamesPage } from "../features/games/GamesPage.jsx"; -import { ToolboxesPage, ToolboxPage } from "../features/toolboxes/ToolboxPages.jsx"; +import { lazy, Suspense } from "react"; import { AboutPage } from "../pages/AboutPage.jsx"; import { HomePage } from "../pages/HomePage.jsx"; -import { LibraryPage } from "../pages/LibraryPage.jsx"; import { navigate } from "./hashRouter.js"; +const GameRoute = lazy(() => import("../features/games/GameRoute.jsx").then((module) => ({ default: module.GameRoute }))); +const GamesPage = lazy(() => import("../features/games/GamesPage.jsx").then((module) => ({ default: module.GamesPage }))); +const LibraryPage = lazy(() => import("../pages/LibraryPage.jsx").then((module) => ({ default: module.LibraryPage }))); +const ToolboxPage = lazy(() => import("../features/toolboxes/ToolboxPages.jsx").then((module) => ({ default: module.ToolboxPage }))); +const ToolboxesPage = lazy(() => import("../features/toolboxes/ToolboxPages.jsx").then((module) => ({ default: module.ToolboxesPage }))); + +function RouteLoader() { + return

Chargement...

; +} + export function RouteContent(props) { const { route } = props; if (route === "/") return ; - if (route === "/library") return ; if (route === "/about") return ; - if (route === "/toolboxes") return ; - if (route.startsWith("/toolbox/")) return ; - if (route === "/games") return ; - if (route.startsWith("/games/")) return ; + if (route === "/library") return }>; + if (route === "/toolboxes") return }>; + if (route.startsWith("/toolbox/")) return }>; + if (route === "/games") return }>; + if (route.startsWith("/games/")) return }>; navigate("/"); return null; } diff --git a/website/src/styles/_toolboxes.scss b/website/src/styles/_toolboxes.scss index bcc9776..d0eee22 100644 --- a/website/src/styles/_toolboxes.scss +++ b/website/src/styles/_toolboxes.scss @@ -1,6396 +1,2 @@ -// Rôle : regroupe les styles des toolboxes, outils et panneau latéral. -@use "mixins"; - -.toolbox-head { - position: relative; - z-index: 30; - overflow: visible; - padding: var(--space-6); - border: 1px solid var(--color-border); - border-radius: var(--radius-xl); - background: rgba(16, 20, 38, 0.76); - backdrop-filter: blur(10px); -} - -.toolbox-head.page-hero { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: end; - overflow: visible; - border-color: transparent; - background: - var(--gradient-nebula), - radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%), - linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96)); - box-shadow: var(--shadow-md); - backdrop-filter: none; -} - -.toolbox-head.page-hero > * { - z-index: 4; -} - -.toolbox-head-embedded.page-hero { - min-height: 132px; - padding: var(--space-5); - background: - var(--gradient-nebula), - radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.08), transparent 30%), - linear-gradient(135deg, rgba(16, 20, 38, 0.94), rgba(5, 7, 17, 0.94)); - box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22); -} - -.toolbox-head-embedded.page-hero::before { - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.38), transparent 24%), - linear-gradient(135deg, rgba(246, 196, 83, 0.28), rgba(139, 92, 246, 0.18) 52%, rgba(196, 181, 253, 0.24)); -} - -.toolbox-head-embedded.page-hero::after { - background: - linear-gradient(135deg, rgba(5, 7, 17, 0.08), rgba(5, 7, 17, 0.42)), - radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.12), transparent 32%); -} - -.toolbox-head-embedded h1 { - margin-bottom: 0; - font-size: clamp(1.55rem, 3vw, 2.2rem); -} - -.toolbox-title { - width: fit-content; - max-width: 100%; - padding: 3px 6px; - border-radius: var(--radius-sm); - cursor: text; -} - -.toolbox-title-row { - display: flex; - align-items: center; - gap: var(--space-3); -} - -.toolbox-hero-link { - display: inline-flex; - align-items: center; - gap: var(--space-2); - width: fit-content; - margin-top: var(--space-3); -} - -.toolbox-hero-link .ui-icon { - width: 18px; - height: 18px; -} - -.toolbox-icon-picker { - position: relative; - z-index: 70; - flex: 0 0 auto; -} - -.toolbox-icon-picker-button, -.toolbox-game-icon { - width: 100px; - min-width: 100px; - min-height: 100px; - border-color: var(--color-primary-border); - background: - radial-gradient(circle at 50% 35%, rgba(246, 196, 83, 0.18), transparent 44%), - rgba(21, 26, 48, 0.86); -} - -.toolbox-icon-picker-button { - padding: 0; -} - -.toolbox-game-icon { - display: grid; - place-items: center; - overflow: hidden; - border: 1px solid var(--color-primary-border); - border-radius: var(--radius-md); -} - -.toolbox-icon-picker-button img, -.toolbox-game-icon img { - width: 72px; - height: 72px; - object-fit: contain; -} - -.toolbox-game-icon img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.toolbox-icon-picker-menu { - position: absolute; - top: calc(100% + 8px); - left: 0; - z-index: 300; - display: grid; - grid-template-columns: repeat(5, 42px); - gap: 7px; - width: max-content; - max-width: min(260px, calc(100vw - 48px)); - padding: 9px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(10, 13, 28, 0.99); - box-shadow: var(--shadow-lg); -} - -.toolbox-icon-picker-menu button { - width: 42px; - min-width: 42px; - min-height: 42px; - padding: 0; - border-color: var(--color-border); - background: rgba(21, 26, 48, 0.88); -} - -.toolbox-icon-picker-menu button:hover { - border-color: rgba(196, 181, 253, 0.32); - background: - linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box, - linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box; - box-shadow: - 0 0 12px rgba(139, 92, 246, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.toolbox-icon-picker-menu button.active { - @include mixins.temporary-toggle-active; -} - -.toolbox-icon-picker-menu img { - width: 26px; - height: 26px; - object-fit: contain; -} - -.toolbox-title:focus { - background: rgba(7, 10, 24, 0.72); - outline: 1px solid rgba(246, 196, 83, 0.72); - outline-offset: 3px; -} - -.tool-add-controls { - position: relative; - z-index: 280; - display: inline-flex; - justify-content: flex-end; -} - -.tool-add-modal-button { - min-height: 40px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.tool-add-quick-toggle { - width: 42px; - min-width: 42px; - min-height: 40px; - justify-content: center; - padding: 0; - border-left: 1px solid rgba(255, 255, 255, 0.18); - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.tool-add-quick-toggle .ui-icon { - width: 18px; - height: 18px; - transition: transform 140ms ease; -} - -.tool-add-quick-toggle.active .ui-icon { - transform: rotate(180deg); -} - -.tool-quick-add { - position: absolute; - top: calc(100% + 8px); - right: 0; - z-index: 300; - display: grid; - grid-template-columns: repeat(5, 40px); - justify-content: flex-end; - width: max-content; - max-width: calc(100vw - 48px); - gap: 6px; - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(10, 13, 28, 0.99); - box-shadow: var(--shadow-lg); - opacity: 0; - pointer-events: none; - transform: translateY(-4px); - transition: - opacity 140ms ease, - transform 140ms ease; -} - -.tool-quick-add.is-open { - opacity: 1; - pointer-events: auto; - transform: translateY(0); -} - -.tool-quick-add::before { - content: ""; - position: absolute; - right: 18px; - bottom: 100%; - border-right: 7px solid transparent; - border-bottom: 7px solid rgba(10, 13, 28, 0.99); - border-left: 7px solid transparent; -} - -.tool-quick-add::after { - content: ""; - position: absolute; - right: 0; - bottom: 100%; - width: 100%; - height: 8px; -} - -.tool-quick-add-button, -.tool-add-card { - color: var(--color-text-primary); -} - -.tool-quick-add-button { - background: rgba(21, 26, 48, 0.72); -} - -.modules-toolbar { - display: flex; - justify-content: flex-end; - margin-top: var(--space-4); -} - -.toolbox-actions-row { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - gap: var(--space-4); -} - -.toolbox-actions-row > div { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.toolbox-actions-row > div:last-child { - justify-content: flex-end; -} - -.toolbox-preferences-row { - position: relative; - isolation: isolate; - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - width: 100%; - max-width: 520px; - align-items: center; - justify-self: end; - gap: var(--space-4); - margin-top: var(--space-4); - padding: var(--space-4); - overflow: hidden; - border: 1px solid transparent; - border-radius: var(--radius-lg); - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 34%), - linear-gradient(135deg, rgba(16, 20, 38, 0.84), rgba(5, 7, 17, 0.76)); - color: var(--color-text-muted); - font-size: var(--font-size-sm); - font-weight: 800; - box-shadow: var(--shadow-sm); -} - -.toolbox-preferences-row::before { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - padding: 1px; - border-radius: inherit; - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.38), transparent 30%), - linear-gradient(135deg, rgba(246, 196, 83, 0.26), rgba(139, 92, 246, 0.16), rgba(56, 189, 248, 0.18)); - @include mixins.border-mask; -} - -.toolbox-preferences-row .eyebrow { - margin-bottom: 4px; - font-size: 0.68rem; -} - -.toolbox-preferences-row strong { - display: block; - color: var(--color-text-primary); - font-size: var(--font-size-sm); -} - -.toolbox-preferences-row + .cards { - margin-top: 0; -} - -.toast-position-switch { - position: relative; - display: inline-grid; - grid-template-columns: repeat(2, 32px); - width: 74px; - min-height: 38px; - align-items: center; - justify-items: center; - gap: 0; - padding: 3px 4px; - border-color: rgba(165, 180, 252, 0.12); - border-radius: var(--radius-pill); - background: rgba(7, 10, 24, 0.32); - color: var(--color-text-secondary); -} - -.toast-position-switch::before { - content: ""; - position: absolute; - top: 3px; - bottom: 3px; - left: 4px; - width: 30px; - border: 1px solid rgba(246, 196, 83, 0.3); - border-radius: 50%; - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)), - rgba(21, 26, 48, 0.58); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); - transition: transform var(--duration-fast) var(--ease-standard); -} - -.toast-position-switch[data-position="right"]::before { - transform: translateX(32px); -} - -.toast-position-switch span { - position: relative; - z-index: 1; - display: inline-grid; - width: 30px; - height: 30px; - place-items: center; - justify-self: center; - align-self: center; - border-radius: 50%; -} - -.toast-position-switch .ui-icon { - width: 16px; - height: 16px; -} - -.toast-position-switch:hover { - border-color: rgba(196, 181, 253, 0.24); - color: var(--color-text-primary); -} - -.modules { - align-items: start; -} - -.modules[data-layout-cols="1"] { - grid-template-columns: 1fr; -} - -.modules[data-layout-cols="2"] { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.module-column { - display: grid; - gap: var(--space-3); - align-content: start; - min-width: 0; -} - -.module-column.is-empty-warning { - min-height: 132px; - border: 1px dashed rgba(246, 196, 83, 0.26); - border-radius: var(--radius-md); - background: rgba(246, 196, 83, 0.04); -} - -.module-column-boundary-drop-zone { - position: relative; - min-height: 10px; - border-radius: var(--radius-pill); -} - -.module-column-boundary-drop-zone.is-drop-target::before { - position: absolute; - top: 50%; - right: 0; - left: 0; - height: 3px; - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.9); - box-shadow: 0 0 12px rgba(246, 196, 83, 0.24); - content: ""; - pointer-events: none; - transform: translateY(-50%); -} - -.module { - --reorder-drop-shadow: var(--shadow-sm); - - position: relative; - contain: paint; - overflow: hidden; - border-color: transparent; - background: rgba(16, 20, 38, 0.42); - box-shadow: var(--shadow-sm); - - @include mixins.gold-panel-frame(true); -} - -.module > * { - position: relative; - z-index: 1; -} - -.module:hover { - transform: none; - border-color: transparent; - background: rgba(16, 20, 38, 0.42); - box-shadow: - var(--shadow-sm), - 0 0 14px rgba(139, 92, 246, 0.14), - 0 0 24px rgba(196, 181, 253, 0.08); -} - -.module:hover::before { - background: linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(196, 181, 253, 0.28)); -} - -.module:hover::after { - background: - radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(196, 181, 253, 0.5) 0 18px, transparent 27px), - linear-gradient(90deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%), - linear-gradient(180deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%); -} - -[data-reorder-target="item"].is-dragging, -[data-reorder-target="group"].is-dragging { - cursor: grabbing; - opacity: 0.58; - transform: scale(0.99); -} - -[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target, -[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target { - position: relative; - border-color: rgba(246, 196, 83, 0.72); - box-shadow: var(--reorder-drop-shadow, none); -} - -[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target::before, -[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target::before { - position: absolute; - z-index: 3; - top: 0; - right: 0; - left: 0; - height: 3px; - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.9); - box-shadow: 0 0 12px rgba(246, 196, 83, 0.24); - content: ""; - pointer-events: none; -} - -[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after, -[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after { - box-shadow: var(--reorder-drop-shadow, none); -} - -[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after::before, -[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after::before { - top: auto; - bottom: 0; -} - -[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target, -[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target { - border-color: rgba(246, 196, 83, 0.72); - box-shadow: var(--reorder-drop-shadow, none), inset 3px 0 0 rgba(246, 196, 83, 0.86); -} - -[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target.drop-after, -[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target.drop-after { - box-shadow: var(--reorder-drop-shadow, none), inset -3px 0 0 rgba(246, 196, 83, 0.86); -} - -.module[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target { - border-color: transparent; - box-shadow: - var(--shadow-sm), - inset 0 3px 0 rgba(246, 196, 83, 0.86), - 0 0 14px rgba(246, 196, 83, 0.12); -} - -.module[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after { - box-shadow: - var(--shadow-sm), - inset 0 -3px 0 rgba(246, 196, 83, 0.86), - 0 0 14px rgba(246, 196, 83, 0.12); -} - -.module[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target::before { - display: none; -} - -.module header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-3); - padding: var(--space-4); - border-bottom: 1px solid var(--color-border); -} - -.module header > div { - display: flex; - align-items: center; - gap: 10px; -} - -.module header h2 { - margin: 0; - font-size: 17px; -} - -.module-content { - min-width: 0; -} - -.module-content.is-scrollable { - max-height: 450px; - overflow-y: auto; - overscroll-behavior: contain; -} - -.layout-switch { - display: inline-grid; - grid-template-columns: repeat(2, 38px); - gap: 4px; - padding: 4px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.48); -} - -.layout-switch button { - min-height: 34px; - align-items: center; - justify-content: center; - padding: 0; - border-color: transparent; - background: transparent; - color: var(--color-text-muted); - font-weight: 900; -} - -.layout-switch button:hover { - border-color: rgba(196, 181, 253, 0.22); - background: rgba(21, 26, 48, 0.5); - color: var(--color-text-primary); - box-shadow: none; -} - -.layout-switch button.active { - @include mixins.temporary-toggle-active; -} - -.module-drag-handle { - display: inline-grid; - width: 34px; - height: 34px; - flex: 0 0 34px; - place-items: center; - padding: 0; - border-color: transparent; - background: transparent; - color: var(--color-text-muted); - cursor: grab; - opacity: 0.62; - touch-action: none; - user-select: none; -} - -.module-drag-handle .ui-icon { - width: 18px; - height: 18px; -} - -.module:hover .module-drag-handle, -.module:focus-within .module-drag-handle { - opacity: 1; -} - -.module-drag-handle:active { - cursor: grabbing; -} - -.module-title { - min-width: 80px; - max-width: 100%; - padding: 4px 6px; - border-radius: var(--radius-sm); - cursor: text; -} - -.module-title:focus { - background: rgba(7, 10, 24, 0.72); - outline: 1px solid rgba(246, 196, 83, 0.72); - outline-offset: 2px; -} - -.module-edit-button, -.module-delete-button { - flex: 0 0 40px; -} - -.module-edit-button { - color: var(--color-text-secondary); -} - -.module-scroll-button { - display: inline-grid; - grid-template-columns: 16px 30px; - width: fit-content; - min-height: 40px; - flex: 0 0 auto; - align-items: center; - gap: 7px; - padding: 0 7px 0 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-pill); - background: rgba(5, 7, 17, 0.24); - color: var(--color-text-secondary); -} - -.module-scroll-button .ui-icon { - width: 16px; - height: 16px; -} - -.module-scroll-button i { - position: relative; - display: block; - width: 30px; - height: 16px; - border: 1px solid rgba(165, 180, 252, 0.18); - border-radius: var(--radius-pill); - background: rgba(7, 10, 24, 0.72); -} - -.module-scroll-button i::before { - content: ""; - position: absolute; - top: 50%; - left: 3px; - width: 10px; - height: 10px; - border-radius: 50%; - background: var(--color-text-muted); - transform: translateY(-50%); - transition: - left var(--duration-fast) var(--ease-standard), - background-color var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -.module-edit-button.active { - @include mixins.temporary-toggle-active; -} - -.module-icon { - display: grid; - width: 34px; - height: 34px; - place-items: center; - border-radius: var(--radius-md); - background: var(--gradient-brand); - box-shadow: var(--shadow-primary); - color: white; -} - -.module-icon-svg { - display: block; - width: 19px; - height: 19px; - background: white; - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - -webkit-mask-position: center; - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: contain; -} - -.module-icon-notepad { - mask-image: url("/static/icons/notepad.svg"); - -webkit-mask-image: url("/static/icons/notepad.svg"); -} - -.module-icon-checklist { - mask-image: url("/static/icons/checklist.svg"); - -webkit-mask-image: url("/static/icons/checklist.svg"); -} - -.module-icon-tasklist { - mask-image: url("/static/icons/tasklist.svg"); - -webkit-mask-image: url("/static/icons/tasklist.svg"); -} - -.module-icon-picture { - mask-image: url("/static/icons/picture.svg"); - -webkit-mask-image: url("/static/icons/picture.svg"); -} - -.module-icon-link { - mask-image: url("/static/icons/link.svg"); - -webkit-mask-image: url("/static/icons/link.svg"); -} - -.module-icon-toolbox { - mask-image: url("/static/icons/toolbox.svg"); - -webkit-mask-image: url("/static/icons/toolbox.svg"); -} - -.module-icon-export { - mask-image: url("/static/icons/export.svg"); - -webkit-mask-image: url("/static/icons/export.svg"); -} - -.module-icon-abacus { - mask-image: url("/static/icons/abacus.svg"); - -webkit-mask-image: url("/static/icons/abacus.svg"); -} - -.module-icon-calculator { - mask-image: url("/static/icons/calculator.svg"); - -webkit-mask-image: url("/static/icons/calculator.svg"); -} - -.module-icon-clock { - mask-image: url("/static/icons/clock.svg"); - -webkit-mask-image: url("/static/icons/clock.svg"); -} - -.module-icon-stopwatch { - mask-image: url("/static/icons/stopwatch.svg"); - -webkit-mask-image: url("/static/icons/stopwatch.svg"); -} - -.module-icon-hourglass { - mask-image: url("/static/icons/hourglass.svg"); - -webkit-mask-image: url("/static/icons/hourglass.svg"); -} - -.module-icon-map { - mask-image: url("/static/icons/map.svg"); - -webkit-mask-image: url("/static/icons/map.svg"); -} - -.module-icon-shield { - mask-image: url("/static/icons/shield.svg"); - -webkit-mask-image: url("/static/icons/shield.svg"); -} - -.module-icon-chest-armor { - mask-image: url("/static/icons/chest-armor.svg"); - -webkit-mask-image: url("/static/icons/chest-armor.svg"); -} - -.module-icon-columns { - mask-image: url("/static/icons/columns.svg"); - -webkit-mask-image: url("/static/icons/columns.svg"); -} - -.module-icon-table { - mask-image: url("/static/icons/table.svg"); - -webkit-mask-image: url("/static/icons/table.svg"); -} - -.module-icon-controller { - mask-image: url("/static/icons/controller.svg"); - -webkit-mask-image: url("/static/icons/controller.svg"); -} - -.tabs { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - gap: 6px; - padding: 5px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.34); -} - -.tabs button { - display: inline-flex; - min-width: 0; - min-height: 36px; - align-items: center; - justify-content: center; - gap: 8px; - padding: 0 10px; - border: 1px solid transparent; - border-radius: calc(var(--radius-md) - 2px); - background: transparent; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.tabs button:hover { - border-color: rgba(246, 196, 83, 0.28); - background: rgba(246, 196, 83, 0.08); - color: var(--color-text-primary); -} - -.tabs button.active { - @include mixins.temporary-toggle-active; -} - -.tabs .module-icon-svg { - width: 16px; - height: 16px; - background: currentColor; -} - -.notepad-module { - display: grid; - gap: var(--space-3); - padding: var(--space-4); -} - -.notepad-toolbar, -.notepad-toolbar-group, -.notepad-format-controls { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; -} - -.notepad-toolbar { - justify-content: flex-start; - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.46); -} - -.notepad-format-controls { - min-width: 0; -} - -.notepad-toolbar-group { - padding-right: 8px; - border-right: 1px solid rgba(150, 165, 205, 0.12); -} - -.notepad-toolbar-group:last-child { - padding-right: 0; - border-right: 0; -} - -.notepad-toolbar-button, -.drawing-control-button, -.notepad-swatch, -.notepad-color-toggle, -.drawing-width-toggle, -.drawing-width-button { - display: inline-grid; - place-items: center; - width: 34px; - min-width: 34px; - min-height: 34px; - padding: 0; - border-color: rgba(150, 165, 205, 0.18); - border-radius: var(--radius-sm); - background: rgba(16, 20, 38, 0.74); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 900; - box-shadow: none; -} - -.notepad-toolbar-button .ui-icon, -.drawing-control-button .ui-icon { - width: 17px; - height: 17px; -} - -.notepad-toolbar-button:hover, -.drawing-control-button:hover, -.notepad-swatch:hover, -.notepad-color-toggle:hover, -.drawing-width-toggle:hover, -.drawing-width-button:hover, -.notepad-toolbar-button.active, -.drawing-control-button.active, -.notepad-swatch.active, -.drawing-width-button.active { - border-color: rgba(246, 196, 83, 0.48); - background: rgba(246, 196, 83, 0.1); - color: var(--color-accent-gold); -} - -.notepad-color-dropdown { - position: relative; -} - -.notepad-list-dropdown { - position: relative; -} - -.notepad-list-icon, -.notepad-list-icon::before, -.notepad-list-icon::after { - display: block; - width: 17px; - height: 2px; - border-radius: var(--radius-pill); - background: currentColor; -} - -.notepad-list-icon { - position: relative; -} - -.notepad-list-icon::before, -.notepad-list-icon::after { - content: ""; - position: absolute; - left: 0; -} - -.notepad-list-icon::before { - top: -6px; -} - -.notepad-list-icon::after { - top: 6px; -} - -.notepad-color-toggle::before, -.notepad-swatch::before { - content: ""; - width: 18px; - height: 18px; - border: 1px solid rgba(245, 247, 255, 0.22); - border-radius: 50%; - background: var(--swatch-color); - box-shadow: inset 0 0 0 2px rgba(5, 7, 17, 0.36); -} - -.notepad-color-toggle.is-rainbow::before { - width: 20px; - height: 20px; - border-color: rgba(245, 247, 255, 0.28); - background: conic-gradient( - from 20deg, - #f6c453, - #22d3ee, - #8b5cf6, - #d946ef, - #f5f7ff, - #f6c453 - ); - box-shadow: - inset 0 0 0 3px rgba(5, 7, 17, 0.34), - 0 0 10px rgba(139, 92, 246, 0.16); -} - -.notepad-color-menu { - position: absolute; - top: calc(100% + 8px); - left: 50%; - z-index: 50; - display: grid; - grid-template-columns: repeat(3, 34px); - gap: 6px; - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(10, 13, 28, 0.99); - box-shadow: var(--shadow-lg); - opacity: 0; - pointer-events: none; - transform: translate(-50%, -4px); - transition: - opacity 140ms ease, - transform 140ms ease; -} - -.notepad-list-menu { - position: absolute; - top: calc(100% + 8px); - left: 50%; - z-index: 50; - display: grid; - grid-template-columns: repeat(2, 34px); - gap: 6px; - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(10, 13, 28, 0.99); - box-shadow: var(--shadow-lg); - transform: translateX(-50%); -} - -.notepad-list-menu::before { - content: ""; - position: absolute; - bottom: 100%; - left: calc(50% - 7px); - border-right: 7px solid transparent; - border-bottom: 7px solid rgba(10, 13, 28, 0.99); - border-left: 7px solid transparent; -} - -.notepad-list-menu::after { - content: ""; - position: absolute; - right: 0; - bottom: 100%; - left: 0; - height: 10px; -} - -.notepad-list-option { - justify-content: center; - width: 34px; - min-width: 34px; - min-height: 34px; - padding: 0; - border-color: rgba(150, 165, 205, 0.18); - background: rgba(16, 20, 38, 0.74); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; - box-shadow: none; -} - -.notepad-list-option:hover, -.notepad-list-option.active { - border-color: rgba(246, 196, 83, 0.48); - background: rgba(246, 196, 83, 0.1); - color: var(--color-accent-gold); -} - -.notepad-color-menu.is-sectioned { - grid-template-columns: 1fr; - width: 168px; -} - -.notepad-color-section { - display: grid; - gap: 6px; -} - -.notepad-color-section + .notepad-color-section { - margin-top: 4px; - padding-top: 8px; - border-top: 1px solid rgba(150, 165, 205, 0.12); -} - -.notepad-color-section-label { - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.notepad-color-section-swatches { - display: grid; - grid-template-columns: repeat(4, 34px); - gap: 6px; -} - -.notepad-color-dropdown:hover .notepad-color-menu, -.notepad-color-dropdown:focus-within .notepad-color-menu, -.notepad-color-dropdown.is-open .notepad-color-menu { - opacity: 1; - pointer-events: auto; - transform: translate(-50%, 0); -} - -.notepad-color-menu::after { - content: ""; - position: absolute; - right: 0; - bottom: 100%; - left: 0; - height: 10px; -} - -.notepad-color-menu::before { - content: ""; - position: absolute; - bottom: 100%; - left: calc(50% - 7px); - border-right: 7px solid transparent; - border-bottom: 7px solid rgba(10, 13, 28, 0.99); - border-left: 7px solid transparent; -} - -.drawing-width-toggle span, -.drawing-width-button span { - width: 20px; - height: var(--line-width); - border-radius: var(--radius-pill); - background: currentColor; -} - -.drawing-width-dropdown { - position: relative; -} - -.drawing-width-menu { - position: absolute; - right: auto; - bottom: calc(100% + 8px); - left: 50%; - z-index: 50; - display: grid; - grid-template-columns: repeat(2, 34px); - gap: 6px; - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(10, 13, 28, 0.99); - box-shadow: var(--shadow-lg); - opacity: 0; - pointer-events: none; - transform: translate(-50%, 4px); - transition: - opacity 140ms ease, - transform 140ms ease; -} - -.drawing-width-dropdown:hover .drawing-width-menu, -.drawing-width-dropdown:focus-within .drawing-width-menu, -.drawing-width-dropdown.is-open .drawing-width-menu { - opacity: 1; - pointer-events: auto; - transform: translate(-50%, 0); -} - -.drawing-width-menu::after { - content: ""; - position: absolute; - top: 100%; - right: 0; - left: 0; - width: 100%; - height: 10px; -} - -.drawing-width-menu::before { - content: ""; - position: absolute; - top: 100%; - left: calc(50% - 7px); - border-top: 7px solid rgba(10, 13, 28, 0.99); - border-right: 7px solid transparent; - border-left: 7px solid transparent; -} - -.notepad-surface { - position: relative; - min-height: 260px; - overflow: auto; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.56); -} - -.notepad-surface:focus-within { - border-color: var(--color-primary); - box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); -} - -.notepad-surface.is-drawing { - cursor: crosshair; -} - -.notepad-editor { - position: relative; - z-index: 1; - min-height: 260px; - padding: var(--space-4); - color: var(--color-text-primary); - line-height: 1.6; - outline: none; - white-space: pre-wrap; -} - -.notepad-editor[contenteditable="false"] { - pointer-events: none; -} - -.notepad-editor.is-empty::before { - content: attr(data-placeholder); - position: absolute; - color: var(--color-text-muted); - pointer-events: none; -} - -.notepad-editor h3, -.notepad-editor h4, -.notepad-editor p, -.notepad-editor ul, -.notepad-editor ol { - margin: 0 0 0.75em; -} - -.notepad-editor h3 { - font-size: 1.08rem; -} - -.notepad-editor h4 { - font-size: 0.98rem; -} - -.notepad-editor ul, -.notepad-editor ol { - padding-left: 1.35rem; -} - -.drawing-overlay { - position: absolute; - top: 0; - left: 0; - z-index: 2; - pointer-events: none; - touch-action: none; -} - -.drawing-overlay.is-active { - cursor: crosshair; - pointer-events: auto; -} - -.drawing-overlay.is-erase { - cursor: crosshair; -} - -.drawing-controls-panel { - position: absolute; - right: 50%; - bottom: 10px; - z-index: 6; - display: flex; - flex-direction: row; - align-items: center; - gap: 6px; - width: max-content; - max-width: calc(100% - 20px); - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(10, 13, 28, 0.94); - box-shadow: var(--shadow-md); - transform: translateX(50%); -} - -.drawing-controls-panel:not(.is-open) { - width: auto; - padding: 6px; -} - -.drawing-controls-panel .drawing-storage-switch { - display: inline-grid; - grid-template-columns: 16px 30px; - grid-template-rows: 1fr; - width: fit-content; - min-width: 64px; - min-height: 34px; - gap: 7px; - justify-items: initial; - padding: 0 7px 0 10px; -} - -.drawing-controls-panel .drawing-storage-switch .ui-icon { - justify-self: initial; -} - -.drawing-controls-panel .drawing-storage-switch i { - width: 30px; - height: 16px; -} - -.drawing-controls-panel .notepad-color-menu { - top: auto; - bottom: calc(100% + 8px); - right: auto; - left: 50%; - transform: translate(-50%, 4px); -} - -.drawing-controls-panel .notepad-color-dropdown:hover .notepad-color-menu, -.drawing-controls-panel .notepad-color-dropdown:focus-within .notepad-color-menu, -.drawing-controls-panel .notepad-color-dropdown.is-open .notepad-color-menu { - transform: translate(-50%, 0); -} - -.drawing-controls-panel .notepad-color-menu::after { - top: 100%; - right: 0; - bottom: auto; - left: 0; - width: 100%; - height: 10px; -} - -.drawing-controls-panel .notepad-color-menu::before { - top: 100%; - right: auto; - left: calc(50% - 7px); - bottom: auto; - border-top: 7px solid rgba(10, 13, 28, 0.99); - border-right: 7px solid transparent; - border-bottom: 0; - border-left: 7px solid transparent; -} - -.notepad-footer { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: var(--space-2); - color: var(--color-text-muted); - font-size: var(--font-size-xs); -} - -.inline-form, -.field { - display: grid; - gap: 10px; - padding: var(--space-4); -} - -.inline-form { - grid-template-columns: 1fr auto; -} - -.checklist-add-form { - grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr) 76px auto; -} - -.module-add-panel { - display: grid; - gap: var(--space-3); - padding: var(--space-4); -} - -.module-add-panel .inline-form { - padding: 0; -} - -.text-import-actions { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: var(--space-2); -} - -.text-import-actions button { - display: inline-flex; - min-height: 42px; - align-items: center; - gap: 8px; -} - -.text-import-actions .ui-icon { - width: 17px; - height: 17px; -} - -.text-import-modal-dialog { - width: min(640px, calc(100vw - 32px)); -} - -.text-import-modal-root { - z-index: 330; -} - -.text-import-modal-dialog header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-4); - margin-bottom: var(--space-4); -} - -.text-import-modal-dialog h2 { - margin: 0; -} - -.text-import-modal-form { - display: grid; - gap: var(--space-3); -} - -.text-import-modal-form textarea.has-error { - border-color: rgba(248, 113, 113, 0.75); - box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.24), var(--shadow-sm); -} - -.text-import-error { - display: inline-flex; - align-items: center; - gap: 8px; - margin: 0; - color: #fecaca; - font-size: var(--font-size-sm); - font-weight: 700; -} - -.text-import-info { - display: inline-flex; - align-items: center; - gap: 8px; - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 700; -} - -.text-import-info .ui-icon, -.text-import-error .ui-icon { - width: 16px; - height: 16px; -} - -.text-import-modal-form textarea { - min-height: 260px; - resize: vertical; -} - -.text-import-modal-form footer { - display: flex; - justify-content: flex-end; - gap: 10px; -} - -.checklist-qty-input { - padding-inline: 10px; - text-align: center; -} - -input, -select, -textarea { - min-height: 44px; - padding: 0 14px; - outline: none; -} - -textarea { - padding-block: 14px; -} - -input::placeholder, -textarea::placeholder { - color: var(--color-text-muted); - opacity: 0.58; -} - -input:focus, -select:focus, -textarea:focus { - border-color: var(--color-primary); - box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); -} - -.checklist { - display: grid; - gap: var(--space-3); - margin: var(--space-4) 0 0; - padding: 0 var(--space-4) var(--space-4); - list-style: none; -} - -.checklist-toolbar { - display: flex; - justify-content: flex-end; - padding: var(--space-4) var(--space-4) 0; -} - -.checklist-section { - display: grid; - gap: 8px; -} - -.checklist-section.is-grouped { - padding: 10px; - border: 1px solid rgba(246, 196, 83, 0.16); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.04), transparent 42%), - rgba(7, 10, 24, 0.18); -} - -.checklist-section-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-3); - padding: 0 2px; -} - -.checklist-section-header > h3 { - flex: 1 1 auto; - min-width: 0; -} - -.checklist-section-actions { - display: inline-flex; - flex: 0 0 auto; - align-items: center; - gap: 8px; -} - -.checklist-section-header h3 { - margin: 0; - color: var(--color-accent-gold); - font-size: var(--font-size-sm); -} - -.checklist-section-title-input { - width: 100%; - min-height: 30px; - padding: 5px 8px; - border: 1px solid transparent; - border-radius: var(--radius-md); - background: transparent; - color: var(--color-accent-gold); - font: inherit; - outline: none; -} - -.checklist-section-title-input:hover, -.checklist-section-title-input:focus { - border-color: rgba(246, 196, 83, 0.34); - background: rgba(21, 26, 48, 0.34); -} - -.checklist-section.is-complete .checklist-section-header h3 { - color: var(--color-text-muted); - text-decoration: line-through; -} - -.checklist-section.is-complete .checklist-section-title-input { - color: var(--color-text-muted); - text-decoration: line-through; -} - -.checklist-section-actions > span { - flex: 0 0 auto; - padding: 3px 9px; - border: 1px solid rgba(246, 196, 83, 0.22); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.08); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.timer-alert-mode-switch { - display: inline-flex; - width: fit-content; - align-items: center; - opacity: 0.78; -} - -.checklist-complete-mode-button, -.timer-alert-mode-button { - display: inline-grid; - width: 36px; - min-width: 36px; - min-height: 34px; - place-items: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: 0; - background: rgba(5, 7, 17, 0.24); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.checklist-complete-mode-button:first-child, -.timer-alert-mode-button:first-child { - border-radius: var(--radius-pill) 0 0 var(--radius-pill); -} - -.checklist-complete-mode-button:last-child, -.timer-alert-mode-button:last-child { - border-radius: 0 var(--radius-pill) var(--radius-pill) 0; -} - -.checklist-complete-mode-button + .checklist-complete-mode-button, -.timer-alert-mode-button + .timer-alert-mode-button { - margin-left: -1px; -} - -.checklist-complete-mode-button .ui-icon, -.timer-alert-mode-button .ui-icon { - width: 16px; - height: 16px; -} - -.timer-alert-mode-button { - width: 24px; - min-width: 24px; - min-height: 26px; - border-color: rgba(165, 180, 252, 0.08); - background: rgba(5, 7, 17, 0.26); - color: var(--color-text-muted); -} - -.timer-alert-mode-button .ui-icon { - width: 13px; - height: 13px; -} - -.checklist-section-collapse-button { - display: inline-grid; - width: 30px; - min-width: 30px; - min-height: 30px; - place-items: center; - padding: 0; - border: 1px solid rgba(246, 196, 83, 0.28); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.08)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.3), rgba(196, 181, 253, 0.18)) border-box; - color: #fff; -} - -.checklist-section-collapse-button .ui-icon { - width: 16px; - height: 16px; - background-color: #fff; - opacity: 1; - filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.22)); -} - -.checklist-section-items { - display: grid; - gap: 8px; - margin: 0; - padding: 0; - list-style: none; -} - -.checklist-category-boundary-drop-zone { - min-height: 10px; - border: 1px dashed rgba(165, 180, 252, 0.16); - border-radius: var(--radius-sm); - background: rgba(15, 23, 42, 0.12); -} - -.checklist-category-boundary-drop-zone.is-drop-target { - border-color: rgba(246, 196, 83, 0.72); - background: rgba(246, 196, 83, 0.08); - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24); -} - -.checklist-item { - display: grid; - grid-template-columns: 1fr 42px 42px; - gap: 8px; - align-items: center; -} - -.checklist-item-main { - display: grid; - grid-template-columns: 30px auto minmax(0, 1fr); - min-height: 42px; - align-items: center; - gap: 10px; - padding: 0 12px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.44); -} - -.checklist-item-main:hover { - border-color: rgba(196, 181, 253, 0.22); - background: rgba(10, 13, 30, 0.54); -} - -.checklist-item-main.is-editing { - grid-template-columns: 30px auto minmax(96px, 1fr) minmax(84px, 0.45fr); -} - -.checklist-drag-handle { - display: inline-grid; - width: 30px; - min-width: 30px; - min-height: 30px; - place-items: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.76); - color: var(--color-text-secondary); - cursor: grab; - touch-action: none; - user-select: none; -} - -.checklist-drag-handle .ui-icon { - width: 15px; - height: 15px; -} - -.checklist-drag-handle:active { - cursor: grabbing; -} - -.checklist-section.is-drop-target { - border-color: rgba(246, 196, 83, 0.72); -} - -.checklist-item.is-dragging .checklist-item-main { - opacity: 0.58; -} - -.checklist-label-input, -.checklist-category-input { - min-width: 0; - width: 100%; - min-height: 30px; - padding: 5px 8px; - border: 1px solid transparent; - border-radius: var(--radius-md); - background: transparent; - color: var(--color-text-primary); -} - -.checklist-category-input { - color: var(--color-text-secondary); - font-size: var(--font-size-xs); -} - -.checklist-label-input:hover, -.checklist-label-input:focus, -.checklist-category-input:hover, -.checklist-category-input:focus { - border-color: rgba(246, 196, 83, 0.34); - background: rgba(21, 26, 48, 0.42); -} - -.checklist-item-summary { - display: flex; - min-width: 0; - align-items: center; - gap: 8px; - justify-content: flex-start; - padding: 0; - border: 0; - background: transparent; - color: var(--color-text-primary); - text-align: left; - box-shadow: none; -} - -.checklist-item-summary:hover { - border-color: transparent; - background: transparent; - box-shadow: none; -} - -.checklist-item-summary span { - min-width: 0; - overflow: hidden; - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.checklist-edit-button { - display: inline-grid; - width: 40px; - min-width: 40px; - min-height: 40px; - place-items: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.76); - color: var(--color-text-secondary); -} - -.checklist-edit-button .ui-icon { - width: 17px; - height: 17px; -} - -.checklist input[type="checkbox"] { - flex: 0 0 auto; -} - -.checklist-item.is-complete .checklist-label-input { - color: var(--color-text-muted); - text-decoration: line-through; -} - -.checklist-item.is-complete .checklist-item-summary span { - color: var(--color-text-muted); - text-decoration: line-through; -} - -.checklist-qty-controls { - display: inline-flex; - flex: 0 0 auto; - align-items: center; - gap: 6px; -} - -.checklist-qty-controls button { - width: 28px; - min-width: 28px; - min-height: 28px; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.88); - color: var(--color-text-secondary); - line-height: 1; -} - -.checklist-qty-current { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 3px; - color: var(--color-text-secondary); -} - -.checklist-qty-current input { - width: max(18px, calc((var(--qty-current-digits, 1) * 0.72rem) + 8px)); - min-height: 28px; - padding: 0 4px; - border: 1px solid transparent; - background: transparent; - color: var(--color-text-primary); - text-align: right; - -moz-appearance: textfield; -} - -.checklist-qty-current input::-webkit-outer-spin-button, -.checklist-qty-current input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; -} - -.checklist-qty-current input:hover, -.checklist-qty-current input:focus { - border-color: rgba(246, 196, 83, 0.34); - background: rgba(21, 26, 48, 0.42); -} - -.checklist-qty-current span { - color: var(--color-text-secondary); - white-space: nowrap; -} - -.links-add-form { - grid-template-columns: minmax(120px, 0.7fr) minmax(180px, 1fr) auto; -} - -.links-list { - display: grid; - gap: 10px; - margin: var(--space-4); - padding: 0; - list-style: none; -} - -.module-add-panel + .links-list, -.module-add-panel + .checklist, -.module-add-panel + .task-planner-list, -.module-add-panel + .counters-grid { - margin-top: 0; -} - -.task-planner-module { - display: grid; - gap: var(--space-4); - padding: var(--space-4); -} - -.task-planner-topbar { - display: grid; - gap: 10px; - align-items: stretch; -} - -.task-planner-topbar .inline-form { - padding: 0; -} - -.task-planner-add-stack { - display: grid; - gap: var(--space-3); -} - -.task-planner-add-stack .text-import-actions { - padding-top: var(--space-2); -} - -.task-planner-global-controls { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 10px; -} - -.task-planner-settings-toggle, -.task-planner-dropdown-button, -.task-planner-settings-button { - display: inline-grid; - width: 34px; - min-width: 34px; - min-height: 34px; - place-items: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.76); - color: var(--color-text-secondary); -} - -.task-planner-settings-toggle { - grid-template-columns: 16px minmax(0, auto); - width: auto; - max-width: 100%; - padding: 0 12px; - gap: 8px; -} - -.task-planner-settings-toggle span { - overflow: hidden; - font-size: var(--font-size-xs); - font-weight: 900; - text-overflow: ellipsis; - white-space: nowrap; -} - -.task-planner-settings-toggle .ui-icon, -.task-planner-dropdown-button .ui-icon, -.task-planner-settings-button .ui-icon { - width: 16px; - height: 16px; -} - -.task-planner-clear-completed-button { - display: inline-flex; - min-height: 38px; - align-items: center; - justify-content: center; - gap: 8px; - padding: 0 12px; - white-space: nowrap; -} - -.task-planner-clear-completed-button .ui-icon { - width: 15px; - height: 15px; -} - -.task-planner-settings { - display: grid; - grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.72fr); - gap: 10px; - align-items: end; - padding: 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.06), transparent 58%), - rgba(7, 10, 24, 0.34); -} - -.task-planner-settings-actions { - display: flex; - grid-column: 1 / -1; - justify-content: flex-end; -} - -.task-planner-settings label, -.task-planner-reset-override { - display: grid; - gap: 6px; - min-width: 0; -} - -.task-planner-settings span, -.task-planner-reset-override > span, -.task-planner-relations > span { - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - text-transform: uppercase; -} - -.task-planner-settings select, -.task-planner-settings input, -.task-planner-add-form select, -.task-planner-type-select, -.task-planner-reset-override select, -.task-planner-reset-override input, -.task-planner-relations select { - width: 100%; - min-height: 36px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background-color: rgba(15, 23, 42, 0.64); - color: var(--color-text-primary); -} - -.task-planner-settings select option, -.task-planner-add-form select option, -.task-planner-type-select option, -.task-planner-reset-override select option, -.task-planner-relations select option { - background: #11182f; - color: var(--color-text-primary); -} - -.task-planner-add-form { - grid-template-columns: minmax(0, 1fr) minmax(120px, 0.36fr) auto; -} - -.task-planner-list { - display: grid; - gap: 10px; - margin: 0; - padding: 0; - list-style: none; -} - -.task-planner-child-list { - position: relative; - gap: 8px; - margin-top: 8px; - padding-left: 22px; -} - -.task-planner-child-list::before { - content: ""; - position: absolute; - top: -4px; - bottom: 15px; - left: 7px; - width: 1px; - background: linear-gradient(180deg, rgba(246, 196, 83, 0.46), rgba(139, 92, 246, 0.18)); -} - -.task-planner-child-list > .task-planner-item { - position: relative; -} - -.task-planner-hidden-parent { - position: relative; - display: grid; - gap: 8px; - min-width: 0; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(148, 163, 184, 0.035), transparent 56%), - rgba(5, 7, 17, 0.28); -} - -.task-planner-hidden-parent > .task-planner-child-list { - margin-top: 0; -} - -.task-planner-child-list > .task-planner-item::before, -.task-planner-child-list > .task-planner-hidden-parent::before { - content: ""; - position: absolute; - top: 25px; - left: -15px; - width: 11px; - height: 1px; - background: rgba(246, 196, 83, 0.46); -} - -.task-planner-hidden-parent-line { - display: grid; - grid-template-columns: 24px minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - min-height: 34px; - padding: 6px 10px; - border: 1px solid rgba(165, 180, 252, 0.08); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(148, 163, 184, 0.04), transparent 58%), - rgba(5, 7, 17, 0.24); - opacity: 0.76; -} - -.task-planner-hidden-parent-line > input[type="checkbox"] { - justify-self: center; -} - -.task-planner-hidden-parent-line > span { - min-width: 0; - overflow: hidden; - color: var(--color-text-muted); - font-size: var(--font-size-sm); - font-weight: 800; - text-decoration: line-through; - text-overflow: ellipsis; - white-space: nowrap; -} - -.task-planner-hidden-parent-line > small { - color: rgba(180, 189, 211, 0.62); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.task-planner-empty { - padding: var(--space-4); - border: 1px dashed rgba(165, 180, 252, 0.18); - border-radius: var(--radius-md); - color: var(--color-text-muted); - text-align: center; -} - -.task-planner-category-boundary-drop-zone { - min-height: 10px; - border: 1px dashed rgba(165, 180, 252, 0.16); - border-radius: var(--radius-sm); - background: rgba(15, 23, 42, 0.12); -} - -.task-planner-category-boundary-drop-zone.is-drop-target { - border-color: rgba(246, 196, 83, 0.72); - background: rgba(246, 196, 83, 0.08); - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24); -} - -.task-planner-category-section { - display: grid; - gap: 8px; - padding: 10px; - border: 1px solid rgba(246, 196, 83, 0.16); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.04), transparent 42%), - rgba(7, 10, 24, 0.18); -} - -.task-planner-category-header { - padding: 0 2px; -} - -.task-planner-category-title { - display: inline-flex; - flex: 1 1 auto; - min-width: 0; - align-items: center; - gap: 8px; -} - -.task-planner-category-actions { - display: inline-flex; - flex: 0 0 auto; - align-items: center; - gap: 8px; -} - -.task-planner-category-header h3 { - min-width: 0; - margin: 0; - overflow: hidden; - color: var(--color-accent-gold); - font-size: var(--font-size-sm); - text-overflow: ellipsis; - white-space: nowrap; -} - -.task-planner-category-actions > span { - flex: 0 0 auto; - padding: 3px 9px; - border: 1px solid rgba(246, 196, 83, 0.22); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.08); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.task-planner-category-section.is-complete .task-planner-category-header h3 { - color: var(--color-text-muted); - text-decoration: line-through; -} - -.task-planner-category-section.is-dragging { - cursor: grabbing; - opacity: 0.58; - transform: scale(0.99); -} - -.task-planner-category-section.is-drop-target { - border-color: rgba(246, 196, 83, 0.72); -} - -.task-planner-category-section.is-drop-target.drop-after { - border-color: rgba(246, 196, 83, 0.72); -} - -.task-planner-item { - position: relative; - display: grid; - gap: 10px; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.task-planner-item.is-complete > .task-planner-line { - opacity: 0.78; -} - -.task-planner-item.has-missing-prerequisite { - border-color: rgba(246, 196, 83, 0.34); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.06), transparent 44%), - rgba(5, 7, 17, 0.36); -} - -.task-planner-line { - display: grid; - grid-template-columns: 30px 24px minmax(0, 1fr) 134px auto auto; - gap: 8px; - align-items: center; -} - -.task-planner-line > input[type="checkbox"] { - justify-self: center; -} - -.task-planner-drag-handle, -.task-planner-category-drag-handle, -.task-planner-delete-button { - display: inline-grid; - width: 30px; - min-width: 30px; - min-height: 30px; - place-items: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.76); - color: var(--color-text-secondary); -} - -.task-planner-drag-handle:disabled { - cursor: not-allowed; - opacity: 0.3; -} - -.task-planner-drag-handle .ui-icon, -.task-planner-category-drag-handle .ui-icon, -.task-planner-delete-button .ui-icon { - width: 15px; - height: 15px; -} - -.task-planner-actions { - display: inline-flex; - justify-content: flex-end; - gap: 6px; -} - -.task-planner-title-input { - font-weight: 800; -} - -.task-planner-item.is-complete > .task-planner-line .task-planner-title-input { - color: var(--color-text-muted); - text-decoration: line-through; -} - -.task-planner-type-select { - appearance: none; - -webkit-appearance: none; - width: 100%; - min-height: 36px; - overflow: hidden; - padding: 0 30px 0 10px; - border-color: rgba(165, 180, 252, 0.09); - text-overflow: ellipsis; - background-image: - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c4b5fd' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), - linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(31, 41, 78, 0.08)), - linear-gradient(rgba(21, 26, 48, 0.38), rgba(21, 26, 48, 0.38)); - background-position: - calc(100% - 10px) 50%, - 0 0, - 0 0; - background-size: - 11px 11px, - auto, - auto; - background-repeat: no-repeat; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.task-planner-type-select:hover, -.task-planner-type-select:focus { - border-color: rgba(196, 181, 253, 0.22); - background-image: - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f6c453' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), - linear-gradient(135deg, rgba(246, 196, 83, 0.06), rgba(139, 92, 246, 0.08)), - linear-gradient(rgba(21, 26, 48, 0.58), rgba(21, 26, 48, 0.58)); - color: var(--color-text-primary); -} - -.task-planner-warning { - display: inline-flex; - align-items: center; - padding: 4px 8px; - border: 1px solid rgba(246, 196, 83, 0.28); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; - white-space: nowrap; -} - -.task-planner-prerequisite-tooltip { - display: grid; - gap: 7px; - min-width: 180px; -} - -.task-planner-prerequisite-tooltip strong { - color: var(--color-text-primary); - font-size: var(--font-size-xs); -} - -.task-planner-prerequisite-tooltip > span { - display: grid; - gap: 4px; -} - -.task-planner-prerequisite-tooltip > span > span { - min-width: 0; - overflow: hidden; - color: var(--color-text-secondary); - text-overflow: ellipsis; - white-space: nowrap; -} - -.inline-notice { - display: inline-flex; - width: fit-content; - max-width: 100%; - align-items: center; - gap: 7px; - padding: 5px 9px; - border: 1px solid rgba(246, 196, 83, 0.28); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)), - rgba(9, 12, 28, 0.9); - box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; - line-height: 1.2; - animation: inline-notice-in 160ms ease; -} - -.inline-notice .ui-icon { - width: 14px; - height: 14px; - flex: 0 0 auto; -} - -.task-planner-notice { - position: absolute; - top: 48px; - left: 72px; - z-index: 2; - pointer-events: none; -} - -@keyframes inline-notice-in { - from { - opacity: 0; - transform: translateY(-2px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -.task-planner-description-panel, -.task-planner-task-settings { - margin-left: 62px; -} - -.task-planner-description-panel { - display: grid; - gap: 10px; -} - -.task-planner-category-field, -.task-planner-description-field { - display: grid; - gap: 6px; - min-width: 0; -} - -.task-planner-category-field span, -.task-planner-description-field span { - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - text-transform: uppercase; -} - -.task-planner-category-field input { - width: 100%; -} - -.task-planner-category-field.is-disabled span { - color: rgba(148, 163, 184, 0.72); -} - -.task-planner-category-field.is-disabled input, -.task-planner-category-field input:disabled { - border-color: rgba(165, 180, 252, 0.08); - background: - linear-gradient(135deg, rgba(148, 163, 184, 0.05), transparent 62%), - rgba(15, 23, 42, 0.42); - box-shadow: none; - color: rgba(203, 213, 225, 0.66); - cursor: not-allowed; -} - -.task-planner-description { - min-height: 72px; - resize: vertical; -} - -.task-planner-task-settings { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); - gap: 12px; - align-items: start; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(7, 10, 24, 0.24); -} - -.task-planner-reset-control { - display: grid; - grid-template-columns: minmax(0, 1fr) 34px; - gap: 8px; - align-items: center; -} - -.task-planner-reset-control button { - display: inline-grid; - width: 34px; - min-width: 34px; - min-height: 36px; - place-items: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.58); - color: var(--color-text-secondary); -} - -.task-planner-reset-control button:disabled { - opacity: 0.42; - cursor: not-allowed; -} - -.task-planner-reset-control button .ui-icon { - width: 14px; - height: 14px; -} - -.task-planner-reset-override.is-empty p { - display: grid; - min-height: 36px; - align-items: center; - margin: 0; - padding: 0 12px; - border: 1px solid rgba(165, 180, 252, 0.08); - border-radius: var(--radius-md); - background: rgba(15, 23, 42, 0.34); - color: var(--color-text-muted); - font-size: var(--font-size-sm); - font-weight: 800; -} - -.task-planner-relations { - display: grid; - grid-column: span 1; - gap: 6px; - min-width: 0; -} - -.task-planner-relations > div { - display: grid; - gap: 6px; - min-height: 36px; -} - -.task-planner-relations em { - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-style: normal; -} - -.task-planner-relation-chip { - display: grid; - grid-template-columns: minmax(0, 1fr) auto 28px; - gap: 8px; - align-items: center; - padding: 4px 5px 4px 9px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.46); -} - -.task-planner-relation-chip > span { - min-width: 0; - overflow: hidden; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; -} - -.task-planner-relation-chip label { - display: inline-flex; - align-items: center; - gap: 5px; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.task-planner-relation-chip label input { - min-height: 0; -} - -.task-planner-relation-chip button { - display: inline-flex; - width: 26px; - min-width: 26px; - min-height: 26px; - align-items: center; - justify-content: center; - gap: 5px; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.58); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.task-planner-relation-chip button .ui-icon { - width: 12px; - height: 12px; -} - -.task-planner-relations select { - min-height: 36px; - padding-inline: 10px; -} - -.equipment-planner-module { - display: grid; - gap: 12px; - padding: var(--space-4); -} - -.equipment-planner-add-form { - grid-template-columns: 44px minmax(180px, 1fr) auto; -} - -.equipment-planner-picker { - position: relative; -} - -.equipment-planner-picker-trigger, -.equipment-planner-picker-option, -.equipment-planner-color-option { - display: inline-grid; - place-items: center; - min-height: 36px; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.58); - color: var(--color-text-secondary); -} - -.equipment-planner-picker-trigger { - grid-template-columns: 1fr 10px; - width: 44px; - gap: 2px; -} - -.equipment-planner-shape-picker .equipment-planner-picker-trigger { - grid-template-columns: 28px 10px; - width: 50px; -} - -.equipment-planner-add-form .equipment-planner-picker-trigger, -.equipment-planner-add-form input, -.equipment-planner-add-form button { - min-height: 42px; -} - -.equipment-planner-picker-trigger .ui-icon:first-child, -.equipment-planner-picker-option .ui-icon { - width: 18px; - height: 18px; -} - -.equipment-planner-picker-trigger .equipment-planner-socket-icon { - width: 26px; - min-width: 26px; - height: 26px; -} - -.equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon { - width: 24px; - height: 24px; -} - -.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon, -.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon { - width: 28px; - min-width: 28px; - height: 28px; -} - -.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon, -.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon .ui-icon { - width: 26px; - height: 26px; -} - -.equipment-planner-picker-trigger .ui-icon:last-child { - width: 9px; - height: 9px; -} - -.equipment-planner-picker-trigger.active, -.equipment-planner-picker-option.active, -.equipment-planner-color-option.active { - border-color: rgba(246, 196, 83, 0.55); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), - rgba(21, 26, 48, 0.76); - color: var(--color-text-primary); -} - -.equipment-planner-picker-menu { - position: fixed; - z-index: 12; - width: max-content; - max-width: calc(100vw - 16px); - padding: 8px; - border: 1px solid rgba(165, 180, 252, 0.14); - border-radius: var(--radius-md); - background: rgba(9, 12, 28, 0.98); - box-shadow: var(--shadow-md); -} - -.equipment-planner-picker-grid, -.equipment-planner-color-grid { - display: grid; - grid-template-columns: repeat(var(--picker-columns, 5), 32px); - gap: 7px; -} - -.equipment-planner-picker-option { - width: 32px; - min-width: 32px; - min-height: 32px; -} - -.equipment-planner-color-grid { - grid-template-columns: repeat(var(--picker-columns, 6), 28px); -} - -.equipment-planner-color-option { - width: 28px; - min-width: 28px; - min-height: 28px; -} - -.equipment-planner-summary, -.equipment-planner-type-section, -.equipment-planner-panel { - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(7, 10, 24, 0.28); -} - -.equipment-planner-summary { - display: grid; - gap: 10px; - padding: 12px; -} - -.equipment-planner-summary-header, -.equipment-planner-type-header, -.equipment-planner-trait-category-header, -.equipment-planner-socket-heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - min-width: 0; -} - -.equipment-planner-summary-header h3, -.equipment-planner-panel h4 { - margin: 0; - color: var(--color-text-primary); - font-size: var(--font-size-md); -} - -.equipment-planner-summary-header span, -.equipment-planner-type-actions > span, -.equipment-planner-trait-category-header span { - padding: 4px 8px; - border: 1px solid rgba(246, 196, 83, 0.18); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; - white-space: nowrap; -} - -.equipment-planner-summary-grid { - display: grid; - gap: 10px; -} - -.equipment-planner-summary-source-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - align-items: start; - gap: 10px; -} - -.equipment-planner-summary-source-grid.columns-1 { - grid-template-columns: minmax(0, 1fr); -} - -.equipment-planner-summary-panel { - display: grid; - align-content: start; - gap: 8px; - min-width: 0; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.08); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.32); -} - -.equipment-planner-summary-grid strong, -.equipment-planner-field span { - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - text-transform: uppercase; -} - -.equipment-planner-summary-grid ul, -.equipment-planner-list, -.equipment-planner-equipment-list, -.equipment-planner-trait-list ul, -.equipment-planner-materials, -.equipment-planner-socket-bonuses { - display: grid; - align-content: start; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.equipment-planner-summary-grid li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - min-width: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.equipment-planner-summary-grid li.equipment-planner-summary-total { - grid-template-columns: 18px minmax(0, 1fr) auto; -} - -.equipment-planner-summary-total .ui-icon { - width: 16px; - height: 16px; - color: var(--color-accent-gold); -} - -.equipment-planner-summary-total .equipment-planner-socket-icon { - width: 18px; - min-width: 18px; - height: 18px; -} - -.equipment-planner-summary-total .equipment-planner-socket-icon .ui-icon { - width: 17px; - height: 17px; -} - -.equipment-planner-summary-grid li span, -.equipment-planner-summary-grid li small { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-summary-grid li b { - color: var(--color-text-primary); -} - -.equipment-planner-summary-grid li .ui-tooltip { - overflow: visible; - white-space: normal; -} - -.equipment-planner-summary-tooltip { - display: grid; - gap: 7px; - min-width: 190px; -} - -.equipment-planner-summary-tooltip > strong { - color: var(--color-text-primary); - font-size: var(--font-size-xs); -} - -.equipment-planner-summary-tooltip > span { - display: grid; - gap: 5px; -} - -.equipment-planner-summary-tooltip-row { - display: grid; - grid-template-columns: 16px minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - min-height: 18px; - line-height: 18px; -} - -.equipment-planner-summary-tooltip-row .ui-icon { - width: 14px; - height: 14px; - color: var(--color-accent-gold); -} - -.equipment-planner-summary-tooltip-row span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-summary-tooltip-row b { - color: var(--color-text-primary); -} - -.equipment-planner-summary-grid p, -.equipment-planner-muted, -.equipment-planner-empty { - margin: 0; - color: var(--color-text-muted); - font-size: var(--font-size-sm); -} - -.equipment-planner-type-section { - display: grid; - gap: 8px; - padding: 10px; -} - -.equipment-planner-list { - gap: 12px; -} - -.equipment-planner-type-section.is-drop-target, -.equipment-planner-item.is-drop-target, -.equipment-planner-trait-category.is-drop-target, -.equipment-planner-trait.is-drop-target { - border-color: rgba(246, 196, 83, 0.72); -} - -.equipment-planner-type-title { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; -} - -.equipment-planner-type-title h3 { - min-width: 0; - margin: 0; - overflow: hidden; - color: var(--color-text-primary); - font-size: var(--font-size-md); - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-type-icon { - display: inline-grid; - width: 28px; - min-width: 28px; - height: 28px; - place-items: center; - border: 1px solid rgba(246, 196, 83, 0.2); - border-radius: var(--radius-md); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); -} - -.equipment-planner-type-icon .ui-icon { - width: 16px; - height: 16px; -} - -.equipment-planner-type-actions { - display: inline-flex; - align-items: center; - gap: 8px; -} - -.equipment-planner-type-boundary-drop-zone { - min-height: 7px; - border-radius: var(--radius-pill); -} - -.equipment-planner-type-boundary-drop-zone.is-drop-target { - background: rgba(246, 196, 83, 0.5); -} - -.equipment-planner-equipment-list { - padding-left: 0; -} - -.equipment-planner-item { - display: grid; - gap: 10px; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.equipment-planner-item.is-inactive { - opacity: 0.68; -} - -.equipment-planner-line { - display: grid; - grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px; - gap: 8px; - align-items: center; -} - -.equipment-planner-name { - min-width: 0; - overflow: hidden; - color: var(--color-text-primary); - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-identity { - display: flex; - min-width: 0; - align-items: center; - gap: 8px; -} - -.equipment-planner-include-switch { - display: inline-flex; - align-items: center; - justify-self: end; - gap: 8px; - min-width: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - cursor: pointer; -} - -.equipment-planner-include-switch input { - position: absolute; - opacity: 0; - pointer-events: none; -} - -.equipment-planner-include-switch > span { - position: relative; - width: 36px; - min-width: 36px; - height: 20px; - border: 1px solid rgba(165, 180, 252, 0.18); - border-radius: var(--radius-pill); - background: rgba(15, 23, 42, 0.8); -} - -.equipment-planner-include-switch > span::before { - content: ""; - position: absolute; - top: 3px; - left: 3px; - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--color-text-muted); - transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); -} - -.equipment-planner-include-switch input:checked + span { - border-color: rgba(246, 196, 83, 0.48); - background: rgba(246, 196, 83, 0.16); -} - -.equipment-planner-include-switch input:checked + span::before { - transform: translateX(16px); - background: var(--color-accent-gold); -} - -.equipment-planner-include-switch b { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-details { - display: grid; - gap: 10px; - padding: 0 0 0 48px; -} - -.equipment-planner-tabs { - display: flex; - width: fit-content; - max-width: 100%; - align-items: stretch; - overflow: hidden; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.equipment-planner-tab { - display: inline-flex; - min-height: 34px; - align-items: center; - gap: 7px; - padding: 0 10px; - border: 0; - border-radius: 0; - background: transparent; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.equipment-planner-tab + .equipment-planner-tab { - border-left: 1px solid rgba(165, 180, 252, 0.1); -} - -.equipment-planner-tab.active { - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), - rgba(21, 26, 48, 0.64); - color: var(--color-text-primary); -} - -.equipment-planner-edit-mode-button { - display: inline-flex; - min-height: 34px; - align-items: center; - gap: 7px; - padding: 0 10px; - border: 0; - border-left: 1px solid rgba(165, 180, 252, 0.1); - border-radius: 0; - background: rgba(21, 26, 48, 0.42); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.equipment-planner-edit-mode-button.active { - color: var(--color-accent-gold); -} - -.equipment-planner-edit-mode-button .ui-icon { - width: 15px; - height: 15px; -} - -.equipment-planner-tab .ui-icon, -.equipment-planner-percent-icon { - width: 16px; - height: 16px; -} - -.equipment-planner-percent-icon { - display: inline-grid; - place-items: center; - color: var(--color-accent-gold); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.equipment-planner-craft-tab { - display: grid; - gap: 10px; -} - -.equipment-planner-readonly-text, -.equipment-planner-trait-readonly, -.equipment-planner-material-readonly { - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.equipment-planner-display-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.equipment-planner-display-panel { - display: grid; - align-content: start; - gap: 8px; - min-width: 0; - padding: 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.34); -} - -.equipment-planner-display-panel h4 { - margin: 0; - color: var(--color-accent-gold); - font-size: var(--font-size-md); -} - -.equipment-planner-display-panel ul { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.equipment-planner-display-panel li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 10px; - align-items: center; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.equipment-planner-display-stat { - grid-template-columns: 18px minmax(0, 1fr) auto !important; -} - -.equipment-planner-display-stat .ui-icon { - width: 16px; - height: 16px; - color: var(--color-accent-gold); -} - -.equipment-planner-display-panel p { - margin: 0; - color: var(--color-text-muted); - font-size: var(--font-size-sm); -} - -.equipment-planner-display-panel b { - color: var(--color-text-primary); -} - -.equipment-planner-display-socket { - grid-template-columns: 24px minmax(0, 1fr) !important; -} - -.equipment-planner-display-socket > div { - display: grid; - gap: 2px; - min-width: 0; -} - -.equipment-planner-display-socket strong, -.equipment-planner-display-socket small { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-display-socket small { - color: var(--color-text-muted); - font-size: var(--font-size-xs); -} - -.equipment-planner-trait-readonly, -.equipment-planner-material-readonly { - display: flex; - grid-column: 1 / -1; - min-width: 0; - align-items: center; - gap: 8px; -} - -.equipment-planner-trait-readonly .ui-icon { - width: 15px; - min-width: 15px; - height: 15px; - color: var(--color-accent-gold); -} - -.equipment-planner-trait-readonly span, -.equipment-planner-material-readonly span, -.equipment-planner-socket-heading strong { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-trait-readonly b, -.equipment-planner-material-readonly b { - margin-left: auto; - color: var(--color-text-primary); -} - -.equipment-planner-field, -.equipment-planner-panel { - display: grid; - gap: 8px; - min-width: 0; -} - -.equipment-planner-field textarea { - min-height: 70px; - resize: vertical; -} - -.equipment-planner-panel { - padding: 10px; -} - -.equipment-planner-trait-form { - grid-template-columns: 44px minmax(110px, 0.7fr) minmax(120px, 1fr) minmax(88px, 0.45fr) auto; -} - -.equipment-planner-trait-list, -.equipment-planner-trait-category { - display: grid; - gap: 8px; -} - -.equipment-planner-trait-category { - padding: 8px; - border: 1px solid rgba(165, 180, 252, 0.08); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.22); -} - -.equipment-planner-trait-category-header { - justify-content: flex-start; -} - -.equipment-planner-trait-category-header strong { - min-width: 0; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-trait { - display: grid; - grid-template-columns: 30px 44px minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(72px, 0.5fr) 30px; - gap: 7px; - align-items: center; -} - -.equipment-planner-material-form { - grid-template-columns: minmax(160px, 1fr) 82px auto; -} - -.equipment-planner-materials li { - display: grid; - grid-template-columns: minmax(0, 1fr) 82px 30px; - gap: 7px; - align-items: center; -} - -.equipment-planner-socket-form { - grid-template-columns: minmax(160px, 1fr) 44px 44px auto; -} - -.equipment-planner-socket-grid { - display: grid; - grid-template-columns: 1fr; - gap: 10px; -} - -.equipment-planner-socket-card { - display: grid; - gap: 8px; - min-width: 0; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.34); -} - -.equipment-planner-socket-heading { - grid-template-columns: 30px minmax(0, 1fr) 30px; -} - -.equipment-planner-socket-heading input { - min-width: 0; -} - -.equipment-planner-socket-token { - display: inline-block; - width: 24px; - height: 24px; - border: 2px solid rgba(245, 247, 255, 0.36); - box-shadow: 0 0 18px rgba(246, 196, 83, 0.16); -} - -.equipment-planner-socket-icon { - display: inline-grid; - width: 24px; - min-width: 24px; - height: 24px; - place-items: center; -} - -.equipment-planner-socket-icon .ui-icon { - width: 22px; - height: 22px; - background: var(--equipment-socket-icon-color, currentColor); - color: var(--equipment-socket-icon-color, currentColor) !important; -} - -.equipment-planner-socket-icon.color-red { - color: #ef4444; -} - -.equipment-planner-socket-icon.color-orange { - color: #f97316; -} - -.equipment-planner-socket-icon.color-amber { - color: #f59e0b; -} - -.equipment-planner-socket-icon.color-yellow { - color: var(--color-accent-gold); -} - -.equipment-planner-socket-icon.color-lime { - color: #84cc16; -} - -.equipment-planner-socket-icon.color-green { - color: #22c55e; -} - -.equipment-planner-socket-icon.color-teal { - color: #14b8a6; -} - -.equipment-planner-socket-icon.color-cyan { - color: var(--color-accent-cyan); -} - -.equipment-planner-socket-icon.color-blue { - color: #3b82f6; -} - -.equipment-planner-socket-icon.color-indigo { - color: var(--color-accent-indigo); -} - -.equipment-planner-socket-icon.color-violet { - color: #7c3aed; -} - -.equipment-planner-socket-icon.color-purple { - color: var(--color-primary); -} - -.equipment-planner-socket-icon.color-pink { - color: var(--color-accent-pink); -} - -.equipment-planner-socket-icon.color-rose { - color: #f43f5e; -} - -.equipment-planner-socket-icon.color-white { - color: #f8fafc; -} - -.equipment-planner-socket-icon.color-gray { - color: #64748b; -} - -.equipment-planner-socket-icon.color-black { - color: #020617; -} - -.equipment-planner-color-swatch { - display: inline-block; - width: 16px; - height: 16px; - border: 1px solid rgba(245, 247, 255, 0.28); - border-radius: 50%; -} - -.equipment-planner-socket-token.color-red, -.equipment-planner-color-swatch.color-red { - background: #ef4444; -} - -.equipment-planner-socket-token.color-orange, -.equipment-planner-color-swatch.color-orange { - background: #f97316; -} - -.equipment-planner-socket-token.color-amber, -.equipment-planner-color-swatch.color-amber { - background: #f59e0b; -} - -.equipment-planner-socket-token.color-yellow, -.equipment-planner-color-swatch.color-yellow { - background: var(--color-accent-gold); -} - -.equipment-planner-socket-token.color-lime, -.equipment-planner-color-swatch.color-lime { - background: #84cc16; -} - -.equipment-planner-socket-token.color-green, -.equipment-planner-color-swatch.color-green { - background: #22c55e; -} - -.equipment-planner-socket-token.color-teal, -.equipment-planner-color-swatch.color-teal { - background: #14b8a6; -} - -.equipment-planner-socket-token.color-cyan, -.equipment-planner-color-swatch.color-cyan { - background: var(--color-accent-cyan); -} - -.equipment-planner-socket-token.color-blue, -.equipment-planner-color-swatch.color-blue { - background: #3b82f6; -} - -.equipment-planner-socket-token.color-indigo, -.equipment-planner-color-swatch.color-indigo { - background: var(--color-accent-indigo); -} - -.equipment-planner-socket-token.color-violet, -.equipment-planner-color-swatch.color-violet { - background: #7c3aed; -} - -.equipment-planner-socket-token.color-purple, -.equipment-planner-color-swatch.color-purple { - background: var(--color-primary); -} - -.equipment-planner-socket-token.color-pink, -.equipment-planner-color-swatch.color-pink { - background: var(--color-accent-pink); -} - -.equipment-planner-socket-token.color-rose, -.equipment-planner-color-swatch.color-rose { - background: #f43f5e; -} - -.equipment-planner-socket-token.color-white, -.equipment-planner-color-swatch.color-white { - background: #f8fafc; -} - -.equipment-planner-socket-token.color-gray, -.equipment-planner-color-swatch.color-gray { - background: #64748b; -} - -.equipment-planner-socket-token.color-black, -.equipment-planner-color-swatch.color-black { - background: #020617; -} - -.equipment-planner-socket-controls, -.equipment-planner-socket-links { - display: flex; - flex-wrap: wrap; - gap: 7px; - min-width: 0; -} - -.equipment-planner-socket-controls { - align-items: center; -} - -.equipment-planner-socket-links select { - min-height: 32px; - flex: 1 1 96px; -} - -.equipment-planner-socket-controls select { - width: min(150px, 100%); - min-height: 32px; - margin-left: auto; -} - -.equipment-planner-bonus-form { - grid-template-columns: minmax(110px, 1fr) minmax(64px, 0.45fr) 44px; -} - -.equipment-planner-socket-bonuses li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto 30px; - gap: 7px; - align-items: center; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); -} - -.equipment-planner-socket-bonuses span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-link-chip { - display: inline-flex; - max-width: 100%; - align-items: center; - gap: 6px; - min-height: 28px; - padding: 0 8px; - border: 1px solid rgba(34, 211, 238, 0.28); - border-radius: var(--radius-pill); - background: rgba(34, 211, 238, 0.08); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.equipment-planner-link-chip::before { - content: ""; - width: 14px; - height: 1px; - background: var(--color-accent-cyan); -} - -.equipment-planner-link-chip span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-link-chip .ui-icon { - width: 11px; - height: 11px; -} - -@media (max-width: 760px) { - .task-planner-task-settings { - grid-template-columns: 1fr; - } - - .equipment-planner-summary-grid, - .equipment-planner-summary-source-grid, - .equipment-planner-display-grid, - .equipment-planner-add-form, - .equipment-planner-trait-form, - .equipment-planner-material-form, - .equipment-planner-socket-form, - .equipment-planner-bonus-form { - grid-template-columns: 1fr; - } - - .equipment-planner-line { - grid-template-columns: 30px minmax(0, 1fr) 34px 30px; - } - - .equipment-planner-include-switch { - grid-column: 2 / -1; - justify-self: start; - } - - .equipment-planner-details { - padding-left: 0; - } - - .equipment-planner-trait, - .equipment-planner-materials li { - grid-template-columns: 1fr; - } -} - -.combos-module { - display: grid; - gap: 12px; - padding: var(--space-4); -} - -.combos-editor { - display: grid; - gap: 12px; -} - -.combos-device-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 10px; - align-items: end; -} - -.combos-device-row label, -.combos-form-grid label { - display: grid; - gap: 6px; - min-width: 0; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.combos-device-row select, -.combos-form-grid select, -.combos-form-grid input { - min-width: 0; -} - -.combos-keyboard-layout-switch { - display: inline-flex; - width: fit-content; - align-items: center; - padding: 4px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.26); -} - -.combos-keyboard-layout-switch button { - min-height: 34px; - padding: 0 10px; - border: 1px solid transparent; - border-radius: var(--radius-sm); - background: transparent; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.combos-keyboard-layout-switch button.active { - border-color: rgba(246, 196, 83, 0.26); - background: rgba(246, 196, 83, 0.1); - color: var(--color-text-primary); -} - -.combos-add-form { - display: grid; - gap: 12px; -} - -.combos-form-grid { - display: grid; - grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); - gap: 10px; -} - -.combo-draft-panel { - display: grid; - gap: 10px; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.32); -} - -.combo-draft-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} - -.combos-simultaneous-toggle { - display: inline-flex; - width: auto; - min-width: 116px; - min-height: 34px; - padding: 3px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.26); - color: var(--color-text-secondary); - justify-content: stretch; - gap: 3px; -} - -.combos-simultaneous-toggle span { - display: inline-grid; - min-width: 50px; - min-height: 26px; - place-items: center; - border-radius: var(--radius-sm); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.combos-simultaneous-toggle span.active { - background: rgba(246, 196, 83, 0.12); - color: var(--color-text-primary); -} - -.combo-draft-actions .primary { - min-width: 104px; -} - -.combos-palette { - display: grid; - grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr); - gap: 10px; -} - -.combos-palette-column { - display: grid; - align-content: start; - gap: 10px; - min-width: 0; -} - -.combos-palette-group { - display: grid; - gap: 8px; - min-width: 0; - padding: 9px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.24); -} - -.combos-palette-group > span { - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.combos-palette-group > div { - display: flex; - flex-wrap: wrap; - gap: 7px; -} - -.combos-palette-group.is-direction-grid > div { - display: grid; - width: fit-content; - grid-template-columns: repeat(3, max-content); - gap: 7px; -} - -.combo-palette-empty-cell { - display: block; - width: 34px; - height: 38px; -} - -.combos-custom-key-form { - grid-template-columns: minmax(0, 1fr) auto; -} - -.combos-category-list { - display: grid; - gap: 10px; -} - -.combos-category-title { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 8px; -} - -.combos-category-title h3 { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.combos-category-header .combos-category-title { - gap: 6px; -} - -.combos-category-boundary-drop-zone { - min-height: 10px; - border: 1px dashed rgba(165, 180, 252, 0.16); - border-radius: var(--radius-sm); - background: rgba(15, 23, 42, 0.12); -} - -.combos-category-boundary-drop-zone.is-drop-target { - border: 1px dashed rgba(246, 196, 83, 0.72); - background: rgba(246, 196, 83, 0.08); - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24); -} - -.combos-list { - display: grid; - gap: 8px; -} - -.combo-card { - position: relative; - display: grid; - grid-template-columns: 30px minmax(0, 1fr) auto; - gap: 8px; - align-items: start; - padding: 8px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.combo-card.is-editing { - grid-template-columns: 30px minmax(0, 1fr) auto; -} - -.combo-drag-handle { - align-self: start; - touch-action: none; - user-select: none; -} - -.combo-card-main { - display: grid; - gap: 7px; - min-width: 0; -} - -.combo-title-input { - color: var(--color-text-primary); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.combo-card-actions { - display: flex; - gap: 6px; - align-self: start; -} - -.combo-save-actions { - display: inline-flex; - gap: 8px; - margin-left: auto; -} - -.combo-cancel-button { - min-width: 104px; - min-height: 34px; - padding: 0 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.64); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.combo-sequence { - display: flex; - flex-wrap: wrap; - row-gap: 6px; - column-gap: 5px; - align-items: center; - min-width: 0; -} - -.combo-step, -.combo-step-inputs, -.combo-step-input { - display: inline-flex; - align-items: center; - gap: 5px; -} - -.combo-step { - min-width: 0; -} - -.combo-step-input.is-selected .combo-input-token { - box-shadow: - var(--combo-token-shadow), - 0 0 0 2px rgba(246, 196, 83, 0.22); -} - -.combo-step-input.is-selected .combo-input-token.has-hold { - box-shadow: - var(--combo-token-shadow), - 0 0 0 2px rgba(246, 196, 83, 0.22), - 7px 0 0 -1px var(--combo-hold-shadow), - 9px 0 6px -3px var(--combo-hold-shadow); -} - -.combo-step-inputs { - min-height: 42px; - padding: 3px; - border: 1px solid transparent; - border-radius: var(--radius-pill); - background: transparent; -} - -button.combo-step-inputs { - min-width: 0; - min-height: 42px; - color: inherit; - cursor: pointer; -} - -.combo-step-inputs.is-single { - min-height: 38px; - padding: 0; -} - -.combo-step-inputs.is-simultaneous { - padding: 5px; - border-color: rgba(246, 196, 83, 0.34); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.07), transparent 64%), - rgba(5, 7, 17, 0.28); -} - -.combo-step-inputs.is-active { - border-color: rgba(139, 92, 246, 0.72); - background: rgba(139, 92, 246, 0.08); - box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12); -} - -.combo-step-inputs.is-single.is-active { - border-color: transparent; - background: transparent; - box-shadow: none; -} - -.combo-step-inputs.is-single.is-active .combo-input-token { - box-shadow: - var(--combo-token-shadow), - 0 0 0 2px rgba(139, 92, 246, 0.18); -} - -.combo-step-inputs.is-single.is-active .combo-input-token.has-hold { - box-shadow: - var(--combo-token-shadow), - 0 0 0 2px rgba(139, 92, 246, 0.18), - 7px 0 0 -1px var(--combo-hold-shadow), - 9px 0 6px -3px var(--combo-hold-shadow); -} - -.combo-step-separator, -.combo-plus { - color: var(--color-text-muted); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.combo-step-separator { - margin-inline: 1px; -} - -.combo-empty-sequence { - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 700; -} - -.combo-empty-step { - padding: 0 8px; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.combo-input-token { - --combo-token-bg: rgba(21, 26, 48, 0.82); - --combo-token-border: rgba(165, 180, 252, 0.22); - --combo-token-color: var(--color-text-primary); - --combo-token-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); - --combo-hold-shadow: rgba(125, 135, 159, 0.34); - display: inline-flex; - box-sizing: border-box; - width: 34px; - min-width: 34px; - height: 34px; - min-height: 34px; - align-items: center; - justify-content: center; - padding: 0; - border: 1px solid var(--combo-token-border); - border-radius: 50%; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent), - var(--combo-token-bg); - color: var(--combo-token-color); - font-size: 12px; - font-weight: 950; - line-height: 1; - box-shadow: var(--combo-token-shadow); -} - -button.combo-input-token { - min-width: 36px; - min-height: 36px; - width: 36px; - height: 36px; - padding: 0; - cursor: pointer; -} - -button.combo-input-token:hover { - border-color: var(--color-primary-border); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent), - rgba(32, 39, 69, 0.92); -} - -.combo-input-token span { - display: block; - overflow: hidden; - max-width: 100%; - text-overflow: ellipsis; - white-space: nowrap; -} - -.combo-input-token .ui-icon { - width: 17px; - height: 17px; -} - -.combo-input-token.has-hold { - position: relative; - box-shadow: - var(--combo-token-shadow), - 7px 0 0 -1px var(--combo-hold-shadow), - 9px 0 6px -3px var(--combo-hold-shadow); -} - -.combo-input-hold { - position: absolute; - right: -7px; - bottom: -6px; - min-width: 20px; - padding: 1px 4px; - border: 1px solid rgba(246, 196, 83, 0.34); - border-radius: var(--radius-pill); - background: rgba(5, 7, 17, 0.92); - color: var(--color-accent-gold); - font-size: 9px; - font-style: normal; - font-weight: 950; - line-height: 1.2; - text-align: center; -} - -.combo-input-key, -.combo-input-mouse, -.combo-value-options, -.combo-value-share, -.combo-value-start, -.combo-value-menu, -.combo-value-view, -.combo-value-c-up, -.combo-value-c-down, -.combo-value-c-left, -.combo-value-c-right { - width: auto; - min-width: 48px; - padding: 0 10px; - border-radius: var(--radius-sm); -} - -.combo-input-short { - width: 36px; - min-width: 36px; - padding: 0; -} - -button.combo-input-token.combo-input-short { - width: 36px; - min-width: 36px; - padding: 0; -} - -button.combo-input-token.combo-input-key, -button.combo-input-token.combo-input-mouse, -button.combo-input-token.combo-value-options, -button.combo-input-token.combo-value-share, -button.combo-input-token.combo-value-start, -button.combo-input-token.combo-value-menu, -button.combo-input-token.combo-value-view, -button.combo-input-token.combo-value-c-up, -button.combo-input-token.combo-value-c-down, -button.combo-input-token.combo-value-c-left, -button.combo-input-token.combo-value-c-right { - width: auto; - min-width: 48px; - padding: 0 10px; -} - -button.combo-input-token.combo-input-short { - width: 36px; - min-width: 36px; - padding: 0; -} - -.combo-input-key span, -.combo-input-mouse span, -.combo-value-options span, -.combo-value-share span, -.combo-value-start span, -.combo-value-menu span, -.combo-value-view span, -.combo-value-c-up span, -.combo-value-c-down span, -.combo-value-c-left span, -.combo-value-c-right span { - text-overflow: clip; -} - -.combo-input-mouse, -button.combo-input-token.combo-input-mouse { - min-width: 62px; -} - -.combo-value-l1, -.combo-value-r1, -.combo-value-l2, -.combo-value-r2, -.combo-value-l3, -.combo-value-r3, -.combo-value-lb, -.combo-value-rb, -.combo-value-lt, -.combo-value-rt, -.combo-value-ls, -.combo-value-rs, -.combo-value-zl, -.combo-value-zr { - width: 38px; - min-width: 38px; - height: 38px; - padding: 0; - font-size: 11px; -} - -.combo-input-key { - height: 32px; - border-radius: 7px; - background: - linear-gradient(180deg, rgba(245, 247, 255, 0.11), rgba(5, 7, 17, 0.18)), - rgba(16, 20, 38, 0.94); - box-shadow: - inset 0 -3px 0 rgba(0, 0, 0, 0.28), - 0 1px 0 rgba(245, 247, 255, 0.08); -} - -.combo-value-ctrl, -.combo-value-alt, -.combo-value-shift, -.combo-value-enter, -.combo-value-tab { - min-width: 58px; -} - -.combo-value-space { - min-width: 92px; -} - -.combo-input-direction { - --combo-token-bg: - radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.26), transparent 64%), - rgba(34, 211, 238, 0.12); - --combo-token-border: rgba(34, 211, 238, 0.52); - --combo-token-color: #67e8f9; - --combo-token-shadow: - inset 0 -2px 0 rgba(0, 0, 0, 0.24), - inset 0 0 0 1px rgba(34, 211, 238, 0.16); - font-size: 15px; -} - -button.combo-input-token.combo-input-direction:hover { - border-color: rgba(34, 211, 238, 0.72); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent), - radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.34), transparent 64%), - rgba(18, 52, 70, 0.76); -} - -.combo-device-n64.combo-value-stick-up-left, -.combo-device-n64.combo-value-stick-up, -.combo-device-n64.combo-value-stick-up-right, -.combo-device-n64.combo-value-stick-left, -.combo-device-n64.combo-value-stick-right, -.combo-device-n64.combo-value-stick-down-left, -.combo-device-n64.combo-value-stick-down, -.combo-device-n64.combo-value-stick-down-right { - --combo-token-bg: - radial-gradient(circle at 38% 30%, rgba(245, 247, 255, 0.2), transparent 28%), - radial-gradient(circle at 50% 54%, rgba(34, 211, 238, 0.3), transparent 66%), - rgba(14, 75, 94, 0.68); - --combo-token-border: rgba(34, 211, 238, 0.62); - --combo-token-color: #a5f3fc; - --combo-token-shadow: - inset 0 -3px 0 rgba(0, 0, 0, 0.24), - inset 0 0 0 1px rgba(34, 211, 238, 0.18); -} - -.combo-device-n64.combo-value-up-left, -.combo-device-n64.combo-value-up, -.combo-device-n64.combo-value-up-right, -.combo-device-n64.combo-value-left, -.combo-device-n64.combo-value-right, -.combo-device-n64.combo-value-down-left, -.combo-device-n64.combo-value-down, -.combo-device-n64.combo-value-down-right { - --combo-token-bg: - linear-gradient(180deg, rgba(246, 196, 83, 0.12), transparent), - rgba(31, 34, 54, 0.92); - --combo-token-border: rgba(246, 196, 83, 0.48); - --combo-token-color: #f8d982; - --combo-token-shadow: - inset 0 -3px 0 rgba(0, 0, 0, 0.28), - inset 0 0 0 1px rgba(246, 196, 83, 0.14); - border-radius: 10px; -} - -button.combo-device-n64.combo-value-stick-up-left:hover, -button.combo-device-n64.combo-value-stick-up:hover, -button.combo-device-n64.combo-value-stick-up-right:hover, -button.combo-device-n64.combo-value-stick-left:hover, -button.combo-device-n64.combo-value-stick-right:hover, -button.combo-device-n64.combo-value-stick-down-left:hover, -button.combo-device-n64.combo-value-stick-down:hover, -button.combo-device-n64.combo-value-stick-down-right:hover { - border-color: rgba(34, 211, 238, 0.78); -} - -button.combo-device-n64.combo-value-up-left:hover, -button.combo-device-n64.combo-value-up:hover, -button.combo-device-n64.combo-value-up-right:hover, -button.combo-device-n64.combo-value-left:hover, -button.combo-device-n64.combo-value-right:hover, -button.combo-device-n64.combo-value-down-left:hover, -button.combo-device-n64.combo-value-down:hover, -button.combo-device-n64.combo-value-down-right:hover { - border-color: rgba(246, 196, 83, 0.7); - background: - linear-gradient(180deg, rgba(246, 196, 83, 0.16), transparent), - rgba(38, 40, 62, 0.96); -} - -.combo-device-playstation.combo-value-triangle { - --combo-token-bg: rgba(55, 214, 122, 0.16); - --combo-token-border: rgba(55, 214, 122, 0.4); - --combo-token-color: #37d67a; -} - -.combo-device-playstation.combo-value-circle { - --combo-token-bg: rgba(248, 113, 113, 0.16); - --combo-token-border: rgba(248, 113, 113, 0.4); - --combo-token-color: #f87171; -} - -.combo-device-playstation.combo-value-cross { - --combo-token-bg: rgba(96, 165, 250, 0.16); - --combo-token-border: rgba(96, 165, 250, 0.4); - --combo-token-color: #60a5fa; -} - -.combo-device-playstation.combo-value-square { - --combo-token-bg: rgba(244, 114, 182, 0.16); - --combo-token-border: rgba(244, 114, 182, 0.4); - --combo-token-color: #f472b6; -} - -.combo-device-xbox.combo-value-a { - --combo-token-bg: rgba(101, 212, 110, 0.16); - --combo-token-border: rgba(101, 212, 110, 0.4); - --combo-token-color: #65d46e; -} - -.combo-device-xbox.combo-value-b { - --combo-token-bg: rgba(239, 68, 68, 0.16); - --combo-token-border: rgba(239, 68, 68, 0.4); - --combo-token-color: #ef4444; -} - -.combo-device-xbox.combo-value-x { - --combo-token-bg: rgba(59, 130, 246, 0.16); - --combo-token-border: rgba(59, 130, 246, 0.4); - --combo-token-color: #3b82f6; -} - -.combo-device-xbox.combo-value-y { - --combo-token-bg: rgba(250, 204, 21, 0.16); - --combo-token-border: rgba(250, 204, 21, 0.42); - --combo-token-color: #facc15; -} - -.combo-device-switch.combo-value-a, -.combo-device-switch.combo-value-x { - --combo-token-bg: rgba(239, 68, 68, 0.14); - --combo-token-border: rgba(239, 68, 68, 0.36); - --combo-token-color: #fca5a5; -} - -.combo-device-switch.combo-value-b, -.combo-device-switch.combo-value-y { - --combo-token-bg: rgba(34, 211, 238, 0.14); - --combo-token-border: rgba(34, 211, 238, 0.34); - --combo-token-color: var(--color-accent-cyan); -} - -.combo-device-switch.combo-value-l, -.combo-device-switch.combo-value-r, -.combo-device-switch.combo-value-zl, -.combo-device-switch.combo-value-zr { - --combo-token-bg: rgba(245, 247, 255, 0.1); - --combo-token-border: rgba(245, 247, 255, 0.28); -} - -.combo-device-n64.combo-value-a { - --combo-token-bg: rgba(34, 197, 94, 0.18); - --combo-token-color: #86efac; -} - -.combo-device-n64.combo-value-b { - --combo-token-bg: rgba(59, 130, 246, 0.18); - --combo-token-color: #93c5fd; -} - -.combo-device-n64.combo-value-c-up, -.combo-device-n64.combo-value-c-down, -.combo-device-n64.combo-value-c-left, -.combo-device-n64.combo-value-c-right { - --combo-token-bg: rgba(246, 196, 83, 0.2); - --combo-token-border: rgba(246, 196, 83, 0.42); - --combo-token-color: var(--color-accent-gold); -} - -.combo-device-n64.combo-value-start { - --combo-token-bg: rgba(239, 68, 68, 0.16); - --combo-token-color: #fca5a5; -} - -.combo-value-fist, -.combo-value-foot, -.combo-value-grab, -.combo-value-protect, -.combo-value-shoot { - --combo-token-bg: rgba(217, 70, 239, 0.14); - --combo-token-border: rgba(217, 70, 239, 0.34); - --combo-token-color: var(--color-accent-pink); -} - -.combo-value-grab .ui-icon { - width: 24px; - height: 22px; -} - -button.combo-input-token.combo-value-grab .ui-icon { - width: 25px; - height: 23px; -} - -.combo-hold-field { - display: inline-flex; - align-items: center; - margin: 0; -} - -.combo-hold-controls { - display: inline-flex; - width: 92px; - min-width: 92px; - min-height: 34px; - align-items: center; - justify-content: stretch; - gap: 3px; - padding: 3px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.26); -} - -.combo-hold-controls button { - min-width: 50px; - min-height: 26px; - padding: 0; - border: 1px solid transparent; - border-radius: var(--radius-sm); - background: transparent; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.combo-hold-controls button.active { - border-color: rgba(246, 196, 83, 0.34); - background: rgba(246, 196, 83, 0.12); - color: var(--color-text-primary); -} - -.combo-hold-controls button:disabled { - cursor: not-allowed; - opacity: 0.48; -} - -.combo-hold-field input { - box-sizing: border-box; - width: 26px; - min-width: 26px; - height: 26px; - min-height: 26px; - margin: 0; - padding: 0 3px; - border: 1px solid transparent; - border-color: transparent; - border-radius: var(--radius-sm); - background: transparent; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - line-height: 1; - text-align: center; -} - -.combo-hold-field input:focus { - border-color: rgba(246, 196, 83, 0.34); -} - -.combo-hold-field input { - appearance: textfield; - -moz-appearance: textfield; -} - -.combo-hold-field input::-webkit-outer-spin-button, -.combo-hold-field input::-webkit-inner-spin-button { - margin: 0; - appearance: none; - -webkit-appearance: none; -} - -.counters-add-form { - grid-template-columns: minmax(0, 1fr) auto; -} - -.counters-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 220px)); - justify-content: start; - gap: 10px; - margin: var(--space-4); -} - -.counter-item { - position: relative; - display: grid; - min-height: 106px; - align-content: space-between; - gap: 12px; - padding: 12px 52px 12px 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 58%), - rgba(7, 10, 24, 0.42); -} - -.counter-drag-handle { - position: absolute; - top: 10px; - right: 10px; - display: inline-grid; - width: 34px; - min-width: 34px; - min-height: 34px; - place-items: center; - padding: 0; - color: var(--color-text-muted); - cursor: grab; - touch-action: none; - user-select: none; -} - -.counter-value { - display: grid; - gap: 3px; - min-width: 0; -} - -.counter-item strong { - color: var(--color-text-primary); - font-size: 34px; - font-weight: 900; - line-height: 0.95; -} - -.counter-item span { - overflow: hidden; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; -} - -.counter-actions { - display: grid; - grid-template-columns: repeat(4, 34px); - justify-content: start; - gap: 8px; -} - -.counter-actions button { - width: 34px; - min-width: 34px; - min-height: 34px; - padding: 0; - font-weight: 900; -} - -.calculator-module, -.timer-module { - display: grid; - grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); - column-gap: var(--space-6); - row-gap: var(--space-4); - align-items: start; - overflow: hidden; - padding: var(--space-4); -} - -.calculator-exchange-panel, -.timer-exchange-panel, -.table-exchange-panel { - grid-column: 1 / -1; - padding: 0; -} - -.calculator-form { - display: grid; - grid-template-columns: 1fr; - align-self: start; - align-content: start; - min-width: 0; - min-height: 0; -} - -.calculator-card, -.tool-split-results, -.timer-control-card, -.timer-results-card { - display: grid; - width: 100%; - max-width: 100%; - min-width: 0; - min-height: 0; - overflow: hidden; - padding: 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 62%), - rgba(7, 10, 24, 0.3); -} - -.timer-control-card, -.timer-results-card { - align-self: start; - gap: var(--space-3); -} - -.timer-tabs { - width: fit-content; - grid-template-columns: repeat(2, 40px); -} - -.timer-tabs button { - width: 40px; - min-width: 40px; - min-height: 36px; - padding: 0; -} - -.timer-control-panel { - display: grid; - min-height: 170px; - align-content: center; - gap: var(--space-2); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%), - rgba(5, 7, 17, 0.5); -} - -.timer-countdown-form { - align-content: start; -} - -.timer-countdown-form label, -.timer-control-panel > label { - display: grid; - gap: 7px; -} - -.timer-field-spacer { - display: block; - min-height: 17px; -} - -.timer-countdown-form input, -.timer-countdown-form select, -.timer-control-panel input { - width: 100%; -} - -.timer-countdown-form select { - appearance: none; - -webkit-appearance: none; - overflow: hidden; - padding-right: 34px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - color: var(--color-text-primary); - text-overflow: ellipsis; - background-image: - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), - linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(31, 41, 78, 0.12)), - linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.72)); - background-position: - calc(100% - 14px) 50%, - 0 0, - 0 0; - background-size: - 12px 12px, - auto, - auto; - background-repeat: no-repeat; -} - -.timer-countdown-form select option { - background: #11182f; - color: var(--color-text-primary); -} - -.timer-countdown-form select, -.task-planner-settings select, -.task-planner-add-form select, -.task-planner-type-select, -.task-planner-reset-override select, -.task-planner-relations select { - appearance: none; - -webkit-appearance: none; - overflow: hidden; - padding-right: 34px; - text-overflow: ellipsis; - background-image: - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c4b5fd' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), - linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(31, 41, 78, 0.08)), - linear-gradient(rgba(21, 26, 48, 0.38), rgba(21, 26, 48, 0.38)); - background-position: - calc(100% - 10px) 50%, - 0 0, - 0 0; - background-size: - 11px 11px, - auto, - auto; - background-repeat: no-repeat; -} - -.timer-countdown-form select:hover, -.timer-countdown-form select:focus, -.task-planner-settings select:hover, -.task-planner-settings select:focus, -.task-planner-add-form select:hover, -.task-planner-add-form select:focus, -.task-planner-type-select:hover, -.task-planner-type-select:focus, -.task-planner-reset-override select:hover, -.task-planner-reset-override select:focus, -.task-planner-relations select:hover, -.task-planner-relations select:focus { - border-color: rgba(196, 181, 253, 0.22); - background-image: - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f6c453' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), - linear-gradient(135deg, rgba(246, 196, 83, 0.06), rgba(139, 92, 246, 0.08)), - linear-gradient(rgba(21, 26, 48, 0.58), rgba(21, 26, 48, 0.58)); - color: var(--color-text-primary); -} - -.time-parts-input { - display: grid; - grid-template-columns: minmax(34px, 1fr) 4px minmax(34px, 1fr) 4px minmax(34px, 1fr); - align-items: center; - min-height: 44px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(15, 23, 42, 0.64); - overflow: hidden; -} - -.time-parts-input:focus-within { - border-color: var(--color-primary); - box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); -} - -.time-parts-input input { - width: auto; - min-width: 0; - min-height: 42px; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - text-align: center; - box-shadow: none; -} - -.time-parts-input input:focus { - border-color: transparent; - box-shadow: none; -} - -.time-parts-input input:focus-visible { - outline: 0; - outline-offset: 0; -} - -.time-parts-input span { - color: var(--color-text-muted); - font-weight: 900; - text-align: center; -} - -.timer-interval-fields { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--space-2); - min-width: 0; -} - -.timer-interval-fields label { - min-width: 0; - gap: 5px; -} - -.timer-interval-fields .time-parts-input { - grid-template-columns: minmax(22px, 1fr) 4px minmax(22px, 1fr) 4px minmax(22px, 1fr); - min-height: 38px; -} - -.timer-interval-fields .time-parts-input input { - min-height: 36px; - font-size: var(--font-size-xs); -} - -.timer-interval-fields .time-parts-input span { - font-size: var(--font-size-xs); -} - -.timer-form-error { - display: inline-flex; - width: 100%; - min-width: 0; - align-items: center; - gap: 7px; - padding: 7px 9px; - border: 1px solid rgba(251, 113, 133, 0.26); - border-radius: var(--radius-sm); - background: rgba(80, 25, 42, 0.28); - color: var(--color-danger); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.timer-form-error .ui-icon { - width: 13px; - height: 13px; - flex: 0 0 auto; -} - -.timer-form-error span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.timer-control-panel > span, -.timer-control-panel label span { - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.timer-control-panel strong { - color: var(--color-text-primary); - min-width: 0; - overflow: hidden; - font-weight: 950; - line-height: 0.95; -} - -.timer-value { - display: inline-flex; - min-width: 0; - align-items: baseline; - gap: 0.16em; - font-variant-numeric: tabular-nums; - letter-spacing: 0; - white-space: nowrap; -} - -.timer-value > span { - min-width: 0; -} - -.timer-control-panel .timer-value.is-compact { - max-width: 100%; -} - -.timer-value small { - color: var(--color-text-secondary); - font-size: inherit; - font-weight: 900; - line-height: 1; - flex: 0 0 auto; -} - -.timer-value.is-compact small { - display: inline-block; - font-size: 0.5em; - transform: translateY(-0.08em); -} - -.timer-value.is-compact { - font-size: clamp(1.45rem, 2.25vw, 2rem); -} - -.timer-control-panel p, -.timer-results-card p { - margin: 0; -} - -.timer-actions { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); -} - -.timer-action-button, -.timer-actions .danger { - display: inline-flex; - width: 40px; - min-width: 40px; - min-height: 40px; - align-items: center; - justify-content: center; - padding: 0; -} - -.timer-list-item.is-expired { - opacity: 0.78; -} - -.timer-entry-meta { - display: flex; - grid-column: 1 / -2; - flex-wrap: nowrap; - min-width: 0; - gap: 4px 8px; - margin: 0; - padding: 1px 10px 0; - opacity: 0.68; - overflow: hidden; -} - -.timer-entry-summary .timer-value, -.timer-entry-value .timer-value { - color: var(--color-text-primary); - font-size: var(--font-size-md); - font-weight: 900; -} - -.timer-entry-summary { - min-width: 0; - cursor: pointer; -} - -.timer-entry-line { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - width: 100%; - max-width: 100%; - min-width: 0; - gap: var(--space-2); - align-items: center; - overflow: hidden; -} - -.timer-entry.has-inline-reset .timer-entry-line { - grid-template-columns: max-content minmax(0, 1fr) auto; -} - -.timer-entry.has-inline-controls .timer-entry-line { - grid-template-columns: max-content minmax(0, 1fr) auto; -} - -.timer-entry.has-single-action { - grid-template-columns: minmax(0, 1fr) 34px; -} - -.timer-entry.has-drag-handle { - grid-template-columns: 30px minmax(0, 1fr) 34px; -} - -.tool-split-entry-list li.is-editing > .timer-entry.has-single-action { - grid-template-columns: auto minmax(0, 1fr) 34px; -} - -.tool-split-entry-list li.is-editing > .timer-entry.has-drag-handle { - grid-template-columns: 30px auto minmax(0, 1fr) 34px; -} - -.timer-drag-handle { - width: 30px; - min-width: 30px; - min-height: 36px; - padding: 0; - color: var(--color-text-muted); - cursor: grab; - touch-action: none; - user-select: none; -} - -.timer-inline-reset { - width: 26px; - min-width: 26px; - min-height: 26px; - padding: 0; - border-color: rgba(165, 180, 252, 0.08); - border-radius: var(--radius-sm); - background: rgba(5, 7, 17, 0.26); - color: var(--color-text-muted); -} - -.timer-inline-refresh-toggle { - display: inline-grid; - grid-template-columns: 13px 18px; - width: 42px; - min-width: 42px; - min-height: 26px; - align-items: center; - gap: 3px; - padding: 0 4px; - border-color: rgba(165, 180, 252, 0.08); - border-radius: var(--radius-sm); - background: rgba(5, 7, 17, 0.26); - color: var(--color-text-muted); -} - -.timer-inline-refresh-toggle i { - position: relative; - display: block; - width: 18px; - height: 12px; - border: 1px solid rgba(165, 180, 252, 0.18); - border-radius: var(--radius-pill); - background: rgba(7, 10, 24, 0.72); -} - -.timer-inline-refresh-toggle i::before { - content: ""; - position: absolute; - top: 50%; - left: 2px; - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--color-text-muted); - transform: translateY(-50%); - transition: - left var(--duration-fast) var(--ease-standard), - background-color var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -.timer-inline-reset .ui-icon, -.timer-inline-refresh-toggle .ui-icon { - width: 14px; - height: 14px; -} - -.timer-inline-controls { - display: inline-flex; - min-width: 0; - align-items: center; - justify-content: flex-end; - gap: 4px; -} - -.timer-entry-line > span:nth-child(2) { - min-width: 0; - overflow: hidden; - color: var(--color-text-secondary); - font-weight: 600; - text-overflow: ellipsis; - white-space: nowrap; -} - -.timer-lap-label { - font-weight: 700; -} - -.timer-lap-label::placeholder { - color: rgba(229, 235, 255, 0.72); -} - -.timer-entry-meta span { - display: inline-flex; - align-items: center; - gap: 7px; - min-width: 0; - overflow: hidden; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.timer-list-item em { - display: inline-flex; - align-items: center; - gap: 7px; - flex: 0 0 auto; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-style: normal; - font-weight: 700; - white-space: nowrap; -} - -.timer-entry-meta b { - min-width: 0; - overflow: hidden; - font: inherit; - text-overflow: ellipsis; - white-space: nowrap; -} - -.timer-entry-meta b + b::before, -.timer-entry-meta em::before { - content: ""; - display: inline-block; - width: 1px; - height: 10px; - margin-right: 7px; - background: rgba(165, 180, 252, 0.22); - vertical-align: -1px; -} - -.timer-results-card { - min-height: 260px; -} - -.timer-results-card.is-scrollable { - max-height: 450px; - overflow: hidden; -} - -.calculator-card { - gap: 10px; - align-self: start; - align-content: start; -} - -.calculator-form label, -.calculator-result { - display: grid; - width: 100%; - min-width: 0; - gap: 7px; -} - -.calculator-card > *, -.calculator-form input { - width: 100%; - min-width: 0; - max-width: 100%; -} - -.calculator-entry.has-drag-handle { - grid-template-columns: 30px minmax(0, 1fr) 34px 34px; -} - -.tool-split-entry-list li.is-editing > .calculator-entry.has-drag-handle { - grid-template-columns: 30px auto minmax(0, 1fr) 34px 34px; -} - -.calculator-drag-handle { - width: 30px; - min-width: 30px; - min-height: 36px; - padding: 0; - color: var(--color-text-muted); - cursor: grab; - touch-action: none; - user-select: none; -} - -.calculator-entry .tool-split-entry-summary > span { - display: flex; - min-width: 0; - align-items: baseline; - gap: 7px; -} - -.calculator-entry .tool-split-entry-summary strong, -.calculator-entry .tool-split-entry-value strong { - min-width: 0; - overflow: visible; - font-variant-numeric: tabular-nums; - white-space: nowrap; -} - -.calculator-entry .tool-split-entry-summary strong { - flex: 0 0 auto; - font-size: var(--font-size-sm); -} - -.calculator-entry .tool-split-entry-summary strong.is-long, -.calculator-entry .tool-split-entry-value strong.is-long { - font-size: var(--font-size-xs); -} - -.calculator-entry .tool-split-entry-summary strong.is-compact, -.calculator-entry .tool-split-entry-value strong.is-compact { - font-size: 0.68rem; -} - -.calculator-entry .tool-split-entry-summary em { - min-width: 0; - flex: 1 1 auto; - overflow: hidden; - color: var(--color-text-secondary); - font-style: normal; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calculator-number-group { - color: var(--color-text-primary); -} - -.calculator-number-group.is-muted, -.calculator-number-separator { - color: rgba(215, 221, 237, 0.84); -} - -.calculator-number-separator { - display: inline-block; - min-width: 0.24em; -} - -.calculator-form label span, -.calculator-result span, -.tool-split-root-button { - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 700; -} - -.calculator-result { - min-height: 72px; - justify-content: stretch; - padding: 12px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%), - rgba(5, 7, 17, 0.56); -} - -.calculator-result strong { - display: block; - min-width: 0; - max-width: 100%; - overflow: visible; - color: var(--color-text-primary); - font-size: clamp(1.55rem, 3vw, 2.15rem); - font-variant-numeric: tabular-nums; - font-weight: 900; - line-height: 0.95; - text-align: right; - white-space: nowrap; -} - -.calculator-result.is-long strong { - font-size: 1.18rem; - line-height: 1; -} - -.calculator-result.is-compact strong { - font-size: 0.92rem; - line-height: 1.05; -} - -.table-module { - display: grid; - gap: var(--space-3); - min-width: 0; - padding: var(--space-4); -} - -.table-toolbar { - justify-content: space-between; -} - -.table-controls { - flex: 1 1 auto; -} - -.table-size-indicator { - min-height: 34px; - display: inline-flex; - align-items: center; - padding: 0 8px; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; -} - -.table-copy-group { - margin-left: auto; -} - -.table-copy-group.notepad-toolbar-group { - padding-right: 0; - border-right: 0; -} - -.table-copy-button.notepad-toolbar-button { - display: inline-flex; - width: auto; - min-width: 0; - align-items: center; - gap: 8px; - padding-inline: 10px; -} - -.table-copy-button span { - white-space: nowrap; -} - -.table-grid-wrap { - width: 100%; - min-width: 0; - overflow: auto; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%), - rgba(7, 10, 24, 0.24); -} - -.table-grid { - display: grid; - grid-template-columns: var(--table-columns); - width: 100%; - min-width: var(--table-min-width); - align-items: stretch; - justify-content: start; -} - -.table-grid > * { - min-width: 0; -} - -.table-corner, -.table-header-cell, -.table-row-header { - display: grid; - min-height: 34px; - place-items: center; - border-right: 1px solid rgba(165, 180, 252, 0.1); - border-bottom: 1px solid rgba(165, 180, 252, 0.1); - background: rgba(5, 7, 17, 0.54); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - font-variant-numeric: tabular-nums; -} - -.table-header-input { - width: 100%; - padding: 0 8px; - border-top: 0; - border-left: 0; - border-radius: 0; - text-align: center; -} - -.table-header-input::placeholder { - color: var(--color-text-muted); - opacity: 1; -} - -.table-header-input:hover { - background: rgba(21, 26, 48, 0.68); -} - -.table-header-input:focus { - z-index: 5; - border-color: rgba(246, 196, 83, 0.38); - background: rgba(21, 26, 48, 0.8); - color: var(--color-text-primary); - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.55), 0 0 0 2px rgba(139, 92, 246, 0.18); - outline: 0; -} - -.table-header-cell { - position: sticky; - top: 0; - z-index: 2; -} - -.table-row-header { - position: sticky; - left: 0; - z-index: 1; -} - -.table-corner { - position: sticky; - top: 0; - left: 0; - z-index: 3; -} - -.table-cell-input { - width: 100%; - min-width: 0; - min-height: 34px; - padding: 6px 8px; - border: 0; - border-right: 1px solid rgba(165, 180, 252, 0.08); - border-bottom: 1px solid rgba(165, 180, 252, 0.08); - border-radius: 0; - background: rgba(16, 20, 38, 0.34); - color: var(--color-text-primary); - caret-color: transparent; - font-size: var(--font-size-sm); - font-variant-numeric: tabular-nums; -} - -.table-cell-input:hover { - background: rgba(32, 39, 69, 0.38); -} - -.table-cell-input:focus { - position: relative; - z-index: 4; - border-color: rgba(34, 211, 238, 0.42); - background: - linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(139, 92, 246, 0.06)), - rgba(21, 26, 48, 0.58); - box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.58); - outline: 0; -} - -.table-cell-input.is-editing:focus { - border-color: rgba(246, 196, 83, 0.38); - background: rgba(21, 26, 48, 0.72); - caret-color: auto; - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.55), 0 0 0 2px rgba(139, 92, 246, 0.18); -} - -.table-cell-input.is-formula { - color: var(--color-accent-cyan); -} - -.table-cell-input.has-error { - color: #fecaca; - background: rgba(127, 29, 29, 0.24); -} - -.table-cell-input.is-selected { - background: - linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.08)), - rgba(21, 26, 48, 0.58); - box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.42); -} - -.table-cell-input.is-move-target { - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.14), rgba(34, 211, 238, 0.08)), - rgba(21, 26, 48, 0.64); - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.66); - cursor: move; -} - -.table-cell-input.is-selected:focus { - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.6), 0 0 0 2px rgba(34, 211, 238, 0.2); -} - -.table-cell-input.is-selected:focus:not(.is-editing) { - box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.68); -} - -.table-cell-input.is-referenced { - box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.72); -} - -.tool-split-results { - grid-template-rows: auto minmax(0, 1fr); - gap: var(--space-3); - overflow: visible; - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%), - rgba(7, 10, 24, 0.22); -} - -.calculator-saved.is-scrollable { - height: var(--calculator-scroll-height, auto); - max-height: var(--calculator-scroll-height, none); - overflow: hidden; -} - -.tool-split-actions { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); - align-items: center; - justify-content: flex-end; - min-width: 0; -} - -.tool-split-root-button { - width: fit-content; - min-height: 34px; - padding: 0 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.24); -} - -.tool-split-action-button, -.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value), -.counter-actions button, -.link-item button { - display: inline-flex; - width: 34px; - min-width: 34px; - min-height: 34px; - align-items: center; - justify-content: center; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.88); - color: var(--color-text-secondary); -} - -.tool-split-action-button:disabled { - cursor: not-allowed; - opacity: 0.48; -} - -.tool-split-action-button .ui-icon { - width: 16px; - height: 16px; -} - -.tool-split-scroll-toggle { - display: inline-grid; - grid-template-columns: 18px 34px; - width: fit-content; - min-height: 34px; - align-items: center; - gap: 8px; - padding: 0 6px 0 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-pill); - background: rgba(5, 7, 17, 0.24); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; -} - -.tool-split-scroll-toggle .ui-icon { - width: 16px; - height: 16px; -} - -.tool-split-scroll-toggle i { - position: relative; - display: block; - width: 34px; - height: 18px; - border: 1px solid rgba(165, 180, 252, 0.18); - border-radius: var(--radius-pill); - background: rgba(7, 10, 24, 0.72); -} - -.tool-split-scroll-toggle i::before { - content: ""; - position: absolute; - top: 50%; - left: 3px; - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--color-text-muted); - transform: translateY(-50%); - transition: - left var(--duration-fast) var(--ease-standard), - background-color var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -.tool-split-root-button { - margin-right: auto; -} - -.tool-split-root-button:hover, -.tool-split-action-button:hover:not(:disabled), -.checklist-qty-controls button:hover, -.checklist-drag-handle:hover, -.checklist-edit-button:hover, -.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value, .danger):hover, -.counter-actions button:not(.danger):hover, -.link-item button:not(.danger):hover, -.task-planner-drag-handle:hover:not(:disabled), -.task-planner-category-drag-handle:hover, -.task-planner-settings-toggle:hover, -.task-planner-dropdown-button:hover, -.task-planner-settings-button:hover, -.task-planner-reset-control button:hover:not(:disabled), -.task-planner-relation-chip button:hover, -.module-scroll-button:hover, -.tool-split-scroll-toggle:hover, -.checklist-complete-mode-button:hover, -.checklist-complete-mode-button.active:hover { - border-color: rgba(196, 181, 253, 0.32); - background: - linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box, - linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box; - color: var(--color-text-primary); - box-shadow: - 0 0 12px rgba(139, 92, 246, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.task-planner-settings-toggle.active, -.task-planner-dropdown-button.active, -.task-planner-settings-button.active { - @include mixins.temporary-toggle-active; -} - -.timer-alert-mode-button:hover, -.timer-alert-mode-button.active, -.timer-inline-refresh-toggle:hover:not(:disabled) { - border-color: rgba(196, 181, 253, 0.2); - background: rgba(21, 26, 48, 0.42); - color: var(--color-text-primary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); -} - -.timer-alert-mode-button.active, -.timer-inline-refresh-toggle.active { - border-color: rgba(246, 196, 83, 0.26); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.08), rgba(139, 92, 246, 0.08)), - rgba(21, 26, 48, 0.36); - color: var(--color-accent-gold); -} - -.timer-inline-refresh-toggle.active i { - border-color: rgba(246, 196, 83, 0.36); - background: rgba(246, 196, 83, 0.12); -} - -.timer-inline-refresh-toggle.active i::before { - left: 7px; - background: var(--color-accent-gold); - box-shadow: 0 0 10px rgba(246, 196, 83, 0.28); -} - -.timer-alert-mode-button:disabled, -.timer-alert-mode-button:disabled:hover, -.timer-alert-mode-button.active:disabled, -.timer-inline-refresh-toggle:disabled, -.timer-inline-refresh-toggle:disabled:hover, -.timer-inline-refresh-toggle.active:disabled { - cursor: not-allowed; - border-color: rgba(165, 180, 252, 0.025); - background: rgba(5, 7, 17, 0.08); - color: rgba(148, 163, 184, 0.22); - opacity: 1; - box-shadow: none; -} - -.timer-alert-mode-button:disabled .ui-icon, -.timer-inline-refresh-toggle:disabled .ui-icon { - opacity: 0.34; -} - -.timer-alert-mode-switch.is-blocked { - opacity: 1; - cursor: not-allowed; -} - -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button, -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:hover, -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button.active, -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:disabled, -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:disabled:hover, -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button.active:disabled { - cursor: not-allowed; - border-color: rgba(165, 180, 252, 0.035); - background: rgba(5, 7, 17, 0.1); - color: rgba(148, 163, 184, 0.32); - box-shadow: none; - opacity: 0.2; -} - -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button .ui-icon, -.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:disabled .ui-icon { - opacity: 1; -} - -.checklist-section-collapse-button:hover { - border-color: rgba(246, 196, 83, 0.58); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.18), rgba(139, 92, 246, 0.12)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.62), rgba(196, 181, 253, 0.32)) border-box; - color: #fff; - box-shadow: - 0 0 10px rgba(246, 196, 83, 0.14), - 0 0 16px rgba(139, 92, 246, 0.08); -} - -.tool-split-action-button.danger, -.tool-split-entry > button.danger, -.notepad-toolbar-button.danger, -.counter-actions button.danger, -.link-item button.danger, -.task-planner-clear-completed-button.danger, -.task-planner-delete-button.danger { - border-color: rgba(251, 113, 133, 0.2); - background: rgba(21, 26, 48, 0.88); - color: var(--color-danger); -} - -.tool-split-action-button.danger:hover:not(:disabled), -.tool-split-entry > button.danger:hover, -.notepad-toolbar-button.danger:hover:not(:disabled), -.counter-actions button.danger:hover, -.link-item button.danger:hover, -.task-planner-clear-completed-button.danger:hover:not(:disabled), -.task-planner-delete-button.danger:hover { - border-color: rgba(251, 113, 133, 0.56); - background: - linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box, - linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box; - color: #fff; - box-shadow: - 0 0 14px rgba(251, 113, 133, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.06); -} - -.tool-split-action-button.danger:hover .ui-icon, -.tool-split-entry > button.danger:hover .ui-icon, -.notepad-toolbar-button.danger:hover .ui-icon, -.counter-actions button.danger:hover .ui-icon, -.link-item button.danger:hover .ui-icon, -.task-planner-clear-completed-button.danger:hover .ui-icon, -.task-planner-delete-button.danger:hover .ui-icon { - background-color: #fff; - filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26)); -} - -.module-scroll-button.active, -.tool-split-scroll-toggle.active, -.checklist-complete-mode-button.active { - @include mixins.temporary-toggle-active; -} - -.module-scroll-button.active i, -.tool-split-scroll-toggle.active i { - border-color: rgba(246, 196, 83, 0.36); - background: rgba(246, 196, 83, 0.12); -} - -.module-scroll-button.active i::before, -.tool-split-scroll-toggle.active i::before { - left: 17px; - background: var(--color-accent-gold); - box-shadow: 0 0 10px rgba(246, 196, 83, 0.28); -} - -.module-scroll-button.active i::before { - left: 15px; -} - -.tool-split-tree { - display: grid; - align-content: start; - gap: 8px; - min-width: 0; - min-height: 0; -} - -.tool-split-tree.is-scrollable { - overflow-y: auto; - padding-right: 8px; -} - -.tool-split-entry-list { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.tool-split-entry-list .tool-split-entry-list { - position: relative; - margin-top: 6px; - padding-left: 22px; -} - -.tool-split-entry-list .tool-split-entry-list::before { - content: ""; - position: absolute; - top: -3px; - bottom: 14px; - left: 7px; - width: 1px; - background: linear-gradient(180deg, rgba(246, 196, 83, 0.52), rgba(139, 92, 246, 0.2)); -} - -.tool-split-entry-list .tool-split-entry-list > li { - position: relative; -} - -.tool-split-entry-list .tool-split-entry-list > li::before { - content: ""; - position: absolute; - top: 18px; - left: -15px; - width: 11px; - height: 1px; - background: rgba(246, 196, 83, 0.52); -} - -.tool-split-entry { - display: grid; - grid-template-columns: minmax(0, 1fr) 34px 34px; - gap: 7px; -} - -.tool-split-entry-list li.is-editing > .tool-split-entry { - grid-template-columns: auto minmax(0, 1fr) 34px 34px; -} - -.tool-split-entry > button { - min-width: 0; - min-height: 36px; - padding: 0 10px; -} - -.tool-split-entry-summary, -.tool-split-entry-value { - display: inline-flex; - box-sizing: border-box; - align-items: center; - justify-content: flex-start; - border: 1px solid rgba(165, 180, 252, 0.09); - border-radius: var(--radius-md); - border-color: rgba(165, 180, 252, 0.09); - background: rgba(21, 26, 48, 0.58); - color: var(--color-text-secondary); - text-align: left; -} - -.tool-split-entry-summary { - width: 100%; - min-height: 36px; - padding: 0 10px; -} - -.tool-split-entry-value { - width: fit-content; -} - -.tool-split-entry-value.is-readonly { - min-height: 36px; - padding: 0 10px; - background: rgba(21, 26, 48, 0.38); - cursor: default; - opacity: 0.72; -} - -.tool-split-entry-summary:hover, -.tool-split-entry-value:not(.is-readonly):hover { - border-color: rgba(196, 181, 253, 0.2); - background: rgba(21, 26, 48, 0.72); -} - -.tool-split-entry-summary > span { - overflow: hidden; - color: var(--color-text-secondary); - text-overflow: ellipsis; - white-space: nowrap; -} - -.tool-split-entry-summary strong, -.tool-split-entry-value strong { - color: var(--color-text-primary); -} - -.tool-split-entry-label { - box-sizing: border-box; - width: 100%; - min-width: 0; - min-height: 36px; - padding: 0 10px; - overflow: hidden; - border-color: rgba(165, 180, 252, 0.09); - background: rgba(21, 26, 48, 0.38); - color: var(--color-text-secondary); - text-overflow: ellipsis; - white-space: nowrap; -} - -.tool-split-entry-label:hover, -.tool-split-entry-label:focus { - border-color: rgba(196, 181, 253, 0.22); - background: rgba(21, 26, 48, 0.58); - color: var(--color-text-primary); -} - -.tool-split-entry .ui-icon { - width: 16px; - height: 16px; - opacity: 0.72; -} - -.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value) { - min-height: 36px; -} - -.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-summary, -.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-value, -.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-label { - border-color: var(--color-accent-gold); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.09), rgba(139, 92, 246, 0.1)), - rgba(7, 10, 24, 0.48); - color: var(--color-text-primary); - box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.06); -} - -.link-item { - display: grid; - grid-template-columns: 34px minmax(0, 1fr) auto; - gap: 10px; - align-items: center; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(7, 10, 24, 0.42); -} - -.link-drag-handle { - width: 34px; - min-width: 34px; - min-height: 34px; - padding: 0; - color: var(--color-text-muted); - cursor: grab; - touch-action: none; - user-select: none; -} - -.link-item a { - display: grid; - min-width: 0; - gap: 2px; -} - -.link-item strong, -.link-item span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.link-item strong { - color: var(--color-text-primary); - font-size: var(--font-size-sm); -} - -.link-item span { - color: var(--color-text-muted); - font-size: var(--font-size-xs); -} - -.link-item > div { - display: flex; - gap: 8px; -} - -.link-item button { - width: 40px; - min-width: 40px; - min-height: 40px; -} - -.link-item .link-drag-handle { - width: 34px; - min-width: 34px; - min-height: 34px; -} - -.dropzone { - display: grid; - min-height: 74px; - margin: var(--space-4); - place-items: center; - border: 1px dashed rgba(139, 92, 246, 0.52); - border-radius: var(--radius-lg); - background: var(--color-primary-soft); - color: var(--color-text-secondary); - cursor: pointer; -} - -.dropzone:hover { - border-color: var(--color-accent-gold); - background: rgba(246, 196, 83, 0.1); - box-shadow: 0 0 30px rgba(246, 196, 83, 0.12); -} - -.dropzone.is-drag-over { - border-color: var(--color-accent-gold); - background: rgba(246, 196, 83, 0.14); - box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.12); -} - -.annotation-dropzone { - min-height: 58px; -} - -.paste-target { - min-height: 46px; - margin: 0 var(--space-4) var(--space-4); - padding: 12px 14px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.44); - color: var(--color-text-muted); -} - -.paste-target:focus { - border-color: var(--color-primary); - color: var(--color-text-secondary); - outline: none; - box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); -} - -.image-annotation-module { - display: grid; - gap: var(--space-4); -} - -.annotation-workspace { - display: grid; - gap: var(--space-4); - padding: var(--space-4); -} - -.annotation-stage { - position: relative; - display: grid; - min-width: 0; - overflow: hidden; - place-items: center; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-lg); - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 38%), - rgba(5, 7, 17, 0.48); - cursor: crosshair; -} - -.annotation-media { - position: relative; - display: block; - width: fit-content; - max-width: 100%; - justify-self: center; - line-height: 0; -} - -.annotation-stage-preview { - cursor: default; -} - -.annotation-preview-actions { - position: absolute; - top: 10px; - right: 10px; - z-index: 3; - display: flex; - gap: var(--space-2); -} - -.annotation-preview-actions .tool-split-action-button { - background: rgba(21, 26, 48, 0.94); - box-shadow: - 0 6px 18px rgba(5, 7, 17, 0.28), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.annotation-stage-preview .annotation-marker:hover { - z-index: 2; - border-color: rgba(196, 181, 253, 0.9); - box-shadow: - 0 0 0 2px rgba(5, 7, 17, 0.72), - 0 0 14px rgba(139, 92, 246, 0.34), - 0 0 24px rgba(196, 181, 253, 0.22); - filter: brightness(1.12); -} - -.annotation-stage img, -.annotation-media img { - display: block; - width: auto; - height: auto; - max-width: 100%; - max-height: min(62vh, 620px); - object-fit: contain; - user-select: none; -} - -.annotation-marker { - position: absolute; - z-index: 3; - display: inline-grid; - left: clamp(0px, calc(var(--marker-x, 50%) - 15px), calc(100% - 30px)); - top: clamp(0px, calc(var(--marker-y, 50%) - 15px), calc(100% - 30px)); - width: 30px; - min-width: 30px; - height: 30px; - min-height: 30px; - place-items: center; - padding: 0; - border: 1px solid rgba(246, 196, 83, 0.72); - border-color: rgba(246, 196, 83, 0.72); - border-radius: var(--radius-pill); - background: - linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.9), rgba(196, 181, 253, 0.5)) border-box; - color: #fff; - font-size: var(--font-size-xs); - font-weight: 900; - line-height: 1; - box-shadow: - 0 0 0 2px rgba(5, 7, 17, 0.72), - 0 0 16px rgba(246, 196, 83, 0.22); - cursor: grab; - touch-action: none; -} - -.annotation-marker:active { - cursor: grabbing; -} - -.annotation-marker-list { - display: grid; - gap: 8px; - min-width: 0; - margin: 0; - padding: 0; - list-style: none; -} - -.annotation-marker-list li { - display: grid; - min-width: 0; - grid-template-columns: 28px minmax(0, 1fr) auto; - gap: var(--space-2); - align-items: center; - padding-block: 3px; -} - -.annotation-marker-list li > span { - display: inline-grid; - width: 28px; - height: 28px; - place-items: center; - border: 1px solid rgba(246, 196, 83, 0.32); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.1); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.annotation-marker-list input { - width: 100%; - min-width: 0; - min-height: 34px; - padding: 0 10px; -} - -.annotation-empty { - margin: 0; - padding: var(--space-4); -} - -.images { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: var(--space-3); - padding: var(--space-4); -} - -.images figure { - position: relative; - display: grid; - gap: 8px; - margin: 0; - padding: 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-lg); - background: rgba(5, 7, 17, 0.38); -} - -.images figure { - --reorder-drop-shadow: 0 0 18px rgba(246, 196, 83, 0.12); -} - -.image-drag-handle { - position: absolute; - z-index: 4; - top: 12px; - left: 12px; - display: grid; - width: 32px; - height: 32px; - place-items: center; - padding: 0; - border: 1px solid rgba(138, 150, 197, 0.22); - border-radius: var(--radius-md); - background: rgba(9, 13, 29, 0.76); - color: rgba(229, 235, 255, 0.78); - cursor: grab; - opacity: 0; - transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast); -} - -.image-drag-handle .ui-icon { - width: 16px; - height: 16px; -} - -.images figure:hover .image-drag-handle, -.images figure:focus-within .image-drag-handle { - opacity: 1; -} - -.image-drag-handle:hover { - border-color: rgba(246, 196, 83, 0.56); - background: rgba(20, 28, 55, 0.86); - color: var(--color-accent-gold); - box-shadow: 0 0 14px rgba(246, 196, 83, 0.12); -} - -.image-drag-handle:active { - cursor: grabbing; -} - -.image-preview { - display: block; - width: 100%; - min-height: 0; - padding: 0; - border: 0; - border-radius: var(--radius-md); - background: transparent; -} - -.image-preview:hover { - transform: none; - box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.28); -} - -.image-label, -.image-label-input { - min-width: 0; - font-size: var(--font-size-sm); -} - -.image-label { - overflow: hidden; - color: var(--color-text-secondary); - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.image-label-input { - width: 100%; - min-height: 36px; - padding: 0 10px; - border: 1px solid rgba(138, 150, 197, 0.2); - border-radius: var(--radius-md); - background: rgba(8, 13, 30, 0.62); - color: var(--color-text); -} - -.image-label-input::placeholder { - color: rgba(185, 194, 215, 0.48); -} - -.image-label-input:focus { - border-color: rgba(246, 196, 83, 0.72); - outline: none; - box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.14); -} - -.images img { - display: block; - width: 100%; - aspect-ratio: 16 / 9; - object-fit: cover; - border-radius: var(--radius-md); - background: var(--color-bg-deep); -} - -.image-actions { - display: flex; - gap: var(--space-2); -} - -.image-actions .image-annotate-button, -.image-actions .image-delete-button { - margin-top: 0; -} +// Rôle : point d'entrée des styles toolbox, outils et panneau latéral. +@use "toolboxes/core"; diff --git a/website/src/styles/toolboxes/_core.scss b/website/src/styles/toolboxes/_core.scss new file mode 100644 index 0000000..2d85a27 --- /dev/null +++ b/website/src/styles/toolboxes/_core.scss @@ -0,0 +1,6396 @@ +// Rôle : regroupe les styles des toolboxes, outils et panneau latéral. +@use "../mixins"; + +.toolbox-head { + position: relative; + z-index: 30; + overflow: visible; + padding: var(--space-6); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + background: rgba(16, 20, 38, 0.76); + backdrop-filter: blur(10px); +} + +.toolbox-head.page-hero { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + overflow: visible; + border-color: transparent; + background: + var(--gradient-nebula), + radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%), + linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96)); + box-shadow: var(--shadow-md); + backdrop-filter: none; +} + +.toolbox-head.page-hero > * { + z-index: 4; +} + +.toolbox-head-embedded.page-hero { + min-height: 132px; + padding: var(--space-5); + background: + var(--gradient-nebula), + radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.08), transparent 30%), + linear-gradient(135deg, rgba(16, 20, 38, 0.94), rgba(5, 7, 17, 0.94)); + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22); +} + +.toolbox-head-embedded.page-hero::before { + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.38), transparent 24%), + linear-gradient(135deg, rgba(246, 196, 83, 0.28), rgba(139, 92, 246, 0.18) 52%, rgba(196, 181, 253, 0.24)); +} + +.toolbox-head-embedded.page-hero::after { + background: + linear-gradient(135deg, rgba(5, 7, 17, 0.08), rgba(5, 7, 17, 0.42)), + radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.12), transparent 32%); +} + +.toolbox-head-embedded h1 { + margin-bottom: 0; + font-size: clamp(1.55rem, 3vw, 2.2rem); +} + +.toolbox-title { + width: fit-content; + max-width: 100%; + padding: 3px 6px; + border-radius: var(--radius-sm); + cursor: text; +} + +.toolbox-title-row { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.toolbox-hero-link { + display: inline-flex; + align-items: center; + gap: var(--space-2); + width: fit-content; + margin-top: var(--space-3); +} + +.toolbox-hero-link .ui-icon { + width: 18px; + height: 18px; +} + +.toolbox-icon-picker { + position: relative; + z-index: 70; + flex: 0 0 auto; +} + +.toolbox-icon-picker-button, +.toolbox-game-icon { + width: 100px; + min-width: 100px; + min-height: 100px; + border-color: var(--color-primary-border); + background: + radial-gradient(circle at 50% 35%, rgba(246, 196, 83, 0.18), transparent 44%), + rgba(21, 26, 48, 0.86); +} + +.toolbox-icon-picker-button { + padding: 0; +} + +.toolbox-game-icon { + display: grid; + place-items: center; + overflow: hidden; + border: 1px solid var(--color-primary-border); + border-radius: var(--radius-md); +} + +.toolbox-icon-picker-button img, +.toolbox-game-icon img { + width: 72px; + height: 72px; + object-fit: contain; +} + +.toolbox-game-icon img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.toolbox-icon-picker-menu { + position: absolute; + top: calc(100% + 8px); + left: 0; + z-index: 300; + display: grid; + grid-template-columns: repeat(5, 42px); + gap: 7px; + width: max-content; + max-width: min(260px, calc(100vw - 48px)); + padding: 9px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(10, 13, 28, 0.99); + box-shadow: var(--shadow-lg); +} + +.toolbox-icon-picker-menu button { + width: 42px; + min-width: 42px; + min-height: 42px; + padding: 0; + border-color: var(--color-border); + background: rgba(21, 26, 48, 0.88); +} + +.toolbox-icon-picker-menu button:hover { + border-color: rgba(196, 181, 253, 0.32); + background: + linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box, + linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box; + box-shadow: + 0 0 12px rgba(139, 92, 246, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.toolbox-icon-picker-menu button.active { + @include mixins.temporary-toggle-active; +} + +.toolbox-icon-picker-menu img { + width: 26px; + height: 26px; + object-fit: contain; +} + +.toolbox-title:focus { + background: rgba(7, 10, 24, 0.72); + outline: 1px solid rgba(246, 196, 83, 0.72); + outline-offset: 3px; +} + +.tool-add-controls { + position: relative; + z-index: 280; + display: inline-flex; + justify-content: flex-end; +} + +.tool-add-modal-button { + min-height: 40px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.tool-add-quick-toggle { + width: 42px; + min-width: 42px; + min-height: 40px; + justify-content: center; + padding: 0; + border-left: 1px solid rgba(255, 255, 255, 0.18); + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.tool-add-quick-toggle .ui-icon { + width: 18px; + height: 18px; + transition: transform 140ms ease; +} + +.tool-add-quick-toggle.active .ui-icon { + transform: rotate(180deg); +} + +.tool-quick-add { + position: absolute; + top: calc(100% + 8px); + right: 0; + z-index: 300; + display: grid; + grid-template-columns: repeat(5, 40px); + justify-content: flex-end; + width: max-content; + max-width: calc(100vw - 48px); + gap: 6px; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(10, 13, 28, 0.99); + box-shadow: var(--shadow-lg); + opacity: 0; + pointer-events: none; + transform: translateY(-4px); + transition: + opacity 140ms ease, + transform 140ms ease; +} + +.tool-quick-add.is-open { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} + +.tool-quick-add::before { + content: ""; + position: absolute; + right: 18px; + bottom: 100%; + border-right: 7px solid transparent; + border-bottom: 7px solid rgba(10, 13, 28, 0.99); + border-left: 7px solid transparent; +} + +.tool-quick-add::after { + content: ""; + position: absolute; + right: 0; + bottom: 100%; + width: 100%; + height: 8px; +} + +.tool-quick-add-button, +.tool-add-card { + color: var(--color-text-primary); +} + +.tool-quick-add-button { + background: rgba(21, 26, 48, 0.72); +} + +.modules-toolbar { + display: flex; + justify-content: flex-end; + margin-top: var(--space-4); +} + +.toolbox-actions-row { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + gap: var(--space-4); +} + +.toolbox-actions-row > div { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.toolbox-actions-row > div:last-child { + justify-content: flex-end; +} + +.toolbox-preferences-row { + position: relative; + isolation: isolate; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + width: 100%; + max-width: 520px; + align-items: center; + justify-self: end; + gap: var(--space-4); + margin-top: var(--space-4); + padding: var(--space-4); + overflow: hidden; + border: 1px solid transparent; + border-radius: var(--radius-lg); + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 34%), + linear-gradient(135deg, rgba(16, 20, 38, 0.84), rgba(5, 7, 17, 0.76)); + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-weight: 800; + box-shadow: var(--shadow-sm); +} + +.toolbox-preferences-row::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + padding: 1px; + border-radius: inherit; + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.38), transparent 30%), + linear-gradient(135deg, rgba(246, 196, 83, 0.26), rgba(139, 92, 246, 0.16), rgba(56, 189, 248, 0.18)); + @include mixins.border-mask; +} + +.toolbox-preferences-row .eyebrow { + margin-bottom: 4px; + font-size: 0.68rem; +} + +.toolbox-preferences-row strong { + display: block; + color: var(--color-text-primary); + font-size: var(--font-size-sm); +} + +.toolbox-preferences-row + .cards { + margin-top: 0; +} + +.toast-position-switch { + position: relative; + display: inline-grid; + grid-template-columns: repeat(2, 32px); + width: 74px; + min-height: 38px; + align-items: center; + justify-items: center; + gap: 0; + padding: 3px 4px; + border-color: rgba(165, 180, 252, 0.12); + border-radius: var(--radius-pill); + background: rgba(7, 10, 24, 0.32); + color: var(--color-text-secondary); +} + +.toast-position-switch::before { + content: ""; + position: absolute; + top: 3px; + bottom: 3px; + left: 4px; + width: 30px; + border: 1px solid rgba(246, 196, 83, 0.3); + border-radius: 50%; + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)), + rgba(21, 26, 48, 0.58); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: transform var(--duration-fast) var(--ease-standard); +} + +.toast-position-switch[data-position="right"]::before { + transform: translateX(32px); +} + +.toast-position-switch span { + position: relative; + z-index: 1; + display: inline-grid; + width: 30px; + height: 30px; + place-items: center; + justify-self: center; + align-self: center; + border-radius: 50%; +} + +.toast-position-switch .ui-icon { + width: 16px; + height: 16px; +} + +.toast-position-switch:hover { + border-color: rgba(196, 181, 253, 0.24); + color: var(--color-text-primary); +} + +.modules { + align-items: start; +} + +.modules[data-layout-cols="1"] { + grid-template-columns: 1fr; +} + +.modules[data-layout-cols="2"] { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.module-column { + display: grid; + gap: var(--space-3); + align-content: start; + min-width: 0; +} + +.module-column.is-empty-warning { + min-height: 132px; + border: 1px dashed rgba(246, 196, 83, 0.26); + border-radius: var(--radius-md); + background: rgba(246, 196, 83, 0.04); +} + +.module-column-boundary-drop-zone { + position: relative; + min-height: 10px; + border-radius: var(--radius-pill); +} + +.module-column-boundary-drop-zone.is-drop-target::before { + position: absolute; + top: 50%; + right: 0; + left: 0; + height: 3px; + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.9); + box-shadow: 0 0 12px rgba(246, 196, 83, 0.24); + content: ""; + pointer-events: none; + transform: translateY(-50%); +} + +.module { + --reorder-drop-shadow: var(--shadow-sm); + + position: relative; + contain: paint; + overflow: hidden; + border-color: transparent; + background: rgba(16, 20, 38, 0.42); + box-shadow: var(--shadow-sm); + + @include mixins.gold-panel-frame(true); +} + +.module > * { + position: relative; + z-index: 1; +} + +.module:hover { + transform: none; + border-color: transparent; + background: rgba(16, 20, 38, 0.42); + box-shadow: + var(--shadow-sm), + 0 0 14px rgba(139, 92, 246, 0.14), + 0 0 24px rgba(196, 181, 253, 0.08); +} + +.module:hover::before { + background: linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(196, 181, 253, 0.28)); +} + +.module:hover::after { + background: + radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(196, 181, 253, 0.5) 0 18px, transparent 27px), + linear-gradient(90deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%), + linear-gradient(180deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%); +} + +[data-reorder-target="item"].is-dragging, +[data-reorder-target="group"].is-dragging { + cursor: grabbing; + opacity: 0.58; + transform: scale(0.99); +} + +[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target, +[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target { + position: relative; + border-color: rgba(246, 196, 83, 0.72); + box-shadow: var(--reorder-drop-shadow, none); +} + +[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target::before, +[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target::before { + position: absolute; + z-index: 3; + top: 0; + right: 0; + left: 0; + height: 3px; + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.9); + box-shadow: 0 0 12px rgba(246, 196, 83, 0.24); + content: ""; + pointer-events: none; +} + +[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after, +[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after { + box-shadow: var(--reorder-drop-shadow, none); +} + +[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after::before, +[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after::before { + top: auto; + bottom: 0; +} + +[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target, +[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target { + border-color: rgba(246, 196, 83, 0.72); + box-shadow: var(--reorder-drop-shadow, none), inset 3px 0 0 rgba(246, 196, 83, 0.86); +} + +[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target.drop-after, +[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target.drop-after { + box-shadow: var(--reorder-drop-shadow, none), inset -3px 0 0 rgba(246, 196, 83, 0.86); +} + +.module[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target { + border-color: transparent; + box-shadow: + var(--shadow-sm), + inset 0 3px 0 rgba(246, 196, 83, 0.86), + 0 0 14px rgba(246, 196, 83, 0.12); +} + +.module[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after { + box-shadow: + var(--shadow-sm), + inset 0 -3px 0 rgba(246, 196, 83, 0.86), + 0 0 14px rgba(246, 196, 83, 0.12); +} + +.module[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target::before { + display: none; +} + +.module header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + padding: var(--space-4); + border-bottom: 1px solid var(--color-border); +} + +.module header > div { + display: flex; + align-items: center; + gap: 10px; +} + +.module header h2 { + margin: 0; + font-size: 17px; +} + +.module-content { + min-width: 0; +} + +.module-content.is-scrollable { + max-height: 450px; + overflow-y: auto; + overscroll-behavior: contain; +} + +.layout-switch { + display: inline-grid; + grid-template-columns: repeat(2, 38px); + gap: 4px; + padding: 4px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.48); +} + +.layout-switch button { + min-height: 34px; + align-items: center; + justify-content: center; + padding: 0; + border-color: transparent; + background: transparent; + color: var(--color-text-muted); + font-weight: 900; +} + +.layout-switch button:hover { + border-color: rgba(196, 181, 253, 0.22); + background: rgba(21, 26, 48, 0.5); + color: var(--color-text-primary); + box-shadow: none; +} + +.layout-switch button.active { + @include mixins.temporary-toggle-active; +} + +.module-drag-handle { + display: inline-grid; + width: 34px; + height: 34px; + flex: 0 0 34px; + place-items: center; + padding: 0; + border-color: transparent; + background: transparent; + color: var(--color-text-muted); + cursor: grab; + opacity: 0.62; + touch-action: none; + user-select: none; +} + +.module-drag-handle .ui-icon { + width: 18px; + height: 18px; +} + +.module:hover .module-drag-handle, +.module:focus-within .module-drag-handle { + opacity: 1; +} + +.module-drag-handle:active { + cursor: grabbing; +} + +.module-title { + min-width: 80px; + max-width: 100%; + padding: 4px 6px; + border-radius: var(--radius-sm); + cursor: text; +} + +.module-title:focus { + background: rgba(7, 10, 24, 0.72); + outline: 1px solid rgba(246, 196, 83, 0.72); + outline-offset: 2px; +} + +.module-edit-button, +.module-delete-button { + flex: 0 0 40px; +} + +.module-edit-button { + color: var(--color-text-secondary); +} + +.module-scroll-button { + display: inline-grid; + grid-template-columns: 16px 30px; + width: fit-content; + min-height: 40px; + flex: 0 0 auto; + align-items: center; + gap: 7px; + padding: 0 7px 0 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-pill); + background: rgba(5, 7, 17, 0.24); + color: var(--color-text-secondary); +} + +.module-scroll-button .ui-icon { + width: 16px; + height: 16px; +} + +.module-scroll-button i { + position: relative; + display: block; + width: 30px; + height: 16px; + border: 1px solid rgba(165, 180, 252, 0.18); + border-radius: var(--radius-pill); + background: rgba(7, 10, 24, 0.72); +} + +.module-scroll-button i::before { + content: ""; + position: absolute; + top: 50%; + left: 3px; + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--color-text-muted); + transform: translateY(-50%); + transition: + left var(--duration-fast) var(--ease-standard), + background-color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +.module-edit-button.active { + @include mixins.temporary-toggle-active; +} + +.module-icon { + display: grid; + width: 34px; + height: 34px; + place-items: center; + border-radius: var(--radius-md); + background: var(--gradient-brand); + box-shadow: var(--shadow-primary); + color: white; +} + +.module-icon-svg { + display: block; + width: 19px; + height: 19px; + background: white; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; +} + +.module-icon-notepad { + mask-image: url("/static/icons/notepad.svg"); + -webkit-mask-image: url("/static/icons/notepad.svg"); +} + +.module-icon-checklist { + mask-image: url("/static/icons/checklist.svg"); + -webkit-mask-image: url("/static/icons/checklist.svg"); +} + +.module-icon-tasklist { + mask-image: url("/static/icons/tasklist.svg"); + -webkit-mask-image: url("/static/icons/tasklist.svg"); +} + +.module-icon-picture { + mask-image: url("/static/icons/picture.svg"); + -webkit-mask-image: url("/static/icons/picture.svg"); +} + +.module-icon-link { + mask-image: url("/static/icons/link.svg"); + -webkit-mask-image: url("/static/icons/link.svg"); +} + +.module-icon-toolbox { + mask-image: url("/static/icons/toolbox.svg"); + -webkit-mask-image: url("/static/icons/toolbox.svg"); +} + +.module-icon-export { + mask-image: url("/static/icons/export.svg"); + -webkit-mask-image: url("/static/icons/export.svg"); +} + +.module-icon-abacus { + mask-image: url("/static/icons/abacus.svg"); + -webkit-mask-image: url("/static/icons/abacus.svg"); +} + +.module-icon-calculator { + mask-image: url("/static/icons/calculator.svg"); + -webkit-mask-image: url("/static/icons/calculator.svg"); +} + +.module-icon-clock { + mask-image: url("/static/icons/clock.svg"); + -webkit-mask-image: url("/static/icons/clock.svg"); +} + +.module-icon-stopwatch { + mask-image: url("/static/icons/stopwatch.svg"); + -webkit-mask-image: url("/static/icons/stopwatch.svg"); +} + +.module-icon-hourglass { + mask-image: url("/static/icons/hourglass.svg"); + -webkit-mask-image: url("/static/icons/hourglass.svg"); +} + +.module-icon-map { + mask-image: url("/static/icons/map.svg"); + -webkit-mask-image: url("/static/icons/map.svg"); +} + +.module-icon-shield { + mask-image: url("/static/icons/shield.svg"); + -webkit-mask-image: url("/static/icons/shield.svg"); +} + +.module-icon-chest-armor { + mask-image: url("/static/icons/chest-armor.svg"); + -webkit-mask-image: url("/static/icons/chest-armor.svg"); +} + +.module-icon-columns { + mask-image: url("/static/icons/columns.svg"); + -webkit-mask-image: url("/static/icons/columns.svg"); +} + +.module-icon-table { + mask-image: url("/static/icons/table.svg"); + -webkit-mask-image: url("/static/icons/table.svg"); +} + +.module-icon-controller { + mask-image: url("/static/icons/controller.svg"); + -webkit-mask-image: url("/static/icons/controller.svg"); +} + +.tabs { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + gap: 6px; + padding: 5px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.34); +} + +.tabs button { + display: inline-flex; + min-width: 0; + min-height: 36px; + align-items: center; + justify-content: center; + gap: 8px; + padding: 0 10px; + border: 1px solid transparent; + border-radius: calc(var(--radius-md) - 2px); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 900; +} + +.tabs button:hover { + border-color: rgba(246, 196, 83, 0.28); + background: rgba(246, 196, 83, 0.08); + color: var(--color-text-primary); +} + +.tabs button.active { + @include mixins.temporary-toggle-active; +} + +.tabs .module-icon-svg { + width: 16px; + height: 16px; + background: currentColor; +} + +.notepad-module { + display: grid; + gap: var(--space-3); + padding: var(--space-4); +} + +.notepad-toolbar, +.notepad-toolbar-group, +.notepad-format-controls { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; +} + +.notepad-toolbar { + justify-content: flex-start; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.46); +} + +.notepad-format-controls { + min-width: 0; +} + +.notepad-toolbar-group { + padding-right: 8px; + border-right: 1px solid rgba(150, 165, 205, 0.12); +} + +.notepad-toolbar-group:last-child { + padding-right: 0; + border-right: 0; +} + +.notepad-toolbar-button, +.drawing-control-button, +.notepad-swatch, +.notepad-color-toggle, +.drawing-width-toggle, +.drawing-width-button { + display: inline-grid; + place-items: center; + width: 34px; + min-width: 34px; + min-height: 34px; + padding: 0; + border-color: rgba(150, 165, 205, 0.18); + border-radius: var(--radius-sm); + background: rgba(16, 20, 38, 0.74); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 900; + box-shadow: none; +} + +.notepad-toolbar-button .ui-icon, +.drawing-control-button .ui-icon { + width: 17px; + height: 17px; +} + +.notepad-toolbar-button:hover, +.drawing-control-button:hover, +.notepad-swatch:hover, +.notepad-color-toggle:hover, +.drawing-width-toggle:hover, +.drawing-width-button:hover, +.notepad-toolbar-button.active, +.drawing-control-button.active, +.notepad-swatch.active, +.drawing-width-button.active { + border-color: rgba(246, 196, 83, 0.48); + background: rgba(246, 196, 83, 0.1); + color: var(--color-accent-gold); +} + +.notepad-color-dropdown { + position: relative; +} + +.notepad-list-dropdown { + position: relative; +} + +.notepad-list-icon, +.notepad-list-icon::before, +.notepad-list-icon::after { + display: block; + width: 17px; + height: 2px; + border-radius: var(--radius-pill); + background: currentColor; +} + +.notepad-list-icon { + position: relative; +} + +.notepad-list-icon::before, +.notepad-list-icon::after { + content: ""; + position: absolute; + left: 0; +} + +.notepad-list-icon::before { + top: -6px; +} + +.notepad-list-icon::after { + top: 6px; +} + +.notepad-color-toggle::before, +.notepad-swatch::before { + content: ""; + width: 18px; + height: 18px; + border: 1px solid rgba(245, 247, 255, 0.22); + border-radius: 50%; + background: var(--swatch-color); + box-shadow: inset 0 0 0 2px rgba(5, 7, 17, 0.36); +} + +.notepad-color-toggle.is-rainbow::before { + width: 20px; + height: 20px; + border-color: rgba(245, 247, 255, 0.28); + background: conic-gradient( + from 20deg, + #f6c453, + #22d3ee, + #8b5cf6, + #d946ef, + #f5f7ff, + #f6c453 + ); + box-shadow: + inset 0 0 0 3px rgba(5, 7, 17, 0.34), + 0 0 10px rgba(139, 92, 246, 0.16); +} + +.notepad-color-menu { + position: absolute; + top: calc(100% + 8px); + left: 50%; + z-index: 50; + display: grid; + grid-template-columns: repeat(3, 34px); + gap: 6px; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(10, 13, 28, 0.99); + box-shadow: var(--shadow-lg); + opacity: 0; + pointer-events: none; + transform: translate(-50%, -4px); + transition: + opacity 140ms ease, + transform 140ms ease; +} + +.notepad-list-menu { + position: absolute; + top: calc(100% + 8px); + left: 50%; + z-index: 50; + display: grid; + grid-template-columns: repeat(2, 34px); + gap: 6px; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(10, 13, 28, 0.99); + box-shadow: var(--shadow-lg); + transform: translateX(-50%); +} + +.notepad-list-menu::before { + content: ""; + position: absolute; + bottom: 100%; + left: calc(50% - 7px); + border-right: 7px solid transparent; + border-bottom: 7px solid rgba(10, 13, 28, 0.99); + border-left: 7px solid transparent; +} + +.notepad-list-menu::after { + content: ""; + position: absolute; + right: 0; + bottom: 100%; + left: 0; + height: 10px; +} + +.notepad-list-option { + justify-content: center; + width: 34px; + min-width: 34px; + min-height: 34px; + padding: 0; + border-color: rgba(150, 165, 205, 0.18); + background: rgba(16, 20, 38, 0.74); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; + box-shadow: none; +} + +.notepad-list-option:hover, +.notepad-list-option.active { + border-color: rgba(246, 196, 83, 0.48); + background: rgba(246, 196, 83, 0.1); + color: var(--color-accent-gold); +} + +.notepad-color-menu.is-sectioned { + grid-template-columns: 1fr; + width: 168px; +} + +.notepad-color-section { + display: grid; + gap: 6px; +} + +.notepad-color-section + .notepad-color-section { + margin-top: 4px; + padding-top: 8px; + border-top: 1px solid rgba(150, 165, 205, 0.12); +} + +.notepad-color-section-label { + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.notepad-color-section-swatches { + display: grid; + grid-template-columns: repeat(4, 34px); + gap: 6px; +} + +.notepad-color-dropdown:hover .notepad-color-menu, +.notepad-color-dropdown:focus-within .notepad-color-menu, +.notepad-color-dropdown.is-open .notepad-color-menu { + opacity: 1; + pointer-events: auto; + transform: translate(-50%, 0); +} + +.notepad-color-menu::after { + content: ""; + position: absolute; + right: 0; + bottom: 100%; + left: 0; + height: 10px; +} + +.notepad-color-menu::before { + content: ""; + position: absolute; + bottom: 100%; + left: calc(50% - 7px); + border-right: 7px solid transparent; + border-bottom: 7px solid rgba(10, 13, 28, 0.99); + border-left: 7px solid transparent; +} + +.drawing-width-toggle span, +.drawing-width-button span { + width: 20px; + height: var(--line-width); + border-radius: var(--radius-pill); + background: currentColor; +} + +.drawing-width-dropdown { + position: relative; +} + +.drawing-width-menu { + position: absolute; + right: auto; + bottom: calc(100% + 8px); + left: 50%; + z-index: 50; + display: grid; + grid-template-columns: repeat(2, 34px); + gap: 6px; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(10, 13, 28, 0.99); + box-shadow: var(--shadow-lg); + opacity: 0; + pointer-events: none; + transform: translate(-50%, 4px); + transition: + opacity 140ms ease, + transform 140ms ease; +} + +.drawing-width-dropdown:hover .drawing-width-menu, +.drawing-width-dropdown:focus-within .drawing-width-menu, +.drawing-width-dropdown.is-open .drawing-width-menu { + opacity: 1; + pointer-events: auto; + transform: translate(-50%, 0); +} + +.drawing-width-menu::after { + content: ""; + position: absolute; + top: 100%; + right: 0; + left: 0; + width: 100%; + height: 10px; +} + +.drawing-width-menu::before { + content: ""; + position: absolute; + top: 100%; + left: calc(50% - 7px); + border-top: 7px solid rgba(10, 13, 28, 0.99); + border-right: 7px solid transparent; + border-left: 7px solid transparent; +} + +.notepad-surface { + position: relative; + min-height: 260px; + overflow: auto; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.56); +} + +.notepad-surface:focus-within { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); +} + +.notepad-surface.is-drawing { + cursor: crosshair; +} + +.notepad-editor { + position: relative; + z-index: 1; + min-height: 260px; + padding: var(--space-4); + color: var(--color-text-primary); + line-height: 1.6; + outline: none; + white-space: pre-wrap; +} + +.notepad-editor[contenteditable="false"] { + pointer-events: none; +} + +.notepad-editor.is-empty::before { + content: attr(data-placeholder); + position: absolute; + color: var(--color-text-muted); + pointer-events: none; +} + +.notepad-editor h3, +.notepad-editor h4, +.notepad-editor p, +.notepad-editor ul, +.notepad-editor ol { + margin: 0 0 0.75em; +} + +.notepad-editor h3 { + font-size: 1.08rem; +} + +.notepad-editor h4 { + font-size: 0.98rem; +} + +.notepad-editor ul, +.notepad-editor ol { + padding-left: 1.35rem; +} + +.drawing-overlay { + position: absolute; + top: 0; + left: 0; + z-index: 2; + pointer-events: none; + touch-action: none; +} + +.drawing-overlay.is-active { + cursor: crosshair; + pointer-events: auto; +} + +.drawing-overlay.is-erase { + cursor: crosshair; +} + +.drawing-controls-panel { + position: absolute; + right: 50%; + bottom: 10px; + z-index: 6; + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + width: max-content; + max-width: calc(100% - 20px); + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(10, 13, 28, 0.94); + box-shadow: var(--shadow-md); + transform: translateX(50%); +} + +.drawing-controls-panel:not(.is-open) { + width: auto; + padding: 6px; +} + +.drawing-controls-panel .drawing-storage-switch { + display: inline-grid; + grid-template-columns: 16px 30px; + grid-template-rows: 1fr; + width: fit-content; + min-width: 64px; + min-height: 34px; + gap: 7px; + justify-items: initial; + padding: 0 7px 0 10px; +} + +.drawing-controls-panel .drawing-storage-switch .ui-icon { + justify-self: initial; +} + +.drawing-controls-panel .drawing-storage-switch i { + width: 30px; + height: 16px; +} + +.drawing-controls-panel .notepad-color-menu { + top: auto; + bottom: calc(100% + 8px); + right: auto; + left: 50%; + transform: translate(-50%, 4px); +} + +.drawing-controls-panel .notepad-color-dropdown:hover .notepad-color-menu, +.drawing-controls-panel .notepad-color-dropdown:focus-within .notepad-color-menu, +.drawing-controls-panel .notepad-color-dropdown.is-open .notepad-color-menu { + transform: translate(-50%, 0); +} + +.drawing-controls-panel .notepad-color-menu::after { + top: 100%; + right: 0; + bottom: auto; + left: 0; + width: 100%; + height: 10px; +} + +.drawing-controls-panel .notepad-color-menu::before { + top: 100%; + right: auto; + left: calc(50% - 7px); + bottom: auto; + border-top: 7px solid rgba(10, 13, 28, 0.99); + border-right: 7px solid transparent; + border-bottom: 0; + border-left: 7px solid transparent; +} + +.notepad-footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: var(--space-2); + color: var(--color-text-muted); + font-size: var(--font-size-xs); +} + +.inline-form, +.field { + display: grid; + gap: 10px; + padding: var(--space-4); +} + +.inline-form { + grid-template-columns: 1fr auto; +} + +.checklist-add-form { + grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr) 76px auto; +} + +.module-add-panel { + display: grid; + gap: var(--space-3); + padding: var(--space-4); +} + +.module-add-panel .inline-form { + padding: 0; +} + +.text-import-actions { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: var(--space-2); +} + +.text-import-actions button { + display: inline-flex; + min-height: 42px; + align-items: center; + gap: 8px; +} + +.text-import-actions .ui-icon { + width: 17px; + height: 17px; +} + +.text-import-modal-dialog { + width: min(640px, calc(100vw - 32px)); +} + +.text-import-modal-root { + z-index: 330; +} + +.text-import-modal-dialog header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + margin-bottom: var(--space-4); +} + +.text-import-modal-dialog h2 { + margin: 0; +} + +.text-import-modal-form { + display: grid; + gap: var(--space-3); +} + +.text-import-modal-form textarea.has-error { + border-color: rgba(248, 113, 113, 0.75); + box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.24), var(--shadow-sm); +} + +.text-import-error { + display: inline-flex; + align-items: center; + gap: 8px; + margin: 0; + color: #fecaca; + font-size: var(--font-size-sm); + font-weight: 700; +} + +.text-import-info { + display: inline-flex; + align-items: center; + gap: 8px; + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 700; +} + +.text-import-info .ui-icon, +.text-import-error .ui-icon { + width: 16px; + height: 16px; +} + +.text-import-modal-form textarea { + min-height: 260px; + resize: vertical; +} + +.text-import-modal-form footer { + display: flex; + justify-content: flex-end; + gap: 10px; +} + +.checklist-qty-input { + padding-inline: 10px; + text-align: center; +} + +input, +select, +textarea { + min-height: 44px; + padding: 0 14px; + outline: none; +} + +textarea { + padding-block: 14px; +} + +input::placeholder, +textarea::placeholder { + color: var(--color-text-muted); + opacity: 0.58; +} + +input:focus, +select:focus, +textarea:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); +} + +.checklist { + display: grid; + gap: var(--space-3); + margin: var(--space-4) 0 0; + padding: 0 var(--space-4) var(--space-4); + list-style: none; +} + +.checklist-toolbar { + display: flex; + justify-content: flex-end; + padding: var(--space-4) var(--space-4) 0; +} + +.checklist-section { + display: grid; + gap: 8px; +} + +.checklist-section.is-grouped { + padding: 10px; + border: 1px solid rgba(246, 196, 83, 0.16); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.04), transparent 42%), + rgba(7, 10, 24, 0.18); +} + +.checklist-section-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + padding: 0 2px; +} + +.checklist-section-header > h3 { + flex: 1 1 auto; + min-width: 0; +} + +.checklist-section-actions { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 8px; +} + +.checklist-section-header h3 { + margin: 0; + color: var(--color-accent-gold); + font-size: var(--font-size-sm); +} + +.checklist-section-title-input { + width: 100%; + min-height: 30px; + padding: 5px 8px; + border: 1px solid transparent; + border-radius: var(--radius-md); + background: transparent; + color: var(--color-accent-gold); + font: inherit; + outline: none; +} + +.checklist-section-title-input:hover, +.checklist-section-title-input:focus { + border-color: rgba(246, 196, 83, 0.34); + background: rgba(21, 26, 48, 0.34); +} + +.checklist-section.is-complete .checklist-section-header h3 { + color: var(--color-text-muted); + text-decoration: line-through; +} + +.checklist-section.is-complete .checklist-section-title-input { + color: var(--color-text-muted); + text-decoration: line-through; +} + +.checklist-section-actions > span { + flex: 0 0 auto; + padding: 3px 9px; + border: 1px solid rgba(246, 196, 83, 0.22); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.08); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.timer-alert-mode-switch { + display: inline-flex; + width: fit-content; + align-items: center; + opacity: 0.78; +} + +.checklist-complete-mode-button, +.timer-alert-mode-button { + display: inline-grid; + width: 36px; + min-width: 36px; + min-height: 34px; + place-items: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: 0; + background: rgba(5, 7, 17, 0.24); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.checklist-complete-mode-button:first-child, +.timer-alert-mode-button:first-child { + border-radius: var(--radius-pill) 0 0 var(--radius-pill); +} + +.checklist-complete-mode-button:last-child, +.timer-alert-mode-button:last-child { + border-radius: 0 var(--radius-pill) var(--radius-pill) 0; +} + +.checklist-complete-mode-button + .checklist-complete-mode-button, +.timer-alert-mode-button + .timer-alert-mode-button { + margin-left: -1px; +} + +.checklist-complete-mode-button .ui-icon, +.timer-alert-mode-button .ui-icon { + width: 16px; + height: 16px; +} + +.timer-alert-mode-button { + width: 24px; + min-width: 24px; + min-height: 26px; + border-color: rgba(165, 180, 252, 0.08); + background: rgba(5, 7, 17, 0.26); + color: var(--color-text-muted); +} + +.timer-alert-mode-button .ui-icon { + width: 13px; + height: 13px; +} + +.checklist-section-collapse-button { + display: inline-grid; + width: 30px; + min-width: 30px; + min-height: 30px; + place-items: center; + padding: 0; + border: 1px solid rgba(246, 196, 83, 0.28); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.08)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.3), rgba(196, 181, 253, 0.18)) border-box; + color: #fff; +} + +.checklist-section-collapse-button .ui-icon { + width: 16px; + height: 16px; + background-color: #fff; + opacity: 1; + filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.22)); +} + +.checklist-section-items { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.checklist-category-boundary-drop-zone { + min-height: 10px; + border: 1px dashed rgba(165, 180, 252, 0.16); + border-radius: var(--radius-sm); + background: rgba(15, 23, 42, 0.12); +} + +.checklist-category-boundary-drop-zone.is-drop-target { + border-color: rgba(246, 196, 83, 0.72); + background: rgba(246, 196, 83, 0.08); + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24); +} + +.checklist-item { + display: grid; + grid-template-columns: 1fr 42px 42px; + gap: 8px; + align-items: center; +} + +.checklist-item-main { + display: grid; + grid-template-columns: 30px auto minmax(0, 1fr); + min-height: 42px; + align-items: center; + gap: 10px; + padding: 0 12px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.44); +} + +.checklist-item-main:hover { + border-color: rgba(196, 181, 253, 0.22); + background: rgba(10, 13, 30, 0.54); +} + +.checklist-item-main.is-editing { + grid-template-columns: 30px auto minmax(96px, 1fr) minmax(84px, 0.45fr); +} + +.checklist-drag-handle { + display: inline-grid; + width: 30px; + min-width: 30px; + min-height: 30px; + place-items: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.76); + color: var(--color-text-secondary); + cursor: grab; + touch-action: none; + user-select: none; +} + +.checklist-drag-handle .ui-icon { + width: 15px; + height: 15px; +} + +.checklist-drag-handle:active { + cursor: grabbing; +} + +.checklist-section.is-drop-target { + border-color: rgba(246, 196, 83, 0.72); +} + +.checklist-item.is-dragging .checklist-item-main { + opacity: 0.58; +} + +.checklist-label-input, +.checklist-category-input { + min-width: 0; + width: 100%; + min-height: 30px; + padding: 5px 8px; + border: 1px solid transparent; + border-radius: var(--radius-md); + background: transparent; + color: var(--color-text-primary); +} + +.checklist-category-input { + color: var(--color-text-secondary); + font-size: var(--font-size-xs); +} + +.checklist-label-input:hover, +.checklist-label-input:focus, +.checklist-category-input:hover, +.checklist-category-input:focus { + border-color: rgba(246, 196, 83, 0.34); + background: rgba(21, 26, 48, 0.42); +} + +.checklist-item-summary { + display: flex; + min-width: 0; + align-items: center; + gap: 8px; + justify-content: flex-start; + padding: 0; + border: 0; + background: transparent; + color: var(--color-text-primary); + text-align: left; + box-shadow: none; +} + +.checklist-item-summary:hover { + border-color: transparent; + background: transparent; + box-shadow: none; +} + +.checklist-item-summary span { + min-width: 0; + overflow: hidden; + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; +} + +.checklist-edit-button { + display: inline-grid; + width: 40px; + min-width: 40px; + min-height: 40px; + place-items: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.76); + color: var(--color-text-secondary); +} + +.checklist-edit-button .ui-icon { + width: 17px; + height: 17px; +} + +.checklist input[type="checkbox"] { + flex: 0 0 auto; +} + +.checklist-item.is-complete .checklist-label-input { + color: var(--color-text-muted); + text-decoration: line-through; +} + +.checklist-item.is-complete .checklist-item-summary span { + color: var(--color-text-muted); + text-decoration: line-through; +} + +.checklist-qty-controls { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 6px; +} + +.checklist-qty-controls button { + width: 28px; + min-width: 28px; + min-height: 28px; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.88); + color: var(--color-text-secondary); + line-height: 1; +} + +.checklist-qty-current { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 3px; + color: var(--color-text-secondary); +} + +.checklist-qty-current input { + width: max(18px, calc((var(--qty-current-digits, 1) * 0.72rem) + 8px)); + min-height: 28px; + padding: 0 4px; + border: 1px solid transparent; + background: transparent; + color: var(--color-text-primary); + text-align: right; + -moz-appearance: textfield; +} + +.checklist-qty-current input::-webkit-outer-spin-button, +.checklist-qty-current input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; +} + +.checklist-qty-current input:hover, +.checklist-qty-current input:focus { + border-color: rgba(246, 196, 83, 0.34); + background: rgba(21, 26, 48, 0.42); +} + +.checklist-qty-current span { + color: var(--color-text-secondary); + white-space: nowrap; +} + +.links-add-form { + grid-template-columns: minmax(120px, 0.7fr) minmax(180px, 1fr) auto; +} + +.links-list { + display: grid; + gap: 10px; + margin: var(--space-4); + padding: 0; + list-style: none; +} + +.module-add-panel + .links-list, +.module-add-panel + .checklist, +.module-add-panel + .task-planner-list, +.module-add-panel + .counters-grid { + margin-top: 0; +} + +.task-planner-module { + display: grid; + gap: var(--space-4); + padding: var(--space-4); +} + +.task-planner-topbar { + display: grid; + gap: 10px; + align-items: stretch; +} + +.task-planner-topbar .inline-form { + padding: 0; +} + +.task-planner-add-stack { + display: grid; + gap: var(--space-3); +} + +.task-planner-add-stack .text-import-actions { + padding-top: var(--space-2); +} + +.task-planner-global-controls { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 10px; +} + +.task-planner-settings-toggle, +.task-planner-dropdown-button, +.task-planner-settings-button { + display: inline-grid; + width: 34px; + min-width: 34px; + min-height: 34px; + place-items: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.76); + color: var(--color-text-secondary); +} + +.task-planner-settings-toggle { + grid-template-columns: 16px minmax(0, auto); + width: auto; + max-width: 100%; + padding: 0 12px; + gap: 8px; +} + +.task-planner-settings-toggle span { + overflow: hidden; + font-size: var(--font-size-xs); + font-weight: 900; + text-overflow: ellipsis; + white-space: nowrap; +} + +.task-planner-settings-toggle .ui-icon, +.task-planner-dropdown-button .ui-icon, +.task-planner-settings-button .ui-icon { + width: 16px; + height: 16px; +} + +.task-planner-clear-completed-button { + display: inline-flex; + min-height: 38px; + align-items: center; + justify-content: center; + gap: 8px; + padding: 0 12px; + white-space: nowrap; +} + +.task-planner-clear-completed-button .ui-icon { + width: 15px; + height: 15px; +} + +.task-planner-settings { + display: grid; + grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.72fr); + gap: 10px; + align-items: end; + padding: 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.06), transparent 58%), + rgba(7, 10, 24, 0.34); +} + +.task-planner-settings-actions { + display: flex; + grid-column: 1 / -1; + justify-content: flex-end; +} + +.task-planner-settings label, +.task-planner-reset-override { + display: grid; + gap: 6px; + min-width: 0; +} + +.task-planner-settings span, +.task-planner-reset-override > span, +.task-planner-relations > span { + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + text-transform: uppercase; +} + +.task-planner-settings select, +.task-planner-settings input, +.task-planner-add-form select, +.task-planner-type-select, +.task-planner-reset-override select, +.task-planner-reset-override input, +.task-planner-relations select { + width: 100%; + min-height: 36px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background-color: rgba(15, 23, 42, 0.64); + color: var(--color-text-primary); +} + +.task-planner-settings select option, +.task-planner-add-form select option, +.task-planner-type-select option, +.task-planner-reset-override select option, +.task-planner-relations select option { + background: #11182f; + color: var(--color-text-primary); +} + +.task-planner-add-form { + grid-template-columns: minmax(0, 1fr) minmax(120px, 0.36fr) auto; +} + +.task-planner-list { + display: grid; + gap: 10px; + margin: 0; + padding: 0; + list-style: none; +} + +.task-planner-child-list { + position: relative; + gap: 8px; + margin-top: 8px; + padding-left: 22px; +} + +.task-planner-child-list::before { + content: ""; + position: absolute; + top: -4px; + bottom: 15px; + left: 7px; + width: 1px; + background: linear-gradient(180deg, rgba(246, 196, 83, 0.46), rgba(139, 92, 246, 0.18)); +} + +.task-planner-child-list > .task-planner-item { + position: relative; +} + +.task-planner-hidden-parent { + position: relative; + display: grid; + gap: 8px; + min-width: 0; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(148, 163, 184, 0.035), transparent 56%), + rgba(5, 7, 17, 0.28); +} + +.task-planner-hidden-parent > .task-planner-child-list { + margin-top: 0; +} + +.task-planner-child-list > .task-planner-item::before, +.task-planner-child-list > .task-planner-hidden-parent::before { + content: ""; + position: absolute; + top: 25px; + left: -15px; + width: 11px; + height: 1px; + background: rgba(246, 196, 83, 0.46); +} + +.task-planner-hidden-parent-line { + display: grid; + grid-template-columns: 24px minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + min-height: 34px; + padding: 6px 10px; + border: 1px solid rgba(165, 180, 252, 0.08); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(148, 163, 184, 0.04), transparent 58%), + rgba(5, 7, 17, 0.24); + opacity: 0.76; +} + +.task-planner-hidden-parent-line > input[type="checkbox"] { + justify-self: center; +} + +.task-planner-hidden-parent-line > span { + min-width: 0; + overflow: hidden; + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-weight: 800; + text-decoration: line-through; + text-overflow: ellipsis; + white-space: nowrap; +} + +.task-planner-hidden-parent-line > small { + color: rgba(180, 189, 211, 0.62); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.task-planner-empty { + padding: var(--space-4); + border: 1px dashed rgba(165, 180, 252, 0.18); + border-radius: var(--radius-md); + color: var(--color-text-muted); + text-align: center; +} + +.task-planner-category-boundary-drop-zone { + min-height: 10px; + border: 1px dashed rgba(165, 180, 252, 0.16); + border-radius: var(--radius-sm); + background: rgba(15, 23, 42, 0.12); +} + +.task-planner-category-boundary-drop-zone.is-drop-target { + border-color: rgba(246, 196, 83, 0.72); + background: rgba(246, 196, 83, 0.08); + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24); +} + +.task-planner-category-section { + display: grid; + gap: 8px; + padding: 10px; + border: 1px solid rgba(246, 196, 83, 0.16); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.04), transparent 42%), + rgba(7, 10, 24, 0.18); +} + +.task-planner-category-header { + padding: 0 2px; +} + +.task-planner-category-title { + display: inline-flex; + flex: 1 1 auto; + min-width: 0; + align-items: center; + gap: 8px; +} + +.task-planner-category-actions { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 8px; +} + +.task-planner-category-header h3 { + min-width: 0; + margin: 0; + overflow: hidden; + color: var(--color-accent-gold); + font-size: var(--font-size-sm); + text-overflow: ellipsis; + white-space: nowrap; +} + +.task-planner-category-actions > span { + flex: 0 0 auto; + padding: 3px 9px; + border: 1px solid rgba(246, 196, 83, 0.22); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.08); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.task-planner-category-section.is-complete .task-planner-category-header h3 { + color: var(--color-text-muted); + text-decoration: line-through; +} + +.task-planner-category-section.is-dragging { + cursor: grabbing; + opacity: 0.58; + transform: scale(0.99); +} + +.task-planner-category-section.is-drop-target { + border-color: rgba(246, 196, 83, 0.72); +} + +.task-planner-category-section.is-drop-target.drop-after { + border-color: rgba(246, 196, 83, 0.72); +} + +.task-planner-item { + position: relative; + display: grid; + gap: 10px; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.task-planner-item.is-complete > .task-planner-line { + opacity: 0.78; +} + +.task-planner-item.has-missing-prerequisite { + border-color: rgba(246, 196, 83, 0.34); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.06), transparent 44%), + rgba(5, 7, 17, 0.36); +} + +.task-planner-line { + display: grid; + grid-template-columns: 30px 24px minmax(0, 1fr) 134px auto auto; + gap: 8px; + align-items: center; +} + +.task-planner-line > input[type="checkbox"] { + justify-self: center; +} + +.task-planner-drag-handle, +.task-planner-category-drag-handle, +.task-planner-delete-button { + display: inline-grid; + width: 30px; + min-width: 30px; + min-height: 30px; + place-items: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.76); + color: var(--color-text-secondary); +} + +.task-planner-drag-handle:disabled { + cursor: not-allowed; + opacity: 0.3; +} + +.task-planner-drag-handle .ui-icon, +.task-planner-category-drag-handle .ui-icon, +.task-planner-delete-button .ui-icon { + width: 15px; + height: 15px; +} + +.task-planner-actions { + display: inline-flex; + justify-content: flex-end; + gap: 6px; +} + +.task-planner-title-input { + font-weight: 800; +} + +.task-planner-item.is-complete > .task-planner-line .task-planner-title-input { + color: var(--color-text-muted); + text-decoration: line-through; +} + +.task-planner-type-select { + appearance: none; + -webkit-appearance: none; + width: 100%; + min-height: 36px; + overflow: hidden; + padding: 0 30px 0 10px; + border-color: rgba(165, 180, 252, 0.09); + text-overflow: ellipsis; + background-image: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c4b5fd' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), + linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(31, 41, 78, 0.08)), + linear-gradient(rgba(21, 26, 48, 0.38), rgba(21, 26, 48, 0.38)); + background-position: + calc(100% - 10px) 50%, + 0 0, + 0 0; + background-size: + 11px 11px, + auto, + auto; + background-repeat: no-repeat; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.task-planner-type-select:hover, +.task-planner-type-select:focus { + border-color: rgba(196, 181, 253, 0.22); + background-image: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f6c453' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), + linear-gradient(135deg, rgba(246, 196, 83, 0.06), rgba(139, 92, 246, 0.08)), + linear-gradient(rgba(21, 26, 48, 0.58), rgba(21, 26, 48, 0.58)); + color: var(--color-text-primary); +} + +.task-planner-warning { + display: inline-flex; + align-items: center; + padding: 4px 8px; + border: 1px solid rgba(246, 196, 83, 0.28); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; + white-space: nowrap; +} + +.task-planner-prerequisite-tooltip { + display: grid; + gap: 7px; + min-width: 180px; +} + +.task-planner-prerequisite-tooltip strong { + color: var(--color-text-primary); + font-size: var(--font-size-xs); +} + +.task-planner-prerequisite-tooltip > span { + display: grid; + gap: 4px; +} + +.task-planner-prerequisite-tooltip > span > span { + min-width: 0; + overflow: hidden; + color: var(--color-text-secondary); + text-overflow: ellipsis; + white-space: nowrap; +} + +.inline-notice { + display: inline-flex; + width: fit-content; + max-width: 100%; + align-items: center; + gap: 7px; + padding: 5px 9px; + border: 1px solid rgba(246, 196, 83, 0.28); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)), + rgba(9, 12, 28, 0.9); + box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; + line-height: 1.2; + animation: inline-notice-in 160ms ease; +} + +.inline-notice .ui-icon { + width: 14px; + height: 14px; + flex: 0 0 auto; +} + +.task-planner-notice { + position: absolute; + top: 48px; + left: 72px; + z-index: 2; + pointer-events: none; +} + +@keyframes inline-notice-in { + from { + opacity: 0; + transform: translateY(-2px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.task-planner-description-panel, +.task-planner-task-settings { + margin-left: 62px; +} + +.task-planner-description-panel { + display: grid; + gap: 10px; +} + +.task-planner-category-field, +.task-planner-description-field { + display: grid; + gap: 6px; + min-width: 0; +} + +.task-planner-category-field span, +.task-planner-description-field span { + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + text-transform: uppercase; +} + +.task-planner-category-field input { + width: 100%; +} + +.task-planner-category-field.is-disabled span { + color: rgba(148, 163, 184, 0.72); +} + +.task-planner-category-field.is-disabled input, +.task-planner-category-field input:disabled { + border-color: rgba(165, 180, 252, 0.08); + background: + linear-gradient(135deg, rgba(148, 163, 184, 0.05), transparent 62%), + rgba(15, 23, 42, 0.42); + box-shadow: none; + color: rgba(203, 213, 225, 0.66); + cursor: not-allowed; +} + +.task-planner-description { + min-height: 72px; + resize: vertical; +} + +.task-planner-task-settings { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + gap: 12px; + align-items: start; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(7, 10, 24, 0.24); +} + +.task-planner-reset-control { + display: grid; + grid-template-columns: minmax(0, 1fr) 34px; + gap: 8px; + align-items: center; +} + +.task-planner-reset-control button { + display: inline-grid; + width: 34px; + min-width: 34px; + min-height: 36px; + place-items: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.58); + color: var(--color-text-secondary); +} + +.task-planner-reset-control button:disabled { + opacity: 0.42; + cursor: not-allowed; +} + +.task-planner-reset-control button .ui-icon { + width: 14px; + height: 14px; +} + +.task-planner-reset-override.is-empty p { + display: grid; + min-height: 36px; + align-items: center; + margin: 0; + padding: 0 12px; + border: 1px solid rgba(165, 180, 252, 0.08); + border-radius: var(--radius-md); + background: rgba(15, 23, 42, 0.34); + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-weight: 800; +} + +.task-planner-relations { + display: grid; + grid-column: span 1; + gap: 6px; + min-width: 0; +} + +.task-planner-relations > div { + display: grid; + gap: 6px; + min-height: 36px; +} + +.task-planner-relations em { + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-style: normal; +} + +.task-planner-relation-chip { + display: grid; + grid-template-columns: minmax(0, 1fr) auto 28px; + gap: 8px; + align-items: center; + padding: 4px 5px 4px 9px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.46); +} + +.task-planner-relation-chip > span { + min-width: 0; + overflow: hidden; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; +} + +.task-planner-relation-chip label { + display: inline-flex; + align-items: center; + gap: 5px; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.task-planner-relation-chip label input { + min-height: 0; +} + +.task-planner-relation-chip button { + display: inline-flex; + width: 26px; + min-width: 26px; + min-height: 26px; + align-items: center; + justify-content: center; + gap: 5px; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.58); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.task-planner-relation-chip button .ui-icon { + width: 12px; + height: 12px; +} + +.task-planner-relations select { + min-height: 36px; + padding-inline: 10px; +} + +.equipment-planner-module { + display: grid; + gap: 12px; + padding: var(--space-4); +} + +.equipment-planner-add-form { + grid-template-columns: 44px minmax(180px, 1fr) auto; +} + +.equipment-planner-picker { + position: relative; +} + +.equipment-planner-picker-trigger, +.equipment-planner-picker-option, +.equipment-planner-color-option { + display: inline-grid; + place-items: center; + min-height: 36px; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.58); + color: var(--color-text-secondary); +} + +.equipment-planner-picker-trigger { + grid-template-columns: 1fr 10px; + width: 44px; + gap: 2px; +} + +.equipment-planner-shape-picker .equipment-planner-picker-trigger { + grid-template-columns: 28px 10px; + width: 50px; +} + +.equipment-planner-add-form .equipment-planner-picker-trigger, +.equipment-planner-add-form input, +.equipment-planner-add-form button { + min-height: 42px; +} + +.equipment-planner-picker-trigger .ui-icon:first-child, +.equipment-planner-picker-option .ui-icon { + width: 18px; + height: 18px; +} + +.equipment-planner-picker-trigger .equipment-planner-socket-icon { + width: 26px; + min-width: 26px; + height: 26px; +} + +.equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon { + width: 24px; + height: 24px; +} + +.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon, +.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon { + width: 28px; + min-width: 28px; + height: 28px; +} + +.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon, +.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon .ui-icon { + width: 26px; + height: 26px; +} + +.equipment-planner-picker-trigger .ui-icon:last-child { + width: 9px; + height: 9px; +} + +.equipment-planner-picker-trigger.active, +.equipment-planner-picker-option.active, +.equipment-planner-color-option.active { + border-color: rgba(246, 196, 83, 0.55); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), + rgba(21, 26, 48, 0.76); + color: var(--color-text-primary); +} + +.equipment-planner-picker-menu { + position: fixed; + z-index: 12; + width: max-content; + max-width: calc(100vw - 16px); + padding: 8px; + border: 1px solid rgba(165, 180, 252, 0.14); + border-radius: var(--radius-md); + background: rgba(9, 12, 28, 0.98); + box-shadow: var(--shadow-md); +} + +.equipment-planner-picker-grid, +.equipment-planner-color-grid { + display: grid; + grid-template-columns: repeat(var(--picker-columns, 5), 32px); + gap: 7px; +} + +.equipment-planner-picker-option { + width: 32px; + min-width: 32px; + min-height: 32px; +} + +.equipment-planner-color-grid { + grid-template-columns: repeat(var(--picker-columns, 6), 28px); +} + +.equipment-planner-color-option { + width: 28px; + min-width: 28px; + min-height: 28px; +} + +.equipment-planner-summary, +.equipment-planner-type-section, +.equipment-planner-panel { + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(7, 10, 24, 0.28); +} + +.equipment-planner-summary { + display: grid; + gap: 10px; + padding: 12px; +} + +.equipment-planner-summary-header, +.equipment-planner-type-header, +.equipment-planner-trait-category-header, +.equipment-planner-socket-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + min-width: 0; +} + +.equipment-planner-summary-header h3, +.equipment-planner-panel h4 { + margin: 0; + color: var(--color-text-primary); + font-size: var(--font-size-md); +} + +.equipment-planner-summary-header span, +.equipment-planner-type-actions > span, +.equipment-planner-trait-category-header span { + padding: 4px 8px; + border: 1px solid rgba(246, 196, 83, 0.18); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; + white-space: nowrap; +} + +.equipment-planner-summary-grid { + display: grid; + gap: 10px; +} + +.equipment-planner-summary-source-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: start; + gap: 10px; +} + +.equipment-planner-summary-source-grid.columns-1 { + grid-template-columns: minmax(0, 1fr); +} + +.equipment-planner-summary-panel { + display: grid; + align-content: start; + gap: 8px; + min-width: 0; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.08); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.32); +} + +.equipment-planner-summary-grid strong, +.equipment-planner-field span { + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + text-transform: uppercase; +} + +.equipment-planner-summary-grid ul, +.equipment-planner-list, +.equipment-planner-equipment-list, +.equipment-planner-trait-list ul, +.equipment-planner-materials, +.equipment-planner-socket-bonuses { + display: grid; + align-content: start; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.equipment-planner-summary-grid li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + min-width: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.equipment-planner-summary-grid li.equipment-planner-summary-total { + grid-template-columns: 18px minmax(0, 1fr) auto; +} + +.equipment-planner-summary-total .ui-icon { + width: 16px; + height: 16px; + color: var(--color-accent-gold); +} + +.equipment-planner-summary-total .equipment-planner-socket-icon { + width: 18px; + min-width: 18px; + height: 18px; +} + +.equipment-planner-summary-total .equipment-planner-socket-icon .ui-icon { + width: 17px; + height: 17px; +} + +.equipment-planner-summary-grid li span, +.equipment-planner-summary-grid li small { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-summary-grid li b { + color: var(--color-text-primary); +} + +.equipment-planner-summary-grid li .ui-tooltip { + overflow: visible; + white-space: normal; +} + +.equipment-planner-summary-tooltip { + display: grid; + gap: 7px; + min-width: 190px; +} + +.equipment-planner-summary-tooltip > strong { + color: var(--color-text-primary); + font-size: var(--font-size-xs); +} + +.equipment-planner-summary-tooltip > span { + display: grid; + gap: 5px; +} + +.equipment-planner-summary-tooltip-row { + display: grid; + grid-template-columns: 16px minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + min-height: 18px; + line-height: 18px; +} + +.equipment-planner-summary-tooltip-row .ui-icon { + width: 14px; + height: 14px; + color: var(--color-accent-gold); +} + +.equipment-planner-summary-tooltip-row span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-summary-tooltip-row b { + color: var(--color-text-primary); +} + +.equipment-planner-summary-grid p, +.equipment-planner-muted, +.equipment-planner-empty { + margin: 0; + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +.equipment-planner-type-section { + display: grid; + gap: 8px; + padding: 10px; +} + +.equipment-planner-list { + gap: 12px; +} + +.equipment-planner-type-section.is-drop-target, +.equipment-planner-item.is-drop-target, +.equipment-planner-trait-category.is-drop-target, +.equipment-planner-trait.is-drop-target { + border-color: rgba(246, 196, 83, 0.72); +} + +.equipment-planner-type-title { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} + +.equipment-planner-type-title h3 { + min-width: 0; + margin: 0; + overflow: hidden; + color: var(--color-text-primary); + font-size: var(--font-size-md); + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-type-icon { + display: inline-grid; + width: 28px; + min-width: 28px; + height: 28px; + place-items: center; + border: 1px solid rgba(246, 196, 83, 0.2); + border-radius: var(--radius-md); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); +} + +.equipment-planner-type-icon .ui-icon { + width: 16px; + height: 16px; +} + +.equipment-planner-type-actions { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.equipment-planner-type-boundary-drop-zone { + min-height: 7px; + border-radius: var(--radius-pill); +} + +.equipment-planner-type-boundary-drop-zone.is-drop-target { + background: rgba(246, 196, 83, 0.5); +} + +.equipment-planner-equipment-list { + padding-left: 0; +} + +.equipment-planner-item { + display: grid; + gap: 10px; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.equipment-planner-item.is-inactive { + opacity: 0.68; +} + +.equipment-planner-line { + display: grid; + grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px; + gap: 8px; + align-items: center; +} + +.equipment-planner-name { + min-width: 0; + overflow: hidden; + color: var(--color-text-primary); + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-identity { + display: flex; + min-width: 0; + align-items: center; + gap: 8px; +} + +.equipment-planner-include-switch { + display: inline-flex; + align-items: center; + justify-self: end; + gap: 8px; + min-width: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + cursor: pointer; +} + +.equipment-planner-include-switch input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.equipment-planner-include-switch > span { + position: relative; + width: 36px; + min-width: 36px; + height: 20px; + border: 1px solid rgba(165, 180, 252, 0.18); + border-radius: var(--radius-pill); + background: rgba(15, 23, 42, 0.8); +} + +.equipment-planner-include-switch > span::before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--color-text-muted); + transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); +} + +.equipment-planner-include-switch input:checked + span { + border-color: rgba(246, 196, 83, 0.48); + background: rgba(246, 196, 83, 0.16); +} + +.equipment-planner-include-switch input:checked + span::before { + transform: translateX(16px); + background: var(--color-accent-gold); +} + +.equipment-planner-include-switch b { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-details { + display: grid; + gap: 10px; + padding: 0 0 0 48px; +} + +.equipment-planner-tabs { + display: flex; + width: fit-content; + max-width: 100%; + align-items: stretch; + overflow: hidden; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.equipment-planner-tab { + display: inline-flex; + min-height: 34px; + align-items: center; + gap: 7px; + padding: 0 10px; + border: 0; + border-radius: 0; + background: transparent; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.equipment-planner-tab + .equipment-planner-tab { + border-left: 1px solid rgba(165, 180, 252, 0.1); +} + +.equipment-planner-tab.active { + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), + rgba(21, 26, 48, 0.64); + color: var(--color-text-primary); +} + +.equipment-planner-edit-mode-button { + display: inline-flex; + min-height: 34px; + align-items: center; + gap: 7px; + padding: 0 10px; + border: 0; + border-left: 1px solid rgba(165, 180, 252, 0.1); + border-radius: 0; + background: rgba(21, 26, 48, 0.42); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.equipment-planner-edit-mode-button.active { + color: var(--color-accent-gold); +} + +.equipment-planner-edit-mode-button .ui-icon { + width: 15px; + height: 15px; +} + +.equipment-planner-tab .ui-icon, +.equipment-planner-percent-icon { + width: 16px; + height: 16px; +} + +.equipment-planner-percent-icon { + display: inline-grid; + place-items: center; + color: var(--color-accent-gold); + font-size: var(--font-size-sm); + font-weight: 900; +} + +.equipment-planner-craft-tab { + display: grid; + gap: 10px; +} + +.equipment-planner-readonly-text, +.equipment-planner-trait-readonly, +.equipment-planner-material-readonly { + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.equipment-planner-display-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.equipment-planner-display-panel { + display: grid; + align-content: start; + gap: 8px; + min-width: 0; + padding: 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.34); +} + +.equipment-planner-display-panel h4 { + margin: 0; + color: var(--color-accent-gold); + font-size: var(--font-size-md); +} + +.equipment-planner-display-panel ul { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.equipment-planner-display-panel li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.equipment-planner-display-stat { + grid-template-columns: 18px minmax(0, 1fr) auto !important; +} + +.equipment-planner-display-stat .ui-icon { + width: 16px; + height: 16px; + color: var(--color-accent-gold); +} + +.equipment-planner-display-panel p { + margin: 0; + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +.equipment-planner-display-panel b { + color: var(--color-text-primary); +} + +.equipment-planner-display-socket { + grid-template-columns: 24px minmax(0, 1fr) !important; +} + +.equipment-planner-display-socket > div { + display: grid; + gap: 2px; + min-width: 0; +} + +.equipment-planner-display-socket strong, +.equipment-planner-display-socket small { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-display-socket small { + color: var(--color-text-muted); + font-size: var(--font-size-xs); +} + +.equipment-planner-trait-readonly, +.equipment-planner-material-readonly { + display: flex; + grid-column: 1 / -1; + min-width: 0; + align-items: center; + gap: 8px; +} + +.equipment-planner-trait-readonly .ui-icon { + width: 15px; + min-width: 15px; + height: 15px; + color: var(--color-accent-gold); +} + +.equipment-planner-trait-readonly span, +.equipment-planner-material-readonly span, +.equipment-planner-socket-heading strong { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-trait-readonly b, +.equipment-planner-material-readonly b { + margin-left: auto; + color: var(--color-text-primary); +} + +.equipment-planner-field, +.equipment-planner-panel { + display: grid; + gap: 8px; + min-width: 0; +} + +.equipment-planner-field textarea { + min-height: 70px; + resize: vertical; +} + +.equipment-planner-panel { + padding: 10px; +} + +.equipment-planner-trait-form { + grid-template-columns: 44px minmax(110px, 0.7fr) minmax(120px, 1fr) minmax(88px, 0.45fr) auto; +} + +.equipment-planner-trait-list, +.equipment-planner-trait-category { + display: grid; + gap: 8px; +} + +.equipment-planner-trait-category { + padding: 8px; + border: 1px solid rgba(165, 180, 252, 0.08); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.22); +} + +.equipment-planner-trait-category-header { + justify-content: flex-start; +} + +.equipment-planner-trait-category-header strong { + min-width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-trait { + display: grid; + grid-template-columns: 30px 44px minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(72px, 0.5fr) 30px; + gap: 7px; + align-items: center; +} + +.equipment-planner-material-form { + grid-template-columns: minmax(160px, 1fr) 82px auto; +} + +.equipment-planner-materials li { + display: grid; + grid-template-columns: minmax(0, 1fr) 82px 30px; + gap: 7px; + align-items: center; +} + +.equipment-planner-socket-form { + grid-template-columns: minmax(160px, 1fr) 44px 44px auto; +} + +.equipment-planner-socket-grid { + display: grid; + grid-template-columns: 1fr; + gap: 10px; +} + +.equipment-planner-socket-card { + display: grid; + gap: 8px; + min-width: 0; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.34); +} + +.equipment-planner-socket-heading { + grid-template-columns: 30px minmax(0, 1fr) 30px; +} + +.equipment-planner-socket-heading input { + min-width: 0; +} + +.equipment-planner-socket-token { + display: inline-block; + width: 24px; + height: 24px; + border: 2px solid rgba(245, 247, 255, 0.36); + box-shadow: 0 0 18px rgba(246, 196, 83, 0.16); +} + +.equipment-planner-socket-icon { + display: inline-grid; + width: 24px; + min-width: 24px; + height: 24px; + place-items: center; +} + +.equipment-planner-socket-icon .ui-icon { + width: 22px; + height: 22px; + background: var(--equipment-socket-icon-color, currentColor); + color: var(--equipment-socket-icon-color, currentColor) !important; +} + +.equipment-planner-socket-icon.color-red { + color: #ef4444; +} + +.equipment-planner-socket-icon.color-orange { + color: #f97316; +} + +.equipment-planner-socket-icon.color-amber { + color: #f59e0b; +} + +.equipment-planner-socket-icon.color-yellow { + color: var(--color-accent-gold); +} + +.equipment-planner-socket-icon.color-lime { + color: #84cc16; +} + +.equipment-planner-socket-icon.color-green { + color: #22c55e; +} + +.equipment-planner-socket-icon.color-teal { + color: #14b8a6; +} + +.equipment-planner-socket-icon.color-cyan { + color: var(--color-accent-cyan); +} + +.equipment-planner-socket-icon.color-blue { + color: #3b82f6; +} + +.equipment-planner-socket-icon.color-indigo { + color: var(--color-accent-indigo); +} + +.equipment-planner-socket-icon.color-violet { + color: #7c3aed; +} + +.equipment-planner-socket-icon.color-purple { + color: var(--color-primary); +} + +.equipment-planner-socket-icon.color-pink { + color: var(--color-accent-pink); +} + +.equipment-planner-socket-icon.color-rose { + color: #f43f5e; +} + +.equipment-planner-socket-icon.color-white { + color: #f8fafc; +} + +.equipment-planner-socket-icon.color-gray { + color: #64748b; +} + +.equipment-planner-socket-icon.color-black { + color: #020617; +} + +.equipment-planner-color-swatch { + display: inline-block; + width: 16px; + height: 16px; + border: 1px solid rgba(245, 247, 255, 0.28); + border-radius: 50%; +} + +.equipment-planner-socket-token.color-red, +.equipment-planner-color-swatch.color-red { + background: #ef4444; +} + +.equipment-planner-socket-token.color-orange, +.equipment-planner-color-swatch.color-orange { + background: #f97316; +} + +.equipment-planner-socket-token.color-amber, +.equipment-planner-color-swatch.color-amber { + background: #f59e0b; +} + +.equipment-planner-socket-token.color-yellow, +.equipment-planner-color-swatch.color-yellow { + background: var(--color-accent-gold); +} + +.equipment-planner-socket-token.color-lime, +.equipment-planner-color-swatch.color-lime { + background: #84cc16; +} + +.equipment-planner-socket-token.color-green, +.equipment-planner-color-swatch.color-green { + background: #22c55e; +} + +.equipment-planner-socket-token.color-teal, +.equipment-planner-color-swatch.color-teal { + background: #14b8a6; +} + +.equipment-planner-socket-token.color-cyan, +.equipment-planner-color-swatch.color-cyan { + background: var(--color-accent-cyan); +} + +.equipment-planner-socket-token.color-blue, +.equipment-planner-color-swatch.color-blue { + background: #3b82f6; +} + +.equipment-planner-socket-token.color-indigo, +.equipment-planner-color-swatch.color-indigo { + background: var(--color-accent-indigo); +} + +.equipment-planner-socket-token.color-violet, +.equipment-planner-color-swatch.color-violet { + background: #7c3aed; +} + +.equipment-planner-socket-token.color-purple, +.equipment-planner-color-swatch.color-purple { + background: var(--color-primary); +} + +.equipment-planner-socket-token.color-pink, +.equipment-planner-color-swatch.color-pink { + background: var(--color-accent-pink); +} + +.equipment-planner-socket-token.color-rose, +.equipment-planner-color-swatch.color-rose { + background: #f43f5e; +} + +.equipment-planner-socket-token.color-white, +.equipment-planner-color-swatch.color-white { + background: #f8fafc; +} + +.equipment-planner-socket-token.color-gray, +.equipment-planner-color-swatch.color-gray { + background: #64748b; +} + +.equipment-planner-socket-token.color-black, +.equipment-planner-color-swatch.color-black { + background: #020617; +} + +.equipment-planner-socket-controls, +.equipment-planner-socket-links { + display: flex; + flex-wrap: wrap; + gap: 7px; + min-width: 0; +} + +.equipment-planner-socket-controls { + align-items: center; +} + +.equipment-planner-socket-links select { + min-height: 32px; + flex: 1 1 96px; +} + +.equipment-planner-socket-controls select { + width: min(150px, 100%); + min-height: 32px; + margin-left: auto; +} + +.equipment-planner-bonus-form { + grid-template-columns: minmax(110px, 1fr) minmax(64px, 0.45fr) 44px; +} + +.equipment-planner-socket-bonuses li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto 30px; + gap: 7px; + align-items: center; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); +} + +.equipment-planner-socket-bonuses span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-link-chip { + display: inline-flex; + max-width: 100%; + align-items: center; + gap: 6px; + min-height: 28px; + padding: 0 8px; + border: 1px solid rgba(34, 211, 238, 0.28); + border-radius: var(--radius-pill); + background: rgba(34, 211, 238, 0.08); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.equipment-planner-link-chip::before { + content: ""; + width: 14px; + height: 1px; + background: var(--color-accent-cyan); +} + +.equipment-planner-link-chip span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-link-chip .ui-icon { + width: 11px; + height: 11px; +} + +@media (max-width: 760px) { + .task-planner-task-settings { + grid-template-columns: 1fr; + } + + .equipment-planner-summary-grid, + .equipment-planner-summary-source-grid, + .equipment-planner-display-grid, + .equipment-planner-add-form, + .equipment-planner-trait-form, + .equipment-planner-material-form, + .equipment-planner-socket-form, + .equipment-planner-bonus-form { + grid-template-columns: 1fr; + } + + .equipment-planner-line { + grid-template-columns: 30px minmax(0, 1fr) 34px 30px; + } + + .equipment-planner-include-switch { + grid-column: 2 / -1; + justify-self: start; + } + + .equipment-planner-details { + padding-left: 0; + } + + .equipment-planner-trait, + .equipment-planner-materials li { + grid-template-columns: 1fr; + } +} + +.combos-module { + display: grid; + gap: 12px; + padding: var(--space-4); +} + +.combos-editor { + display: grid; + gap: 12px; +} + +.combos-device-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; + align-items: end; +} + +.combos-device-row label, +.combos-form-grid label { + display: grid; + gap: 6px; + min-width: 0; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.combos-device-row select, +.combos-form-grid select, +.combos-form-grid input { + min-width: 0; +} + +.combos-keyboard-layout-switch { + display: inline-flex; + width: fit-content; + align-items: center; + padding: 4px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.26); +} + +.combos-keyboard-layout-switch button { + min-height: 34px; + padding: 0 10px; + border: 1px solid transparent; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.combos-keyboard-layout-switch button.active { + border-color: rgba(246, 196, 83, 0.26); + background: rgba(246, 196, 83, 0.1); + color: var(--color-text-primary); +} + +.combos-add-form { + display: grid; + gap: 12px; +} + +.combos-form-grid { + display: grid; + grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); + gap: 10px; +} + +.combo-draft-panel { + display: grid; + gap: 10px; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.32); +} + +.combo-draft-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.combos-simultaneous-toggle { + display: inline-flex; + width: auto; + min-width: 116px; + min-height: 34px; + padding: 3px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.26); + color: var(--color-text-secondary); + justify-content: stretch; + gap: 3px; +} + +.combos-simultaneous-toggle span { + display: inline-grid; + min-width: 50px; + min-height: 26px; + place-items: center; + border-radius: var(--radius-sm); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.combos-simultaneous-toggle span.active { + background: rgba(246, 196, 83, 0.12); + color: var(--color-text-primary); +} + +.combo-draft-actions .primary { + min-width: 104px; +} + +.combos-palette { + display: grid; + grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr); + gap: 10px; +} + +.combos-palette-column { + display: grid; + align-content: start; + gap: 10px; + min-width: 0; +} + +.combos-palette-group { + display: grid; + gap: 8px; + min-width: 0; + padding: 9px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.24); +} + +.combos-palette-group > span { + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.combos-palette-group > div { + display: flex; + flex-wrap: wrap; + gap: 7px; +} + +.combos-palette-group.is-direction-grid > div { + display: grid; + width: fit-content; + grid-template-columns: repeat(3, max-content); + gap: 7px; +} + +.combo-palette-empty-cell { + display: block; + width: 34px; + height: 38px; +} + +.combos-custom-key-form { + grid-template-columns: minmax(0, 1fr) auto; +} + +.combos-category-list { + display: grid; + gap: 10px; +} + +.combos-category-title { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 8px; +} + +.combos-category-title h3 { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.combos-category-header .combos-category-title { + gap: 6px; +} + +.combos-category-boundary-drop-zone { + min-height: 10px; + border: 1px dashed rgba(165, 180, 252, 0.16); + border-radius: var(--radius-sm); + background: rgba(15, 23, 42, 0.12); +} + +.combos-category-boundary-drop-zone.is-drop-target { + border: 1px dashed rgba(246, 196, 83, 0.72); + background: rgba(246, 196, 83, 0.08); + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24); +} + +.combos-list { + display: grid; + gap: 8px; +} + +.combo-card { + position: relative; + display: grid; + grid-template-columns: 30px minmax(0, 1fr) auto; + gap: 8px; + align-items: start; + padding: 8px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.combo-card.is-editing { + grid-template-columns: 30px minmax(0, 1fr) auto; +} + +.combo-drag-handle { + align-self: start; + touch-action: none; + user-select: none; +} + +.combo-card-main { + display: grid; + gap: 7px; + min-width: 0; +} + +.combo-title-input { + color: var(--color-text-primary); + font-size: var(--font-size-sm); + font-weight: 900; +} + +.combo-card-actions { + display: flex; + gap: 6px; + align-self: start; +} + +.combo-save-actions { + display: inline-flex; + gap: 8px; + margin-left: auto; +} + +.combo-cancel-button { + min-width: 104px; + min-height: 34px; + padding: 0 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.64); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.combo-sequence { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + column-gap: 5px; + align-items: center; + min-width: 0; +} + +.combo-step, +.combo-step-inputs, +.combo-step-input { + display: inline-flex; + align-items: center; + gap: 5px; +} + +.combo-step { + min-width: 0; +} + +.combo-step-input.is-selected .combo-input-token { + box-shadow: + var(--combo-token-shadow), + 0 0 0 2px rgba(246, 196, 83, 0.22); +} + +.combo-step-input.is-selected .combo-input-token.has-hold { + box-shadow: + var(--combo-token-shadow), + 0 0 0 2px rgba(246, 196, 83, 0.22), + 7px 0 0 -1px var(--combo-hold-shadow), + 9px 0 6px -3px var(--combo-hold-shadow); +} + +.combo-step-inputs { + min-height: 42px; + padding: 3px; + border: 1px solid transparent; + border-radius: var(--radius-pill); + background: transparent; +} + +button.combo-step-inputs { + min-width: 0; + min-height: 42px; + color: inherit; + cursor: pointer; +} + +.combo-step-inputs.is-single { + min-height: 38px; + padding: 0; +} + +.combo-step-inputs.is-simultaneous { + padding: 5px; + border-color: rgba(246, 196, 83, 0.34); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.07), transparent 64%), + rgba(5, 7, 17, 0.28); +} + +.combo-step-inputs.is-active { + border-color: rgba(139, 92, 246, 0.72); + background: rgba(139, 92, 246, 0.08); + box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12); +} + +.combo-step-inputs.is-single.is-active { + border-color: transparent; + background: transparent; + box-shadow: none; +} + +.combo-step-inputs.is-single.is-active .combo-input-token { + box-shadow: + var(--combo-token-shadow), + 0 0 0 2px rgba(139, 92, 246, 0.18); +} + +.combo-step-inputs.is-single.is-active .combo-input-token.has-hold { + box-shadow: + var(--combo-token-shadow), + 0 0 0 2px rgba(139, 92, 246, 0.18), + 7px 0 0 -1px var(--combo-hold-shadow), + 9px 0 6px -3px var(--combo-hold-shadow); +} + +.combo-step-separator, +.combo-plus { + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-weight: 900; +} + +.combo-step-separator { + margin-inline: 1px; +} + +.combo-empty-sequence { + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 700; +} + +.combo-empty-step { + padding: 0 8px; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.combo-input-token { + --combo-token-bg: rgba(21, 26, 48, 0.82); + --combo-token-border: rgba(165, 180, 252, 0.22); + --combo-token-color: var(--color-text-primary); + --combo-token-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); + --combo-hold-shadow: rgba(125, 135, 159, 0.34); + display: inline-flex; + box-sizing: border-box; + width: 34px; + min-width: 34px; + height: 34px; + min-height: 34px; + align-items: center; + justify-content: center; + padding: 0; + border: 1px solid var(--combo-token-border); + border-radius: 50%; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent), + var(--combo-token-bg); + color: var(--combo-token-color); + font-size: 12px; + font-weight: 950; + line-height: 1; + box-shadow: var(--combo-token-shadow); +} + +button.combo-input-token { + min-width: 36px; + min-height: 36px; + width: 36px; + height: 36px; + padding: 0; + cursor: pointer; +} + +button.combo-input-token:hover { + border-color: var(--color-primary-border); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent), + rgba(32, 39, 69, 0.92); +} + +.combo-input-token span { + display: block; + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; +} + +.combo-input-token .ui-icon { + width: 17px; + height: 17px; +} + +.combo-input-token.has-hold { + position: relative; + box-shadow: + var(--combo-token-shadow), + 7px 0 0 -1px var(--combo-hold-shadow), + 9px 0 6px -3px var(--combo-hold-shadow); +} + +.combo-input-hold { + position: absolute; + right: -7px; + bottom: -6px; + min-width: 20px; + padding: 1px 4px; + border: 1px solid rgba(246, 196, 83, 0.34); + border-radius: var(--radius-pill); + background: rgba(5, 7, 17, 0.92); + color: var(--color-accent-gold); + font-size: 9px; + font-style: normal; + font-weight: 950; + line-height: 1.2; + text-align: center; +} + +.combo-input-key, +.combo-input-mouse, +.combo-value-options, +.combo-value-share, +.combo-value-start, +.combo-value-menu, +.combo-value-view, +.combo-value-c-up, +.combo-value-c-down, +.combo-value-c-left, +.combo-value-c-right { + width: auto; + min-width: 48px; + padding: 0 10px; + border-radius: var(--radius-sm); +} + +.combo-input-short { + width: 36px; + min-width: 36px; + padding: 0; +} + +button.combo-input-token.combo-input-short { + width: 36px; + min-width: 36px; + padding: 0; +} + +button.combo-input-token.combo-input-key, +button.combo-input-token.combo-input-mouse, +button.combo-input-token.combo-value-options, +button.combo-input-token.combo-value-share, +button.combo-input-token.combo-value-start, +button.combo-input-token.combo-value-menu, +button.combo-input-token.combo-value-view, +button.combo-input-token.combo-value-c-up, +button.combo-input-token.combo-value-c-down, +button.combo-input-token.combo-value-c-left, +button.combo-input-token.combo-value-c-right { + width: auto; + min-width: 48px; + padding: 0 10px; +} + +button.combo-input-token.combo-input-short { + width: 36px; + min-width: 36px; + padding: 0; +} + +.combo-input-key span, +.combo-input-mouse span, +.combo-value-options span, +.combo-value-share span, +.combo-value-start span, +.combo-value-menu span, +.combo-value-view span, +.combo-value-c-up span, +.combo-value-c-down span, +.combo-value-c-left span, +.combo-value-c-right span { + text-overflow: clip; +} + +.combo-input-mouse, +button.combo-input-token.combo-input-mouse { + min-width: 62px; +} + +.combo-value-l1, +.combo-value-r1, +.combo-value-l2, +.combo-value-r2, +.combo-value-l3, +.combo-value-r3, +.combo-value-lb, +.combo-value-rb, +.combo-value-lt, +.combo-value-rt, +.combo-value-ls, +.combo-value-rs, +.combo-value-zl, +.combo-value-zr { + width: 38px; + min-width: 38px; + height: 38px; + padding: 0; + font-size: 11px; +} + +.combo-input-key { + height: 32px; + border-radius: 7px; + background: + linear-gradient(180deg, rgba(245, 247, 255, 0.11), rgba(5, 7, 17, 0.18)), + rgba(16, 20, 38, 0.94); + box-shadow: + inset 0 -3px 0 rgba(0, 0, 0, 0.28), + 0 1px 0 rgba(245, 247, 255, 0.08); +} + +.combo-value-ctrl, +.combo-value-alt, +.combo-value-shift, +.combo-value-enter, +.combo-value-tab { + min-width: 58px; +} + +.combo-value-space { + min-width: 92px; +} + +.combo-input-direction { + --combo-token-bg: + radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.26), transparent 64%), + rgba(34, 211, 238, 0.12); + --combo-token-border: rgba(34, 211, 238, 0.52); + --combo-token-color: #67e8f9; + --combo-token-shadow: + inset 0 -2px 0 rgba(0, 0, 0, 0.24), + inset 0 0 0 1px rgba(34, 211, 238, 0.16); + font-size: 15px; +} + +button.combo-input-token.combo-input-direction:hover { + border-color: rgba(34, 211, 238, 0.72); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent), + radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.34), transparent 64%), + rgba(18, 52, 70, 0.76); +} + +.combo-device-n64.combo-value-stick-up-left, +.combo-device-n64.combo-value-stick-up, +.combo-device-n64.combo-value-stick-up-right, +.combo-device-n64.combo-value-stick-left, +.combo-device-n64.combo-value-stick-right, +.combo-device-n64.combo-value-stick-down-left, +.combo-device-n64.combo-value-stick-down, +.combo-device-n64.combo-value-stick-down-right { + --combo-token-bg: + radial-gradient(circle at 38% 30%, rgba(245, 247, 255, 0.2), transparent 28%), + radial-gradient(circle at 50% 54%, rgba(34, 211, 238, 0.3), transparent 66%), + rgba(14, 75, 94, 0.68); + --combo-token-border: rgba(34, 211, 238, 0.62); + --combo-token-color: #a5f3fc; + --combo-token-shadow: + inset 0 -3px 0 rgba(0, 0, 0, 0.24), + inset 0 0 0 1px rgba(34, 211, 238, 0.18); +} + +.combo-device-n64.combo-value-up-left, +.combo-device-n64.combo-value-up, +.combo-device-n64.combo-value-up-right, +.combo-device-n64.combo-value-left, +.combo-device-n64.combo-value-right, +.combo-device-n64.combo-value-down-left, +.combo-device-n64.combo-value-down, +.combo-device-n64.combo-value-down-right { + --combo-token-bg: + linear-gradient(180deg, rgba(246, 196, 83, 0.12), transparent), + rgba(31, 34, 54, 0.92); + --combo-token-border: rgba(246, 196, 83, 0.48); + --combo-token-color: #f8d982; + --combo-token-shadow: + inset 0 -3px 0 rgba(0, 0, 0, 0.28), + inset 0 0 0 1px rgba(246, 196, 83, 0.14); + border-radius: 10px; +} + +button.combo-device-n64.combo-value-stick-up-left:hover, +button.combo-device-n64.combo-value-stick-up:hover, +button.combo-device-n64.combo-value-stick-up-right:hover, +button.combo-device-n64.combo-value-stick-left:hover, +button.combo-device-n64.combo-value-stick-right:hover, +button.combo-device-n64.combo-value-stick-down-left:hover, +button.combo-device-n64.combo-value-stick-down:hover, +button.combo-device-n64.combo-value-stick-down-right:hover { + border-color: rgba(34, 211, 238, 0.78); +} + +button.combo-device-n64.combo-value-up-left:hover, +button.combo-device-n64.combo-value-up:hover, +button.combo-device-n64.combo-value-up-right:hover, +button.combo-device-n64.combo-value-left:hover, +button.combo-device-n64.combo-value-right:hover, +button.combo-device-n64.combo-value-down-left:hover, +button.combo-device-n64.combo-value-down:hover, +button.combo-device-n64.combo-value-down-right:hover { + border-color: rgba(246, 196, 83, 0.7); + background: + linear-gradient(180deg, rgba(246, 196, 83, 0.16), transparent), + rgba(38, 40, 62, 0.96); +} + +.combo-device-playstation.combo-value-triangle { + --combo-token-bg: rgba(55, 214, 122, 0.16); + --combo-token-border: rgba(55, 214, 122, 0.4); + --combo-token-color: #37d67a; +} + +.combo-device-playstation.combo-value-circle { + --combo-token-bg: rgba(248, 113, 113, 0.16); + --combo-token-border: rgba(248, 113, 113, 0.4); + --combo-token-color: #f87171; +} + +.combo-device-playstation.combo-value-cross { + --combo-token-bg: rgba(96, 165, 250, 0.16); + --combo-token-border: rgba(96, 165, 250, 0.4); + --combo-token-color: #60a5fa; +} + +.combo-device-playstation.combo-value-square { + --combo-token-bg: rgba(244, 114, 182, 0.16); + --combo-token-border: rgba(244, 114, 182, 0.4); + --combo-token-color: #f472b6; +} + +.combo-device-xbox.combo-value-a { + --combo-token-bg: rgba(101, 212, 110, 0.16); + --combo-token-border: rgba(101, 212, 110, 0.4); + --combo-token-color: #65d46e; +} + +.combo-device-xbox.combo-value-b { + --combo-token-bg: rgba(239, 68, 68, 0.16); + --combo-token-border: rgba(239, 68, 68, 0.4); + --combo-token-color: #ef4444; +} + +.combo-device-xbox.combo-value-x { + --combo-token-bg: rgba(59, 130, 246, 0.16); + --combo-token-border: rgba(59, 130, 246, 0.4); + --combo-token-color: #3b82f6; +} + +.combo-device-xbox.combo-value-y { + --combo-token-bg: rgba(250, 204, 21, 0.16); + --combo-token-border: rgba(250, 204, 21, 0.42); + --combo-token-color: #facc15; +} + +.combo-device-switch.combo-value-a, +.combo-device-switch.combo-value-x { + --combo-token-bg: rgba(239, 68, 68, 0.14); + --combo-token-border: rgba(239, 68, 68, 0.36); + --combo-token-color: #fca5a5; +} + +.combo-device-switch.combo-value-b, +.combo-device-switch.combo-value-y { + --combo-token-bg: rgba(34, 211, 238, 0.14); + --combo-token-border: rgba(34, 211, 238, 0.34); + --combo-token-color: var(--color-accent-cyan); +} + +.combo-device-switch.combo-value-l, +.combo-device-switch.combo-value-r, +.combo-device-switch.combo-value-zl, +.combo-device-switch.combo-value-zr { + --combo-token-bg: rgba(245, 247, 255, 0.1); + --combo-token-border: rgba(245, 247, 255, 0.28); +} + +.combo-device-n64.combo-value-a { + --combo-token-bg: rgba(34, 197, 94, 0.18); + --combo-token-color: #86efac; +} + +.combo-device-n64.combo-value-b { + --combo-token-bg: rgba(59, 130, 246, 0.18); + --combo-token-color: #93c5fd; +} + +.combo-device-n64.combo-value-c-up, +.combo-device-n64.combo-value-c-down, +.combo-device-n64.combo-value-c-left, +.combo-device-n64.combo-value-c-right { + --combo-token-bg: rgba(246, 196, 83, 0.2); + --combo-token-border: rgba(246, 196, 83, 0.42); + --combo-token-color: var(--color-accent-gold); +} + +.combo-device-n64.combo-value-start { + --combo-token-bg: rgba(239, 68, 68, 0.16); + --combo-token-color: #fca5a5; +} + +.combo-value-fist, +.combo-value-foot, +.combo-value-grab, +.combo-value-protect, +.combo-value-shoot { + --combo-token-bg: rgba(217, 70, 239, 0.14); + --combo-token-border: rgba(217, 70, 239, 0.34); + --combo-token-color: var(--color-accent-pink); +} + +.combo-value-grab .ui-icon { + width: 24px; + height: 22px; +} + +button.combo-input-token.combo-value-grab .ui-icon { + width: 25px; + height: 23px; +} + +.combo-hold-field { + display: inline-flex; + align-items: center; + margin: 0; +} + +.combo-hold-controls { + display: inline-flex; + width: 92px; + min-width: 92px; + min-height: 34px; + align-items: center; + justify-content: stretch; + gap: 3px; + padding: 3px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.26); +} + +.combo-hold-controls button { + min-width: 50px; + min-height: 26px; + padding: 0; + border: 1px solid transparent; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.combo-hold-controls button.active { + border-color: rgba(246, 196, 83, 0.34); + background: rgba(246, 196, 83, 0.12); + color: var(--color-text-primary); +} + +.combo-hold-controls button:disabled { + cursor: not-allowed; + opacity: 0.48; +} + +.combo-hold-field input { + box-sizing: border-box; + width: 26px; + min-width: 26px; + height: 26px; + min-height: 26px; + margin: 0; + padding: 0 3px; + border: 1px solid transparent; + border-color: transparent; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + line-height: 1; + text-align: center; +} + +.combo-hold-field input:focus { + border-color: rgba(246, 196, 83, 0.34); +} + +.combo-hold-field input { + appearance: textfield; + -moz-appearance: textfield; +} + +.combo-hold-field input::-webkit-outer-spin-button, +.combo-hold-field input::-webkit-inner-spin-button { + margin: 0; + appearance: none; + -webkit-appearance: none; +} + +.counters-add-form { + grid-template-columns: minmax(0, 1fr) auto; +} + +.counters-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 220px)); + justify-content: start; + gap: 10px; + margin: var(--space-4); +} + +.counter-item { + position: relative; + display: grid; + min-height: 106px; + align-content: space-between; + gap: 12px; + padding: 12px 52px 12px 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 58%), + rgba(7, 10, 24, 0.42); +} + +.counter-drag-handle { + position: absolute; + top: 10px; + right: 10px; + display: inline-grid; + width: 34px; + min-width: 34px; + min-height: 34px; + place-items: center; + padding: 0; + color: var(--color-text-muted); + cursor: grab; + touch-action: none; + user-select: none; +} + +.counter-value { + display: grid; + gap: 3px; + min-width: 0; +} + +.counter-item strong { + color: var(--color-text-primary); + font-size: 34px; + font-weight: 900; + line-height: 0.95; +} + +.counter-item span { + overflow: hidden; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; +} + +.counter-actions { + display: grid; + grid-template-columns: repeat(4, 34px); + justify-content: start; + gap: 8px; +} + +.counter-actions button { + width: 34px; + min-width: 34px; + min-height: 34px; + padding: 0; + font-weight: 900; +} + +.calculator-module, +.timer-module { + display: grid; + grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); + column-gap: var(--space-6); + row-gap: var(--space-4); + align-items: start; + overflow: hidden; + padding: var(--space-4); +} + +.calculator-exchange-panel, +.timer-exchange-panel, +.table-exchange-panel { + grid-column: 1 / -1; + padding: 0; +} + +.calculator-form { + display: grid; + grid-template-columns: 1fr; + align-self: start; + align-content: start; + min-width: 0; + min-height: 0; +} + +.calculator-card, +.tool-split-results, +.timer-control-card, +.timer-results-card { + display: grid; + width: 100%; + max-width: 100%; + min-width: 0; + min-height: 0; + overflow: hidden; + padding: 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 62%), + rgba(7, 10, 24, 0.3); +} + +.timer-control-card, +.timer-results-card { + align-self: start; + gap: var(--space-3); +} + +.timer-tabs { + width: fit-content; + grid-template-columns: repeat(2, 40px); +} + +.timer-tabs button { + width: 40px; + min-width: 40px; + min-height: 36px; + padding: 0; +} + +.timer-control-panel { + display: grid; + min-height: 170px; + align-content: center; + gap: var(--space-2); + padding: var(--space-4); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%), + rgba(5, 7, 17, 0.5); +} + +.timer-countdown-form { + align-content: start; +} + +.timer-countdown-form label, +.timer-control-panel > label { + display: grid; + gap: 7px; +} + +.timer-field-spacer { + display: block; + min-height: 17px; +} + +.timer-countdown-form input, +.timer-countdown-form select, +.timer-control-panel input { + width: 100%; +} + +.timer-countdown-form select { + appearance: none; + -webkit-appearance: none; + overflow: hidden; + padding-right: 34px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + text-overflow: ellipsis; + background-image: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), + linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(31, 41, 78, 0.12)), + linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.72)); + background-position: + calc(100% - 14px) 50%, + 0 0, + 0 0; + background-size: + 12px 12px, + auto, + auto; + background-repeat: no-repeat; +} + +.timer-countdown-form select option { + background: #11182f; + color: var(--color-text-primary); +} + +.timer-countdown-form select, +.task-planner-settings select, +.task-planner-add-form select, +.task-planner-type-select, +.task-planner-reset-override select, +.task-planner-relations select { + appearance: none; + -webkit-appearance: none; + overflow: hidden; + padding-right: 34px; + text-overflow: ellipsis; + background-image: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c4b5fd' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), + linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(31, 41, 78, 0.08)), + linear-gradient(rgba(21, 26, 48, 0.38), rgba(21, 26, 48, 0.38)); + background-position: + calc(100% - 10px) 50%, + 0 0, + 0 0; + background-size: + 11px 11px, + auto, + auto; + background-repeat: no-repeat; +} + +.timer-countdown-form select:hover, +.timer-countdown-form select:focus, +.task-planner-settings select:hover, +.task-planner-settings select:focus, +.task-planner-add-form select:hover, +.task-planner-add-form select:focus, +.task-planner-type-select:hover, +.task-planner-type-select:focus, +.task-planner-reset-override select:hover, +.task-planner-reset-override select:focus, +.task-planner-relations select:hover, +.task-planner-relations select:focus { + border-color: rgba(196, 181, 253, 0.22); + background-image: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f6c453' viewBox='-6.5 0 32 32'%3E%3Cpath d='M18.813 11.406l-7.906 9.906c-.75.906-1.906.906-2.625 0L.376 11.406c-.75-.938-.375-1.656.781-1.656h16.875c1.188 0 1.531.719.781 1.656z'/%3E%3C/svg%3E"), + linear-gradient(135deg, rgba(246, 196, 83, 0.06), rgba(139, 92, 246, 0.08)), + linear-gradient(rgba(21, 26, 48, 0.58), rgba(21, 26, 48, 0.58)); + color: var(--color-text-primary); +} + +.time-parts-input { + display: grid; + grid-template-columns: minmax(34px, 1fr) 4px minmax(34px, 1fr) 4px minmax(34px, 1fr); + align-items: center; + min-height: 44px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(15, 23, 42, 0.64); + overflow: hidden; +} + +.time-parts-input:focus-within { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); +} + +.time-parts-input input { + width: auto; + min-width: 0; + min-height: 42px; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + text-align: center; + box-shadow: none; +} + +.time-parts-input input:focus { + border-color: transparent; + box-shadow: none; +} + +.time-parts-input input:focus-visible { + outline: 0; + outline-offset: 0; +} + +.time-parts-input span { + color: var(--color-text-muted); + font-weight: 900; + text-align: center; +} + +.timer-interval-fields { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--space-2); + min-width: 0; +} + +.timer-interval-fields label { + min-width: 0; + gap: 5px; +} + +.timer-interval-fields .time-parts-input { + grid-template-columns: minmax(22px, 1fr) 4px minmax(22px, 1fr) 4px minmax(22px, 1fr); + min-height: 38px; +} + +.timer-interval-fields .time-parts-input input { + min-height: 36px; + font-size: var(--font-size-xs); +} + +.timer-interval-fields .time-parts-input span { + font-size: var(--font-size-xs); +} + +.timer-form-error { + display: inline-flex; + width: 100%; + min-width: 0; + align-items: center; + gap: 7px; + padding: 7px 9px; + border: 1px solid rgba(251, 113, 133, 0.26); + border-radius: var(--radius-sm); + background: rgba(80, 25, 42, 0.28); + color: var(--color-danger); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.timer-form-error .ui-icon { + width: 13px; + height: 13px; + flex: 0 0 auto; +} + +.timer-form-error span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.timer-control-panel > span, +.timer-control-panel label span { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 900; +} + +.timer-control-panel strong { + color: var(--color-text-primary); + min-width: 0; + overflow: hidden; + font-weight: 950; + line-height: 0.95; +} + +.timer-value { + display: inline-flex; + min-width: 0; + align-items: baseline; + gap: 0.16em; + font-variant-numeric: tabular-nums; + letter-spacing: 0; + white-space: nowrap; +} + +.timer-value > span { + min-width: 0; +} + +.timer-control-panel .timer-value.is-compact { + max-width: 100%; +} + +.timer-value small { + color: var(--color-text-secondary); + font-size: inherit; + font-weight: 900; + line-height: 1; + flex: 0 0 auto; +} + +.timer-value.is-compact small { + display: inline-block; + font-size: 0.5em; + transform: translateY(-0.08em); +} + +.timer-value.is-compact { + font-size: clamp(1.45rem, 2.25vw, 2rem); +} + +.timer-control-panel p, +.timer-results-card p { + margin: 0; +} + +.timer-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); +} + +.timer-action-button, +.timer-actions .danger { + display: inline-flex; + width: 40px; + min-width: 40px; + min-height: 40px; + align-items: center; + justify-content: center; + padding: 0; +} + +.timer-list-item.is-expired { + opacity: 0.78; +} + +.timer-entry-meta { + display: flex; + grid-column: 1 / -2; + flex-wrap: nowrap; + min-width: 0; + gap: 4px 8px; + margin: 0; + padding: 1px 10px 0; + opacity: 0.68; + overflow: hidden; +} + +.timer-entry-summary .timer-value, +.timer-entry-value .timer-value { + color: var(--color-text-primary); + font-size: var(--font-size-md); + font-weight: 900; +} + +.timer-entry-summary { + min-width: 0; + cursor: pointer; +} + +.timer-entry-line { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + width: 100%; + max-width: 100%; + min-width: 0; + gap: var(--space-2); + align-items: center; + overflow: hidden; +} + +.timer-entry.has-inline-reset .timer-entry-line { + grid-template-columns: max-content minmax(0, 1fr) auto; +} + +.timer-entry.has-inline-controls .timer-entry-line { + grid-template-columns: max-content minmax(0, 1fr) auto; +} + +.timer-entry.has-single-action { + grid-template-columns: minmax(0, 1fr) 34px; +} + +.timer-entry.has-drag-handle { + grid-template-columns: 30px minmax(0, 1fr) 34px; +} + +.tool-split-entry-list li.is-editing > .timer-entry.has-single-action { + grid-template-columns: auto minmax(0, 1fr) 34px; +} + +.tool-split-entry-list li.is-editing > .timer-entry.has-drag-handle { + grid-template-columns: 30px auto minmax(0, 1fr) 34px; +} + +.timer-drag-handle { + width: 30px; + min-width: 30px; + min-height: 36px; + padding: 0; + color: var(--color-text-muted); + cursor: grab; + touch-action: none; + user-select: none; +} + +.timer-inline-reset { + width: 26px; + min-width: 26px; + min-height: 26px; + padding: 0; + border-color: rgba(165, 180, 252, 0.08); + border-radius: var(--radius-sm); + background: rgba(5, 7, 17, 0.26); + color: var(--color-text-muted); +} + +.timer-inline-refresh-toggle { + display: inline-grid; + grid-template-columns: 13px 18px; + width: 42px; + min-width: 42px; + min-height: 26px; + align-items: center; + gap: 3px; + padding: 0 4px; + border-color: rgba(165, 180, 252, 0.08); + border-radius: var(--radius-sm); + background: rgba(5, 7, 17, 0.26); + color: var(--color-text-muted); +} + +.timer-inline-refresh-toggle i { + position: relative; + display: block; + width: 18px; + height: 12px; + border: 1px solid rgba(165, 180, 252, 0.18); + border-radius: var(--radius-pill); + background: rgba(7, 10, 24, 0.72); +} + +.timer-inline-refresh-toggle i::before { + content: ""; + position: absolute; + top: 50%; + left: 2px; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-text-muted); + transform: translateY(-50%); + transition: + left var(--duration-fast) var(--ease-standard), + background-color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +.timer-inline-reset .ui-icon, +.timer-inline-refresh-toggle .ui-icon { + width: 14px; + height: 14px; +} + +.timer-inline-controls { + display: inline-flex; + min-width: 0; + align-items: center; + justify-content: flex-end; + gap: 4px; +} + +.timer-entry-line > span:nth-child(2) { + min-width: 0; + overflow: hidden; + color: var(--color-text-secondary); + font-weight: 600; + text-overflow: ellipsis; + white-space: nowrap; +} + +.timer-lap-label { + font-weight: 700; +} + +.timer-lap-label::placeholder { + color: rgba(229, 235, 255, 0.72); +} + +.timer-entry-meta span { + display: inline-flex; + align-items: center; + gap: 7px; + min-width: 0; + overflow: hidden; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; +} + +.timer-list-item em { + display: inline-flex; + align-items: center; + gap: 7px; + flex: 0 0 auto; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-style: normal; + font-weight: 700; + white-space: nowrap; +} + +.timer-entry-meta b { + min-width: 0; + overflow: hidden; + font: inherit; + text-overflow: ellipsis; + white-space: nowrap; +} + +.timer-entry-meta b + b::before, +.timer-entry-meta em::before { + content: ""; + display: inline-block; + width: 1px; + height: 10px; + margin-right: 7px; + background: rgba(165, 180, 252, 0.22); + vertical-align: -1px; +} + +.timer-results-card { + min-height: 260px; +} + +.timer-results-card.is-scrollable { + max-height: 450px; + overflow: hidden; +} + +.calculator-card { + gap: 10px; + align-self: start; + align-content: start; +} + +.calculator-form label, +.calculator-result { + display: grid; + width: 100%; + min-width: 0; + gap: 7px; +} + +.calculator-card > *, +.calculator-form input { + width: 100%; + min-width: 0; + max-width: 100%; +} + +.calculator-entry.has-drag-handle { + grid-template-columns: 30px minmax(0, 1fr) 34px 34px; +} + +.tool-split-entry-list li.is-editing > .calculator-entry.has-drag-handle { + grid-template-columns: 30px auto minmax(0, 1fr) 34px 34px; +} + +.calculator-drag-handle { + width: 30px; + min-width: 30px; + min-height: 36px; + padding: 0; + color: var(--color-text-muted); + cursor: grab; + touch-action: none; + user-select: none; +} + +.calculator-entry .tool-split-entry-summary > span { + display: flex; + min-width: 0; + align-items: baseline; + gap: 7px; +} + +.calculator-entry .tool-split-entry-summary strong, +.calculator-entry .tool-split-entry-value strong { + min-width: 0; + overflow: visible; + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.calculator-entry .tool-split-entry-summary strong { + flex: 0 0 auto; + font-size: var(--font-size-sm); +} + +.calculator-entry .tool-split-entry-summary strong.is-long, +.calculator-entry .tool-split-entry-value strong.is-long { + font-size: var(--font-size-xs); +} + +.calculator-entry .tool-split-entry-summary strong.is-compact, +.calculator-entry .tool-split-entry-value strong.is-compact { + font-size: 0.68rem; +} + +.calculator-entry .tool-split-entry-summary em { + min-width: 0; + flex: 1 1 auto; + overflow: hidden; + color: var(--color-text-secondary); + font-style: normal; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calculator-number-group { + color: var(--color-text-primary); +} + +.calculator-number-group.is-muted, +.calculator-number-separator { + color: rgba(215, 221, 237, 0.84); +} + +.calculator-number-separator { + display: inline-block; + min-width: 0.24em; +} + +.calculator-form label span, +.calculator-result span, +.tool-split-root-button { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 700; +} + +.calculator-result { + min-height: 72px; + justify-content: stretch; + padding: 12px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%), + rgba(5, 7, 17, 0.56); +} + +.calculator-result strong { + display: block; + min-width: 0; + max-width: 100%; + overflow: visible; + color: var(--color-text-primary); + font-size: clamp(1.55rem, 3vw, 2.15rem); + font-variant-numeric: tabular-nums; + font-weight: 900; + line-height: 0.95; + text-align: right; + white-space: nowrap; +} + +.calculator-result.is-long strong { + font-size: 1.18rem; + line-height: 1; +} + +.calculator-result.is-compact strong { + font-size: 0.92rem; + line-height: 1.05; +} + +.table-module { + display: grid; + gap: var(--space-3); + min-width: 0; + padding: var(--space-4); +} + +.table-toolbar { + justify-content: space-between; +} + +.table-controls { + flex: 1 1 auto; +} + +.table-size-indicator { + min-height: 34px; + display: inline-flex; + align-items: center; + padding: 0 8px; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; +} + +.table-copy-group { + margin-left: auto; +} + +.table-copy-group.notepad-toolbar-group { + padding-right: 0; + border-right: 0; +} + +.table-copy-button.notepad-toolbar-button { + display: inline-flex; + width: auto; + min-width: 0; + align-items: center; + gap: 8px; + padding-inline: 10px; +} + +.table-copy-button span { + white-space: nowrap; +} + +.table-grid-wrap { + width: 100%; + min-width: 0; + overflow: auto; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%), + rgba(7, 10, 24, 0.24); +} + +.table-grid { + display: grid; + grid-template-columns: var(--table-columns); + width: 100%; + min-width: var(--table-min-width); + align-items: stretch; + justify-content: start; +} + +.table-grid > * { + min-width: 0; +} + +.table-corner, +.table-header-cell, +.table-row-header { + display: grid; + min-height: 34px; + place-items: center; + border-right: 1px solid rgba(165, 180, 252, 0.1); + border-bottom: 1px solid rgba(165, 180, 252, 0.1); + background: rgba(5, 7, 17, 0.54); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + font-variant-numeric: tabular-nums; +} + +.table-header-input { + width: 100%; + padding: 0 8px; + border-top: 0; + border-left: 0; + border-radius: 0; + text-align: center; +} + +.table-header-input::placeholder { + color: var(--color-text-muted); + opacity: 1; +} + +.table-header-input:hover { + background: rgba(21, 26, 48, 0.68); +} + +.table-header-input:focus { + z-index: 5; + border-color: rgba(246, 196, 83, 0.38); + background: rgba(21, 26, 48, 0.8); + color: var(--color-text-primary); + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.55), 0 0 0 2px rgba(139, 92, 246, 0.18); + outline: 0; +} + +.table-header-cell { + position: sticky; + top: 0; + z-index: 2; +} + +.table-row-header { + position: sticky; + left: 0; + z-index: 1; +} + +.table-corner { + position: sticky; + top: 0; + left: 0; + z-index: 3; +} + +.table-cell-input { + width: 100%; + min-width: 0; + min-height: 34px; + padding: 6px 8px; + border: 0; + border-right: 1px solid rgba(165, 180, 252, 0.08); + border-bottom: 1px solid rgba(165, 180, 252, 0.08); + border-radius: 0; + background: rgba(16, 20, 38, 0.34); + color: var(--color-text-primary); + caret-color: transparent; + font-size: var(--font-size-sm); + font-variant-numeric: tabular-nums; +} + +.table-cell-input:hover { + background: rgba(32, 39, 69, 0.38); +} + +.table-cell-input:focus { + position: relative; + z-index: 4; + border-color: rgba(34, 211, 238, 0.42); + background: + linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(139, 92, 246, 0.06)), + rgba(21, 26, 48, 0.58); + box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.58); + outline: 0; +} + +.table-cell-input.is-editing:focus { + border-color: rgba(246, 196, 83, 0.38); + background: rgba(21, 26, 48, 0.72); + caret-color: auto; + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.55), 0 0 0 2px rgba(139, 92, 246, 0.18); +} + +.table-cell-input.is-formula { + color: var(--color-accent-cyan); +} + +.table-cell-input.has-error { + color: #fecaca; + background: rgba(127, 29, 29, 0.24); +} + +.table-cell-input.is-selected { + background: + linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.08)), + rgba(21, 26, 48, 0.58); + box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.42); +} + +.table-cell-input.is-move-target { + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.14), rgba(34, 211, 238, 0.08)), + rgba(21, 26, 48, 0.64); + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.66); + cursor: move; +} + +.table-cell-input.is-selected:focus { + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.6), 0 0 0 2px rgba(34, 211, 238, 0.2); +} + +.table-cell-input.is-selected:focus:not(.is-editing) { + box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.68); +} + +.table-cell-input.is-referenced { + box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.72); +} + +.tool-split-results { + grid-template-rows: auto minmax(0, 1fr); + gap: var(--space-3); + overflow: visible; + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%), + rgba(7, 10, 24, 0.22); +} + +.calculator-saved.is-scrollable { + height: var(--calculator-scroll-height, auto); + max-height: var(--calculator-scroll-height, none); + overflow: hidden; +} + +.tool-split-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); + align-items: center; + justify-content: flex-end; + min-width: 0; +} + +.tool-split-root-button { + width: fit-content; + min-height: 34px; + padding: 0 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.24); +} + +.tool-split-action-button, +.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value), +.counter-actions button, +.link-item button { + display: inline-flex; + width: 34px; + min-width: 34px; + min-height: 34px; + align-items: center; + justify-content: center; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.88); + color: var(--color-text-secondary); +} + +.tool-split-action-button:disabled { + cursor: not-allowed; + opacity: 0.48; +} + +.tool-split-action-button .ui-icon { + width: 16px; + height: 16px; +} + +.tool-split-scroll-toggle { + display: inline-grid; + grid-template-columns: 18px 34px; + width: fit-content; + min-height: 34px; + align-items: center; + gap: 8px; + padding: 0 6px 0 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-pill); + background: rgba(5, 7, 17, 0.24); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; +} + +.tool-split-scroll-toggle .ui-icon { + width: 16px; + height: 16px; +} + +.tool-split-scroll-toggle i { + position: relative; + display: block; + width: 34px; + height: 18px; + border: 1px solid rgba(165, 180, 252, 0.18); + border-radius: var(--radius-pill); + background: rgba(7, 10, 24, 0.72); +} + +.tool-split-scroll-toggle i::before { + content: ""; + position: absolute; + top: 50%; + left: 3px; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--color-text-muted); + transform: translateY(-50%); + transition: + left var(--duration-fast) var(--ease-standard), + background-color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +.tool-split-root-button { + margin-right: auto; +} + +.tool-split-root-button:hover, +.tool-split-action-button:hover:not(:disabled), +.checklist-qty-controls button:hover, +.checklist-drag-handle:hover, +.checklist-edit-button:hover, +.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value, .danger):hover, +.counter-actions button:not(.danger):hover, +.link-item button:not(.danger):hover, +.task-planner-drag-handle:hover:not(:disabled), +.task-planner-category-drag-handle:hover, +.task-planner-settings-toggle:hover, +.task-planner-dropdown-button:hover, +.task-planner-settings-button:hover, +.task-planner-reset-control button:hover:not(:disabled), +.task-planner-relation-chip button:hover, +.module-scroll-button:hover, +.tool-split-scroll-toggle:hover, +.checklist-complete-mode-button:hover, +.checklist-complete-mode-button.active:hover { + border-color: rgba(196, 181, 253, 0.32); + background: + linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box, + linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box; + color: var(--color-text-primary); + box-shadow: + 0 0 12px rgba(139, 92, 246, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.task-planner-settings-toggle.active, +.task-planner-dropdown-button.active, +.task-planner-settings-button.active { + @include mixins.temporary-toggle-active; +} + +.timer-alert-mode-button:hover, +.timer-alert-mode-button.active, +.timer-inline-refresh-toggle:hover:not(:disabled) { + border-color: rgba(196, 181, 253, 0.2); + background: rgba(21, 26, 48, 0.42); + color: var(--color-text-primary); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.timer-alert-mode-button.active, +.timer-inline-refresh-toggle.active { + border-color: rgba(246, 196, 83, 0.26); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.08), rgba(139, 92, 246, 0.08)), + rgba(21, 26, 48, 0.36); + color: var(--color-accent-gold); +} + +.timer-inline-refresh-toggle.active i { + border-color: rgba(246, 196, 83, 0.36); + background: rgba(246, 196, 83, 0.12); +} + +.timer-inline-refresh-toggle.active i::before { + left: 7px; + background: var(--color-accent-gold); + box-shadow: 0 0 10px rgba(246, 196, 83, 0.28); +} + +.timer-alert-mode-button:disabled, +.timer-alert-mode-button:disabled:hover, +.timer-alert-mode-button.active:disabled, +.timer-inline-refresh-toggle:disabled, +.timer-inline-refresh-toggle:disabled:hover, +.timer-inline-refresh-toggle.active:disabled { + cursor: not-allowed; + border-color: rgba(165, 180, 252, 0.025); + background: rgba(5, 7, 17, 0.08); + color: rgba(148, 163, 184, 0.22); + opacity: 1; + box-shadow: none; +} + +.timer-alert-mode-button:disabled .ui-icon, +.timer-inline-refresh-toggle:disabled .ui-icon { + opacity: 0.34; +} + +.timer-alert-mode-switch.is-blocked { + opacity: 1; + cursor: not-allowed; +} + +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button, +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:hover, +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button.active, +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:disabled, +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:disabled:hover, +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button.active:disabled { + cursor: not-allowed; + border-color: rgba(165, 180, 252, 0.035); + background: rgba(5, 7, 17, 0.1); + color: rgba(148, 163, 184, 0.32); + box-shadow: none; + opacity: 0.2; +} + +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button .ui-icon, +.timer-alert-mode-switch.is-blocked .timer-alert-mode-button:disabled .ui-icon { + opacity: 1; +} + +.checklist-section-collapse-button:hover { + border-color: rgba(246, 196, 83, 0.58); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.18), rgba(139, 92, 246, 0.12)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.62), rgba(196, 181, 253, 0.32)) border-box; + color: #fff; + box-shadow: + 0 0 10px rgba(246, 196, 83, 0.14), + 0 0 16px rgba(139, 92, 246, 0.08); +} + +.tool-split-action-button.danger, +.tool-split-entry > button.danger, +.notepad-toolbar-button.danger, +.counter-actions button.danger, +.link-item button.danger, +.task-planner-clear-completed-button.danger, +.task-planner-delete-button.danger { + border-color: rgba(251, 113, 133, 0.2); + background: rgba(21, 26, 48, 0.88); + color: var(--color-danger); +} + +.tool-split-action-button.danger:hover:not(:disabled), +.tool-split-entry > button.danger:hover, +.notepad-toolbar-button.danger:hover:not(:disabled), +.counter-actions button.danger:hover, +.link-item button.danger:hover, +.task-planner-clear-completed-button.danger:hover:not(:disabled), +.task-planner-delete-button.danger:hover { + border-color: rgba(251, 113, 133, 0.56); + background: + linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box, + linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box; + color: #fff; + box-shadow: + 0 0 14px rgba(251, 113, 133, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +.tool-split-action-button.danger:hover .ui-icon, +.tool-split-entry > button.danger:hover .ui-icon, +.notepad-toolbar-button.danger:hover .ui-icon, +.counter-actions button.danger:hover .ui-icon, +.link-item button.danger:hover .ui-icon, +.task-planner-clear-completed-button.danger:hover .ui-icon, +.task-planner-delete-button.danger:hover .ui-icon { + background-color: #fff; + filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26)); +} + +.module-scroll-button.active, +.tool-split-scroll-toggle.active, +.checklist-complete-mode-button.active { + @include mixins.temporary-toggle-active; +} + +.module-scroll-button.active i, +.tool-split-scroll-toggle.active i { + border-color: rgba(246, 196, 83, 0.36); + background: rgba(246, 196, 83, 0.12); +} + +.module-scroll-button.active i::before, +.tool-split-scroll-toggle.active i::before { + left: 17px; + background: var(--color-accent-gold); + box-shadow: 0 0 10px rgba(246, 196, 83, 0.28); +} + +.module-scroll-button.active i::before { + left: 15px; +} + +.tool-split-tree { + display: grid; + align-content: start; + gap: 8px; + min-width: 0; + min-height: 0; +} + +.tool-split-tree.is-scrollable { + overflow-y: auto; + padding-right: 8px; +} + +.tool-split-entry-list { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.tool-split-entry-list .tool-split-entry-list { + position: relative; + margin-top: 6px; + padding-left: 22px; +} + +.tool-split-entry-list .tool-split-entry-list::before { + content: ""; + position: absolute; + top: -3px; + bottom: 14px; + left: 7px; + width: 1px; + background: linear-gradient(180deg, rgba(246, 196, 83, 0.52), rgba(139, 92, 246, 0.2)); +} + +.tool-split-entry-list .tool-split-entry-list > li { + position: relative; +} + +.tool-split-entry-list .tool-split-entry-list > li::before { + content: ""; + position: absolute; + top: 18px; + left: -15px; + width: 11px; + height: 1px; + background: rgba(246, 196, 83, 0.52); +} + +.tool-split-entry { + display: grid; + grid-template-columns: minmax(0, 1fr) 34px 34px; + gap: 7px; +} + +.tool-split-entry-list li.is-editing > .tool-split-entry { + grid-template-columns: auto minmax(0, 1fr) 34px 34px; +} + +.tool-split-entry > button { + min-width: 0; + min-height: 36px; + padding: 0 10px; +} + +.tool-split-entry-summary, +.tool-split-entry-value { + display: inline-flex; + box-sizing: border-box; + align-items: center; + justify-content: flex-start; + border: 1px solid rgba(165, 180, 252, 0.09); + border-radius: var(--radius-md); + border-color: rgba(165, 180, 252, 0.09); + background: rgba(21, 26, 48, 0.58); + color: var(--color-text-secondary); + text-align: left; +} + +.tool-split-entry-summary { + width: 100%; + min-height: 36px; + padding: 0 10px; +} + +.tool-split-entry-value { + width: fit-content; +} + +.tool-split-entry-value.is-readonly { + min-height: 36px; + padding: 0 10px; + background: rgba(21, 26, 48, 0.38); + cursor: default; + opacity: 0.72; +} + +.tool-split-entry-summary:hover, +.tool-split-entry-value:not(.is-readonly):hover { + border-color: rgba(196, 181, 253, 0.2); + background: rgba(21, 26, 48, 0.72); +} + +.tool-split-entry-summary > span { + overflow: hidden; + color: var(--color-text-secondary); + text-overflow: ellipsis; + white-space: nowrap; +} + +.tool-split-entry-summary strong, +.tool-split-entry-value strong { + color: var(--color-text-primary); +} + +.tool-split-entry-label { + box-sizing: border-box; + width: 100%; + min-width: 0; + min-height: 36px; + padding: 0 10px; + overflow: hidden; + border-color: rgba(165, 180, 252, 0.09); + background: rgba(21, 26, 48, 0.38); + color: var(--color-text-secondary); + text-overflow: ellipsis; + white-space: nowrap; +} + +.tool-split-entry-label:hover, +.tool-split-entry-label:focus { + border-color: rgba(196, 181, 253, 0.22); + background: rgba(21, 26, 48, 0.58); + color: var(--color-text-primary); +} + +.tool-split-entry .ui-icon { + width: 16px; + height: 16px; + opacity: 0.72; +} + +.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value) { + min-height: 36px; +} + +.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-summary, +.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-value, +.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-label { + border-color: var(--color-accent-gold); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.09), rgba(139, 92, 246, 0.1)), + rgba(7, 10, 24, 0.48); + color: var(--color-text-primary); + box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.06); +} + +.link-item { + display: grid; + grid-template-columns: 34px minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(7, 10, 24, 0.42); +} + +.link-drag-handle { + width: 34px; + min-width: 34px; + min-height: 34px; + padding: 0; + color: var(--color-text-muted); + cursor: grab; + touch-action: none; + user-select: none; +} + +.link-item a { + display: grid; + min-width: 0; + gap: 2px; +} + +.link-item strong, +.link-item span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.link-item strong { + color: var(--color-text-primary); + font-size: var(--font-size-sm); +} + +.link-item span { + color: var(--color-text-muted); + font-size: var(--font-size-xs); +} + +.link-item > div { + display: flex; + gap: 8px; +} + +.link-item button { + width: 40px; + min-width: 40px; + min-height: 40px; +} + +.link-item .link-drag-handle { + width: 34px; + min-width: 34px; + min-height: 34px; +} + +.dropzone { + display: grid; + min-height: 74px; + margin: var(--space-4); + place-items: center; + border: 1px dashed rgba(139, 92, 246, 0.52); + border-radius: var(--radius-lg); + background: var(--color-primary-soft); + color: var(--color-text-secondary); + cursor: pointer; +} + +.dropzone:hover { + border-color: var(--color-accent-gold); + background: rgba(246, 196, 83, 0.1); + box-shadow: 0 0 30px rgba(246, 196, 83, 0.12); +} + +.dropzone.is-drag-over { + border-color: var(--color-accent-gold); + background: rgba(246, 196, 83, 0.14); + box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.12); +} + +.annotation-dropzone { + min-height: 58px; +} + +.paste-target { + min-height: 46px; + margin: 0 var(--space-4) var(--space-4); + padding: 12px 14px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.44); + color: var(--color-text-muted); +} + +.paste-target:focus { + border-color: var(--color-primary); + color: var(--color-text-secondary); + outline: none; + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); +} + +.image-annotation-module { + display: grid; + gap: var(--space-4); +} + +.annotation-workspace { + display: grid; + gap: var(--space-4); + padding: var(--space-4); +} + +.annotation-stage { + position: relative; + display: grid; + min-width: 0; + overflow: hidden; + place-items: center; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-lg); + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 38%), + rgba(5, 7, 17, 0.48); + cursor: crosshair; +} + +.annotation-media { + position: relative; + display: block; + width: fit-content; + max-width: 100%; + justify-self: center; + line-height: 0; +} + +.annotation-stage-preview { + cursor: default; +} + +.annotation-preview-actions { + position: absolute; + top: 10px; + right: 10px; + z-index: 3; + display: flex; + gap: var(--space-2); +} + +.annotation-preview-actions .tool-split-action-button { + background: rgba(21, 26, 48, 0.94); + box-shadow: + 0 6px 18px rgba(5, 7, 17, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.annotation-stage-preview .annotation-marker:hover { + z-index: 2; + border-color: rgba(196, 181, 253, 0.9); + box-shadow: + 0 0 0 2px rgba(5, 7, 17, 0.72), + 0 0 14px rgba(139, 92, 246, 0.34), + 0 0 24px rgba(196, 181, 253, 0.22); + filter: brightness(1.12); +} + +.annotation-stage img, +.annotation-media img { + display: block; + width: auto; + height: auto; + max-width: 100%; + max-height: min(62vh, 620px); + object-fit: contain; + user-select: none; +} + +.annotation-marker { + position: absolute; + z-index: 3; + display: inline-grid; + left: clamp(0px, calc(var(--marker-x, 50%) - 15px), calc(100% - 30px)); + top: clamp(0px, calc(var(--marker-y, 50%) - 15px), calc(100% - 30px)); + width: 30px; + min-width: 30px; + height: 30px; + min-height: 30px; + place-items: center; + padding: 0; + border: 1px solid rgba(246, 196, 83, 0.72); + border-color: rgba(246, 196, 83, 0.72); + border-radius: var(--radius-pill); + background: + linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.9), rgba(196, 181, 253, 0.5)) border-box; + color: #fff; + font-size: var(--font-size-xs); + font-weight: 900; + line-height: 1; + box-shadow: + 0 0 0 2px rgba(5, 7, 17, 0.72), + 0 0 16px rgba(246, 196, 83, 0.22); + cursor: grab; + touch-action: none; +} + +.annotation-marker:active { + cursor: grabbing; +} + +.annotation-marker-list { + display: grid; + gap: 8px; + min-width: 0; + margin: 0; + padding: 0; + list-style: none; +} + +.annotation-marker-list li { + display: grid; + min-width: 0; + grid-template-columns: 28px minmax(0, 1fr) auto; + gap: var(--space-2); + align-items: center; + padding-block: 3px; +} + +.annotation-marker-list li > span { + display: inline-grid; + width: 28px; + height: 28px; + place-items: center; + border: 1px solid rgba(246, 196, 83, 0.32); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.1); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.annotation-marker-list input { + width: 100%; + min-width: 0; + min-height: 34px; + padding: 0 10px; +} + +.annotation-empty { + margin: 0; + padding: var(--space-4); +} + +.images { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: var(--space-3); + padding: var(--space-4); +} + +.images figure { + position: relative; + display: grid; + gap: 8px; + margin: 0; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background: rgba(5, 7, 17, 0.38); +} + +.images figure { + --reorder-drop-shadow: 0 0 18px rgba(246, 196, 83, 0.12); +} + +.image-drag-handle { + position: absolute; + z-index: 4; + top: 12px; + left: 12px; + display: grid; + width: 32px; + height: 32px; + place-items: center; + padding: 0; + border: 1px solid rgba(138, 150, 197, 0.22); + border-radius: var(--radius-md); + background: rgba(9, 13, 29, 0.76); + color: rgba(229, 235, 255, 0.78); + cursor: grab; + opacity: 0; + transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast); +} + +.image-drag-handle .ui-icon { + width: 16px; + height: 16px; +} + +.images figure:hover .image-drag-handle, +.images figure:focus-within .image-drag-handle { + opacity: 1; +} + +.image-drag-handle:hover { + border-color: rgba(246, 196, 83, 0.56); + background: rgba(20, 28, 55, 0.86); + color: var(--color-accent-gold); + box-shadow: 0 0 14px rgba(246, 196, 83, 0.12); +} + +.image-drag-handle:active { + cursor: grabbing; +} + +.image-preview { + display: block; + width: 100%; + min-height: 0; + padding: 0; + border: 0; + border-radius: var(--radius-md); + background: transparent; +} + +.image-preview:hover { + transform: none; + box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.28); +} + +.image-label, +.image-label-input { + min-width: 0; + font-size: var(--font-size-sm); +} + +.image-label { + overflow: hidden; + color: var(--color-text-secondary); + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; +} + +.image-label-input { + width: 100%; + min-height: 36px; + padding: 0 10px; + border: 1px solid rgba(138, 150, 197, 0.2); + border-radius: var(--radius-md); + background: rgba(8, 13, 30, 0.62); + color: var(--color-text); +} + +.image-label-input::placeholder { + color: rgba(185, 194, 215, 0.48); +} + +.image-label-input:focus { + border-color: rgba(246, 196, 83, 0.72); + outline: none; + box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.14); +} + +.images img { + display: block; + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + border-radius: var(--radius-md); + background: var(--color-bg-deep); +} + +.image-actions { + display: flex; + gap: var(--space-2); +} + +.image-actions .image-annotate-button, +.image-actions .image-delete-button { + margin-top: 0; +}