MediaWiki:Common.css: Difference between revisions

Revision as of 05:50, 30 May 2024

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

/*#mw-content-wrapper { background: url('https://wiki.idleclans.com/images/e/ed/Idle_clans_background.png')
background-size: cover; }*/

/*#mw-content-block {
	background: url(https://wiki.idleclans.com/images/c/cd/Idle_clans_background3.png);
	background-size: auto, auto;
}*/


/*.client-darkmode #mw-wrapper,
.client-darkmode #mw-header-container,
.client-darkmode #mw-content-wrapper,
.client-darkmode #mw-site-navigation,
.client-darkmode #mw-related-navigation{
	filter: invert(100%) hue-rotate(180deg);
}*/
/*.client-darkmode #mw-content-container {
	margin-top: 0;
	!*background: #000000;*!
}*/

/*.client-darkmode #mw-content-wrapper,
.client-darkmode #mw-site-navigation,
.client-darkmode #mw-related-navigation {
	margin-top:3.475em
}*/
/*#mw-content {
  background-image: url('https://wiki.idleclans.com/images/d/d1/Idle_clans_background2.png');
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}*/

/*
 * # 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/d/d5/Wiki_background_large.png);
	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 */
}