MediaWiki:Gadget-sectionAnchors.css

< Gadgets-definition

After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.

In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Safari: Hold down ⇧ Shift and click the Reload button.
In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.

/**
 * Vector HeadAnchors
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.css
 *
 * Copyright 2013 Timo Tijhof + with OSW customisations
 * @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::after {
	content: '';
	/* originally px, using rem to match different paddings applied to
	.mw-body when > 982px */
	padding-left: 1rem; 
	margin-left: -1rem;
	-webkit-mask: no-repeat 50% 50% / 15px; /* support chrome/safari */
	mask: no-repeat 50% 50% / 15px;
}

@media screen and (min-width: 982px) {
	.mw-headline-headanchor::after {
		padding-left: 1.5rem; 
		margin-left: -1.5rem;
	}
}

.mw-header:hover .mw-headline-headanchor::after,
.mw-headline-headanchor:target::after {
	-webkit-mask-image: url('/images/rss/Section anchor light.svg');
	mask-image: url('/images/rss/Section anchor light.svg');
	background-color: var(--text-color);
}

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

/** 
 * fix section heading being hidden underneath sticky header
 * @source <https://css-tricks.com/hash-tag-links-padding/>
 *
 * Note: a more optimal fix would be to use `scroll-padding-top` on page <html>;
 * however that requires the use of :has() pseudo-class (which is only recently
 * supported) as the `wgl-stickyheader` class is on <body>
 */

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

body.wgl-stickyheader.action-view .mw-headline-headanchor:target::after {
	position: relative;
	bottom: -0.625rem;
}

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