MediaWiki:Gadget-stickyHeader.css

From Official Gamemode 4 Wiki
Revision as of 06:17, 3 March 2024 by Epyon (talk | contribs) (Does this work first try?)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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.
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%;
	}
}