/** * CTKstudio Top Bar — styles publics. * * Toutes les valeurs variables sont injectées via des custom properties CSS * définies sur (voir CTK_TopBar_Frontend::build_inline_css). Ce fichier * reste donc statique, minifiable et cachable. * * Repères de z-index (core WordPress) : * #wpadminbar : 99999 (100000 sous 782px) * .ctk-topbar (défaut) : 99990 -> reste SOUS l'admin bar, donc ses * sous-menus déroulants restent cliquables. */ .ctk-topbar { box-sizing: border-box; width: 100%; margin: 0; padding: var( --ctk-tb-pad, 12px ) 0; background: var( --ctk-tb-bg, #111827 ); color: var( --ctk-tb-fg, #fff ); font-size: var( --ctk-tb-fs, 14px ); font-weight: var( --ctk-tb-fw, 400 ); line-height: 1.45; text-align: var( --ctk-tb-align, center ); z-index: var( --ctk-tb-z, 99990 ); } .ctk-topbar *, .ctk-topbar *::before, .ctk-topbar *::after { box-sizing: border-box; } /* --- Positionnement ----------------------------------------------------- */ .ctk-topbar--fixed { position: fixed; left: 0; right: 0; } /* * --ctk-adminbar-h vaut 0 par défaut, 32px quand porte la classe * `admin-bar` ajoutée par WordPress, 46px sous 783px de large. Le script * public affine cette valeur (mesure réelle + admin bar en position absolute * sous 600px, où elle défile avec la page). */ .ctk-topbar--top { top: var( --ctk-adminbar-h, 0px ); } .ctk-topbar--bottom { bottom: 0; } .ctk-topbar--static { position: relative; } /* Élément neutre qui réserve la hauteur de la barre dans le flux. */ .ctk-topbar-spacer { height: var( --ctk-tb-h, 0px ); flex: 0 0 auto; pointer-events: none; } /* --- Contenu ------------------------------------------------------------ */ .ctk-topbar__inner { max-width: var( --ctk-tb-max, none ); margin: 0 auto; padding: 0 20px; } .ctk-topbar--dismissible .ctk-topbar__inner { padding-right: 44px; } .ctk-topbar__content { display: block; color: inherit; font: inherit; text-decoration: none; } a.ctk-topbar__content:hover, a.ctk-topbar__content:focus { color: inherit; text-decoration: none; opacity: 0.85; } /* Neutralise les marges héritées du thème sur le contenu de l'éditeur. */ .ctk-topbar__content > :first-child { margin-top: 0; } .ctk-topbar__content > :last-child { margin-bottom: 0; } .ctk-topbar__content p, .ctk-topbar__content ul, .ctk-topbar__content ol { margin: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; } .ctk-topbar__content a { color: var( --ctk-tb-link, currentColor ); text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; } .ctk-topbar__content a:hover, .ctk-topbar__content a:focus { color: var( --ctk-tb-link, currentColor ); opacity: 0.8; } .ctk-topbar__content strong, .ctk-topbar__content b, .ctk-topbar__content em, .ctk-topbar__content i { color: inherit; } .ctk-topbar__content img { max-width: 100%; height: auto; vertical-align: middle; } /* --- Bouton de fermeture ------------------------------------------------ */ .ctk-topbar__close { position: absolute; top: 50%; right: 12px; transform: translateY( -50% ); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease, background-color 0.2s ease; } .ctk-topbar__close:hover, .ctk-topbar__close:focus-visible { opacity: 1; background: rgba( 255, 255, 255, 0.15 ); } .ctk-topbar__close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .ctk-topbar--dismissible { position: relative; } .ctk-topbar--dismissible.ctk-topbar--fixed { position: fixed; } /* --- Animation ---------------------------------------------------------- */ @media ( prefers-reduced-motion: no-preference ) { .ctk-topbar--animate { animation: ctk-topbar-in 0.35s ease-out both; } } @keyframes ctk-topbar-in { from { opacity: 0; transform: translateY( -100% ); } to { opacity: 1; transform: translateY( 0 ); } } .ctk-topbar--bottom.ctk-topbar--animate { animation-name: ctk-topbar-in-bottom; } @keyframes ctk-topbar-in-bottom { from { opacity: 0; transform: translateY( 100% ); } to { opacity: 1; transform: translateY( 0 ); } } /* --- Impression --------------------------------------------------------- */ @media print { .ctk-topbar, .ctk-topbar-spacer { display: none !important; } }