MediaWiki:Metrolook.css

/* All CSS here will be loaded for users of the Metrolook skin */
body {
	background-color: #202020;
}
.mw-body, .parsoid-body {
	background-color: #313131;
	color: #efefef;
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
	font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}
#mw-panel div.portal h5 {
	font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
	font-weight: bold;
}
.mw-wiki-logo {
	background-size: 135px;
}
.mw-jump-link {
	display: none!important;
}
.wikiEditor-ui-toolbar {
	background-color: transparent;
}
.wikiEditor-ui-view.wikiEditor-ui-view-wikitext {
	border: 1px solid #0088f4;
	border-radius: 5px;
}
.wikiEditor-ui-toolbar .group, .wikiEditor-ui-toolbar .section-secondary .group {
	border-color: #0088f4;
}
.wikiEditor-ui-toolbar .sections .section {
	border-top: 1px solid #0088f4;
}
.oo-ui-indicator-down,
.oo-ui-icon-pilcrow,
.oo-ui-icon-wrapping,
.oo-ui-icon-gotoLine,
.ui-widget-header .ui-icon,
.oo-ui-icon-bold, .mw-ui-icon-bold:before,
.oo-ui-icon-italic, .mw-ui-icon-italic:before,
.oo-ui-icon-link, .mw-ui-icon-link:before,
.oo-ui-icon-image, .mw-ui-icon-image:before,
.oo-ui-icon-reference, .mw-ui-icon-reference:before,
.oo-ui-icon-highlight, .mw-ui-icon-highlight:before,
.oo-ui-icon-edit, .mw-ui-icon-edit:before,
.oo-ui-icon-markup, .mw-ui-icon-markup:before,
.oo-ui-icon-indent, .mw-ui-icon-indent:before,
.oo-ui-icon-outdent, .mw-ui-icon-outdent:before,
.oo-ui-icon-articleSearch, .mw-ui-icon-articleSearch:before,
.wikiEditor-ui-toolbar .tabs span.tab a:before {
	filter: invert(1);
}
.wikiEditor-ui-toolbar .tabs span.tab a {
	color: #36b;
}
.wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
	color: #ff9900;
}
.mw-parser-output h2 span {
	font-weight: bold;
	color: #ff9900;
}
.mw-parser-output dl dt {
	color: #efefef;
}
.mw-parser-output dl dd {
	color: #a1a1a1;
}
.mw-parser-output dl dd i {
	color: #028d00;
}
#pt-anonuserpage {
	margin-left: 11.5px!important;
	color: #ff9900;
}
.mw-htmlform-submit-buttons input {
	color: #fff;
    background-color: #36c;
    border-color: #36c;
    width: 150px;
    height: 30px;
}
.oo-ui-tabSelectWidget-framed {
	background-color: #0088f4;
}
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
    border-color: #0088f4;
}
.mw-prefs-buttons {
	background-color: transparent;
}
.oo-ui-labelWidget.oo-ui-inline-help {
	color: #a1a1a1;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
	background-color: #005ba0;
	color: #efefef;
}
.oo-ui-tabOptionWidget {
	color: #efefef;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget-selected.oo-ui-optionWidget.oo-ui-tabOptionWidget {
	background-color: #005ba0;
	color: #efefef;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-tabOptionWidget:hover {
	color: #efefef;
}
.ui-widget-content {
	background: none;
	background-color: #313131;
	color: #efefef;
}
.ui-widget-header {
	background: none;
	background-color: #0088f4;
	border: 1px solid #0088f4;
	color: #efefef;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: none;
	background-color: #0088f4;
	border: 1px solid #0088f4;
	color: #efefef;
}
.ui-dialog-titlebar-close.ui-corner-all {
	background: none;
	background-color: #0088f4;
}
#mw-page-base {
    height: 2.5em;
    background-position: bottom left;
    background-repeat: repeat-x;
    background-color: #0088f4;
    background-image: linear-gradient(to bottom,#0088f4 50%,#0088f4 100%);
    min-width: 100%;
    position: fixed;
    top: 0px;
    z-index: 3;
}
a.new:visited {
    color: #dd3333;
}
ul {
    list-style-image: url(/resources/assets/rm_bullet.png);
}
.toc, .toccolours {
    border: 1px solid #a2a9b1;
    background-color: #0088f4;
    padding: 5px;
    font-size: 95%;
}
.toctogglelabel {
    cursor: pointer;
    color: #ff9900;
}
.tocnumber {
	color: #ff9900;
}
.toc ul li a {
	color: #efefef;
}
div.vectorMenu ul {
    background-color: #202020;
    border: solid 2px #0088f4;
}
div.vectorMenu li a {
	color: #efefef;
}
div.vectorMenu li a:hover {
	background-color: #0088f4;
}
div.vectorMenu h5 span {
    display: inline-block;
    width: 24px;
    height: 2em;
    background-color: transparent;
    background-image: url(/skins/Metrolook/images/arrow-down-icon.svg?85fb7);
    background-position: 30% 30%;
    background-repeat: no-repeat;
}
div.vectorMenu:hover h5 span {
    background-color: #005ba0;
}
div.vectorMenu:hover {
    background-color: #005ba0;
}
.onhoverbg:hover {
	background: #005ba0;
}
div.vectorTabs a:hover {
	background: #005ba0;
}
div.vectorMenu:hover h5 span {
	background-color: #005ba0;
}
div.vectorMenu:hover {
	background-color: #005ba0;
}
img.downarrow {
	background-image: url( /skins/Metrolook/images/downarrow.svg );
}
img.downarrow:hover {
	position: inherit;
	background: #005ba0;
	background-image: url( /skins/Metrolook/images/downarrow.svg );
	width: 28px;
	height: 40px;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
}
.hoverbox:hover {
	background: #005ba0;
}
div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
    color: #ffb100;
}
h1, h2, h3, h4, h5, h6 {
    color: #efefef;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    overflow: hidden;
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
    color: #bd51bd;
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	background-color: transparent;
}
.oo-ui-icon-expand, .mw-ui-icon-expand:before, .oo-ui-icon-collapse, .mw-ui-icon-collapse:before {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
#contentSub, #contentSub2 {
	color: #a1a1a1;
}
#footer ul li {
    margin: 0;
    padding: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #efefef;
    font-size: 0.8em;
}
a {
    text-decoration: none;
    color: #36b;
    background: none;
}
a:visited {
    color: #36b;
}
#mw-panel div.portal div.body ul li a {
    color: #36b;
}
#mw-panel.collapsible-nav .portal.collapsed h5 a {
    color: #36b;
}
#mw-panel.collapsible-nav .portal h5 a {
    color: #ff9900;
    text-decoration: none;
}
#p-search form {
	display: none;
	margin-top: -2px;
}
#searchButton:hover {
	cursor: pointer;
	background-color: #005ba0;
}
img.searchbar {
    background-image: url(/resources/assets/rm_search.png);
    background-size: 22px;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    margin-right: 0;
    margin-top: 9px;
    float: none;
    margin-left: 5px;
}
#mw-indicator-mw-helplink {
	display: none;
}
#mw-indicator-mw-helplink a {
    background-image: url(/resources/assets/rm_help.png);
    background-size: 20px;
}
.oo-ui-indicator-clear {
	margin-top: 1.5px;
}
.mw-search-profile-tabs {
    background-color: transparent;
    border: 1px solid #efefef;
    border-radius: 2px;
    margin-bottom: 10px;
}
#footer-places-privacy, #footer-places-about, #footer-places-disclaimer {
	display: none;
}
#footer-places-Copyright {
	display: block;
	width: 100%;
}
#footer-places-Datenschutz, #footer-places-Impressum {
	margin-bottom: 20px;
}
#mw-panel div.portal div.body ul li a:visited {
    color: #36b;
}
#ooui-php-1 {
	height: 32px;
}
.results-info, .mw-search-result-data {
    color: #a1a1a1;
}
.search-types .current a {
    color: #ff9900;
    cursor: default;
}
.simpleTiles {
	width: 100%;
	margin-top: 10px;
}
.simpleTile-small {
	border: 2px solid transparent;
	float: left;
	display: inline-block;
	width: 150px;
	height: 150px;
	margin-right: 10px;
	margin-top: 10px;
}
.simpleTile-small:hover {
	border: 2px solid #c1c1c1;
	cursor: pointer;
}
.simpleTile-blue {
	background-color: #006df4;
}
.simpleTile-blue:hover {
	background-color: #005ba0;
}
.simpleTile-green {
	background-color: #009502;
}
.simpleTile-green:hover {
	background-color: #006902;
}
.simpleTile-red {
	background-color: #b10000;
}
.simpleTile-red:hover {
	background-color: #800000;
}
.simpleTile-violett {
	background-color: #b000b7;
}
.simpleTile-violett:hover {
	background-color: #87008e;
}
.simpleTile-yellow {
	background-color: #b99900;
}
.simpleTile-yellow:hover {
	background-color: #967a00;
}
.simpleTile-content {
	display: block;
	margin-top: 30px;
}
.simpleTile-content p {
	font-size: 16px;
	text-align: center;
}
.mw-editsection {
	display: none;
}
#pagehistory li.selected {
	background-color: #202020;
	color: #efefef;
}
.mw-ui-button {
	background-color: #0088f4;
	color: #efefef;
}
.historysubmit.mw-history-compareselectedversions-button.mw-ui-button:hover {
	background-color: #005ba0;
	color: #efefef;
}
#footer {
	padding: 0;
}
#simpleTiles-Moduls {
	height: 200px;
}
#simpleTiles-Pages {
	height: 200px;
}
@media screen and (max-width: 390px) {
	#simpleTiles-Moduls {
		height: 690px;
	}
	#simpleTiles-Pages {
		height: 370px;
	}
}
#left-navigation {
    background-color: #0088f4;
}
#hamburgerIcon:hover {
	cursor: pointer;
	background-color: #005ba0;
}
@media screen and (min-width: 391px) and (max-width: 540px) {
	#simpleTiles-Moduls {
		height: 360px;
	}
	#simpleTiles-Pages {
		height: 200px;
	}
}
@media screen and (max-width: 768px) {
	img.hamburger {
    	background-image: url(/resources/assets/rm_menu.png);
    	background-size: 30px;
    	width: 30px;
    	height: 30px;
    	margin-left: 6px;
    	margin-top: 4.5px;
    	padding: 0;
    	background-repeat: no-repeat;
	}
	img.userIcon40:not(.socialprofile-avatar) {
		margin-top: -3px;
	}
	.userIcon40 {
		margin-top: -3px;
	}
	#editContainer {
		display: none;	
	}
	#editContainer:hover {
		cursor: pointer;
		background-color: #005ba0;
	}
	img.editbutton {
		display: none;
    	background-image: url(/resources/assets/rm_edit.png);
    	background-size: 22px;
    	width: 22px;
    	height: 22px;
    	background-repeat: no-repeat;
    	margin-right: 0;
    	margin-top: 9px;
    	float: none;
    	margin-left: 5px;
	}
	img.editbutton:hover {
		background-color: transparent;
		margin-right: 0;
    	margin-top: 9px;
    	float: none;
    	margin-left: 5px;
	}
	#left-navigation {
    	display: none;
    	position: fixed;
    	top: auto;
    	bottom: 0px;
    	left: auto;
    	z-index: 1000;
    	list-style: none;
    	padding: 0;
    	margin: 0 auto;
    	line-height: 1.5em;
    	background-color: #0088f4;
    	width: 100%;
    	text-align: center;
	}
	div.actionmenu ul {
    	position: fixed;
    	border: 0;
    	border-top: solid 2px #0088f4;
    	margin-left: 0;
    	bottom: 40px;
		right: -0.3em;
    	width: 100vw;
	}
	#mw-panel {
    	background: #202020;
	}
}
@media screen and (min-width: 769px) and (max-width: 1113px) {
	#hamburgerIcon {
		display: none;
	}
	#editContainer {
		display: block;	
	}
	#editContainer:hover {
		cursor: pointer;
		background-color: #005ba0;
	}
	img.editbutton {
		display: block;
    	background-image: url(/resources/assets/rm_edit.png);
    	background-size: 22px;
    	width: 22px;
    	height: 22px;
    	background-repeat: no-repeat;
    	margin-right: 0;
    	margin-top: 9px;
    	float: none;
    	margin-left: 5px;
	}
	img.editbutton:hover {
		background-color: transparent;
		margin-right: 0;
    	margin-top: 9px;
    	float: none;
    	margin-left: 5px;
	}
	#left-navigation {
    	display: none;
    	position: fixed;
    	top: auto;
    	bottom: 0px;
    	left: auto;
    	z-index: 1000;
    	list-style: none;
    	padding: 0;
    	margin: 0 auto;
    	line-height: 1.5em;
    	background-color: #0088f4;
    	width: 100%;
    	text-align: center;
	}
	div.actionmenu ul {
    	position: fixed;
    	border: 0;
    	border-top: solid 2px #0088f4;
    	margin-left: 0;
    	bottom: 40px;
		right: -0.3em;
    	width: 100vw;
	}
}
@media screen and (min-width: 541px) and (max-width: 703px) {
	#simpleTiles-Moduls {
    	height: 370px;
	}
}
@media screen and (min-width: 769px) and (max-width: 879px) {
	#simpleTiles-Moduls {
    	height: 370px;
	}
}
@media screen and (min-width: 1114px) {
	#hamburgerIcon {
		display: none;
	}
	#editContainer {
		display: none;	
	}
	img.editbutton {
    	display: none;
	}
	#left-navigation {
		float: initial;
    	display: inline!important;
	}
}
@media screen and (min-width: 982px) {
	#footer {
		padding: 0;
	}
}