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)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Vector HeadAnchors
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.css
 *
 * @license http://krinkle.mit-license.org/
 * @author Timo Tijhof, 2013–2014
 *
 * See also:
 * https://www.mediawiki.org/wiki/Requests_for_comment/Clickable_section_anchors
 * https://phabricator.wikimedia.org/T18691
 */

.mw-header {
	/* core sets this to fix editsection link bunching, but they no longer float
	 * and we need this so that the anchors are visible */
	overflow: visible;
}

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

/* header underline */
.mw-headline-underline {
    border-bottom: 1px solid #e4eaee;
    margin-bottom: -3px;
    margin-top: 3px;
    overflow: hidden;
}

body.wgl-darkmode .mw-headline-underline {
    border-bottom: 1px solid #596e96;
    margin-bottom: -3px;
    margin-top: 3px;
    overflow: hidden;
}