MediaWiki:Gadget-stickyScrollBackground.css

@media screen and (min-width: 1100px) { #sticky-container { --sticky-height: 700px; --sticky-offset: 1750px;

position: absolute; top: var(--sticky-offset); bottom: 0; width: 100%;

}

#sticky-slider { position: sticky; top: calc(100vh - var(--sticky-height)); width: 100%; height: var(--sticky-height); max-height: 100%; display: flex; flex-direction:row; overflow:hidden; }

#sticky-slider > * { flex: 1 1 0px; background-repeat: no-repeat; background-size: auto var(--sticky-height); }

#sticky-left { background-position: top left, top left calc(50% - (50vw - 16em) / 2); background-image: linear-gradient(5deg, rgba(186, 45, 18, 0.8) -5%, transparent 10%), url(https://static.miraheze.org/phereonwiki/a/a3/CreaCutout.png), linear-gradient(15deg, rgba(186, 45, 18, 0.8), transparent 25%);

}

#sticky-right { background-position: top right, top right calc(50% - (50vw - 18em) / 2); background-image: linear-gradient(-5deg,rgba(86, 188, 204, 0.8) -5%,transparent 10%), url(https://static.miraheze.org/phereonwiki/2/2f/EvoCutout.png), linear-gradient(-15deg,rgba(86, 188, 204, 0.8),transparent 25%); }

@media (max-width: 1339px) { #sticky-right { visibility: hidden; }	}

@media (min-width: 1751px) { #sticky-left { background-position: top left, top left calc(50% - 83em / 4); }

#sticky-right { background-position: top right, top right calc(50% - 83em / 4 + 1em); }	}

@media (min-width: 2000px) { #sticky-container { top: calc(100vw - (2000px - var(--sticky-offset))); }	} }