MediaWiki:Gadget-vector-headanchor.css

 /*!
  * Vector HeadAnchors gadget
  *
  * Copyright 2013 Timo Tijhof, https://mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.js
  * SPDX-License-Identifier: MIT
  * License: https://opensource.org/licenses/MIT
  */

 .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;
 }

 .ext-discussiontools-init-section.tpl-vheadanchor-heading{
 overflow:visible;
 }

 .tpl-vheadanchor{
 position:absolute;
 /* consistent font and size, regardless of heading level */
 font-family:serif;
 font-size:24px;
 font-weight:normal;/* reset any bolding from H3-H6 styles */
 line-height:1.3;
 /* Based on Vector mw-body padding being 16px */
 left:-16px;
 /* Use padding instead of margin. Two reasons:
 	 1. With margin, there would be a pointer gap between headline and anchor,
 	 and thus flickering because :hover would not match in-between
 	 2. With padding, we get a bigger tap/hover area.
 	*/
 padding:03px;
 }


 h3~.tpl-vheadanchor{
 line-height:1.1;
 }
 h4~.tpl-vheadanchor,
 h6~.tpl-vheadanchor,
 h6~.tpl-vheadanchor{
 line-height:1.0;
 }

 /* Based on Vector wide viewport using mw-body padding of 24px */
 @mediascreenand(min-width:982px){
 .skin-vector.tpl-vheadanchor{
 left:-24px;
 padding:07px;
 }
 }

 .tpl-vheadanchor-heading:not(:hover)[id]:not(:target)~.tpl-vheadanchor{
 color:#c8ccd1;
 }