MediaWiki:Vector.css

/* Malta in Minecraft wiki - look modelled on minecraft.wiki, with our own CSS and pixel art
   (images/maltamc-skin/, made by pipeline/wiki/make_skin_art.py). Loaded by the classic Vector skin only;
   switching the skin back to vector-2022 restores the earlier look. */

:root {
	--mm-content: #e6eff4;
	--mm-content-edge: #c8d7e0;
	--mm-dirt: #2e2117;
	--mm-panel: #232324;
	--mm-panel-edge: #313233;
	--mm-button: #c6c6c6;
	--mm-button-light: #f0f0f0;
	--mm-button-dark: #555555;
	--mm-green: #5d9b2a;
	--mm-green-light: #82c04a;
	--mm-green-dark: #3f6e1a;
}

/* ---- page background: sky + grass banner over dirt ---- */
body {
	font-family: "Liberation Sans", Arial, Helvetica, FreeSans, sans-serif;
	background-color: var(--mm-dirt);
	background-image: url(/images/maltamc-skin/header.png), url(/images/maltamc-skin/dirt.png);
	background-repeat: repeat-x, repeat;
	background-position: top left, top left;
	image-rendering: auto;
}
#mw-page-base { background: none; height: 85px; }
#mw-head-base { background: none; }

/* ---- content area ---- */
.mw-body {
	background-color: var(--mm-content);
	border: 0;
	border-top: 6px solid var(--mm-content-edge);
	border-left: 6px solid var(--mm-content-edge);
	margin-right: 10px;
	color: #202122;
}
.mw-body h1, .mw-body h2 { border-bottom-color: #a9bac5; }
.mw-body a.external { color: #0645ad; }

/* ---- logo ---- */
#p-logo { height: 150px; margin-bottom: 6px; }
#p-logo a {
	height: 150px;
	background-size: 140px 140px;
	background-position: center center;
	image-rendering: pixelated;
}

/* ---- sidebar: dark blocky boxes ---- */
#mw-panel { padding-top: 0; }
#mw-panel .vector-menu-portal {
	margin: 0 0.6em 0.9em 0.6em;
	padding: 0;
	background: none;
}
#mw-panel .vector-menu-portal .vector-menu-heading {
	display: block;
	margin: 0;
	padding: 0.45em 0.7em;
	color: #ffffff;
	font-size: 0.8125em;
	font-weight: bold;
	background: #58595a;
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 #7c7d7e, inset -2px -2px 0 #3d3e3f;
	text-shadow: 1px 1px 0 #2a2a2a;
}
#mw-panel .vector-menu-portal .vector-menu-content {
	margin: 0;
	padding: 0.35em 0.7em 0.45em;
	background: var(--mm-panel);
	border: 2px solid var(--mm-panel-edge);
	border-top: 0;
}
#mw-panel #p-navigation .vector-menu-heading { display: none; }
#mw-panel #p-navigation .vector-menu-content { border-top: 2px solid var(--mm-panel-edge); }
#mw-panel .vector-menu-portal .vector-menu-content li { padding: 0.3em 0; }
#mw-panel .vector-menu-portal .vector-menu-content li a { color: #bfbfbf; }
#mw-panel .vector-menu-portal .vector-menu-content li a:hover,
#mw-panel .vector-menu-portal .vector-menu-content li a:focus { color: #ffffff; }

/* ---- tabs: game-menu buttons ---- */
#left-navigation, #right-navigation { margin-top: 2.5em; }
.vector-menu-tabs,
.vector-menu-tabs a,
.vector-menu-tabs li,
.vector-menu-tabs li.selected,
.vector-menu-tabs .vector-menu-content-list,
.vector-menu-dropdown,
.vector-menu-dropdown .vector-menu-heading { background-image: none !important; }
.vector-menu-tabs { padding-left: 0; height: auto; }
.vector-menu-tabs li {
	background: var(--mm-button);
	margin: 0 4px 0 0;
	height: 2.4em;
	border: 2px solid #000;
	border-bottom: 0;
	box-shadow: inset 2px 2px 0 var(--mm-button-light), inset -2px 0 0 var(--mm-button-dark);
}
.vector-menu-tabs li:hover { background: #d6d6d6; }
.vector-menu-tabs li.selected {
	background: var(--mm-content);
	box-shadow: inset 2px 2px 0 #ffffff;
}
.vector-menu-tabs li a {
	height: auto;
	padding: 0.65em 0.9em 0;
	font-weight: bold;
	font-size: 0.8125em;
	color: #303030 !important;
}
.vector-menu-tabs li.selected a { color: #000 !important; }
.vector-menu-tabs li.new a { color: #8a1e1e !important; }
.vector-menu-dropdown {
	background: var(--mm-button);
	border: 2px solid #000;
	border-bottom: 0;
	height: 2.4em;
	margin-right: 4px;
}

/* ---- search box ---- */
#p-search { margin-right: 0.5em; }
#p-search .cdx-text-input__input,
#searchInput {
	border: 2px solid #000;
	border-radius: 0;
	background: #fff;
}

/* ---- personal tools (top right): dark box ---- */
#p-personal { top: 6px; right: 8px; }
#p-personal .vector-menu-content-list {
	background: var(--mm-panel);
	border: 2px solid var(--mm-panel-edge);
	outline: 2px solid #000;
	padding: 0.25em 0.6em;
}
#p-personal li { margin: 0 0.4em; padding-top: 0.25em; }
#p-personal li a, #p-personal li span { color: #ffffff; }
#pt-anonuserpage, #pt-tmpuserpage { color: #bfbfbf; }

/* ---- footer: dark box ---- */
#footer {
	background: var(--mm-panel);
	border: 4px solid var(--mm-panel-edge);
	outline: 2px solid #000;
	outline-offset: -2px;
	margin: 10px 10px 10px calc(11em + 4px);
	padding: 0.6em 0.9em;
	color: #ffffff;
}
#footer::after { content: ''; display: block; clear: both; }
#footer li { color: #ffffff; }
#footer a { color: #bfbfbf; }
#footer a:hover { color: #ffffff; }
#footer-poweredbyico img { filter: grayscale(0.2); }

/* ---- infobox: green title bar like the game's buttons ---- */
table.place-infobox {
	background: #f4f8f6 !important;
	border: 2px solid var(--mm-green) !important;
	padding: 3px;
	border-collapse: separate !important;
}
table.place-infobox > caption {
	background: var(--mm-green);
	color: #ffffff;
	border: 2px solid var(--mm-green-dark);
	box-shadow: inset 2px 2px 0 var(--mm-green-light), inset -2px -2px 0 #4a8121;
	text-shadow: 1px 1px 0 #2b4c12;
	padding: 0.45em !important;
	margin-bottom: 3px;
}
table.place-infobox th[colspan] {
	background: #d3e6c1 !important;
	color: #2b4c12;
}
table.place-infobox tr:nth-child(odd) > td,
table.place-infobox tr:nth-child(odd) > th:not([colspan]) { background: #eaf0ee; }

/* ---- table of contents and thumbnails: lighter frames on the blue-grey ---- */
#toc, .toc, .mw-parser-output .thumbinner, .wikitable {
	background-color: #f4f8fa;
	border-color: #aab9c3;
}
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #d5e0e7; }

/* ---- phones (responsive classic Vector) ---- */
@media screen and (max-width: 720px) {
	#mw-page-base { height: 70px; }
	#footer { margin-left: 10px; }
}

/* ---- main page: no title; boxes and game-style tiles like minecraft.wiki ---- */
body.page-Main_Page #firstHeading { display: none; }
.mm-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.mm-col { flex: 1 1 360px; min-width: 0; }
.mm-col-side { flex: 0 1 340px; }
.mm-box {
	background: #f4f8fa;
	border: 2px solid #aab9c3;
	box-shadow: inset 0 0 0 2px #ffffff;
	padding: 0.8em 1em;
	margin-bottom: 12px;
}
.mm-box h2, .mm-box .mm-title { font-family: inherit; font-size: 1.15em; font-weight: bold; border: 0; margin: 0 0 0.4em; padding: 0; }
.mm-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-tile {
	width: 96px;
	background: var(--mm-button);
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 var(--mm-button-light), inset -2px -2px 0 var(--mm-button-dark);
	text-align: center;
	font-weight: bold;
	font-size: 0.9em;
	padding: 6px 4px 6px;
}
.mm-tile:hover { background: #d6d6d6; }
.mm-tile img { display: block; margin: 0 auto 4px; image-rendering: pixelated; }
.mm-tile a { color: #202020; }
.mm-button {
	display: inline-block;
	background: var(--mm-green);
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 var(--mm-green-light), inset -2px -2px 0 #4a8121;
	padding: 0.4em 1em;
	font-weight: bold;
}
.mm-button a, .mm-button a:visited { color: #ffffff !important; text-shadow: 1px 1px 0 #2b4c12; }
.mm-banner { position: relative; border: 2px solid #000; margin-bottom: 12px; line-height: 0; }
.mm-banner img { width: 100%; height: auto; }
.mm-banner-text {
	position: absolute; left: 12px; bottom: 12px; line-height: 1.4;
	background: rgba(0, 0, 0, 0.6); color: #fff; padding: 0.4em 0.8em; font-weight: bold;
}
.mm-banner-text a { color: #fff !important; }
.mm-tag { display: inline-block; background: #7a3cc2; color: #fff; font-weight: bold; padding: 0.15em 0.6em; margin-left: 0.5em; font-size: 0.85em; }