/** * v28-dv2 Mobile Sprint - Close Button Standardization v1.1.0 * =========================================================== * * CSS Snippet - Site Wide Header - Auto Insert - priority 10 * * v1.1.0 (glyph size + right-alignment - 2026-07-24) * Two defects in v1.0.0, both mine, both measured live before fixing. * * A. GLYPH TOO BIG. v1.0.0 sized every svg BOX to 16px and assumed * that produced one glyph size. It does not - the glyph fills a * different fraction of the viewBox in each snippet: * viewBox 0 0 20 20, path M5..15 -> 10/20 = 0.500 (7887, ref) * viewBox 0 0 24 24, path M6..18 -> 12/24 = 0.500 (7714, 7728) * viewBox 0 0 14 14, path M1.5..12.5 -> 11/14 = 0.786 (7534, 7568) * So at a uniform 16px box the vb-14 family drew a 12.6px X next to * the reference's 8.0px - 57 percent oversized. That is exactly the * pair Gabriel saw: drawer header close and styles-browser filter * close. Fixed by sizing the BOX per viewBox so the GLYPH lands on * 8.0px everywhere, and by setting stroke-width per viewBox so the * rendered stroke lands on 1.6px everywhere. * vb 14 -> box 10.2px, stroke-width 2.2 -> glyph 8.01, stroke 1.60 * vb 24 -> box 16px, stroke-width 2.4 -> glyph 8.00, stroke 1.60 * vb 20 -> box 16px, stroke-width 2.0 -> glyph 8.00, stroke 1.60 * * B. LEFT-ALIGNED X. v1.0.0 set margin:0!important on the shared * block. 7537's own rule is margin:0 0 0 auto - that auto-margin is * the ONLY thing pushing .v28m-tt-x to the right, because its header * computes justify-content:normal. Killing it parked the X hard * left (measured: 8px from the left edge, 337px from the right). * margin:0 is kept for the block and .v28m-tt-x gets an explicit * margin-left:auto exception, so the result no longer depends on * 7537 keeping its own margin. * * Lesson for the fold-in pass: normalising the svg BOX is not the same * as normalising the GLYPH. Measure path.getBBox() x (box/viewBox), * never the box alone. * * PURPOSE * One close affordance across every mobile panel: 30x30 circle, * #E4002B, white X at 16px / stroke-width 2, 44x44 touch target. * The reference is 7887 v1.0.5 .v28ip-sheet .v28ip-x - already live, * already correct, and therefore NOT touched by this snippet. * * WHY A CSS SNIPPET AND NOT SIX JS EDITS * Five of the nine buttons share .v28m-drawer-close, but four drawers * (7541 / 7568 / 7575 / 7576) each re-tint it through a * :has() override. Restyling 7534 alone yields a red circle with a * near-black glyph. This snippet outranks all four at once and can be * toggled off in a single click if anything regresses. Fold-in to the * source snippets is a second pass, once the look is signed off. * * SPECIFICITY - MEASURED LIVE 2026-07-24, NOT ASSUMED * The four drawer overrides score (0,4,1): * body.v28-dv2-mobile .v28m-drawer-root:has(.v28m-id-root) .v28m-drawer-close * :has() contributes the specificity of its most specific argument. * The selector below scores (0,5,2) - it wins on class count, so * cascade ORDER is irrelevant. Verified both first-in-head (the real * wp_head position for a CSS snippet) and last-in-head: identical * computed styles either way. * * THREE TRAPS THIS SNIPPET DEFUSES (all confirmed live) * 1. .v28m-drawer-btn sets min-height/min-width:var(--v28m-touch-min) * with !important. height:30px alone leaves a 30x44 pill - min-* * must be overridden too. * 2. The theme's [type="button"],button rule leaks font-size:15px and * line-height:15px into the button box (this is the same * body-mounted specificity trap that bit 7887 three times - see its * v1.0.3 docblock). padding / line-height / font-size are forced. * 3. .v28m-drawer-close computes position:static, so ::before needs * position:relative established first. * * TOUCH TARGET * The visible circle stays 30px; ::before carries the 44x44 hit area, * centred, transparent, no layout cost. WCAG 2.5.5 satisfied without * changing the visual. Verified live with elementFromPoint: hits at * +/-21px on all four axes, misses at 30px. .v28m-drawer-sheet has * overflow:hidden but the button sits 16px inside the header padding, * so the 7px bleed is not clipped. * * SURFACES COVERED (9) * 7534 .v28m-drawer-close - base, shared by 7541/7568/7575/7576/7600 * 7568 .v28m-sb-filter-close - filter sheet, absolute * 7537 .v28m-tt-x - TextTools panel header * 7714 .v28m-afts-x - Add-text sheet header * 7728 .v28m-cp-panel-x - Colour picker panel header * 7887 .v28ip-x - REFERENCE, deliberately untouched * * NOT COVERED * 7741 .v28d-sq-x / .v28d-mx - desktop tier only (>=1025px); 7741 does * not run on mobile. Desktop standardization is a separate ruling. * * VERIFIED LIVE BEFORE BAKE (tshirt 7543, 375x667, mobile tier) * Measured as glyph width and rendered stroke width, not box size. * Reference .v28ip-x (7887, untouched): glyph 8.00 stroke 1.60 * .v28m-drawer-close glyph 8.01 stroke 1.60 right * .v28m-sb-filter-close glyph 8.01 stroke 1.60 right * .v28m-tt-x glyph 8.01 stroke 1.60 right * .v28m-afts-x glyph 8.00 stroke 1.60 right * All five circles measure 30x30, rgb(228,0,43), #fff. * .v28m-cp-panel-x is not mountable from the test flow. It uses the * same viewBox 0 0 24 24 glyph as 7714 (confirmed in the export), so it * lands on the vb-24 branch; confirm post-bake. * * RIGHT-EDGE INSETS (deliberately NOT normalised) * drawer 16px, filter 12px, reference 12px, tt 8px, afts 0px-inside-a- * sheet-with-18px-padding. Each inset equals its own panel's content * padding, so the X aligns with the content column beneath it. Forcing * one number would fight five parent paddings and misalign the X * against its own panel. Raise it if you want them literally equal. */ html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label], html body.v28-dv2-mobile .v28m-sb-filter-close, html body.v28-dv2-mobile .v28m-tt-x, html body.v28-dv2-mobile .v28m-afts-x, html body.v28-dv2-mobile .v28m-cp-panel-x { position: relative !important; box-sizing: border-box !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; flex: 0 0 auto !important; border: 0 !important; border-radius: 50% !important; background: #e4002b !important; background-color: #e4002b !important; color: #ffffff !important; display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important; line-height: 0 !important; font-size: 0 !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent !important; cursor: pointer !important; } html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label] svg, html body.v28-dv2-mobile .v28m-sb-filter-close svg, html body.v28-dv2-mobile .v28m-tt-x svg, html body.v28-dv2-mobile .v28m-afts-x svg, html body.v28-dv2-mobile .v28m-cp-panel-x svg { display: block !important; width: 16px !important; height: 16px !important; } /* Glyph normalisation: size the BOX per viewBox so the GLYPH is 8.0px and the rendered stroke is 1.6px on every surface - matching 7887. */ html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label] svg[viewBox="0 0 14 14"], html body.v28-dv2-mobile .v28m-sb-filter-close svg[viewBox="0 0 14 14"], html body.v28-dv2-mobile .v28m-tt-x svg[viewBox="0 0 14 14"], html body.v28-dv2-mobile .v28m-afts-x svg[viewBox="0 0 14 14"], html body.v28-dv2-mobile .v28m-cp-panel-x svg[viewBox="0 0 14 14"] { width: 10.2px !important; height: 10.2px !important; } html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label] path, html body.v28-dv2-mobile .v28m-sb-filter-close path, html body.v28-dv2-mobile .v28m-tt-x path, html body.v28-dv2-mobile .v28m-afts-x path, html body.v28-dv2-mobile .v28m-cp-panel-x path { stroke-width: 2 !important; stroke-linecap: round !important; } html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label] svg[viewBox="0 0 14 14"] path, html body.v28-dv2-mobile .v28m-sb-filter-close svg[viewBox="0 0 14 14"] path, html body.v28-dv2-mobile .v28m-tt-x svg[viewBox="0 0 14 14"] path, html body.v28-dv2-mobile .v28m-afts-x svg[viewBox="0 0 14 14"] path, html body.v28-dv2-mobile .v28m-cp-panel-x svg[viewBox="0 0 14 14"] path { stroke-width: 2.2 !important; } html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label] svg[viewBox="0 0 24 24"] path, html body.v28-dv2-mobile .v28m-sb-filter-close svg[viewBox="0 0 24 24"] path, html body.v28-dv2-mobile .v28m-tt-x svg[viewBox="0 0 24 24"] path, html body.v28-dv2-mobile .v28m-afts-x svg[viewBox="0 0 24 24"] path, html body.v28-dv2-mobile .v28m-cp-panel-x svg[viewBox="0 0 24 24"] path { stroke-width: 2.4 !important; } /* 44x44 touch target - invisible, zero layout cost (WCAG 2.5.5) */ html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label]::before, html body.v28-dv2-mobile .v28m-sb-filter-close::before, html body.v28-dv2-mobile .v28m-tt-x::before, html body.v28-dv2-mobile .v28m-afts-x::before, html body.v28-dv2-mobile .v28m-cp-panel-x::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; } /* Pressed state - one shared value, was previously per-snippet */ html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label]:active, html body.v28-dv2-mobile .v28m-sb-filter-close:active, html body.v28-dv2-mobile .v28m-tt-x:active, html body.v28-dv2-mobile .v28m-afts-x:active, html body.v28-dv2-mobile .v28m-cp-panel-x:active { background: #c40025 !important; background-color: #c40025 !important; color: #ffffff !important; } /* Keyboard focus - the drawer/theme rules give no visible ring on red */ html body.v28-dv2-mobile .v28m-drawer-root .v28m-drawer-btn.v28m-drawer-close[aria-label]:focus-visible, html body.v28-dv2-mobile .v28m-sb-filter-close:focus-visible, html body.v28-dv2-mobile .v28m-tt-x:focus-visible, html body.v28-dv2-mobile .v28m-afts-x:focus-visible, html body.v28-dv2-mobile .v28m-cp-panel-x:focus-visible { outline: 2px solid #ffffff !important; outline-offset: -5px !important; box-shadow: 0 0 0 2px #e4002b !important; } /* 7537: its header computes justify-content:normal, so the X is pushed right ONLY by an auto left margin. The block above zeroes margins, so the exception is restored explicitly here rather than relying on 7537. */ html body.v28-dv2-mobile .v28m-tt-x { margin-left: auto !important; margin-right: 0 !important; } /* 7568 filter close: align to the reference corner offsets (was right:10) */ html body.v28-dv2-mobile .v28m-sb-filter-close { position: absolute !important; top: 10px !important; right: 12px !important; }