MediaWiki:Gadget-vector-headanchor.css
Jump to navigation
Jump to search
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*! * Vector HeadAnchors gadget, from <https://mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.js> * * Copyright 2013 Timo Tijhof * @license MIT <https://opensource.org/licenses/MIT> */ /* Revision as of 2021-10-11 */ .tpl-vheadanchor-heading { 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 [[User:Tgr]]! */ overflow: visible; display: flow-root; } .tpl-vheadanchor { position: absolute; /* consistent font and size, regardless of heading level */ font-family: serif; font-size: 24px; font-weight: normal; /* reset any bolding from H3-H6 styles */ line-height: 1.3; /* Based on Vector mw-body padding being 16px */ left: -16px; /* Use padding instead of margin. Two reasons: 1. With margin, there would be a pointer gap between headline and anchor, and thus flickering because :hover would not match in-between 2. With padding, we get a bigger tap/hover area. */ padding: 0 3px; } h3 .tpl-vheadanchor { line-height: 1.1; } h4 .tpl-vheadanchor, h6 .tpl-vheadanchor, h6 .tpl-vheadanchor { line-height: 1.0; } /* Based on Vector wide viewport using mw-body padding of 24px */ @media screen and (min-width: 982px) { .tpl-vheadanchor { left: -24px; padding: 0 7px; } } .tpl-vheadanchor-heading:not(:hover) .mw-headline:not(:target) ~ .tpl-vheadanchor { color: #c8ccd1; }