MediaWiki:Gadget-sectionAnchors.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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/**
 * Vector HeadAnchors
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.css
 *
 * Copyright 2013 Timo Tijhof
 * @license MIT <https://opensource.org/licenses/MIT>
 *
 * See also:
 * https://www.mediawiki.org/wiki/Requests_for_comment/Clickable_section_anchors
 * https://phabricator.wikimedia.org/T18691
 */

.mw-header {
	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 [[mw:User:Tgr]]!
	*/
	overflow: visible;
	display: flow-root;
}

.mw-headline-headanchor {
	padding-left: 25px;
	margin-left: -25px;
	background-size: 15px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.mw-headline-headanchor,
.mw-headline-headanchor:hover,
.mw-headline-headanchor:visited {
	color: inherit;
	text-decoration: none;
}

.mw-headline-headanchor:focus {
	outline: 0;
}

.mw-header:hover .mw-headline-headanchor,
.mw-headline-headanchor:target {
	background-image: url('filepath://Section anchor light.svg');
}

body.wgl-darkmode .mw-header:hover .mw-headline-headanchor,
body.wgl-darkmode .mw-headline-headanchor:target {
	background-image: url('filepath://Section anchor dark.svg');
}

/** 
 * fix section heading being hidden underneath sticky header
 * source: <https://css-tricks.com/hash-tag-links-padding/>
 */

body.wgl-stickyheader.action-view .mw-headline-headanchor:target {
	display: block;
	position: relative;
	bottom: -1.25rem;
	background-position: left bottom;
	z-index: -1;
}

body.wgl-stickyheader.action-view .mw-headline-headanchor:target::before {
	display: block;
	content: '';
	margin-top: -4rem;
	height: 4rem;
	visibility: hidden;
	pointer-events: none;
}

/* override [[MediaWiki:Common.less/interface.less]] - sticky header hack uses
   a different selector when this gadget is disabled */
body.wgl-stickyheader.action-view .mw-headline:target::before {
	display: none;
}