From fe91d18624b38e4332978877750fe7e16e50a66d Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Tue, 25 Aug 2026 08:48:47 +0200 Subject: [PATCH] Split large Sass files into focused partials --- tests/static-styles.test.mjs | 38 +- website/src/styles/_games.scss | 644 +------------ website/src/styles/games/_cards.scss | 66 ++ website/src/styles/games/_filters.scss | 182 ++++ website/src/styles/games/_heading.scss | 49 + website/src/styles/games/_home-cards.scss | 78 ++ website/src/styles/games/_lists.scss | 267 ++++++ website/src/styles/toolboxes/_combos.scss | 866 +----------------- website/src/styles/toolboxes/_layout.scss | 686 +------------- .../styles/toolboxes/_shared-controls.scss | 676 +------------- .../src/styles/toolboxes/_task-planner.scss | 713 +------------- .../src/styles/toolboxes/combos/_editor.scss | 123 +++ .../src/styles/toolboxes/combos/_hold.scss | 79 ++ .../src/styles/toolboxes/combos/_list.scss | 100 ++ .../src/styles/toolboxes/combos/_palette.scss | 53 ++ .../styles/toolboxes/combos/_sequence.scss | 115 +++ .../src/styles/toolboxes/combos/_tokens.scss | 393 ++++++++ .../styles/toolboxes/layout/_add-tools.scss | 93 ++ .../src/styles/toolboxes/layout/_header.scss | 84 ++ .../styles/toolboxes/layout/_icon-picker.scss | 96 ++ .../src/styles/toolboxes/layout/_modules.scss | 157 ++++ .../styles/toolboxes/layout/_preferences.scss | 136 +++ .../styles/toolboxes/layout/_tutorial.scss | 120 +++ .../toolboxes/shared-controls/_entries.scss | 186 ++++ .../toolboxes/shared-controls/_mix-tags.scss | 139 +++ .../toolboxes/shared-controls/_selects.scss | 41 + .../shared-controls/_split-controls.scss | 294 ++++++ .../shared-controls/_split-tree.scss | 14 + .../toolboxes/task-planner/_categories.scss | 84 ++ .../styles/toolboxes/task-planner/_items.scss | 150 +++ .../toolboxes/task-planner/_notices.scss | 47 + .../toolboxes/task-planner/_panels.scss | 184 ++++ .../task-planner/_topbar-settings.scss | 143 +++ .../styles/toolboxes/task-planner/_tree.scss | 102 +++ 34 files changed, 3642 insertions(+), 3556 deletions(-) create mode 100644 website/src/styles/games/_cards.scss create mode 100644 website/src/styles/games/_filters.scss create mode 100644 website/src/styles/games/_heading.scss create mode 100644 website/src/styles/games/_home-cards.scss create mode 100644 website/src/styles/games/_lists.scss create mode 100644 website/src/styles/toolboxes/combos/_editor.scss create mode 100644 website/src/styles/toolboxes/combos/_hold.scss create mode 100644 website/src/styles/toolboxes/combos/_list.scss create mode 100644 website/src/styles/toolboxes/combos/_palette.scss create mode 100644 website/src/styles/toolboxes/combos/_sequence.scss create mode 100644 website/src/styles/toolboxes/combos/_tokens.scss create mode 100644 website/src/styles/toolboxes/layout/_add-tools.scss create mode 100644 website/src/styles/toolboxes/layout/_header.scss create mode 100644 website/src/styles/toolboxes/layout/_icon-picker.scss create mode 100644 website/src/styles/toolboxes/layout/_modules.scss create mode 100644 website/src/styles/toolboxes/layout/_preferences.scss create mode 100644 website/src/styles/toolboxes/layout/_tutorial.scss create mode 100644 website/src/styles/toolboxes/shared-controls/_entries.scss create mode 100644 website/src/styles/toolboxes/shared-controls/_mix-tags.scss create mode 100644 website/src/styles/toolboxes/shared-controls/_selects.scss create mode 100644 website/src/styles/toolboxes/shared-controls/_split-controls.scss create mode 100644 website/src/styles/toolboxes/shared-controls/_split-tree.scss create mode 100644 website/src/styles/toolboxes/task-planner/_categories.scss create mode 100644 website/src/styles/toolboxes/task-planner/_items.scss create mode 100644 website/src/styles/toolboxes/task-planner/_notices.scss create mode 100644 website/src/styles/toolboxes/task-planner/_panels.scss create mode 100644 website/src/styles/toolboxes/task-planner/_topbar-settings.scss create mode 100644 website/src/styles/toolboxes/task-planner/_tree.scss diff --git a/tests/static-styles.test.mjs b/tests/static-styles.test.mjs index cdaa582..7cbcf21 100644 --- a/tests/static-styles.test.mjs +++ b/tests/static-styles.test.mjs @@ -26,7 +26,15 @@ test("style entrypoint and theme layers are wired", async () => { ]); const styleToolboxesEntry = await readFile("website/src/styles/_toolboxes.scss", "utf8"); const styleToolboxesCore = await readFile("website/src/styles/toolboxes/_core.scss", "utf8"); - const styleToolboxLayout = await readFile("website/src/styles/toolboxes/_layout.scss", "utf8"); + const styleToolboxLayout = await readJoinedStyles([ + "website/src/styles/toolboxes/_layout.scss", + "website/src/styles/toolboxes/layout/_header.scss", + "website/src/styles/toolboxes/layout/_icon-picker.scss", + "website/src/styles/toolboxes/layout/_tutorial.scss", + "website/src/styles/toolboxes/layout/_add-tools.scss", + "website/src/styles/toolboxes/layout/_preferences.scss", + "website/src/styles/toolboxes/layout/_modules.scss" + ]); const styleToolboxShell = await readFile("website/src/styles/toolboxes/_module-shell.scss", "utf8"); const styleToolboxTextExchange = await readFile("website/src/styles/toolboxes/_text-exchange.scss", "utf8"); const styleToolboxNotepad = await readFile("website/src/styles/toolboxes/_notepad.scss", "utf8"); @@ -34,12 +42,34 @@ test("style entrypoint and theme layers are wired", async () => { const styleToolboxCalculator = await readFile("website/src/styles/toolboxes/_calculator.scss", "utf8"); const styleToolboxCalculatorResults = await readFile("website/src/styles/toolboxes/_calculator-results.scss", "utf8"); const styleToolboxTable = await readFile("website/src/styles/toolboxes/_table.scss", "utf8"); - const styleToolboxCombos = await readFile("website/src/styles/toolboxes/_combos.scss", "utf8"); + const styleToolboxCombos = await readJoinedStyles([ + "website/src/styles/toolboxes/_combos.scss", + "website/src/styles/toolboxes/combos/_editor.scss", + "website/src/styles/toolboxes/combos/_palette.scss", + "website/src/styles/toolboxes/combos/_list.scss", + "website/src/styles/toolboxes/combos/_sequence.scss", + "website/src/styles/toolboxes/combos/_tokens.scss", + "website/src/styles/toolboxes/combos/_hold.scss" + ]); const styleToolboxImages = await readFile("website/src/styles/toolboxes/_images.scss", "utf8"); - const styleToolboxSharedControls = await readFile("website/src/styles/toolboxes/_shared-controls.scss", "utf8"); + const styleToolboxSharedControls = await readJoinedStyles([ + "website/src/styles/toolboxes/_shared-controls.scss", + "website/src/styles/toolboxes/shared-controls/_selects.scss", + "website/src/styles/toolboxes/shared-controls/_split-controls.scss", + "website/src/styles/toolboxes/shared-controls/_split-tree.scss", + "website/src/styles/toolboxes/shared-controls/_mix-tags.scss", + "website/src/styles/toolboxes/shared-controls/_entries.scss" + ]); 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"); + const styleGames = await readJoinedStyles([ + "website/src/styles/_games.scss", + "website/src/styles/games/_home-cards.scss", + "website/src/styles/games/_heading.scss", + "website/src/styles/games/_lists.scss", + "website/src/styles/games/_filters.scss", + "website/src/styles/games/_cards.scss" + ]); const styleMhwilds = await readFile("website/src/styles/_mhwilds.scss", "utf8"); const styleResponsive = await readFile("website/src/styles/_responsive.scss", "utf8"); diff --git a/website/src/styles/_games.scss b/website/src/styles/_games.scss index 97ac124..0f758c3 100644 --- a/website/src/styles/_games.scss +++ b/website/src/styles/_games.scss @@ -1,638 +1,6 @@ -// Rôle : regroupe les styles partagés des pages de jeux, filtres et listes. -@use "mixins"; - -.game-home-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 380px)); - justify-content: center; - gap: var(--space-4); - margin-top: var(--space-6); -} - -.game-home-card { - overflow: hidden; - border-color: transparent; - border-radius: var(--radius-md); - padding: 0; - min-height: 230px; - background: - linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box, - radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box; -} - -@supports (corner-shape: scoop) { - .game-home-card { - corner-shape: scoop; - } -} - -.game-home-card:hover { - transform: none; - border-color: transparent; - background: - linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box, - linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box; - box-shadow: - var(--shadow-sm), - 0 0 18px rgba(139, 92, 246, 0.22), - 0 0 34px rgba(196, 181, 253, 0.12); -} - -.game-home-card img { - display: block; - width: 100%; - height: 120px; - object-fit: contain; - padding: var(--space-4); - border-bottom: 1px solid rgba(246, 196, 83, 0.42); - background: rgba(5, 7, 17, 0.28); -} - -.game-home-card-icon { - display: grid; - width: 100%; - height: 120px; - place-items: center; - border-bottom: 1px solid rgba(246, 196, 83, 0.42); - background: rgba(5, 7, 17, 0.28); - color: #fff; -} - -.game-home-card-icon .module-icon-svg { - width: 72px; - height: 72px; - filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.36)); -} - -.game-home-card > strong, -.game-home-card > span:not(.game-home-card-icon) { - margin-inline: var(--space-5); -} - -.game-home-card > strong { - margin-top: var(--space-4); -} - -.game-home-card > span:not(.game-home-card-icon) { - margin-bottom: var(--space-5); -} - -.game-heading p { - max-width: 70ch; -} - -.game-title-row { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 12px; -} - -.game-title-row h1 { - margin-bottom: 0; -} - -.game-breadcrumb { - display: inline-flex; - align-items: center; - gap: 9px; - margin-bottom: 8px; - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; - letter-spacing: 0.06em; - text-transform: uppercase; -} - -.game-breadcrumb a { - display: inline-flex; - align-items: center; - color: inherit; - line-height: 1; -} - -.game-breadcrumb .ui-icon { - width: 18px; - height: 18px; - color: var(--color-accent-gold); - filter: - drop-shadow(0 0 0 currentColor) - drop-shadow(0 0 4px rgba(246, 196, 83, 0.22)); - transform: translateY(-1px); -} - -.game-breadcrumb a:hover { - color: var(--color-text-primary); -} - -.results-count { - display: inline-flex; - min-height: 28px; - align-items: center; - padding: 4px 10px; - border: 1px solid rgba(165, 180, 252, 0.16); - border-radius: var(--radius-pill); - background: rgba(5, 7, 17, 0.34); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; -} - -.results-copy-button { - width: 32px; - min-width: 32px; - min-height: 32px; -} - -.game-list-help-link { - display: inline-flex; - width: fit-content; - min-height: 36px; - align-items: center; - justify-content: center; - margin-top: var(--space-3); - border-color: rgba(165, 180, 252, 0.18); - background: rgba(5, 7, 17, 0.24); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; - padding: 7px 12px; -} - -.game-list-help-link:hover { - border-color: rgba(246, 196, 83, 0.44); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(196, 181, 253, 0.22)) border-box; - color: var(--color-text-primary); -} - -.game-list-selector { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); - justify-content: center; - gap: var(--space-4); - margin-top: var(--space-6); -} - -.game-list-selector-item { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - min-height: 100px; - align-items: stretch; - gap: 10px; - padding: var(--space-4); - border: 1px solid rgba(165, 180, 252, 0.14); - border-radius: var(--radius-md); - background: rgba(16, 20, 38, 0.58); - box-shadow: var(--shadow-sm); -} - -.game-list-selector-item:hover, -.game-list-selector-item.active { - border-color: rgba(246, 196, 83, 0.42); - background: rgba(31, 37, 68, 0.72); - box-shadow: - var(--shadow-sm), - 0 0 14px rgba(246, 196, 83, 0.1); -} - -.game-list-select-button { - display: grid; - grid-template-columns: minmax(0, 1fr); - grid-template-rows: auto 1fr auto; - width: 100%; - min-height: 68px; - align-content: stretch; - justify-content: stretch; - justify-items: start; - gap: 4px; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - box-shadow: none; - text-align: left; - transition: none; -} - -.game-list-select-button:hover { - border: 0; - background: transparent; - box-shadow: none; -} - -.game-list-selector-item strong { - display: block; - width: 100%; - min-height: calc(var(--font-size-lg) * 2.5); - align-self: start; - font-size: var(--font-size-lg); - line-height: 1.25; - text-align: left; -} - -.game-list-selector-item small { - display: block; - width: 100%; - align-self: end; - color: var(--color-text-muted); - font-size: var(--font-size-sm); - font-weight: 800; - text-align: left; -} - -.game-list-selector-item .game-list-create-button { - width: 40px; - min-width: 40px; - min-height: 40px; - align-self: start; -} - -.game-list-panel { - margin-top: var(--space-5); - padding: 0; -} - -.game-list-panel > header, -.game-list-category header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-3); - padding: var(--space-4); - border-bottom: 1px solid rgba(246, 196, 83, 0.32); -} - -.game-list-category header { - padding: 0 0 var(--space-3); -} - -.game-list-panel h2 { - margin: 0; - font-size: var(--font-size-lg); -} - -.game-list-categories { - display: grid; - gap: var(--space-4); - padding: var(--space-4); -} - -.game-list-category { - display: grid; - gap: var(--space-3); -} - -.game-list-category:not(:last-child) { - padding-bottom: var(--space-4); - border-bottom: 1px solid rgba(165, 180, 252, 0.1); -} - -.game-list-category h3 { - margin: 0; - color: var(--color-accent-gold); - font-size: var(--font-size-md); -} - -.game-list-symbol { - display: inline-block; - margin-left: 3px; - color: currentColor; - font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif; - font-size: 1.18em; - font-weight: 900; - line-height: 1; - text-shadow: - 0 0 0 currentColor, - 0 0 4px rgba(246, 196, 83, 0.18); - transform: translateY(1px); -} - -.game-list-category ul { - display: grid; - grid-template-columns: 1fr; - gap: 8px; - margin: 0; - list-style: none; - padding: 0; -} - -.game-list-category li { - display: grid; - gap: 3px; - min-height: 58px; - align-content: start; - padding: 10px 12px; - border: 1px solid rgba(165, 180, 252, 0.07); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.14); -} - -.game-list-item-title { - display: flex; - align-items: center; - gap: 8px; -} - -.game-list-category li strong { - color: var(--color-text-primary); -} - -.game-list-category li span { - color: var(--color-text-muted); - font-size: var(--font-size-sm); -} - -.game-list-category li em { - display: inline-flex; - min-height: 20px; - align-items: center; - padding: 2px 7px; - 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-style: normal; - font-weight: 900; -} - -.game-list-actions { - display: inline-flex; - flex: 0 0 auto; - align-items: center; - gap: 8px; -} - -.game-list-create-button { - width: 40px; - min-width: 40px; - min-height: 40px; - padding: 0; - border-radius: var(--radius-md); -} - -.game-list-create-button:disabled { - opacity: 0.45; - cursor: not-allowed; -} - -.game-list-create-button .module-icon { - width: 24px; - height: 24px; - border: 0; - background: transparent; - box-shadow: none; -} - -.game-list-create-button .module-icon-svg { - width: 20px; - height: 20px; -} - -.game-layout { - display: grid; - grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); - gap: var(--space-5); - margin-top: var(--space-6); - align-items: start; -} - -.game-filters { - position: sticky; - top: 92px; -} - -.filter-panel { - position: relative; - isolation: isolate; - overflow: hidden; - border: 1px solid transparent; - border-radius: var(--radius-xl); - background: rgba(16, 20, 38, 0.58); - box-shadow: var(--shadow-sm); - backdrop-filter: blur(10px); - padding: var(--space-4); -} - -.filter-panel::before { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - background: - radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%), - radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%); - pointer-events: none; -} - -.filter-panel::after { - content: ""; - position: absolute; - inset: 0; - z-index: 0; - padding: 1px; - border-radius: inherit; - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%), - linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24)); - @include mixins.border-mask; - pointer-events: none; -} - -.filter-panel > * { - position: relative; - z-index: 1; -} - -.filter-panel-head, -.filter-logic { - display: flex; - justify-content: space-between; - gap: var(--space-3); -} - -.filter-panel-head { - align-items: flex-start; -} - -.filter-logic { - align-items: center; -} - -.filter-panel-head h2 { - margin-bottom: 0; - font-size: var(--font-size-lg); -} - -.filter-reset-button { - color: var(--color-text-secondary); - box-shadow: var(--shadow-sm); -} - -.filter-reset-button:hover { - background: rgba(21, 26, 48, 0.96); -} - -.field.compact { - padding: var(--space-4) 0; -} - -.filter-logic { - min-height: 42px; - margin-bottom: var(--space-4); - padding: 8px 10px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.filter-logic button { - min-height: 30px; - padding: 0 12px; - border-color: rgba(246, 196, 83, 0.24); - background: - linear-gradient(135deg, rgba(72, 43, 160, 0.72), rgba(45, 52, 146, 0.68)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.46), rgba(139, 92, 246, 0.28)) border-box; - color: var(--color-text-primary); - font-size: var(--font-size-sm); - font-weight: 800; - text-transform: uppercase; -} - -.filter-logic button:hover { - border-color: rgba(246, 196, 83, 0.52); - background: - linear-gradient(135deg, rgba(109, 40, 217, 0.86), rgba(67, 56, 202, 0.82)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.72), rgba(196, 181, 253, 0.42)) border-box; - box-shadow: - 0 0 14px rgba(139, 92, 246, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.filter-options { - display: grid; - gap: 8px; - max-height: calc(100vh - 360px); - overflow: auto; - margin-right: -6px; - padding-right: 12px; -} - -.filter-chip { - display: grid; - grid-template-columns: 18px 22px 1fr; - min-height: 40px; - align-items: center; - column-gap: 6px; - padding: 7px 10px 7px 13px; - border: 1px solid var(--color-border); - border-radius: var(--radius-pill); - background: rgba(5, 7, 17, 0.32); - color: var(--color-text-secondary); - cursor: pointer; -} - -.filter-chip:hover, -.filter-chip.active { - border-color: var(--color-primary-border); - background: var(--color-primary-soft); - color: var(--color-text-primary); -} - -.filter-chip input { - flex: 0 0 18px; - width: 18px; - min-width: 18px; - max-width: 18px; - inline-size: 18px; - min-inline-size: 18px; - max-inline-size: 18px; - height: 18px; - min-height: 18px; - max-height: 18px; - block-size: 18px; - min-block-size: 18px; - max-block-size: 18px; -} - -.filter-chip img { - width: 22px; - height: 22px; - object-fit: contain; -} - -.filter-chip span { - overflow: hidden; - color: inherit; - font-size: var(--font-size-sm); - text-overflow: ellipsis; - white-space: nowrap; -} - -.game-grid { - display: grid; - gap: var(--space-4); -} - -.game-card .card-cover { - display: block; - height: 170px; - min-height: 170px; -} - -.game-card-cover { - position: relative; - overflow: hidden; - background: - var(--game-cover), - rgba(5, 7, 17, 0.72); -} - -.toolbox-card-cover { - position: relative; - overflow: hidden; - background: - var(--game-cover), - rgba(5, 7, 17, 0.72); -} - -.toolbox-icon-cover { - display: grid; - place-items: center; - background: - radial-gradient(circle at 50% 38%, rgba(246, 196, 83, 0.16), transparent 42%), - var(--gradient-nebula); -} - -.game-card-cover img, -.toolbox-card-cover img { - display: block; - width: 100%; - height: 100%; - min-height: inherit; - object-fit: cover; -} - -.toolbox-icon-cover img { - display: block; - width: min(78px, 42%); - height: auto; - object-fit: contain; - filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34)); -} - -.badge { - display: inline-flex; - min-height: 24px; - align-items: center; - gap: 6px; - border-radius: var(--radius-pill); - background: var(--color-primary-soft); - color: #b69cff; - font-size: var(--font-size-xs); - font-weight: 700; - padding: 3px 9px; -} +// Rôle : orchestre les styles partagés des pages de jeux, filtres et listes. +@use "games/home-cards"; +@use "games/heading"; +@use "games/lists"; +@use "games/filters"; +@use "games/cards"; diff --git a/website/src/styles/games/_cards.scss b/website/src/styles/games/_cards.scss new file mode 100644 index 0000000..175488f --- /dev/null +++ b/website/src/styles/games/_cards.scss @@ -0,0 +1,66 @@ +// Rôle : regroupe les grilles, cartes, couvertures et badges des pages jeux. + +.game-grid { + display: grid; + gap: var(--space-4); +} + +.game-card .card-cover { + display: block; + height: 170px; + min-height: 170px; +} + +.game-card-cover { + position: relative; + overflow: hidden; + background: + var(--game-cover), + rgba(5, 7, 17, 0.72); +} + +.toolbox-card-cover { + position: relative; + overflow: hidden; + background: + var(--game-cover), + rgba(5, 7, 17, 0.72); +} + +.toolbox-icon-cover { + display: grid; + place-items: center; + background: + radial-gradient(circle at 50% 38%, rgba(246, 196, 83, 0.16), transparent 42%), + var(--gradient-nebula); +} + +.game-card-cover img, +.toolbox-card-cover img { + display: block; + width: 100%; + height: 100%; + min-height: inherit; + object-fit: cover; +} + +.toolbox-icon-cover img { + display: block; + width: min(78px, 42%); + height: auto; + object-fit: contain; + filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34)); +} + +.badge { + display: inline-flex; + min-height: 24px; + align-items: center; + gap: 6px; + border-radius: var(--radius-pill); + background: var(--color-primary-soft); + color: #b69cff; + font-size: var(--font-size-xs); + font-weight: 700; + padding: 3px 9px; +} diff --git a/website/src/styles/games/_filters.scss b/website/src/styles/games/_filters.scss new file mode 100644 index 0000000..209692b --- /dev/null +++ b/website/src/styles/games/_filters.scss @@ -0,0 +1,182 @@ +// Rôle : regroupe le layout, les filtres et les barres de contrôle des pages jeux. +@use "../mixins"; + +.game-layout { + display: grid; + grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); + gap: var(--space-5); + margin-top: var(--space-6); + align-items: start; +} + +.game-filters { + position: sticky; + top: 92px; +} + +.filter-panel { + position: relative; + isolation: isolate; + overflow: hidden; + border: 1px solid transparent; + border-radius: var(--radius-xl); + background: rgba(16, 20, 38, 0.58); + box-shadow: var(--shadow-sm); + backdrop-filter: blur(10px); + padding: var(--space-4); +} + +.filter-panel::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: + radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%), + radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%); + pointer-events: none; +} + +.filter-panel::after { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + padding: 1px; + border-radius: inherit; + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%), + linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24)); + @include mixins.border-mask; + pointer-events: none; +} + +.filter-panel > * { + position: relative; + z-index: 1; +} + +.filter-panel-head, +.filter-logic { + display: flex; + justify-content: space-between; + gap: var(--space-3); +} + +.filter-panel-head { + align-items: flex-start; +} + +.filter-logic { + align-items: center; +} + +.filter-panel-head h2 { + margin-bottom: 0; + font-size: var(--font-size-lg); +} + +.filter-reset-button { + color: var(--color-text-secondary); + box-shadow: var(--shadow-sm); +} + +.filter-reset-button:hover { + background: rgba(21, 26, 48, 0.96); +} + +.field.compact { + padding: var(--space-4) 0; +} + +.filter-logic { + min-height: 42px; + margin-bottom: var(--space-4); + padding: 8px 10px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.filter-logic button { + min-height: 30px; + padding: 0 12px; + border-color: rgba(246, 196, 83, 0.24); + background: + linear-gradient(135deg, rgba(72, 43, 160, 0.72), rgba(45, 52, 146, 0.68)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.46), rgba(139, 92, 246, 0.28)) border-box; + color: var(--color-text-primary); + font-size: var(--font-size-sm); + font-weight: 800; + text-transform: uppercase; +} + +.filter-logic button:hover { + border-color: rgba(246, 196, 83, 0.52); + background: + linear-gradient(135deg, rgba(109, 40, 217, 0.86), rgba(67, 56, 202, 0.82)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.72), rgba(196, 181, 253, 0.42)) border-box; + box-shadow: + 0 0 14px rgba(139, 92, 246, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.filter-options { + display: grid; + gap: 8px; + max-height: calc(100vh - 360px); + overflow: auto; + margin-right: -6px; + padding-right: 12px; +} + +.filter-chip { + display: grid; + grid-template-columns: 18px 22px 1fr; + min-height: 40px; + align-items: center; + column-gap: 6px; + padding: 7px 10px 7px 13px; + border: 1px solid var(--color-border); + border-radius: var(--radius-pill); + background: rgba(5, 7, 17, 0.32); + color: var(--color-text-secondary); + cursor: pointer; +} + +.filter-chip:hover, +.filter-chip.active { + border-color: var(--color-primary-border); + background: var(--color-primary-soft); + color: var(--color-text-primary); +} + +.filter-chip input { + flex: 0 0 18px; + width: 18px; + min-width: 18px; + max-width: 18px; + inline-size: 18px; + min-inline-size: 18px; + max-inline-size: 18px; + height: 18px; + min-height: 18px; + max-height: 18px; + block-size: 18px; + min-block-size: 18px; + max-block-size: 18px; +} + +.filter-chip img { + width: 22px; + height: 22px; + object-fit: contain; +} + +.filter-chip span { + overflow: hidden; + color: inherit; + font-size: var(--font-size-sm); + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/website/src/styles/games/_heading.scss b/website/src/styles/games/_heading.scss new file mode 100644 index 0000000..660f18b --- /dev/null +++ b/website/src/styles/games/_heading.scss @@ -0,0 +1,49 @@ +// Rôle : regroupe les titres, breadcrumbs et actions de tête des pages jeux. + +.game-heading p { + max-width: 70ch; +} + +.game-title-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px; +} + +.game-title-row h1 { + margin-bottom: 0; +} + +.game-breadcrumb { + display: inline-flex; + align-items: center; + gap: 9px; + margin-bottom: 8px; + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.game-breadcrumb a { + display: inline-flex; + align-items: center; + color: inherit; + line-height: 1; +} + +.game-breadcrumb .ui-icon { + width: 18px; + height: 18px; + color: var(--color-accent-gold); + filter: + drop-shadow(0 0 0 currentColor) + drop-shadow(0 0 4px rgba(246, 196, 83, 0.22)); + transform: translateY(-1px); +} + +.game-breadcrumb a:hover { + color: var(--color-text-primary); +} diff --git a/website/src/styles/games/_home-cards.scss b/website/src/styles/games/_home-cards.scss new file mode 100644 index 0000000..f0f0e8b --- /dev/null +++ b/website/src/styles/games/_home-cards.scss @@ -0,0 +1,78 @@ +// Rôle : regroupe les cartes et surfaces d'entrée des pages jeux. + +.game-home-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 380px)); + justify-content: center; + gap: var(--space-4); + margin-top: var(--space-6); +} + +.game-home-card { + overflow: hidden; + border-color: transparent; + border-radius: var(--radius-md); + padding: 0; + min-height: 230px; + background: + linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box, + radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box; +} + +@supports (corner-shape: scoop) { + .game-home-card { + corner-shape: scoop; + } +} + +.game-home-card:hover { + transform: none; + border-color: transparent; + background: + linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box, + linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box; + box-shadow: + var(--shadow-sm), + 0 0 18px rgba(139, 92, 246, 0.22), + 0 0 34px rgba(196, 181, 253, 0.12); +} + +.game-home-card img { + display: block; + width: 100%; + height: 120px; + object-fit: contain; + padding: var(--space-4); + border-bottom: 1px solid rgba(246, 196, 83, 0.42); + background: rgba(5, 7, 17, 0.28); +} + +.game-home-card-icon { + display: grid; + width: 100%; + height: 120px; + place-items: center; + border-bottom: 1px solid rgba(246, 196, 83, 0.42); + background: rgba(5, 7, 17, 0.28); + color: #fff; +} + +.game-home-card-icon .module-icon-svg { + width: 72px; + height: 72px; + filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.36)); +} + +.game-home-card > strong, +.game-home-card > span:not(.game-home-card-icon) { + margin-inline: var(--space-5); +} + +.game-home-card > strong { + margin-top: var(--space-4); +} + +.game-home-card > span:not(.game-home-card-icon) { + margin-bottom: var(--space-5); +} diff --git a/website/src/styles/games/_lists.scss b/website/src/styles/games/_lists.scss new file mode 100644 index 0000000..70152cd --- /dev/null +++ b/website/src/styles/games/_lists.scss @@ -0,0 +1,267 @@ +// Rôle : regroupe les listes, panneaux de sélection et actions des pages jeux. + +.results-count { + display: inline-flex; + min-height: 28px; + align-items: center; + padding: 4px 10px; + border: 1px solid rgba(165, 180, 252, 0.16); + border-radius: var(--radius-pill); + background: rgba(5, 7, 17, 0.34); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; +} + +.results-copy-button { + width: 32px; + min-width: 32px; + min-height: 32px; +} + +.game-list-help-link { + display: inline-flex; + width: fit-content; + min-height: 36px; + align-items: center; + justify-content: center; + margin-top: var(--space-3); + border-color: rgba(165, 180, 252, 0.18); + background: rgba(5, 7, 17, 0.24); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; + padding: 7px 12px; +} + +.game-list-help-link:hover { + border-color: rgba(246, 196, 83, 0.44); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.1), rgba(139, 92, 246, 0.08)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(196, 181, 253, 0.22)) border-box; + color: var(--color-text-primary); +} + +.game-list-selector { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); + justify-content: center; + gap: var(--space-4); + margin-top: var(--space-6); +} + +.game-list-selector-item { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + min-height: 100px; + align-items: stretch; + gap: 10px; + padding: var(--space-4); + border: 1px solid rgba(165, 180, 252, 0.14); + border-radius: var(--radius-md); + background: rgba(16, 20, 38, 0.58); + box-shadow: var(--shadow-sm); +} + +.game-list-selector-item:hover, +.game-list-selector-item.active { + border-color: rgba(246, 196, 83, 0.42); + background: rgba(31, 37, 68, 0.72); + box-shadow: + var(--shadow-sm), + 0 0 14px rgba(246, 196, 83, 0.1); +} + +.game-list-select-button { + display: grid; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: auto 1fr auto; + width: 100%; + min-height: 68px; + align-content: stretch; + justify-content: stretch; + justify-items: start; + gap: 4px; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + text-align: left; + transition: none; +} + +.game-list-select-button:hover { + border: 0; + background: transparent; + box-shadow: none; +} + +.game-list-selector-item strong { + display: block; + width: 100%; + min-height: calc(var(--font-size-lg) * 2.5); + align-self: start; + font-size: var(--font-size-lg); + line-height: 1.25; + text-align: left; +} + +.game-list-selector-item small { + display: block; + width: 100%; + align-self: end; + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-weight: 800; + text-align: left; +} + +.game-list-selector-item .game-list-create-button { + width: 40px; + min-width: 40px; + min-height: 40px; + align-self: start; +} + +.game-list-panel { + margin-top: var(--space-5); + padding: 0; +} + +.game-list-panel > header, +.game-list-category header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-3); + padding: var(--space-4); + border-bottom: 1px solid rgba(246, 196, 83, 0.32); +} + +.game-list-category header { + padding: 0 0 var(--space-3); +} + +.game-list-panel h2 { + margin: 0; + font-size: var(--font-size-lg); +} + +.game-list-categories { + display: grid; + gap: var(--space-4); + padding: var(--space-4); +} + +.game-list-category { + display: grid; + gap: var(--space-3); +} + +.game-list-category:not(:last-child) { + padding-bottom: var(--space-4); + border-bottom: 1px solid rgba(165, 180, 252, 0.1); +} + +.game-list-category h3 { + margin: 0; + color: var(--color-accent-gold); + font-size: var(--font-size-md); +} + +.game-list-symbol { + display: inline-block; + margin-left: 3px; + color: currentColor; + font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif; + font-size: 1.18em; + font-weight: 900; + line-height: 1; + text-shadow: + 0 0 0 currentColor, + 0 0 4px rgba(246, 196, 83, 0.18); + transform: translateY(1px); +} + +.game-list-category ul { + display: grid; + grid-template-columns: 1fr; + gap: 8px; + margin: 0; + list-style: none; + padding: 0; +} + +.game-list-category li { + display: grid; + gap: 3px; + min-height: 58px; + align-content: start; + padding: 10px 12px; + border: 1px solid rgba(165, 180, 252, 0.07); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.14); +} + +.game-list-item-title { + display: flex; + align-items: center; + gap: 8px; +} + +.game-list-category li strong { + color: var(--color-text-primary); +} + +.game-list-category li span { + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +.game-list-category li em { + display: inline-flex; + min-height: 20px; + align-items: center; + padding: 2px 7px; + 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-style: normal; + font-weight: 900; +} + +.game-list-actions { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 8px; +} + +.game-list-create-button { + width: 40px; + min-width: 40px; + min-height: 40px; + padding: 0; + border-radius: var(--radius-md); +} + +.game-list-create-button:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.game-list-create-button .module-icon { + width: 24px; + height: 24px; + border: 0; + background: transparent; + box-shadow: none; +} + +.game-list-create-button .module-icon-svg { + width: 20px; + height: 20px; +} diff --git a/website/src/styles/toolboxes/_combos.scss b/website/src/styles/toolboxes/_combos.scss index 2f5582a..52add39 100644 --- a/website/src/styles/toolboxes/_combos.scss +++ b/website/src/styles/toolboxes/_combos.scss @@ -1,859 +1,7 @@ -// Rôle : gère l’outil combos, son éditeur, ses palettes et tokens d’inputs. -@use "../mixins"; - -.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; -} +// Rôle : orchestre les styles de l'outil combos depuis ses partials spécialisés. +@use "combos/editor"; +@use "combos/palette"; +@use "combos/list"; +@use "combos/sequence"; +@use "combos/tokens"; +@use "combos/hold"; diff --git a/website/src/styles/toolboxes/_layout.scss b/website/src/styles/toolboxes/_layout.scss index d192ca1..f29e53e 100644 --- a/website/src/styles/toolboxes/_layout.scss +++ b/website/src/styles/toolboxes/_layout.scss @@ -1,679 +1,7 @@ -// Rôle : gère le layout des pages toolbox, headers, colonnes et zones de drop globales. -@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; -} - -.toolbox-tutorial-tooltip { - position: fixed; - z-index: 640; - display: grid; - gap: var(--space-3); - padding: var(--space-4); - border: 1px solid rgba(246, 196, 83, 0.34); - border-radius: var(--radius-md); - background: - radial-gradient(circle at 12% 0%, rgba(246, 196, 83, 0.12), transparent 36%), - rgba(7, 10, 24, 0.98); - box-shadow: - var(--shadow-lg), - 0 0 24px rgba(139, 92, 246, 0.18); -} - -.toolbox-tutorial-tooltip::before { - content: ""; - position: absolute; - top: -6px; - left: var(--tutorial-arrow-left, 50%); - width: 10px; - height: 10px; - border-top: 1px solid rgba(246, 196, 83, 0.34); - border-left: 1px solid rgba(246, 196, 83, 0.34); - background: rgba(7, 10, 24, 0.98); - transform: translateX(-50%) rotate(45deg); -} - -.toolbox-tutorial-tooltip[data-placement="above"]::before { - top: auto; - bottom: -6px; - border-top: 0; - border-left: 0; - border-right: 1px solid rgba(246, 196, 83, 0.34); - border-bottom: 1px solid rgba(246, 196, 83, 0.34); -} - -.toolbox-tutorial-tooltip[data-placement="right"]::before { - top: var(--tutorial-arrow-top, 50%); - left: -6px; - border-top: 0; - border-left: 1px solid rgba(246, 196, 83, 0.34); - border-right: 0; - border-bottom: 1px solid rgba(246, 196, 83, 0.34); - transform: translateY(-50%) rotate(45deg); -} - -.toolbox-tutorial-heading { - display: flex; - align-items: center; - gap: var(--space-2); - padding-right: var(--space-6); -} - -.toolbox-tutorial-heading .ui-icon { - width: 20px; - height: 20px; - color: var(--color-accent-gold); -} - -.toolbox-tutorial-heading strong { - color: var(--color-text-primary); - line-height: 1.25; -} - -.toolbox-tutorial-tooltip p { - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - line-height: 1.5; -} - -.toolbox-tutorial-count { - width: fit-content; - padding: 2px 7px; - border: 1px solid rgba(246, 196, 83, 0.22); - border-radius: var(--radius-pill); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.toolbox-tutorial-close { - position: absolute; - top: var(--space-3); - right: var(--space-3); - width: 30px; - min-width: 30px; - min-height: 30px; - justify-content: center; - padding: 0; - border-color: transparent; - background: transparent; - color: var(--color-text-muted); -} - -.toolbox-tutorial-close:hover { - border-color: rgba(150, 165, 205, 0.18); - background: rgba(21, 26, 48, 0.62); - color: var(--color-text-primary); - box-shadow: none; -} - -.toolbox-tutorial-close .ui-icon { - width: 16px; - height: 16px; -} - -.toolbox-tutorial-tooltip footer { - display: flex; - justify-content: flex-end; -} - -.toolbox-tutorial-tooltip footer button { - min-height: 36px; - padding-inline: var(--space-3); -} - -.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; -} +// Rôle : orchestre les styles de structure des pages toolbox depuis ses partials spécialisés. +@use "layout/header"; +@use "layout/icon-picker"; +@use "layout/tutorial"; +@use "layout/add-tools"; +@use "layout/preferences"; +@use "layout/modules"; diff --git a/website/src/styles/toolboxes/_shared-controls.scss b/website/src/styles/toolboxes/_shared-controls.scss index 2c9c70d..c73d66c 100644 --- a/website/src/styles/toolboxes/_shared-controls.scss +++ b/website/src/styles/toolboxes/_shared-controls.scss @@ -1,670 +1,6 @@ -// Rôle : gère les contrôles partagés des outils en deux colonnes et leurs états. -@use "../mixins"; - -.module-content select { - min-height: 36px; - overflow: hidden; - padding-right: 34px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - appearance: none; - -webkit-appearance: none; - color: var(--color-text-primary); - 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; -} - -.module-content select:hover, -.module-content 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); -} - -.module-content select option { - background: #11182f; - color: var(--color-text-primary); -} - -.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; -} - -.mix-tags-input-wrap { - position: relative; - display: flex; - box-sizing: border-box; - width: 100%; - min-width: 0; - min-height: 44px; - overflow: hidden; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.92); - color: var(--color-text-primary); - padding-right: 34px; - transition: - transform var(--duration-fast) var(--ease-standard), - border-color var(--duration-fast) var(--ease-standard), - background-color var(--duration-fast) var(--ease-standard), - color var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -.mix-tags-input { - position: relative; - display: block; - box-sizing: border-box; - flex: 1 1 auto; - width: 100%; - min-width: 0; - max-width: 100%; - height: 42px; - min-height: 42px; - overflow-x: auto; - overflow-y: hidden; - padding: 10px 4px 4px 7px; - border: 0; - background: transparent; - color: inherit; - caret-color: var(--color-text-primary); - font: inherit; - font-variant-numeric: tabular-nums; - line-height: 20px; - outline: none; - scrollbar-width: none; - white-space: nowrap; - cursor: text; -} - -.mix-tags-input-wrap:hover, -.mix-tags-input-wrap:has(.mix-tags-input.is-focused) { - border-color: var(--color-primary); - box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); -} - -.mix-tags-input-wrap:has(.mix-tags-input:focus-visible) { - outline: 2px solid var(--color-accent-gold); - outline-offset: 3px; -} - -.mix-tags-input-wrap:has(.mix-tags-input.is-focused) { - color: var(--color-text-primary); -} - -.mix-tags-input::-webkit-scrollbar { - display: none; -} - -.mix-tags-input:empty::before { - content: attr(data-placeholder); - color: var(--color-text-muted); - opacity: 0.58; -} - -.mix-tags-input::selection { - background: rgba(139, 92, 246, 0.42); -} - -.mix-tags-input-tag { - position: relative; - top: -1px; - display: inline-flex; - width: 68px; - min-width: 68px; - height: 24px; - align-items: center; - justify-content: center; - margin: 0 4px; - padding: 1px 5px; - border: 1px solid rgba(150, 165, 205, 0.18); - border-radius: var(--radius-sm); - background: rgba(150, 165, 205, 0.07); - color: var(--color-text-secondary); - font-size: 0.62rem; - font-weight: 700; - line-height: 11px; - text-align: center; - white-space: normal; - vertical-align: middle; -} - -.mix-tags-input-tag-text { - overflow: hidden; - line-height: 11px; - text-overflow: clip; -} - -.mix-tags-input-insert-button { - position: absolute; - z-index: 2; - top: 0; - right: 0; - bottom: 0; - display: inline-flex; - box-sizing: border-box; - width: 34px; - min-width: 34px; - min-height: 0; - align-items: center; - justify-content: center; - padding: 0; - border: 0; - border-left: 1px solid rgba(165, 180, 252, 0.12); - border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0; - background: transparent; - color: var(--color-text-muted); -} - -.mix-tags-input-insert-button:hover, -.mix-tags-input-insert-button:focus-visible { - background: rgba(196, 181, 253, 0.08); - color: var(--color-text-primary); -} - -.mix-tags-input-insert-button .ui-icon { - display: block; - width: 15px; - height: 15px; -} - -.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); -} - -.mix-tags-input-wrap--small .mix-tags-input { - display: block; - height: 34px; - min-height: 34px; - padding: 6px 4px 6px 9px; - white-space: nowrap; - text-overflow: clip; -} - -.mix-tags-input-wrap--small .mix-tags-input-tag { - top: 0; - width: 62px; - min-width: 62px; - height: 22px; -} - -.mix-tags-input-wrap--small { - height: 36px; - min-height: 36px; - max-height: 36px; -} - -.mix-tags-input-wrap--small .mix-tags-input-insert-button { - top: 0; - right: 0; - bottom: 0; - width: 34px; - min-width: 34px; - height: 34px; - min-height: 34px; - border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0; -} - -.mix-tags-input-wrap--small .mix-tags-input-insert-button .ui-icon { - display: block; - width: 14px; - height: 14px; -} - -.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); -} +// Rôle : orchestre les contrôles Sass partagés des outils toolbox. +@use "shared-controls/selects"; +@use "shared-controls/split-controls"; +@use "shared-controls/split-tree"; +@use "shared-controls/mix-tags"; +@use "shared-controls/entries"; diff --git a/website/src/styles/toolboxes/_task-planner.scss b/website/src/styles/toolboxes/_task-planner.scss index 233c43a..ef5d497 100644 --- a/website/src/styles/toolboxes/_task-planner.scss +++ b/website/src/styles/toolboxes/_task-planner.scss @@ -1,706 +1,7 @@ -// Rôle : gère l’outil task planner, ses catégories, relations et réglages. -@use "../mixins"; - -.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-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 input, -.task-planner-reset-override input, -.task-planner-settings select, -.task-planner-add-form select, -.task-planner-type-select, -.task-planner-reset-override select, -.task-planner-relations select, -.combos-device-row select, -.equipment-planner-socket-links select, -.equipment-planner-socket-controls select { - width: 100%; -} - -.task-planner-settings input, -.task-planner-reset-override input { - 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-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-item.is-reset-soon:not(.is-complete) { - border-color: rgba(34, 211, 238, 0.34); - box-shadow: - inset 0 0 0 1px rgba(34, 211, 238, 0.07), - 0 0 0 rgba(34, 211, 238, 0); - animation: task-planner-reset-soon-pulse 2600ms var(--ease-standard) infinite; -} - -@keyframes task-planner-reset-soon-pulse { - 0%, - 100% { - border-color: rgba(34, 211, 238, 0.26); - box-shadow: - inset 0 0 0 1px rgba(34, 211, 238, 0.05), - 0 0 0 rgba(34, 211, 238, 0); - } - - 50% { - border-color: rgba(34, 211, 238, 0.44); - box-shadow: - inset 0 0 0 1px rgba(34, 211, 238, 0.1), - 0 0 12px rgba(34, 211, 238, 0.07); - } -} - -@media (prefers-reduced-motion: reduce) { - .task-planner-item.is-reset-soon:not(.is-complete) { - animation: none; - } -} - -.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 { - border-color: rgba(165, 180, 252, 0.09); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.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 { - padding-left: 10px; -} +// Rôle : orchestre les styles du planificateur de tâches depuis ses partials spécialisés. +@use "task-planner/topbar-settings"; +@use "task-planner/tree"; +@use "task-planner/categories"; +@use "task-planner/items"; +@use "task-planner/notices"; +@use "task-planner/panels"; diff --git a/website/src/styles/toolboxes/combos/_editor.scss b/website/src/styles/toolboxes/combos/_editor.scss new file mode 100644 index 0000000..1463888 --- /dev/null +++ b/website/src/styles/toolboxes/combos/_editor.scss @@ -0,0 +1,123 @@ +// Rôle : regroupe la structure d'édition, le formulaire et les choix globaux des combos. + +.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; +} diff --git a/website/src/styles/toolboxes/combos/_hold.scss b/website/src/styles/toolboxes/combos/_hold.scss new file mode 100644 index 0000000..d4c6776 --- /dev/null +++ b/website/src/styles/toolboxes/combos/_hold.scss @@ -0,0 +1,79 @@ +// Rôle : regroupe les contrôles de maintien et champs numériques des combos. + +.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; +} diff --git a/website/src/styles/toolboxes/combos/_list.scss b/website/src/styles/toolboxes/combos/_list.scss new file mode 100644 index 0000000..d43e8b6 --- /dev/null +++ b/website/src/styles/toolboxes/combos/_list.scss @@ -0,0 +1,100 @@ +// Rôle : regroupe les styles de liste, catégories et cartes des combos. + +.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; +} diff --git a/website/src/styles/toolboxes/combos/_palette.scss b/website/src/styles/toolboxes/combos/_palette.scss new file mode 100644 index 0000000..4c7c39b --- /dev/null +++ b/website/src/styles/toolboxes/combos/_palette.scss @@ -0,0 +1,53 @@ +// Rôle : regroupe les styles de palette et de saisie personnalisée des combos. + +.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; +} diff --git a/website/src/styles/toolboxes/combos/_sequence.scss b/website/src/styles/toolboxes/combos/_sequence.scss new file mode 100644 index 0000000..31bcdda --- /dev/null +++ b/website/src/styles/toolboxes/combos/_sequence.scss @@ -0,0 +1,115 @@ +// Rôle : regroupe les styles de séquence et d'emplacements d'inputs des combos. + +.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; +} diff --git a/website/src/styles/toolboxes/combos/_tokens.scss b/website/src/styles/toolboxes/combos/_tokens.scss new file mode 100644 index 0000000..1b160dc --- /dev/null +++ b/website/src/styles/toolboxes/combos/_tokens.scss @@ -0,0 +1,393 @@ +// Rôle : regroupe les tokens visuels d'inputs et variantes de devices des combos. + +.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; +} diff --git a/website/src/styles/toolboxes/layout/_add-tools.scss b/website/src/styles/toolboxes/layout/_add-tools.scss new file mode 100644 index 0000000..5d89dc9 --- /dev/null +++ b/website/src/styles/toolboxes/layout/_add-tools.scss @@ -0,0 +1,93 @@ +// Rôle : regroupe les contrôles d'ajout d'outil et de quick add. + +.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); +} diff --git a/website/src/styles/toolboxes/layout/_header.scss b/website/src/styles/toolboxes/layout/_header.scss new file mode 100644 index 0000000..30c1c95 --- /dev/null +++ b/website/src/styles/toolboxes/layout/_header.scss @@ -0,0 +1,84 @@ +// Rôle : regroupe le header, hero et titres des pages toolbox. + +.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; +} diff --git a/website/src/styles/toolboxes/layout/_icon-picker.scss b/website/src/styles/toolboxes/layout/_icon-picker.scss new file mode 100644 index 0000000..86b80f6 --- /dev/null +++ b/website/src/styles/toolboxes/layout/_icon-picker.scss @@ -0,0 +1,96 @@ +// Rôle : regroupe le picker d'icône des toolboxes. +@use "../../mixins"; + +.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; +} diff --git a/website/src/styles/toolboxes/layout/_modules.scss b/website/src/styles/toolboxes/layout/_modules.scss new file mode 100644 index 0000000..9843c00 --- /dev/null +++ b/website/src/styles/toolboxes/layout/_modules.scss @@ -0,0 +1,157 @@ +// Rôle : regroupe les colonnes, modules et zones de dépôt des toolboxes. +@use "../../mixins"; + +.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; +} diff --git a/website/src/styles/toolboxes/layout/_preferences.scss b/website/src/styles/toolboxes/layout/_preferences.scss new file mode 100644 index 0000000..b467943 --- /dev/null +++ b/website/src/styles/toolboxes/layout/_preferences.scss @@ -0,0 +1,136 @@ +// Rôle : regroupe les préférences toolbox, colonnes et contrôles de layout. +@use "../../mixins"; + +.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); +} diff --git a/website/src/styles/toolboxes/layout/_tutorial.scss b/website/src/styles/toolboxes/layout/_tutorial.scss new file mode 100644 index 0000000..3d7f979 --- /dev/null +++ b/website/src/styles/toolboxes/layout/_tutorial.scss @@ -0,0 +1,120 @@ +// Rôle : regroupe le tooltip tutoriel et ses états responsive. + +.toolbox-tutorial-tooltip { + position: fixed; + z-index: 640; + display: grid; + gap: var(--space-3); + padding: var(--space-4); + border: 1px solid rgba(246, 196, 83, 0.34); + border-radius: var(--radius-md); + background: + radial-gradient(circle at 12% 0%, rgba(246, 196, 83, 0.12), transparent 36%), + rgba(7, 10, 24, 0.98); + box-shadow: + var(--shadow-lg), + 0 0 24px rgba(139, 92, 246, 0.18); +} + +.toolbox-tutorial-tooltip::before { + content: ""; + position: absolute; + top: -6px; + left: var(--tutorial-arrow-left, 50%); + width: 10px; + height: 10px; + border-top: 1px solid rgba(246, 196, 83, 0.34); + border-left: 1px solid rgba(246, 196, 83, 0.34); + background: rgba(7, 10, 24, 0.98); + transform: translateX(-50%) rotate(45deg); +} + +.toolbox-tutorial-tooltip[data-placement="above"]::before { + top: auto; + bottom: -6px; + border-top: 0; + border-left: 0; + border-right: 1px solid rgba(246, 196, 83, 0.34); + border-bottom: 1px solid rgba(246, 196, 83, 0.34); +} + +.toolbox-tutorial-tooltip[data-placement="right"]::before { + top: var(--tutorial-arrow-top, 50%); + left: -6px; + border-top: 0; + border-left: 1px solid rgba(246, 196, 83, 0.34); + border-right: 0; + border-bottom: 1px solid rgba(246, 196, 83, 0.34); + transform: translateY(-50%) rotate(45deg); +} + +.toolbox-tutorial-heading { + display: flex; + align-items: center; + gap: var(--space-2); + padding-right: var(--space-6); +} + +.toolbox-tutorial-heading .ui-icon { + width: 20px; + height: 20px; + color: var(--color-accent-gold); +} + +.toolbox-tutorial-heading strong { + color: var(--color-text-primary); + line-height: 1.25; +} + +.toolbox-tutorial-tooltip p { + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + line-height: 1.5; +} + +.toolbox-tutorial-count { + width: fit-content; + padding: 2px 7px; + border: 1px solid rgba(246, 196, 83, 0.22); + border-radius: var(--radius-pill); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.toolbox-tutorial-close { + position: absolute; + top: var(--space-3); + right: var(--space-3); + width: 30px; + min-width: 30px; + min-height: 30px; + justify-content: center; + padding: 0; + border-color: transparent; + background: transparent; + color: var(--color-text-muted); +} + +.toolbox-tutorial-close:hover { + border-color: rgba(150, 165, 205, 0.18); + background: rgba(21, 26, 48, 0.62); + color: var(--color-text-primary); + box-shadow: none; +} + +.toolbox-tutorial-close .ui-icon { + width: 16px; + height: 16px; +} + +.toolbox-tutorial-tooltip footer { + display: flex; + justify-content: flex-end; +} + +.toolbox-tutorial-tooltip footer button { + min-height: 36px; + padding-inline: var(--space-3); +} diff --git a/website/src/styles/toolboxes/shared-controls/_entries.scss b/website/src/styles/toolboxes/shared-controls/_entries.scss new file mode 100644 index 0000000..35fe60f --- /dev/null +++ b/website/src/styles/toolboxes/shared-controls/_entries.scss @@ -0,0 +1,186 @@ +// Rôle : regroupe les entrées, champs et états de danger partagés des tool-split. + +.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); +} + +.mix-tags-input-wrap--small .mix-tags-input { + display: block; + height: 34px; + min-height: 34px; + padding: 6px 4px 6px 9px; + white-space: nowrap; + text-overflow: clip; +} + +.mix-tags-input-wrap--small .mix-tags-input-tag { + top: 0; + width: 62px; + min-width: 62px; + height: 22px; +} + +.mix-tags-input-wrap--small { + height: 36px; + min-height: 36px; + max-height: 36px; +} + +.mix-tags-input-wrap--small .mix-tags-input-insert-button { + top: 0; + right: 0; + bottom: 0; + width: 34px; + min-width: 34px; + height: 34px; + min-height: 34px; + border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0; +} + +.mix-tags-input-wrap--small .mix-tags-input-insert-button .ui-icon { + display: block; + width: 14px; + height: 14px; +} + +.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); +} diff --git a/website/src/styles/toolboxes/shared-controls/_mix-tags.scss b/website/src/styles/toolboxes/shared-controls/_mix-tags.scss new file mode 100644 index 0000000..06c63b1 --- /dev/null +++ b/website/src/styles/toolboxes/shared-controls/_mix-tags.scss @@ -0,0 +1,139 @@ +// Rôle : regroupe les styles du MixTagsInput partagé. + +.mix-tags-input-wrap { + position: relative; + display: flex; + box-sizing: border-box; + width: 100%; + min-width: 0; + min-height: 44px; + overflow: hidden; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.92); + color: var(--color-text-primary); + padding-right: 34px; + transition: + transform var(--duration-fast) var(--ease-standard), + border-color var(--duration-fast) var(--ease-standard), + background-color var(--duration-fast) var(--ease-standard), + color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +.mix-tags-input { + position: relative; + display: block; + box-sizing: border-box; + flex: 1 1 auto; + width: 100%; + min-width: 0; + max-width: 100%; + height: 42px; + min-height: 42px; + overflow-x: auto; + overflow-y: hidden; + padding: 10px 4px 4px 7px; + border: 0; + background: transparent; + color: inherit; + caret-color: var(--color-text-primary); + font: inherit; + font-variant-numeric: tabular-nums; + line-height: 20px; + outline: none; + scrollbar-width: none; + white-space: nowrap; + cursor: text; +} + +.mix-tags-input-wrap:hover, +.mix-tags-input-wrap:has(.mix-tags-input.is-focused) { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); +} + +.mix-tags-input-wrap:has(.mix-tags-input:focus-visible) { + outline: 2px solid var(--color-accent-gold); + outline-offset: 3px; +} + +.mix-tags-input-wrap:has(.mix-tags-input.is-focused) { + color: var(--color-text-primary); +} + +.mix-tags-input::-webkit-scrollbar { + display: none; +} + +.mix-tags-input:empty::before { + content: attr(data-placeholder); + color: var(--color-text-muted); + opacity: 0.58; +} + +.mix-tags-input::selection { + background: rgba(139, 92, 246, 0.42); +} + +.mix-tags-input-tag { + position: relative; + top: -1px; + display: inline-flex; + width: 68px; + min-width: 68px; + height: 24px; + align-items: center; + justify-content: center; + margin: 0 4px; + padding: 1px 5px; + border: 1px solid rgba(150, 165, 205, 0.18); + border-radius: var(--radius-sm); + background: rgba(150, 165, 205, 0.07); + color: var(--color-text-secondary); + font-size: 0.62rem; + font-weight: 700; + line-height: 11px; + text-align: center; + white-space: normal; + vertical-align: middle; +} + +.mix-tags-input-tag-text { + overflow: hidden; + line-height: 11px; + text-overflow: clip; +} + +.mix-tags-input-insert-button { + position: absolute; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + display: inline-flex; + box-sizing: border-box; + width: 34px; + min-width: 34px; + min-height: 0; + align-items: center; + justify-content: center; + padding: 0; + border: 0; + border-left: 1px solid rgba(165, 180, 252, 0.12); + border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0; + background: transparent; + color: var(--color-text-muted); +} + +.mix-tags-input-insert-button:hover, +.mix-tags-input-insert-button:focus-visible { + background: rgba(196, 181, 253, 0.08); + color: var(--color-text-primary); +} + +.mix-tags-input-insert-button .ui-icon { + display: block; + width: 15px; + height: 15px; +} diff --git a/website/src/styles/toolboxes/shared-controls/_selects.scss b/website/src/styles/toolboxes/shared-controls/_selects.scss new file mode 100644 index 0000000..ea1560e --- /dev/null +++ b/website/src/styles/toolboxes/shared-controls/_selects.scss @@ -0,0 +1,41 @@ +// Rôle : regroupe les selects compacts partagés des outils toolbox. + +.module-content select { + min-height: 36px; + overflow: hidden; + padding-right: 34px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + appearance: none; + -webkit-appearance: none; + color: var(--color-text-primary); + 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; +} + +.module-content select:hover, +.module-content 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); +} + +.module-content select option { + background: #11182f; + color: var(--color-text-primary); +} diff --git a/website/src/styles/toolboxes/shared-controls/_split-controls.scss b/website/src/styles/toolboxes/shared-controls/_split-controls.scss new file mode 100644 index 0000000..0599140 --- /dev/null +++ b/website/src/styles/toolboxes/shared-controls/_split-controls.scss @@ -0,0 +1,294 @@ +// Rôle : regroupe les boutons, toggles, résultats et actions tool-split partagés. +@use "../../mixins"; + +.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; +} diff --git a/website/src/styles/toolboxes/shared-controls/_split-tree.scss b/website/src/styles/toolboxes/shared-controls/_split-tree.scss new file mode 100644 index 0000000..9301b5b --- /dev/null +++ b/website/src/styles/toolboxes/shared-controls/_split-tree.scss @@ -0,0 +1,14 @@ +// Rôle : regroupe les styles d'arbre tool-split partagés. + +.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; +} diff --git a/website/src/styles/toolboxes/task-planner/_categories.scss b/website/src/styles/toolboxes/task-planner/_categories.scss new file mode 100644 index 0000000..4336571 --- /dev/null +++ b/website/src/styles/toolboxes/task-planner/_categories.scss @@ -0,0 +1,84 @@ +// Rôle : regroupe les catégories, actions et zones de réorganisation du task planner. + +.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); +} diff --git a/website/src/styles/toolboxes/task-planner/_items.scss b/website/src/styles/toolboxes/task-planner/_items.scss new file mode 100644 index 0000000..246fd40 --- /dev/null +++ b/website/src/styles/toolboxes/task-planner/_items.scss @@ -0,0 +1,150 @@ +// Rôle : regroupe les lignes de tâches, actions, champs et avertissements du task planner. + +.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-item.is-reset-soon:not(.is-complete) { + border-color: rgba(34, 211, 238, 0.34); + box-shadow: + inset 0 0 0 1px rgba(34, 211, 238, 0.07), + 0 0 0 rgba(34, 211, 238, 0); + animation: task-planner-reset-soon-pulse 2600ms var(--ease-standard) infinite; +} + +@keyframes task-planner-reset-soon-pulse { + 0%, + 100% { + border-color: rgba(34, 211, 238, 0.26); + box-shadow: + inset 0 0 0 1px rgba(34, 211, 238, 0.05), + 0 0 0 rgba(34, 211, 238, 0); + } + + 50% { + border-color: rgba(34, 211, 238, 0.44); + box-shadow: + inset 0 0 0 1px rgba(34, 211, 238, 0.1), + 0 0 12px rgba(34, 211, 238, 0.07); + } +} + +@media (prefers-reduced-motion: reduce) { + .task-planner-item.is-reset-soon:not(.is-complete) { + animation: none; + } +} + +.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 { + border-color: rgba(165, 180, 252, 0.09); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.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; +} diff --git a/website/src/styles/toolboxes/task-planner/_notices.scss b/website/src/styles/toolboxes/task-planner/_notices.scss new file mode 100644 index 0000000..5c66465 --- /dev/null +++ b/website/src/styles/toolboxes/task-planner/_notices.scss @@ -0,0 +1,47 @@ +// Rôle : regroupe les notices et animations informatives du task planner. + +.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); + } +} diff --git a/website/src/styles/toolboxes/task-planner/_panels.scss b/website/src/styles/toolboxes/task-planner/_panels.scss new file mode 100644 index 0000000..48582e4 --- /dev/null +++ b/website/src/styles/toolboxes/task-planner/_panels.scss @@ -0,0 +1,184 @@ +// Rôle : regroupe les panneaux description, reset et relations du task planner. + +.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 { + padding-left: 10px; +} diff --git a/website/src/styles/toolboxes/task-planner/_topbar-settings.scss b/website/src/styles/toolboxes/task-planner/_topbar-settings.scss new file mode 100644 index 0000000..4886b26 --- /dev/null +++ b/website/src/styles/toolboxes/task-planner/_topbar-settings.scss @@ -0,0 +1,143 @@ +// Rôle : regroupe la barre haute, les réglages globaux et le formulaire du task planner. + +.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-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 input, +.task-planner-reset-override input, +.task-planner-settings select, +.task-planner-add-form select, +.task-planner-type-select, +.task-planner-reset-override select, +.task-planner-relations select, +.combos-device-row select, +.equipment-planner-socket-links select, +.equipment-planner-socket-controls select { + width: 100%; +} + +.task-planner-settings input, +.task-planner-reset-override input { + 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-add-form { + grid-template-columns: minmax(0, 1fr) minmax(120px, 0.36fr) auto; +} diff --git a/website/src/styles/toolboxes/task-planner/_tree.scss b/website/src/styles/toolboxes/task-planner/_tree.scss new file mode 100644 index 0000000..f09b2ab --- /dev/null +++ b/website/src/styles/toolboxes/task-planner/_tree.scss @@ -0,0 +1,102 @@ +// Rôle : regroupe les listes imbriquées, parents masqués et états vides du task planner. + +.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; +}