Alex at 16:15, 17 October 2024

2024-10-17T16:15:27Z

← Older revision		Revision as of 18:15, 17 October 2024
Line 58:		Line 58:
	.mw-header:hover .mw-headline-headanchor::after,		.mw-header:hover .mw-headline-headanchor::after,
	.mw-headline-headanchor:target::after {		.mw-headline-headanchor:target::after {
	-webkit-mask-image: url('~~filepath:~~//Section anchor light.svg');		-webkit-mask-image: url('/images/rss/Section anchor light.svg');
	mask-image: url('~~filepath:~~//Section anchor light.svg');		mask-image: url('/images/rss/Section anchor light.svg');
	background-color: var(--text-color);		background-color: var(--text-color);
	}		}

Alex at 23:10, 16 October 2024

2024-10-16T23:10:39Z

← Older revision		Revision as of 01:10, 17 October 2024
Line 58:		Line 58:
	.mw-header:hover .mw-headline-headanchor::after,		.mw-header:hover .mw-headline-headanchor::after,
	.mw-headline-headanchor:target::after {		.mw-headline-headanchor:target::after {
	-webkit-mask-image: url('filepath://~~Section_anchor_light~~.svg');		-webkit-mask-image: url('filepath://Section anchor light.svg');
	mask-image: url('filepath://~~Section_anchor_light~~.svg');		mask-image: url('filepath://Section anchor light.svg');
	background-color: var(--text-color);		background-color: var(--text-color);
	}		}

Alex at 02:46, 13 October 2024

2024-10-13T02:46:01Z

← Older revision		Revision as of 04:46, 13 October 2024
Line 58:		Line 58:
	.mw-header:hover .mw-headline-headanchor::after,		.mw-header:hover .mw-headline-headanchor::after,
	.mw-headline-headanchor:target::after {		.mw-headline-headanchor:target::after {
	-webkit-mask-image: url('filepath://~~Section anchor light~~.svg');		-webkit-mask-image: url('filepath://Section_anchor_light.svg');
	mask-image: url('filepath://~~Section anchor light~~.svg');		mask-image: url('filepath://Section_anchor_light.svg');
	background-color: var(--text-color);		background-color: var(--text-color);
	}		}

Alex: Created page with "/** * Vector HeadAnchors * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.css * * Copyright 2013 Timo Tijhof + with OSW customisations * @license 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..."

2024-10-13T00:47:46Z

Created page with "* * 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..."

New page

/**
* 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('filepath://Section anchor light.svg');
mask-image: url('filepath://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;
}

MediaWiki:Gadget-sectionAnchors.css - Revision history

Alex at 16:15, 17 October 2024

Alex at 23:10, 16 October 2024

Alex at 02:46, 13 October 2024