MediaWiki:Gadget-sectionAnchors.css: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
No edit summary Tag: Manual revert |
No edit summary |
||
| 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(' |
-webkit-mask-image: url('/images/rss/Section anchor light.svg'); |
||
mask-image: url(' |
mask-image: url('/images/rss/Section anchor light.svg'); |
||
background-color: var(--text-color); |
background-color: var(--text-color); |
||
} |
} |
||
Latest revision as of 17:15, 17 October 2024
/**
* 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;
}