MediaWiki:Gadget-sectionAnchors.css

 1 /**
 2  * Vector HeadAnchors
 3  * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.css
 4  *
 5  * Copyright 2013 Timo Tijhof
 6  * @license MIT <https://opensource.org/licenses/MIT>
 7  *
 8  * See also:
 9  * https://www.mediawiki.org/wiki/Requests_for_comment/Clickable_section_anchors
10  * https://phabricator.wikimedia.org/T18691
11  */
12 
13 .mw-header {
14 	position: relative;
15 	/*
16 	Disable Vector's `overflow: hidden` because otherwise
17 	our negatively positioned anchor won't be visible.
18 	   
19 	By itself, showing overflow would cause two problems:
20 
21 	1. We normally hide overflow for a reason. Namely, to ensure
22 	   that infoboxes and thumbnails retain their margins and thus
23 	   things like heading bottom borders will stay away from the
24 	   edge of these floated boxes.
25 	2. Headanchor needs `position: relative`, which affects stacking
26 	   context (like z-index). If we don't hide overflow, that means
27 	   the heading and its border etc will render over top and
28 	   strike-through any content in the thumbnail and infobox.
29 	
30 	We solve both of these by bringing back the "create block-formatting
31 	context" behaviour of `overflow: hidden` with `display: flex-root`.
32 	This isn't supported in all Basic browsers, but good enough for
33 	this gadget.
34 	
35 	Thanks [[mw:User:Tgr]]!
36 	*/
37 	overflow: visible;
38 	display: flow-root;
39 }
40 
41 .mw-headline-headanchor {
42 	padding-left: 25px;
43 	margin-left: -25px;
44 	background-size: 15px;
45 	background-repeat: no-repeat;
46 	background-position: 50% 50%;
47 }
48 
49 .mw-headline-headanchor,
50 .mw-headline-headanchor:hover,
51 .mw-headline-headanchor:visited {
52 	color: inherit;
53 	text-decoration: none;
54 }
55 
56 .mw-headline-headanchor:focus {
57 	outline: 0;
58 }
59 
60 .mw-header:hover .mw-headline-headanchor,
61 .mw-headline-headanchor:target {
62 	background-image: url('images/Section_anchor_light.svg');
63 }
64 
65 body.wgl-darkmode .mw-header:hover .mw-headline-headanchor,
66 body.wgl-darkmode .mw-headline-headanchor:target {
67 	background-image: url('images/Section_anchor_dark.svg');
68 }
69 
70 /** 
71  * fix section heading being hidden underneath sticky header
72  * source: <https://css-tricks.com/hash-tag-links-padding/>
73  */
74 
75 body.wgl-stickyheader.action-view .mw-headline-headanchor:target {
76 	display: block;
77 	position: relative;
78 	bottom: -1.25rem;
79 	background-position: left bottom;
80 	z-index: -1;
81 }
82 
83 body.wgl-stickyheader.action-view .mw-headline-headanchor:target::before {
84 	display: block;
85 	content: '';
86 	margin-top: -4rem;
87 	height: 4rem;
88 	visibility: hidden;
89 	pointer-events: none;
90 }
91 
92 /* override [[MediaWiki:Common.less/interface.less]] - sticky header hack uses
93    a different selector when this gadget is disabled */
94 body.wgl-stickyheader.action-view .mw-headline:target::before {
95 	display: none;
96 }