From c81f66c747f29ce76e148cb2363e94ee45d139f0 Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Mon, 24 Aug 2026 20:07:24 +0200 Subject: [PATCH] Split large Sass modules by feature area --- tests/static-styles.test.mjs | 14 +- website/src/styles/_home.scss | 1813 +---------------- website/src/styles/home/_about.scss | 510 +++++ website/src/styles/home/_library.scss | 618 ++++++ website/src/styles/home/_onboarding.scss | 352 ++++ website/src/styles/home/_shared.scss | 201 ++ website/src/styles/home/_stats.scss | 60 + website/src/styles/home/_story.scss | 78 + website/src/styles/toolboxes/_calendar.scss | 1073 +--------- .../styles/toolboxes/_equipment-planner.scss | 1080 +--------- .../src/styles/toolboxes/calendar/_base.scss | 48 + .../src/styles/toolboxes/calendar/_form.scss | 449 ++++ .../src/styles/toolboxes/calendar/_month.scss | 159 ++ .../toolboxes/calendar/_responsive.scss | 52 + .../src/styles/toolboxes/calendar/_week.scss | 359 ++++ .../toolboxes/equipment-planner/_details.scss | 179 ++ .../toolboxes/equipment-planner/_items.scss | 242 +++ .../toolboxes/equipment-planner/_pickers.scss | 124 ++ .../toolboxes/equipment-planner/_sockets.scss | 335 +++ .../toolboxes/equipment-planner/_summary.scss | 192 ++ 20 files changed, 3990 insertions(+), 3948 deletions(-) create mode 100644 website/src/styles/home/_about.scss create mode 100644 website/src/styles/home/_library.scss create mode 100644 website/src/styles/home/_onboarding.scss create mode 100644 website/src/styles/home/_shared.scss create mode 100644 website/src/styles/home/_stats.scss create mode 100644 website/src/styles/home/_story.scss create mode 100644 website/src/styles/toolboxes/calendar/_base.scss create mode 100644 website/src/styles/toolboxes/calendar/_form.scss create mode 100644 website/src/styles/toolboxes/calendar/_month.scss create mode 100644 website/src/styles/toolboxes/calendar/_responsive.scss create mode 100644 website/src/styles/toolboxes/calendar/_week.scss create mode 100644 website/src/styles/toolboxes/equipment-planner/_details.scss create mode 100644 website/src/styles/toolboxes/equipment-planner/_items.scss create mode 100644 website/src/styles/toolboxes/equipment-planner/_pickers.scss create mode 100644 website/src/styles/toolboxes/equipment-planner/_sockets.scss create mode 100644 website/src/styles/toolboxes/equipment-planner/_summary.scss diff --git a/tests/static-styles.test.mjs b/tests/static-styles.test.mjs index b4f6cc3..cdaa582 100644 --- a/tests/static-styles.test.mjs +++ b/tests/static-styles.test.mjs @@ -3,6 +3,10 @@ import { readFile } from "node:fs/promises"; import { test } from "node:test"; import assert from "node:assert/strict"; +async function readJoinedStyles(paths) { + return (await Promise.all(paths.map((path) => readFile(path, "utf8")))).join("\n"); +} + 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"); @@ -11,7 +15,15 @@ test("style entrypoint and theme layers are wired", async () => { const styleMixins = await readFile("website/src/styles/_mixins.scss", "utf8"); const styleShell = await readFile("website/src/styles/_shell.scss", "utf8"); const styleCards = await readFile("website/src/styles/_cards.scss", "utf8"); - const styleHome = await readFile("website/src/styles/_home.scss", "utf8"); + const styleHome = await readJoinedStyles([ + "website/src/styles/_home.scss", + "website/src/styles/home/_shared.scss", + "website/src/styles/home/_onboarding.scss", + "website/src/styles/home/_library.scss", + "website/src/styles/home/_story.scss", + "website/src/styles/home/_about.scss", + "website/src/styles/home/_stats.scss" + ]); const styleToolboxesEntry = await readFile("website/src/styles/_toolboxes.scss", "utf8"); const styleToolboxesCore = await readFile("website/src/styles/toolboxes/_core.scss", "utf8"); const styleToolboxLayout = await readFile("website/src/styles/toolboxes/_layout.scss", "utf8"); diff --git a/website/src/styles/_home.scss b/website/src/styles/_home.scss index 1630e4b..75c21d4 100644 --- a/website/src/styles/_home.scss +++ b/website/src/styles/_home.scss @@ -1,1806 +1,7 @@ -// Rôle : contient les styles spécifiques à la page d'accueil. -@use "mixins"; - -.hero, -.game-hero, -.page-hero { - position: relative; - isolation: isolate; - display: grid; - min-height: 360px; - align-items: end; - gap: var(--space-6); - overflow: hidden; - border: 1px solid transparent; - border-radius: var(--radius-xl); - background: - var(--gradient-nebula), - radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%), - linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96)); - box-shadow: var(--shadow-md); - padding: var(--space-10); -} - -.hero::before, -.game-hero::before, -.page-hero::before { - content: ""; - position: absolute; - inset: 0; - z-index: 2; - padding: 1px; - border-radius: inherit; - background: - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%), - linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3)); - @include mixins.border-mask; - pointer-events: none; -} - -.hero::after, -.game-hero::after, -.page-hero::after { - content: ""; - position: absolute; - inset: 0; - z-index: 0; - pointer-events: none; - background: - linear-gradient(135deg, rgba(5, 7, 17, 0.1), rgba(5, 7, 17, 0.52)), - radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.18), transparent 30%); -} - -.hero > *, -.game-hero > *, -.page-hero > * { - position: relative; - z-index: 1; -} - -.hero { - grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); -} - -.game-hero { - grid-template-columns: 1fr auto; - --game-hero-image: none; - color: white; -} - -.game-hero::after { - left: 35%; - opacity: 0.72; - background: - linear-gradient(90deg, rgba(5, 7, 17, 0.04), rgba(5, 7, 17, 0.2) 58%, rgba(5, 7, 17, 0.62) 100%), - var(--game-hero-image); - background-position: - center, - right center; - background-repeat: no-repeat; - background-size: - cover, - cover; - mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%); - -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%); -} - -.page-hero { - min-height: 180px; - grid-template-columns: minmax(0, 1fr) auto; - align-items: end; - padding: var(--space-6); -} - -.page-hero p:last-child { - max-width: 720px; - margin-bottom: 0; -} - -h1, -h2, -p { - margin-top: 0; -} - -h1 { - max-width: 820px; - margin-bottom: 14px; - font-size: clamp(2rem, 4vw, var(--font-size-4xl)); - line-height: 1.05; -} - -h2 { - margin-bottom: 10px; - font-size: var(--font-size-xl); -} - -p, -li, -small, -span { - color: var(--color-text-secondary); -} - -.eyebrow { - margin-bottom: 10px; - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; -} - -.actions, -.card-actions, -.toolbar { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.toolbar-stack { - align-items: flex-start; - flex-direction: column; -} - -.toolbar-stack > div { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.hero-library-button { - display: inline-flex; - width: fit-content; - margin-top: var(--space-4); -} - -.library-link-button { - align-items: center; - gap: 8px; -} - -.library-link-button .ui-icon { - width: 16px; - height: 16px; - color: var(--color-accent-gold); -} - -.hero-panel { - padding: var(--space-5); - border: 1px solid rgba(165, 180, 252, 0.14); - border-radius: var(--radius-lg); - background: rgba(16, 20, 38, 0.72); - backdrop-filter: blur(18px); -} - -.hero-panel span { - display: block; - background: var(--gradient-brand); - background-clip: text; - color: transparent; - font-size: 56px; - font-weight: 800; - line-height: 1; -} - -.home-section-heading { - display: grid; - gap: var(--space-2); - min-width: 0; -} - -.home-section-heading h2, -.home-section-heading p { - margin: 0; -} - -.home-section-heading p:not(.eyebrow) { - max-width: 980px; -} - -.home-onboarding { - display: grid; - gap: var(--space-6); - margin-top: var(--space-6); - padding: var(--space-6); -} - -.home-onboarding-heading { - max-width: 980px; -} - -.home-onboarding-layout { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - align-items: stretch; - column-gap: clamp(var(--space-12), 5vw, 5rem); - row-gap: var(--space-6); -} - -.home-onboarding-steps { - display: grid; - align-content: start; - gap: var(--space-4); - min-width: 0; -} - -.home-onboarding-steps h3 { - margin: 0; - color: var(--color-text-primary); - font-size: var(--font-size-lg); -} - -.home-onboarding-create-button { - min-height: 40px; - padding-inline: var(--space-4); -} - -.home-onboarding-steps-action { - display: flex; - justify-content: flex-start; - padding-top: var(--space-2); - padding-left: calc(28px + var(--space-3)); -} - -.home-onboarding-preview { - display: grid; - align-content: start; - gap: var(--space-4); - min-width: 0; -} - -.home-onboarding-preview h3 { - margin: 0; - color: var(--color-text-primary); - font-size: var(--font-size-lg); -} - -.home-onboarding-steps ol { - display: grid; - gap: var(--space-6); - margin: 0; - padding: 0; - list-style: none; -} - -.home-onboarding-steps li { - display: flex; - position: relative; - min-width: 0; - gap: var(--space-3); - padding: 0; -} - -.home-onboarding-steps li:first-child { - padding-top: 0; -} - -.home-onboarding-steps li:last-child { - padding-bottom: 0; -} - -.home-onboarding-steps li::before { - content: ""; - position: absolute; - top: 32px; - bottom: calc(-1 * var(--space-6) + 4px); - left: 13px; - width: 1px; - background: rgba(246, 196, 83, 0.18); -} - -.home-onboarding-steps li:last-child::before { - display: none; -} - -.home-onboarding-steps li > span { - position: relative; - z-index: 1; - display: grid; - width: 28px; - min-width: 28px; - height: 28px; - place-items: center; - border: 1px solid rgba(246, 196, 83, 0.32); - border-radius: var(--radius-sm); - background: rgba(246, 196, 83, 0.1); - color: var(--color-accent-gold); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.home-onboarding-steps div { - display: grid; - gap: 4px; - min-width: 0; -} - -.home-onboarding-steps strong, -.home-onboarding-steps p { - margin: 0; -} - -.home-onboarding-steps strong { - color: var(--color-text-primary); -} - -.home-onboarding-steps p { - font-size: var(--font-size-sm); -} - -.home-onboarding-slider { - position: relative; - display: grid; - min-width: 0; - overflow: hidden; - border: 1px solid rgba(150, 165, 205, 0.14); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.38); - box-shadow: var(--shadow-sm); -} - -.home-onboarding-slider figure { - position: relative; - display: grid; - min-height: 320px; - margin: 0; -} - -.home-onboarding-slider img { - display: block; - width: 100%; - height: 100%; - min-height: 320px; - object-fit: cover; -} - -.home-onboarding-slider figcaption { - position: absolute; - right: 0; - bottom: 0; - left: 0; - display: grid; - min-height: 4.1em; - align-content: center; - gap: 1px; - padding: 10px var(--space-4); - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(6px); -} - -.home-onboarding-slider figcaption strong, -.home-onboarding-slider figcaption span { - margin: 0; -} - -.home-onboarding-slider figcaption strong { - color: var(--color-text-primary); - font-size: var(--font-size-md); -} - -.home-onboarding-slider figcaption span { - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.home-onboarding-dots { - position: absolute; - right: var(--space-3); - bottom: calc(4.1em + var(--space-3)); - display: flex; - gap: 7px; -} - -.home-onboarding-dots button { - width: 10px; - min-width: 10px; - height: 10px; - min-height: 10px; - padding: 0; - border-color: rgba(246, 196, 83, 0.36); - border-radius: var(--radius-pill); - background: rgba(5, 7, 17, 0.68); -} - -.home-onboarding-dots button.active, -.home-onboarding-dots button:hover, -.home-onboarding-dots button:focus-visible { - background: var(--color-accent-gold); - box-shadow: 0 0 10px rgba(246, 196, 83, 0.26); -} - -.home-onboarding-cards { - display: grid; - grid-template-columns: repeat(2, minmax(260px, 320px)); - gap: var(--space-4); - justify-content: center; - padding-top: var(--space-6); - border-top: 1px solid rgba(150, 165, 205, 0.12); -} - -.home-onboarding-card { - position: relative; - isolation: isolate; - display: grid; - min-width: 0; - overflow: hidden; - align-content: start; - padding: 0; - border: 1px solid transparent; - border-radius: var(--radius-md); - background: - linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box, - radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box; - box-shadow: var(--shadow-sm); - text-decoration: none; - transition: - border-color var(--duration-fast) var(--ease-standard), - background var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -@supports (corner-shape: scoop) { - .home-onboarding-card { - corner-shape: scoop; - } -} - -.home-onboarding-card-visual { - position: relative; - display: grid; - aspect-ratio: 3 / 2; - min-height: 0; - place-items: center; - overflow: hidden; - border-bottom: 1px solid rgba(246, 196, 83, 0.42); - background: - radial-gradient(circle at 50% 15%, rgba(246, 196, 83, 0.12), transparent 34%), - rgba(5, 7, 17, 0.28); -} - -.home-onboarding-card-visual img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.3)); -} - -.home-onboarding-card-body { - display: grid; - gap: var(--space-3); - justify-items: center; - padding: var(--space-4); -} - -.home-onboarding-card-title { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 9px; - min-width: 0; - color: var(--color-text-primary); -} - -.home-onboarding-card-title .module-icon-svg { - width: 20px; - min-width: 20px; - height: 20px; - background: var(--color-accent-gold); -} - -.home-onboarding-card strong { - color: var(--color-text-primary); - font-size: var(--font-size-lg); - line-height: 1.2; -} - -.home-onboarding-card-text { - max-width: 30ch; - text-align: center; - font-size: var(--font-size-sm); -} - -.home-onboarding-card em { - display: inline-flex; - min-height: 38px; - align-items: center; - justify-content: center; - width: fit-content; - padding: 0 var(--space-3); - border: 1px solid rgba(246, 196, 83, 0.28); - border-radius: var(--radius-md); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); - font-style: normal; - font-size: var(--font-size-sm); - font-weight: 800; -} - -.home-onboarding-card:hover, -.home-onboarding-card:focus-visible { - transform: none; - border-color: transparent; - background: - linear-gradient(rgba(18, 23, 44, 0.96), rgba(18, 23, 44, 0.96)) padding-box, - radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.26), transparent 28%) border-box, - linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(196, 181, 253, 0.34) 62%, rgba(34, 211, 238, 0.2)) border-box; - box-shadow: - var(--shadow-sm), - 0 0 18px rgba(139, 92, 246, 0.16); -} - -.home-visual { - display: grid; - align-self: center; - justify-self: center; - width: min(100%, 640px); - place-items: center; -} - -.home-visual img { - display: block; - width: 100%; - height: auto; - max-height: 520px; - border-radius: var(--radius-lg); - filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.34)); -} - -.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; -} - -.nebula-panel { - position: relative; - overflow: hidden; - border: 1px solid transparent; - border-radius: var(--radius-lg); - background: rgba(16, 20, 38, 0.42); - box-shadow: var(--shadow-sm); - - @include mixins.gold-panel-frame; -} - -.nebula-panel > * { - position: relative; - z-index: 1; -} - -.origin-section { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr); - gap: var(--space-6); - margin-top: var(--space-6); - padding: var(--space-6); -} - -.origin-copy { - min-width: 0; - padding-right: var(--space-6); - border-right: 2px solid rgba(246, 196, 83, 0.66); -} - -.home-dialogue { - position: relative; - display: grid; - gap: 8px; - margin-top: var(--space-4); -} - -.dialogue-line { - width: fit-content; - max-width: min(74ch, 86%); - margin: 0; - padding: 8px 11px; - border: 1px solid rgba(165, 180, 252, 0.14); - border-radius: 8px; - color: var(--color-text-primary); - font-size: var(--font-size-sm); - line-height: 1.35; - overflow-wrap: break-word; -} - -.dialogue-line-user { - justify-self: end; - background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 99, 235, 0.18)); -} - -.dialogue-line-app { - justify-self: start; - max-width: min(62ch, 68%); - background: rgba(7, 10, 24, 0.48); -} - -.dialogue-line i { - color: var(--color-text-secondary); - font-style: italic; -} - -.dialogue-caption { - display: block; - margin-top: 4px; - color: var(--color-text-muted); - font-size: var(--font-size-xs); - font-style: italic; - text-align: right; -} - -.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; -} - -.home-stats { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; - align-self: start; -} - -.hero-stats { - align-self: center; - justify-self: end; - width: min(420px, 100%); -} - -.home-stats article { - min-height: 118px; - padding: var(--space-4); - border: 1px solid rgba(165, 180, 252, 0.14); - border-radius: var(--radius-md); - background: - linear-gradient(145deg, rgba(246, 196, 83, 0.08), transparent 52%), - rgba(7, 10, 24, 0.52); -} - -.home-stats strong { - display: block; - margin-bottom: 10px; - background: var(--gradient-brand); - background-clip: text; - color: transparent; - font-size: 44px; - font-weight: 900; - line-height: 0.95; -} - -.home-stats span { - display: block; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); - font-weight: 700; - line-height: 1.35; -} - -.home-legal { - display: grid; - gap: 6px; - margin-top: var(--space-5); - padding-top: var(--space-4); - border-top: 1px solid rgba(150, 165, 205, 0.14); - color: var(--color-text-muted); - font-size: var(--font-size-xs); - line-height: 1.45; -} - -.home-legal p { - max-width: 920px; - margin: 0; -} +// Rôle : assemble les styles des pages accueil, librairie et à propos. +@use "home/shared"; +@use "home/onboarding"; +@use "home/library"; +@use "home/story"; +@use "home/about"; +@use "home/stats"; diff --git a/website/src/styles/home/_about.scss b/website/src/styles/home/_about.scss new file mode 100644 index 0000000..c401e86 --- /dev/null +++ b/website/src/styles/home/_about.scss @@ -0,0 +1,510 @@ +// 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; +} + diff --git a/website/src/styles/home/_library.scss b/website/src/styles/home/_library.scss new file mode 100644 index 0000000..2b0937d --- /dev/null +++ b/website/src/styles/home/_library.scss @@ -0,0 +1,618 @@ +// 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; +} + diff --git a/website/src/styles/home/_onboarding.scss b/website/src/styles/home/_onboarding.scss new file mode 100644 index 0000000..441e58f --- /dev/null +++ b/website/src/styles/home/_onboarding.scss @@ -0,0 +1,352 @@ +// Rôle : gère le parcours d’onboarding et ses visuels sur la page home. + +.home-onboarding { + display: grid; + gap: var(--space-6); + margin-top: var(--space-6); + padding: var(--space-6); +} + +.home-onboarding-heading { + max-width: 980px; +} + +.home-onboarding-layout { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + align-items: stretch; + column-gap: clamp(var(--space-12), 5vw, 5rem); + row-gap: var(--space-6); +} + +.home-onboarding-steps { + display: grid; + align-content: start; + gap: var(--space-4); + min-width: 0; +} + +.home-onboarding-steps h3 { + margin: 0; + color: var(--color-text-primary); + font-size: var(--font-size-lg); +} + +.home-onboarding-create-button { + min-height: 40px; + padding-inline: var(--space-4); +} + +.home-onboarding-steps-action { + display: flex; + justify-content: flex-start; + padding-top: var(--space-2); + padding-left: calc(28px + var(--space-3)); +} + +.home-onboarding-preview { + display: grid; + align-content: start; + gap: var(--space-4); + min-width: 0; +} + +.home-onboarding-preview h3 { + margin: 0; + color: var(--color-text-primary); + font-size: var(--font-size-lg); +} + +.home-onboarding-steps ol { + display: grid; + gap: var(--space-6); + margin: 0; + padding: 0; + list-style: none; +} + +.home-onboarding-steps li { + display: flex; + position: relative; + min-width: 0; + gap: var(--space-3); + padding: 0; +} + +.home-onboarding-steps li:first-child { + padding-top: 0; +} + +.home-onboarding-steps li:last-child { + padding-bottom: 0; +} + +.home-onboarding-steps li::before { + content: ""; + position: absolute; + top: 32px; + bottom: calc(-1 * var(--space-6) + 4px); + left: 13px; + width: 1px; + background: rgba(246, 196, 83, 0.18); +} + +.home-onboarding-steps li:last-child::before { + display: none; +} + +.home-onboarding-steps li > span { + position: relative; + z-index: 1; + display: grid; + width: 28px; + min-width: 28px; + height: 28px; + place-items: center; + border: 1px solid rgba(246, 196, 83, 0.32); + border-radius: var(--radius-sm); + background: rgba(246, 196, 83, 0.1); + color: var(--color-accent-gold); + font-size: var(--font-size-sm); + font-weight: 900; +} + +.home-onboarding-steps div { + display: grid; + gap: 4px; + min-width: 0; +} + +.home-onboarding-steps strong, +.home-onboarding-steps p { + margin: 0; +} + +.home-onboarding-steps strong { + color: var(--color-text-primary); +} + +.home-onboarding-steps p { + font-size: var(--font-size-sm); +} + +.home-onboarding-slider { + position: relative; + display: grid; + min-width: 0; + overflow: hidden; + border: 1px solid rgba(150, 165, 205, 0.14); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.38); + box-shadow: var(--shadow-sm); +} + +.home-onboarding-slider figure { + position: relative; + display: grid; + min-height: 320px; + margin: 0; +} + +.home-onboarding-slider img { + display: block; + width: 100%; + height: 100%; + min-height: 320px; + object-fit: cover; +} + +.home-onboarding-slider figcaption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + display: grid; + min-height: 4.1em; + align-content: center; + gap: 1px; + padding: 10px var(--space-4); + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(6px); +} + +.home-onboarding-slider figcaption strong, +.home-onboarding-slider figcaption span { + margin: 0; +} + +.home-onboarding-slider figcaption strong { + color: var(--color-text-primary); + font-size: var(--font-size-md); +} + +.home-onboarding-slider figcaption span { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.home-onboarding-dots { + position: absolute; + right: var(--space-3); + bottom: calc(4.1em + var(--space-3)); + display: flex; + gap: 7px; +} + +.home-onboarding-dots button { + width: 10px; + min-width: 10px; + height: 10px; + min-height: 10px; + padding: 0; + border-color: rgba(246, 196, 83, 0.36); + border-radius: var(--radius-pill); + background: rgba(5, 7, 17, 0.68); +} + +.home-onboarding-dots button.active, +.home-onboarding-dots button:hover, +.home-onboarding-dots button:focus-visible { + background: var(--color-accent-gold); + box-shadow: 0 0 10px rgba(246, 196, 83, 0.26); +} + +.home-onboarding-cards { + display: grid; + grid-template-columns: repeat(2, minmax(260px, 320px)); + gap: var(--space-4); + justify-content: center; + padding-top: var(--space-6); + border-top: 1px solid rgba(150, 165, 205, 0.12); +} + +.home-onboarding-card { + position: relative; + isolation: isolate; + display: grid; + min-width: 0; + overflow: hidden; + align-content: start; + padding: 0; + border: 1px solid transparent; + border-radius: var(--radius-md); + background: + linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box, + radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box; + box-shadow: var(--shadow-sm); + text-decoration: none; + transition: + border-color var(--duration-fast) var(--ease-standard), + background var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +@supports (corner-shape: scoop) { + .home-onboarding-card { + corner-shape: scoop; + } +} + +.home-onboarding-card-visual { + position: relative; + display: grid; + aspect-ratio: 3 / 2; + min-height: 0; + place-items: center; + overflow: hidden; + border-bottom: 1px solid rgba(246, 196, 83, 0.42); + background: + radial-gradient(circle at 50% 15%, rgba(246, 196, 83, 0.12), transparent 34%), + rgba(5, 7, 17, 0.28); +} + +.home-onboarding-card-visual img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.3)); +} + +.home-onboarding-card-body { + display: grid; + gap: var(--space-3); + justify-items: center; + padding: var(--space-4); +} + +.home-onboarding-card-title { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + min-width: 0; + color: var(--color-text-primary); +} + +.home-onboarding-card-title .module-icon-svg { + width: 20px; + min-width: 20px; + height: 20px; + background: var(--color-accent-gold); +} + +.home-onboarding-card strong { + color: var(--color-text-primary); + font-size: var(--font-size-lg); + line-height: 1.2; +} + +.home-onboarding-card-text { + max-width: 30ch; + text-align: center; + font-size: var(--font-size-sm); +} + +.home-onboarding-card em { + display: inline-flex; + min-height: 38px; + align-items: center; + justify-content: center; + width: fit-content; + padding: 0 var(--space-3); + border: 1px solid rgba(246, 196, 83, 0.28); + border-radius: var(--radius-md); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); + font-style: normal; + font-size: var(--font-size-sm); + font-weight: 800; +} + +.home-onboarding-card:hover, +.home-onboarding-card:focus-visible { + transform: none; + border-color: transparent; + background: + linear-gradient(rgba(18, 23, 44, 0.96), rgba(18, 23, 44, 0.96)) padding-box, + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.26), transparent 28%) border-box, + linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(196, 181, 253, 0.34) 62%, rgba(34, 211, 238, 0.2)) border-box; + box-shadow: + var(--shadow-sm), + 0 0 18px rgba(139, 92, 246, 0.16); +} + +.home-visual { + display: grid; + align-self: center; + justify-self: center; + width: min(100%, 640px); + place-items: center; +} + +.home-visual img { + display: block; + width: 100%; + height: auto; + max-height: 520px; + border-radius: var(--radius-lg); + filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.34)); +} + diff --git a/website/src/styles/home/_shared.scss b/website/src/styles/home/_shared.scss new file mode 100644 index 0000000..d6aee3b --- /dev/null +++ b/website/src/styles/home/_shared.scss @@ -0,0 +1,201 @@ +// Rôle : regroupe les fondations partagées des pages home et sections éditoriales. +@use "../mixins"; + +.hero, +.game-hero, +.page-hero { + position: relative; + isolation: isolate; + display: grid; + min-height: 360px; + align-items: end; + gap: var(--space-6); + overflow: hidden; + border: 1px solid transparent; + border-radius: var(--radius-xl); + background: + var(--gradient-nebula), + radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%), + linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96)); + box-shadow: var(--shadow-md); + padding: var(--space-10); +} + +.hero::before, +.game-hero::before, +.page-hero::before { + content: ""; + position: absolute; + inset: 0; + z-index: 2; + padding: 1px; + border-radius: inherit; + background: + radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%), + linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3)); + @include mixins.border-mask; + pointer-events: none; +} + +.hero::after, +.game-hero::after, +.page-hero::after { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + background: + linear-gradient(135deg, rgba(5, 7, 17, 0.1), rgba(5, 7, 17, 0.52)), + radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.18), transparent 30%); +} + +.hero > *, +.game-hero > *, +.page-hero > * { + position: relative; + z-index: 1; +} + +.hero { + grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); +} + +.game-hero { + grid-template-columns: 1fr auto; + --game-hero-image: none; + color: white; +} + +.game-hero::after { + left: 35%; + opacity: 0.72; + background: + linear-gradient(90deg, rgba(5, 7, 17, 0.04), rgba(5, 7, 17, 0.2) 58%, rgba(5, 7, 17, 0.62) 100%), + var(--game-hero-image); + background-position: + center, + right center; + background-repeat: no-repeat; + background-size: + cover, + cover; + mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%); + -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%); +} + +.page-hero { + min-height: 180px; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + padding: var(--space-6); +} + +.page-hero p:last-child { + max-width: 720px; + margin-bottom: 0; +} + +h1, +h2, +p { + margin-top: 0; +} + +h1 { + max-width: 820px; + margin-bottom: 14px; + font-size: clamp(2rem, 4vw, var(--font-size-4xl)); + line-height: 1.05; +} + +h2 { + margin-bottom: 10px; + font-size: var(--font-size-xl); +} + +p, +li, +small, +span { + color: var(--color-text-secondary); +} + +.eyebrow { + margin-bottom: 10px; + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 800; + letter-spacing: 0; + text-transform: uppercase; +} + +.actions, +.card-actions, +.toolbar { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.toolbar-stack { + align-items: flex-start; + flex-direction: column; +} + +.toolbar-stack > div { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.hero-library-button { + display: inline-flex; + width: fit-content; + margin-top: var(--space-4); +} + +.library-link-button { + align-items: center; + gap: 8px; +} + +.library-link-button .ui-icon { + width: 16px; + height: 16px; + color: var(--color-accent-gold); +} + +.hero-panel { + padding: var(--space-5); + border: 1px solid rgba(165, 180, 252, 0.14); + border-radius: var(--radius-lg); + background: rgba(16, 20, 38, 0.72); + backdrop-filter: blur(18px); +} + +.hero-panel span { + display: block; + background: var(--gradient-brand); + background-clip: text; + color: transparent; + font-size: 56px; + font-weight: 800; + line-height: 1; +} + +.home-section-heading { + display: grid; + gap: var(--space-2); + min-width: 0; +} + +.home-section-heading h2, +.home-section-heading p { + margin: 0; +} + +.home-section-heading p:not(.eyebrow) { + max-width: 980px; +} + diff --git a/website/src/styles/home/_stats.scss b/website/src/styles/home/_stats.scss new file mode 100644 index 0000000..a5fe48a --- /dev/null +++ b/website/src/styles/home/_stats.scss @@ -0,0 +1,60 @@ +// Rôle : gère les statistiques et mentions légales de la home. + +.home-stats { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + align-self: start; +} + +.hero-stats { + align-self: center; + justify-self: end; + width: min(420px, 100%); +} + +.home-stats article { + min-height: 118px; + padding: var(--space-4); + border: 1px solid rgba(165, 180, 252, 0.14); + border-radius: var(--radius-md); + background: + linear-gradient(145deg, rgba(246, 196, 83, 0.08), transparent 52%), + rgba(7, 10, 24, 0.52); +} + +.home-stats strong { + display: block; + margin-bottom: 10px; + background: var(--gradient-brand); + background-clip: text; + color: transparent; + font-size: 44px; + font-weight: 900; + line-height: 0.95; +} + +.home-stats span { + display: block; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + font-weight: 700; + line-height: 1.35; +} + +.home-legal { + display: grid; + gap: 6px; + margin-top: var(--space-5); + padding-top: var(--space-4); + border-top: 1px solid rgba(150, 165, 205, 0.14); + color: var(--color-text-muted); + font-size: var(--font-size-xs); + line-height: 1.45; +} + +.home-legal p { + max-width: 920px; + margin: 0; +} + diff --git a/website/src/styles/home/_story.scss b/website/src/styles/home/_story.scss new file mode 100644 index 0000000..568218e --- /dev/null +++ b/website/src/styles/home/_story.scss @@ -0,0 +1,78 @@ +// Rôle : gère les panneaux narratifs Nebula et les dialogues home. +@use "../mixins"; + +.nebula-panel { + position: relative; + overflow: hidden; + border: 1px solid transparent; + border-radius: var(--radius-lg); + background: rgba(16, 20, 38, 0.42); + box-shadow: var(--shadow-sm); + + @include mixins.gold-panel-frame; +} + +.nebula-panel > * { + position: relative; + z-index: 1; +} + +.origin-section { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr); + gap: var(--space-6); + margin-top: var(--space-6); + padding: var(--space-6); +} + +.origin-copy { + min-width: 0; + padding-right: var(--space-6); + border-right: 2px solid rgba(246, 196, 83, 0.66); +} + +.home-dialogue { + position: relative; + display: grid; + gap: 8px; + margin-top: var(--space-4); +} + +.dialogue-line { + width: fit-content; + max-width: min(74ch, 86%); + margin: 0; + padding: 8px 11px; + border: 1px solid rgba(165, 180, 252, 0.14); + border-radius: 8px; + color: var(--color-text-primary); + font-size: var(--font-size-sm); + line-height: 1.35; + overflow-wrap: break-word; +} + +.dialogue-line-user { + justify-self: end; + background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 99, 235, 0.18)); +} + +.dialogue-line-app { + justify-self: start; + max-width: min(62ch, 68%); + background: rgba(7, 10, 24, 0.48); +} + +.dialogue-line i { + color: var(--color-text-secondary); + font-style: italic; +} + +.dialogue-caption { + display: block; + margin-top: 4px; + color: var(--color-text-muted); + font-size: var(--font-size-xs); + font-style: italic; + text-align: right; +} + diff --git a/website/src/styles/toolboxes/_calendar.scss b/website/src/styles/toolboxes/_calendar.scss index dbe8253..bc000d7 100644 --- a/website/src/styles/toolboxes/_calendar.scss +++ b/website/src/styles/toolboxes/_calendar.scss @@ -1,1067 +1,6 @@ -// Rôle : gère l’outil calendrier hebdomadaire/mensuel, ses grilles et ses événements. -.calendar-module { - display: grid; - gap: 14px; - min-width: 0; - max-width: 100%; - box-sizing: border-box; - padding: var(--space-4); -} - -.calendar-mode-choice { - display: grid; - padding-top: 2px; -} - -.calendar-mode-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.calendar-mode-card { - display: grid; - gap: 6px; - min-height: 92px; - align-content: center; - padding: 12px; - border: 1px solid rgba(246, 196, 83, 0.18); - border-radius: var(--radius-md); - background: rgba(16, 20, 38, 0.56); - color: var(--color-text-primary); - text-align: left; -} - -.calendar-mode-card:hover:not(:disabled) { - border-color: rgba(246, 196, 83, 0.42); - background: rgba(139, 92, 246, 0.14); -} - -.calendar-mode-card span { - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.calendar-mode-card.is-disabled { - cursor: not-allowed; - opacity: 0.58; -} - -.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; -} - -.calendar-week-options { - display: inline-flex; - align-items: center; - justify-self: end; - gap: 10px; - min-width: 0; - padding: 2px 0; - color: var(--color-text-muted); - font-size: 11px; - font-weight: 800; -} - -.calendar-month-toolbar { - display: grid; - grid-template-columns: 64px minmax(0, 1fr) auto 64px; - align-items: center; - gap: 8px; -} - -.calendar-month-toolbar strong { - min-width: 0; - color: var(--color-text-primary); - overflow: hidden; - font-size: 15px; - font-weight: 900; - text-align: center; - text-overflow: ellipsis; - text-transform: capitalize; - white-space: nowrap; -} - -.calendar-month-toolbar button { - min-height: 32px; - min-width: 0; - padding-inline: 9px; -} - -.calendar-hide-hours-switch { - justify-self: end; -} - -.calendar-hide-hours-switch .ui-icon { - width: 16px; - height: 16px; -} - -.calendar-week-grid { - display: grid; - grid-template-columns: 42px repeat(7, minmax(0, 1fr)); - width: 100%; - max-width: 100%; - box-sizing: border-box; - min-width: 0; - overflow: visible; - border: 1px solid rgba(150, 165, 205, 0.13); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.22); -} - -.calendar-time-header, -.calendar-day-header { - position: sticky; - top: 0; - z-index: 4; - min-height: 40px; - border-bottom: 1px solid rgba(150, 165, 205, 0.14); - background: rgba(10, 13, 27, 0.96); -} - -.calendar-time-header { - left: 0; - z-index: 5; -} - -.calendar-day-header { - display: grid; - place-items: center; - min-width: 0; - padding: 0 2px; - color: var(--color-text-secondary); - overflow: hidden; - font-size: 12px; - font-weight: 900; - text-overflow: ellipsis; - text-transform: capitalize; - white-space: nowrap; -} - -.calendar-time-column { - position: sticky; - left: 0; - z-index: 3; - display: grid; - border-right: 1px solid rgba(150, 165, 205, 0.12); - background: rgba(10, 13, 27, 0.92); -} - -.calendar-time-column span { - display: block; - min-width: 0; - padding: 2px 4px 0 0; - border-top: 1px solid rgba(150, 165, 205, 0.18); - color: var(--color-text-muted); - font-size: 11px; - font-weight: 800; - font-variant-numeric: tabular-nums; - text-align: right; -} - -.calendar-time-column .calendar-hidden-hours-label { - display: grid; - place-items: center; - min-width: 0; - padding: 0; - border-top: 1px solid rgba(246, 196, 83, 0.18); - border-bottom: 1px solid rgba(246, 196, 83, 0.12); - background: - repeating-linear-gradient( - -45deg, - rgba(246, 196, 83, 0.04) 0 4px, - rgba(246, 196, 83, 0.1) 4px 5px - ), - rgba(246, 196, 83, 0.035); - color: rgba(246, 196, 83, 0.78); - font-size: 9px; - font-weight: 900; - line-height: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-day-column { - position: relative; - display: grid; - min-width: 0; - border-right: 1px solid rgba(150, 165, 205, 0.08); -} - -.calendar-day-column.is-today { - background: rgba(246, 196, 83, 0.025); -} - -.calendar-hour-cell { - display: grid; - grid-template-rows: repeat(2, minmax(0, 1fr)); - min-width: 0; - border-top: 1px solid rgba(150, 165, 205, 0.3); -} - -.calendar-hidden-hours-cell { - display: grid; - place-items: center; - min-width: 0; - border-top: 1px solid rgba(246, 196, 83, 0.16); - border-bottom: 1px solid rgba(246, 196, 83, 0.08); - background: - repeating-linear-gradient( - -45deg, - rgba(246, 196, 83, 0.02) 0 5px, - rgba(246, 196, 83, 0.075) 5px 6px - ), - rgba(246, 196, 83, 0.025); -} - -.calendar-hidden-hours-cell span { - max-width: calc(100% - 8px); - padding: 1px 7px; - border: 1px solid rgba(246, 196, 83, 0.32); - border-radius: var(--radius-pill); - background: rgba(10, 13, 27, 0.82); - color: rgba(246, 196, 83, 0.86); - overflow: hidden; - font-size: 9px; - font-weight: 900; - line-height: 1.1; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-slot { - min-width: 0; - min-height: 0; - border: 0; - border-radius: 0; - background: transparent; - cursor: crosshair; -} - -.calendar-slot + .calendar-slot { - border-top: 1px dotted rgba(150, 165, 205, 0.12); -} - -.calendar-slot:hover, -.calendar-slot.is-form-selected { - background: rgba(246, 196, 83, 0.09); -} - -.calendar-slot.is-selected { - background: rgba(139, 92, 246, 0.18); -} - -.calendar-events-layer { - position: absolute; - inset: 0 2px; - pointer-events: none; -} - -.calendar-now-line { - position: absolute; - right: 0; - left: 0; - z-index: 3; - height: 0; - border-top: 1px solid rgba(246, 196, 83, 0.9); - pointer-events: none; -} - -.calendar-now-line::before { - position: absolute; - top: -4px; - left: -4px; - width: 7px; - height: 7px; - border-radius: var(--radius-pill); - background: var(--color-accent-gold); - box-shadow: 0 0 12px rgba(246, 196, 83, 0.7); - content: ""; -} - -.calendar-now-line span { - position: absolute; - top: -10px; - right: 3px; - padding: 1px 4px; - border: 1px solid rgba(246, 196, 83, 0.48); - border-radius: var(--radius-sm); - background: rgba(11, 14, 27, 0.92); - color: var(--color-accent-gold); - font-size: 9px; - font-weight: 900; - font-variant-numeric: tabular-nums; -} - -.calendar-event { - position: absolute; - left: calc((100% / var(--calendar-event-lane-count, 1)) * var(--calendar-event-lane, 0)); - width: calc((100% / var(--calendar-event-lane-count, 1)) - 2px); - z-index: 2; - display: block; - min-height: 24px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.22); - border-radius: var(--radius-sm); - background: rgba(139, 92, 246, 0.78); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); - pointer-events: auto; -} - -.calendar-event.is-active { - outline: 2px solid rgba(246, 196, 83, 0.72); - outline-offset: 1px; -} - -.calendar-event-button { - display: grid; - align-content: start; - gap: 1px; - min-width: 0; - padding: 5px 7px; - border: 0; - border-radius: 0; - background: transparent; - color: white; - text-align: left; - width: 100%; - height: 100%; -} - -.calendar-event-button:hover, -.calendar-event-button:focus-visible, -.calendar-month-bar-button:hover, -.calendar-month-bar-button:focus-visible { - background: rgba(0, 0, 0, 0.1); - box-shadow: none; -} - -.calendar-event-button > strong, -.calendar-event-button > span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-event-button > strong { - font-size: 10px; - line-height: 1; -} - -.calendar-event-button > span { - font-size: 9px; - opacity: 0.86; -} - -.calendar-event.is-compact { - min-height: 0; -} - -.calendar-event.is-compact .calendar-event-button { - place-items: center; - padding: 0 6px; -} - -.calendar-event-tooltip { - display: grid; - gap: 2px; -} - -.calendar-event-tooltip strong, -.calendar-event-tooltip span { - min-width: 0; -} - -.calendar-event-tooltip strong { - color: var(--color-text-primary); -} - -.calendar-event-gold { - border-color: rgba(11, 14, 27, 0.28); - background: rgba(230, 176, 55, 0.9); - color: #0b0e1b; -} - -.calendar-event-gold .calendar-event-button { - color: #0b0e1b; -} - -.calendar-event-gold .calendar-event-button > span { - color: rgba(11, 14, 27, 0.76); - opacity: 1; -} - -.calendar-event-cyan { - background: rgba(34, 211, 238, 0.72); -} - -.calendar-event-pink { - background: rgba(217, 70, 239, 0.72); -} - -.calendar-event-green { - background: rgba(34, 197, 94, 0.72); -} - -.calendar-event-gray { - background: rgba(125, 135, 159, 0.78); -} - -.calendar-month-grid { - position: relative; - display: grid; - grid-template-columns: repeat(7, minmax(0, 1fr)); - width: 100%; - max-width: 100%; - min-width: 0; - overflow: visible; - border: 1px solid rgba(150, 165, 205, 0.13); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.22); -} - -.calendar-month-bars-layer { - position: absolute; - inset: 0; - z-index: 3; - display: grid; - grid-template-columns: repeat(7, minmax(0, 1fr)); - grid-template-rows: 34px repeat(var(--calendar-month-week-count, 5), minmax(86px, 1fr)); - pointer-events: none; -} - -.calendar-month-header { - display: grid; - place-items: center; - min-height: 34px; - min-width: 0; - padding: 0 4px; - border-bottom: 1px solid rgba(150, 165, 205, 0.14); - background: rgba(10, 13, 27, 0.96); - color: var(--color-text-secondary); - overflow: hidden; - font-size: 12px; - font-weight: 900; - text-overflow: ellipsis; - text-transform: capitalize; - white-space: nowrap; -} - -.calendar-month-cell { - position: relative; - display: grid; - align-content: start; - gap: 5px; - min-width: 0; - min-height: 86px; - padding: 6px; - border-right: 1px solid rgba(150, 165, 205, 0.08); - border-bottom: 1px solid rgba(150, 165, 205, 0.08); - background: rgba(9, 12, 25, 0.34); - cursor: crosshair; -} - -.calendar-month-cell:hover, -.calendar-month-cell.is-form-selected { - background: rgba(246, 196, 83, 0.09); -} - -.calendar-month-cell.is-selected { - background: rgba(139, 92, 246, 0.18); -} - -.calendar-month-cell.is-today { - box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.58); - background: rgba(246, 196, 83, 0.08); -} - -.calendar-month-cell.is-outside { - cursor: default; - background: rgba(5, 7, 17, 0.18); -} - -.calendar-month-day-number { - color: var(--color-text-secondary); - font-size: 13px; - font-weight: 900; - font-variant-numeric: tabular-nums; -} - -.calendar-month-now-indicator { - position: absolute; - top: 5px; - right: 5px; - padding: 1px 5px; - border: 1px solid rgba(246, 196, 83, 0.48); - border-radius: var(--radius-pill); - background: rgba(11, 14, 27, 0.92); - color: var(--color-accent-gold); - font-size: 9px; - font-weight: 900; - font-variant-numeric: tabular-nums; -} - -.calendar-month-bar { - align-self: start; - min-width: 0; - min-height: var(--calendar-month-bar-height, 28px); - margin: calc(28px + (var(--calendar-event-lane, 0) * (var(--calendar-month-bar-height, 28px) + var(--calendar-month-bar-gap, 4px)))) 4px 0; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.22); - border-radius: var(--radius-sm); - background: rgba(139, 92, 246, 0.82); - box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); - pointer-events: auto; -} - -.calendar-month-bar.is-active { - outline: 2px solid rgba(246, 196, 83, 0.72); - outline-offset: 1px; -} - -.calendar-month-bar-button { - display: grid; - align-items: center; - width: 100%; - min-width: 0; - min-height: var(--calendar-month-bar-height, 28px); - padding: 0 9px; - border: 0; - border-radius: 0; - background: transparent; - color: white; - text-align: left; -} - -.calendar-month-bar strong { - min-width: 0; - overflow: hidden; - font-size: 10px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.calendar-month-bar.calendar-event-gold .calendar-month-bar-button { - color: #0b0e1b; -} - -.calendar-month-bar.calendar-event-gold { - border-color: rgba(11, 14, 27, 0.28); - background: rgba(230, 176, 55, 0.92); -} - -.calendar-month-bar.calendar-event-cyan { - background: rgba(34, 211, 238, 0.78); -} - -.calendar-month-bar.calendar-event-pink { - background: rgba(217, 70, 239, 0.78); -} - -.calendar-month-bar.calendar-event-green { - background: rgba(34, 197, 94, 0.78); -} - -.calendar-month-bar.calendar-event-gray { - background: rgba(125, 135, 159, 0.84); -} - -@media (max-width: 760px) { - .calendar-form-main-row, - .calendar-form-time-row, - .calendar-form-month-row, - .calendar-form-alert-row { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - - .calendar-mode-grid { - grid-template-columns: 1fr; - } - - .calendar-alert-offsets, - .calendar-alert-mode-switch, - .calendar-form-actions, - .calendar-repeat-field, - .calendar-month-event-repeat-field, - .calendar-month-repeat-field, - .calendar-form-error { - grid-column: 1 / -1; - } - - .calendar-repeat-switch, - .calendar-month-repeat-switch, - .calendar-month-event-repeat-switch, - .calendar-alert-mode-switch, - .calendar-color-picker { - justify-self: start; - } - - .calendar-week-grid { - grid-template-columns: 34px repeat(7, minmax(0, 1fr)); - } - - .calendar-day-header { - font-size: 9px; - } - - .calendar-month-header { - font-size: 9px; - } - - .calendar-month-cell { - min-height: 72px; - padding: 4px; - } - - .calendar-month-bars-layer { - grid-template-rows: 34px repeat(var(--calendar-month-week-count, 5), minmax(72px, 1fr)); - } -} +// Rôle : assemble les styles de l'outil calendrier par responsabilité. +@use "calendar/base"; +@use "calendar/form"; +@use "calendar/week"; +@use "calendar/month"; +@use "calendar/responsive"; diff --git a/website/src/styles/toolboxes/_equipment-planner.scss b/website/src/styles/toolboxes/_equipment-planner.scss index a61f0d0..901232c 100644 --- a/website/src/styles/toolboxes/_equipment-planner.scss +++ b/website/src/styles/toolboxes/_equipment-planner.scss @@ -1,1074 +1,6 @@ -// Rôle : gère l’outil equipment planner, ses sélecteurs, résumés, items et sertissages. -@use "../mixins"; - -.equipment-planner-module { - display: grid; - gap: 12px; - padding: var(--space-4); -} - -.equipment-planner-add-form { - grid-template-columns: 44px minmax(180px, 1fr) auto; -} - -.equipment-planner-picker { - position: relative; -} - -.equipment-planner-picker-trigger, -.equipment-planner-picker-option, -.equipment-planner-color-option { - display: inline-grid; - place-items: center; - min-height: 36px; - padding: 0; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.58); - color: var(--color-text-secondary); -} - -.equipment-planner-picker-trigger { - grid-template-columns: 1fr 10px; - width: 44px; - gap: 2px; -} - -.equipment-planner-shape-picker .equipment-planner-picker-trigger { - grid-template-columns: 28px 10px; - width: 50px; -} - -.equipment-planner-add-form .equipment-planner-picker-trigger, -.equipment-planner-add-form input, -.equipment-planner-add-form button { - min-height: 42px; -} - -.equipment-planner-picker-trigger .ui-icon:first-child, -.equipment-planner-picker-option .ui-icon { - width: 18px; - height: 18px; -} - -.equipment-planner-picker-trigger .equipment-planner-socket-icon { - width: 26px; - min-width: 26px; - height: 26px; -} - -.equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon { - width: 24px; - height: 24px; -} - -.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon, -.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon { - width: 28px; - min-width: 28px; - height: 28px; -} - -.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon, -.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon .ui-icon { - width: 26px; - height: 26px; -} - -.equipment-planner-picker-trigger .ui-icon:last-child { - width: 9px; - height: 9px; -} - -.equipment-planner-picker-trigger.active, -.equipment-planner-picker-option.active, -.equipment-planner-color-option.active { - border-color: rgba(246, 196, 83, 0.55); - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), - rgba(21, 26, 48, 0.76); - color: var(--color-text-primary); -} - -.equipment-planner-picker-menu { - position: fixed; - z-index: 12; - width: max-content; - max-width: calc(100vw - 16px); - padding: 8px; - border: 1px solid rgba(165, 180, 252, 0.14); - border-radius: var(--radius-md); - background: rgba(9, 12, 28, 0.98); - box-shadow: var(--shadow-md); -} - -.equipment-planner-picker-grid, -.equipment-planner-color-grid { - display: grid; - grid-template-columns: repeat(var(--picker-columns, 5), 32px); - gap: 7px; -} - -.equipment-planner-picker-option { - width: 32px; - min-width: 32px; - min-height: 32px; -} - -.equipment-planner-color-grid { - grid-template-columns: repeat(var(--picker-columns, 6), 28px); -} - -.equipment-planner-color-option { - width: 28px; - min-width: 28px; - min-height: 28px; -} - -.equipment-planner-summary, -.equipment-planner-type-section, -.equipment-planner-panel { - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(7, 10, 24, 0.28); -} - -.equipment-planner-summary { - display: grid; - gap: 10px; - padding: 12px; -} - -.equipment-planner-summary-header, -.equipment-planner-type-header, -.equipment-planner-trait-category-header, -.equipment-planner-socket-heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - min-width: 0; -} - -.equipment-planner-summary-header h3, -.equipment-planner-panel h4 { - margin: 0; - color: var(--color-text-primary); - font-size: var(--font-size-md); -} - -.equipment-planner-summary-header span, -.equipment-planner-type-actions > span, -.equipment-planner-trait-category-header span { - padding: 4px 8px; - border: 1px solid rgba(246, 196, 83, 0.18); - border-radius: var(--radius-pill); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); - font-size: var(--font-size-xs); - font-weight: 900; - white-space: nowrap; -} - -.equipment-planner-summary-grid { - display: grid; - gap: 10px; -} - -.equipment-planner-summary-source-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - align-items: start; - gap: 10px; -} - -.equipment-planner-summary-source-grid.columns-1 { - grid-template-columns: minmax(0, 1fr); -} - -.equipment-planner-summary-panel { - display: grid; - align-content: start; - gap: 8px; - min-width: 0; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.08); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.32); -} - -.equipment-planner-summary-grid strong, -.equipment-planner-field span { - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - text-transform: uppercase; -} - -.equipment-planner-summary-grid ul, -.equipment-planner-list, -.equipment-planner-equipment-list, -.equipment-planner-trait-list ul, -.equipment-planner-materials, -.equipment-planner-socket-bonuses { - display: grid; - align-content: start; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.equipment-planner-summary-grid li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - min-width: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.equipment-planner-summary-grid li.equipment-planner-summary-total { - grid-template-columns: 18px minmax(0, 1fr) auto; -} - -.equipment-planner-summary-total .ui-icon { - width: 16px; - height: 16px; - color: var(--color-accent-gold); -} - -.equipment-planner-summary-total .equipment-planner-socket-icon { - width: 18px; - min-width: 18px; - height: 18px; -} - -.equipment-planner-summary-total .equipment-planner-socket-icon .ui-icon { - width: 17px; - height: 17px; -} - -.equipment-planner-summary-grid li span, -.equipment-planner-summary-grid li small { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-summary-grid li b { - color: var(--color-text-primary); -} - -.equipment-planner-summary-grid li .ui-tooltip { - overflow: visible; - white-space: normal; -} - -.equipment-planner-summary-tooltip { - display: grid; - gap: 7px; - min-width: 190px; -} - -.equipment-planner-summary-tooltip > strong { - color: var(--color-text-primary); - font-size: var(--font-size-xs); -} - -.equipment-planner-summary-tooltip > span { - display: grid; - gap: 5px; -} - -.equipment-planner-summary-tooltip-row { - display: grid; - grid-template-columns: 16px minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - min-height: 18px; - line-height: 18px; -} - -.equipment-planner-summary-tooltip-row .ui-icon { - width: 14px; - height: 14px; - color: var(--color-accent-gold); -} - -.equipment-planner-summary-tooltip-row span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-summary-tooltip-row b { - color: var(--color-text-primary); -} - -.equipment-planner-summary-grid p, -.equipment-planner-muted, -.equipment-planner-empty { - margin: 0; - color: var(--color-text-muted); - font-size: var(--font-size-sm); -} - -.equipment-planner-type-section { - display: grid; - gap: 8px; - padding: 10px; -} - -.equipment-planner-list { - gap: 12px; -} - -.equipment-planner-type-section.is-drop-target, -.equipment-planner-item.is-drop-target, -.equipment-planner-trait-category.is-drop-target, -.equipment-planner-trait.is-drop-target { - border-color: rgba(246, 196, 83, 0.72); -} - -.equipment-planner-type-title { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; -} - -.equipment-planner-type-title h3 { - min-width: 0; - margin: 0; - overflow: hidden; - color: var(--color-text-primary); - font-size: var(--font-size-md); - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-type-icon { - display: inline-grid; - width: 28px; - min-width: 28px; - height: 28px; - place-items: center; - border: 1px solid rgba(246, 196, 83, 0.2); - border-radius: var(--radius-md); - background: rgba(246, 196, 83, 0.08); - color: var(--color-accent-gold); -} - -.equipment-planner-type-icon .ui-icon { - width: 16px; - height: 16px; -} - -.equipment-planner-type-actions { - display: inline-flex; - align-items: center; - gap: 8px; -} - -.equipment-planner-type-boundary-drop-zone { - min-height: 7px; - border-radius: var(--radius-pill); -} - -.equipment-planner-type-boundary-drop-zone.is-drop-target { - background: rgba(246, 196, 83, 0.5); -} - -.equipment-planner-equipment-list { - padding-left: 0; -} - -.equipment-planner-item { - display: grid; - gap: 10px; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.equipment-planner-item.is-inactive { - opacity: 0.68; -} - -.equipment-planner-line { - display: grid; - grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px; - gap: 8px; - align-items: center; -} - -.equipment-planner-name { - min-width: 0; - overflow: hidden; - color: var(--color-text-primary); - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-identity { - display: flex; - min-width: 0; - align-items: center; - gap: 8px; -} - -.equipment-planner-include-switch { - display: inline-flex; - align-items: center; - justify-self: end; - gap: 8px; - min-width: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; - cursor: pointer; -} - -.equipment-planner-include-switch input { - position: absolute; - opacity: 0; - pointer-events: none; -} - -.equipment-planner-include-switch > span { - position: relative; - width: 36px; - min-width: 36px; - height: 20px; - border: 1px solid rgba(165, 180, 252, 0.18); - border-radius: var(--radius-pill); - background: rgba(15, 23, 42, 0.8); -} - -.equipment-planner-include-switch > span::before { - content: ""; - position: absolute; - top: 3px; - left: 3px; - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--color-text-muted); - transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); -} - -.equipment-planner-include-switch input:checked + span { - border-color: rgba(246, 196, 83, 0.48); - background: rgba(246, 196, 83, 0.16); -} - -.equipment-planner-include-switch input:checked + span::before { - transform: translateX(16px); - background: var(--color-accent-gold); -} - -.equipment-planner-include-switch b { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-details { - display: grid; - gap: 10px; - padding: 0 0 0 48px; -} - -.equipment-planner-tabs { - display: flex; - width: fit-content; - max-width: 100%; - align-items: stretch; - overflow: hidden; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.36); -} - -.equipment-planner-tab { - display: inline-flex; - min-height: 34px; - align-items: center; - gap: 7px; - padding: 0 10px; - border: 0; - border-radius: 0; - background: transparent; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.equipment-planner-tab + .equipment-planner-tab { - border-left: 1px solid rgba(165, 180, 252, 0.1); -} - -.equipment-planner-tab.active { - background: - linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), - rgba(21, 26, 48, 0.64); - color: var(--color-text-primary); -} - -.equipment-planner-edit-mode-button { - display: inline-flex; - min-height: 34px; - align-items: center; - gap: 7px; - padding: 0 10px; - border: 0; - border-left: 1px solid rgba(165, 180, 252, 0.1); - border-radius: 0; - background: rgba(21, 26, 48, 0.42); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 900; -} - -.equipment-planner-edit-mode-button.active { - color: var(--color-accent-gold); -} - -.equipment-planner-edit-mode-button .ui-icon { - width: 15px; - height: 15px; -} - -.equipment-planner-tab .ui-icon, -.equipment-planner-percent-icon { - width: 16px; - height: 16px; -} - -.equipment-planner-percent-icon { - display: inline-grid; - place-items: center; - color: var(--color-accent-gold); - font-size: var(--font-size-sm); - font-weight: 900; -} - -.equipment-planner-craft-tab { - display: grid; - gap: 10px; -} - -.equipment-planner-readonly-text, -.equipment-planner-trait-readonly, -.equipment-planner-material-readonly { - margin: 0; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.equipment-planner-display-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.equipment-planner-display-panel { - display: grid; - align-content: start; - gap: 8px; - min-width: 0; - padding: 12px; - border: 1px solid rgba(165, 180, 252, 0.12); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.34); -} - -.equipment-planner-display-panel h4 { - margin: 0; - color: var(--color-accent-gold); - font-size: var(--font-size-md); -} - -.equipment-planner-display-panel ul { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.equipment-planner-display-panel li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 10px; - align-items: center; - color: var(--color-text-secondary); - font-size: var(--font-size-sm); -} - -.equipment-planner-display-stat { - grid-template-columns: 18px minmax(0, 1fr) auto !important; -} - -.equipment-planner-display-stat .ui-icon { - width: 16px; - height: 16px; - color: var(--color-accent-gold); -} - -.equipment-planner-display-panel p { - margin: 0; - color: var(--color-text-muted); - font-size: var(--font-size-sm); -} - -.equipment-planner-display-panel b { - color: var(--color-text-primary); -} - -.equipment-planner-display-socket { - grid-template-columns: 24px minmax(0, 1fr) !important; -} - -.equipment-planner-display-socket > div { - display: grid; - gap: 2px; - min-width: 0; -} - -.equipment-planner-display-socket strong, -.equipment-planner-display-socket small { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-display-socket small { - color: var(--color-text-muted); - font-size: var(--font-size-xs); -} - -.equipment-planner-trait-readonly, -.equipment-planner-material-readonly { - display: flex; - grid-column: 1 / -1; - min-width: 0; - align-items: center; - gap: 8px; -} - -.equipment-planner-trait-readonly .ui-icon { - width: 15px; - min-width: 15px; - height: 15px; - color: var(--color-accent-gold); -} - -.equipment-planner-trait-readonly span, -.equipment-planner-material-readonly span, -.equipment-planner-socket-heading strong { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-trait-readonly b, -.equipment-planner-material-readonly b { - margin-left: auto; - color: var(--color-text-primary); -} - -.equipment-planner-field, -.equipment-planner-panel { - display: grid; - gap: 8px; - min-width: 0; -} - -.equipment-planner-field textarea { - min-height: 70px; - resize: vertical; -} - -.equipment-planner-panel { - padding: 10px; -} - -.equipment-planner-trait-form { - grid-template-columns: 44px minmax(110px, 0.7fr) minmax(120px, 1fr) minmax(88px, 0.45fr) auto; -} - -.equipment-planner-trait-list, -.equipment-planner-trait-category { - display: grid; - gap: 8px; -} - -.equipment-planner-trait-category { - padding: 8px; - border: 1px solid rgba(165, 180, 252, 0.08); - border-radius: var(--radius-md); - background: rgba(21, 26, 48, 0.22); -} - -.equipment-planner-trait-category-header { - justify-content: flex-start; -} - -.equipment-planner-trait-category-header strong { - min-width: 0; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-trait { - display: grid; - grid-template-columns: 30px 44px minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(72px, 0.5fr) 30px; - gap: 7px; - align-items: center; -} - -.equipment-planner-material-form { - grid-template-columns: minmax(160px, 1fr) 82px auto; -} - -.equipment-planner-materials li { - display: grid; - grid-template-columns: minmax(0, 1fr) 82px 30px; - gap: 7px; - align-items: center; -} - -.equipment-planner-socket-form { - grid-template-columns: minmax(160px, 1fr) 44px 44px auto; -} - -.equipment-planner-socket-grid { - display: grid; - grid-template-columns: 1fr; - gap: 10px; -} - -.equipment-planner-socket-card { - display: grid; - gap: 8px; - min-width: 0; - padding: 10px; - border: 1px solid rgba(165, 180, 252, 0.1); - border-radius: var(--radius-md); - background: rgba(5, 7, 17, 0.34); -} - -.equipment-planner-socket-heading { - grid-template-columns: 30px minmax(0, 1fr) 30px; -} - -.equipment-planner-socket-heading input { - min-width: 0; -} - -.equipment-planner-socket-token { - display: inline-block; - width: 24px; - height: 24px; - border: 2px solid rgba(245, 247, 255, 0.36); - box-shadow: 0 0 18px rgba(246, 196, 83, 0.16); -} - -.equipment-planner-socket-icon { - display: inline-grid; - width: 24px; - min-width: 24px; - height: 24px; - place-items: center; -} - -.equipment-planner-socket-icon .ui-icon { - width: 22px; - height: 22px; - background: var(--equipment-socket-icon-color, currentColor); - color: var(--equipment-socket-icon-color, currentColor) !important; -} - -.equipment-planner-socket-icon.color-red { - color: #ef4444; -} - -.equipment-planner-socket-icon.color-orange { - color: #f97316; -} - -.equipment-planner-socket-icon.color-amber { - color: #f59e0b; -} - -.equipment-planner-socket-icon.color-yellow { - color: var(--color-accent-gold); -} - -.equipment-planner-socket-icon.color-lime { - color: #84cc16; -} - -.equipment-planner-socket-icon.color-green { - color: #22c55e; -} - -.equipment-planner-socket-icon.color-teal { - color: #14b8a6; -} - -.equipment-planner-socket-icon.color-cyan { - color: var(--color-accent-cyan); -} - -.equipment-planner-socket-icon.color-blue { - color: #3b82f6; -} - -.equipment-planner-socket-icon.color-indigo { - color: var(--color-accent-indigo); -} - -.equipment-planner-socket-icon.color-violet { - color: #7c3aed; -} - -.equipment-planner-socket-icon.color-purple { - color: var(--color-primary); -} - -.equipment-planner-socket-icon.color-pink { - color: var(--color-accent-pink); -} - -.equipment-planner-socket-icon.color-rose { - color: #f43f5e; -} - -.equipment-planner-socket-icon.color-white { - color: #f8fafc; -} - -.equipment-planner-socket-icon.color-gray { - color: #64748b; -} - -.equipment-planner-socket-icon.color-black { - color: #020617; -} - -.equipment-planner-color-swatch { - display: inline-block; - width: 16px; - height: 16px; - border: 1px solid rgba(245, 247, 255, 0.28); - border-radius: 50%; -} - -.equipment-planner-socket-token.color-red, -.equipment-planner-color-swatch.color-red { - background: #ef4444; -} - -.equipment-planner-socket-token.color-orange, -.equipment-planner-color-swatch.color-orange { - background: #f97316; -} - -.equipment-planner-socket-token.color-amber, -.equipment-planner-color-swatch.color-amber { - background: #f59e0b; -} - -.equipment-planner-socket-token.color-yellow, -.equipment-planner-color-swatch.color-yellow { - background: var(--color-accent-gold); -} - -.equipment-planner-socket-token.color-lime, -.equipment-planner-color-swatch.color-lime { - background: #84cc16; -} - -.equipment-planner-socket-token.color-green, -.equipment-planner-color-swatch.color-green { - background: #22c55e; -} - -.equipment-planner-socket-token.color-teal, -.equipment-planner-color-swatch.color-teal { - background: #14b8a6; -} - -.equipment-planner-socket-token.color-cyan, -.equipment-planner-color-swatch.color-cyan { - background: var(--color-accent-cyan); -} - -.equipment-planner-socket-token.color-blue, -.equipment-planner-color-swatch.color-blue { - background: #3b82f6; -} - -.equipment-planner-socket-token.color-indigo, -.equipment-planner-color-swatch.color-indigo { - background: var(--color-accent-indigo); -} - -.equipment-planner-socket-token.color-violet, -.equipment-planner-color-swatch.color-violet { - background: #7c3aed; -} - -.equipment-planner-socket-token.color-purple, -.equipment-planner-color-swatch.color-purple { - background: var(--color-primary); -} - -.equipment-planner-socket-token.color-pink, -.equipment-planner-color-swatch.color-pink { - background: var(--color-accent-pink); -} - -.equipment-planner-socket-token.color-rose, -.equipment-planner-color-swatch.color-rose { - background: #f43f5e; -} - -.equipment-planner-socket-token.color-white, -.equipment-planner-color-swatch.color-white { - background: #f8fafc; -} - -.equipment-planner-socket-token.color-gray, -.equipment-planner-color-swatch.color-gray { - background: #64748b; -} - -.equipment-planner-socket-token.color-black, -.equipment-planner-color-swatch.color-black { - background: #020617; -} - -.equipment-planner-socket-controls, -.equipment-planner-socket-links { - display: flex; - flex-wrap: wrap; - gap: 7px; - min-width: 0; -} - -.equipment-planner-socket-controls { - align-items: center; -} - -.equipment-planner-socket-links select { - min-height: 32px; - flex: 1 1 96px; -} - -.equipment-planner-socket-controls select { - width: min(150px, 100%); - min-height: 32px; - margin-left: auto; -} - -.equipment-planner-bonus-form { - grid-template-columns: minmax(110px, 1fr) minmax(64px, 0.45fr) 44px; -} - -.equipment-planner-socket-bonuses li { - display: grid; - grid-template-columns: minmax(0, 1fr) auto 30px; - gap: 7px; - align-items: center; - color: var(--color-text-secondary); - font-size: var(--font-size-xs); -} - -.equipment-planner-socket-bonuses span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-link-chip { - display: inline-flex; - max-width: 100%; - align-items: center; - gap: 6px; - min-height: 28px; - padding: 0 8px; - border: 1px solid rgba(34, 211, 238, 0.28); - border-radius: var(--radius-pill); - background: rgba(34, 211, 238, 0.08); - color: var(--color-text-secondary); - font-size: var(--font-size-xs); - font-weight: 800; -} - -.equipment-planner-link-chip::before { - content: ""; - width: 14px; - height: 1px; - background: var(--color-accent-cyan); -} - -.equipment-planner-link-chip span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.equipment-planner-link-chip .ui-icon { - width: 11px; - height: 11px; -} - -@media (max-width: 760px) { - .task-planner-task-settings { - grid-template-columns: 1fr; - } - - .equipment-planner-summary-grid, - .equipment-planner-summary-source-grid, - .equipment-planner-display-grid, - .equipment-planner-add-form, - .equipment-planner-trait-form, - .equipment-planner-material-form, - .equipment-planner-socket-form, - .equipment-planner-bonus-form { - grid-template-columns: 1fr; - } - - .equipment-planner-line { - grid-template-columns: 30px minmax(0, 1fr) 34px 30px; - } - - .equipment-planner-include-switch { - grid-column: 2 / -1; - justify-self: start; - } - - .equipment-planner-details { - padding-left: 0; - } - - .equipment-planner-trait, - .equipment-planner-materials li { - grid-template-columns: 1fr; - } -} +// Rôle : assemble les styles de l'outil equipment planner par responsabilité. +@use "equipment-planner/pickers"; +@use "equipment-planner/summary"; +@use "equipment-planner/items"; +@use "equipment-planner/details"; +@use "equipment-planner/sockets"; diff --git a/website/src/styles/toolboxes/calendar/_base.scss b/website/src/styles/toolboxes/calendar/_base.scss new file mode 100644 index 0000000..81288f7 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_base.scss @@ -0,0 +1,48 @@ +// Rôle : pose la structure du module calendrier et le choix initial. +.calendar-module { + display: grid; + gap: 14px; + min-width: 0; + max-width: 100%; + box-sizing: border-box; + padding: var(--space-4); +} + +.calendar-mode-choice { + display: grid; + padding-top: 2px; +} + +.calendar-mode-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.calendar-mode-card { + display: grid; + gap: 6px; + min-height: 92px; + align-content: center; + padding: 12px; + border: 1px solid rgba(246, 196, 83, 0.18); + border-radius: var(--radius-md); + background: rgba(16, 20, 38, 0.56); + color: var(--color-text-primary); + text-align: left; +} + +.calendar-mode-card:hover:not(:disabled) { + border-color: rgba(246, 196, 83, 0.42); + background: rgba(139, 92, 246, 0.14); +} + +.calendar-mode-card span { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.calendar-mode-card.is-disabled { + cursor: not-allowed; + opacity: 0.58; +} diff --git a/website/src/styles/toolboxes/calendar/_form.scss b/website/src/styles/toolboxes/calendar/_form.scss new file mode 100644 index 0000000..9fe2294 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_form.scss @@ -0,0 +1,449 @@ +// 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; +} diff --git a/website/src/styles/toolboxes/calendar/_month.scss b/website/src/styles/toolboxes/calendar/_month.scss new file mode 100644 index 0000000..b7f0cf9 --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_month.scss @@ -0,0 +1,159 @@ +// Rôle : stylise la grille mensuelle et ses barres multi-jours. +.calendar-month-grid { + position: relative; + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + width: 100%; + max-width: 100%; + min-width: 0; + overflow: visible; + border: 1px solid rgba(150, 165, 205, 0.13); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.22); +} + +.calendar-month-bars-layer { + position: absolute; + inset: 0; + z-index: 3; + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + grid-template-rows: 34px repeat(var(--calendar-month-week-count, 5), minmax(86px, 1fr)); + pointer-events: none; +} + +.calendar-month-header { + display: grid; + place-items: center; + min-height: 34px; + min-width: 0; + padding: 0 4px; + border-bottom: 1px solid rgba(150, 165, 205, 0.14); + background: rgba(10, 13, 27, 0.96); + color: var(--color-text-secondary); + overflow: hidden; + font-size: 12px; + font-weight: 900; + text-overflow: ellipsis; + text-transform: capitalize; + white-space: nowrap; +} + +.calendar-month-cell { + position: relative; + display: grid; + align-content: start; + gap: 5px; + min-width: 0; + min-height: 86px; + padding: 6px; + border-right: 1px solid rgba(150, 165, 205, 0.08); + border-bottom: 1px solid rgba(150, 165, 205, 0.08); + background: rgba(9, 12, 25, 0.34); + cursor: crosshair; +} + +.calendar-month-cell:hover, +.calendar-month-cell.is-form-selected { + background: rgba(246, 196, 83, 0.09); +} + +.calendar-month-cell.is-selected { + background: rgba(139, 92, 246, 0.18); +} + +.calendar-month-cell.is-today { + box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.58); + background: rgba(246, 196, 83, 0.08); +} + +.calendar-month-cell.is-outside { + cursor: default; + background: rgba(5, 7, 17, 0.18); +} + +.calendar-month-day-number { + color: var(--color-text-secondary); + font-size: 13px; + font-weight: 900; + font-variant-numeric: tabular-nums; +} + +.calendar-month-now-indicator { + position: absolute; + top: 5px; + right: 5px; + padding: 1px 5px; + border: 1px solid rgba(246, 196, 83, 0.48); + border-radius: var(--radius-pill); + background: rgba(11, 14, 27, 0.92); + color: var(--color-accent-gold); + font-size: 9px; + font-weight: 900; + font-variant-numeric: tabular-nums; +} + +.calendar-month-bar { + align-self: start; + min-width: 0; + min-height: var(--calendar-month-bar-height, 28px); + margin: calc(28px + (var(--calendar-event-lane, 0) * (var(--calendar-month-bar-height, 28px) + var(--calendar-month-bar-gap, 4px)))) 4px 0; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: var(--radius-sm); + background: rgba(139, 92, 246, 0.82); + box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); + pointer-events: auto; +} + +.calendar-month-bar.is-active { + outline: 2px solid rgba(246, 196, 83, 0.72); + outline-offset: 1px; +} + +.calendar-month-bar-button { + display: grid; + align-items: center; + width: 100%; + min-width: 0; + min-height: var(--calendar-month-bar-height, 28px); + padding: 0 9px; + border: 0; + border-radius: 0; + background: transparent; + color: white; + text-align: left; +} + +.calendar-month-bar strong { + min-width: 0; + overflow: hidden; + font-size: 10px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-month-bar.calendar-event-gold .calendar-month-bar-button { + color: #0b0e1b; +} + +.calendar-month-bar.calendar-event-gold { + border-color: rgba(11, 14, 27, 0.28); + background: rgba(230, 176, 55, 0.92); +} + +.calendar-month-bar.calendar-event-cyan { + background: rgba(34, 211, 238, 0.78); +} + +.calendar-month-bar.calendar-event-pink { + background: rgba(217, 70, 239, 0.78); +} + +.calendar-month-bar.calendar-event-green { + background: rgba(34, 197, 94, 0.78); +} + +.calendar-month-bar.calendar-event-gray { + background: rgba(125, 135, 159, 0.84); +} diff --git a/website/src/styles/toolboxes/calendar/_responsive.scss b/website/src/styles/toolboxes/calendar/_responsive.scss new file mode 100644 index 0000000..859f71c --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_responsive.scss @@ -0,0 +1,52 @@ +// Rôle : regroupe les ajustements responsive du calendrier. +@media (max-width: 760px) { + .calendar-form-main-row, + .calendar-form-time-row, + .calendar-form-month-row, + .calendar-form-alert-row { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + } + + .calendar-mode-grid { + grid-template-columns: 1fr; + } + + .calendar-alert-offsets, + .calendar-alert-mode-switch, + .calendar-form-actions, + .calendar-repeat-field, + .calendar-month-event-repeat-field, + .calendar-month-repeat-field, + .calendar-form-error { + grid-column: 1 / -1; + } + + .calendar-repeat-switch, + .calendar-month-repeat-switch, + .calendar-month-event-repeat-switch, + .calendar-alert-mode-switch, + .calendar-color-picker { + justify-self: start; + } + + .calendar-week-grid { + grid-template-columns: 34px repeat(7, minmax(0, 1fr)); + } + + .calendar-day-header { + font-size: 9px; + } + + .calendar-month-header { + font-size: 9px; + } + + .calendar-month-cell { + min-height: 72px; + padding: 4px; + } + + .calendar-month-bars-layer { + grid-template-rows: 34px repeat(var(--calendar-month-week-count, 5), minmax(72px, 1fr)); + } +} diff --git a/website/src/styles/toolboxes/calendar/_week.scss b/website/src/styles/toolboxes/calendar/_week.scss new file mode 100644 index 0000000..fde9ddb --- /dev/null +++ b/website/src/styles/toolboxes/calendar/_week.scss @@ -0,0 +1,359 @@ +// Rôle : stylise la grille hebdomadaire et ses événements. +.calendar-week-options { + display: inline-flex; + align-items: center; + justify-self: end; + gap: 10px; + min-width: 0; + padding: 2px 0; + color: var(--color-text-muted); + font-size: 11px; + font-weight: 800; +} + +.calendar-month-toolbar { + display: grid; + grid-template-columns: 64px minmax(0, 1fr) auto 64px; + align-items: center; + gap: 8px; +} + +.calendar-month-toolbar strong { + min-width: 0; + color: var(--color-text-primary); + overflow: hidden; + font-size: 15px; + font-weight: 900; + text-align: center; + text-overflow: ellipsis; + text-transform: capitalize; + white-space: nowrap; +} + +.calendar-month-toolbar button { + min-height: 32px; + min-width: 0; + padding-inline: 9px; +} + +.calendar-hide-hours-switch { + justify-self: end; +} + +.calendar-hide-hours-switch .ui-icon { + width: 16px; + height: 16px; +} + +.calendar-week-grid { + display: grid; + grid-template-columns: 42px repeat(7, minmax(0, 1fr)); + width: 100%; + max-width: 100%; + box-sizing: border-box; + min-width: 0; + overflow: visible; + border: 1px solid rgba(150, 165, 205, 0.13); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.22); +} + +.calendar-time-header, +.calendar-day-header { + position: sticky; + top: 0; + z-index: 4; + min-height: 40px; + border-bottom: 1px solid rgba(150, 165, 205, 0.14); + background: rgba(10, 13, 27, 0.96); +} + +.calendar-time-header { + left: 0; + z-index: 5; +} + +.calendar-day-header { + display: grid; + place-items: center; + min-width: 0; + padding: 0 2px; + color: var(--color-text-secondary); + overflow: hidden; + font-size: 12px; + font-weight: 900; + text-overflow: ellipsis; + text-transform: capitalize; + white-space: nowrap; +} + +.calendar-time-column { + position: sticky; + left: 0; + z-index: 3; + display: grid; + border-right: 1px solid rgba(150, 165, 205, 0.12); + background: rgba(10, 13, 27, 0.92); +} + +.calendar-time-column span { + display: block; + min-width: 0; + padding: 2px 4px 0 0; + border-top: 1px solid rgba(150, 165, 205, 0.18); + color: var(--color-text-muted); + font-size: 11px; + font-weight: 800; + font-variant-numeric: tabular-nums; + text-align: right; +} + +.calendar-time-column .calendar-hidden-hours-label { + display: grid; + place-items: center; + min-width: 0; + padding: 0; + border-top: 1px solid rgba(246, 196, 83, 0.18); + border-bottom: 1px solid rgba(246, 196, 83, 0.12); + background: + repeating-linear-gradient( + -45deg, + rgba(246, 196, 83, 0.04) 0 4px, + rgba(246, 196, 83, 0.1) 4px 5px + ), + rgba(246, 196, 83, 0.035); + color: rgba(246, 196, 83, 0.78); + font-size: 9px; + font-weight: 900; + line-height: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-day-column { + position: relative; + display: grid; + min-width: 0; + border-right: 1px solid rgba(150, 165, 205, 0.08); +} + +.calendar-day-column.is-today { + background: rgba(246, 196, 83, 0.025); +} + +.calendar-hour-cell { + display: grid; + grid-template-rows: repeat(2, minmax(0, 1fr)); + min-width: 0; + border-top: 1px solid rgba(150, 165, 205, 0.3); +} + +.calendar-hidden-hours-cell { + display: grid; + place-items: center; + min-width: 0; + border-top: 1px solid rgba(246, 196, 83, 0.16); + border-bottom: 1px solid rgba(246, 196, 83, 0.08); + background: + repeating-linear-gradient( + -45deg, + rgba(246, 196, 83, 0.02) 0 5px, + rgba(246, 196, 83, 0.075) 5px 6px + ), + rgba(246, 196, 83, 0.025); +} + +.calendar-hidden-hours-cell span { + max-width: calc(100% - 8px); + padding: 1px 7px; + border: 1px solid rgba(246, 196, 83, 0.32); + border-radius: var(--radius-pill); + background: rgba(10, 13, 27, 0.82); + color: rgba(246, 196, 83, 0.86); + overflow: hidden; + font-size: 9px; + font-weight: 900; + line-height: 1.1; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-slot { + min-width: 0; + min-height: 0; + border: 0; + border-radius: 0; + background: transparent; + cursor: crosshair; +} + +.calendar-slot + .calendar-slot { + border-top: 1px dotted rgba(150, 165, 205, 0.12); +} + +.calendar-slot:hover, +.calendar-slot.is-form-selected { + background: rgba(246, 196, 83, 0.09); +} + +.calendar-slot.is-selected { + background: rgba(139, 92, 246, 0.18); +} + +.calendar-events-layer { + position: absolute; + inset: 0 2px; + pointer-events: none; +} + +.calendar-now-line { + position: absolute; + right: 0; + left: 0; + z-index: 3; + height: 0; + border-top: 1px solid rgba(246, 196, 83, 0.9); + pointer-events: none; +} + +.calendar-now-line::before { + position: absolute; + top: -4px; + left: -4px; + width: 7px; + height: 7px; + border-radius: var(--radius-pill); + background: var(--color-accent-gold); + box-shadow: 0 0 12px rgba(246, 196, 83, 0.7); + content: ""; +} + +.calendar-now-line span { + position: absolute; + top: -10px; + right: 3px; + padding: 1px 4px; + border: 1px solid rgba(246, 196, 83, 0.48); + border-radius: var(--radius-sm); + background: rgba(11, 14, 27, 0.92); + color: var(--color-accent-gold); + font-size: 9px; + font-weight: 900; + font-variant-numeric: tabular-nums; +} + +.calendar-event { + position: absolute; + left: calc((100% / var(--calendar-event-lane-count, 1)) * var(--calendar-event-lane, 0)); + width: calc((100% / var(--calendar-event-lane-count, 1)) - 2px); + z-index: 2; + display: block; + min-height: 24px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: var(--radius-sm); + background: rgba(139, 92, 246, 0.78); + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); + pointer-events: auto; +} + +.calendar-event.is-active { + outline: 2px solid rgba(246, 196, 83, 0.72); + outline-offset: 1px; +} + +.calendar-event-button { + display: grid; + align-content: start; + gap: 1px; + min-width: 0; + padding: 5px 7px; + border: 0; + border-radius: 0; + background: transparent; + color: white; + text-align: left; + width: 100%; + height: 100%; +} + +.calendar-event-button:hover, +.calendar-event-button:focus-visible, +.calendar-month-bar-button:hover, +.calendar-month-bar-button:focus-visible { + background: rgba(0, 0, 0, 0.1); + box-shadow: none; +} + +.calendar-event-button > strong, +.calendar-event-button > span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.calendar-event-button > strong { + font-size: 10px; + line-height: 1; +} + +.calendar-event-button > span { + font-size: 9px; + opacity: 0.86; +} + +.calendar-event.is-compact { + min-height: 0; +} + +.calendar-event.is-compact .calendar-event-button { + place-items: center; + padding: 0 6px; +} + +.calendar-event-tooltip { + display: grid; + gap: 2px; +} + +.calendar-event-tooltip strong, +.calendar-event-tooltip span { + min-width: 0; +} + +.calendar-event-tooltip strong { + color: var(--color-text-primary); +} + +.calendar-event-gold { + border-color: rgba(11, 14, 27, 0.28); + background: rgba(230, 176, 55, 0.9); + color: #0b0e1b; +} + +.calendar-event-gold .calendar-event-button { + color: #0b0e1b; +} + +.calendar-event-gold .calendar-event-button > span { + color: rgba(11, 14, 27, 0.76); + opacity: 1; +} + +.calendar-event-cyan { + background: rgba(34, 211, 238, 0.72); +} + +.calendar-event-pink { + background: rgba(217, 70, 239, 0.72); +} + +.calendar-event-green { + background: rgba(34, 197, 94, 0.72); +} + +.calendar-event-gray { + background: rgba(125, 135, 159, 0.78); +} diff --git a/website/src/styles/toolboxes/equipment-planner/_details.scss b/website/src/styles/toolboxes/equipment-planner/_details.scss new file mode 100644 index 0000000..ac14c58 --- /dev/null +++ b/website/src/styles/toolboxes/equipment-planner/_details.scss @@ -0,0 +1,179 @@ +// Rôle : stylise les détails, formulaires et traits equipment planner. +.equipment-planner-craft-tab { + display: grid; + gap: 10px; +} + +.equipment-planner-readonly-text, +.equipment-planner-trait-readonly, +.equipment-planner-material-readonly { + margin: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.equipment-planner-display-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.equipment-planner-display-panel { + display: grid; + align-content: start; + gap: 8px; + min-width: 0; + padding: 12px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.34); +} + +.equipment-planner-display-panel h4 { + margin: 0; + color: var(--color-accent-gold); + font-size: var(--font-size-md); +} + +.equipment-planner-display-panel ul { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.equipment-planner-display-panel li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.equipment-planner-display-stat { + grid-template-columns: 18px minmax(0, 1fr) auto !important; +} + +.equipment-planner-display-stat .ui-icon { + width: 16px; + height: 16px; + color: var(--color-accent-gold); +} + +.equipment-planner-display-panel p { + margin: 0; + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +.equipment-planner-display-panel b { + color: var(--color-text-primary); +} + +.equipment-planner-display-socket { + grid-template-columns: 24px minmax(0, 1fr) !important; +} + +.equipment-planner-display-socket > div { + display: grid; + gap: 2px; + min-width: 0; +} + +.equipment-planner-display-socket strong, +.equipment-planner-display-socket small { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-display-socket small { + color: var(--color-text-muted); + font-size: var(--font-size-xs); +} + +.equipment-planner-trait-readonly, +.equipment-planner-material-readonly { + display: flex; + grid-column: 1 / -1; + min-width: 0; + align-items: center; + gap: 8px; +} + +.equipment-planner-trait-readonly .ui-icon { + width: 15px; + min-width: 15px; + height: 15px; + color: var(--color-accent-gold); +} + +.equipment-planner-trait-readonly span, +.equipment-planner-material-readonly span, +.equipment-planner-socket-heading strong { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-trait-readonly b, +.equipment-planner-material-readonly b { + margin-left: auto; + color: var(--color-text-primary); +} + +.equipment-planner-field, +.equipment-planner-panel { + display: grid; + gap: 8px; + min-width: 0; +} + +.equipment-planner-field textarea { + min-height: 70px; + resize: vertical; +} + +.equipment-planner-panel { + padding: 10px; +} + +.equipment-planner-trait-form { + grid-template-columns: 44px minmax(110px, 0.7fr) minmax(120px, 1fr) minmax(88px, 0.45fr) auto; +} + +.equipment-planner-trait-list, +.equipment-planner-trait-category { + display: grid; + gap: 8px; +} + +.equipment-planner-trait-category { + padding: 8px; + border: 1px solid rgba(165, 180, 252, 0.08); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.22); +} + +.equipment-planner-trait-category-header { + justify-content: flex-start; +} + +.equipment-planner-trait-category-header strong { + min-width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-trait { + display: grid; + grid-template-columns: 30px 44px minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(72px, 0.5fr) 30px; + gap: 7px; + align-items: center; +} diff --git a/website/src/styles/toolboxes/equipment-planner/_items.scss b/website/src/styles/toolboxes/equipment-planner/_items.scss new file mode 100644 index 0000000..975b556 --- /dev/null +++ b/website/src/styles/toolboxes/equipment-planner/_items.scss @@ -0,0 +1,242 @@ +// Rôle : stylise les sections, items, onglets et modes d'édition equipment planner. +.equipment-planner-type-section { + display: grid; + gap: 8px; + padding: 10px; +} + +.equipment-planner-list { + gap: 12px; +} + +.equipment-planner-type-section.is-drop-target, +.equipment-planner-item.is-drop-target, +.equipment-planner-trait-category.is-drop-target, +.equipment-planner-trait.is-drop-target { + border-color: rgba(246, 196, 83, 0.72); +} + +.equipment-planner-type-title { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} + +.equipment-planner-type-title h3 { + min-width: 0; + margin: 0; + overflow: hidden; + color: var(--color-text-primary); + font-size: var(--font-size-md); + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-type-icon { + display: inline-grid; + width: 28px; + min-width: 28px; + height: 28px; + place-items: center; + border: 1px solid rgba(246, 196, 83, 0.2); + border-radius: var(--radius-md); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); +} + +.equipment-planner-type-icon .ui-icon { + width: 16px; + height: 16px; +} + +.equipment-planner-type-actions { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.equipment-planner-type-boundary-drop-zone { + min-height: 7px; + border-radius: var(--radius-pill); +} + +.equipment-planner-type-boundary-drop-zone.is-drop-target { + background: rgba(246, 196, 83, 0.5); +} + +.equipment-planner-equipment-list { + padding-left: 0; +} + +.equipment-planner-item { + display: grid; + gap: 10px; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.equipment-planner-item.is-inactive { + opacity: 0.68; +} + +.equipment-planner-line { + display: grid; + grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px; + gap: 8px; + align-items: center; +} + +.equipment-planner-name { + min-width: 0; + overflow: hidden; + color: var(--color-text-primary); + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-identity { + display: flex; + min-width: 0; + align-items: center; + gap: 8px; +} + +.equipment-planner-include-switch { + display: inline-flex; + align-items: center; + justify-self: end; + gap: 8px; + min-width: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + cursor: pointer; +} + +.equipment-planner-include-switch input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.equipment-planner-include-switch > span { + position: relative; + width: 36px; + min-width: 36px; + height: 20px; + border: 1px solid rgba(165, 180, 252, 0.18); + border-radius: var(--radius-pill); + background: rgba(15, 23, 42, 0.8); +} + +.equipment-planner-include-switch > span::before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--color-text-muted); + transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); +} + +.equipment-planner-include-switch input:checked + span { + border-color: rgba(246, 196, 83, 0.48); + background: rgba(246, 196, 83, 0.16); +} + +.equipment-planner-include-switch input:checked + span::before { + transform: translateX(16px); + background: var(--color-accent-gold); +} + +.equipment-planner-include-switch b { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-details { + display: grid; + gap: 10px; + padding: 0 0 0 48px; +} + +.equipment-planner-tabs { + display: flex; + width: fit-content; + max-width: 100%; + align-items: stretch; + overflow: hidden; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.36); +} + +.equipment-planner-tab { + display: inline-flex; + min-height: 34px; + align-items: center; + gap: 7px; + padding: 0 10px; + border: 0; + border-radius: 0; + background: transparent; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.equipment-planner-tab + .equipment-planner-tab { + border-left: 1px solid rgba(165, 180, 252, 0.1); +} + +.equipment-planner-tab.active { + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), + rgba(21, 26, 48, 0.64); + color: var(--color-text-primary); +} + +.equipment-planner-edit-mode-button { + display: inline-flex; + min-height: 34px; + align-items: center; + gap: 7px; + padding: 0 10px; + border: 0; + border-left: 1px solid rgba(165, 180, 252, 0.1); + border-radius: 0; + background: rgba(21, 26, 48, 0.42); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; +} + +.equipment-planner-edit-mode-button.active { + color: var(--color-accent-gold); +} + +.equipment-planner-edit-mode-button .ui-icon { + width: 15px; + height: 15px; +} + +.equipment-planner-tab .ui-icon, +.equipment-planner-percent-icon { + width: 16px; + height: 16px; +} + +.equipment-planner-percent-icon { + display: inline-grid; + place-items: center; + color: var(--color-accent-gold); + font-size: var(--font-size-sm); + font-weight: 900; +} diff --git a/website/src/styles/toolboxes/equipment-planner/_pickers.scss b/website/src/styles/toolboxes/equipment-planner/_pickers.scss new file mode 100644 index 0000000..99f2870 --- /dev/null +++ b/website/src/styles/toolboxes/equipment-planner/_pickers.scss @@ -0,0 +1,124 @@ +// Rôle : stylise les sélecteurs et le formulaire d'ajout equipment planner. +.equipment-planner-module { + display: grid; + gap: 12px; + padding: var(--space-4); +} + +.equipment-planner-add-form { + grid-template-columns: 44px minmax(180px, 1fr) auto; +} + +.equipment-planner-picker { + position: relative; +} + +.equipment-planner-picker-trigger, +.equipment-planner-picker-option, +.equipment-planner-color-option { + display: inline-grid; + place-items: center; + min-height: 36px; + padding: 0; + border: 1px solid rgba(165, 180, 252, 0.12); + border-radius: var(--radius-md); + background: rgba(21, 26, 48, 0.58); + color: var(--color-text-secondary); +} + +.equipment-planner-picker-trigger { + grid-template-columns: 1fr 10px; + width: 44px; + gap: 2px; +} + +.equipment-planner-shape-picker .equipment-planner-picker-trigger { + grid-template-columns: 28px 10px; + width: 50px; +} + +.equipment-planner-add-form .equipment-planner-picker-trigger, +.equipment-planner-add-form input, +.equipment-planner-add-form button { + min-height: 42px; +} + +.equipment-planner-picker-trigger .ui-icon:first-child, +.equipment-planner-picker-option .ui-icon { + width: 18px; + height: 18px; +} + +.equipment-planner-picker-trigger .equipment-planner-socket-icon { + width: 26px; + min-width: 26px; + height: 26px; +} + +.equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon { + width: 24px; + height: 24px; +} + +.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon, +.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon { + width: 28px; + min-width: 28px; + height: 28px; +} + +.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon, +.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon .ui-icon { + width: 26px; + height: 26px; +} + +.equipment-planner-picker-trigger .ui-icon:last-child { + width: 9px; + height: 9px; +} + +.equipment-planner-picker-trigger.active, +.equipment-planner-picker-option.active, +.equipment-planner-color-option.active { + border-color: rgba(246, 196, 83, 0.55); + background: + linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)), + rgba(21, 26, 48, 0.76); + color: var(--color-text-primary); +} + +.equipment-planner-picker-menu { + position: fixed; + z-index: 12; + width: max-content; + max-width: calc(100vw - 16px); + padding: 8px; + border: 1px solid rgba(165, 180, 252, 0.14); + border-radius: var(--radius-md); + background: rgba(9, 12, 28, 0.98); + box-shadow: var(--shadow-md); +} + +.equipment-planner-picker-grid, +.equipment-planner-color-grid { + display: grid; + grid-template-columns: repeat(var(--picker-columns, 5), 32px); + gap: 7px; +} + +.equipment-planner-picker-option { + width: 32px; + min-width: 32px; + min-height: 32px; +} + +.equipment-planner-color-grid { + grid-template-columns: repeat(var(--picker-columns, 6), 28px); +} + +.equipment-planner-color-option { + width: 28px; + min-width: 28px; + min-height: 28px; +} diff --git a/website/src/styles/toolboxes/equipment-planner/_sockets.scss b/website/src/styles/toolboxes/equipment-planner/_sockets.scss new file mode 100644 index 0000000..b801c50 --- /dev/null +++ b/website/src/styles/toolboxes/equipment-planner/_sockets.scss @@ -0,0 +1,335 @@ +// Rôle : stylise les sertissages, couleurs et ajustements responsive equipment planner. +.equipment-planner-material-form { + grid-template-columns: minmax(160px, 1fr) 82px auto; +} + +.equipment-planner-materials li { + display: grid; + grid-template-columns: minmax(0, 1fr) 82px 30px; + gap: 7px; + align-items: center; +} + +.equipment-planner-socket-form { + grid-template-columns: minmax(160px, 1fr) 44px 44px auto; +} + +.equipment-planner-socket-grid { + display: grid; + grid-template-columns: 1fr; + gap: 10px; +} + +.equipment-planner-socket-card { + display: grid; + gap: 8px; + min-width: 0; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.34); +} + +.equipment-planner-socket-heading { + grid-template-columns: 30px minmax(0, 1fr) 30px; +} + +.equipment-planner-socket-heading input { + min-width: 0; +} + +.equipment-planner-socket-token { + display: inline-block; + width: 24px; + height: 24px; + border: 2px solid rgba(245, 247, 255, 0.36); + box-shadow: 0 0 18px rgba(246, 196, 83, 0.16); +} + +.equipment-planner-socket-icon { + display: inline-grid; + width: 24px; + min-width: 24px; + height: 24px; + place-items: center; +} + +.equipment-planner-socket-icon .ui-icon { + width: 22px; + height: 22px; + background: var(--equipment-socket-icon-color, currentColor); + color: var(--equipment-socket-icon-color, currentColor) !important; +} + +.equipment-planner-socket-icon.color-red { + color: #ef4444; +} + +.equipment-planner-socket-icon.color-orange { + color: #f97316; +} + +.equipment-planner-socket-icon.color-amber { + color: #f59e0b; +} + +.equipment-planner-socket-icon.color-yellow { + color: var(--color-accent-gold); +} + +.equipment-planner-socket-icon.color-lime { + color: #84cc16; +} + +.equipment-planner-socket-icon.color-green { + color: #22c55e; +} + +.equipment-planner-socket-icon.color-teal { + color: #14b8a6; +} + +.equipment-planner-socket-icon.color-cyan { + color: var(--color-accent-cyan); +} + +.equipment-planner-socket-icon.color-blue { + color: #3b82f6; +} + +.equipment-planner-socket-icon.color-indigo { + color: var(--color-accent-indigo); +} + +.equipment-planner-socket-icon.color-violet { + color: #7c3aed; +} + +.equipment-planner-socket-icon.color-purple { + color: var(--color-primary); +} + +.equipment-planner-socket-icon.color-pink { + color: var(--color-accent-pink); +} + +.equipment-planner-socket-icon.color-rose { + color: #f43f5e; +} + +.equipment-planner-socket-icon.color-white { + color: #f8fafc; +} + +.equipment-planner-socket-icon.color-gray { + color: #64748b; +} + +.equipment-planner-socket-icon.color-black { + color: #020617; +} + +.equipment-planner-color-swatch { + display: inline-block; + width: 16px; + height: 16px; + border: 1px solid rgba(245, 247, 255, 0.28); + border-radius: 50%; +} + +.equipment-planner-socket-token.color-red, +.equipment-planner-color-swatch.color-red { + background: #ef4444; +} + +.equipment-planner-socket-token.color-orange, +.equipment-planner-color-swatch.color-orange { + background: #f97316; +} + +.equipment-planner-socket-token.color-amber, +.equipment-planner-color-swatch.color-amber { + background: #f59e0b; +} + +.equipment-planner-socket-token.color-yellow, +.equipment-planner-color-swatch.color-yellow { + background: var(--color-accent-gold); +} + +.equipment-planner-socket-token.color-lime, +.equipment-planner-color-swatch.color-lime { + background: #84cc16; +} + +.equipment-planner-socket-token.color-green, +.equipment-planner-color-swatch.color-green { + background: #22c55e; +} + +.equipment-planner-socket-token.color-teal, +.equipment-planner-color-swatch.color-teal { + background: #14b8a6; +} + +.equipment-planner-socket-token.color-cyan, +.equipment-planner-color-swatch.color-cyan { + background: var(--color-accent-cyan); +} + +.equipment-planner-socket-token.color-blue, +.equipment-planner-color-swatch.color-blue { + background: #3b82f6; +} + +.equipment-planner-socket-token.color-indigo, +.equipment-planner-color-swatch.color-indigo { + background: var(--color-accent-indigo); +} + +.equipment-planner-socket-token.color-violet, +.equipment-planner-color-swatch.color-violet { + background: #7c3aed; +} + +.equipment-planner-socket-token.color-purple, +.equipment-planner-color-swatch.color-purple { + background: var(--color-primary); +} + +.equipment-planner-socket-token.color-pink, +.equipment-planner-color-swatch.color-pink { + background: var(--color-accent-pink); +} + +.equipment-planner-socket-token.color-rose, +.equipment-planner-color-swatch.color-rose { + background: #f43f5e; +} + +.equipment-planner-socket-token.color-white, +.equipment-planner-color-swatch.color-white { + background: #f8fafc; +} + +.equipment-planner-socket-token.color-gray, +.equipment-planner-color-swatch.color-gray { + background: #64748b; +} + +.equipment-planner-socket-token.color-black, +.equipment-planner-color-swatch.color-black { + background: #020617; +} + +.equipment-planner-socket-controls, +.equipment-planner-socket-links { + display: flex; + flex-wrap: wrap; + gap: 7px; + min-width: 0; +} + +.equipment-planner-socket-controls { + align-items: center; +} + +.equipment-planner-socket-links select { + min-height: 32px; + flex: 1 1 96px; +} + +.equipment-planner-socket-controls select { + width: min(150px, 100%); + min-height: 32px; + margin-left: auto; +} + +.equipment-planner-bonus-form { + grid-template-columns: minmax(110px, 1fr) minmax(64px, 0.45fr) 44px; +} + +.equipment-planner-socket-bonuses li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto 30px; + gap: 7px; + align-items: center; + color: var(--color-text-secondary); + font-size: var(--font-size-xs); +} + +.equipment-planner-socket-bonuses span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-link-chip { + display: inline-flex; + max-width: 100%; + align-items: center; + gap: 6px; + min-height: 28px; + padding: 0 8px; + border: 1px solid rgba(34, 211, 238, 0.28); + border-radius: var(--radius-pill); + background: rgba(34, 211, 238, 0.08); + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 800; +} + +.equipment-planner-link-chip::before { + content: ""; + width: 14px; + height: 1px; + background: var(--color-accent-cyan); +} + +.equipment-planner-link-chip span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-link-chip .ui-icon { + width: 11px; + height: 11px; +} + +@media (max-width: 760px) { + .task-planner-task-settings { + grid-template-columns: 1fr; + } + + .equipment-planner-summary-grid, + .equipment-planner-summary-source-grid, + .equipment-planner-display-grid, + .equipment-planner-add-form, + .equipment-planner-trait-form, + .equipment-planner-material-form, + .equipment-planner-socket-form, + .equipment-planner-bonus-form { + grid-template-columns: 1fr; + } + + .equipment-planner-line { + grid-template-columns: 30px minmax(0, 1fr) 34px 30px; + } + + .equipment-planner-include-switch { + grid-column: 2 / -1; + justify-self: start; + } + + .equipment-planner-details { + padding-left: 0; + } + + .equipment-planner-trait, + .equipment-planner-materials li { + grid-template-columns: 1fr; + } +} diff --git a/website/src/styles/toolboxes/equipment-planner/_summary.scss b/website/src/styles/toolboxes/equipment-planner/_summary.scss new file mode 100644 index 0000000..4f55c1a --- /dev/null +++ b/website/src/styles/toolboxes/equipment-planner/_summary.scss @@ -0,0 +1,192 @@ +// Rôle : stylise les résumés, listes et panneaux principaux equipment planner. +.equipment-planner-summary, +.equipment-planner-type-section, +.equipment-planner-panel { + border: 1px solid rgba(165, 180, 252, 0.1); + border-radius: var(--radius-md); + background: rgba(7, 10, 24, 0.28); +} + +.equipment-planner-summary { + display: grid; + gap: 10px; + padding: 12px; +} + +.equipment-planner-summary-header, +.equipment-planner-type-header, +.equipment-planner-trait-category-header, +.equipment-planner-socket-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + min-width: 0; +} + +.equipment-planner-summary-header h3, +.equipment-planner-panel h4 { + margin: 0; + color: var(--color-text-primary); + font-size: var(--font-size-md); +} + +.equipment-planner-summary-header span, +.equipment-planner-type-actions > span, +.equipment-planner-trait-category-header span { + padding: 4px 8px; + border: 1px solid rgba(246, 196, 83, 0.18); + border-radius: var(--radius-pill); + background: rgba(246, 196, 83, 0.08); + color: var(--color-accent-gold); + font-size: var(--font-size-xs); + font-weight: 900; + white-space: nowrap; +} + +.equipment-planner-summary-grid { + display: grid; + gap: 10px; +} + +.equipment-planner-summary-source-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: start; + gap: 10px; +} + +.equipment-planner-summary-source-grid.columns-1 { + grid-template-columns: minmax(0, 1fr); +} + +.equipment-planner-summary-panel { + display: grid; + align-content: start; + gap: 8px; + min-width: 0; + padding: 10px; + border: 1px solid rgba(165, 180, 252, 0.08); + border-radius: var(--radius-md); + background: rgba(5, 7, 17, 0.32); +} + +.equipment-planner-summary-grid strong, +.equipment-planner-field span { + color: var(--color-text-secondary); + font-size: var(--font-size-xs); + font-weight: 900; + text-transform: uppercase; +} + +.equipment-planner-summary-grid ul, +.equipment-planner-list, +.equipment-planner-equipment-list, +.equipment-planner-trait-list ul, +.equipment-planner-materials, +.equipment-planner-socket-bonuses { + display: grid; + align-content: start; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.equipment-planner-summary-grid li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + min-width: 0; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.equipment-planner-summary-grid li.equipment-planner-summary-total { + grid-template-columns: 18px minmax(0, 1fr) auto; +} + +.equipment-planner-summary-total .ui-icon { + width: 16px; + height: 16px; + color: var(--color-accent-gold); +} + +.equipment-planner-summary-total .equipment-planner-socket-icon { + width: 18px; + min-width: 18px; + height: 18px; +} + +.equipment-planner-summary-total .equipment-planner-socket-icon .ui-icon { + width: 17px; + height: 17px; +} + +.equipment-planner-summary-grid li span, +.equipment-planner-summary-grid li small { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-summary-grid li b { + color: var(--color-text-primary); +} + +.equipment-planner-summary-grid li .ui-tooltip { + overflow: visible; + white-space: normal; +} + +.equipment-planner-summary-tooltip { + display: grid; + gap: 7px; + min-width: 190px; +} + +.equipment-planner-summary-tooltip > strong { + color: var(--color-text-primary); + font-size: var(--font-size-xs); +} + +.equipment-planner-summary-tooltip > span { + display: grid; + gap: 5px; +} + +.equipment-planner-summary-tooltip-row { + display: grid; + grid-template-columns: 16px minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + min-height: 18px; + line-height: 18px; +} + +.equipment-planner-summary-tooltip-row .ui-icon { + width: 14px; + height: 14px; + color: var(--color-accent-gold); +} + +.equipment-planner-summary-tooltip-row span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.equipment-planner-summary-tooltip-row b { + color: var(--color-text-primary); +} + +.equipment-planner-summary-grid p, +.equipment-planner-muted, +.equipment-planner-empty { + margin: 0; + color: var(--color-text-muted); + font-size: var(--font-size-sm); +}