/* * Bloc CSS : Offcanvas (Panneau Latéral) * * Directive 2 & 5 : App-Native feel avec une translation CSS fluide * et une gestion du Skeleton Loading intégrée directement en pseudo-éléments * CSS pour garantir zéro latence visuelle (Performance). */ .saasbuilder-offcanvas-overlay { position: fixed; inset: 0; z-index: 9999; background-color: color-mix(in srgb, var(--saasbuilder-primary, var(--color-primary)) 15%, rgba(0, 0, 0, 0.4)); /* Assombrit la page */ backdrop-filter: blur(2px); /* Glassmorphism léger sur le fond */ -webkit-backdrop-filter: blur(2px); /* État masqué par défaut */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; /* Flex pour caler le panneau à droite */ display: flex; justify-content: flex-end; } /* État actif */ .saasbuilder-offcanvas-overlay.is-open { opacity: 1; visibility: visible; } /* Le Panneau lui-même */ .saasbuilder-offcanvas-panel { width: 100%; max-width: 600px; /* Sur mobile, occupera 100% de la largeur ; sur desktop, une largeur fixe */ height: 100vh; background-color: var(--color-bg); /* Translation hors écran (vers la droite) */ transform: translateX(100%); /* Transition ultra fluide calquée sur iOS (cubic-bezier) */ transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; } .saasbuilder-offcanvas-overlay.is-open .saasbuilder-offcanvas-panel { transform: translateX(0); } .saasbuilder-offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .saasbuilder-offcanvas-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .saasbuilder-offcanvas-title { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; color: var(--color-text); } .saasbuilder-offcanvas-subtitle { font-size: 12px; font-weight: 500; color: var(--color-text-muted); } .saasbuilder-offcanvas-subtitle:empty { display: none; } .saasbuilder-offcanvas-body { flex-grow: 1; overflow-y: auto; padding: var(--spacing-lg); /* Sans ceci, le contenu hérite du "color" posé sur (thème du site, pas celui — potentiellement différent — forcé sur le panneau ci-dessous), d'où un texte illisible (ex: blanc sur blanc en mode sombre du site). */ color: var(--color-text); /* Assure un scroll fluide (inertie) sur iOS */ -webkit-overflow-scrolling: touch; } /* Typographie du contenu riche injecté (pages légales, FAQ...) : la couleur primaire (white-label) accentue puces, liens, soulignement et citations. */ .saasbuilder-offcanvas-dynamic-content { font-size: 14px; line-height: 1.7; } .saasbuilder-offcanvas-dynamic-content h1, .saasbuilder-offcanvas-dynamic-content h2, .saasbuilder-offcanvas-dynamic-content h3, .saasbuilder-offcanvas-dynamic-content h4 { color: var(--color-text); font-weight: 700; margin: 1.4em 0 0.6em; } .saasbuilder-offcanvas-dynamic-content h1:first-child, .saasbuilder-offcanvas-dynamic-content h2:first-child, .saasbuilder-offcanvas-dynamic-content h3:first-child, .saasbuilder-offcanvas-dynamic-content h4:first-child { margin-top: 0; } .saasbuilder-offcanvas-dynamic-content p { margin: 0 0 1em; } .saasbuilder-offcanvas-dynamic-content ul, .saasbuilder-offcanvas-dynamic-content ol { margin: 0 0 1em; padding-left: 1.4em; } .saasbuilder-offcanvas-dynamic-content li { margin-bottom: 0.4em; } .saasbuilder-offcanvas-dynamic-content ul li::marker, .saasbuilder-offcanvas-dynamic-content ol li::marker { color: var(--saasbuilder-primary, var(--color-primary)); font-weight: 700; } .saasbuilder-offcanvas-dynamic-content a { color: var(--saasbuilder-primary, var(--color-primary)); text-decoration: underline; text-decoration-color: var(--saasbuilder-primary, var(--color-primary)); } .saasbuilder-offcanvas-dynamic-content u { text-decoration-color: var(--saasbuilder-primary, var(--color-primary)); } .saasbuilder-offcanvas-dynamic-content strong, .saasbuilder-offcanvas-dynamic-content b { font-weight: 700; color: var(--color-text); } .saasbuilder-offcanvas-dynamic-content blockquote { margin: 1em 0; padding: 0.6em 1em; border-left: 3px solid var(--saasbuilder-primary, var(--color-primary)); color: var(--color-text-muted); font-style: italic; } .saasbuilder-offcanvas-dynamic-content hr { border: none; border-top: 1px solid var(--color-border); margin: 1.4em 0; } /* * Gestion de l'état Skeleton Loading (Directive 5) * Création d'un squelette 100% CSS via des pseudo-éléments injectés * pendant que l'AJAX charge le contenu réel. */ .saasbuilder-offcanvas-body.is-loading .saasbuilder-offcanvas-dynamic-content { display: flex; flex-direction: column; gap: var(--spacing-md); } .saasbuilder-offcanvas-body.is-loading .saasbuilder-offcanvas-dynamic-content::before, .saasbuilder-offcanvas-body.is-loading .saasbuilder-offcanvas-dynamic-content::after { content: ''; display: block; border-radius: var(--border-radius); /* Réutilisation des variables de global.css */ background: var(--skeleton-bg); background-image: linear-gradient(90deg, var(--skeleton-bg) 0px, var(--skeleton-shine) 40px, var(--skeleton-bg) 80px); background-size: 200vw 100%; animation: saasbuilder-skeleton-shine 1.5s infinite linear; } /* Varier la taille des blocs du Skeleton pour plus de réalisme */ .saasbuilder-offcanvas-body.is-loading .saasbuilder-offcanvas-dynamic-content::before { height: 60px; width: 100%; } .saasbuilder-offcanvas-body.is-loading .saasbuilder-offcanvas-dynamic-content::after { height: 120px; width: 85%; } /* Style d'erreur si l'AJAX échoue */ .saasbuilder-error-msg { color: var(--color-danger); background-color: rgba(var(--color-danger-rgb), 0.1); padding: var(--spacing-md); border-radius: var(--border-radius); font-weight: 500; } /* Panneau toujours clair (blanc), quel que soit le thème du site — même principe que la coque de l'admin custom (cf. config/theme.php, palette 'light'), pour une cohérence visuelle front/admin. NB : --color-primary / --color-secondary NE sont PAS redéfinis ici : la couleur de marque (white-label) doit traverser le panneau (boutons, icônes, accents). Seuls fond / texte / bordure sont fixés en clair. */ .saasbuilder-offcanvas-panel { --color-bg: #FFFFFF; --color-bg-secondary: #F5F5F7; --color-text: #1D1D1F; --color-text-muted: #86868B; --color-border: #E5E5EA; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.05); --skeleton-bg: #F5F5F7; --skeleton-shine: #FFFFFF; }