Jump to content

User:RuzDD/Template:Skip to top and bottom/styles.css

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* {{pp-template}} */
#skip-to-top-button,
#skip-to-bottom-button {
	position: fixed;
	bottom: 8px;
	z-index: 50;
	box-shadow: 2px 2px 7px rgba(0,0,0,0.25)/*, inset -2px -2px 5px rgba(0,0,0,0.25)*/;
}

#skip-to-top-button:hover,
#skip-to-bottom-button:hover {
	filter: brightness(1.05) contrast(1.1);
}

#skip-to-top-button:active,
#skip-to-bottom-button:active {
	filter: brightness(0.6) contrast(1.5);
	box-shadow: 2px 2px 7px rgba(0,0,0,0.25)/*, inset 2px 2px 5px rgba(0,0,0,0.25)*/;
}

#skip-to-bottom-button {
	right: 8px;
}

#skip-to-top-button {
	right: 64px;
}

/* Avoid overlapping with Vector 2022 width toggle */
@media (min-width: 1400px) {
	body.skin-vector-2022 #skip-to-bottom-button {
		right: 68px;
	}
	
	body.skin-vector-2022 #skip-to-top-button {
		right: 124px;
	}
}