MediaWiki:Vector.css

/* Malta in Minecraft wiki - look modelled on minecraft.wiki, with our own CSS and pixel art
   (images/mim-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: #5f5f5f;
	/* under the grass: a cut through the Maltese rock layers (same blocks per member as the world), then
	   Lower Coralline repeating. Way back to plain dirt: url(header.png), url(dirt.png) with repeat-x, repeat. Earlier banner (generic grass + flowers): header_v1.png. */
	background-image: url(/images/mim-skin/header.png?v=4), url(/images/mim-skin/strata.png?v=5), url(/images/mim-skin/lcl.png?v=5);
	background-repeat: repeat-x, repeat-x, repeat;
	background-position: top left, 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);      /* same as the page, so the open tab flows into it */
	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: little grass blocks like minecraft.wiki (owner 2026-10-11), our own art: a grass fringe across the
   top (tab_top.png), a 6 px block side between tabs (tab_side.png), a pale face; the open tab blends into the page.
   Way back: the v1 "game-menu buttons" block in the comment below. ---- */
#left-navigation, #right-navigation { margin-top: 48px; }   /* tab tops level with the banner's ground (48 px) */
.vector-menu-tabs,
.vector-menu-tabs a,
.vector-menu-tabs .vector-menu-content-list,
.vector-menu-dropdown .vector-menu-heading { background-image: none !important; }
.vector-menu-tabs { padding-left: 0; height: auto; }
.vector-menu-tabs li,
.vector-menu-tabs li.selected {
	position: relative;
	height: 37px;                                   /* from the ground line down to the page */
	margin: 0;
	padding-left: 6px;
	border: 0;
	box-shadow: none;
	--tab-face: #c3cdd3;
	/* a grass block seen from above-left: top face + front grass edge (tab_block.png, at the right edge, its
	   end slanting), the face as a fill from 6 px down, the left side in shadow (::before, tab_side.png) */
	background: url(/images/mim-skin/tab_block.png?v=3) no-repeat right top,
		linear-gradient(var(--tab-face), var(--tab-face)) no-repeat left 6px top 6px / calc(100% - 6px) calc(100% - 6px) !important;
}
.vector-menu-tabs li::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 6px; height: 100%;
	background: url(/images/mim-skin/tab_side.png?v=3) no-repeat left top;
}
.vector-menu-tabs li:hover { --tab-face: #d3dce1; }
.vector-menu-tabs li.selected { --tab-face: var(--mm-content); }
.vector-menu-tabs li a {
	height: auto;
	padding: 15px 0.9em 0 0.75em;
	font-weight: bold;
	font-size: 0.8125em;
	color: #444 !important;
}
.vector-menu-tabs li.selected a { color: #000 !important; }
.vector-menu-tabs li.new a { color: #8a1e1e !important; }
.vector-menu-dropdown {
	position: relative;
	height: 37px;
	padding-left: 6px;
	background: #c3cdd3 url(/images/mim-skin/tab_top.png?v=2) repeat-x left top;
}

/* v1 tabs ("game-menu buttons"), kept as the way back:
( ---- 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 { display: flow-root; height: auto; }   /* always wraps its floated lists and icons */
#footer::after { content: ''; display: block; clear: both; }
#footer ul { margin: 0; padding: 0.2em 0; }
#footer-icons { float: right; }
#footer-icons li { height: auto; line-height: 0; }
#footer-icons .cdx-button { padding: 0; min-height: 0; min-width: 0; height: auto; border: 0; background: none; box-shadow: none; }
#footer-icons img { width: 88px; height: 31px; max-height: none; background: #eaecf0; border: 2px solid #000; }
#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: 320px; object-fit: cover; object-position: 50% 55%; }
.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; }