MediaWiki:Vector.css

/* CSS placed here will affect users of the Vector skin */

/* Background image [[File:Background Goldmine.png]] */
body {
	background: url(https://undermine.wiki.gg/images/5/5d/Background_Goldmine.png) top center / cover no-repeat fixed;
	background-color: #1f0c19;
}

/* Background from physical copy manual */
.mw-body {
	border: none;
	border-radius: 0.3rem 0.3rem 0 0;
	margin-top: 95px;
	margin-right: 1rem;
}
@media screen and (max-width:720px) {
	.mw-body {
	    margin-top: 150px;
	}
}

.toc::before,
#mw-panel .portal::before,
.mw-body::before {
	background-color: var(--undermine-border);
	content: '';
	height: calc(100% - 4px);
	left: 2px;
	pointer-events: none;
	position: absolute;
	top: 2px;
	width: calc(100% - 4px);
}
.toc::after,
#mw-panel .portal::after,
.mw-body::after {
	border: 2px solid var(--undermine-border);
	content: '';
	height: calc(100% - 8px);
	left: 2px;
	pointer-events: none;
	position: absolute;
	top: 2px;
	width: calc(100% - 8px);
}

/* main content, sidebar and toc border */
.toc {
	background-color: transparent;
	border: none;
	position: relative;
}
#mw-panel .portal,
.mw-body {
	background-color: var(--undermine-background);
	border: 2px solid transparent;
	border-radius: .3em;
	position: relative;
}
.toc::before,
#mw-panel .portal::before,
.mw-body::before {
	clip-path: polygon(
		/* outside */
		10px 1px,
		calc(100% - 10px) 1px,
		calc(100% - 1px) 10px,
		calc(100% - 1px) calc(100% - 10px),
		calc(100% - 10px) calc(100% - 1px),
		10px calc(100% - 1px),
		1px calc(100% - 10px),
		1px 10px,
		10px 1px,
		
		/* inside */
		13px 1px,
		1px 13px,
		1px calc(100% - 13px),
		13px calc(100% - 1px),
		calc(100% - 13px) calc(100% - 1px),
		calc(100% - 1px) calc(100% - 13px),
		calc(100% - 1px) 13px,
		calc(100% - 13px) 1px,
		10px 1px
	)
}

/* bullet list style */
ul {
	list-style-image: var(--theme-list-icon);
}

/* remove white default background */
#mw-page-base {
	background: none;
}

/* reposition logo */
#p-logo {
	left: 50%;
	position: absolute;
	top: 35px;
	transform: translate(-50%, 0);
}

/* resize logo */
#p-logo,
#p-logo a {
	background-size: 100%;
	height: 100px;
	width: 350px;
}

/* top navigation offset */
#left-navigation,
#right-navigation {
	margin-top: 135px;
}

/* page header */
h1.firstHeading {
	border: none;
	border-bottom: 4px solid var(--undermine-border);
	color: var(--undermine-text);
	font-size: 2em;
}

/* font */
.content-wrapper,
.mw-body h1,
.mw-body h2 {
	font-family: rubik,helvetica,arial,sans-serif;
}

/* text color */
h1, h2, h3, h4, h5, h6,
.mw-body {
	color: var(--theme-text-color);
}
.codeEditor-status-worker-cell {
	color: #000;
}

/* h2 elements */
.mw-parser-output h2 {
	font-weight: 500;
}
.mw-parser-output h1,
.mw-parser-output h2:not(#mw-toc-heading):not(.pi-header):not(.pi-title) {
	border-bottom: 1px solid var(--undermine-border);
}

/* pre elements */
.mw-body pre {
	word-wrap: normal;
	background-color: var(--theme-background-color--secondary);
	border: 0.06em solid var(--theme-border-color);
	border-radius: 0.3rem;
	color: var(--theme-text-color);
	line-height: 1;
	overflow: auto;
	padding: 0.75;
	white-space: pre-wrap;
}
.mw-highlight {
	background-color: transparent;
	border-radius: 0.3rem;
}

/* background for category footer */
#catlinks {
	background-color: transparent;
	border: none;
	border-top: 2px solid var(--undermine-border);
	border-radius: 0;
}

/* toc header */
.toc {
	padding: 0.3rem;
}
.toc .toctitle {
	background: transparent;
	border-bottom: 2px solid var(--undermine-border);
	border-radius: 0;
	margin-left: 4px;
	margin-right: 4px;
	padding: .3rem;
	position: relative;
	text-align: left;
}
.toc .toctitle h2 {
	border: none;
	color: var(--undermine-text);
	font-size: 1.2em;
	font-weight: 700;
	margin-left: 0.8rem;
}
#toctogglecheckbox:checked + .toctitle {
	border-bottom: none;
}
.toc .toctogglespan {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.toc .toctogglespan::after,
.toc .toctogglespan::before {
	display: none;
}
.toc .toctitle .toctogglelabel {
	color: var(--theme-text-color);
	display: block;
	height: 100%;
	opacity: .5;
	width: 100%;
}
.mw-body .toc .toctitle .toctogglelabel:after {
	content: '▼';
	float: left;
	padding: 0.3em;
	transition: transform 0.5s;
}
.toc .toctogglecheckbox:checked+.toctitle .toctogglelabel:after {
	content: '▼';
	transform: rotate(-90deg);
}
.toc ul {
	padding: 0 0.3rem;
}
.toc .tocnumber {
	color: var(--theme-text-color);
}
/* wikitable and cargoTable main */
.mw-datatable,
.mw_metadata,
.mw-tags-table,
.mw-json,
.cargoTable,
.cargo-tablelist,
.wikitable {
	background-color: var(--theme-table-background);
	color: var(--theme-text-color);
}

/* wikitable and cargoTable header */
.mw_metadata > * > tr > th,
.mw-datatable > tr > th,
.mw-datatable > * > tr > th,
.mw-json > tr > th,
.mw-json > * > tr > th,
.cargoTable > tr > th,
.cargoTable > * > tr > th,
.wikitable > tr > th,
.wikitable > * > tr > th {
	background-color: var(--theme-table-header);
	border-color: var(--theme-border-color);
	color: var(--theme-text-color);
	padding-bottom: 0.56rem;
	padding-top: 0.56rem;
}

/* wikitable and cargoTable data */
.mw_metadata > * > tr > td,
.mw-datatable > tr > td,
.mw-datatable > * > tr > td,
.mw-json > tr > td,
.mw-json > * > tr > td,
.cargoTable > tr > td,
.cargoTable > * > tr > td,
.wikitable > tr > td,
.wikitable > * > tr > td {
	border-color: var(--theme-border-color);
	color: var(--theme-text-color);
	padding: 0.2rem 0.4rem;
}
.mw-datatable > * > tr:hover > td,
#mw-content-text table.cargoTable tr,
.mw_metadata td,
.mw-datatable td {
	background-color: transparent;
}
.cargo-tablelist > tr:hover > td,
.cargo-tablelist > * > tr:hover > td,
.cargoTable > tr:hover > td,
.cargoTable > * > tr:hover > td,
.mw-datatable > tr:hover > td,
.mw-datatable > * > tr:hover > td,
.wikitable > tr:hover > td,
.wikitable > * > tr:hover > td {
	background-image: linear-gradient(
		rgba(var(--theme-hover-background), var(--theme-hover-transparency)),
		rgba(var(--theme-hover-background), var(--theme-hover-transparency))
	);
}
.theme-dark .cargo-tablelist .oo-ui-iconWidget {
	filter: invert(1);
}

/* JSON table data  */
.mw-json .mw-json-empty {
	background-color: var(--theme-background-color);
}
.mw-json .mw-json-single-value,
.mw-json .mw-json-value {
	background-color: var(--theme-success-color);
}

/* gallery */
#filetoc,
.thumb .thumbinner,
.gallery .gallerybox .thumb {
	background-color: rgba(var(--undermine-accent) ,0.1);
	border-color: transparent;
	border-radius: 0.3rem;
}
.thumb .thumbimage {
	background-color: transparent;
	border: none;
}
.content-body .thumb .magnify a { /* [[Information.svg]] */
	background: url(https://undermine.wiki.gg/images/2/28/Information.svg) top center / cover no-repeat;
	height: 15px;
	filter: invert(1);
}
.theme-light .content-body .thumb .magnify a {
	filter: invert(0);
}

/* sidebar first container */
#mw-panel #p-logo + .portal {
	margin-top: 0;
}

/* sidebar spacing */
#mw-panel .portal + .portal {
	margin-top: 0.5rem;
}

/* sidebar background */
#mw-panel .portal {
	border-radius: 0.3rem;
	padding: 0.3rem;
}

/* sidebar header */
#mw-panel .portal .vector-menu-heading {
	background-color: transparent;
	border-radius: 0;
	color: var(--undermine-text);
	font-size: 1em;
	font-weight: 700;
	margin: 0 4px;
	padding: 0.3rem;
}
.portal:not(.collapsed) .vector-menu-heading {
	border-bottom: 2px solid var(--undermine-border);
}
.vector-menu-portal .vector-menu-heading {
  background-image: none;
}

/* sidebar content */
#mw-panel .portal .body {
	background: none;
}
#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
	color: var(--undermine-text);
	font-weight: 600;
}

/* top navigation */
.vectorTabs,
.vectorTabs li,
.vectorTabs li.selected,
.vectorTabs li span,
.vectorTabs ul,
#mw-head .vectorMenu #p-cactions-label {
	background: none;
}
#mw-head .vectorTabs li:not(.new) a,
#mw-head .vectorTabs li.selected a,
#mw-head .vectorMenu #p-cactions-label span {
	color: #fff;
	font-weight: 700;
}
#p-cactions-label span:after {
	filter: invert(1);
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: none;
}

/* top navigation "more" dropdown */
#right-navigation .vectorMenu .menu {
	background-color: var(--undermine-background);
	border: 2px solid var(--undermine-border);
	border-radius: 0.3rem;
}
#right-navigation .vectorMenu .menu a {
	color: var(--theme-text-color);
}
#right-navigation .vector-menu-dropdown .vector-menu-content {
	background: none;
	border: none;
	box-shadow: none;
}
.vector-menu-dropdown .vector-menu-heading:after {
	filter: invert(1);
}

/* Link color */
.fake-link,
.content-body a,
.content-body a.external,
.content-body a.extiw,
.content-body a:visited,
.content-body a.external:visited,
.content-body a.extiw:visited {
	color: var(--theme-link-color);
}
.fake-link:hover,
.content-body a:not(.mw-selflink):hover,
.content-body a.external:hover,
.content-body a.extiw:hover {
	color: var(--theme-link-color--hover);
	text-decoration: underline;
}
.content-body a.new {
	color: var(--theme-link-new);
}
.content-body a.new:hover {
	color: var(--theme-link-new--hover);
}
a.mw-selflink {
	color: var(--theme-text-color);
}
a.mw-selflink:hover {
	text-decoration: none;
}

/* hide legacy footer */
#footer-places {
	display: none;
}

/* footer */
#footer {
	background-color: transparent;
	border-radius: 0 0 0.3rem 0.3rem;
	margin-bottom: 1rem;
	margin-right: 1rem;
}
#footer-info a {
	color: var(--theme-link-color);
}
#footer ul li {
	color: #fff;
}

/* version history diff */
.diff td.diff-context {
	background: transparent;
	border-color: var(--theme-border-color);
	color: var(--theme-text-color);
}
.diff td.diff-addedline {
	background-color: var(--theme-background-color);
	border-color: var(--theme-success-color);
}
.diff td.diff-addedline .diffchange {
	background-color: var(--theme-success-color);
	color: #fff;
}
.diff td.diff-deletedline {
	background-color: var(--theme-background-color);
	border-color: var(--theme-alert-color);
}
.diff td.diff-deletedline .diffchange {
	background-color: var(--theme-alert-color);
	color: #fff;
}
#pagehistory li {
	border: 1px solid var(--theme-border-color);
}
#pagehistory li.selected {
	background-color: var(--theme-background-color--secondary);
	color: var(--theme-text-color);
}

/* system notice boxes */
#mw-content-text .mw-warning,
#mw-content-text .mw-warning-with-logexcerpt,
#mw-content-text .errorbox,
#mw-content-text .successbox,
#mw-content-text .warningbox {
	border-radius: 0.3rem;
	border-style: solid;
	border-width: 0 0 0 0.3rem;
	color: var(--theme-text-color);
	margin-bottom: 0.3rem;
	padding: 0.5rem;
	text-align: left;
}
#mw-content-text .mw-warning-with-logexcerpt,
#mw-content-text .errorbox {
	background-color: rgba(221, 51, 51, 0.15);
	border-color: #dd3333;
}
#mw-content-text .mw-warning,
#mw-content-text .warningbox {
	background-color: rgb(127, 127, 127);
	background-color: rgba(127, 127, 127, 0.3);
	border-color: #fde29b;
}
#mw-content-text .successbox {
	background-color: rgba(0, 128, 0, 0.15);
	border-color: #008000;
}

/* Copyright CC-BY-NC-SA icon */
/* Copied from Terraria wiki */
#footer{
	/* self */
	padding: 12px;
	box-sizing: border-box;
	position: relative;
	/* grid */
	display: grid;
	grid-template-columns: [l] 1fr 0fr [r];
	grid-template-rows: [t] auto auto [b];
	z-index: 0;
}
#footer-info{
	font-size: 11px;
	display: contents;
}
#footer ul li{
	font-size: inherit;
	line-height: 1.5;
	padding: 0;
}
#footer-icons{
	grid-column: span 1 / r;
	grid-row: t / b;
	place-self: end;
}
#footer #footer-info-lastmod{
	grid-column: l / span 1;
	grid-row: t / span 1;
	place-self: start;
	margin-bottom: 1em;
}
#footer #footer-info-copyright{
	grid-column: l / span 1;
	grid-row: span 1 / b;
	place-self: end stretch;
	position: relative;
	padding-right: 100px;
}
#footer-info-copyright img{
	position: absolute;
	right: 0;
	/* mediawiki logo is 31px height, and this image has a 1px black border, 
	   a small tweak to make them visually matched on size and position */
	bottom: -1px;
	height: 33px;
	width: auto;
}

/* Special:Preferences */
#preferences .oo-ui-tabOptionWidget {
	margin: 0.3rem;
	border: none;
	border-radius: 0.3rem;
}
#preferences .oo-ui-tabSelectWidget {
	background-color: var(--undermine-background);
	border-radius: 0.3rem;
}
#preferences .oo-ui-tabSelectWidget .oo-ui-optionWidget:active {
	background-color: rgba(var(--theme-text-color--rgb),.25);
}
#preferences .oo-ui-tabSelectWidget .oo-ui-optionWidget-selected {
	background-color: rgba(var(--theme-text-color--rgb),.15);
	border-radius: 0.3rem;
	height: 30px;
}
#preferences .oo-ui-tabSelectWidget .oo-ui-optionWidget-selected:hover {
	background-color: rgba(var(--theme-text-color--rgb),.35);
}
#preferences .oo-ui-tabSelectWidget .oo-ui-optionWidget-selected .oo-ui-labelElement-label {
	border-bottom: none;
}
#preferences .oo-ui-tabSelectWidget .oo-ui-labelElement-label {
	color: var(--theme-text-color);
}
#preferences .oo-ui-panelLayout-framed {
	border: none;
}

/* Special:Interwiki */
#mw-content-text .mw-interwikitable .mw-interwikitable-local-yes {
	background-color: var(--theme-success-color);
	color: #fff;
}

/* Special:Search */
#searchInput {
	background-color: #fff;
}
.mw-search-profile-tabs,
#mw-searchoptions {
	background-color: #fff2;
	border-color: #fff1;
}
.search-types .current a {
	color: var(--theme-text-color);
}

/* sticky table header */
.wikitable tr .sticky {
	position: sticky;
	top: 34px;
}
.wikitable tr:nth-child(2) .sticky {
	top: 72px;
}

/* Special:CreateAccount */
#bodyContent .mw-number-text,
#bodyContent .mw-number-text h3 {
	color: var(--theme-text-color);
}
.mw-body .mw-ui-container h2 {
	border-bottom: none;
	font-weight: 700;
}

/* Special:BotPasswords */
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(2n) td {
	background-color: var(--theme-background-color--secondary);
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
	background-color: #fff1;
}
.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
	color: var(--theme-page-text-color);
}
.oo-ui-buttonElement-button .oo-ui-icon-info {
	filter: invert(1)
}
.oo-ui-popupWidget-popup {
	background-color: var(--theme-background-color--secondary);
	border: 1px solid var(--theme-border-color);
	border-radius: 3px;
	box-sizing: border-box;
	color: var(--theme-text-color);
	filter: drop-shadow(0 2px 1px rgba(0,0,0,0.3));
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
	border-bottom-color: var(--theme-background-color--secondary);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before {
	border-bottom-color: var(--theme-border-color);
}

/* temporary fixes */
table {
	display: table;
	white-space: inherit;
}
/*ul {
	list-style-image: none;
}
.theme-light ul {
	list-style-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22%3E %3Ccircle cx=%222.5%22 cy=%229%22 r=%222.5%22 fill=%22%23222%22/%3E %3C/svg%3E");
}*/
.mw-changeslist-legend {
	background-color: transparent;
	border-color: var(--undermine-border);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
	background: #ffffff;
}

/* Theme toggler */
#theme-switcher {
	display: block;
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: var(--theme-toggle-icon) center center;
	background-size: var(--theme-toggle-icon-size);
}

/* references */
ol.references li:target { /* 1. ↑ Test */
	background-color: var(--theme-background-color--secondary);
	border-radius: 0.2em;
}
sup.reference:target { /* [1] */
	background-color: rgba(var(--theme-text-color--rgb),.15);
	border-radius: 0.2em;
}

/* code */
code {
	background-color: var(--theme-background-color--secondary);
	border: 1px solid var(--theme-border-color);
	color: var(--theme-text-color);
}

/* MW message boxes */
.theme-dark .mw-message-box {
	color: white;
	background-color: #222;
	border-color: #666;
}
.theme-dark .mw-message-box.mw-message-box-warning {
	background-color: #220;
	border-color: #660;
}
.theme-dark .mw-message-box.mw-message-box-error {
	background-color: #200;
	border-color: #600;
}
.theme-dark .mw-message-box.mw-message-box-success {
	background-color: #020;
	border-color: #060;
}

/* other */
hr {
	background-color: var(--undermine-border);
	overflow: hidden;
}
fieldset {
	border-color: var(--undermine-border);
}
.allpagesredirect:after {
	content: ' (Redirect)';
	color: gray;
}
.theme-dark #mw-indicator-mw-helplink a {
	filter: hue-rotate(180deg) invert(100%) saturate(.6) brightness(1.4);
}

.theme-dark #mw-indicator-mw-helplink a:hover {
	filter: hue-rotate(180deg) invert(100%) saturate(.6) brightness(2.8);
}