MediaWiki:Common.css: Difference between revisions

Latest revision as of 14:48, 7 October 2024

/* All CSS here will be loaded for users of the Timeless skin */

/*
 * # Background image
 * Add our background to the "before" tag.
 * The reason we're doing is this way is because we're using filters,
 * and if we did that on the main div, it would also apply to every child
 * element, which we don't want.
 */
#mw-wrapper::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -10000;
	display: block;
	background-image: url(https://wiki.idleclans.com/images/8/8c/Wiki_background_large.webp);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	transform: scale(1.22);
	filter: blur(0.5rem) brightness(0.7);
	-webkit-filter: blur(0.5rem) brightness(0.7);
	-moz-filter: blur(0.5rem) brightness(0.7);
	-o-filter: blur(0.5rem) brightness(0.7);
}

/*
 * # Background image
 * Fix the background image in dark mode
 */
.client-darkmode #mw-wrapper::before {
	filter: invert(1) hue-rotate(180deg) blur(0.5rem) brightness(1);
	-webkit-filter: invert(1) hue-rotate(180deg) blur(0.5rem) brightness(1);
	-moz-filter: invert(1) hue-rotate(180deg) blur(0.5rem) brightness(1);
	-o-filter: invert(1) hue-rotate(180deg) blur(0.5rem) brightness(1);
}

.client-darkmode body {
	background: unset; /* Background image - Remove the gray background in dark mode */
}

#mw-content-container {
	background: unset; /* Background image - Remove the gray background */
}

#mw-wrapper {
	/*
	 * # Background image
	 * We want the footer to extend all the way down, and to do that we need
	 * the parent div to know its full high.
	 */
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.mw-footer-container {
	background: #72777d; /* Background image - Add the gray background back to the footer */
	height: 100%; /* Background image - Make the footer extend all the way down */
}