MediaWiki:Gadget-stickyHeader.css: Difference between revisions
Jump to navigation
Jump to search
(Does this work first try?) |
(No difference)
|
Latest revision as of 06:17, 3 March 2024
html {
scroll-padding-top: 50px;
}
#stickyTop.stick {
--sticky-header-left-margin: 10em;
position: fixed;
top: 0;
margin-left: var(--sticky-header-left-margin);
margin-right: calc(var(--sticky-header-left-margin) + 10px);
width: 100%;
z-index: 500;
background-image: var(--header-background);
background-repeat: repeat-x;
background-position: top left;
background-size: auto 234px;
margin-top: -52px;
}
@media screen and (max-width: 720px) {
#stickyTop.stick {
--sticky-header-left-margin: 10px;
}
}
@media screen and (min-width: 982px) {
#stickyTop.stick {
--sticky-header-left-margin: 11em;
}
}
#stickyTop.stick #stickyTopFlex {
position: relative;
z-index: 502;
}
#stickyTop.stick #left-navigation {
margin-left: 0;
}
#stickyTop.stick #right-navigation {
margin-right: calc(var(--sticky-header-left-margin) + 10px);
}
#stickyTop.stick #stickyTopBack {
position: absolute;
width: calc(100% - var(--sticky-header-left-margin) - 10px);
height: 6px;
bottom: -6px;
z-index: 501;
background: var(--content-border-top-color);
border-bottom: 6px var(--content-background-color) solid;
}
#stickyTop.stick #stickyTopBack::after {
content: "";
position: absolute;
border-top: 6px solid var(--content-border-top-right-color);
border-left: 6px solid var(--content-border-top-color);
z-index: 1;
top: 0;
right: 0;
}
@media screen and (min-width: 1200px) {
#stickyTop.stick.fixedWidth {
width: calc(var(--fixed-width) - var(--sticky-header-left-margin) - 10px);
}
#stickyTop.stick.fixedWidth #right-navigation {
margin-right: 0;
}
#stickyTop.stick.fixedWidth #stickyTopBack {
width: 100%;
}
}