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

/* {{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)*/;
	width: 52px;
	height: 42px;
	overflow: hidden;
	border-radius: 4px;
}
 div#skip-to-top-button#skip-to-top-button#skip-to-top-button#skip-to-top-button img.mw-file-element.mw-file-element.mw-file-element.mw-file-element.mw-file-element, div#skip-to-bottom-button#skip-to-bottom-button#skip-to-bottom-button#skip-to-bottom-button img.mw-file-element.mw-file-element.mw-file-element.mw-file-element.mw-file-element{
  max-width: 99999999% !important;
  height: 42px !important;
}
#skip-to-top-button:active *{
	position: relative;
	top: 0px;
	left: -34.75px;
}
#skip-to-bottom-button *{
	position: relative;
	top: 0px;
	left: -17.375px;
}
#skip-to-bottom-button:active *{
	position: relative;
	top: 0px;
	left: -52.125px;
}

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

#skip-to-top-button:active,
#skip-to-bottom-button:active {
	filter: brightness(0.65) contrast(2);
	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;
	}
}