MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */
:root {
	--background-color: #4a8db7; /*only visible if background image doesn't load. It is the shade of blue used in the background image*/
	--accent-color-1: #4a8db7;
	--accent-color-2: #000000;
	--accent-contrast-1: #FFFFFF;
	
	--border-thickness: 5px;
	--border: dashed var(--accent-color-1) var(--border-thickness);
}

/* background */
@media screen {
	#mw-content-container {
		background: var(--background-color);
		background-image: url(https://jennyeverywhere.wikifederation.org/images/JennyEverywhere_Images/b/b0/Site-background-light.png);
		background-repeat: repeat;
		border-bottom-color: var(--accent-color-1);
	}
}

/* main content block */
@media screen {
	#mw-content {
		box-shadow: 0 0 0 var(--border-thickness) var(--accent-color-2);
	    outline: var(--border);
	    margin-left: calc(var(--border-thickness) * 2);
	    margin-right: calc(var(--border-thickness) * 2);
	    margin-bottom: var(--border-thickness);
	}
	.mw-body h1.firstHeading,
	.tools-inline li.selected,
	.mw-body h2 {
		border-bottom-color: var(--accent-color-1);
	}
	ul#filetoc, .toc, .toccolours, .mw-warning {
		background: var(--accent-color-1);
    	border: var(--border);
    	color: var(--accent-contrast-1);
	}
	.toctogglelabel,
	.toggleSymbol,
	.tocnumber,
	.toc a,
	.toc a:visited,
	.toc a:hover,
	.toc a:active {
    	color: var(--accent-contrast-1);
	}
	.toggleSymbol:hover {
		text-decoration: underline;
	}
}

/* top bar */
@media screen {
	.color-left,
	.color-middle,
	.color-right {
		background: var(--accent-color-1);
	}
}

/* navigation menus */
@media screen and (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk,
	#mw-related-navigation .sidebar-chunk {
		background: var(--accent-contrast-1);
	    outline: var(--border);
	    margin-bottom: calc(1em + var(--border-thickness) * 2);
	}
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
	#mw-site-navigation .sidebar-inner,
	#mw-related-navigation .sidebar-inner {
		background: var(--accent-contrast-1);
	    outline: var(--border);
	}
	#mw-site-navigation .sidebar-chunk h2 span::before,
	#mw-site-navigation .sidebar-chunk h2 span::after {
		border-bottom-color: var(--accent-color-2);
	}
	#mw-related-navigation .sidebar-inner::before,
	#mw-related-navigation .sidebar-inner::after {
		border-bottom-color: var(--accent-color-1);
	}
}
@media screen and (min-width: 851px) {
	#personal .dropdown {
		background: var(--accent-contrast-1);
	    outline: var(--border);
	}
	#personal .dropdown label,
	#personal .dropdown h3,
	#personal .dropdown a, 
	#personal .dropdown a:visited,
	#personal .dropdown a.new,
	#personal .dropdown a.new:visited {
		color: var(--accent-color-2);
	}
	#personal .dropdown::before,
	#personal .dropdown::after {
		border-bottom-color: var(--accent-color-1);
	}
}
@media screen and (max-width: 850px) {
	.sidebar-inner, .dropdown {
		background: var(--accent-contrast-1);
	    outline: var(--border);
	}
}
@media screen {
	#mw-site-navigation .sidebar-chunk a,
	#mw-related-navigation .sidebar-chunk a,
	#mw-site-navigation .sidebar-chunk a:visited,
	#mw-related-navigation .sidebar-chunk a:visited,
	#mw-site-navigation .sidebar-chunk label,
	#mw-related-navigation .sidebar-chunk label,
	#mw-site-navigation .sidebar-chunk h3,
	#mw-related-navigation .sidebar-chunk h3,
	#personal .dropdown label,
	#personal .dropdown h3,
	#personal .dropdown a, 
	#personal .dropdown a:visited,
	#personal .dropdown a.new,
	#personal .dropdown a.new:visited {
		color: var(--accent-color-2);
	}
}

/* infoboxes */
:root {
	--pi-background: var(--accent-contrast-1);
	--pi-secondary-background: var(--accent-color-1);
	--pi-border-color: var(--accent-color-2);
}
.portable-infobox {
	border: var(--border);
}
.skin-timeless #mw-content-text .pi-title {
	background: var(--accent-color-1);
	color: var(--accent-contrast-1);
	text-align: center;
	border-bottom: var(--border);
	font-weight: 600;
}
.skin-timeless #mw-content-text .pi-header {
	border-bottom: var(--border);
	border-top: var(--border);
	color: var(--accent-contrast-1);
}
.portable-infobox .pi-header a,
.portable-infobox .pi-header a:visited, 
.portable-infobox .pi-header a.new, 
.portable-infobox .pi-header a.new:visited {
	color: var(--accent-contrast-1);
	text-decoration: underline;
}
.portable-infobox .pi-header a:hover {
	color: var(--accent-contrast-1);
	text-decoration: none;
}
.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	color: var(--accent-contrast-1);
}