MediaWiki:Vector.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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; }