MediaWiki:Gadget-vector-headanchor.css

/*! * Vector HeadAnchors gadget, from  * * Copyright 2013 Timo Tijhof * @license MIT  */ /* Revision as of 2021-10-11 */

.tpl-vheadanchor-heading { position: relative; /*	Disable Vector's `overflow: hidden` because otherwise our negatively positioned anchor won't be visible. By itself, showing overflow would cause two problems:

1. We normally hide overflow for a reason. Namely, to ensure that infoboxes and thumbnails retain their margins and thus things like heading bottom borders will stay away from the edge of these floated boxes. 2. Headanchor needs `position: relative`, which affects stacking context (like z-index). If we don't hide overflow, that means the heading and its border etc will render over top and strike-through any content in the thumbnail and infobox. We solve both of these by bringing back the "create block-formatting   context" behaviour of `overflow: hidden` with `display: flex-root`. This isn't supported in all Basic browsers, but good enough for this gadget. Thanks User:Tgr! */	overflow: visible; display: flow-root; }

.tpl-vheadanchor { position: absolute; left: -17px; /* padding instead of margin, as otherwise there is a pointer gap between the headline and anchor, and thus possible flickering due to vheadanchor:hover not matching in between. */	padding: 0 4px; line-height: inherit; font-weight: normal; /* reset any bolding from H3-H6 styles */ }

.tpl-vheadanchor-heading:not(:hover) .mw-headline:not(:target) ~ .tpl-vheadanchor { color: #a2a9b1; }