Giorgio Gilestro
f57c863145
Hovering a toggle (tone, theme, language) previously revealed the non-active option inline next to the active one, which widened the toggle and pushed its neighbours sideways. Now the non-active option appears as a popup ABSOLUTELY POSITIONED below the active one — the toggle's in-flow footprint stays exactly one button wide and tall, so the other two toggles next to it never move when the user mouses over one of them. Mechanism: inside @media (hover: hover) the container becomes position:relative and every button defaults to display:none. The :hover/:focus-within rule renders all options as position:absolute under the container. Specificity (.X[data=Y] btn[data=Y]) on the active-button rule then pins the active option back into the static flow at the top, so only the non-active end(s) up absolute — popup grows downward only. margin-top:-1px makes the popup's top border overlap the container's bottom border for a single shared edge. z-index:60 sits above the markets bar (z-50). Touch devices keep both options side-by-side (the @media gate); the mobile drawer keeps both visible too. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| css | ||
| images | ||
| js | ||