MediaWiki:Gadget-sectionAnchors.css

/**
 * 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('https://wiki.geministation.com/images/8/82/Section_anchor_light.png');
}

body.wgl-darkmode .mw-header:hover .mw-headline-headanchor,
body.wgl-darkmode .mw-headline-headanchor:target {
	background-image: url('https://wiki.geministation.com/images/3/34/Section_anchor_dark.png');
}

/** 
 * 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;
}