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(--main-bg-color);
	box-shadow: var(--main-box-shadow);
	border: none;
}

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

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

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

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

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

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

@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-bg-color);
	border: 1px solid var(--main-border-color);
	box-shadow: var(--main-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(--element-border-color-light);
}

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

.sidebar-collapsible {
	background-repeat: no-repeat;
	background-position: right;
}

.sidebar-collapsible:hover {
	cursor: pointer;
}

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

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

.sidebar-collapsible:after {
	float: right;
}

.sidebar-collapsible.open:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20'%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath d='m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z'/%3E%3C/svg%3E");
}

.sidebar-collapsible.closed:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20'%3E%3Ctitle%3Enext%3C/title%3E%3Cpath d='M7 1 5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/%3E%3C/svg%3E");
}

.client-darkmode .sidebar-collapsible.open:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23fff' viewBox='0 0 20 20'%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath d='m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z'/%3E%3C/svg%3E");
}

.client-darkmode .sidebar-collapsible.closed:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23fff' viewBox='0 0 20 20'%3E%3Ctitle%3Enext%3C/title%3E%3Cpath d='M7 1 5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/%3E%3C/svg%3E");
}

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

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

@media screen and (max-width: 850px) {
	.sidebar-inner {
		background: var(--element-bg-color);
		border: 1px solid var(--element-border-color-light);
	}
}

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

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

	#mw-site-navigation .sidebar-inner {
		background: var(--element-bg-color);
		border: 1px solid var(--element-border-color-light);
	}

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

/* --- FOOTER --- */

.client-darkmode .mw-footer-container {
	color: var(--main-text-color);
	background: var(--element-bg-color);
}

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

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