/* Messages WooCommerce (bandeaux succès / infos / erreur) — module Badge (Custom › Badge). AUCUNE COULEUR IMPOSÉE ICI AU FRONT. Les règles de fond, liseré, texte, taille, liens et icône sont écrites par PHP (CKWC_Notices::front_rules), et seulement pour les réglages CHANGÉS dans le tiroir. Un réglage resté à sa valeur d'origine laisse le thème et le CSS du site décider — avant, ces défauts en `!important` écrasaient le CSS additionnel de LH Color. L'aperçu du tiroir, lui, montre toujours toutes les valeurs. */ .ckwc-notices-preview .woocommerce-message { background-color: var(--ckwc-ntc-suc-bg, #f7f6f7); border-top-color: var(--ckwc-ntc-suc-border, #8fae1b); color: var(--ckwc-ntc-suc-color, #515151); font-size: var(--ckwc-ntc-suc-size, 14px); } .ckwc-notices-preview .woocommerce-info { background-color: var(--ckwc-ntc-inf-bg, #f7f6f7); border-top-color: var(--ckwc-ntc-inf-border, #1e85be); color: var(--ckwc-ntc-inf-color, #515151); font-size: var(--ckwc-ntc-inf-size, 14px); } .ckwc-notices-preview .woocommerce-error { background-color: var(--ckwc-ntc-err-bg, #f7f6f7); border-top-color: var(--ckwc-ntc-err-border, #b81c23); color: var(--ckwc-ntc-err-color, #515151); font-size: var(--ckwc-ntc-err-size, 14px); } .ckwc-notices-preview .woocommerce-message a:not(.button) { color: var(--ckwc-ntc-suc-link, var(--ck-form-accent, inherit)); } .ckwc-notices-preview .woocommerce-info a:not(.button) { color: var(--ckwc-ntc-inf-link, var(--ck-form-accent, inherit)); } .ckwc-notices-preview .woocommerce-error a:not(.button) { color: var(--ckwc-ntc-err-link, var(--ck-form-accent, inherit)); } /* ── L'ICÔNE CHOISIE (Custom › Badge) ────────────────────────────────────── Elle est injectée comme un vrai élément — front et aperçu partagent le même markup (CKWC_Notices::icon_html). Le glyphe de la police WooCommerce ne s'efface QUE lorsque le nôtre est en place : `ckwc-ntc-has-ico` n'est posée qu'après l'injection, donc sans JS le repère d'origine reste. */ .ckwc-ntc-has-ico::before { content: none !important; } /* LA PLACE DE L'ICÔNE EST RÉSERVÉE PAR NOUS, pas empruntée au thème. L'icône est en absolu : c'est le padding gauche du bandeau qui l'écarte du texte. WooCommerce le met à 3.5em, mais un thème qui pose `padding: 1em` partout (LH Color : 14px sur les quatre côtés) le reprend — l'icône tombait alors sur « «Balance» a été ajouté ». Réserve = position de l'icône + sa taille réglée + un écart : grossir l'icône pousse le texte au lieu de le recouvrir. */ .ckwc-ntc-has-ico { position: relative !important; } .woocommerce-message.ckwc-ntc-has-ico { padding-left: calc(1.5em + var(--ckwc-ntc-suc-ico-size, 16px) + 1em) !important; } .woocommerce-info.ckwc-ntc-has-ico { padding-left: calc(1.5em + var(--ckwc-ntc-inf-ico-size, 16px) + 1em) !important; } .woocommerce-error.ckwc-ntc-has-ico { padding-left: calc(1.5em + var(--ckwc-ntc-err-ico-size, 16px) + 1em) !important; } /* CENTRÉE SUR LA PREMIÈRE LIGNE DE TEXTE, pas posée à une distance fixe du haut. L'enveloppe occupe exactement la hauteur de la ligne (`1lh` = la line-height héritée du bandeau) et centre son contenu : l'icône reste alignée quelles que soient sa taille et la taille du texte. `1.5em` sert de repli aux navigateurs sans l'unité `lh`. `top: 1em` = la marge haute du bandeau, celle où commence justement la première ligne. */ .ckwc-ntc-ico { position: absolute; top: 1em; left: 1.5em; height: 1.5em; height: 1lh; display: inline-flex; align-items: center; justify-content: center; font-style: normal; } /* La TAILLE est portée par l'élément interne — voir CKWC_Notices::icon_html. */ .ckwc-ntc-ico i { font-style: normal; line-height: 1; display: block; } /* Le SVG Lucide par défaut : en bloc, sinon la ligne de base ajoute un jour sous l'icône et la décentre. */ .ckwc-ntc-ico svg { display: block; } /* LIENS : l'accent des formulaires CercleKit, comme « Mot de passe perdu ? » sur la même page. Sans ça, c'est le rose par défaut du thème Hello (#c36) qui sortait. Sans !important : un CSS du site plus précis garde la main, et le réglage « Couleur des liens » du tiroir passe devant (front_rules). */ .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: var(--ck-form-accent, inherit); } /* Au front, l'icône prend la couleur du texte tant qu'aucune n'est réglée. */ .ckwc-notices-preview .woocommerce-message .ckwc-ntc-ico { color: var(--ckwc-ntc-suc-icon, #8fae1b); } .ckwc-notices-preview .woocommerce-info .ckwc-ntc-ico { color: var(--ckwc-ntc-inf-icon, #1e85be); } .ckwc-notices-preview .woocommerce-error .ckwc-ntc-ico { color: var(--ckwc-ntc-err-icon, #b81c23); } .woocommerce-message .ckwc-ntc-ico i { font-size: var(--ckwc-ntc-suc-ico-size, 16px); } .woocommerce-info .ckwc-ntc-ico i { font-size: var(--ckwc-ntc-inf-ico-size, 16px); } .woocommerce-error .ckwc-ntc-ico i { font-size: var(--ckwc-ntc-err-ico-size, 16px); } /* Aperçu admin : base structurelle des bandeaux (le front l'a via WooCommerce). */ .ckwc-notices-preview .woocommerce-message, .ckwc-notices-preview .woocommerce-info, .ckwc-notices-preview .woocommerce-error { padding: 1em 1.5em 1em 3em; margin: 0 0 12px; position: relative; /* Épaisseur et style SEULEMENT : le raccourci `border-top: 3px solid` remettait la couleur à `currentColor` — cette règle venant APRÈS celles des couleurs, tous les liserés de l'aperçu prenaient la couleur du texte (#515151), quel que soit le réglage (LH, 1.0.396 → 1.0.425). */ border-top-width: 3px; border-top-style: solid; list-style: none; border-radius: 0 0 4px 4px; display: flow-root; } .ckwc-notices-preview .woocommerce-message::before, .ckwc-notices-preview .woocommerce-info::before, .ckwc-notices-preview .woocommerce-error::before { position: absolute; left: 1.2em; top: 1em; font-weight: 700; } .ckwc-notices-preview .woocommerce-message::before { content: '\2713'; } .ckwc-notices-preview .woocommerce-info::before { content: '\2139'; } .ckwc-notices-preview .woocommerce-error::before { content: '\0021'; } .ckwc-notices-preview a.button { float: right; margin-left: 12px; text-decoration: none; }