https://compusofia.com/w/index.php?action=history&feed=atom&title=MediaWiki%3AGadget-vector-headanchor.css 2026-04-26T07:51:01Z Revision history for this page on the wiki MediaWiki 1.45.3 https://compusofia.com/w/index.php?title=MediaWiki:Gadget-vector-headanchor.css&diff=1912&oldid=prev 2026-04-09T10:34:01Z

<p>1 revision imported: Initial Setup</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 12:34, 9 April 2026</td> </tr><tr><td colspan="4" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div> </td></tr> <!-- diff cache key wikiNonStop:diff:1.41:old-1911:rev-1912 --> </table>

Majestix https://compusofia.com/w/index.php?title=MediaWiki:Gadget-vector-headanchor.css&diff=1911&oldid=prev 2024-09-06T23:13:52Z

<p></p> <p><b>New page</b></p><div>/*!<br /> * Vector HeadAnchors gadget<br /> *<br /> * Copyright 2013 Timo Tijhof, https://mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.js<br /> * SPDX-License-Identifier: MIT<br /> * License: https://opensource.org/licenses/MIT<br /> */<br /> <br /> .tpl-vheadanchor-heading {<br /> position: relative;<br /> /*<br /> Disable Vector&#039;s `overflow: hidden` because otherwise<br /> our negatively positioned anchor won&#039;t be visible.<br /> <br /> By itself, showing overflow would cause two problems:<br /> <br /> 1. We normally hide overflow for a reason. Namely, to ensure<br /> that infoboxes and thumbnails retain their margins and thus<br /> things like heading bottom borders will stay away from the<br /> edge of these floated boxes.<br /> 2. Headanchor needs `position: relative`, which affects stacking<br /> context (like z-index). If we don&#039;t hide overflow, that means<br /> the heading and its border etc will render over top and<br /> strike-through any content in the thumbnail and infobox.<br /> <br /> We solve both of these by bringing back the &quot;create block-formatting<br /> context&quot; behaviour of `overflow: hidden` with `display: flex-root`.<br /> This isn&#039;t supported in all Basic browsers, but good enough for<br /> this gadget.<br /> <br /> Thanks [[User:Tgr]]!<br /> */<br /> overflow: visible;<br /> display: flow-root;<br /> }<br /> <br /> .ext-discussiontools-init-section.tpl-vheadanchor-heading {<br /> overflow: visible;<br /> }<br /> <br /> .tpl-vheadanchor {<br /> position: absolute;<br /> /* consistent font and size, regardless of heading level */<br /> font-family: serif;<br /> font-size: 24px;<br /> font-weight: normal; /* reset any bolding from H3-H6 styles */<br /> line-height: 1.3;<br /> /* Based on Vector mw-body padding being 16px */<br /> left: -16px;<br /> /* Use padding instead of margin. Two reasons:<br /> 1. With margin, there would be a pointer gap between headline and anchor,<br /> and thus flickering because :hover would not match in-between<br /> 2. With padding, we get a bigger tap/hover area.<br /> */<br /> padding: 0 3px;<br /> }<br /> <br /> <br /> h3 ~ .tpl-vheadanchor {<br /> line-height: 1.1;<br /> }<br /> h4 ~ .tpl-vheadanchor,<br /> h6 ~ .tpl-vheadanchor,<br /> h6 ~ .tpl-vheadanchor {<br /> line-height: 1.0;<br /> }<br /> <br /> /* Based on Vector wide viewport using mw-body padding of 24px */<br /> @media screen and (min-width: 982px) {<br /> .skin-vector .tpl-vheadanchor {<br /> left: -24px;<br /> padding: 0 7px;<br /> }<br /> }<br /> <br /> .tpl-vheadanchor-heading:not(:hover) [id]:not(:target) ~ .tpl-vheadanchor {<br /> color: #c8ccd1;<br /> }</div>

en>Krinkle