MediaWiki:Gadget-vector-headanchor.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/*!
 * 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: 0 3px;
}


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 */
@media screen and (min-width: 982px) {
	.skin-vector .tpl-vheadanchor {
		left: -24px;
		padding: 0 7px;
	}
}

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