/** * Altonet Animated BG : styles du conteneur front-end. * * Le plugin injecte deux éléments frères, indépendants l'un de l'autre : * * #abg-background → la couche de fond (couleur, dégradé). z-index: -1, * toujours derrière le contenu de la page. * * #abg-canvas → le canvas où l'animation est dessinée. Son z-index * est piloté par le réglage "Animation layer" (Behind / * Above / Custom). Injecté en style inline depuis PHP. * Défaut : -1 (= comportement historique "derrière"). * * La séparation en deux conteneurs frères (au lieu d'un parent #abg-root * commun comme avant la v0.15.1) permet de placer le canvas au-dessus du * contenu en mode "Above" SANS faire monter le fond avec lui. Le fond du * plugin reste donc visible derrière le contenu dans tous les modes. * * Les deux conteneurs sont en position: fixed (couvrent le viewport) et en * pointer-events: none (les clics traversent et atteignent la page). */ #abg-background { position: fixed; inset: 0; /* équivaut à top:0; right:0; bottom:0; left:0; */ z-index: -1; /* toujours derrière le contenu */ pointer-events: none; overflow: hidden; /* La couleur / dégradé est appliqué·e en inline depuis PHP. */ } #abg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; /* z-index par défaut : -1 (mode "Behind content"). Surchargé en style inline par PHP en modes "Above" (9999) ou "Custom" (valeur libre). */ z-index: -1; pointer-events: none; display: block; /* évite l'espace blanc fantôme sous les éléments inline-block */ } /** * Mode "scoped" (v0.16.0+) : canvas injectés par le JS dans des blocs cibles * matchés par le sélecteur CSS de l'admin (ex. `.nk-awb`). Chaque canvas * porte la classe .abg-canvas--scoped et est positionné en absolute dans * son parent (le bootstrap JS ajoute position: relative au parent si * nécessaire). * * Le z-index est appliqué inline par le bootstrap selon le réglage "layer" : * - 'behind' (z-index: -1 ou 0) : canvas sous les autres enfants du bloc. * - 'above' (z-index: 9999) : canvas par-dessus les autres enfants. * - 'custom' : valeur libre. * * pointer-events: none reste actif pour que les clics traversent vers le * contenu du bloc. */ .abg-canvas--scoped { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; /* z-index appliqué inline par le bootstrap JS, pas de défaut ici. */ } /** * Fond scopé (v0.18.0+) : injecté par le JS dans chaque bloc cible AVANT * le canvas — donc derrière dans l'ordre DOM. Reçoit le MÊME z-index inline * que le canvas (depuis v0.18.1) : à z-index égal, l'ordre DOM décide qui * est devant, donc le fond est garanti derrière le canvas tout en restant * dans la même "couche" — ce qui évite qu'un z-index intermédiaire d'un * élément du bloc (ex. image AWB en z-index -100) ne s'intercale entre les * deux. Auparavant (v0.18.0) le fond était en z-index fixe 0, ce qui le * plaçait DEVANT le canvas en mode "Behind content" (canvas à z-index -1) * et masquait toute l'animation — bug critique fixé en v0.18.1. * * En mode scoped, on n'utilise PAS la classe body.abg-has-background : le * fond du thème reste visible partout sauf à l'intérieur des blocs cibles. * Le style inline (couleur, dégradé, image…) est appliqué par le bootstrap * JS, copie conforme de ce que produirait `#abg-background` en mode global. */ .abg-background--scoped { position: absolute; inset: 0; pointer-events: none; /* z-index appliqué inline par le bootstrap JS (= même valeur que le canvas). L'ordre DOM (fond inséré avant le canvas) garantit que le fond est derrière. Pas de z-index par défaut ici. */ /* Couleur / dégradé / image appliqués inline par le bootstrap. */ } /** * Force le fond du à être transparent quand le plugin affiche un fond * non-transparent, pour qu'on voie #abg-background derrière. * * Cette règle peut être surchargée par certains thèmes ; on traitera ces cas * particuliers à l'étape 6 (compatibilité thèmes) — par exemple via un * sélecteur CSS cible pour ne pas dépendre du fond global du thème. */ body.abg-has-background { background: transparent !important; }