/* ========================================================================== Esprit Smart — motifs de fond de page -------------------------------------------------------------------------- Fonction reprise de l'Ardoise d'AQIN Cloud (templates/pages/home.php) : huit motifs au choix, retenus en localStorage, appliqués via un attribut data-bg. Volontairement ISOLÉE dans son propre fichier — CSS ici, balisage et comportement dans includes/background-picker.php. Rien de tout cela n'existe dans store.css : la fonction se retire en supprimant ces deux fichiers et leurs deux lignes d'inclusion. Trois écarts assumés avec la source : 1. L'attribut est posé sur , pas sur : le script anti-flash tourne dans le , où n'existe pas encore. 2. z-index -1 au lieu de 0. En z-index:0 le pseudo-élément est peint APRÈS les descendants non positionnés, donc au-dessus du contenu. Sur AQIN Cloud cela ne se remarque pas — les cartes sont positionnées et repassent devant, et l'opacité est très faible — mais le calque y est bel et bien par-dessus la page. En -1 il passe derrière tout, sans dépendre du positionnement des enfants. 3. La couleur suit le thème via les jetons ci-dessous, là où la source code un indigo rgba(99,120,246,…) en dur. Pour adopter la couleur d'AQIN Cloud, il suffit de changer ces deux jetons. Le calque est en position:fixed : le motif ne défile pas avec la page, il se comporte comme un papier posé sous le contenu. ========================================================================== */ :root { --dot: rgba(200, 200, 200, .55); /* Motifs couvrant plus de surface (carreaux, isométrique, Seyès) : à opacité égale ils pèseraient bien plus lourd qu'un semis de points. */ --dot-soft: rgba(200, 200, 200, .34); } [data-theme="dark"] { --dot: rgba(255, 255, 255, .10); --dot-soft: rgba(255, 255, 255, .06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dot: rgba(255, 255, 255, .10); --dot-soft: rgba(255, 255, 255, .06); } } /* -------------------------------------------------------------------------- Le calque -------------------------------------------------------------------------- */ :root[data-bg]::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } :root[data-bg="dots"]::before { background-image: radial-gradient(circle, var(--dot) 1.5px, transparent 1.5px); background-size: 24px 24px; } :root[data-bg="bigdots"]::before { background-image: radial-gradient(circle, var(--dot) 3px, transparent 3px); background-size: 48px 48px; } :root[data-bg="grid"]::before { background-image: linear-gradient(var(--dot-soft) 1px, transparent 1px), linear-gradient(90deg, var(--dot-soft) 1px, transparent 1px); background-size: 24px 24px; } :root[data-bg="lines"]::before { background-image: linear-gradient(var(--dot) 1px, transparent 1px); background-size: 100% 32px; } :root[data-bg="seyes"]::before { background-image: linear-gradient(var(--dot-soft) 1px, transparent 1px), linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot-soft) 1px, transparent 1px); background-size: 100% 8px, 100% 32px, 56px 32px; background-position: 0 0, 0 0, 48px 0; } :root[data-bg="staff"]::before { background-image: repeating-linear-gradient( transparent 0px, transparent 6px, var(--dot) 6px, var(--dot) 7px, transparent 7px, transparent 13px, var(--dot) 13px, var(--dot) 14px, transparent 14px, transparent 20px, var(--dot) 20px, var(--dot) 21px, transparent 21px, transparent 27px, var(--dot) 27px, var(--dot) 28px, transparent 28px, transparent 34px, var(--dot) 34px, var(--dot) 35px, transparent 35px, transparent 56px ); background-size: 100% 56px; } :root[data-bg="iso"]::before { background-image: linear-gradient(30deg, var(--dot-soft) 1px, transparent 1px), linear-gradient(150deg, var(--dot-soft) 1px, transparent 1px), linear-gradient(90deg, var(--dot-soft) 1px, transparent 1px); background-size: 23px 40px, 23px 40px, 46px 40px; } /* -------------------------------------------------------------------------- Le sélecteur — bouton dans la barre du pied de page, panneau flottant -------------------------------------------------------------------------- */ .es-bg-wrap { position: relative; display: inline-flex; } .es-bg-panel { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; padding: 8px; /* Filet de securite si l'ecran est plus etroit que le panneau lui-meme. */ max-width: calc(100vw - 16px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-ctl); box-shadow: 0 8px 24px var(--shadow); } .es-bg-panel[hidden] { display: none; } .es-bg-opt { width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background-color: var(--card-bg); /* Les aperçus dessinent leur motif avec currentColor : une seule série de styles en ligne suffit alors pour les deux thèmes. */ color: var(--ink-faint); transition: border-color .15s, transform .15s; } /* La vignette « Automatique » ne montre pas un motif mais un pictogramme : elle désigne un comportement, pas une apparence. Elle se distingue donc volontairement des sept autres. */ .es-bg-auto { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); background-color: var(--surface); } .es-bg-auto svg { display: block; } .es-bg-opt:hover { transform: scale(1.06); border-color: var(--ink-faint); } .es-bg-opt[aria-pressed="true"] { border-color: var(--ink); border-width: 2px; } .es-bg-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .es-bg-opt { transition: none; } .es-bg-opt:hover { transform: none; } }