/* ============================================================================ H12, fenêtre d'aperçu de WooCommerce Live Preview. POURQUOI CE FICHIER EXISTE À PART --------------------------------- La fenêtre d'aperçu est le seul écran du parcours d'achat que le client traverse sans jamais voir la marque : fond gris, boutons d'administration WordPress, aucune indication de ce qu'il peut y faire. Elle vit pourtant dans NOTRE document (pas dans une iframe), donc elle se rhabille. ORDRE DE CHARGEMENT, ET C'EST LE PIÈGE -------------------------------------- wlp-preview.css est chargée APRÈS les feuilles du thème (elle est en 22e position, fichier.css est en 19e). À spécificité égale, c'est elle qui gagne. Cette feuille est donc mise en file avec « wlp-preview » comme dépendance : elle passe après, et les sélecteurs restent lisibles au lieu d'être gonflés artificiellement. Les sélecteurs partent de #wlp-live-preview-overlay : le panneau lui-même n'a aucune classe, il faut passer par la structure. Si une mise à jour du greffon change cette structure, c'est ici que ça se verra. ============================================================================ */ /* ---- Le voile ---- « div » devant l'identifiant, et ce n'est pas décoratif : wlp écrit div#wlp-live-preview-overlay, soit un élément de plus que #wlp-live-preview-overlay. Sans ce « div », sa règle gagne et le voile reste noir à 87 %. */ div#wlp-live-preview-overlay { background: rgba(10, 10, 10, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ---- Le panneau ---- */ #wlp-live-preview-overlay > div { background: #fff; border-radius: var(--h12-radius-lg, 4px); box-shadow: var(--h12-shadow-card, 0 18px 40px rgba(0, 0, 0, .13)); overflow: hidden; } /* ---- L'aide, posée par product-fichier.js dans la barre du bas ---- Elle n'est PAS posée en entête : le panneau n'a pas de rangée libre en haut, et y insérer un bandeau pousserait la grille du greffon vers le bas jusqu'à rogner la barre. La barre, elle, est une rangée flex : un élément de plus y tient sans rien déplacer. Ce que la fenêtre ne disait nulle part : qu'on peut bouger le visuel et le redimensionner. Sans ça le client croit la position imposée. */ .h12-apercu-aide { flex: 1 1 240px; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--h12-text-3, #8A8A8A); } .h12-apercu-aide b { color: var(--h12-ink, #141414); font-weight: 700; } /* ---- La scène ---- */ #wlp-live-preview-overlay .wlp-canvas-editor { background: var(--h12-bg-gray, #F5F5F5); } #wlp-live-preview-overlay .canvas-container { box-shadow: 0 6px 22px rgba(0, 0, 0, .10); border-radius: var(--h12-radius-sm, 2px); } /* Les flèches de vue : rondes, contrastées, et assez grandes pour le doigt. */ #wlp-live-preview-overlay .wlp-prev-image, #wlp-live-preview-overlay .wlp-next-image { background: #fff; border: 1.5px solid var(--h12-border, #E4E4E4); box-shadow: 0 3px 10px rgba(0, 0, 0, .12); color: var(--h12-ink, #141414); transition: border-color .12s, color .12s; } #wlp-live-preview-overlay .wlp-prev-image:hover, #wlp-live-preview-overlay .wlp-next-image:hover { border-color: var(--h12-red, #C4161C); color: var(--h12-red, #C4161C); } /* ---- La colonne des visuels déposés ---- ATTENTION AUX SÉLECTEURS ICI. wlp écrit toutes ses règles de catalogue avec le préfixe div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item, soit DEUX identifiants. Un #wlp-live-preview-overlay .wlp-catalog-item n'en a qu'un et perd, quel que soit l'ordre de chargement. On reprend donc leur préfixe mot pour mot : à spécificité égale, c'est la dernière feuille qui gagne, et la nôtre passe après (voir h12_enqueue_apercu(), priorité 100). On garde aussi leur compensation 1 px / 2 px avec la marge : c'est ce qui empêche la carte de sauter au survol. */ div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item { border: 1px solid var(--h12-border, #E4E4E4); border-radius: var(--h12-radius-sm, 2px); transition: border-color .12s, box-shadow .12s, background .12s; } div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item:hover { background: #fff; border: 2px solid var(--h12-ink, #141414); border-radius: var(--h12-radius-sm, 2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); } /* Le nom de la zone est l'information utile de la carte : c'est lui qu'on lit en premier, pas le nom de fichier. */ div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item span.wlp-catalog-item-option { font-family: var(--h12-font-body, sans-serif); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--h12-ink, #141414); } div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item span.wlp-catalog-item-option:before { background: var(--h12-bg-gray, #F5F5F5); border: 1px solid var(--h12-border, #E4E4E4); border-radius: var(--h12-radius-sm, 2px); } /* Damier sous la vignette : le visuel est détouré, autant que ça se voie. Le gris uni du greffon faisait passer un fond transparent pour un fond gris. */ div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item.is-image img.wlp-catalog-item-image { border: 1px solid var(--h12-border, #E4E4E4); border-radius: var(--h12-radius-sm, 2px); background-color: #fff; background-image: linear-gradient(45deg, #E8E8E8 25%, transparent 25%, transparent 75%, #E8E8E8 75%), linear-gradient(45deg, #E8E8E8 25%, transparent 25%, transparent 75%, #E8E8E8 75%); background-position: 0 0, 6px 6px; background-size: 12px 12px; } /* Un nom de fichier est souvent une suite de chiffres sans intérêt : lisible, mais au second plan. */ div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item.is-image div.wlp-catalog-item-details span.wlp-catalog-item-file { font-family: var(--h12-font-mono, monospace); font-size: 11px; color: var(--h12-text-3, #8A8A8A); } div#wlp-live-preview-catalog ul#wlp-catalog li.wlp-catalog-item.is-image div.wlp-catalog-item-details span.wlp-catalog-item-size { font-family: var(--h12-font-mono, monospace); font-size: 10px; color: var(--h12-text-4, #9A9A9A); } /* ---- La barre du bas ---- */ #wlp-live-preview-overlay .wlp-live-preview-toolbar { align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--h12-border, #E4E4E4); background: #fff; } /* Le défaut empile la case au-dessus de son texte et fait déborder la barre : le qui porte l'icône et le libellé n'est pas en ligne, donc les deux SVG de 24 px cassent la rangée. On le remet en rangée. */ #wlp-live-preview-overlay .wlp-live-preview-modal-option { display: flex; align-items: center; margin: 0; cursor: pointer; font-size: 13px; color: var(--h12-text-2, #6B6B6B); } #wlp-live-preview-overlay .wlp-live-preview-modal-option .label-text { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; } #wlp-live-preview-overlay .wlp-live-preview-modal-option svg { flex: none; width: 19px; height: 19px; } /* Cochée, la case prend le rouge de la marque : c'est le seul état qui compte. */ #wlp-live-preview-overlay .wlp-live-preview-modal-option input:checked ~ .label-text { color: var(--h12-ink, #141414); font-weight: 600; } #wlp-live-preview-overlay .wlp-live-preview-modal-option input:checked ~ .label-text svg.selected { color: var(--h12-red, #C4161C); } #wlp-live-preview-overlay .wlp-live-preview-modal-option input:focus-visible ~ .label-text { outline: 2px solid var(--h12-red, #C4161C); outline-offset: 3px; } /* ---- Les deux boutons ---- wlp leur met les classes de l'administration WordPress (button-primary, button-secondary) alors que la feuille de l'admin n'est pas chargée sur le site : ils tombent donc en gris quasi nu. On les rhabille en boutons H12. */ #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons { gap: 10px; } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button { height: auto; min-height: 0; line-height: 1; padding: 12px 22px; border-radius: var(--h12-radius-sm, 2px); font-family: var(--h12-font-body, sans-serif); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; text-shadow: none; box-shadow: none; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button-primary { background: var(--h12-red, #C4161C); border: 1.5px solid var(--h12-red, #C4161C); color: #fff; } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button-primary:hover { background: var(--h12-red-hover, #A21117); border-color: var(--h12-red-hover, #A21117); color: #fff; } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button-secondary { background: #fff; border: 1.5px solid var(--h12-border, #E4E4E4); color: var(--h12-text-2, #6B6B6B); } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button-secondary:hover { border-color: var(--h12-ink, #141414); color: var(--h12-ink, #141414); } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button:focus-visible { outline: 2px solid var(--h12-ink, #141414); outline-offset: 2px; } /* ---- La fermeture ---- */ /* Il vit sur le fond clair du panneau : on ne touche pas à sa couleur, on lui donne seulement de quoi répondre au survol. */ #wlp-live-preview-overlay .wlp-live-preview-close { opacity: .65; transition: opacity .12s, transform .12s; } #wlp-live-preview-overlay .wlp-live-preview-close:hover { opacity: 1; transform: scale(1.08); } @media (max-width: 700px) { .h12-apercu-aide { flex-basis: 100%; font-size: 11px; } #wlp-live-preview-overlay .wlp-live-preview-toolbar { padding: 10px 14px; gap: 8px; } #wlp-live-preview-overlay .wlp-live-preview-toolbar-buttons .button { padding: 11px 15px; font-size: 11px; } #wlp-live-preview-overlay .wlp-live-preview-modal-option { font-size: 12px; } }