MediaWiki:Timeless.css

/* --- MAIN --- */

#mw-content-container {
	background: url(https://idleon.info/wiki/images/9/9f/Background_Beach.png) no-repeat center center fixed;
	background-size: cover;
}

.client-darkmode #mw-content-container {
	filter: none;
	background: url(https://idleon.info/wiki/images/2/24/NightDesertBG.png) no-repeat center center fixed;
	background: url(https://idleon.wiki/wiki/images/2/28/NightDesertBG-inverted-rotate180.png) no-repeat center center fixed;
	background-size: cover;
}

#mw-content {
	background: var(--base-1);
	box-shadow: var(--box-shadow);
	border: none;
}

@media screen and (min-width: 1100px) {
	#mw-content {
		border: 1px solid var(--accent-2);
		border-radius: 0 0 3px 3px;
		border-top-width: 0;
	}
}

/* --- TOP BAR --- */

@media screen and (max-width: 550px) {
	#p-logo-text {
		position: absolute;
	}
}

#personal .dropdown {
	background:var(--base-2); 
	border:1px solid var(--accent-2);
	box-shadow: var(--box-shadow);
}
#personal .dropdown:before, 
#personal .dropdown:after { 
	border-bottom-color: var(--base-2);
}

.client-darkmode #personal .dropdown {
	color: #fff;
}

/* --- SIDEBAR LOGO --- */

#p-logo {
	border-radius: 3px;
	border: 1px solid #0c0d1c;
	box-shadow: var(--box-shadow);
	margin-top: 1em;
	padding: 0;
	image-rendering: -webkit-optimize-contrast;
}

.client-darkmode #p-logo {
	border-color: var(--accent-2);
}

@media screen and (min-width: 851px) {
	.mw-wiki-logo.fallback {
		width: 13em;
		height: 13em;
		background-size: cover;
		margin: 0;
		max-width: 100%;
	}
}

/* --- SIDEBAR NAV --- */

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
	background: var(--sidebar-base);
	border: 1px solid var(--accent-2);
	box-shadow: var(--box-shadow);
	border-radius: 3px;
}

#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3 {
	font-family: 'Idleon';
	font-size: 16px;
	padding: .5em 0 !important;
	border-bottom-color: var(--accent-2);
}

#mw-site-navigation .sidebar-chunk h3:empty {
	display: none
}

.sidebar-collapsible {
	cursor: pointer;
}

div#sidebar-collapsible-toggle {
	text-align: right;
	font-size: .95em;
	color: var(--link);
	cursor: pointer;
}

div#sidebar-collapsible-toggle:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.sidebar-collapsible:after {
	float: right;
	content: "";
    display: block;
    height: 15px;
    width: 15px;
    background: var(--contrast-1);
    -webkit-mask-image: url(/wiki/load.php?modules=oojs-ui.styles.icons-movement&image=expand&format=rasterized&skin=timeless&version=1c8vu);
    mask-image: url(/wiki/load.php?modules=oojs-ui.styles.icons-movement&image=expand&format=rasterized&skin=timeless&version=1c8vu);
    -webkit-mask-size: cover;
    mask-size: cover;
}
.client-darkmode .sidebar-collapsible:after {
	background: #fff;
}

.sidebar-collapsible.open:after {
    transform: rotate(-90deg);
}

.sidebar-collapsible.closed+.sidebar-collapsible-content {
	display: none;
}

.sidebar-collapsible.open+.sidebar-collapsible-content {
	display: block;
}

.client-darkmode .sidebar-inner {
	color: #fff;
}

@media screen and (max-width: 850px) {
	.sidebar-inner {
		background: var(--base-2);
		border: 1px solid var(--accent-2);
	}
}

@media screen and (min-width: 851px) and (max-width: 1099px) {

	#mw-site-navigation .sidebar-chunk,
	#mw-related-navigation .sidebar-chunk {
		background: transparent;
		box-shadow: none;
		border: none;
	}

	#mw-site-navigation .sidebar-inner,
	#mw-related-navigation .sidebar-inner {
		background: var(--base-2);
		border: 1px solid var(--accent-2);
	}

	#mw-site-navigation .sidebar-chunk h2 span:before,
	#mw-site-navigation .sidebar-chunk h2 span:after {
		border-bottom-color: var(--base-2);
	}

	#mw-header-nav-hack { 
		background:var(--base-1); 
		border-color:var(--accent-1);
	}
}

/* --- FOOTER --- */

.client-darkmode .mw-footer-container {
	color: var(--contrast-1);
	background: var(--base-1);
}

.client-darkmode .mw-footer-container a,
.client-darkmode .mw-footer-container a:visited {
	color: var(--link);
}

.client-darkmode .mw-footer-container a:hover,
.client-darkmode .mw-footer-container a:visited:hover {
	color: var(--link-hover);
}