/* * Argaschool V9 — palettes interchangeables. * Les composants conservent leurs variables sémantiques ; seul ce fichier * change leur valeur selon le choix porté par l'élément . */ :root[data-theme="anthracite"] { --ui-color-scheme: dark; } :root[data-theme="light"] { --ui-color-scheme: light; --ui-color-brand: #f8fbfa; --ui-color-brand-soft: #eef5f4; --ui-color-primary: #397b7d; --ui-color-primary-hover: #28696c; --ui-color-primary-soft: #dcebea; --ui-color-primary-subtle: #edf5f4; --ui-color-canvas: #f3f7f6; --ui-color-surface: #ffffff; --ui-color-surface-soft: #f7faf9; --ui-color-surface-subtle: #eef4f3; --ui-color-surface-muted: #e5eeed; --ui-color-text: #203139; --ui-color-text-strong: #102832; --ui-color-text-soft: #455c64; --ui-color-text-muted: #708188; --ui-color-text-on-brand: #ffffff; --ui-color-text-on-brand-muted: #dce9e8; --ui-color-border: #d4dfde; --ui-color-border-strong: #b7c9c8; --ui-color-danger: #b94a58; --ui-color-danger-soft: #fae9eb; --ui-color-success: #377f54; --ui-color-success-soft: #e5f3e9; --ui-color-warning: #a66d20; --ui-color-warning-soft: #fbf0dc; --ui-focus-ring: rgba(57, 123, 125, 0.24); --ui-shadow-soft: 0 8px 24px rgba(28, 54, 62, 0.09); --ui-shadow-default: 0 12px 34px rgba(28, 54, 62, 0.14); --ui-button-primary-background: #397b7d; --ui-button-primary-border: #397b7d; --ui-button-primary-text: #ffffff; --ui-button-primary-hover-background: #2f6d70; --ui-button-secondary-background: #edf5f4; --ui-button-secondary-border: #b7c9c8; --ui-button-secondary-text: #28696c; --ui-button-quiet-text: #28696c; --ui-button-danger-background: #b94a58; --ui-button-danger-border: #b94a58; --ui-button-danger-text: #ffffff; --ui-button-danger-hover-background: #a23f4c; --ui-link-color: #28696c; --ui-link-hover-color: #1f585b; --ui-form-control-background: #ffffff; --ui-form-control-border: #b7c9c8; --ui-form-control-text: #203139; --ui-form-placeholder: #7d8d92; --ui-form-disabled-background: #e5eeed; --ui-form-disabled-text: #708188; --ui-card-background: #ffffff; --ui-card-border: #d4dfde; --ui-card-shadow: 0 8px 24px rgba(28, 54, 62, 0.09); --ui-table-background: #ffffff; --ui-table-border: #d4dfde; --ui-table-header-background: #e5eeed; --ui-table-header-text: #455c64; --ui-table-row-alt-background: #f7faf9; --ui-table-row-hover-background: #edf5f4; --ui-modal-backdrop: rgba(20, 42, 50, 0.58); --ui-modal-background: #ffffff; --ui-modal-border: #b7c9c8; --ui-modal-shadow: 0 28px 70px rgba(28, 54, 62, 0.22); --ui-legacy-button-background: #397b7d; --ui-legacy-button-background-soft: #4c8c8e; --ui-legacy-button-text: #ffffff; --ui-legacy-field-background: #ffffff; --ui-legacy-field-border: #b7c9c8; --ui-legacy-field-text: #203139; --ui-legacy-field-shadow: 2px 2px 2px 0 rgba(28, 54, 62, 0.08) inset; } /* Neutralise les anciennes variables déclarées sur chaque élément par general.css afin qu'elles suivent, elles aussi, la palette active. */ body.app-shell *, body.login-shell * { --hb_color: var(--ui-color-brand); --gd_color: var(--ui-color-surface); --centre_color: var(--ui-color-canvas); --text_color: var(--ui-color-text); --hb_text_color: var(--ui-color-text-on-brand-muted); } .topbar button.theme-toggle { --theme-toggle-column-width: 33px; width: 68px; height: 36px; flex: 0 0 68px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: none; color: #c9d8d8; cursor: pointer; isolation: isolate; padding: 0; margin: 0; top: auto; text-shadow: none; font: inherit; } .topbar button.theme-toggle:hover { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.13); color: #c9d8d8; } .topbar button.theme-toggle:focus-visible { border-color: rgba(255, 255, 255, 0.56); outline: 3px solid rgba(255, 255, 255, 0.16); outline-offset: 2px; } .topbar button.theme-toggle:active { top: auto; } .theme-toggle-icon { width: 30px; height: 30px; display: grid; place-items: center; grid-row: 1; justify-self: center; position: relative; z-index: 2; transition: color 160ms ease; } .theme-toggle-sun { grid-column: 1; } .theme-toggle-moon { grid-column: 2; } .theme-toggle-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .theme-toggle-moon svg { fill: currentColor; stroke: none; } .theme-toggle-thumb { width: 30px; height: 30px; grid-column: 1; grid-row: 1; place-self: center; position: relative; z-index: 1; border-radius: 50%; background: #f8fbfa; box-shadow: 0 2px 7px rgba(7, 20, 25, 0.28); transition: transform 180ms ease, background 180ms ease; } .theme-toggle[data-active-theme="light"] .theme-toggle-sun { color: #9b6418; } .theme-toggle[data-active-theme="anthracite"] .theme-toggle-moon { color: #18313b; } .theme-toggle[data-active-theme="anthracite"] .theme-toggle-thumb { transform: translateX(var(--theme-toggle-column-width)); background: #d8e7e7; } :root[data-theme="light"] .topbar { border-bottom-color: var(--ui-color-border); background: linear-gradient(115deg, #ffffff, #f5f9f8 72%, #edf5f4); box-shadow: 0 8px 24px rgba(28, 54, 62, 0.1); color: var(--ui-color-text); } :root[data-theme="light"] .topbar .brand { color: var(--ui-color-text); } :root[data-theme="light"] .topbar .brand strong { color: var(--ui-color-primary-hover); } :root[data-theme="light"] .topbar .brand small, :root[data-theme="light"] .topbar .user-identity small { color: var(--ui-color-text-muted); } :root[data-theme="light"] .topbar .user-identity strong, :root[data-theme="light"] .topbar .icon-button, :root[data-theme="light"] .topbar .user-button { color: var(--ui-color-text-strong); } :root[data-theme="light"] .topbar .brand img, :root[data-theme="light"] .topbar .user-button > img { border-color: var(--ui-color-border-strong); background: var(--ui-color-surface-subtle); } :root[data-theme="light"] .topbar .icon-button:hover, :root[data-theme="light"] .topbar .icon-button:focus-visible, :root[data-theme="light"] .topbar .user-button:hover, :root[data-theme="light"] .topbar .user-button:focus-visible { border-color: var(--ui-color-border); background: var(--ui-color-surface-subtle); color: var(--ui-color-primary-hover); } :root[data-theme="light"] .topbar button.theme-toggle { border-color: var(--ui-color-border-strong); background: var(--ui-color-surface-subtle); color: var(--ui-color-text-muted); } :root[data-theme="light"] .topbar button.theme-toggle:hover { border-color: var(--ui-color-primary); background: var(--ui-color-primary-subtle); } :root[data-theme="light"] .topbar button.theme-toggle:focus-visible { border-color: var(--ui-color-primary); outline-color: var(--ui-focus-ring); } /* Le pictogramme de retour commun est volontairement clair en anthracite. En thème clair, on le recolore dans le ton primaire afin de conserver le même composant et le même fichier image avec un contraste suffisant. */ :root[data-theme="light"] body.app-shell #centre :is(a, button) > img#retour, :root[data-theme="light"] body.app-shell #centre :is( .back-button, .module-back-button, .competence-back, .exerciseur-back, .te-back, .vi-back, .suivi-back, .repartition-back, .bn-back, .module-manager-back, .erato-reset )::before { filter: invert(35%) sepia(27%) saturate(1093%) hue-rotate(133deg) brightness(91%) contrast(85%) !important; opacity: 0.9 !important; } :root[data-theme="light"] body.app-shell #centre :is(a, button):has(> img#retour):is(:hover, :focus-visible) > img#retour, :root[data-theme="light"] body.app-shell #centre :is( .back-button, .module-back-button, .competence-back, .exerciseur-back, .te-back, .vi-back, .suivi-back, .repartition-back, .bn-back, .module-manager-back, .erato-reset ):is(:hover, :focus-visible)::before { opacity: 1 !important; } @media (max-width: 720px) { .topbar button.theme-toggle { --theme-toggle-column-width: 30px; width: 62px; flex-basis: 62px; } .theme-toggle-icon, .theme-toggle-thumb { width: 27px; height: 27px; } }