diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css index f990fa5e..3270dcd0 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -25,21 +25,22 @@ max-width: none; } -/* CTA paint only on actual anchors/buttons — never on hover wrappers */ +/* CTA paint only on real controls — never on hover wrappers / menu items */ .navbar-but-cluster a.navbar-cta, .navbar-but-cluster a.btn-primary, .navbar-but-cluster a.but.btn-primary, .navbar-but-cluster a.navbar-newposts.but, -.navbar-but-cluster a.but:not(.newadd-btns__item), -.navbar-but-cluster button.navbar-cta { +.navbar-but-cluster button.navbar-cta, +.navbar-but-cluster button.newadd-btns__toggle, +.navbar-but-cluster a.but:not(.newadd-btns__item) { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; - padding: 0 14px; - height: 34px; - min-height: 34px; - max-height: 34px; + padding: 0 14px !important; + height: 34px !important; + min-height: 34px !important; + max-height: 34px !important; border-radius: var(--navbar-cta-radius, 20px); background: var(--color-primary, #2f6df6); color: #fff !important; @@ -50,17 +51,27 @@ white-space: nowrap; box-sizing: border-box; vertical-align: middle; - flex: 0 0 auto; + flex: 0 0 auto !important; width: auto !important; - max-width: none; - min-width: 0; + max-width: none !important; + min-width: 0 !important; + margin: 0 !important; + appearance: none; + -webkit-appearance: none; + cursor: pointer; + font-family: inherit; } .navbar-but-cluster a.navbar-cta > i, .navbar-but-cluster a.but > i, .navbar-but-cluster a.btn-primary > i, +.navbar-but-cluster button.navbar-cta > i, +.navbar-but-cluster button.newadd-btns__toggle > i, .navbar-but-cluster a.navbar-cta .navbar-cta-text, -.navbar-but-cluster a.navbar-cta > span:not(.badge) { +.navbar-but-cluster a.navbar-cta > span:not(.badge), +.navbar-but-cluster button.navbar-cta .navbar-cta-text, +.navbar-but-cluster button.newadd-btns__toggle .navbar-cta-text, +.navbar-but-cluster button.newadd-btns__toggle > span { display: inline-flex; align-items: center; justify-content: center; @@ -73,36 +84,35 @@ .navbar-but-cluster a.navbar-cta > i, .navbar-but-cluster a.but > i, -.navbar-but-cluster a.btn-primary > i { +.navbar-but-cluster a.btn-primary > i, +.navbar-but-cluster button.navbar-cta > i, +.navbar-but-cluster button.newadd-btns__toggle > i { width: 1em; height: 1em; font-size: 1em; line-height: 1; } -/* Multi-type toggle keeps fixed CTA size when menu opens (focus-within). */ -.navbar-but-cluster .newadd-btns__toggle.navbar-cta, -.navbar-but-cluster a.newadd-btns__toggle { - flex: 0 0 auto !important; - width: auto !important; - min-width: 0 !important; - max-width: none !important; -} - -/* Parent shell must not expand with absolute dropdown */ -.navbar-but-cluster .navbar-but { +/* Parent shell: shrink-wrap chip only */ +.navbar-but-cluster .navbar-but, +.navbar-but-cluster .navbar-vip { position: relative; - overflow: visible; + overflow: visible !important; + display: inline-flex !important; + align-items: center; width: auto !important; - max-width: fit-content; + max-width: none !important; + min-width: 0 !important; flex: 0 0 auto !important; + height: 34px; } .navbar-but-cluster .payvip-icon.but, .navbar-but-cluster a.payvip-icon { background: linear-gradient(90deg, #ff6b6b, #f04494); color: #fff; - padding: 6px 12px; + padding: 0 12px !important; + height: 34px !important; border-radius: var(--navbar-cta-radius, 20px); text-decoration: none; font-size: 13px; @@ -112,22 +122,20 @@ margin-left: 0; } -/* Publish multi-type dropdown - * - * Wrapper MUST be inline-block (not flex): an absolute dropdown as a flex - * child can still inflate the parent's used width on open/focus-within. - * Size the wrapper strictly to the toggle chip; menu never contributes. - * - * Hover bridge (zibll parity): - * - panel at top:100% (no gap) - * - transparent padding-top = bridge - * - solid plate via ::before under the bridge +/* + * Publish multi-type dropdown + * inline-grid with one max-content column sized ONLY by the in-flow toggle. + * Absolute dropdown is out of track sizing so open cannot widen the chip. */ .navbar-but-cluster .navbar-but .newadd-btns.hover-show, .navbar-but-cluster .newadd-btns.hover-show, .newadd-btns.hover-show { position: relative !important; - display: inline-block !important; /* not flex — isolates absolute menu width */ + display: inline-grid !important; + grid-template-columns: max-content; + grid-template-rows: 34px; + justify-items: stretch; + align-items: center; vertical-align: middle; z-index: 40; background: transparent !important; @@ -136,24 +144,25 @@ margin: 0 !important; border: 0 !important; box-shadow: none !important; - /* Shrink-wrap to toggle only; never grow with open menu */ - width: fit-content !important; - max-width: fit-content !important; + width: auto !important; + max-width: none !important; min-width: 0 !important; height: 34px !important; max-height: 34px !important; - line-height: 0; + line-height: 0 !important; overflow: visible !important; flex: 0 0 auto !important; align-self: center; white-space: nowrap; + float: none !important; } -/* Toggle: fixed chip — click/focus must not change size */ -.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle, +.navbar-but-cluster .newadd-btns > .newadd-btns__toggle, +.navbar-but-cluster button.newadd-btns__toggle, .navbar-but-cluster a.newadd-btns__toggle, -.navbar-but-cluster .newadd-btns__toggle.navbar-cta, -a.newadd-btns__toggle.navbar-cta { +.navbar-but-cluster .newadd-btns__toggle.navbar-cta { + grid-column: 1; + grid-row: 1; display: inline-flex !important; align-items: center !important; justify-content: center !important; @@ -164,43 +173,44 @@ a.newadd-btns__toggle.navbar-cta { padding: 0 14px !important; margin: 0 !important; width: auto !important; - min-width: 0 !important; max-width: none !important; - flex: 0 0 auto !important; + min-width: 0 !important; box-sizing: border-box !important; white-space: nowrap !important; - vertical-align: middle; - /* Prevent focus outline from looking like width growth */ - outline-offset: 2px; + position: relative; + z-index: 2; + justify-self: start; } -.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus, -.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus-visible, -.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:active, -.navbar-but-cluster .newadd-btns.hover-show:focus-within > a.newadd-btns__toggle { +.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus, +.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus-visible, +.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:active, +.navbar-but-cluster .newadd-btns.hover-show:hover > .newadd-btns__toggle, +.navbar-but-cluster .newadd-btns.hover-show:focus-within > .newadd-btns__toggle { width: auto !important; - max-width: none !important; padding: 0 14px !important; height: 34px !important; + transform: none !important; + opacity: 1; } -/* Menu is purely out-of-flow; fixed min width independent of toggle */ -.navbar-but-cluster .newadd-btns .drop-newadd, +.navbar-but-cluster .newadd-btns > .drop-newadd, .navbar-but-cluster .newadd-btns .hover-show-con.drop-newadd, -.newadd-btns .drop-newadd, +.newadd-btns > .drop-newadd, .newadd-btns .hover-show-con.drop-newadd { + grid-column: 1; + grid-row: 1; display: block !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; + bottom: auto !important; float: none !important; - /* Fixed width so open state never reads as "button got longer" */ width: 168px !important; min-width: 168px !important; - max-width: min(168px, 80vw) !important; + max-width: 168px !important; margin: 0 !important; - /* Transparent hover bridge — part of the panel hit area */ padding: 10px 0 6px !important; background: transparent !important; border: 0 !important; @@ -210,21 +220,19 @@ a.newadd-btns__toggle.navbar-cta { visibility: hidden; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; - z-index: 1200; + z-index: 1200 !important; pointer-events: none; box-sizing: border-box !important; - /* Absolute: never affect parent inline-size */ - inset-inline-end: 0; + justify-self: end; } -/* Solid readable plate under the bridge */ .navbar-but-cluster .newadd-btns .drop-newadd::before, .newadd-btns .drop-newadd::before, .newadd-btns .hover-show-con.drop-newadd::before { content: "" !important; display: block !important; position: absolute; - inset: 8px 0 0 0; /* sit below the transparent bridge */ + inset: 8px 0 0 0; background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; @@ -233,14 +241,12 @@ a.newadd-btns__toggle.navbar-cta { pointer-events: none; } -.navbar-but-cluster .newadd-btns.hover-show:hover .drop-newadd, +.navbar-but-cluster .newadd-btns.hover-show:hover > .drop-newadd, +.navbar-but-cluster .newadd-btns.hover-show:focus-within > .drop-newadd, .navbar-but-cluster .newadd-btns.hover-show:hover .hover-show-con.drop-newadd, -.navbar-but-cluster .newadd-btns.hover-show:focus-within .drop-newadd, .navbar-but-cluster .newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd, -.newadd-btns.hover-show:hover .drop-newadd, -.newadd-btns.hover-show:hover .hover-show-con.drop-newadd, -.newadd-btns.hover-show:focus-within .drop-newadd, -.newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd { +.newadd-btns.hover-show:hover > .drop-newadd, +.newadd-btns.hover-show:focus-within > .drop-newadd { opacity: 1; visibility: visible; transform: translateY(0); diff --git a/inc/helpers/aksrt-header-menu-buttons.php b/inc/helpers/aksrt-header-menu-buttons.php index 1659b9e9..b719c010 100644 --- a/inc/helpers/aksrt-header-menu-buttons.php +++ b/inc/helpers/aksrt-header-menu-buttons.php @@ -186,12 +186,14 @@ if (!function_exists('aksrt_render_new_add_btns')) : } $html = ''; - $html .= '' + // type=button keeps focus without navigating; avoids link min-width quirks. + $html .= ''; + // Sibling dropdown (not a flex child of the painted chip). + $html .= '