diff --git a/tests/static-styles.test.mjs b/tests/static-styles.test.mjs index 7cbcf21..171f92e 100644 --- a/tests/static-styles.test.mjs +++ b/tests/static-styles.test.mjs @@ -7,6 +7,10 @@ async function readJoinedStyles(paths) { return (await Promise.all(paths.map((path) => readFile(path, "utf8")))).join("\n"); } +function countLines(source) { + return source.trimEnd().split("\n").length; +} + test("style entrypoint and theme layers are wired", async () => { const styles = await readFile("website/src/styles/main.scss", "utf8"); const styleNebula = await readFile("website/src/styles/_nebula.scss", "utf8"); @@ -20,8 +24,19 @@ test("style entrypoint and theme layers are wired", async () => { "website/src/styles/home/_shared.scss", "website/src/styles/home/_onboarding.scss", "website/src/styles/home/_library.scss", + "website/src/styles/home/library/_page.scss", + "website/src/styles/home/library/_summary.scss", + "website/src/styles/home/library/_toc.scss", + "website/src/styles/home/library/_tool-cards.scss", + "website/src/styles/home/library/_examples.scss", + "website/src/styles/home/library/_previews.scss", "website/src/styles/home/_story.scss", "website/src/styles/home/_about.scss", + "website/src/styles/home/about/_page.scss", + "website/src/styles/home/about/_story.scss", + "website/src/styles/home/about/_contribute.scss", + "website/src/styles/home/about/_tools.scss", + "website/src/styles/home/about/_reminders.scss", "website/src/styles/home/_stats.scss" ]); const styleToolboxesEntry = await readFile("website/src/styles/_toolboxes.scss", "utf8"); @@ -52,6 +67,29 @@ test("style entrypoint and theme layers are wired", async () => { "website/src/styles/toolboxes/combos/_hold.scss" ]); const styleToolboxImages = await readFile("website/src/styles/toolboxes/_images.scss", "utf8"); + const styleToolboxGoalTree = await readJoinedStyles([ + "website/src/styles/toolboxes/_goal-tree.scss", + "website/src/styles/toolboxes/goal-tree/_editor.scss", + "website/src/styles/toolboxes/goal-tree/_view.scss", + "website/src/styles/toolboxes/goal-tree/_nodes.scss", + "website/src/styles/toolboxes/goal-tree/_node-card.scss", + "website/src/styles/toolboxes/goal-tree/_node-content.scss", + "website/src/styles/toolboxes/goal-tree/_node-actions.scss", + "website/src/styles/toolboxes/goal-tree/_node-drag.scss", + "website/src/styles/toolboxes/goal-tree/_node-responsive.scss" + ]); + const styleToolboxCalendar = await readJoinedStyles([ + "website/src/styles/toolboxes/_calendar.scss", + "website/src/styles/toolboxes/calendar/_base.scss", + "website/src/styles/toolboxes/calendar/_form.scss", + "website/src/styles/toolboxes/calendar/_form-layout.scss", + "website/src/styles/toolboxes/calendar/_date-picker.scss", + "website/src/styles/toolboxes/calendar/_event-controls.scss", + "website/src/styles/toolboxes/calendar/_form-actions.scss", + "website/src/styles/toolboxes/calendar/_week.scss", + "website/src/styles/toolboxes/calendar/_month.scss", + "website/src/styles/toolboxes/calendar/_responsive.scss" + ]); const styleToolboxSharedControls = await readJoinedStyles([ "website/src/styles/toolboxes/_shared-controls.scss", "website/src/styles/toolboxes/shared-controls/_selects.scss", @@ -60,8 +98,22 @@ test("style entrypoint and theme layers are wired", async () => { "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 styleOverlays = await readJoinedStyles([ + "website/src/styles/_overlays.scss", + "website/src/styles/overlays/_image-viewer.scss", + "website/src/styles/overlays/_drawers.scss", + "website/src/styles/overlays/_modals.scss", + "website/src/styles/overlays/_notifications.scss", + "website/src/styles/overlays/_tool-add.scss" + ]); + const styleIcons = await readJoinedStyles([ + "website/src/styles/_icons.scss", + "website/src/styles/icons/_base.scss", + "website/src/styles/icons/_navigation.scss", + "website/src/styles/icons/_toolbox.scss", + "website/src/styles/icons/_actions.scss", + "website/src/styles/icons/_equipment.scss" + ]); const styleGames = await readJoinedStyles([ "website/src/styles/_games.scss", "website/src/styles/games/_home-cards.scss", @@ -114,6 +166,12 @@ test("style entrypoint and theme layers are wired", async () => { assert.match(styleToolboxTable, /\.table-module/); assert.match(styleToolboxTable, /\.table-cell-input\.is-selected/); assert.match(styleToolboxTable, /\.table-cell-input\.is-move-target/); + assert.match(styleToolboxGoalTree, /\.goal-tree-node-card/); + assert.match(styleToolboxGoalTree, /\.goal-tree-node-content-row/); + assert.match(styleToolboxGoalTree, /\.goal-tree-node.is-drop-target/); + assert.match(styleToolboxCalendar, /\.calendar-event-form/); + assert.match(styleToolboxCalendar, /\.calendar-month-date-picker/); + assert.match(styleToolboxCalendar, /\.calendar-alert-mode-switch/); assert.match(styleToolboxSharedControls, /\.notepad-toolbar-button\.danger/); assert.match(styleToolboxLayout, /\.toolbox-icon-picker/); assert.match(styleToolboxLayout, /\.toolbox-game-icon/); @@ -165,3 +223,58 @@ test("style entrypoint and theme layers are wired", async () => { assert.match(styleOverlays, /overscroll-behavior: contain/); assert.match(styleResponsive, /@media \(max-width: 760px\)/); }); + +test("large sass files stay split by stable responsibility", async () => { + const orchestrators = [ + "website/src/styles/home/_library.scss", + "website/src/styles/home/_about.scss", + "website/src/styles/_overlays.scss", + "website/src/styles/toolboxes/goal-tree/_nodes.scss", + "website/src/styles/_icons.scss", + "website/src/styles/toolboxes/calendar/_form.scss" + ]; + const partials = [ + "website/src/styles/home/library/_page.scss", + "website/src/styles/home/library/_summary.scss", + "website/src/styles/home/library/_toc.scss", + "website/src/styles/home/library/_tool-cards.scss", + "website/src/styles/home/library/_examples.scss", + "website/src/styles/home/library/_previews.scss", + "website/src/styles/home/about/_page.scss", + "website/src/styles/home/about/_story.scss", + "website/src/styles/home/about/_contribute.scss", + "website/src/styles/home/about/_tools.scss", + "website/src/styles/home/about/_reminders.scss", + "website/src/styles/overlays/_image-viewer.scss", + "website/src/styles/overlays/_drawers.scss", + "website/src/styles/overlays/_modals.scss", + "website/src/styles/overlays/_notifications.scss", + "website/src/styles/overlays/_tool-add.scss", + "website/src/styles/toolboxes/goal-tree/_node-card.scss", + "website/src/styles/toolboxes/goal-tree/_node-content.scss", + "website/src/styles/toolboxes/goal-tree/_node-actions.scss", + "website/src/styles/toolboxes/goal-tree/_node-drag.scss", + "website/src/styles/toolboxes/goal-tree/_node-responsive.scss", + "website/src/styles/icons/_base.scss", + "website/src/styles/icons/_navigation.scss", + "website/src/styles/icons/_toolbox.scss", + "website/src/styles/icons/_actions.scss", + "website/src/styles/icons/_equipment.scss", + "website/src/styles/toolboxes/calendar/_form-layout.scss", + "website/src/styles/toolboxes/calendar/_date-picker.scss", + "website/src/styles/toolboxes/calendar/_event-controls.scss", + "website/src/styles/toolboxes/calendar/_form-actions.scss" + ]; + + for (const path of orchestrators) { + const source = await readFile(path, "utf8"); + assert.ok(source.startsWith("// Rôle :"), `${path} must keep a role header`); + assert.ok(countLines(source) <= 120, `${path} should remain an orchestrator`); + } + + for (const path of partials) { + const source = await readFile(path, "utf8"); + assert.ok(source.startsWith("// Rôle :"), `${path} must keep a role header`); + assert.ok(countLines(source) <= 300, `${path} should stay scoped to one responsibility`); + } +}); diff --git a/website/src/styles/_icons.scss b/website/src/styles/_icons.scss index 30a65a3..4b7a550 100644 --- a/website/src/styles/_icons.scss +++ b/website/src/styles/_icons.scss @@ -1,465 +1,6 @@ -// Rôle : définit le rendu commun des icônes SVG. -.ui-icon { - display: block; - width: 20px; - height: 20px; - background: currentColor; - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - -webkit-mask-position: center; - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: contain; -} - -.ui-icon-open { - mask-image: url("/static/icons/open.svg"); - -webkit-mask-image: url("/static/icons/open.svg"); -} - -.ui-icon-home { - mask-image: url("/static/icons/home.svg"); - -webkit-mask-image: url("/static/icons/home.svg"); -} - -.ui-icon-enter { - mask-image: url("/static/icons/enter.svg"); - -webkit-mask-image: url("/static/icons/enter.svg"); -} - -.ui-icon-zoom { - mask-image: url("/static/icons/zoom.svg"); - -webkit-mask-image: url("/static/icons/zoom.svg"); -} - -.ui-icon-save { - mask-image: url("/static/icons/save.svg"); - -webkit-mask-image: url("/static/icons/save.svg"); -} - -.ui-icon-info { - mask-image: url("/static/icons/info.svg"); - -webkit-mask-image: url("/static/icons/info.svg"); -} - -.ui-icon-warning { - mask-image: url("/static/icons/warning.svg"); - -webkit-mask-image: url("/static/icons/warning.svg"); -} - -.ui-icon-export { - mask-image: url("/static/icons/export.svg"); - -webkit-mask-image: url("/static/icons/export.svg"); -} - -.ui-icon-import { - mask-image: url("/static/icons/import.svg"); - -webkit-mask-image: url("/static/icons/import.svg"); -} - -.ui-icon-link { - mask-image: url("/static/icons/link.svg"); - -webkit-mask-image: url("/static/icons/link.svg"); -} - -.ui-icon-picture { - mask-image: url("/static/icons/picture.svg"); - -webkit-mask-image: url("/static/icons/picture.svg"); -} - -.ui-icon-toolbox { - mask-image: url("/static/icons/toolbox.svg"); - -webkit-mask-image: url("/static/icons/toolbox.svg"); -} - -.ui-icon-settings { - mask-image: url("/static/icons/settings.svg"); - -webkit-mask-image: url("/static/icons/settings.svg"); -} - -.ui-icon-tasklist { - mask-image: url("/static/icons/tasklist.svg"); - -webkit-mask-image: url("/static/icons/tasklist.svg"); -} - -.ui-icon-notepad { - mask-image: url("/static/icons/notepad.svg"); - -webkit-mask-image: url("/static/icons/notepad.svg"); -} - -.ui-icon-checklist { - mask-image: url("/static/icons/checklist.svg"); - -webkit-mask-image: url("/static/icons/checklist.svg"); -} - -.ui-icon-diagram { - mask-image: url("/static/icons/diagram.svg"); - -webkit-mask-image: url("/static/icons/diagram.svg"); -} - -.ui-icon-cube { - mask-image: url("/static/icons/cube.svg"); - -webkit-mask-image: url("/static/icons/cube.svg"); -} - -.ui-icon-fire { - mask-image: url("/static/icons/fire.svg"); - -webkit-mask-image: url("/static/icons/fire.svg"); -} - -.ui-icon-flask { - mask-image: url("/static/icons/flask.svg"); - -webkit-mask-image: url("/static/icons/flask.svg"); -} - -.ui-icon-grass { - mask-image: url("/static/icons/grass.svg"); - -webkit-mask-image: url("/static/icons/grass.svg"); -} - -.ui-icon-leaf { - mask-image: url("/static/icons/leaf.svg"); - -webkit-mask-image: url("/static/icons/leaf.svg"); -} - -.ui-icon-meat { - mask-image: url("/static/icons/meat.svg"); - -webkit-mask-image: url("/static/icons/meat.svg"); -} - -.ui-icon-powder { - mask-image: url("/static/icons/powder.svg"); - -webkit-mask-image: url("/static/icons/powder.svg"); -} - -.ui-icon-tear { - mask-image: url("/static/icons/tear.svg"); - -webkit-mask-image: url("/static/icons/tear.svg"); -} - -.ui-icon-edit { - mask-image: url("/static/icons/edit.svg"); - -webkit-mask-image: url("/static/icons/edit.svg"); -} - -.ui-icon-add { - mask-image: url("/static/icons/add.svg"); - -webkit-mask-image: url("/static/icons/add.svg"); -} - -.ui-icon-book { - mask-image: url("/static/icons/book.svg"); - -webkit-mask-image: url("/static/icons/book.svg"); -} - -.ui-icon-copy { - mask-image: url("/static/icons/copy.svg"); - -webkit-mask-image: url("/static/icons/copy.svg"); -} - -.ui-icon-calculator { - mask-image: url("/static/icons/calculator.svg"); - -webkit-mask-image: url("/static/icons/calculator.svg"); -} - -.ui-icon-clock { - mask-image: url("/static/icons/clock.svg"); - -webkit-mask-image: url("/static/icons/clock.svg"); -} - -.ui-icon-calendar { - mask-image: url("/static/icons/calendar.svg"); - -webkit-mask-image: url("/static/icons/calendar.svg"); -} - -.ui-icon-calendar-month { - mask-image: url("/static/icons/calendar-month.svg"); - -webkit-mask-image: url("/static/icons/calendar-month.svg"); -} - -.ui-icon-calendar-week { - mask-image: url("/static/icons/calendar-week.svg"); - -webkit-mask-image: url("/static/icons/calendar-week.svg"); -} - -.ui-icon-day-number { - mask-image: url("/static/icons/day-number.svg"); - -webkit-mask-image: url("/static/icons/day-number.svg"); -} - -.ui-icon-day-name { - mask-image: url("/static/icons/day-name.svg"); - -webkit-mask-image: url("/static/icons/day-name.svg"); -} - -.ui-icon-stopwatch { - mask-image: url("/static/icons/stopwatch.svg"); - -webkit-mask-image: url("/static/icons/stopwatch.svg"); -} - -.ui-icon-hourglass { - mask-image: url("/static/icons/hourglass.svg"); - -webkit-mask-image: url("/static/icons/hourglass.svg"); -} - -.ui-icon-play-circle { - mask-image: url("/static/icons/play-circle.svg"); - -webkit-mask-image: url("/static/icons/play-circle.svg"); -} - -.ui-icon-pause-circle { - mask-image: url("/static/icons/pause-circle.svg"); - -webkit-mask-image: url("/static/icons/pause-circle.svg"); -} - -.ui-icon-record-circle { - mask-image: url("/static/icons/record-circle.svg"); - -webkit-mask-image: url("/static/icons/record-circle.svg"); -} - -.ui-icon-stop-circle { - mask-image: url("/static/icons/stop-circle.svg"); - -webkit-mask-image: url("/static/icons/stop-circle.svg"); -} - -.ui-icon-map { - mask-image: url("/static/icons/map.svg"); - -webkit-mask-image: url("/static/icons/map.svg"); -} - -.ui-icon-scrollable { - mask-image: url("/static/icons/scrollable.svg"); - -webkit-mask-image: url("/static/icons/scrollable.svg"); -} - -.ui-icon-rotate { - mask-image: url("/static/icons/rotate.svg"); - -webkit-mask-image: url("/static/icons/rotate.svg"); -} - -.ui-icon-sort-time { - mask-image: url("/static/icons/sort-time.svg"); - -webkit-mask-image: url("/static/icons/sort-time.svg"); -} - -.ui-icon-sound-mute { - mask-image: url("/static/icons/sound-mute.svg"); - -webkit-mask-image: url("/static/icons/sound-mute.svg"); -} - -.ui-icon-sound-min { - mask-image: url("/static/icons/sound-min.svg"); - -webkit-mask-image: url("/static/icons/sound-min.svg"); -} - -.ui-icon-sound-max { - mask-image: url("/static/icons/sound-max.svg"); - -webkit-mask-image: url("/static/icons/sound-max.svg"); -} - -.ui-icon-toast-left { - mask-image: url("/static/icons/toast-left.svg"); - -webkit-mask-image: url("/static/icons/toast-left.svg"); -} - -.ui-icon-toast-right { - mask-image: url("/static/icons/toast-right.svg"); - -webkit-mask-image: url("/static/icons/toast-right.svg"); -} - -.ui-icon-hide { - mask-image: url("/static/icons/hide.svg"); - -webkit-mask-image: url("/static/icons/hide.svg"); -} - -.ui-icon-eye-closed { - mask-image: url("/static/icons/eye-closed.svg"); - -webkit-mask-image: url("/static/icons/eye-closed.svg"); -} - -.ui-icon-eye-open { - mask-image: url("/static/icons/eye-open.svg"); - -webkit-mask-image: url("/static/icons/eye-open.svg"); -} - -.ui-icon-chevron-down { - mask-image: url("/static/icons/chevron-down.svg"); - -webkit-mask-image: url("/static/icons/chevron-down.svg"); -} - -.ui-icon-chevron-up { - mask-image: url("/static/icons/chevron-up.svg"); - -webkit-mask-image: url("/static/icons/chevron-up.svg"); -} - -.ui-icon-drag { - mask-image: url("/static/icons/drag.svg"); - -webkit-mask-image: url("/static/icons/drag.svg"); -} - -.ui-icon-dropdown { - mask-image: url("/static/icons/dropdown.svg"); - -webkit-mask-image: url("/static/icons/dropdown.svg"); -} - -.ui-icon-flip { - mask-image: url("/static/icons/flip.svg"); - -webkit-mask-image: url("/static/icons/flip.svg"); -} - -.ui-icon-rows { - mask-image: url("/static/icons/rows.svg"); - -webkit-mask-image: url("/static/icons/rows.svg"); -} - -.ui-icon-columns { - mask-image: url("/static/icons/columns.svg"); - -webkit-mask-image: url("/static/icons/columns.svg"); -} - -.ui-icon-add-row { - mask-image: url("/static/icons/add-row.svg"); - -webkit-mask-image: url("/static/icons/add-row.svg"); -} - -.ui-icon-add-column { - mask-image: url("/static/icons/add-column.svg"); - -webkit-mask-image: url("/static/icons/add-column.svg"); -} - -.ui-icon-remove-row { - mask-image: url("/static/icons/remove-row.svg"); - -webkit-mask-image: url("/static/icons/remove-row.svg"); -} - -.ui-icon-remove-column { - mask-image: url("/static/icons/remove-column.svg"); - -webkit-mask-image: url("/static/icons/remove-column.svg"); -} - -.ui-icon-table { - mask-image: url("/static/icons/table.svg"); - -webkit-mask-image: url("/static/icons/table.svg"); -} - -.ui-icon-close { - mask-image: url("/static/icons/close.svg"); - -webkit-mask-image: url("/static/icons/close.svg"); -} - -.ui-icon-rubber { - mask-image: url("/static/icons/rubber.svg"); - -webkit-mask-image: url("/static/icons/rubber.svg"); -} - -.ui-icon-refresh { - mask-image: url("/static/icons/refresh.svg"); - -webkit-mask-image: url("/static/icons/refresh.svg"); -} - -.ui-icon-parent { - mask-image: url("/static/icons/parent.svg"); - -webkit-mask-image: url("/static/icons/parent.svg"); -} - -.ui-icon-back { - mask-image: url("/static/icons/back.svg"); - -webkit-mask-image: url("/static/icons/back.svg"); -} - -.ui-icon-fist { - mask-image: url("/static/icons/fist.svg"); - -webkit-mask-image: url("/static/icons/fist.svg"); -} - -.ui-icon-foot { - mask-image: url("/static/icons/foot.svg"); - -webkit-mask-image: url("/static/icons/foot.svg"); -} - -.ui-icon-boot { - mask-image: url("/static/icons/boot.svg"); - -webkit-mask-image: url("/static/icons/boot.svg"); -} - -.ui-icon-chest-armor { - mask-image: url("/static/icons/chest-armor.svg"); - -webkit-mask-image: url("/static/icons/chest-armor.svg"); -} - -.ui-icon-helmet { - mask-image: url("/static/icons/helmet.svg"); - -webkit-mask-image: url("/static/icons/helmet.svg"); -} - -.ui-icon-glove { - mask-image: url("/static/icons/glove.svg"); - -webkit-mask-image: url("/static/icons/glove.svg"); -} - -.ui-icon-grab { - mask-image: url("/static/icons/grab.svg"); - -webkit-mask-image: url("/static/icons/grab.svg"); -} - -.ui-icon-sword { - mask-image: url("/static/icons/sword.svg"); - -webkit-mask-image: url("/static/icons/sword.svg"); -} - -.ui-icon-shield { - mask-image: url("/static/icons/shield.svg"); - -webkit-mask-image: url("/static/icons/shield.svg"); -} - -.ui-icon-gun { - mask-image: url("/static/icons/gun.svg"); - -webkit-mask-image: url("/static/icons/gun.svg"); -} - -.ui-icon-earring { - mask-image: url("/static/icons/earring.svg"); - -webkit-mask-image: url("/static/icons/earring.svg"); -} - -.ui-icon-necklace { - mask-image: url("/static/icons/necklace.svg"); - -webkit-mask-image: url("/static/icons/necklace.svg"); -} - -.ui-icon-ring { - mask-image: url("/static/icons/ring.svg"); - -webkit-mask-image: url("/static/icons/ring.svg"); -} - -.ui-icon-hammer { - mask-image: url("/static/icons/hammer.svg"); - -webkit-mask-image: url("/static/icons/hammer.svg"); -} - -.ui-icon-jewel { - mask-image: url("/static/icons/jewel.svg"); - -webkit-mask-image: url("/static/icons/jewel.svg"); -} - -.ui-icon-ball { - mask-image: url("/static/icons/ball.svg"); - -webkit-mask-image: url("/static/icons/ball.svg"); -} - -.ui-icon-trash { - mask-image: url("/static/icons/trashcan.svg"); - -webkit-mask-image: url("/static/icons/trashcan.svg"); -} - -.ui-icon-trashcan-one { - mask-image: url("/static/icons/trashcan-one.svg"); - -webkit-mask-image: url("/static/icons/trashcan-one.svg"); -} - -.game-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: var(--space-4); - margin-top: var(--space-6); -} +// Rôle : orchestre les familles d'icônes SVG masquées. +@use "icons/base"; +@use "icons/navigation"; +@use "icons/toolbox"; +@use "icons/actions"; +@use "icons/equipment"; diff --git a/website/src/styles/_overlays.scss b/website/src/styles/_overlays.scss index b110110..bf60058 100644 --- a/website/src/styles/_overlays.scss +++ b/website/src/styles/_overlays.scss @@ -1,536 +1,6 @@ -// Rôle : regroupe les styles des modales, viewers et notifications. -.image-viewer-root { - position: fixed; - inset: 0; - z-index: 110; - display: grid; - place-items: center; - padding: var(--space-5); - overscroll-behavior: contain; -} - -.image-viewer-backdrop { - position: absolute; - inset: 0; - background: rgba(2, 3, 9, 0.64); - backdrop-filter: blur(4px); -} - -.image-viewer { - --viewer-content-max-height: min(80vh, calc(100vh - 140px)); - --viewer-image-height: 400px; - position: relative; - display: grid; - width: min(1500px, calc(100vw - 32px)); - max-height: calc(100vh - 48px); - gap: var(--space-4); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--radius-xl); - background: rgba(16, 20, 38, 0.96); - box-shadow: var(--shadow-lg); -} - -.image-viewer header { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - gap: var(--space-2); -} - -.image-viewer-title { - overflow: hidden; - color: var(--color-text); - font-size: var(--font-size-md); - text-overflow: ellipsis; - white-space: nowrap; -} - -.image-viewer-actions { - display: flex; - justify-content: flex-end; - gap: var(--space-2); -} - -.image-viewer-button { - flex: 0 0 40px; -} - -.image-viewer-body { - display: grid; - min-width: 0; - justify-items: center; -} - -.image-viewer-body.has-annotation-side { - grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); - gap: var(--space-4); - align-items: start; - justify-items: stretch; -} - -.image-viewer-media { - display: flex; - min-width: 0; - max-width: 100%; - justify-self: center; - justify-content: center; - align-items: start; -} - -.image-viewer-media.can-annotate { - cursor: crosshair; -} - -.image-viewer-image-frame { - position: relative; - display: block; - width: fit-content; - max-width: 100%; - overflow: hidden; - border-radius: var(--radius-md); - line-height: 0; -} - -.image-viewer-image-frame img { - display: block; - width: auto; - height: auto; - max-width: 100%; - max-height: var(--viewer-content-max-height); - object-fit: contain; -} - -.image-viewer-marker { - z-index: 3; - display: inline-grid; - width: 30px; - min-width: 30px; - height: 30px; - min-height: 30px; - place-items: center; - padding: 0; - border: 1px solid rgba(246, 196, 83, 0.72); - border-radius: var(--radius-pill); - background: - linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.9), rgba(196, 181, 253, 0.5)) border-box; - color: #fff; - font-size: var(--font-size-xs); - font-weight: 900; - line-height: 1; - box-shadow: - 0 0 0 2px rgba(5, 7, 17, 0.72), - 0 0 16px rgba(246, 196, 83, 0.22); - pointer-events: none; -} - -.image-viewer-side { - display: grid; - align-content: start; - grid-template-rows: auto auto; - gap: var(--space-3); - min-width: 0; - width: 100%; - max-width: 340px; - height: min(var(--viewer-image-height), var(--viewer-content-max-height)); - max-height: min(var(--viewer-image-height), var(--viewer-content-max-height)); - overflow: hidden; - padding: 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%), - rgba(7, 10, 24, 0.38); -} - -.image-viewer-side strong { - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.image-viewer-side .annotation-marker-list { - min-width: 0; - max-height: 100%; - align-content: start; - grid-auto-rows: max-content; - overflow-y: auto; - overscroll-behavior: contain; - padding: 4px 4px 4px 0; -} - -.drawer[aria-hidden="true"] { - display: none; -} - -.drawer-backdrop { - position: fixed; - inset: 0; - z-index: 40; - background: rgba(2, 3, 9, 0.24); - backdrop-filter: none; -} - -.drawer-panel { - position: fixed; - inset: 0 0 0 auto; - z-index: 50; - width: min(720px, 94vw); - min-width: 360px; - max-width: 94vw; - overflow: auto; - border-left: 0; - background: - linear-gradient( - 180deg, - rgba(246, 196, 83, 0.92), - rgba(139, 92, 246, 0.64) 48%, - rgba(196, 181, 253, 0.72) - ) left top / 1px 100% no-repeat, - rgba(7, 9, 19, 0.82); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - box-shadow: - inset 8px 0 18px rgba(139, 92, 246, 0.08), - var(--shadow-lg); - padding: var(--space-5); -} - -.drawer-panel::before { - content: none; -} - -.drawer-content { - position: relative; - display: flex; - min-height: 100%; - flex-direction: column; - gap: var(--space-4); -} - -.drawer-resize-handle { - position: fixed; - top: 50%; - right: calc(var(--drawer-panel-width, min(720px, 94vw)) - 18px); - z-index: 62; - width: 14px; - height: 72px; - border-radius: var(--radius-pill); - cursor: ew-resize; - transform: translateY(-50%); -} - -.drawer-resize-handle::before { - content: ""; - position: absolute; - top: 0; - left: 5px; - width: 4px; - height: 100%; - border-radius: inherit; - background: var(--gradient-brand); - opacity: 0.72; -} - -body.is-resizing-drawer, -body.is-resizing-drawer * { - cursor: ew-resize !important; - user-select: none; -} - -.drawer-panel > .drawer-content > header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-4); - margin-bottom: var(--space-3); -} - -.drawer-toolbox-actions { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); - margin-top: var(--space-3); -} - -.drawer-action-button { - display: inline-flex; -} - -.drawer-action-button:disabled { - color: var(--color-text-disabled); - cursor: not-allowed; - opacity: 0.56; -} - -.drawer-close-button { - flex: 0 0 40px; -} - -.drawer-panel .modules { - grid-template-columns: 1fr; -} - -.confirm-modal-root { - position: fixed; - inset: 0; - z-index: 100; - display: grid; - place-items: center; - padding: var(--space-5); - overscroll-behavior: contain; -} - -.tool-add-modal-root { - position: fixed; - inset: 0; - z-index: 130; - display: grid; - place-items: center; - padding: var(--space-5); - overscroll-behavior: contain; -} - -.confirm-backdrop { - position: absolute; - inset: 0; - background: rgba(2, 3, 9, 0.62); - backdrop-filter: blur(6px); -} - -.confirm-modal { - position: relative; - width: min(520px, calc(100vw - 32px)); - max-height: calc(100vh - 48px); - overflow: auto; - border: 1px solid var(--color-border); - border-radius: var(--radius-xl); - background: rgba(16, 20, 38, 0.96); - box-shadow: var(--shadow-lg); - padding: var(--space-5); -} - -.confirm-modal h2 { - margin-bottom: var(--space-3); -} - -.confirm-modal p { - margin-bottom: var(--space-6); -} - -.confirm-modal footer { - display: flex; - justify-content: flex-end; - gap: 10px; -} - -@property --notification-toast-angle { - syntax: ""; - inherits: false; - initial-value: 0deg; -} - -.notification-toast-stack { - position: fixed; - bottom: var(--space-5); - z-index: 360; - display: flex; - max-width: min(460px, calc(100vw - 32px)); - flex-direction: column-reverse; - gap: var(--space-3); - pointer-events: none; -} - -.notification-toast-stack.is-right { - right: var(--space-5); -} - -.notification-toast-stack.is-left { - left: var(--space-5); -} - -.notification-toast { - --notification-toast-angle: 0deg; - display: grid; - grid-template-columns: minmax(0, 1fr) 34px; - align-items: center; - gap: var(--space-3); - width: 100%; - min-width: min(360px, calc(100vw - 32px)); - padding: 14px 14px 14px 18px; - border: 2px solid transparent; - border-radius: var(--radius-lg); - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.12), transparent 38%) padding-box, - linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(24, 20, 42, 0.98)) padding-box, - conic-gradient( - from var(--notification-toast-angle), - rgba(246, 196, 83, 0.95), - rgba(139, 92, 246, 0.8), - rgba(56, 189, 248, 0.62), - rgba(246, 196, 83, 0.95) - ) border-box; - color: var(--color-text-primary); - box-shadow: - var(--shadow-md), - 0 0 24px rgba(139, 92, 246, 0.22), - 0 0 18px rgba(246, 196, 83, 0.1); - font-size: var(--font-size-md); - font-weight: 900; - pointer-events: auto; - animation: - notification-toast-enter-right 320ms var(--ease-standard), - notification-toast-border-spin 2.4s linear infinite, - notification-toast-pulse 1.8s ease-in-out infinite; -} - -.notification-toast-stack.is-left .notification-toast { - animation: - notification-toast-enter-left 320ms var(--ease-standard), - notification-toast-border-spin 2.4s linear infinite, - notification-toast-pulse 1.8s ease-in-out infinite; -} - -.notification-toast span { - min-width: 0; -} - -.notification-toast button { - display: inline-grid; - width: 34px; - min-width: 34px; - min-height: 34px; - place-items: center; - padding: 0; - border-color: rgba(165, 180, 252, 0.12); - background: rgba(5, 7, 17, 0.28); - color: var(--color-text-secondary); -} - -.notification-toast button:hover { - border-color: rgba(196, 181, 253, 0.26); - background: rgba(21, 26, 48, 0.72); - color: var(--color-text-primary); -} - -.notification-toast button .ui-icon { - width: 16px; - height: 16px; -} - -@keyframes notification-toast-border-spin { - to { --notification-toast-angle: 360deg; } -} - -@keyframes notification-toast-enter-right { - from { - opacity: 0; - transform: translateX(calc(100% + var(--space-5))); - } - - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes notification-toast-enter-left { - from { - opacity: 0; - transform: translateX(calc(-100% - var(--space-5))); - } - - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes notification-toast-pulse { - 0%, - 100% { - box-shadow: - var(--shadow-md), - 0 0 24px rgba(139, 92, 246, 0.22), - 0 0 18px rgba(246, 196, 83, 0.1); - } - - 50% { - box-shadow: - var(--shadow-md), - 0 0 34px rgba(139, 92, 246, 0.3), - 0 0 26px rgba(246, 196, 83, 0.18); - } -} - -.tool-add-modal { - width: min(560px, calc(100vw - 32px)); -} - -.tool-add-modal header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-4); - margin-bottom: var(--space-4); -} - -.tool-add-modal h2 { - margin: 0; -} - -.tool-add-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: var(--space-3); -} - -.tool-add-card { - display: grid; - height: 98px; - min-width: 0; - align-content: center; - justify-items: center; - gap: 8px; - padding: var(--space-3); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.72); - text-align: center; -} - -.tool-add-card span:last-child { - width: 100%; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.tool-add-card .module-icon { - flex: 0 0 34px; -} - -.tool-add-card:hover { - border-color: var(--color-border-hover); - background: var(--color-bg-hover); - transform: translateY(-1px); -} - -.toolbox-create-modal form, -.toolbox-link-modal form { - display: grid; - gap: var(--space-4); -} - -.toolbox-create-modal .field, -.toolbox-link-modal .field { - padding: 0; -} - -.confirm-danger { - border-color: rgba(251, 113, 133, 0.34); - background: var(--color-danger); - color: #fff; - font-weight: 700; -} +// Rôle : orchestre les styles des viewers, drawers, modales et notifications. +@use "overlays/image-viewer"; +@use "overlays/drawers"; +@use "overlays/modals"; +@use "overlays/notifications"; +@use "overlays/tool-add"; diff --git a/website/src/styles/home/_about.scss b/website/src/styles/home/_about.scss index c401e86..be38aab 100644 --- a/website/src/styles/home/_about.scss +++ b/website/src/styles/home/_about.scss @@ -1,510 +1,6 @@ -// Rôle : gère les sections à propos, valeurs et rappels éditoriaux. - -.about-page { - display: grid; - gap: var(--space-6); -} - -.about-onboarding-section { - margin-top: 0; -} - -.about-story-section { - display: grid; - gap: var(--space-5); - align-items: start; - padding: var(--space-6); -} - -.about-story-section .about-section-heading { - position: static; - max-width: 860px; -} - -.about-section-heading { - position: sticky; - top: var(--space-5); -} - -.about-section-heading h2 { - margin-bottom: 0; -} - -.about-section-heading .about-contribute-illustration { - margin-top: var(--space-6); -} - -.about-story-list { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - justify-content: center; - width: 100%; - gap: var(--space-4); - margin-inline: auto; -} - -.about-story-item { - display: grid; - grid-template-rows: auto 1fr; - gap: var(--space-3); - align-items: stretch; - min-width: 0; - overflow: hidden; - padding: var(--space-4); - border: 1px solid rgba(150, 165, 205, 0.12); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent 42%), - rgba(16, 20, 38, 0.36); -} - -.about-story-body { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: var(--space-4); - align-items: center; - min-width: 0; -} - -.about-story-body > div { - display: grid; - align-content: center; - gap: 10px; - min-height: 210px; - padding-block: var(--space-4); -} - -.about-story-item h3 { - display: flex; - align-items: center; - gap: 10px; - min-width: 0; - margin: 0; - padding: 0 0 var(--space-3); - border-bottom: 1px solid rgba(246, 196, 83, 0.12); - color: var(--color-text-primary); - font-size: var(--font-size-base); -} - -.about-story-item h3 .module-icon { - width: 30px; - height: 30px; - flex: 0 0 30px; - border: 1px solid rgba(246, 196, 83, 0.24); - border-radius: var(--radius-sm); - background: rgba(246, 196, 83, 0.09); -} - -.about-story-item h3 .module-icon-svg { - width: 16px; - height: 16px; -} - -.about-story-body p { - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - line-height: 1.58; -} - -.about-story-bullets { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 4px var(--space-4); - margin: 0; - padding-left: 1.15rem; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - line-height: 1.5; -} - -.about-story-bullets li { - padding-left: 2px; -} - -.about-story-bullets li::marker { - color: var(--color-accent-gold); -} - -.about-story-bullets.single-column { - grid-template-columns: 1fr; -} - -.about-story-warning { - display: flex; - align-items: flex-start; - gap: 7px; - color: var(--color-warning); - font-size: var(--font-size-xs); - font-weight: 500; - line-height: 1.5; -} - -.about-story-warning .ui-icon { - width: 15px; - min-width: 15px; - height: 15px; - margin-top: 1px; - color: var(--color-warning); - opacity: 0.88; -} - -.about-story-visual { - display: grid; - min-height: 230px; - place-items: center; - overflow: hidden; - border: 1px solid rgba(246, 196, 83, 0.12); - border-radius: var(--radius-md); - background: - radial-gradient(circle at center, rgba(139, 92, 246, 0.28), transparent 60%), - radial-gradient(circle at 24% 18%, rgba(246, 196, 83, 0.1), transparent 36%), - rgba(5, 7, 17, 0.18); -} - -.about-story-illustration { - display: block; - width: min(96%, 340px); - max-height: 250px; - object-fit: contain; - opacity: 0.94; - filter: saturate(1.02) brightness(1.02) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.32)); -} - -.about-tools-section { - display: grid; - gap: var(--space-4); - padding: var(--space-6); -} - -.about-tools-section .page-heading p:not(.eyebrow) { - max-width: 780px; - margin: 8px 0 0; - color: var(--color-text-secondary); - line-height: 1.56; -} - -.about-contribute-section { - display: grid; - grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); - gap: var(--space-6); - align-items: stretch; - scroll-margin-top: var(--space-6); - padding: var(--space-6); -} - -.about-contribute-section .about-section-heading { - display: grid; - grid-template-rows: auto 1fr; - align-self: stretch; -} - -.about-contribute-content { - display: grid; - gap: var(--space-4); -} - -.about-contribute-content > p { - max-width: 112ch; - margin: 0; - color: var(--color-text-secondary); - line-height: 1.62; -} - -.about-contribute-blocks { - display: grid; - gap: var(--space-4); -} - -.about-contribute-block { - display: grid; - grid-template-columns: 30px minmax(0, 1fr); - gap: 12px; - align-items: start; - min-width: 0; -} - -.about-contribute-block .module-icon { - width: 28px; - height: 28px; - border: 1px solid rgba(246, 196, 83, 0.22); - border-radius: var(--radius-sm); - background: rgba(246, 196, 83, 0.09); -} - -.about-contribute-block .module-icon-svg { - width: 15px; - height: 15px; -} - -.about-contribute-block h3 { - margin: 0 0 6px; - color: var(--color-text-primary); - font-size: var(--font-size-sm); -} - -.about-contribute-block p { - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - line-height: 1.5; -} - -.about-contribute-block ul { - display: grid; - gap: 4px; - margin: 10px 0 0; - padding-left: 1.15rem; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - line-height: 1.45; -} - -.about-contribute-block li::marker { - color: var(--color-accent-gold); -} - -.about-contribute-block .about-contribute-note { - margin-top: var(--space-3); - color: var(--color-text-muted); - font-size: var(--font-size-xs); - line-height: 1.45; -} - -.about-contribute-content pre, -.about-prompt-box, -.about-code-example { - margin: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.28); -} - -.about-contribute-content pre { - overflow: auto; - padding: var(--space-4); - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -.about-contribute-formats { - display: grid; - grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.36fr); - gap: var(--space-4); - align-items: stretch; - margin-top: var(--space-3); -} - -.about-code-example { - display: grid; - grid-template-rows: auto 1fr; - overflow: hidden; - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 45%), - rgba(5, 7, 17, 0.32); -} - -.about-code-example > p { - margin: 0; - padding: 8px var(--space-3); - border-bottom: 1px solid rgba(246, 196, 83, 0.14); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 800; - line-height: 1.4; -} - -.about-code-example pre { - border: 0; - border-radius: 0; - background: transparent; - padding: var(--space-3); -} - -.about-contribute-illustration { - display: block; - width: min(100%, 260px); - max-height: 420px; - object-fit: contain; - filter: saturate(1.05) brightness(1.04) drop-shadow(0 26px 38px rgba(0, 0, 0, 0.36)); -} - -.about-section-heading .about-contribute-illustration { - width: min(100%, 300px); - max-height: 520px; - align-self: center; - margin-top: var(--space-6); - object-fit: contain; - opacity: 0.94; - filter: saturate(1.02) brightness(0.99) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.32)); -} - -.about-contribute-content code { - color: var(--color-text-primary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; - font-size: var(--font-size-sm); - line-height: 1.55; - white-space: inherit; -} - -.about-prompt-box { - display: grid; - align-content: start; - padding: var(--space-4); -} - -.about-prompt-box h3 { - margin: 0 0 8px; - color: var(--color-accent-gold); - font-size: var(--font-size-md); -} - -.about-prompt-box p { - margin: 0 0 var(--space-3); - color: var(--color-text-secondary); - line-height: 1.58; -} - -.about-prompt-box pre { - border-color: rgba(246, 196, 83, 0.16); - background: rgba(5, 7, 17, 0.34); -} - -.about-tools-list { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0 var(--space-6); -} - -.about-tool-item { - display: grid; - grid-template-columns: 38px minmax(0, 1fr); - gap: 12px; - align-items: start; - padding: 14px 0; - border-bottom: 1px solid rgba(165, 180, 252, 0.1); -} - -.about-tool-item:nth-last-child(-n + 2) { - border-bottom: 0; -} - -.about-tool-item .module-icon { - width: 34px; - height: 34px; - flex: 0 0 34px; - border-radius: var(--radius-md); -} - -.about-tool-item .module-icon-svg { - width: 18px; - height: 18px; -} - -.about-tool-item h3 { - margin: 0 0 4px; - color: var(--color-text-primary); - font-size: var(--font-size-base); -} - -.about-tool-item p { - margin: 0; - font-size: var(--font-size-sm); - line-height: 1.5; -} - -.about-tool-examples { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin: 10px 0 0; - padding: 0; - list-style: none; -} - -.about-tool-examples li { - padding: 4px 8px; - border: 1px solid rgba(246, 196, 83, 0.18); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.about-tools-library-button { - display: flex; - width: fit-content; - min-width: min(100%, 300px); - align-items: center; - justify-content: center; - justify-self: center; - margin-top: var(--space-2); -} - -.about-storage-reminders { - display: grid; - gap: var(--space-3); - margin-top: var(--space-2); - padding: var(--space-5); - border: 1px solid rgba(246, 196, 83, 0.16); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.24); -} - -.about-storage-reminders .eyebrow { - margin: 0; - color: var(--color-accent-gold); -} - -.about-reminders-list { - display: grid; - grid-template-columns: repeat(4, minmax(0, 260px)); - justify-content: center; - gap: var(--space-4); - margin: 0; - padding: 0; - list-style: none; -} - -.about-reminder-item { - display: grid; - gap: 10px; - min-width: 0; - padding: var(--space-3); - border: 1px solid rgba(150, 165, 205, 0.1); - border-radius: var(--radius-sm); - background: rgba(16, 20, 38, 0.34); -} - -.about-reminder-heading { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; -} - -.about-reminder-item .module-icon { - width: 30px; - height: 30px; - flex: 0 0 30px; - border: 1px solid rgba(246, 196, 83, 0.26); - border-radius: var(--radius-sm); - background: rgba(246, 196, 83, 0.1); -} - -.about-reminder-item h4 { - margin: 0; - color: var(--color-text-primary); - font-size: var(--font-size-xs); - line-height: 1.25; -} - -.about-reminder-item p { - max-width: none; - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - line-height: 1.45; -} - +// Rôle : orchestre les sections à propos, contribution et rappels. +@use "about/page"; +@use "about/story"; +@use "about/contribute"; +@use "about/tools"; +@use "about/reminders"; diff --git a/website/src/styles/home/_library.scss b/website/src/styles/home/_library.scss index 2b0937d..3c269b9 100644 --- a/website/src/styles/home/_library.scss +++ b/website/src/styles/home/_library.scss @@ -1,618 +1,7 @@ -// Rôle : gère les styles de la librairie et des aperçus d’outils. -@use "../mixins"; - -.library-page { - display: grid; - gap: var(--space-6); -} - -.library-hero { - min-height: 220px; -} - -.library-summary { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: var(--space-4); - padding: var(--space-5); -} - -.library-summary article { - display: flex; - min-width: 0; - gap: var(--space-3); - padding: var(--space-4); - border: 1px solid rgba(150, 165, 205, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.28); -} - -.library-summary h2, -.library-summary p { - margin: 0; -} - -.library-summary h2 { - margin-bottom: 5px; - font-size: var(--font-size-md); -} - -.library-summary-icon { - display: grid; - width: 34px; - min-width: 34px; - height: 34px; - place-items: center; - border: 1px solid rgba(196, 181, 253, 0.24); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(139, 92, 246, 0.92), rgba(99, 102, 241, 0.84)); - box-shadow: var(--shadow-primary); - color: white; -} - -.library-summary-icon .module-icon-svg { - width: 18px; - height: 18px; - background: currentColor; -} - -.library-doc-layout { - display: grid; - grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); - align-items: start; - gap: var(--space-5); -} - -.library-doc-nav { - display: grid; - gap: var(--space-4); - padding: var(--space-4); - scroll-margin-top: var(--space-5); -} - -.library-toc-heading { - display: grid; - gap: 4px; - min-width: 0; -} - -.library-toc-heading h2, -.library-toc-heading p { - margin: 0; -} - -.library-toc-heading h2 { - color: var(--color-text-primary); - font-size: var(--font-size-lg); -} - -.library-toc-heading p { - max-width: 620px; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.library-doc-nav-groups { - display: grid; - gap: var(--space-4); -} - -.library-doc-nav-group { - display: grid; - gap: 8px; -} - -.library-doc-nav-group > a { - color: var(--color-text-primary); - font-size: var(--font-size-sm); - font-weight: 800; - text-decoration: none; -} - -.library-doc-nav-group > a:hover, -.library-doc-nav-group > a:focus-visible { - color: var(--color-accent-gold); -} - -.library-doc-nav-group.active > a { - color: var(--color-accent-gold); -} - -.library-doc-nav-group ul { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.library-doc-nav-group li { - min-width: 0; -} - -.library-doc-nav-group li a { - display: grid; - grid-template-columns: 28px minmax(0, 1fr); - min-height: 36px; - align-items: center; - gap: 8px; - padding: 4px 8px 4px 4px; - border: 1px solid rgba(150, 165, 205, 0.1); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.22); - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 700; - text-decoration: none; -} - -.library-doc-nav-group li a:hover, -.library-doc-nav-group li a:focus-visible { - border-color: rgba(246, 196, 83, 0.36); - background: rgba(246, 196, 83, 0.08); - color: var(--color-text-primary); -} - -.library-doc-nav-group .module-icon { - width: 28px; - height: 28px; - border-radius: var(--radius-sm); -} - -.library-doc-nav-group .module-icon-svg { - width: 16px; - height: 16px; -} - -.library-tools { - display: grid; - gap: var(--space-6); - justify-items: stretch; -} - -.library-tool-category { - display: grid; - gap: var(--space-5); - min-width: 0; - scroll-margin-top: var(--space-8); -} - -.library-tool-section { - position: relative; - display: grid; - width: 100%; - min-width: 0; - gap: var(--space-4); - overflow: hidden; - padding: var(--space-5); - border: 1px solid transparent; - border-radius: var(--radius-lg); - background: rgba(16, 20, 38, 0.42); - box-shadow: var(--shadow-sm); - scroll-margin-top: var(--space-8); - - @include mixins.gold-panel-frame; -} - -.library-tool-section > * { - position: relative; - z-index: 1; -} - -.library-category-hero { - position: relative; - isolation: isolate; - display: block; - overflow: hidden; - padding: var(--space-6); - border: 1px solid transparent; - border-radius: var(--radius-lg); - background: - radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.12), transparent 30%), - var(--gradient-nebula), - linear-gradient(135deg, rgba(16, 20, 38, 0.9), rgba(5, 7, 17, 0.88)); - box-shadow: var(--shadow-sm); - - @include mixins.gold-panel-frame; -} - -.library-category-hero > * { - position: relative; - z-index: 1; -} - -.library-category-hero h2, -.library-category-hero p { - margin: 0; -} - -.library-category-hero h2 { - margin-bottom: var(--space-3); - color: var(--color-text-primary); - font-size: clamp(1.7rem, 3vw, var(--font-size-3xl)); - line-height: 1.05; -} - -.library-category-hero p:not(.eyebrow) { - max-width: 760px; -} - -.library-tool-intro { - min-width: 0; -} - -.library-tool-title-row { - display: flex; - min-width: 0; - align-items: center; - gap: var(--space-3); - margin-bottom: var(--space-2); -} - -.library-tool-title-row .module-icon { - width: 36px; - height: 36px; -} - -.library-tool-title-row .module-icon-svg { - width: 20px; - height: 20px; -} - -.library-tool-intro h2 { - margin: 0; -} - -.library-tool-intro p { - margin: 0; -} - -.library-tool-intro h2 { - font-size: var(--font-size-xl); -} - -.library-tool-intro p { - max-width: 860px; -} - -.library-example-layout { - display: grid; - grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); - align-items: start; - justify-content: stretch; - gap: var(--space-4); -} - -.library-example-layout:not(.has-legend) { - grid-template-columns: minmax(0, 860px); - justify-content: center; -} - -.library-tool-docs { - display: block; -} - -.library-control-legend, -.library-tool-feature-list { - min-width: 0; - border: 1px solid rgba(150, 165, 205, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.28); -} - -.library-control-legend { - display: grid; - align-content: start; - gap: var(--space-3); - padding: var(--space-3); - border-color: rgba(246, 196, 83, 0.22); - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 34%), - rgba(5, 7, 17, 0.46); -} - -.library-control-legend h3, -.library-tool-feature-list h3 { - margin: 0; - color: var(--color-text-primary); - font-size: var(--font-size-md); -} - -.library-control-legend-group { - display: grid; - gap: var(--space-2); - min-width: 0; - padding: var(--space-2); - border: 1px solid rgba(150, 165, 205, 0.1); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.28); -} - -.library-control-legend-group.is-generic-single { - padding: 0; - border: 0; - background: transparent; -} - -.library-control-legend-group h4 { - margin: 0; - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; - text-transform: uppercase; -} - -.library-control-legend-items { - display: grid; - gap: 6px; - min-width: 0; -} - -.library-control-legend-item { - display: grid; - grid-template-columns: minmax(34px, max-content) minmax(0, 1fr); - align-items: center; - gap: var(--space-2); - min-width: 0; -} - -.library-control-preview { - display: inline-flex; - width: fit-content; - max-width: 100%; - min-height: 34px; - align-items: center; - flex-wrap: wrap; - gap: 6px; - pointer-events: none; -} - -.library-control-preview.notepad-toolbar-group { - flex-wrap: nowrap; - padding-right: 0; - border-right: 0; -} - -.library-control-preview-stack { - display: inline-grid; - gap: 6px; - justify-items: start; -} - -.library-control-preview-row { - display: inline-flex; - gap: 6px; -} - -.library-control-preview .notepad-toolbar-button, -.library-control-preview .drawing-control-button, -.library-control-preview .notepad-color-toggle, -.library-control-preview .drawing-width-toggle, -.library-control-preview .module-scroll-button { - cursor: default; -} - -.library-control-preview .notepad-toolbar-button.is-wide { - width: auto; - min-width: 46px; - padding: 0 9px; -} - -.library-control-preview .notepad-color-toggle.active, -.library-control-preview .drawing-width-toggle.active { - border-color: rgba(246, 196, 83, 0.48); - background: rgba(246, 196, 83, 0.1); - color: var(--color-accent-gold); -} - -.library-control-preview .module-scroll-button { - min-height: 34px; -} - -.library-control-legend-item strong { - display: block; - color: var(--color-text-primary); - font-size: var(--font-size-sm); - line-height: 1.2; -} - -.library-control-legend-item p { - margin: 3px 0 0; - font-size: var(--font-size-xs); - line-height: 1.35; -} - -.library-tool-feature-list { - display: grid; - overflow: hidden; - padding: 0; - border-color: rgba(246, 196, 83, 0.18); - border-radius: var(--radius-md); - background: - linear-gradient(135deg, rgba(16, 20, 38, 0.52), rgba(5, 7, 17, 0.36)), - rgba(5, 7, 17, 0.3); -} - -.library-tool-advanced-list { - border-color: rgba(34, 211, 238, 0.16); -} - -.library-tool-feature-list summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-3); - padding: var(--space-4); - cursor: pointer; - list-style: none; -} - -.library-tool-feature-list summary::-webkit-details-marker { - display: none; -} - -.library-tool-feature-list summary .ui-icon { - width: 18px; - height: 18px; - flex: 0 0 auto; - color: var(--color-text-secondary); - transition: transform var(--duration-fast) var(--ease-standard); -} - -.library-tool-feature-list[open] summary .ui-icon { - transform: rotate(180deg); -} - -.library-tool-feature-content { - display: grid; - gap: var(--space-4); - padding: 0 var(--space-5) var(--space-5); -} - -.library-tool-feature-list dl { - display: grid; - gap: var(--space-3); - margin: 0; -} - -.library-tool-feature-list dl > div { - display: grid; - grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr); - gap: var(--space-3); - padding: var(--space-3); - border: 1px solid rgba(150, 165, 205, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.28); -} - -.library-tool-feature-list dt { - color: var(--color-text-primary); - font-size: var(--font-size-sm); - font-weight: 800; -} - -.library-tool-feature-list dd { - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.library-tool-feature-list dd p { - margin: 0; -} - -.library-tool-feature-list dd ul { - display: grid; - gap: 6px; - margin: var(--space-2) 0 0; - padding-left: 1.1rem; -} - -.library-tool-feature-list dd li { - color: var(--color-text-secondary); -} - -.library-tool-import-format { - display: grid; - gap: var(--space-2); -} - -.library-tool-import-format p { - margin: 0; -} - -.library-tool-import-format pre { - max-width: 100%; - margin: 0; - padding: var(--space-3); - overflow: auto; - border: 1px solid rgba(150, 165, 205, 0.12); - border-radius: var(--radius-sm); - background: rgba(2, 3, 9, 0.42); - color: var(--color-text-primary); - font-size: var(--font-size-sm); - white-space: pre-wrap; -} - -.library-tool-import-example { - display: grid; - gap: var(--space-2); -} - -.library-tool-import-example button { - display: inline-flex; - align-items: center; - justify-self: end; - gap: 8px; - width: fit-content; - min-height: 38px; - padding-inline: var(--space-3); -} - -.library-tool-import-example .ui-icon { - width: 16px; - height: 16px; -} - -.library-tool-badge { - display: inline-flex; - width: fit-content; - margin-bottom: var(--space-3); - padding: 4px 9px; - border: 1px solid rgba(246, 196, 83, 0.24); - 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: 800; -} - -.library-tool-example { - width: min(100%, 860px); - min-width: 0; - justify-self: center; -} - -.library-tool-example header > div { - min-width: 0; -} - -.library-tool-example header p { - margin: 3px 0 0; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-weight: 700; - text-transform: uppercase; -} - -.library-example-actions { - display: flex; - flex: 0 0 auto; - gap: 8px; -} - -.library-reset-button { - display: inline-grid; - width: 40px; - min-width: 40px; - min-height: 40px; - flex: 0 0 40px; - place-items: center; - padding: 0; -} - -.library-reset-button .ui-icon { - width: 16px; - height: 16px; -} - -.library-tool-example .module-content { - padding: var(--space-4); -} - -.library-tool-example .image-annotation-stage, -.library-tool-example .images-grid img { - max-height: 260px; -} - +// Rôle : orchestre les styles de la librairie et des aperçus d'outils. +@use "library/page"; +@use "library/summary"; +@use "library/toc"; +@use "library/tool-cards"; +@use "library/examples"; +@use "library/previews"; diff --git a/website/src/styles/home/about/_contribute.scss b/website/src/styles/home/about/_contribute.scss new file mode 100644 index 0000000..b2447e2 --- /dev/null +++ b/website/src/styles/home/about/_contribute.scss @@ -0,0 +1,186 @@ +// Rôle : gère les blocs de contribution, prompts et exemples de code. +.about-contribute-section { + display: grid; + grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); + gap: var(--space-6); + align-items: stretch; + scroll-margin-top: var(--space-6); + padding: var(--space-6); +} + +.about-contribute-section .about-section-heading { + display: grid; + grid-template-rows: auto 1fr; + align-self: stretch; +} + +.about-contribute-content { + display: grid; + gap: var(--space-4); +} + +.about-contribute-content > p { + max-width: 112ch; + margin: 0; + color: var(--color-text-secondary); + line-height: 1.62; +} + +.about-contribute-blocks { + display: grid; + gap: var(--space-4); +} + +.about-contribute-block { + display: grid; + grid-template-columns: 30px minmax(0, 1fr); + gap: 12px; + align-items: start; + min-width: 0; +} + +.about-contribute-block .module-icon { + width: 28px; + height: 28px; + border: 1px solid rgba(246, 196, 83, 0.22); + border-radius: var(--radius-sm); + background: rgba(246, 196, 83, 0.09); +} + +.about-contribute-block .module-icon-svg { + width: 15px; + height: 15px; +} + +.about-contribute-block h3 { + margin: 0 0 6px; + color: var(--color-text-primary); + font-size: var(--font-size-sm); +} + +.about-contribute-block p { + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + line-height: 1.5; +} + +.about-contribute-block ul { + display: grid; + gap: 4px; + margin: 10px 0 0; + padding-left: 1.15rem; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + line-height: 1.45; +} + +.about-contribute-block li::marker { + color: var(--color-accent-gold); +} + +.about-contribute-block .about-contribute-note { + margin-top: var(--space-3); + color: var(--color-text-muted); + font-size: var(--font-size-xs); + line-height: 1.45; +} + +.about-contribute-content pre, +.about-prompt-box, +.about-code-example { + margin: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.28); +} + +.about-contribute-content pre { + overflow: auto; + padding: var(--space-4); + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +.about-contribute-formats { + display: grid; + grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.36fr); + gap: var(--space-4); + align-items: stretch; + margin-top: var(--space-3); +} + +.about-code-example { + display: grid; + grid-template-rows: auto 1fr; + overflow: hidden; + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 45%), + rgba(5, 7, 17, 0.32); +} + +.about-code-example > p { + margin: 0; + padding: 8px var(--space-3); + border-bottom: 1px solid rgba(246, 196, 83, 0.14); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 800; + line-height: 1.4; +} + +.about-code-example pre { + border: 0; + border-radius: 0; + background: transparent; + padding: var(--space-3); +} + +.about-contribute-illustration { + display: block; + width: min(100%, 260px); + max-height: 420px; + object-fit: contain; + filter: saturate(1.05) brightness(1.04) drop-shadow(0 26px 38px rgba(0, 0, 0, 0.36)); +} + +.about-section-heading .about-contribute-illustration { + width: min(100%, 300px); + max-height: 520px; + align-self: center; + margin-top: var(--space-6); + object-fit: contain; + opacity: 0.94; + filter: saturate(1.02) brightness(0.99) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.32)); +} + +.about-contribute-content code { + color: var(--color-text-primary); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + font-size: var(--font-size-sm); + line-height: 1.55; + white-space: inherit; +} + +.about-prompt-box { + display: grid; + align-content: start; + padding: var(--space-4); +} + +.about-prompt-box h3 { + margin: 0 0 8px; + color: var(--color-accent-gold); + font-size: var(--font-size-md); +} + +.about-prompt-box p { + margin: 0 0 var(--space-3); + color: var(--color-text-secondary); + line-height: 1.58; +} + +.about-prompt-box pre { + border-color: rgba(246, 196, 83, 0.16); + background: rgba(5, 7, 17, 0.34); +} diff --git a/website/src/styles/home/about/_page.scss b/website/src/styles/home/about/_page.scss new file mode 100644 index 0000000..1160ee3 --- /dev/null +++ b/website/src/styles/home/about/_page.scss @@ -0,0 +1,9 @@ +// Rôle : gère la structure globale de la page à propos. +.about-page { + display: grid; + gap: var(--space-6); +} + +.about-onboarding-section { + margin-top: 0; +} diff --git a/website/src/styles/home/about/_reminders.scss b/website/src/styles/home/about/_reminders.scss new file mode 100644 index 0000000..04f701e --- /dev/null +++ b/website/src/styles/home/about/_reminders.scss @@ -0,0 +1,66 @@ +// Rôle : gère les rappels de stockage local et leurs cartes. +.about-storage-reminders { + display: grid; + gap: var(--space-3); + margin-top: var(--space-2); + padding: var(--space-5); + border: 1px solid rgba(246, 196, 83, 0.16); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.24); +} + +.about-storage-reminders .eyebrow { + margin: 0; + color: var(--color-accent-gold); +} + +.about-reminders-list { + display: grid; + grid-template-columns: repeat(4, minmax(0, 260px)); + justify-content: center; + gap: var(--space-4); + margin: 0; + padding: 0; + list-style: none; +} + +.about-reminder-item { + display: grid; + gap: 10px; + min-width: 0; + padding: var(--space-3); + border: 1px solid rgba(150, 165, 205, 0.1); + border-radius: var(--radius-sm); + background: rgba(16, 20, 38, 0.34); +} + +.about-reminder-heading { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} + +.about-reminder-item .module-icon { + width: 30px; + height: 30px; + flex: 0 0 30px; + border: 1px solid rgba(246, 196, 83, 0.26); + border-radius: var(--radius-sm); + background: rgba(246, 196, 83, 0.1); +} + +.about-reminder-item h4 { + margin: 0; + color: var(--color-text-primary); + font-size: var(--font-size-xs); + line-height: 1.25; +} + +.about-reminder-item p { + max-width: none; + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + line-height: 1.45; +} diff --git a/website/src/styles/home/about/_story.scss b/website/src/styles/home/about/_story.scss new file mode 100644 index 0000000..331c59a --- /dev/null +++ b/website/src/styles/home/about/_story.scss @@ -0,0 +1,175 @@ +// Rôle : stylise le récit éditorial et ses cartes visuelles. +.about-story-section { + display: grid; + gap: var(--space-5); + align-items: start; + padding: var(--space-6); +} + +.about-story-section .about-section-heading { + position: static; + max-width: 860px; +} + +.about-section-heading { + position: sticky; + top: var(--space-5); +} + +.about-section-heading h2 { + margin-bottom: 0; +} + +.about-section-heading .about-contribute-illustration { + margin-top: var(--space-6); +} + +.about-story-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-content: center; + width: 100%; + gap: var(--space-4); + margin-inline: auto; +} + +.about-story-item { + display: grid; + grid-template-rows: auto 1fr; + gap: var(--space-3); + align-items: stretch; + min-width: 0; + overflow: hidden; + padding: var(--space-4); + border: 1px solid rgba(150, 165, 205, 0.12); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent 42%), + rgba(16, 20, 38, 0.36); +} + +.about-story-body { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: var(--space-4); + align-items: center; + min-width: 0; +} + +.about-story-body > div { + display: grid; + align-content: center; + gap: 10px; + min-height: 210px; + padding-block: var(--space-4); +} + +.about-story-item h3 { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; + margin: 0; + padding: 0 0 var(--space-3); + border-bottom: 1px solid rgba(246, 196, 83, 0.12); + color: var(--color-text-primary); + font-size: var(--font-size-base); +} + +.about-story-item h3 .module-icon { + width: 30px; + height: 30px; + flex: 0 0 30px; + border: 1px solid rgba(246, 196, 83, 0.24); + border-radius: var(--radius-sm); + background: rgba(246, 196, 83, 0.09); +} + +.about-story-item h3 .module-icon-svg { + width: 16px; + height: 16px; +} + +.about-story-body p { + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + line-height: 1.58; +} + +.about-story-bullets { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 4px var(--space-4); + margin: 0; + padding-left: 1.15rem; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + line-height: 1.5; +} + +.about-story-bullets li { + padding-left: 2px; +} + +.about-story-bullets li::marker { + color: var(--color-accent-gold); +} + +.about-story-bullets.single-column { + grid-template-columns: 1fr; +} + +.about-story-warning { + display: flex; + align-items: flex-start; + gap: 7px; + color: var(--color-warning); + font-size: var(--font-size-xs); + font-weight: 500; + line-height: 1.5; +} + +.about-story-warning .ui-icon { + width: 15px; + min-width: 15px; + height: 15px; + margin-top: 1px; + color: var(--color-warning); + opacity: 0.88; +} + +.about-story-visual { + display: grid; + min-height: 230px; + place-items: center; + overflow: hidden; + border: 1px solid rgba(246, 196, 83, 0.12); + border-radius: var(--radius-md); + background: + radial-gradient(circle at center, rgba(139, 92, 246, 0.28), transparent 60%), + radial-gradient(circle at 24% 18%, rgba(246, 196, 83, 0.1), transparent 36%), + rgba(5, 7, 17, 0.18); +} + +.about-story-illustration { + display: block; + width: min(96%, 340px); + max-height: 250px; + object-fit: contain; + opacity: 0.94; + filter: saturate(1.02) brightness(1.02) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.32)); +} + +.about-tools-section { + display: grid; + gap: var(--space-4); + padding: var(--space-6); +} + +.about-tools-section .page-heading p:not(.eyebrow) { + max-width: 780px; + margin: 8px 0 0; + color: var(--color-text-secondary); + line-height: 1.56; +} diff --git a/website/src/styles/home/about/_tools.scss b/website/src/styles/home/about/_tools.scss new file mode 100644 index 0000000..af774d4 --- /dev/null +++ b/website/src/styles/home/about/_tools.scss @@ -0,0 +1,72 @@ +// Rôle : stylise la liste des outils présentés dans la page à propos. +.about-tools-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0 var(--space-6); +} + +.about-tool-item { + display: grid; + grid-template-columns: 38px minmax(0, 1fr); + gap: 12px; + align-items: start; + padding: 14px 0; + border-bottom: 1px solid rgba(165, 180, 252, 0.1); +} + +.about-tool-item:nth-last-child(-n + 2) { + border-bottom: 0; +} + +.about-tool-item .module-icon { + width: 34px; + height: 34px; + flex: 0 0 34px; + border-radius: var(--radius-md); +} + +.about-tool-item .module-icon-svg { + width: 18px; + height: 18px; +} + +.about-tool-item h3 { + margin: 0 0 4px; + color: var(--color-text-primary); + font-size: var(--font-size-base); +} + +.about-tool-item p { + margin: 0; + font-size: var(--font-size-sm); + line-height: 1.5; +} + +.about-tool-examples { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 10px 0 0; + padding: 0; + list-style: none; +} + +.about-tool-examples li { + padding: 4px 8px; + border: 1px solid rgba(246, 196, 83, 0.18); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.about-tools-library-button { + display: flex; + width: fit-content; + min-width: min(100%, 300px); + align-items: center; + justify-content: center; + justify-self: center; + margin-top: var(--space-2); +} diff --git a/website/src/styles/home/library/_examples.scss b/website/src/styles/home/library/_examples.scss new file mode 100644 index 0000000..3d3114a --- /dev/null +++ b/website/src/styles/home/library/_examples.scss @@ -0,0 +1,279 @@ +// Rôle : gère les légendes, listes et formats d'exemples des outils. +.library-example-layout { + display: grid; + grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); + align-items: start; + justify-content: stretch; + gap: var(--space-4); +} + +.library-example-layout:not(.has-legend) { + grid-template-columns: minmax(0, 860px); + justify-content: center; +} + +.library-tool-docs { + display: block; +} + +.library-control-legend, +.library-tool-feature-list { + min-width: 0; + border: 1px solid rgba(150, 165, 205, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.28); +} + +.library-control-legend { + display: grid; + align-content: start; + gap: var(--space-3); + padding: var(--space-3); + border-color: rgba(246, 196, 83, 0.22); + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 34%), + rgba(5, 7, 17, 0.46); +} + +.library-control-legend h3, +.library-tool-feature-list h3 { + margin: 0; + color: var(--color-text-primary); + font-size: var(--font-size-md); +} + +.library-control-legend-group { + display: grid; + gap: var(--space-2); + min-width: 0; + padding: var(--space-2); + border: 1px solid rgba(150, 165, 205, 0.1); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.28); +} + +.library-control-legend-group.is-generic-single { + padding: 0; + border: 0; + background: transparent; +} + +.library-control-legend-group h4 { + margin: 0; + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; + text-transform: uppercase; +} + +.library-control-legend-items { + display: grid; + gap: 6px; + min-width: 0; +} + +.library-control-legend-item { + display: grid; + grid-template-columns: minmax(34px, max-content) minmax(0, 1fr); + align-items: center; + gap: var(--space-2); + min-width: 0; +} + +.library-control-preview { + display: inline-flex; + width: fit-content; + max-width: 100%; + min-height: 34px; + align-items: center; + flex-wrap: wrap; + gap: 6px; + pointer-events: none; +} + +.library-control-preview.notepad-toolbar-group { + flex-wrap: nowrap; + padding-right: 0; + border-right: 0; +} + +.library-control-preview-stack { + display: inline-grid; + gap: 6px; + justify-items: start; +} + +.library-control-preview-row { + display: inline-flex; + gap: 6px; +} + +.library-control-preview .notepad-toolbar-button, +.library-control-preview .drawing-control-button, +.library-control-preview .notepad-color-toggle, +.library-control-preview .drawing-width-toggle, +.library-control-preview .module-scroll-button { + cursor: default; +} + +.library-control-preview .notepad-toolbar-button.is-wide { + width: auto; + min-width: 46px; + padding: 0 9px; +} + +.library-control-preview .notepad-color-toggle.active, +.library-control-preview .drawing-width-toggle.active { + border-color: rgba(246, 196, 83, 0.48); + background: rgba(246, 196, 83, 0.1); + color: var(--color-accent-gold); +} + +.library-control-preview .module-scroll-button { + min-height: 34px; +} + +.library-control-legend-item strong { + display: block; + color: var(--color-text-primary); + font-size: var(--font-size-sm); + line-height: 1.2; +} + +.library-control-legend-item p { + margin: 3px 0 0; + font-size: var(--font-size-xs); + line-height: 1.35; +} + +.library-tool-feature-list { + display: grid; + overflow: hidden; + padding: 0; + border-color: rgba(246, 196, 83, 0.18); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(16, 20, 38, 0.52), rgba(5, 7, 17, 0.36)), + rgba(5, 7, 17, 0.3); +} + +.library-tool-advanced-list { + border-color: rgba(34, 211, 238, 0.16); +} + +.library-tool-feature-list summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + padding: var(--space-4); + cursor: pointer; + list-style: none; +} + +.library-tool-feature-list summary::-webkit-details-marker { + display: none; +} + +.library-tool-feature-list summary .ui-icon { + width: 18px; + height: 18px; + flex: 0 0 auto; + color: var(--color-text-secondary); + transition: transform var(--duration-fast) var(--ease-standard); +} + +.library-tool-feature-list[open] summary .ui-icon { + transform: rotate(180deg); +} + +.library-tool-feature-content { + display: grid; + gap: var(--space-4); + padding: 0 var(--space-5) var(--space-5); +} + +.library-tool-feature-list dl { + display: grid; + gap: var(--space-3); + margin: 0; +} + +.library-tool-feature-list dl > div { + display: grid; + grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr); + gap: var(--space-3); + padding: var(--space-3); + border: 1px solid rgba(150, 165, 205, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.28); +} + +.library-tool-feature-list dt { + color: var(--color-text-primary); + font-size: var(--font-size-sm); + font-weight: 800; +} + +.library-tool-feature-list dd { + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.library-tool-feature-list dd p { + margin: 0; +} + +.library-tool-feature-list dd ul { + display: grid; + gap: 6px; + margin: var(--space-2) 0 0; + padding-left: 1.1rem; +} + +.library-tool-feature-list dd li { + color: var(--color-text-secondary); +} + +.library-tool-import-format { + display: grid; + gap: var(--space-2); +} + +.library-tool-import-format p { + margin: 0; +} + +.library-tool-import-format pre { + max-width: 100%; + margin: 0; + padding: var(--space-3); + overflow: auto; + border: 1px solid rgba(150, 165, 205, 0.12); + border-radius: var(--radius-sm); + background: rgba(2, 3, 9, 0.42); + color: var(--color-text-primary); + font-size: var(--font-size-sm); + white-space: pre-wrap; +} + +.library-tool-import-example { + display: grid; + gap: var(--space-2); +} + +.library-tool-import-example button { + display: inline-flex; + align-items: center; + justify-self: end; + gap: 8px; + width: fit-content; + min-height: 38px; + padding-inline: var(--space-3); +} + +.library-tool-import-example .ui-icon { + width: 16px; + height: 16px; +} diff --git a/website/src/styles/home/library/_page.scss b/website/src/styles/home/library/_page.scss new file mode 100644 index 0000000..00e9362 --- /dev/null +++ b/website/src/styles/home/library/_page.scss @@ -0,0 +1,9 @@ +// Rôle : gère la structure de page de la librairie. +.library-page { + display: grid; + gap: var(--space-6); +} + +.library-hero { + min-height: 220px; +} diff --git a/website/src/styles/home/library/_previews.scss b/website/src/styles/home/library/_previews.scss new file mode 100644 index 0000000..3095699 --- /dev/null +++ b/website/src/styles/home/library/_previews.scss @@ -0,0 +1,61 @@ +// Rôle : stylise les aperçus interactifs d'outils dans la librairie. +.library-tool-badge { + display: inline-flex; + width: fit-content; + margin-bottom: var(--space-3); + padding: 4px 9px; + border: 1px solid rgba(246, 196, 83, 0.24); + 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: 800; +} + +.library-tool-example { + width: min(100%, 860px); + min-width: 0; + justify-self: center; +} + +.library-tool-example header > div { + min-width: 0; +} + +.library-tool-example header p { + margin: 3px 0 0; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-weight: 700; + text-transform: uppercase; +} + +.library-example-actions { + display: flex; + flex: 0 0 auto; + gap: 8px; +} + +.library-reset-button { + display: inline-grid; + width: 40px; + min-width: 40px; + min-height: 40px; + flex: 0 0 40px; + place-items: center; + padding: 0; +} + +.library-reset-button .ui-icon { + width: 16px; + height: 16px; +} + +.library-tool-example .module-content { + padding: var(--space-4); +} + +.library-tool-example .image-annotation-stage, +.library-tool-example .images-grid img { + max-height: 260px; +} diff --git a/website/src/styles/home/library/_summary.scss b/website/src/styles/home/library/_summary.scss new file mode 100644 index 0000000..ee2de01 --- /dev/null +++ b/website/src/styles/home/library/_summary.scss @@ -0,0 +1,47 @@ +// Rôle : stylise les indicateurs de synthèse de la librairie. +.library-summary { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--space-4); + padding: var(--space-5); +} + +.library-summary article { + display: flex; + min-width: 0; + gap: var(--space-3); + padding: var(--space-4); + border: 1px solid rgba(150, 165, 205, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.28); +} + +.library-summary h2, +.library-summary p { + margin: 0; +} + +.library-summary h2 { + margin-bottom: 5px; + font-size: var(--font-size-md); +} + +.library-summary-icon { + display: grid; + width: 34px; + min-width: 34px; + height: 34px; + place-items: center; + border: 1px solid rgba(196, 181, 253, 0.24); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.92), rgba(99, 102, 241, 0.84)); + box-shadow: var(--shadow-primary); + color: white; +} + +.library-summary-icon .module-icon-svg { + width: 18px; + height: 18px; + background: currentColor; +} diff --git a/website/src/styles/home/library/_toc.scss b/website/src/styles/home/library/_toc.scss new file mode 100644 index 0000000..53802c8 --- /dev/null +++ b/website/src/styles/home/library/_toc.scss @@ -0,0 +1,108 @@ +// Rôle : gère la navigation documentaire de la librairie. +.library-doc-layout { + display: grid; + grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); + align-items: start; + gap: var(--space-5); +} + +.library-doc-nav { + display: grid; + gap: var(--space-4); + padding: var(--space-4); + scroll-margin-top: var(--space-5); +} + +.library-toc-heading { + display: grid; + gap: 4px; + min-width: 0; +} + +.library-toc-heading h2, +.library-toc-heading p { + margin: 0; +} + +.library-toc-heading h2 { + color: var(--color-text-primary); + font-size: var(--font-size-lg); +} + +.library-toc-heading p { + max-width: 620px; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.library-doc-nav-groups { + display: grid; + gap: var(--space-4); +} + +.library-doc-nav-group { + display: grid; + gap: 8px; +} + +.library-doc-nav-group > a { + color: var(--color-text-primary); + font-size: var(--font-size-sm); + font-weight: 800; + text-decoration: none; +} + +.library-doc-nav-group > a:hover, +.library-doc-nav-group > a:focus-visible { + color: var(--color-accent-gold); +} + +.library-doc-nav-group.active > a { + color: var(--color-accent-gold); +} + +.library-doc-nav-group ul { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.library-doc-nav-group li { + min-width: 0; +} + +.library-doc-nav-group li a { + display: grid; + grid-template-columns: 28px minmax(0, 1fr); + min-height: 36px; + align-items: center; + gap: 8px; + padding: 4px 8px 4px 4px; + border: 1px solid rgba(150, 165, 205, 0.1); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.22); + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 700; + text-decoration: none; +} + +.library-doc-nav-group li a:hover, +.library-doc-nav-group li a:focus-visible { + border-color: rgba(246, 196, 83, 0.36); + background: rgba(246, 196, 83, 0.08); + color: var(--color-text-primary); +} + +.library-doc-nav-group .module-icon { + width: 28px; + height: 28px; + border-radius: var(--radius-sm); +} + +.library-doc-nav-group .module-icon-svg { + width: 16px; + height: 16px; +} diff --git a/website/src/styles/home/library/_tool-cards.scss b/website/src/styles/home/library/_tool-cards.scss new file mode 100644 index 0000000..33151a2 --- /dev/null +++ b/website/src/styles/home/library/_tool-cards.scss @@ -0,0 +1,112 @@ +// Rôle : stylise les catégories, introductions et cartes d'outils de la librairie. +@use "../../mixins"; +.library-tools { + display: grid; + gap: var(--space-6); + justify-items: stretch; +} + +.library-tool-category { + display: grid; + gap: var(--space-5); + min-width: 0; + scroll-margin-top: var(--space-8); +} + +.library-tool-section { + position: relative; + display: grid; + width: 100%; + min-width: 0; + gap: var(--space-4); + overflow: hidden; + padding: var(--space-5); + border: 1px solid transparent; + border-radius: var(--radius-lg); + background: rgba(16, 20, 38, 0.42); + box-shadow: var(--shadow-sm); + scroll-margin-top: var(--space-8); + + @include mixins.gold-panel-frame; +} + +.library-tool-section > * { + position: relative; + z-index: 1; +} + +.library-category-hero { + position: relative; + isolation: isolate; + display: block; + overflow: hidden; + padding: var(--space-6); + border: 1px solid transparent; + border-radius: var(--radius-lg); + background: + radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.12), transparent 30%), + var(--gradient-nebula), + linear-gradient(135deg, rgba(16, 20, 38, 0.9), rgba(5, 7, 17, 0.88)); + box-shadow: var(--shadow-sm); + + @include mixins.gold-panel-frame; +} + +.library-category-hero > * { + position: relative; + z-index: 1; +} + +.library-category-hero h2, +.library-category-hero p { + margin: 0; +} + +.library-category-hero h2 { + margin-bottom: var(--space-3); + color: var(--color-text-primary); + font-size: clamp(1.7rem, 3vw, var(--font-size-3xl)); + line-height: 1.05; +} + +.library-category-hero p:not(.eyebrow) { + max-width: 760px; +} + +.library-tool-intro { + min-width: 0; +} + +.library-tool-title-row { + display: flex; + min-width: 0; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-2); +} + +.library-tool-title-row .module-icon { + width: 36px; + height: 36px; +} + +.library-tool-title-row .module-icon-svg { + width: 20px; + height: 20px; +} + +.library-tool-intro h2 { + margin: 0; +} + +.library-tool-intro p { + margin: 0; +} + +.library-tool-intro h2 { + font-size: var(--font-size-xl); +} + +.library-tool-intro p { + max-width: 860px; +} diff --git a/website/src/styles/icons/_actions.scss b/website/src/styles/icons/_actions.scss new file mode 100644 index 0000000..03e4971 --- /dev/null +++ b/website/src/styles/icons/_actions.scss @@ -0,0 +1,230 @@ +// Rôle : regroupe les icônes d actions, vues, timers et tableaux. +.ui-icon-edit { + mask-image: url("/static/icons/edit.svg"); + -webkit-mask-image: url("/static/icons/edit.svg"); +} + +.ui-icon-add { + mask-image: url("/static/icons/add.svg"); + -webkit-mask-image: url("/static/icons/add.svg"); +} + +.ui-icon-book { + mask-image: url("/static/icons/book.svg"); + -webkit-mask-image: url("/static/icons/book.svg"); +} + +.ui-icon-copy { + mask-image: url("/static/icons/copy.svg"); + -webkit-mask-image: url("/static/icons/copy.svg"); +} + +.ui-icon-calculator { + mask-image: url("/static/icons/calculator.svg"); + -webkit-mask-image: url("/static/icons/calculator.svg"); +} + +.ui-icon-clock { + mask-image: url("/static/icons/clock.svg"); + -webkit-mask-image: url("/static/icons/clock.svg"); +} + +.ui-icon-calendar { + mask-image: url("/static/icons/calendar.svg"); + -webkit-mask-image: url("/static/icons/calendar.svg"); +} + +.ui-icon-calendar-month { + mask-image: url("/static/icons/calendar-month.svg"); + -webkit-mask-image: url("/static/icons/calendar-month.svg"); +} + +.ui-icon-calendar-week { + mask-image: url("/static/icons/calendar-week.svg"); + -webkit-mask-image: url("/static/icons/calendar-week.svg"); +} + +.ui-icon-day-number { + mask-image: url("/static/icons/day-number.svg"); + -webkit-mask-image: url("/static/icons/day-number.svg"); +} + +.ui-icon-day-name { + mask-image: url("/static/icons/day-name.svg"); + -webkit-mask-image: url("/static/icons/day-name.svg"); +} + +.ui-icon-stopwatch { + mask-image: url("/static/icons/stopwatch.svg"); + -webkit-mask-image: url("/static/icons/stopwatch.svg"); +} + +.ui-icon-hourglass { + mask-image: url("/static/icons/hourglass.svg"); + -webkit-mask-image: url("/static/icons/hourglass.svg"); +} + +.ui-icon-play-circle { + mask-image: url("/static/icons/play-circle.svg"); + -webkit-mask-image: url("/static/icons/play-circle.svg"); +} + +.ui-icon-pause-circle { + mask-image: url("/static/icons/pause-circle.svg"); + -webkit-mask-image: url("/static/icons/pause-circle.svg"); +} + +.ui-icon-record-circle { + mask-image: url("/static/icons/record-circle.svg"); + -webkit-mask-image: url("/static/icons/record-circle.svg"); +} + +.ui-icon-stop-circle { + mask-image: url("/static/icons/stop-circle.svg"); + -webkit-mask-image: url("/static/icons/stop-circle.svg"); +} + +.ui-icon-map { + mask-image: url("/static/icons/map.svg"); + -webkit-mask-image: url("/static/icons/map.svg"); +} + +.ui-icon-scrollable { + mask-image: url("/static/icons/scrollable.svg"); + -webkit-mask-image: url("/static/icons/scrollable.svg"); +} + +.ui-icon-rotate { + mask-image: url("/static/icons/rotate.svg"); + -webkit-mask-image: url("/static/icons/rotate.svg"); +} + +.ui-icon-sort-time { + mask-image: url("/static/icons/sort-time.svg"); + -webkit-mask-image: url("/static/icons/sort-time.svg"); +} + +.ui-icon-sound-mute { + mask-image: url("/static/icons/sound-mute.svg"); + -webkit-mask-image: url("/static/icons/sound-mute.svg"); +} + +.ui-icon-sound-min { + mask-image: url("/static/icons/sound-min.svg"); + -webkit-mask-image: url("/static/icons/sound-min.svg"); +} + +.ui-icon-sound-max { + mask-image: url("/static/icons/sound-max.svg"); + -webkit-mask-image: url("/static/icons/sound-max.svg"); +} + +.ui-icon-toast-left { + mask-image: url("/static/icons/toast-left.svg"); + -webkit-mask-image: url("/static/icons/toast-left.svg"); +} + +.ui-icon-toast-right { + mask-image: url("/static/icons/toast-right.svg"); + -webkit-mask-image: url("/static/icons/toast-right.svg"); +} + +.ui-icon-hide { + mask-image: url("/static/icons/hide.svg"); + -webkit-mask-image: url("/static/icons/hide.svg"); +} + +.ui-icon-eye-closed { + mask-image: url("/static/icons/eye-closed.svg"); + -webkit-mask-image: url("/static/icons/eye-closed.svg"); +} + +.ui-icon-eye-open { + mask-image: url("/static/icons/eye-open.svg"); + -webkit-mask-image: url("/static/icons/eye-open.svg"); +} + +.ui-icon-chevron-down { + mask-image: url("/static/icons/chevron-down.svg"); + -webkit-mask-image: url("/static/icons/chevron-down.svg"); +} + +.ui-icon-chevron-up { + mask-image: url("/static/icons/chevron-up.svg"); + -webkit-mask-image: url("/static/icons/chevron-up.svg"); +} + +.ui-icon-drag { + mask-image: url("/static/icons/drag.svg"); + -webkit-mask-image: url("/static/icons/drag.svg"); +} + +.ui-icon-dropdown { + mask-image: url("/static/icons/dropdown.svg"); + -webkit-mask-image: url("/static/icons/dropdown.svg"); +} + +.ui-icon-flip { + mask-image: url("/static/icons/flip.svg"); + -webkit-mask-image: url("/static/icons/flip.svg"); +} + +.ui-icon-rows { + mask-image: url("/static/icons/rows.svg"); + -webkit-mask-image: url("/static/icons/rows.svg"); +} + +.ui-icon-columns { + mask-image: url("/static/icons/columns.svg"); + -webkit-mask-image: url("/static/icons/columns.svg"); +} + +.ui-icon-add-row { + mask-image: url("/static/icons/add-row.svg"); + -webkit-mask-image: url("/static/icons/add-row.svg"); +} + +.ui-icon-add-column { + mask-image: url("/static/icons/add-column.svg"); + -webkit-mask-image: url("/static/icons/add-column.svg"); +} + +.ui-icon-remove-row { + mask-image: url("/static/icons/remove-row.svg"); + -webkit-mask-image: url("/static/icons/remove-row.svg"); +} + +.ui-icon-remove-column { + mask-image: url("/static/icons/remove-column.svg"); + -webkit-mask-image: url("/static/icons/remove-column.svg"); +} + +.ui-icon-table { + mask-image: url("/static/icons/table.svg"); + -webkit-mask-image: url("/static/icons/table.svg"); +} + +.ui-icon-close { + mask-image: url("/static/icons/close.svg"); + -webkit-mask-image: url("/static/icons/close.svg"); +} + +.ui-icon-rubber { + mask-image: url("/static/icons/rubber.svg"); + -webkit-mask-image: url("/static/icons/rubber.svg"); +} + +.ui-icon-refresh { + mask-image: url("/static/icons/refresh.svg"); + -webkit-mask-image: url("/static/icons/refresh.svg"); +} + +.ui-icon-parent { + mask-image: url("/static/icons/parent.svg"); + -webkit-mask-image: url("/static/icons/parent.svg"); +} + +.ui-icon-back { + mask-image: url("/static/icons/back.svg"); + -webkit-mask-image: url("/static/icons/back.svg"); +} diff --git a/website/src/styles/icons/_base.scss b/website/src/styles/icons/_base.scss new file mode 100644 index 0000000..fcb1d0e --- /dev/null +++ b/website/src/styles/icons/_base.scss @@ -0,0 +1,13 @@ +// Rôle : définit le rendu commun des icônes SVG. +.ui-icon { + display: block; + width: 20px; + height: 20px; + background: currentColor; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; +} diff --git a/website/src/styles/icons/_equipment.scss b/website/src/styles/icons/_equipment.scss new file mode 100644 index 0000000..91a61b4 --- /dev/null +++ b/website/src/styles/icons/_equipment.scss @@ -0,0 +1,97 @@ +// Rôle : regroupe les icônes d équipement et les ajustements de listes. +.ui-icon-fist { + mask-image: url("/static/icons/fist.svg"); + -webkit-mask-image: url("/static/icons/fist.svg"); +} + +.ui-icon-foot { + mask-image: url("/static/icons/foot.svg"); + -webkit-mask-image: url("/static/icons/foot.svg"); +} + +.ui-icon-boot { + mask-image: url("/static/icons/boot.svg"); + -webkit-mask-image: url("/static/icons/boot.svg"); +} + +.ui-icon-chest-armor { + mask-image: url("/static/icons/chest-armor.svg"); + -webkit-mask-image: url("/static/icons/chest-armor.svg"); +} + +.ui-icon-helmet { + mask-image: url("/static/icons/helmet.svg"); + -webkit-mask-image: url("/static/icons/helmet.svg"); +} + +.ui-icon-glove { + mask-image: url("/static/icons/glove.svg"); + -webkit-mask-image: url("/static/icons/glove.svg"); +} + +.ui-icon-grab { + mask-image: url("/static/icons/grab.svg"); + -webkit-mask-image: url("/static/icons/grab.svg"); +} + +.ui-icon-sword { + mask-image: url("/static/icons/sword.svg"); + -webkit-mask-image: url("/static/icons/sword.svg"); +} + +.ui-icon-shield { + mask-image: url("/static/icons/shield.svg"); + -webkit-mask-image: url("/static/icons/shield.svg"); +} + +.ui-icon-gun { + mask-image: url("/static/icons/gun.svg"); + -webkit-mask-image: url("/static/icons/gun.svg"); +} + +.ui-icon-earring { + mask-image: url("/static/icons/earring.svg"); + -webkit-mask-image: url("/static/icons/earring.svg"); +} + +.ui-icon-necklace { + mask-image: url("/static/icons/necklace.svg"); + -webkit-mask-image: url("/static/icons/necklace.svg"); +} + +.ui-icon-ring { + mask-image: url("/static/icons/ring.svg"); + -webkit-mask-image: url("/static/icons/ring.svg"); +} + +.ui-icon-hammer { + mask-image: url("/static/icons/hammer.svg"); + -webkit-mask-image: url("/static/icons/hammer.svg"); +} + +.ui-icon-jewel { + mask-image: url("/static/icons/jewel.svg"); + -webkit-mask-image: url("/static/icons/jewel.svg"); +} + +.ui-icon-ball { + mask-image: url("/static/icons/ball.svg"); + -webkit-mask-image: url("/static/icons/ball.svg"); +} + +.ui-icon-trash { + mask-image: url("/static/icons/trashcan.svg"); + -webkit-mask-image: url("/static/icons/trashcan.svg"); +} + +.ui-icon-trashcan-one { + mask-image: url("/static/icons/trashcan-one.svg"); + -webkit-mask-image: url("/static/icons/trashcan-one.svg"); +} + +.game-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + margin-top: var(--space-6); +} diff --git a/website/src/styles/icons/_navigation.scss b/website/src/styles/icons/_navigation.scss new file mode 100644 index 0000000..6e87311 --- /dev/null +++ b/website/src/styles/icons/_navigation.scss @@ -0,0 +1,65 @@ +// Rôle : regroupe les icônes de navigation et de contexte global. +.ui-icon-open { + mask-image: url("/static/icons/open.svg"); + -webkit-mask-image: url("/static/icons/open.svg"); +} + +.ui-icon-home { + mask-image: url("/static/icons/home.svg"); + -webkit-mask-image: url("/static/icons/home.svg"); +} + +.ui-icon-enter { + mask-image: url("/static/icons/enter.svg"); + -webkit-mask-image: url("/static/icons/enter.svg"); +} + +.ui-icon-zoom { + mask-image: url("/static/icons/zoom.svg"); + -webkit-mask-image: url("/static/icons/zoom.svg"); +} + +.ui-icon-save { + mask-image: url("/static/icons/save.svg"); + -webkit-mask-image: url("/static/icons/save.svg"); +} + +.ui-icon-info { + mask-image: url("/static/icons/info.svg"); + -webkit-mask-image: url("/static/icons/info.svg"); +} + +.ui-icon-warning { + mask-image: url("/static/icons/warning.svg"); + -webkit-mask-image: url("/static/icons/warning.svg"); +} + +.ui-icon-export { + mask-image: url("/static/icons/export.svg"); + -webkit-mask-image: url("/static/icons/export.svg"); +} + +.ui-icon-import { + mask-image: url("/static/icons/import.svg"); + -webkit-mask-image: url("/static/icons/import.svg"); +} + +.ui-icon-link { + mask-image: url("/static/icons/link.svg"); + -webkit-mask-image: url("/static/icons/link.svg"); +} + +.ui-icon-picture { + mask-image: url("/static/icons/picture.svg"); + -webkit-mask-image: url("/static/icons/picture.svg"); +} + +.ui-icon-toolbox { + mask-image: url("/static/icons/toolbox.svg"); + -webkit-mask-image: url("/static/icons/toolbox.svg"); +} + +.ui-icon-settings { + mask-image: url("/static/icons/settings.svg"); + -webkit-mask-image: url("/static/icons/settings.svg"); +} diff --git a/website/src/styles/icons/_toolbox.scss b/website/src/styles/icons/_toolbox.scss new file mode 100644 index 0000000..01b5802 --- /dev/null +++ b/website/src/styles/icons/_toolbox.scss @@ -0,0 +1,60 @@ +// Rôle : regroupe les icônes de modules et états toolbox. +.ui-icon-tasklist { + mask-image: url("/static/icons/tasklist.svg"); + -webkit-mask-image: url("/static/icons/tasklist.svg"); +} + +.ui-icon-notepad { + mask-image: url("/static/icons/notepad.svg"); + -webkit-mask-image: url("/static/icons/notepad.svg"); +} + +.ui-icon-checklist { + mask-image: url("/static/icons/checklist.svg"); + -webkit-mask-image: url("/static/icons/checklist.svg"); +} + +.ui-icon-diagram { + mask-image: url("/static/icons/diagram.svg"); + -webkit-mask-image: url("/static/icons/diagram.svg"); +} + +.ui-icon-cube { + mask-image: url("/static/icons/cube.svg"); + -webkit-mask-image: url("/static/icons/cube.svg"); +} + +.ui-icon-fire { + mask-image: url("/static/icons/fire.svg"); + -webkit-mask-image: url("/static/icons/fire.svg"); +} + +.ui-icon-flask { + mask-image: url("/static/icons/flask.svg"); + -webkit-mask-image: url("/static/icons/flask.svg"); +} + +.ui-icon-grass { + mask-image: url("/static/icons/grass.svg"); + -webkit-mask-image: url("/static/icons/grass.svg"); +} + +.ui-icon-leaf { + mask-image: url("/static/icons/leaf.svg"); + -webkit-mask-image: url("/static/icons/leaf.svg"); +} + +.ui-icon-meat { + mask-image: url("/static/icons/meat.svg"); + -webkit-mask-image: url("/static/icons/meat.svg"); +} + +.ui-icon-powder { + mask-image: url("/static/icons/powder.svg"); + -webkit-mask-image: url("/static/icons/powder.svg"); +} + +.ui-icon-tear { + mask-image: url("/static/icons/tear.svg"); + -webkit-mask-image: url("/static/icons/tear.svg"); +} diff --git a/website/src/styles/overlays/_drawers.scss b/website/src/styles/overlays/_drawers.scss new file mode 100644 index 0000000..e8d6e05 --- /dev/null +++ b/website/src/styles/overlays/_drawers.scss @@ -0,0 +1,112 @@ +// Rôle : gère le drawer toolbox et ses actions. +.drawer[aria-hidden="true"] { + display: none; +} + +.drawer-backdrop { + position: fixed; + inset: 0; + z-index: 40; + background: rgba(2, 3, 9, 0.24); + backdrop-filter: none; +} + +.drawer-panel { + position: fixed; + inset: 0 0 0 auto; + z-index: 50; + width: min(720px, 94vw); + min-width: 360px; + max-width: 94vw; + overflow: auto; + border-left: 0; + background: + linear-gradient( + 180deg, + rgba(246, 196, 83, 0.92), + rgba(139, 92, 246, 0.64) 48%, + rgba(196, 181, 253, 0.72) + ) left top / 1px 100% no-repeat, + rgba(7, 9, 19, 0.82); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + box-shadow: + inset 8px 0 18px rgba(139, 92, 246, 0.08), + var(--shadow-lg); + padding: var(--space-5); +} + +.drawer-panel::before { + content: none; +} + +.drawer-content { + position: relative; + display: flex; + min-height: 100%; + flex-direction: column; + gap: var(--space-4); +} + +.drawer-resize-handle { + position: fixed; + top: 50%; + right: calc(var(--drawer-panel-width, min(720px, 94vw)) - 18px); + z-index: 62; + width: 14px; + height: 72px; + border-radius: var(--radius-pill); + cursor: ew-resize; + transform: translateY(-50%); +} + +.drawer-resize-handle::before { + content: ""; + position: absolute; + top: 0; + left: 5px; + width: 4px; + height: 100%; + border-radius: inherit; + background: var(--gradient-brand); + opacity: 0.72; +} + +body.is-resizing-drawer, +body.is-resizing-drawer * { + cursor: ew-resize !important; + user-select: none; +} + +.drawer-panel > .drawer-content > header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-4); + margin-bottom: var(--space-3); +} + +.drawer-toolbox-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); + margin-top: var(--space-3); +} + +.drawer-action-button { + display: inline-flex; +} + +.drawer-action-button:disabled { + color: var(--color-text-disabled); + cursor: not-allowed; + opacity: 0.56; +} + +.drawer-close-button { + flex: 0 0 40px; +} + +.drawer-panel .modules { + grid-template-columns: 1fr; +} diff --git a/website/src/styles/overlays/_image-viewer.scss b/website/src/styles/overlays/_image-viewer.scss new file mode 100644 index 0000000..5c978b2 --- /dev/null +++ b/website/src/styles/overlays/_image-viewer.scss @@ -0,0 +1,160 @@ +// Rôle : stylise le viewer d'image et son panneau d'annotation. +.image-viewer-root { + position: fixed; + inset: 0; + z-index: 110; + display: grid; + place-items: center; + padding: var(--space-5); + overscroll-behavior: contain; +} + +.image-viewer-backdrop { + position: absolute; + inset: 0; + background: rgba(2, 3, 9, 0.64); + backdrop-filter: blur(4px); +} + +.image-viewer { + --viewer-content-max-height: min(80vh, calc(100vh - 140px)); + --viewer-image-height: 400px; + position: relative; + display: grid; + width: min(1500px, calc(100vw - 32px)); + max-height: calc(100vh - 48px); + gap: var(--space-4); + padding: var(--space-4); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + background: rgba(16, 20, 38, 0.96); + box-shadow: var(--shadow-lg); +} + +.image-viewer header { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: var(--space-2); +} + +.image-viewer-title { + overflow: hidden; + color: var(--color-text); + font-size: var(--font-size-md); + text-overflow: ellipsis; + white-space: nowrap; +} + +.image-viewer-actions { + display: flex; + justify-content: flex-end; + gap: var(--space-2); +} + +.image-viewer-button { + flex: 0 0 40px; +} + +.image-viewer-body { + display: grid; + min-width: 0; + justify-items: center; +} + +.image-viewer-body.has-annotation-side { + grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); + gap: var(--space-4); + align-items: start; + justify-items: stretch; +} + +.image-viewer-media { + display: flex; + min-width: 0; + max-width: 100%; + justify-self: center; + justify-content: center; + align-items: start; +} + +.image-viewer-media.can-annotate { + cursor: crosshair; +} + +.image-viewer-image-frame { + position: relative; + display: block; + width: fit-content; + max-width: 100%; + overflow: hidden; + border-radius: var(--radius-md); + line-height: 0; +} + +.image-viewer-image-frame img { + display: block; + width: auto; + height: auto; + max-width: 100%; + max-height: var(--viewer-content-max-height); + object-fit: contain; +} + +.image-viewer-marker { + z-index: 3; + display: inline-grid; + width: 30px; + min-width: 30px; + height: 30px; + min-height: 30px; + place-items: center; + padding: 0; + border: 1px solid rgba(246, 196, 83, 0.72); + border-radius: var(--radius-pill); + background: + linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.9), rgba(196, 181, 253, 0.5)) border-box; + color: #fff; + font-size: var(--font-size-xs); + font-weight: 900; + line-height: 1; + box-shadow: + 0 0 0 2px rgba(5, 7, 17, 0.72), + 0 0 16px rgba(246, 196, 83, 0.22); + pointer-events: none; +} + +.image-viewer-side { + display: grid; + align-content: start; + grid-template-rows: auto auto; + gap: var(--space-3); + min-width: 0; + width: 100%; + max-width: 340px; + height: min(var(--viewer-image-height), var(--viewer-content-max-height)); + max-height: min(var(--viewer-image-height), var(--viewer-content-max-height)); + overflow: hidden; + padding: 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: + linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%), + rgba(7, 10, 24, 0.38); +} + +.image-viewer-side strong { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.image-viewer-side .annotation-marker-list { + min-width: 0; + max-height: 100%; + align-content: start; + grid-auto-rows: max-content; + overflow-y: auto; + overscroll-behavior: contain; + padding: 4px 4px 4px 0; +} diff --git a/website/src/styles/overlays/_modals.scss b/website/src/styles/overlays/_modals.scss new file mode 100644 index 0000000..6cadee7 --- /dev/null +++ b/website/src/styles/overlays/_modals.scss @@ -0,0 +1,59 @@ +// Rôle : stylise les modales de confirmation génériques. +.confirm-modal-root { + position: fixed; + inset: 0; + z-index: 100; + display: grid; + place-items: center; + padding: var(--space-5); + overscroll-behavior: contain; +} + +.tool-add-modal-root { + position: fixed; + inset: 0; + z-index: 130; + display: grid; + place-items: center; + padding: var(--space-5); + overscroll-behavior: contain; +} + +.confirm-backdrop { + position: absolute; + inset: 0; + background: rgba(2, 3, 9, 0.62); + backdrop-filter: blur(6px); +} + +.confirm-modal { + position: relative; + width: min(520px, calc(100vw - 32px)); + max-height: calc(100vh - 48px); + overflow: auto; + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + background: rgba(16, 20, 38, 0.96); + box-shadow: var(--shadow-lg); + padding: var(--space-5); +} + +.confirm-modal h2 { + margin-bottom: var(--space-3); +} + +.confirm-modal p { + margin-bottom: var(--space-6); +} + +.confirm-modal footer { + display: flex; + justify-content: flex-end; + gap: 10px; +} + +@property --notification-toast-angle { + syntax: ""; + inherits: false; + initial-value: 0deg; +} diff --git a/website/src/styles/overlays/_notifications.scss b/website/src/styles/overlays/_notifications.scss new file mode 100644 index 0000000..d68f800 --- /dev/null +++ b/website/src/styles/overlays/_notifications.scss @@ -0,0 +1,133 @@ +// Rôle : gère les toasts de notification et leurs animations. +.notification-toast-stack { + position: fixed; + bottom: var(--space-5); + z-index: 360; + display: flex; + max-width: min(460px, calc(100vw - 32px)); + flex-direction: column-reverse; + gap: var(--space-3); + pointer-events: none; +} + +.notification-toast-stack.is-right { + right: var(--space-5); +} + +.notification-toast-stack.is-left { + left: var(--space-5); +} + +.notification-toast { + --notification-toast-angle: 0deg; + display: grid; + grid-template-columns: minmax(0, 1fr) 34px; + align-items: center; + gap: var(--space-3); + width: 100%; + min-width: min(360px, calc(100vw - 32px)); + padding: 14px 14px 14px 18px; + border: 2px solid transparent; + border-radius: var(--radius-lg); + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.12), transparent 38%) padding-box, + linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(24, 20, 42, 0.98)) padding-box, + conic-gradient( + from var(--notification-toast-angle), + rgba(246, 196, 83, 0.95), + rgba(139, 92, 246, 0.8), + rgba(56, 189, 248, 0.62), + rgba(246, 196, 83, 0.95) + ) border-box; + color: var(--color-text-primary); + box-shadow: + var(--shadow-md), + 0 0 24px rgba(139, 92, 246, 0.22), + 0 0 18px rgba(246, 196, 83, 0.1); + font-size: var(--font-size-md); + font-weight: 900; + pointer-events: auto; + animation: + notification-toast-enter-right 320ms var(--ease-standard), + notification-toast-border-spin 2.4s linear infinite, + notification-toast-pulse 1.8s ease-in-out infinite; +} + +.notification-toast-stack.is-left .notification-toast { + animation: + notification-toast-enter-left 320ms var(--ease-standard), + notification-toast-border-spin 2.4s linear infinite, + notification-toast-pulse 1.8s ease-in-out infinite; +} + +.notification-toast span { + min-width: 0; +} + +.notification-toast button { + display: inline-grid; + width: 34px; + min-width: 34px; + min-height: 34px; + place-items: center; + padding: 0; + border-color: rgba(165, 180, 252, 0.12); + background: rgba(5, 7, 17, 0.28); + color: var(--color-text-secondary); +} + +.notification-toast button:hover { + border-color: rgba(196, 181, 253, 0.26); + background: rgba(21, 26, 48, 0.72); + color: var(--color-text-primary); +} + +.notification-toast button .ui-icon { + width: 16px; + height: 16px; +} + +@keyframes notification-toast-border-spin { + to { --notification-toast-angle: 360deg; } +} + +@keyframes notification-toast-enter-right { + from { + opacity: 0; + transform: translateX(calc(100% + var(--space-5))); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes notification-toast-enter-left { + from { + opacity: 0; + transform: translateX(calc(-100% - var(--space-5))); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes notification-toast-pulse { + 0%, + 100% { + box-shadow: + var(--shadow-md), + 0 0 24px rgba(139, 92, 246, 0.22), + 0 0 18px rgba(246, 196, 83, 0.1); + } + + 50% { + box-shadow: + var(--shadow-md), + 0 0 34px rgba(139, 92, 246, 0.3), + 0 0 26px rgba(246, 196, 83, 0.18); + } +} diff --git a/website/src/styles/overlays/_tool-add.scss b/website/src/styles/overlays/_tool-add.scss new file mode 100644 index 0000000..066ecc1 --- /dev/null +++ b/website/src/styles/overlays/_tool-add.scss @@ -0,0 +1,72 @@ +// Rôle : stylise les modales de création et d'ajout d'outil. +.tool-add-modal { + width: min(560px, calc(100vw - 32px)); +} + +.tool-add-modal header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + margin-bottom: var(--space-4); +} + +.tool-add-modal h2 { + margin: 0; +} + +.tool-add-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--space-3); +} + +.tool-add-card { + display: grid; + height: 98px; + min-width: 0; + align-content: center; + justify-items: center; + gap: 8px; + padding: var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.72); + text-align: center; +} + +.tool-add-card span:last-child { + width: 100%; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.tool-add-card .module-icon { + flex: 0 0 34px; +} + +.tool-add-card:hover { + border-color: var(--color-border-hover); + background: var(--color-bg-hover); + transform: translateY(-1px); +} + +.toolbox-create-modal form, +.toolbox-link-modal form { + display: grid; + gap: var(--space-4); +} + +.toolbox-create-modal .field, +.toolbox-link-modal .field { + padding: 0; +} + +.confirm-danger { + border-color: rgba(251, 113, 133, 0.34); + background: var(--color-danger); + color: #fff; + font-weight: 700; +} diff --git a/website/src/styles/toolboxes/calendar/_date-picker.scss b/website/src/styles/toolboxes/calendar/_date-picker.scss new file mode 100644 index 0000000..b43e776 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_date-picker.scss @@ -0,0 +1,181 @@ +// Rôle : stylise le mini-calendrier de sélection de dates mensuelles. +.calendar-month-date-dropdown { + position: relative; + min-width: 0; +} + +.calendar-month-date-trigger { + display: grid; + grid-template-columns: 18px minmax(0, 1fr) 14px; + align-items: center; + gap: 6px; + width: 100%; + min-height: 36px; + padding: 0 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background-color: rgba(15, 23, 42, 0.64); + color: var(--color-text-primary); + font-weight: 900; + font-variant-numeric: tabular-nums; + text-align: left; +} + +.calendar-month-date-trigger span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-month-date-trigger:hover, +.calendar-month-date-dropdown:focus-within .calendar-month-date-trigger { + border-color: rgba(196, 181, 253, 0.22); + background-color: rgba(21, 26, 48, 0.58); +} + +.calendar-month-date-trigger .ui-icon { + width: 15px; + height: 15px; + color: var(--color-text-secondary); +} + +.calendar-month-date-trigger .ui-icon-chevron-down { + width: 11px; + height: 11px; + justify-self: end; + color: var(--color-text-muted); +} + +.calendar-time-field input { + padding-inline: 10px 4px; + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +.calendar-month-date-picker { + position: absolute; + top: calc(100% + 6px); + left: 0; + z-index: 20; + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 3px; + min-width: 0; + padding: 4px; + border: 1px solid rgba(150, 165, 205, 0.16); + border-radius: var(--radius-sm); + background: rgba(8, 11, 24, 0.98); + box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34); + opacity: 0; + pointer-events: none; + transform: translateY(-4px); + transition: + opacity var(--duration-fast) var(--ease-standard), + transform var(--duration-fast) var(--ease-standard); +} + +.calendar-month-date-picker { + width: min(300px, calc(100vw - 48px)); +} + +.calendar-month-date-picker.is-weekday-mode { + grid-template-columns: 34px repeat(7, minmax(48px, 1fr)); + width: min(420px, calc(100vw - 48px)); +} + +.calendar-month-date-dropdown:focus-within .calendar-month-date-picker { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} + +.calendar-month-date-dropdown.is-aligned-end .calendar-month-date-picker { + right: 0; + left: auto; +} + +.calendar-month-date-picker button { + display: grid; + place-items: center; + min-width: 0; + min-height: 22px; + padding: 0; + border: 1px solid transparent; + border-radius: var(--radius-sm); + background: rgba(16, 20, 38, 0.58); + color: var(--color-text-secondary); + font-size: 11px; + font-weight: 800; + font-variant-numeric: tabular-nums; +} + +.calendar-month-date-picker-header { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 56px minmax(0, 1fr) 56px; + align-items: center; + gap: 4px; +} + +.calendar-month-date-picker-header strong { + min-width: 0; + color: var(--color-text-primary); + overflow: hidden; + font-size: 12px; + font-weight: 900; + text-align: center; + text-overflow: ellipsis; + text-transform: capitalize; + white-space: nowrap; +} + +.calendar-month-date-picker-header button { + min-height: 24px; + padding-inline: 6px; + font-size: 10px; +} + +.calendar-month-date-picker-day { + display: grid; + place-items: center; + min-height: 18px; + color: var(--color-text-muted); + overflow: hidden; + font-size: 9px; + font-weight: 900; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-month-date-picker-week { + display: grid; + place-items: center; + min-height: 24px; + color: var(--color-accent-gold); + font-size: 10px; + font-weight: 900; + font-variant-numeric: tabular-nums; +} + +.calendar-month-date-picker.is-weekday-mode button { + min-height: 26px; + padding-inline: 3px; + overflow: hidden; + font-size: 10px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-month-date-picker button.is-outside, +.calendar-month-date-picker button:disabled { + opacity: 0.34; + cursor: not-allowed; +} + +.calendar-month-date-picker button:hover:not(:disabled), +.calendar-month-date-picker button.active { + border-color: rgba(246, 196, 83, 0.58); + background: rgba(139, 92, 246, 0.3); + color: var(--color-text-primary); +} diff --git a/website/src/styles/toolboxes/calendar/_event-controls.scss b/website/src/styles/toolboxes/calendar/_event-controls.scss new file mode 100644 index 0000000..d21f146 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_event-controls.scss @@ -0,0 +1,135 @@ +// Rôle : gère les alertes, couleurs et répétitions du formulaire calendrier. +.calendar-alert-offsets { + display: grid; + grid-template-columns: repeat(2, max-content); + align-items: center; + gap: 5px 8px; + min-width: 0; + margin: 0; + padding: 0; + border: 0; +} + +.calendar-alert-offsets legend { + grid-column: 1 / -1; + width: 100%; + padding: 0; +} + +.calendar-alert-offsets label { + display: inline-flex; + align-items: center; + gap: 4px; + min-height: 24px; + color: var(--color-text-secondary); + font-size: 11px; + font-weight: 800; + white-space: nowrap; +} + +.calendar-alert-offsets input { + flex: 0 0 auto; + width: 20px; + min-width: 20px; + max-width: 20px; + height: 20px; + min-height: 20px; + max-height: 20px; +} + +.calendar-alert-mode-switch { + align-self: start; + justify-self: start; +} + +.calendar-alert-type-field { + align-self: start; + justify-self: start; +} + +.calendar-color-picker { + position: relative; + align-self: end; +} + +.calendar-color-toggle { + width: 32px; + min-width: 32px; + min-height: 32px; +} + +.calendar-repeat-switch { + align-self: end; + justify-self: start; +} + +.calendar-repeat-switch .ui-icon { + width: 16px; + height: 16px; +} + +.calendar-month-repeat-field { + align-self: end; + justify-self: start; +} + +.calendar-month-repeat-switch { + align-self: end; + grid-template-columns: repeat(2, 30px); + width: max-content; + padding: 3px; +} + +.calendar-month-repeat-switch button { + width: 30px; + min-width: 30px; + min-height: 28px; +} + +.calendar-month-repeat-switch .ui-icon { + width: 22px; + height: 22px; +} + +.calendar-month-event-repeat-switch { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 3px; + min-height: 36px; + padding: 3px; + border: 1px solid rgba(150, 165, 205, 0.14); + border-radius: var(--radius-pill); + background: rgba(11, 14, 27, 0.72); +} + +.calendar-month-event-repeat-switch button { + display: grid; + place-items: center; + min-width: 0; + min-height: 28px; + padding: 0; + border: 0; + border-radius: var(--radius-pill); + background: transparent; + color: var(--color-text-secondary); + overflow: hidden; + font-size: 11px; + font-weight: 900; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-month-event-repeat-switch .ui-icon { + width: 19px; + height: 19px; +} + +.calendar-month-event-repeat-switch button.active { + background: rgba(139, 92, 246, 0.72); + color: var(--color-text-primary); +} + +.calendar-month-event-repeat-switch button:disabled { + opacity: 0.35; + cursor: not-allowed; +} diff --git a/website/src/styles/toolboxes/calendar/_form-actions.scss b/website/src/styles/toolboxes/calendar/_form-actions.scss new file mode 100644 index 0000000..ecf1571 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_form-actions.scss @@ -0,0 +1,63 @@ +// Rôle : stylise les actions, suppressions et erreurs du formulaire calendrier. +.calendar-form-delete-button { + width: 34px; + min-width: 34px; + min-height: 32px; + padding: 0; +} + +.calendar-delete-actions { + display: flex; + align-items: end; + gap: 6px; +} + +.calendar-color-menu { + grid-template-columns: repeat(3, 34px); +} + +.calendar-color-picker .calendar-color-menu { + right: 0; + left: auto; + transform: translateY(-4px); +} + +.calendar-color-picker:hover .calendar-color-menu, +.calendar-color-picker:focus-within .calendar-color-menu { + transform: translateY(0); +} + +.calendar-color-picker .calendar-color-menu::before, +.calendar-color-picker .calendar-color-menu::after { + right: 9px; + left: auto; +} + +.calendar-form-alert-row { + grid-template-columns: minmax(210px, auto) auto minmax(0, 1fr); + align-items: start; + column-gap: 20px; +} + +.calendar-form-alert-row .calendar-form-actions { + align-self: end; +} + +.calendar-form-actions { + display: flex; + align-items: end; + justify-content: end; + flex-wrap: wrap; + gap: 8px; + min-width: 0; +} + +.calendar-form-actions button { + min-height: 34px; + min-width: 0; + padding-inline: 10px; +} + +.calendar-form-error { + margin: 0; +} diff --git a/website/src/styles/toolboxes/calendar/_form-layout.scss b/website/src/styles/toolboxes/calendar/_form-layout.scss new file mode 100644 index 0000000..68e8af8 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_form-layout.scss @@ -0,0 +1,70 @@ +// Rôle : gère la structure, les lignes et les champs de base du formulaire calendrier. +.calendar-event-form { + display: grid; + gap: var(--space-3); + width: 100%; + max-width: 100%; + box-sizing: border-box; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; +} + +.calendar-form-row { + display: grid; + align-items: end; + gap: 8px 10px; + min-width: 0; + max-width: 100%; +} + +.calendar-form-main-row { + grid-template-columns: minmax(0, 1fr) 42px auto; +} + +.calendar-form-time-row { + grid-template-columns: minmax(112px, 136px) repeat(2, minmax(86px, 104px)) minmax(70px, auto) minmax(62px, auto); + justify-content: start; +} + +.calendar-event-form-month .calendar-form-time-row { + grid-template-columns: repeat(2, minmax(96px, 116px)) repeat(2, minmax(86px, 104px)) minmax(70px, auto) minmax(66px, auto); +} + +.calendar-form-month-row { + grid-template-columns: max-content repeat(2, minmax(198px, 226px)) minmax(136px, auto); + justify-content: start; +} + +.calendar-event-form label, +.calendar-day-field, +.calendar-color-picker, +.calendar-repeat-field, +.calendar-month-event-repeat-field, +.calendar-month-repeat-field, +.calendar-alert-type-field { + display: grid; + gap: 5px; + min-width: 0; +} + +.calendar-event-form label span, +.calendar-day-field > span, +.calendar-color-picker > span, +.calendar-repeat-field > span, +.calendar-month-event-repeat-field > span, +.calendar-month-repeat-field > span, +.calendar-alert-type-field > span, +.calendar-alert-offsets legend { + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + text-transform: uppercase; +} + +.calendar-event-form input:not([type="checkbox"]), +.calendar-event-form select { + width: 100%; + min-width: 0; +} diff --git a/website/src/styles/toolboxes/calendar/_form.scss b/website/src/styles/toolboxes/calendar/_form.scss index 9fe2294..b8bc8b1 100644 --- a/website/src/styles/toolboxes/calendar/_form.scss +++ b/website/src/styles/toolboxes/calendar/_form.scss @@ -1,449 +1,5 @@ -// Rôle : stylise le formulaire, les sélecteurs et les actions calendrier. -.calendar-event-form { - display: grid; - gap: var(--space-3); - width: 100%; - max-width: 100%; - box-sizing: border-box; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; -} - -.calendar-form-row { - display: grid; - align-items: end; - gap: 8px 10px; - min-width: 0; - max-width: 100%; -} - -.calendar-form-main-row { - grid-template-columns: minmax(0, 1fr) 42px auto; -} - -.calendar-form-time-row { - grid-template-columns: minmax(112px, 136px) repeat(2, minmax(86px, 104px)) minmax(70px, auto) minmax(62px, auto); - justify-content: start; -} - -.calendar-event-form-month .calendar-form-time-row { - grid-template-columns: repeat(2, minmax(96px, 116px)) repeat(2, minmax(86px, 104px)) minmax(70px, auto) minmax(66px, auto); -} - -.calendar-form-month-row { - grid-template-columns: max-content repeat(2, minmax(198px, 226px)) minmax(136px, auto); - justify-content: start; -} - -.calendar-event-form label, -.calendar-day-field, -.calendar-color-picker, -.calendar-repeat-field, -.calendar-month-event-repeat-field, -.calendar-month-repeat-field, -.calendar-alert-type-field { - display: grid; - gap: 5px; - min-width: 0; -} - -.calendar-event-form label span, -.calendar-day-field > span, -.calendar-color-picker > span, -.calendar-repeat-field > span, -.calendar-month-event-repeat-field > span, -.calendar-month-repeat-field > span, -.calendar-alert-type-field > span, -.calendar-alert-offsets legend { - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - text-transform: uppercase; -} - -.calendar-event-form input:not([type="checkbox"]), -.calendar-event-form select { - width: 100%; - min-width: 0; -} - -.calendar-month-date-dropdown { - position: relative; - min-width: 0; -} - -.calendar-month-date-trigger { - display: grid; - grid-template-columns: 18px minmax(0, 1fr) 14px; - align-items: center; - gap: 6px; - width: 100%; - min-height: 36px; - padding: 0 8px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background-color: rgba(15, 23, 42, 0.64); - color: var(--color-text-primary); - font-weight: 900; - font-variant-numeric: tabular-nums; - text-align: left; -} - -.calendar-month-date-trigger span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-month-date-trigger:hover, -.calendar-month-date-dropdown:focus-within .calendar-month-date-trigger { - border-color: rgba(196, 181, 253, 0.22); - background-color: rgba(21, 26, 48, 0.58); -} - -.calendar-month-date-trigger .ui-icon { - width: 15px; - height: 15px; - color: var(--color-text-secondary); -} - -.calendar-month-date-trigger .ui-icon-chevron-down { - width: 11px; - height: 11px; - justify-self: end; - color: var(--color-text-muted); -} - -.calendar-time-field input { - padding-inline: 10px 4px; - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -.calendar-month-date-picker { - position: absolute; - top: calc(100% + 6px); - left: 0; - z-index: 20; - display: grid; - grid-template-columns: repeat(7, minmax(0, 1fr)); - gap: 3px; - min-width: 0; - padding: 4px; - border: 1px solid rgba(150, 165, 205, 0.16); - border-radius: var(--radius-sm); - background: rgba(8, 11, 24, 0.98); - box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34); - opacity: 0; - pointer-events: none; - transform: translateY(-4px); - transition: - opacity var(--duration-fast) var(--ease-standard), - transform var(--duration-fast) var(--ease-standard); -} - -.calendar-month-date-picker { - width: min(300px, calc(100vw - 48px)); -} - -.calendar-month-date-picker.is-weekday-mode { - grid-template-columns: 34px repeat(7, minmax(48px, 1fr)); - width: min(420px, calc(100vw - 48px)); -} - -.calendar-month-date-dropdown:focus-within .calendar-month-date-picker { - opacity: 1; - pointer-events: auto; - transform: translateY(0); -} - -.calendar-month-date-dropdown.is-aligned-end .calendar-month-date-picker { - right: 0; - left: auto; -} - -.calendar-month-date-picker button { - display: grid; - place-items: center; - min-width: 0; - min-height: 22px; - padding: 0; - border: 1px solid transparent; - border-radius: var(--radius-sm); - background: rgba(16, 20, 38, 0.58); - color: var(--color-text-secondary); - font-size: 11px; - font-weight: 800; - font-variant-numeric: tabular-nums; -} - -.calendar-month-date-picker-header { - grid-column: 1 / -1; - display: grid; - grid-template-columns: 56px minmax(0, 1fr) 56px; - align-items: center; - gap: 4px; -} - -.calendar-month-date-picker-header strong { - min-width: 0; - color: var(--color-text-primary); - overflow: hidden; - font-size: 12px; - font-weight: 900; - text-align: center; - text-overflow: ellipsis; - text-transform: capitalize; - white-space: nowrap; -} - -.calendar-month-date-picker-header button { - min-height: 24px; - padding-inline: 6px; - font-size: 10px; -} - -.calendar-month-date-picker-day { - display: grid; - place-items: center; - min-height: 18px; - color: var(--color-text-muted); - overflow: hidden; - font-size: 9px; - font-weight: 900; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-month-date-picker-week { - display: grid; - place-items: center; - min-height: 24px; - color: var(--color-accent-gold); - font-size: 10px; - font-weight: 900; - font-variant-numeric: tabular-nums; -} - -.calendar-month-date-picker.is-weekday-mode button { - min-height: 26px; - padding-inline: 3px; - overflow: hidden; - font-size: 10px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-month-date-picker button.is-outside, -.calendar-month-date-picker button:disabled { - opacity: 0.34; - cursor: not-allowed; -} - -.calendar-month-date-picker button:hover:not(:disabled), -.calendar-month-date-picker button.active { - border-color: rgba(246, 196, 83, 0.58); - background: rgba(139, 92, 246, 0.3); - color: var(--color-text-primary); -} - -.calendar-alert-offsets { - display: grid; - grid-template-columns: repeat(2, max-content); - align-items: center; - gap: 5px 8px; - min-width: 0; - margin: 0; - padding: 0; - border: 0; -} - -.calendar-alert-offsets legend { - grid-column: 1 / -1; - width: 100%; - padding: 0; -} - -.calendar-alert-offsets label { - display: inline-flex; - align-items: center; - gap: 4px; - min-height: 24px; - color: var(--color-text-secondary); - font-size: 11px; - font-weight: 800; - white-space: nowrap; -} - -.calendar-alert-offsets input { - flex: 0 0 auto; - width: 20px; - min-width: 20px; - max-width: 20px; - height: 20px; - min-height: 20px; - max-height: 20px; -} - -.calendar-alert-mode-switch { - align-self: start; - justify-self: start; -} - -.calendar-alert-type-field { - align-self: start; - justify-self: start; -} - -.calendar-color-picker { - position: relative; - align-self: end; -} - -.calendar-color-toggle { - width: 32px; - min-width: 32px; - min-height: 32px; -} - -.calendar-repeat-switch { - align-self: end; - justify-self: start; -} - -.calendar-repeat-switch .ui-icon { - width: 16px; - height: 16px; -} - -.calendar-month-repeat-field { - align-self: end; - justify-self: start; -} - -.calendar-month-repeat-switch { - align-self: end; - grid-template-columns: repeat(2, 30px); - width: max-content; - padding: 3px; -} - -.calendar-month-repeat-switch button { - width: 30px; - min-width: 30px; - min-height: 28px; -} - -.calendar-month-repeat-switch .ui-icon { - width: 22px; - height: 22px; -} - -.calendar-month-event-repeat-switch { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 3px; - min-height: 36px; - padding: 3px; - border: 1px solid rgba(150, 165, 205, 0.14); - border-radius: var(--radius-pill); - background: rgba(11, 14, 27, 0.72); -} - -.calendar-month-event-repeat-switch button { - display: grid; - place-items: center; - min-width: 0; - min-height: 28px; - padding: 0; - border: 0; - border-radius: var(--radius-pill); - background: transparent; - color: var(--color-text-secondary); - overflow: hidden; - font-size: 11px; - font-weight: 900; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-month-event-repeat-switch .ui-icon { - width: 19px; - height: 19px; -} - -.calendar-month-event-repeat-switch button.active { - background: rgba(139, 92, 246, 0.72); - color: var(--color-text-primary); -} - -.calendar-month-event-repeat-switch button:disabled { - opacity: 0.35; - cursor: not-allowed; -} - -.calendar-form-delete-button { - width: 34px; - min-width: 34px; - min-height: 32px; - padding: 0; -} - -.calendar-delete-actions { - display: flex; - align-items: end; - gap: 6px; -} - -.calendar-color-menu { - grid-template-columns: repeat(3, 34px); -} - -.calendar-color-picker .calendar-color-menu { - right: 0; - left: auto; - transform: translateY(-4px); -} - -.calendar-color-picker:hover .calendar-color-menu, -.calendar-color-picker:focus-within .calendar-color-menu { - transform: translateY(0); -} - -.calendar-color-picker .calendar-color-menu::before, -.calendar-color-picker .calendar-color-menu::after { - right: 9px; - left: auto; -} - -.calendar-form-alert-row { - grid-template-columns: minmax(210px, auto) auto minmax(0, 1fr); - align-items: start; - column-gap: 20px; -} - -.calendar-form-alert-row .calendar-form-actions { - align-self: end; -} - -.calendar-form-actions { - display: flex; - align-items: end; - justify-content: end; - flex-wrap: wrap; - gap: 8px; - min-width: 0; -} - -.calendar-form-actions button { - min-height: 34px; - min-width: 0; - padding-inline: 10px; -} - -.calendar-form-error { - margin: 0; -} +// Rôle : orchestre les styles du formulaire calendrier. +@use "form-layout"; +@use "date-picker"; +@use "event-controls"; +@use "form-actions"; diff --git a/website/src/styles/toolboxes/goal-tree/_node-actions.scss b/website/src/styles/toolboxes/goal-tree/_node-actions.scss new file mode 100644 index 0000000..faba058 --- /dev/null +++ b/website/src/styles/toolboxes/goal-tree/_node-actions.scss @@ -0,0 +1,64 @@ +// Rôle : stylise les actions de noeud, toggles de branche et poignées. +.goal-tree-node-actions { + grid-area: actions; + display: flex; + min-height: 22px; + justify-content: center; + align-items: center; + gap: 4px; + padding-top: 0; +} + +.goal-tree-node-actions button, +.goal-tree-drag-handle { + width: 22px; + min-width: 22px; + height: 22px; + min-height: 22px; + padding: 0; +} + +.goal-tree-node-actions .goal-tree-branch-toggle { + width: 22px; + min-width: 22px; + height: 22px; + min-height: 22px; +} + +.goal-tree-canvas.is-horizontal .goal-tree-branch-toggle .ui-icon-chevron-down, +.goal-tree-canvas.is-horizontal .goal-tree-branch-toggle .ui-icon-chevron-up { + transform: rotate(-90deg); +} + +.goal-tree-drag-handle { + position: absolute; + z-index: 3; + top: 6px; + left: 6px; + border-color: rgba(165, 180, 252, 0.34); + background: rgba(7, 10, 24, 0.82); + color: var(--color-text-primary); + cursor: grab; + opacity: 1; + box-shadow: + 0 0 0 1px rgba(7, 10, 24, 0.72), + 0 6px 12px rgba(0, 0, 0, 0.22); +} + +.goal-tree-drag-handle:hover { + border-color: rgba(246, 196, 83, 0.42); + background: rgba(7, 10, 24, 0.92); + color: var(--color-text-primary); + box-shadow: + 0 0 0 1px rgba(246, 196, 83, 0.12), + 0 8px 14px rgba(0, 0, 0, 0.26); +} + +.goal-tree-drag-handle .ui-icon { + width: 12px; + height: 12px; +} + +.goal-tree-node-tooltip { + max-width: 220px; +} diff --git a/website/src/styles/toolboxes/goal-tree/_node-card.scss b/website/src/styles/toolboxes/goal-tree/_node-card.scss new file mode 100644 index 0000000..68f2bdf --- /dev/null +++ b/website/src/styles/toolboxes/goal-tree/_node-card.scss @@ -0,0 +1,148 @@ +// Rôle : stylise la carte de noeud, ses états et ses actions au survol. +.goal-tree-node { + position: relative; + display: flex; + --goal-tree-card-color: var(--color-accent-gold); + min-width: 104px; + flex-direction: column; + align-items: center; +} + +.goal-tree-canvas.is-horizontal .goal-tree-node { + flex-direction: row; + align-items: center; +} + +.goal-tree-node.is-text { + --goal-tree-card-color: var(--color-accent-cyan); +} + +.goal-tree-node.is-checklist { + --goal-tree-card-color: #34d399; +} + +.goal-tree-node-card { + position: relative; + z-index: 1; + display: grid; + width: 104px; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + grid-template-areas: + "main"; + gap: 6px; + align-items: stretch; + align-content: stretch; + min-width: 0; + min-height: 104px; + padding: 7px; + border: 1px solid color-mix(in srgb, var(--goal-tree-card-color) 38%, rgba(150, 165, 205, 0.16)); + border-radius: var(--radius-lg); + background: + linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 10%, transparent), transparent 44%), + linear-gradient(160deg, rgba(139, 92, 246, 0.12), rgba(16, 20, 38, 0.72)); + cursor: pointer; + box-shadow: + 0 12px 22px rgba(0, 0, 0, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: + border-color var(--duration-fast) var(--ease-standard), + background var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +.goal-tree-node-card.has-actions { + grid-template-rows: minmax(0, 1fr) 22px; + grid-template-areas: + "main" + "actions"; +} + +.goal-tree-node-hover-actions { + position: absolute; + z-index: 3; + right: 6px; + bottom: 7px; + left: 6px; + display: flex; + justify-content: space-between; + gap: 4px; + opacity: 0; + pointer-events: none; + transition: opacity var(--duration-fast) var(--ease-standard); +} + +.goal-tree-node-card:hover .goal-tree-node-hover-actions, +.goal-tree-node-card:focus-within .goal-tree-node-hover-actions { + opacity: 1; +} + +.goal-tree-node-hover-actions button { + width: 24px; + min-width: 24px; + min-height: 24px; + padding: 0; + border-color: rgba(165, 180, 252, 0.14); + background: rgba(7, 10, 24, 0.78); + pointer-events: none; +} + +.goal-tree-node-card:hover .goal-tree-node-hover-actions button, +.goal-tree-node-card:focus-within .goal-tree-node-hover-actions button { + pointer-events: auto; +} + +.goal-tree-node-hover-actions .ui-icon { + width: 13px; + height: 13px; +} + +.goal-tree-node.is-text, +.goal-tree-node.is-checklist { + min-width: 184px; +} + +.goal-tree-node.is-text > .goal-tree-node-card, +.goal-tree-node.is-checklist > .goal-tree-node-card { + width: 184px; +} + +.goal-tree-node-card.is-viewing { + grid-template-columns: minmax(0, 1fr); +} + +.goal-tree-node.is-selected > .goal-tree-node-card { + border-color: color-mix(in srgb, var(--goal-tree-card-color) 72%, rgba(246, 196, 83, 0.24)); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--goal-tree-card-color) 22%, transparent), + 0 12px 22px rgba(0, 0, 0, 0.18); +} + +.goal-tree-node.is-selected > .goal-tree-node-card.is-editing { + border-color: color-mix(in srgb, var(--goal-tree-card-color) 86%, var(--color-accent-gold)); + background: + linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 20%, transparent), transparent 48%), + linear-gradient(160deg, rgba(139, 92, 246, 0.18), rgba(16, 20, 38, 0.82)); + box-shadow: + 0 0 0 2px color-mix(in srgb, var(--goal-tree-card-color) 36%, transparent), + 0 0 22px color-mix(in srgb, var(--goal-tree-card-color) 18%, transparent), + 0 16px 28px rgba(0, 0, 0, 0.22); +} + +.goal-tree-node.is-complete > .goal-tree-node-card { + border-color: color-mix(in srgb, var(--goal-tree-card-color) 54%, rgba(34, 211, 238, 0.3)); + background: + linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 12%, transparent), transparent 44%), + linear-gradient(160deg, rgba(139, 92, 246, 0.1), rgba(16, 20, 38, 0.72)); +} + +.goal-tree-node-card:hover, +.goal-tree-node-card:focus-within { + border-color: color-mix(in srgb, var(--goal-tree-card-color) 68%, rgba(246, 196, 83, 0.24)); + background: + linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 16%, transparent), transparent 48%), + linear-gradient(160deg, rgba(139, 92, 246, 0.14), rgba(16, 20, 38, 0.78)); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--goal-tree-card-color) 16%, transparent), + 0 14px 26px rgba(0, 0, 0, 0.2); +} diff --git a/website/src/styles/toolboxes/goal-tree/_node-content.scss b/website/src/styles/toolboxes/goal-tree/_node-content.scss new file mode 100644 index 0000000..9937692 --- /dev/null +++ b/website/src/styles/toolboxes/goal-tree/_node-content.scss @@ -0,0 +1,228 @@ +// Rôle : gère le contenu, les checklists et la progression des noeuds. +.goal-tree-node-main { + grid-area: main; + display: grid; + align-content: start; + justify-items: stretch; + gap: 5px; + min-width: 0; + min-height: 46px; + padding: 5px; + border: 0; + background: transparent; + color: var(--color-text-primary); + cursor: pointer; + text-align: center; + box-shadow: none; +} + +.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main { + justify-items: center; + min-height: 58px; +} + +.goal-tree-node-main:hover, +.goal-tree-node-main:focus { + border-color: transparent; + background: transparent; + box-shadow: none; +} + +.goal-tree-node-heading { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 6px; + align-items: center; + min-width: 0; +} + +.goal-tree-node-icon { + display: grid; + width: 24px; + height: 24px; + place-items: center; + border: 1px solid color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 45%, transparent); + border-radius: var(--radius-sm); + background: color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 14%, transparent); + color: var(--goal-tree-node-color, var(--color-accent-gold)); +} + +.goal-tree-node-icon .ui-icon { + width: 15px; + height: 15px; +} + +.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon { + width: 42px; + height: 42px; +} + +.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon .ui-icon { + width: 27px; + height: 27px; +} + +.goal-tree-node-title { + overflow: hidden; + min-width: 0; + color: var(--color-text-primary); + font-size: 0.78rem; + font-weight: 900; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; +} + +.goal-tree-node-content-preview { + display: grid; + width: 100%; + min-height: 0; + gap: 3px; + justify-items: stretch; + color: var(--color-text-primary); +} + +.goal-tree-node-content-preview:empty { + display: none; +} + +.goal-tree-node-content-row { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 4px; + align-items: center; + min-width: 0; + font-size: 0.72rem; + font-weight: 800; + text-align: left; +} + +.goal-tree-node.is-checklist .goal-tree-node-content-row { + grid-template-columns: auto minmax(0, 1fr); +} + +.goal-tree-node.is-text .goal-tree-node-content-row { + grid-template-columns: auto minmax(0, 1fr); +} + +.goal-tree-node.is-text .goal-tree-node-content-row::before { + content: ""; + width: 3px; + height: 3px; + border-radius: 50%; + background: currentColor; +} + +.goal-tree-node-content-row strong { + color: var(--color-accent-gold); + font-size: 0.72rem; +} + +.goal-tree-node-content-label { + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.goal-tree-node-content-add-button { + display: grid; + width: 100%; + min-height: 20px; + padding: 0; + place-items: center; + border-style: dashed; + border-color: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 56%, transparent); + border-radius: var(--radius-sm); + background: rgba(7, 10, 24, 0.2); + color: var(--color-text-secondary); +} + +.goal-tree-node-content-add-button:hover, +.goal-tree-node-content-add-button:focus-visible { + border-color: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 78%, transparent); + background: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 14%, transparent); + color: var(--color-text-primary); +} + +.goal-tree-node-content-add-button .ui-icon { + width: 12px; + height: 12px; +} + +.goal-tree-node.is-checklist .goal-tree-node-content-label { + padding-left: 2px; +} + +.goal-tree-node-check { + display: grid; + width: 10px; + height: 10px; + margin: 0; + accent-color: var(--color-accent-cyan); +} + +.goal-tree-step-check { + justify-self: center; + width: 16px; + height: 16px; + margin: 0; + accent-color: var(--color-accent-gold); +} + +.goal-tree-step-qty-stepper { + justify-self: center; + grid-template-columns: 18px minmax(34px, auto) 18px; + gap: 2px; + font-size: 0.68rem; +} + +.goal-tree-step-qty-stepper button { + display: grid; + width: 18px; + min-width: 18px; + height: 18px; + min-height: 18px; + padding: 0; + place-items: center; +} + +.goal-tree-step-qty-stepper .ui-icon { + width: 10px; + height: 10px; +} + +.goal-tree-node-content-row .goal-tree-content-qty-stepper { + justify-self: start; + grid-template-columns: 16px minmax(30px, auto) 16px; + gap: 2px; + font-size: 0.64rem; +} + +.goal-tree-node-content-row .goal-tree-content-qty-stepper button { + min-width: 16px; + min-height: 16px; + padding: 0; +} + +.goal-tree-node-content-row .goal-tree-content-qty-stepper .ui-icon { + width: 9px; + height: 9px; +} + +.goal-tree-progress-track { + grid-column: 1 / -1; + justify-self: stretch; + width: 100%; + height: 5px; + overflow: hidden; + border-radius: var(--radius-pill); + background: rgba(150, 165, 205, 0.13); +} + +.goal-tree-progress-track span { + display: block; + height: 100%; + border-radius: inherit; + background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-cyan)); +} diff --git a/website/src/styles/toolboxes/goal-tree/_node-drag.scss b/website/src/styles/toolboxes/goal-tree/_node-drag.scss new file mode 100644 index 0000000..d3ca8d5 --- /dev/null +++ b/website/src/styles/toolboxes/goal-tree/_node-drag.scss @@ -0,0 +1,41 @@ +// Rôle : gère les états visuels de drag and drop des noeuds. +.goal-tree-node.is-dragging { + opacity: 0.55; +} + +.goal-tree-node.is-drop-target > .goal-tree-node-card { + border-color: rgba(246, 196, 83, 0.48); +} + +.goal-tree-node.is-drop-target > .goal-tree-node-card::after { + position: absolute; + 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; +} + +.goal-tree-node[data-reorder-orientation="horizontal"].is-drop-target > .goal-tree-node-card::after { + top: 8px; + bottom: 8px; + left: -8px; + width: 3px; +} + +.goal-tree-node[data-reorder-orientation="horizontal"].is-drop-target.drop-after > .goal-tree-node-card::after { + right: -8px; + left: auto; +} + +.goal-tree-node[data-reorder-orientation="vertical"].is-drop-target > .goal-tree-node-card::after { + top: -8px; + right: 8px; + left: 8px; + height: 3px; +} + +.goal-tree-node[data-reorder-orientation="vertical"].is-drop-target.drop-after > .goal-tree-node-card::after { + top: auto; + bottom: -8px; +} diff --git a/website/src/styles/toolboxes/goal-tree/_node-responsive.scss b/website/src/styles/toolboxes/goal-tree/_node-responsive.scss new file mode 100644 index 0000000..cb7d41d --- /dev/null +++ b/website/src/styles/toolboxes/goal-tree/_node-responsive.scss @@ -0,0 +1,42 @@ +// Rôle : regroupe les ajustements compacts et responsive des noeuds. +.goal-tree-empty { + padding: var(--space-4); + color: var(--color-text-secondary); + text-align: center; +} + +.goal-tree-module .text-import-actions { + padding-top: var(--space-2); +} + +@media (max-width: 860px) { + .goal-tree-module { + grid-template-columns: 1fr; + } + + .goal-tree-view.tool-split-results { + min-height: 220px; + } + + .goal-tree-list { + gap: 16px; + } + + .goal-tree-node { + min-width: 96px; + } + + .goal-tree-node-card { + width: 96px; + } + + .goal-tree-node.is-text, + .goal-tree-node.is-checklist { + min-width: 160px; + } + + .goal-tree-node.is-text > .goal-tree-node-card, + .goal-tree-node.is-checklist > .goal-tree-node-card { + width: 160px; + } +} diff --git a/website/src/styles/toolboxes/goal-tree/_nodes.scss b/website/src/styles/toolboxes/goal-tree/_nodes.scss index aa553db..0ce350f 100644 --- a/website/src/styles/toolboxes/goal-tree/_nodes.scss +++ b/website/src/styles/toolboxes/goal-tree/_nodes.scss @@ -1,523 +1,6 @@ -// Rôle : stylise les cartes, contenus et états de drag de l'arbre d'objectifs. -.goal-tree-node { - position: relative; - display: flex; - --goal-tree-card-color: var(--color-accent-gold); - min-width: 104px; - flex-direction: column; - align-items: center; -} - -.goal-tree-canvas.is-horizontal .goal-tree-node { - flex-direction: row; - align-items: center; -} - -.goal-tree-node.is-text { - --goal-tree-card-color: var(--color-accent-cyan); -} - -.goal-tree-node.is-checklist { - --goal-tree-card-color: #34d399; -} - -.goal-tree-node-card { - position: relative; - z-index: 1; - display: grid; - width: 104px; - grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(0, 1fr); - grid-template-areas: - "main"; - gap: 6px; - align-items: stretch; - align-content: stretch; - min-width: 0; - min-height: 104px; - padding: 7px; - border: 1px solid color-mix(in srgb, var(--goal-tree-card-color) 38%, rgba(150, 165, 205, 0.16)); - border-radius: var(--radius-lg); - background: - linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 10%, transparent), transparent 44%), - linear-gradient(160deg, rgba(139, 92, 246, 0.12), rgba(16, 20, 38, 0.72)); - cursor: pointer; - box-shadow: - 0 12px 22px rgba(0, 0, 0, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.04); - transition: - border-color var(--duration-fast) var(--ease-standard), - background var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -.goal-tree-node-card.has-actions { - grid-template-rows: minmax(0, 1fr) 22px; - grid-template-areas: - "main" - "actions"; -} - -.goal-tree-node-hover-actions { - position: absolute; - z-index: 3; - right: 6px; - bottom: 7px; - left: 6px; - display: flex; - justify-content: space-between; - gap: 4px; - opacity: 0; - pointer-events: none; - transition: opacity var(--duration-fast) var(--ease-standard); -} - -.goal-tree-node-card:hover .goal-tree-node-hover-actions, -.goal-tree-node-card:focus-within .goal-tree-node-hover-actions { - opacity: 1; -} - -.goal-tree-node-hover-actions button { - width: 24px; - min-width: 24px; - min-height: 24px; - padding: 0; - border-color: rgba(165, 180, 252, 0.14); - background: rgba(7, 10, 24, 0.78); - pointer-events: none; -} - -.goal-tree-node-card:hover .goal-tree-node-hover-actions button, -.goal-tree-node-card:focus-within .goal-tree-node-hover-actions button { - pointer-events: auto; -} - -.goal-tree-node-hover-actions .ui-icon { - width: 13px; - height: 13px; -} - -.goal-tree-node.is-text, -.goal-tree-node.is-checklist { - min-width: 184px; -} - -.goal-tree-node.is-text > .goal-tree-node-card, -.goal-tree-node.is-checklist > .goal-tree-node-card { - width: 184px; -} - -.goal-tree-node-card.is-viewing { - grid-template-columns: minmax(0, 1fr); -} - -.goal-tree-node.is-selected > .goal-tree-node-card { - border-color: color-mix(in srgb, var(--goal-tree-card-color) 72%, rgba(246, 196, 83, 0.24)); - box-shadow: - 0 0 0 1px color-mix(in srgb, var(--goal-tree-card-color) 22%, transparent), - 0 12px 22px rgba(0, 0, 0, 0.18); -} - -.goal-tree-node.is-selected > .goal-tree-node-card.is-editing { - border-color: color-mix(in srgb, var(--goal-tree-card-color) 86%, var(--color-accent-gold)); - background: - linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 20%, transparent), transparent 48%), - linear-gradient(160deg, rgba(139, 92, 246, 0.18), rgba(16, 20, 38, 0.82)); - box-shadow: - 0 0 0 2px color-mix(in srgb, var(--goal-tree-card-color) 36%, transparent), - 0 0 22px color-mix(in srgb, var(--goal-tree-card-color) 18%, transparent), - 0 16px 28px rgba(0, 0, 0, 0.22); -} - -.goal-tree-node.is-complete > .goal-tree-node-card { - border-color: color-mix(in srgb, var(--goal-tree-card-color) 54%, rgba(34, 211, 238, 0.3)); - background: - linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 12%, transparent), transparent 44%), - linear-gradient(160deg, rgba(139, 92, 246, 0.1), rgba(16, 20, 38, 0.72)); -} - -.goal-tree-node-card:hover, -.goal-tree-node-card:focus-within { - border-color: color-mix(in srgb, var(--goal-tree-card-color) 68%, rgba(246, 196, 83, 0.24)); - background: - linear-gradient(135deg, color-mix(in srgb, var(--goal-tree-card-color) 16%, transparent), transparent 48%), - linear-gradient(160deg, rgba(139, 92, 246, 0.14), rgba(16, 20, 38, 0.78)); - box-shadow: - 0 0 0 1px color-mix(in srgb, var(--goal-tree-card-color) 16%, transparent), - 0 14px 26px rgba(0, 0, 0, 0.2); -} - -.goal-tree-node-main { - grid-area: main; - display: grid; - align-content: start; - justify-items: stretch; - gap: 5px; - min-width: 0; - min-height: 46px; - padding: 5px; - border: 0; - background: transparent; - color: var(--color-text-primary); - cursor: pointer; - text-align: center; - box-shadow: none; -} - -.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main { - justify-items: center; - min-height: 58px; -} - -.goal-tree-node-main:hover, -.goal-tree-node-main:focus { - border-color: transparent; - background: transparent; - box-shadow: none; -} - -.goal-tree-node-heading { - display: grid; - grid-template-columns: auto minmax(0, 1fr); - gap: 6px; - align-items: center; - min-width: 0; -} - -.goal-tree-node-icon { - display: grid; - width: 24px; - height: 24px; - place-items: center; - border: 1px solid color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 45%, transparent); - border-radius: var(--radius-sm); - background: color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 14%, transparent); - color: var(--goal-tree-node-color, var(--color-accent-gold)); -} - -.goal-tree-node-icon .ui-icon { - width: 15px; - height: 15px; -} - -.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon { - width: 42px; - height: 42px; -} - -.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon .ui-icon { - width: 27px; - height: 27px; -} - -.goal-tree-node-title { - overflow: hidden; - min-width: 0; - color: var(--color-text-primary); - font-size: 0.78rem; - font-weight: 900; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; -} - -.goal-tree-node-content-preview { - display: grid; - width: 100%; - min-height: 0; - gap: 3px; - justify-items: stretch; - color: var(--color-text-primary); -} - -.goal-tree-node-content-preview:empty { - display: none; -} - -.goal-tree-node-content-row { - display: grid; - grid-template-columns: auto minmax(0, 1fr); - gap: 4px; - align-items: center; - min-width: 0; - font-size: 0.72rem; - font-weight: 800; - text-align: left; -} - -.goal-tree-node.is-checklist .goal-tree-node-content-row { - grid-template-columns: auto minmax(0, 1fr); -} - -.goal-tree-node.is-text .goal-tree-node-content-row { - grid-template-columns: auto minmax(0, 1fr); -} - -.goal-tree-node.is-text .goal-tree-node-content-row::before { - content: ""; - width: 3px; - height: 3px; - border-radius: 50%; - background: currentColor; -} - -.goal-tree-node-content-row strong { - color: var(--color-accent-gold); - font-size: 0.72rem; -} - -.goal-tree-node-content-label { - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.goal-tree-node-content-add-button { - display: grid; - width: 100%; - min-height: 20px; - padding: 0; - place-items: center; - border-style: dashed; - border-color: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 56%, transparent); - border-radius: var(--radius-sm); - background: rgba(7, 10, 24, 0.2); - color: var(--color-text-secondary); -} - -.goal-tree-node-content-add-button:hover, -.goal-tree-node-content-add-button:focus-visible { - border-color: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 78%, transparent); - background: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 14%, transparent); - color: var(--color-text-primary); -} - -.goal-tree-node-content-add-button .ui-icon { - width: 12px; - height: 12px; -} - -.goal-tree-node.is-checklist .goal-tree-node-content-label { - padding-left: 2px; -} - -.goal-tree-node-check { - display: grid; - width: 10px; - height: 10px; - margin: 0; - accent-color: var(--color-accent-cyan); -} - -.goal-tree-step-check { - justify-self: center; - width: 16px; - height: 16px; - margin: 0; - accent-color: var(--color-accent-gold); -} - -.goal-tree-step-qty-stepper { - justify-self: center; - grid-template-columns: 18px minmax(34px, auto) 18px; - gap: 2px; - font-size: 0.68rem; -} - -.goal-tree-step-qty-stepper button { - display: grid; - width: 18px; - min-width: 18px; - height: 18px; - min-height: 18px; - padding: 0; - place-items: center; -} - -.goal-tree-step-qty-stepper .ui-icon { - width: 10px; - height: 10px; -} - -.goal-tree-node-content-row .goal-tree-content-qty-stepper { - justify-self: start; - grid-template-columns: 16px minmax(30px, auto) 16px; - gap: 2px; - font-size: 0.64rem; -} - -.goal-tree-node-content-row .goal-tree-content-qty-stepper button { - min-width: 16px; - min-height: 16px; - padding: 0; -} - -.goal-tree-node-content-row .goal-tree-content-qty-stepper .ui-icon { - width: 9px; - height: 9px; -} - -.goal-tree-progress-track { - grid-column: 1 / -1; - justify-self: stretch; - width: 100%; - height: 5px; - overflow: hidden; - border-radius: var(--radius-pill); - background: rgba(150, 165, 205, 0.13); -} - -.goal-tree-progress-track span { - display: block; - height: 100%; - border-radius: inherit; - background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-cyan)); -} - -.goal-tree-node-actions { - grid-area: actions; - display: flex; - min-height: 22px; - justify-content: center; - align-items: center; - gap: 4px; - padding-top: 0; -} - -.goal-tree-node-actions button, -.goal-tree-drag-handle { - width: 22px; - min-width: 22px; - height: 22px; - min-height: 22px; - padding: 0; -} - -.goal-tree-node-actions .goal-tree-branch-toggle { - width: 22px; - min-width: 22px; - height: 22px; - min-height: 22px; -} - -.goal-tree-canvas.is-horizontal .goal-tree-branch-toggle .ui-icon-chevron-down, -.goal-tree-canvas.is-horizontal .goal-tree-branch-toggle .ui-icon-chevron-up { - transform: rotate(-90deg); -} - -.goal-tree-drag-handle { - position: absolute; - z-index: 3; - top: 6px; - left: 6px; - border-color: rgba(165, 180, 252, 0.34); - background: rgba(7, 10, 24, 0.82); - color: var(--color-text-primary); - cursor: grab; - opacity: 1; - box-shadow: - 0 0 0 1px rgba(7, 10, 24, 0.72), - 0 6px 12px rgba(0, 0, 0, 0.22); -} - -.goal-tree-drag-handle:hover { - border-color: rgba(246, 196, 83, 0.42); - background: rgba(7, 10, 24, 0.92); - color: var(--color-text-primary); - box-shadow: - 0 0 0 1px rgba(246, 196, 83, 0.12), - 0 8px 14px rgba(0, 0, 0, 0.26); -} - -.goal-tree-drag-handle .ui-icon { - width: 12px; - height: 12px; -} - -.goal-tree-node-tooltip { - max-width: 220px; -} - -.goal-tree-node.is-dragging { - opacity: 0.55; -} - -.goal-tree-node.is-drop-target > .goal-tree-node-card { - border-color: rgba(246, 196, 83, 0.48); -} - -.goal-tree-node.is-drop-target > .goal-tree-node-card::after { - position: absolute; - 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; -} - -.goal-tree-node[data-reorder-orientation="horizontal"].is-drop-target > .goal-tree-node-card::after { - top: 8px; - bottom: 8px; - left: -8px; - width: 3px; -} - -.goal-tree-node[data-reorder-orientation="horizontal"].is-drop-target.drop-after > .goal-tree-node-card::after { - right: -8px; - left: auto; -} - -.goal-tree-node[data-reorder-orientation="vertical"].is-drop-target > .goal-tree-node-card::after { - top: -8px; - right: 8px; - left: 8px; - height: 3px; -} - -.goal-tree-node[data-reorder-orientation="vertical"].is-drop-target.drop-after > .goal-tree-node-card::after { - top: auto; - bottom: -8px; -} - -.goal-tree-empty { - padding: var(--space-4); - color: var(--color-text-secondary); - text-align: center; -} - -.goal-tree-module .text-import-actions { - padding-top: var(--space-2); -} - -@media (max-width: 860px) { - .goal-tree-module { - grid-template-columns: 1fr; - } - - .goal-tree-view.tool-split-results { - min-height: 220px; - } - - .goal-tree-list { - gap: 16px; - } - - .goal-tree-node { - min-width: 96px; - } - - .goal-tree-node-card { - width: 96px; - } - - .goal-tree-node.is-text, - .goal-tree-node.is-checklist { - min-width: 160px; - } - - .goal-tree-node.is-text > .goal-tree-node-card, - .goal-tree-node.is-checklist > .goal-tree-node-card { - width: 160px; - } -} +// Rôle : orchestre les styles des noeuds de l'arbre d'objectifs. +@use "node-card"; +@use "node-content"; +@use "node-actions"; +@use "node-drag"; +@use "node-responsive";