v1.0.18 — close icon styling settings
Style the close icon from the admin — no Custom CSS required.
New Close icon section in the AQM Popup settings:
| Field | Default | Notes |
|---|---|---|
| Button size (px) | 36 | Icon auto-scales to half the button size |
| Distance from corner (px) | 10 | Top + right offset from the popup's top-right |
| Background | `transparent` | Any CSS color — `transparent`, `rgba(0,0,0,0.55)`, `#ffffff`, `red`, etc. |
| Icon color | `#ffffff` | Any CSS color |
| Border radius (px) | 0 | Half the button size = circle. 0 = square. |
Recipes
- Bare X with drop-shadow halo (default): Background `transparent`, Border radius `0`
- Translucent dark circle (the look from v1.0.0–v1.0.9): Background `rgba(0,0,0,0.55)`, Border radius `18` (half of size 36)
- Solid white square: Background `#ffffff`, Icon color `#000`, Border radius `4`
- Brand-colored circle: Background `#c10f30`, Icon color `#ffffff`, Border radius `18`
How it works under the hood
The display class emits an inline `<style id="aqm-popup-close-style">` block targeting `#aqm-popup-close` (specificity 1,0,0) so your values reliably beat the class-based defaults in the plugin's stylesheet. Color inputs are sanitized in the admin (`< > ; { } " ' \` stripped) so they can't break out of the inline style context. Empty/invalid values fall back to defaults — the popup never renders broken CSS.