MediaWiki:Vector.css

From Carrion Wiki
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */
:root {
	--box-color: rgb(34, 25, 34);
	--box-row-color: rgb(25, 20, 25, 0.75);
	--box-background-color: rgba(15, 10, 15, 0.75);
	
	--button-color: rgb(64, 32, 32);
	--button-hover-color: rgb(25, 20, 25);
	
	--content-background-color-rgb: 10, 10, 5;
	--content-background-color: rgba(var(--content-background-color-rgb), 0.5);
	--content-border-color: rgb(64, 48, 64);
	
	--content-text-color: white;
	--content-font-family: "Barlow", sans-serif;
	
	--heading-color: white;
	--heading-font-family: "Barlow Condensed", sans-serif;
	
	--head-height: calc(var(--logo-height) + var(--wiki-gg-head-height) + var(--logo-margin));
	--head-top-margin: -85px;
	
	--leaflet-legend-height: 2.4rem;

	--link-color: #ff8378;
	--link-active-color: white;
	--link-inactive-color: #922d2d;
	--link-inverted-color: #007c87;

	--logo-horizontal: url(/images/2/2b/Carrion_Wiki.svg);
	--logo-width: 261px;
	--logo-height: 100px;
	--logo-margin: 20px;
	--logo-top-margin-mobile: 50px;
	
	--mainpage-gap: 1.2em;
	
	--page-background-color: #200017;
	--page-background-image: url(/images/8/8f/Pre_alpha_head.png); /*[[File:Pre_alpha_head.png]]*/
	
	--pi-width: 285px;
	--pi-item-spacing: 6px 1.2em;
	--sidebar-width: 11em;
	
	--wiki-gg-head-height: 35px;
	--wiki-icon-to-link-filter: invert(60%) sepia(82%) saturate(4832%) hue-rotate(329deg) brightness(109%) contrast(77%);
}

body {
	background-image: var(--page-background-image);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: var(--page-background-color);
	font-family: var(--content-font-family);
}

.content-wrapper {
	background: var(--content-background-color);
	backdrop-filter: blur(2px);
}

#content {
	background: transparent;
	color: var(--content-text-color);
}

.mw-body {
	border: none;
	margin-top: 0;
	margin-left: calc(var(--sidebar-width) + 1em);
}

.catlinks {
	background: var(--box-background-color);
	border-color: var(--box-color);
	padding: 0.5em 1em;
}

fieldset {
	border-color: var(--content-border-color);
}

ul {
	list-style-image: url(/images/2/23/White-bullet-icon.svg);
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	border-color: var(--content-border-color);
	background-color: transparent;
}

.editOptions {
	background-color: var(--box-background-color);
	border-color: var(--content-border-color);
	color: var(--content-text-color);
}

#wpSummary {
	border: 1px solid var(--content-border-color);
}

#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {
	top: unset;
}

.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-tmpuserpage,
.vector-user-menu-legacy #pt-userpage a {
	background-position: left 0.1em;
	filter: brightness(1.75);
	padding-top: 0;
}

/*****************/
/* --- Fonts --- */
/*****************/
.vector-body {
	font-size: inherit;
	line-height: 1.5;
}

#mw-head {
	text-shadow: 0 0 4px black;
}

#mw-navigation,
#p-cactions-label,
.vector-menu-portal .vector-menu-heading {
	font-weight: 700;
	font-family: var(--content-font-family);
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
	color: var(--heading-color);
	font-family: var(--heading-font-family);
	font-weight: 300;
	text-shadow: 0 0 3px black;
}

.mw-body h1 {
	font-size: 2em;
}

.mw-body h2 {
	font-size: 1.7em;
}

.mw-body h3 {
	font-size: 1.4em;
}

.mw-body h4 {
	font-size: 1.2em;
}

.mw-body h1,
.mw-body h2 {
	border-bottom: 1px solid var(--content-border-color);
}

.mw-footer li {
	color: var(--heading-color);
}

.mw-footer {
	background-color: var(--content-background-color);
	padding-bottom: 0;
	padding-left: calc(var(--sidebar-width) + 1.25em);
	margin-left: 0;
}

#footer-icons {
	padding-bottom: 1.25em;
}

#footer-info-copyright img {
	float: right;
	margin-top: -1em;
	margin-left: 2em;
	width: 88px;
}

code, .mw-code {
	background-color: var(--button-hover-color);
	border: 1px solid var(--button-hover-color);
	color: var(--content-text-color);
	font-size: calc(1em * 0.875);
}

.mw-highlight {
	background-color: var(--button-hover-color);
	color: var(--content-text-color);
	font-size: calc(1em * 0.875);
}

ol.references li:target, sup.reference:target {
	background-color: var(--box-color);
}

#pagehistory li.selected {
	background-color: var(--box-color);
	color: var(--content-text-color);
	outline-color: var(--content-border-color);
}

#filetoc {
	background-color: var(--box-color);
	border-color: var(--content-border-color);
}

div.thumbinner {
	background-color: var(--box-background-color);
	border-color: var(--content-border-color);
}

.thumbimage {
	border-color: var(--content-border-color);
}

.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
	box-shadow: inset 2.75em 0 0 var(--box-color);
}

.mw-highlight pre {
	background-color: var(--button-hover-color);
	border-color: var(--content-border-color);
	color: #78ff83;
}

.mw-highlight .nb,
.mw-highlight .nt,
.mw-highlight .kc {
	color: #78ff83;
}

.mw-highlight .nc {
	color: #78b1ff;
}

.mw-highlight .k {
	color: #78FFC6;
}

.mw-highlight .nn,
.mw-highlight .nd {
	color: #c678ff;
}

.mw-highlight .c,
.mw-highlight .c1 {
	color: var(--link-inverted-color)
}

.mw-highlight .cp {
	color: #fe0000;
}

.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sx,
.mw-highlight .mi,
.mw-highlight .mf,
.mw-highlight .mh {
	color: #ffc778;
}

.mw-highlight .o,
.mw-highlight .kt,
.mw-highlight .nf {
	color: var(--link-color);
}

.mw-highlight .n,
.mw-highlight .nv,
.mw-highlight .linenos {
	color: #d2d1d2;
}

.mw-highlight .err,
.mw-highlight .p {
	color: #8378ff;
}

/*****************************/
/* --- Table of Contents --- */
/*****************************/
.toc {
	padding: 0;
	margin-top: 2em;
}

.toc, .toccolours {
	background-color: var(--box-background-color);
	border-color: var(--box-color);
}

.toc ul {
	margin: 1em 1.6em;
}

.toc li {
	margin-bottom: 0.3em;
}

.tocnumber {
	color: var(--link-active-color);
}

.toc .toctitle {
	position: relative;
	overflow: hidden;
	background-color: var(--box-color);
	line-height: 3em;
	text-align: left;
}

.toc .toctogglelabel {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	font-size: unset;
	line-height: unset;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.vector-body .toc h2 {
	border: none;
	font-family: var(--content-font-family);
	font-weight: 700;
	padding-left: 1.5em;
}

.toctogglespan::before,
.toctogglespan::after,
.toctogglelabel::after {
	display: none;
}

.toctogglelabel::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	padding: 0 1.5em;
	background-image: url(/load.php?modules=oojs-ui-widgets.icons&image=collapse&format=rasterized&skin=vector&version=1njlj);
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E collapse %3C/title%3E%3Cpath d=%22m2.5 15.25 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
	filter: invert(1);
	flex: 0 0 auto;
}

.toc .toctogglecheckbox:checked ~ .toctitle .toctogglelabel::before {
	transform: scaleY(-1);
}

.toc .toctogglecheckbox:checked ~ .toctitle {
	border: 0;
	background-color: var(--box-background-color);
}

.toc .toctogglecheckbox:checked ~ ul {
	/* do not change ToC title size when toggle show/hide. */
	overflow: hidden;
	display: block;
	height: 0;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

@media screen and (min-width: 720px) {
	.tocright {
		clear: right;
		float: right;
		margin-left: 1.2em;
		margin-right: 0.6em;
		margin-top: -2em;
	}
}

/***********************************/
/* --- Clearing space for logo --- */
/***********************************/
#mw-head-base {
	background: transparent;
	height: var(--head-height);
	margin-top: calc(var(--head-height) * -1);
}

div#mw-page-base {
	background: linear-gradient(to right, var(--page-background-color), transparent calc(var(--logo-width) + var(--logo-margin)));
	height: var(--head-height);
}

#mw-head {
	top: var(--head-top-margin);
	width: calc(100% - var(--logo-width) - var(--logo-margin));
}

#mw-navigation {
	position: relative;
}

#left-navigation {
	margin-left: 1em;
}

/*****************************/
/* --------- Logo ---------- */
/* [[File:Carrion_Wiki.svg]] */
/*****************************/
#p-logo .mw-wiki-logo {
	background: none;
}

#p-logo {
	position: absolute;
	background-image: var(--logo-horizontal);
	top: calc((var(--logo-height) * -1) - (var(--logo-margin)/2));
}

#p-logo, #p-logo a {
	background-size: contain;
	filter: drop-shadow(0 0 4px var(--page-background-color));
	height: var(--logo-height);
	width: var(--logo-width);
}

/**************************/
/* --- Head menu tabs --- */
/**************************/
.vector-menu-tabs,
.vector-menu-tabs a,
.vector-menu-tabs-legacy li,
.vector-menu-tabs-legacy .selected,
#mw-head .vector-menu-dropdown .vector-menu-heading {
	background: none;
}

.vector-menu-dropdown .vector-menu-content {
	background: rgba(var(--content-background-color-rgb), 0.95);
	border-color: var(--content-border-color);
	border-top-width: 1px;
}

.vector-menu-checkbox:focus + .vector-menu-heading {
	outline: none;
}

.vector-menu-tabs-legacy li a:hover,
.vector-menu-tabs-legacy li a:focus,
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited,
.vector-menu-dropdown .mw-list-item a:hover,
.vector-menu-dropdown .mw-list-item a:focus,
.vector-menu-dropdown .vector-menu-heading:hover,
.vector-menu-dropdown .vector-menu-heading:focus {
	color: var(--link-active-color);
}

.vector-menu-tabs-legacy li a,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .mw-list-item a {
	color: var(--link-color);
}

.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited {
	color: var(--link-inactive-color);
}

.vector-menu-dropdown .vector-menu-heading:after {
	filter: brightness(0) var(--wiki-icon-to-link-filter);
	opacity: 1;
}


.vector-search-box-input {
	background-color: var(--box-background-color);
	border-color: var(--content-border-color);
	border-radius: 0;
	color: var(--content-text-color);
}

#searchButton {
	filter: brightness(0) invert(1);
}

.vector-search-box-input:focus,
.vector-search-box-inner:hover .vector-search-box-input:focus {
	border-color: var(--link-color);
	box-shadow: inset 0 0 0 1px var(--link-active);
}

.suggestions-results,
.suggestions-special {
	background-color: rgba(var(--content-background-color-rgb), 0.95);
	border-color: var(--content-border-color);
	color: var(--content-text-color);
}

.suggestions-result,
.suggestions-special .special-query {
	color: var(--content-text-color);
}

#mw-indicator-mw-helplink a {
	filter: invert(1);
	color: var(--link-inverted-color);
}

.oo-ui-textInputWidget {
	background-color: var(--content-background-color);
}

.mw-search-profile-tabs {
	background-color: var(--content-background-color);
	border-color: var(--content-border-color);
	border-radius: 0;
	color: var(--content-text-color);
}

.search-types .current a {
	color: var(--link-active);
}

#mw-searchoptions {
	background-color: var(--content-background-color);
	border-color: var(--content-border-color);
	border-radius: 0;
}

#mw-searchoptions .divider {
	border-color: var(--content-border-color);
}

.results-info {
	color: var(--content-text-color);
}

/*****************/
/* --- Links --- */
/*****************/
a, a:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external,
.mw-parser-output a.external:visited {
	color: var(--link-color);
}

a:active, a:hover, a:focus,
.mw-parser-output a.extiw:hover,
.mw-parser-output a.extiw:focus,
.mw-parser-output a.external:hover,
.mw-parser-output a.external:focus {
	color: var(--link-active-color);
	text-decoration: none;
}

.mw-parser-output a.external {
	background: 0 0;
	padding-right: 0;
}

.mw-parser-output a.external::after {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url(/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?14604);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: .857em;
	content: '';
	filter: brightness(0) var(--wiki-icon-to-link-filter);
	vertical-align: text-top;
}

/****************************/
/* --- Pixelated images --- */
/****************************/

.pixelated-img {
	/* Legal fallback */
	image-rendering: optimizeSpeed;
	/* Firefox		*/
	image-rendering: -moz-crisp-edges;
	/* Opera		  */
	image-rendering: -o-crisp-edges;
	/* Safari		 */
	image-rendering: -webkit-optimize-contrast;
	/* CSS3 Proposed  */
	image-rendering: optimize-contrast;
	/* IE8+		   */
	-ms-interpolation-mode: nearest-neighbor;
	/* Chrome		 */
	image-rendering: pixelated;
}

/*******************/
/* --- Sidebar --- */
/*******************/
#mw-panel {
	text-align: center;
	width: var(--sidebar-width);
}

.vector-menu-portal .vector-menu-heading {
	background: none;
	color: var(--link-inactive-color);
}

.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited {
	color: var(--link-color);
}

.vector-menu-portal .vector-menu-content li a:active,
.vector-menu-portal .vector-menu-content li a:hover,
.vector-menu-portal .vector-menu-content li a:focus{
	color: var(--link-active-color);
	text-decoration: none;
}

/*************/
/* Main Page */
/*************/

.mainpage-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: var(--mainpage-gap);
}

.mainpage-left {
	flex: 3 1 600px;
	display: flex;
	flex-direction: column;
	gap: var(--mainpage-gap);
}

.mainpage-right {
	flex: 1 1 360px;
	display: flex;
	flex-direction: column;
	gap: var(--mainpage-gap);
}

.box {
	border: 1px solid var(--box-color);
	background: var(--box-background-color);
}

.box .box-heading {
	background: var(--box-color);
	border: 0;
	margin: 0;
	padding: var(--pi-item-spacing);
	text-align: center;
}

#game-trailer .embedvideo {
	display: block;
	width: calc(100% - 0.8em) !important;
	aspect-ratio: 16/9;
	border-bottom: 1px solid var(--box-color);
	padding: 0.4em;
}

#game-trailer .embedvideo-wrapper {
	height: 100% !important;
}

#game-trailer .embedvideo:last-child {
	border: 0;
}

.box .mw-gallery-packed {
	margin: 0;
	padding: 0.3em;
	padding-right: 0.4em;
}

.box .mw-gallery-packed .gallerytext{
	padding: 0;
}

/******************************/
/* --- Mobile Adjustments --- */
/******************************/
@media screen and (min-width: 720px) {
	#mw-panel {
		padding: 1.3em 0.5em 1.3em;
	}
	
	.client-js .pi-collapse .pi-header:first-child::after {
		right: 1rem;
	}
	
	.portable-infobox {
		min-width: var(--pi-width);
		max-width: calc(20px + var(--pi-width));
	}
}

@media screen and (max-width: 720px) {
	body {
		background-position: 5% calc(var(--wiki-gg-head-height) - 20px);
		background-size: 200%;
	}
	
	div#content {
		margin-top:6px;
		padding-top: 105px;
	}
	
	.content-wrapper {
		backdrop-filter: none;
	}
	
	.mw-footer {
		padding-left: 0.75em;
	}
	
	div#mw-page-base {
		background: linear-gradient(var(--page-background-color), transparent 75%);
		filter: drop-shadow(0 0 0 var(--content-background-color));
	}
	
	#mw-head {
		height: 50%;
		width: 100%;
		top: calc(var(--logo-height) + var(--logo-margin));
		overflow-x: hidden;
	}
	
	#mw-navigation {
		position: unset;
	}
	
	#right-navigation {
		margin-right: 1em;
	}
	
	#p-search {
		position: absolute;
		top: calc(var(--logo-height) - var(--logo-margin));
		right: 0.5em;
		width: calc(100% - 2em);
	}
	
	.vector-search-box-inner {
		max-width: 100%;
		width: 100%;
	}
	
	.vector-search-box-input {
		height: 2.5em;
		padding: 10px;
		font-size: inherit;
		background: var(--box-row-color);
	}
	
	#searchButton {
		right: 6px;
	}
	
	.vector-menu-portal {
		margin: 1em;
	}
	
	#mw-panel {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		padding: 5% 5%;
		width: 90%;
		backdrop-filter: none;
	}
	
	.vector-menu-portal .vector-menu-content {
		width: 9em;
	}
	
	.vector-menu-portal .vector-menu-content li,
	.vector-menu-portal .vector-menu-heading {
		font-size: 0.8125em;
		line-height: 1.25em;
	}
	
	.vector-menu-dropdown .mw-list-item {
		text-align: right;
	}
	
	#p-cactions-label .vector-menu-heading-label {
		display:none;
	}
	
	.vector-menu-dropdown .vector-menu-content {
		top: calc(100% + 5px);
		left: unset;
		right: -5px;
	}
	
	#p-logo, #p-logo a {
		top: var(--logo-top-margin-mobile);
		left: 0;
		right: 0;
		margin: 0 auto 1em;
	}
	
	.portable-infobox {
		margin-bottom: 2em;
	}
	
	.toc {
		margin: 2em auto 1em;
		width: 90%;
	}
	
	.box {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (max-width: 576px) {
	.leaflet-bar button:first-child {
		border-bottom: 0;
	}
	
	.leaflet-control-container .ext-datamaps-control > button[data-style='labelled'] {
		border-bottom: 1px solid var(--box-color);
	}
	
	#footer-info-copyright img {
		margin-top: 0;
	}
}

/*********************/
/* --- Data Maps --- */
/*********************/
.tabber__tab[aria-selected='true'],
.tabber__tab[aria-selected='true']:visited {
	color: var(--link-active-color);
}

.tabber__tab, .tabber__tab:visited {
	color: var(--link-color);
}

.tabber__indicator {
	background: var(--link-inactive-color);
}

.tabber__header {
	box-shadow: none;
}

.leaflet-bar {
	background-color: var(--box-background-color);
	border-color: var(--box-color);
	border-radius: 0;
	box-shadow: none;
}

.leaflet-bar button {
	border-color: var(--box-background-color);
	color: var(--content-text-color);
	cursor: pointer;
}

.leaflet-bar button:first-child,
.leaflet-bar button:last-child,
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button,
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button {
	border-radius: 0;
}

.leaflet-bar button,
.leaflet-popup button {
	background-color: var(--box-color);
}

.leaflet-bar button:hover,
.leaflet-bar button:focus {
	background-color: var(--button-hover-color);
}

.leaflet-bar button.leaflet-disabled {
	color: black;
	border-radius: 0;
}

.leaflet-bar button.leaflet-disabled:hover {
	background-color: rgba(255, 255, 255, 0.8);
}

.leaflet-left .leaflet-control {
	min-height: var(--leaflet-legend-height);
}

.leaflet-control-container .ext-datamaps-control > button[data-style='labelled'] {
	min-height: calc(var(--leaflet-legend-height) + 1px);
	font-weight: 700;
}

.leaflet-control-container .ext-datamaps-control-coords {
	background: var(--content-background-color);
	border: none;
	color: var(--content-text-color);
	min-height: 0;
}

/* --- Popups and Tooltips --- */
.leaflet-popup-content-wrapper {
	background-color: var(--box-color);
	color: var(--content-text-color);
	border: 1px solid var(--content-border-color);
}

.leaflet-popup-tip {
	background-color: var(--content-border-color);
}

.leaflet-container button.leaflet-popup-close-button {
	color: white;
}

.ext-datamaps-popup-header .ext-datamaps-popup-subtitle {
	position: absolute;
	max-width: 6em;
	bottom: 12px;
	right: 16px;
	text-transform: uppercase;
	text-align: right;
}

/* --- Search Bar --- */
.ext-datamaps-control-search ul.ext-datamaps-control-search-results {
	background: rgba(var(--content-background-color-rgb), 0.95);
	border-color: var(--content-border-color);
	border-radius: 0;
	top: calc(var(--leaflet-legend-height) + 1px);
}

.ext-datamaps-control-search ul.ext-datamaps-control-search-results li:focus,
.ext-datamaps-control-search ul.ext-datamaps-control-search-results li[data-highlighted='true'] {
	color: black;
	background: var(--link-active-color);
}

.ext-datamaps-control-search[aria-expanded='true'] .ext-datamaps-control-search-results {
	background: rgba(var(--content-background-color-rgb), 0.95);
}

/******************************/
/* --- OOUI and Data Maps --- */
/******************************/
.oo-ui-panelLayout-framed {
	border-color: var(--box-color);
	border-radius: 0;
	border-width: 1px 2px 1px 1px;
	color: white;
}

/* --- OOUI Icons ---*/
.oo-ui-icon-fullScreen,
.oo-ui-icon-exitFullscreen,
.oo-ui-icon-edit,
.oo-ui-icon-imageLayoutFrame,
.oo-ui-icon-alignCenter,
.oo-ui-icon-funnel,
.oo-ui-icon-collapse,
.oo-ui-icon-expand,
.oo-ui-icon-search,
.oo-ui-icon-next,
.oo-ui-icon-previous,
.oo-ui-icon-last,
.oo-ui-icon-first,
.oo-ui-icon-link,
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
	filter: brightness(0) invert(1);
}

.oo-ui-image-invert {
	filter: invert(1);
}

/* --- OOUI Search Bar --- */
.leaflet-control .oo-ui-textInputWidget .oo-ui-inputWidget-input {
	background-color: transparent;
	border: 0;
	color: var(--content-text-color);
}

/* --- Map Legend --- */
.ext-datamaps-control-expandable[aria-expanded='true'] {
	background: var(--box-background-color);
}

.ext-datamaps-control-expandable .ext-datamaps-control-expandable-content > .oo-ui-menuLayout > .oo-ui-menuLayout-content {
	padding: 1em;
}

.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
	padding-left: 0.8em;
}

/* --- OOUI Button Elements (Show all / Hide all) (Show preview / Show changes) --- */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	background-color: var(--box-background-color);
	border-color: var(--content-border-color);
	color: var(--content-text-color);
	line-height: 1.4;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
	background-color: var(--box-color);
	border-color: var(--content-border-color);
	box-shadow: none;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
	background-color: var(--link-active-color);
	border-color: var(--link-active-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
	background-color: var(--button-hover-color);
	border-color: var(--content-border-color);
	color: var(--content-text-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
	background-color: var(--button-color);
	border-color: var(--button-color);
}

/* --- Data Maps Checkboxes --- */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span {
	background-color: var(--box-background-color);
	border-color: var(--content-border-color);
	filter: none;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	background-color: var(--link-inactive-color);
	border-color: var(--link-inactive-color);
	box-shadow: none;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
	border-color: var(--link-active-color);
	box-shadow: none;
	outline: 1px solid transparent;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span {
	background-color: var(--button-hover-color);
	border-color: var(--link-active-color);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
	background-color: var(--link-color);
	border-color: var(--link-color);
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	background-color: var(--box-background-color);
	border-color: var(--content-border-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
	background-color: transparent;
	border-color: var(--content-border-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
	border-color: var(--content-border-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
	color: var(--content-text-color);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	color: var(--link-color);
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
	color: var(--content-text-color);
	background-color: var(--box-row-color);
	border-color: var(--content-border-color);
	border-radius: 0;
	padding-left: 0.8em;
	padding-right: 1.6em;
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
	background-color: transparent;
}

.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
	color: var(--heading-color);
}

.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
	color: var(--content-text-color);
}

.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
	border-color: var(--box-color);
}

.mw-rcfilters-ui-filterMenuHeaderWidget-header {
	background-color: transparent;
	border-color: var(--button-hover-color);
}

.mw-rcfilters-ui-filterMenuHeaderWidget-title {
	color: var(--heading-color);
	padding-left: 1em;
}

.mw-rcfilters-ui-filterMenuSectionOptionWidget {
	background-color: var(--content-background-color);
	padding-bottom: 0.3em;
}

.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label {
	color: var(--link-color);
}

.mw-rcfilters-ui-menuSelectWidget-footer {
	background-color: transparent;
	border-color: var(--button-hover-color);
}

.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
	color: var(--heading-color);
}

/* --- Notifications --- */
.oo-ui-popupWidget-head {
	background-color: var(--box-color);
	border-color: var(--box-color);
	color: var(--content-text-color);
}

.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before,
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
	border-bottom-color: var(--box-color);
}

.mw-echo-ui-placeholderItemWidget {
	background-color: var(--box-background-color);
}

.oo-ui-popupWidget-popup {
	background-color: rgba(var(--content-background-color-rgb), 0.95);
	border-color: var(--box-color);
	border-radius: 0;
	color: var(--content-text-color);
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
	border-color: var(--box-color);
}

.oo-ui-pendingElement-pending {
	background-image: linear-gradient(135deg, var(--content-background-color) 25%,transparent 25%,transparent 50%, var(--content-background-color) 50%, var(--content-background-color) 75%,transparent 75%,transparent);
}

.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
	background: none;
	margin-top: 0;
	box-shadow: none;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
	background-color: white;
	color: black;
	border-color: white;
}

.mw-echo-ui-crossWikiUnreadFilterWidget {
	border-color: var(--content-border-color);
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
	background-color: white;
	color: black;
}

.oo-ui-optionWidget-selected .mw-echo-ui-pageNotificationsOptionWidget-label-count {
	color: black;
}

.oo-ui-menuSelectWidget {
	background-color: var(--button-hover-color);
	border-color: var(--button-hover-color);
	margin-top: 0.2em;
}

.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
	color: var(--content-text-color);
}

.oo-ui-pendingElement-pending {
	background-color: transparent;
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted,
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-pressed.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
	color: var(--link-color);
	background-color: var(--button-color);
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected .mw-echo-ui-pageNotificationsOptionWidget-label-count {
	color: var(--link-color);
}

/* --- Preferences Page --- */
.oo-ui-tabSelectWidget-framed,
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
	background-color: var(--box-color);
}

#preferences .mw-htmlform-submit-buttons {
	background-color: var(--box-color);
	border-color: var(--box-color);
	padding-left: 1em;
}

.mw-prefs-tabs-wrapper.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-framed {
	border-color: var(--box-color);
	background-color: var(--box-background-color);
}

.oo-ui-tabOptionWidget {
	color: var(--link-active-color);
	margin: 3px;
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
	border-radius: 0;
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span {
	border-color: var(--link-inactive-color);
}

.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
	background-color: var(--box-color);
}

.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
	background-color: var(--content-border-color);
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
	background-color: var(--button-color);
	color: var(--link-color);
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
	border-color: var(--link-color);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--link-color);
}

/****************************/
/* --- Portable Infobox --- */
/****************************/
.portable-infobox {
	background: var(--box-background-color);
	border: 1px solid var(--box-color);
	width: unset;
}

.portable-infobox .pi-title {
	font-family: var(--heading-font-family);
	text-align: center;
	text-shadow: none;
	margin-bottom: 5px;
}

.portable-infobox .pi-header {
	padding: 0.6em 1em;
}

.portable-infobox .pi-data-label {
	font-family: var(--content-font-family);
	font-weight: 700;
	min-width: 7em;
}

.portable-infobox .pi-item {
	border: none;
}

.portable-infobox .pi-item:nth-child(2n+1) {
	background-color: var(--box-row-color);
}

.portable-infobox .pi-item:first-child {
	background-color: var(--box-color);
	text-shadow: none;
}

.portable-infobox .pi-item.pi-group,
.portable-infobox .pi-item.pi-media {
	background: transparent;
}

.portable-infobox .pi-media-collection-tabs {
	margin-bottom: 0.5em;
}

.pi-media-collection-tabs .pi-tab-link {
	background: var(--box-color);
	border-color: var(--content-border-color);
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: var(--link-active-color);
	color: black;
}

/**********************/
/* --- Wikitables --- */
/**********************/
table {
	white-space: normal;
}

.wikitable {
	color: var(--content-text-color);
}

.wikitable > tr > td,
.wikitable > * > tr > td,
.mw-datatable > tr > td,
.mw-datatable > * > tr > td {
	border-color: var(--box-color);
	padding: 0.5rem 1rem;
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.mw-datatable > tr > th,
.mw-datatable > * > tr > th,
.mw_metadata th {
	background-color: var(--box-color);
	border: 1px solid var(--box-color);
	border-right: 1px solid var(--box-background-color);
	padding: 0.3rem 0.5rem;
}

.wikitable tr th:last-child {
	border-right: 1px solid var(--box-color);
}

.mw_metadata td,
.mw_metadata th {
	border-color: var(--box-color);
}

.mw_metadata-collapsible th,
.mw_metadata-show-hide-extended td {
	background-color: var(--box-background-color);
}

.mw_metadata-collapsible td {
	background-color: var(--box-row-color);
}

.jquery-tablesorter th.headerSort {
	background-image: url(/images/7/73/Sort_both.svg);
}

.mw-datatable td,
.mw_metadata td {
	background-color: transparent;
}

.mw-datatable tr:hover td {
	background-color: var(--box-row-color);
}

.wikitable, .mw-datatable {
	background-color: transparent;
	border: 0;
}

.wikitable tr,
.wikitable.sortable tr:nth-child(odd),
.mw-datatable tr,
.mw_metadata tr {
	background-color: var(--box-background-color);
	color: var(--content-text-color);
}

.wikitable.icon-column td:first-child,
.wikitable.icon-name-column td:first-child {
	background: var(--box-row-color);
}

@media screen and (min-width: 720px) {
	.wikitable tr:nth-child(odd), .mw-datatable tr:nth-child(odd) {
		background: var(--box-row-color);
	}
	
	.wikitable.sortable tr:nth-child(even) {
		background: var(--box-row-color);
	}
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
.mw-datatable.listfiles th a {
	color: var(--link-active-color);
}

.mw-datatable-is-descending a {
	filter: brightness(0) invert(1)
}

/*********************/
/* Mobile Wikitables */
/*********************/
@media screen and (max-width: 720px) {
	.wikitable.name-column td,
	.wikitable.icon-column td,
	.wikitable.icon-name-column td,
	.wikitable.name-column tr:first-child,
	.wikitable.icon-column tr:first-child,
	.wikitable.icon-name-column tr:first-child {
		border: 0
	}
	
	.wikitable.icon-column td:first-child,
	.wikitable.icon-name-column td:first-child {
		background: var(--box-color);
	}

	.wikitable.name-column tr,
	.wikitable.icon-column tr,
	.wikitable.icon-name-column tr,
	.wikitable.sortable.name-column tr,
	.wikitable.sortable.icon-column tr,
	.wikitable.sortable.icon-name-column tr {
		border: 1px solid var(--box-color)
	}

	.wikitable.name-column tbody,
	.wikitable.icon-column tbody,
	.wikitable.icon-name-column tbody {
		display: flex;
		flex-direction: column;
		gap: 0.6em;
	}

	.wikitable.name-column th,
	.wikitable.icon-column th,
	.wikitable.icon-name-column th {
		display: none
	}

	.wikitable.name-column td,
	.wikitable.icon-column td,
	.wikitable.icon-name-column td {
		display: block;
		padding: 0.5rem 1rem;
		min-width: 0 !important; /* Override element min-width for mobile */
	}
	
	.wikitable.name-column td {
		text-align: left !important; /* Override element text-align for mobile */
	}

	.wikitable.name-column td::before,
	.wikitable.icon-column td::before,
	.wikitable.icon-name-column td::before {
		content: attr(data-cell) ":\a";
		white-space: pre-wrap;
		text-transform: capitalize;
		font-weight: 700
	}

	.wikitable.name-column td:first-child {
		padding-top: 1em;
	}
	
	.wikitable.icon-column td:first-child,
	.wikitable.icon-name-column td:first-child {
		padding-top: 0.3em;
		padding-bottom: 0.3em;
		margin-bottom: 0.3em
	}

	.wikitable.icon-name-column td:first-child {
		display: flex;
		align-items: center
	}

	.wikitable.icon-column td:nth-child(2),
	.wikitable.icon-name-column td:first-child {
		font-family: var(--heading-font-family);
		font-size: 1.4em
	}

	.wikitable.icon-column td:first-child::before,
	.wikitable.icon-column td:nth-child(2)::before,
	.wikitable.icon-name-column td:first-child::before {
		content: ""
	}
	
	.wikitable.name-column td:last-child,
	.wikitable.icon-column td:last-child,
	.wikitable.icon-name-column td:last-child {
		margin-bottom: 1em
	}

	.wikitable.icon-column td img,
	.wikitable.icon-name-column td img {
		max-width: 100%;
		height: auto
	}
}

/************************************/
/* --- Editor and messageDialog --- */
/************************************/
.ace_gutter-cell,
.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .group .tool-select .label,
.wikiEditor-ui-toolbar .page-table td,
.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
.oo-ui-messageDialog-message,
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
	color: var(--content-text-color);
}

.ace-tm .ace_gutter {
	background-color: var(--page-background-color);
}

.ace-tm .ace_gutter-active-line,
.codeEditor-status {
	background-color: var(--box-color);
}

.ace_fold-widget,
.wikiEditor-ui-toolbar .tabs span.tab a:before,
.wikiEditor-ui-toolbar .group .tool-select .label:after {
	filter: brightness(0) invert(1);
}

/*
.oo-ui-image-progressive.oo-ui-icon-markup {
	filter: brightness(0) var(--wiki-icon-to-link-filter)
}
*/

.codeEditor-status,
.codeEditor-status-message,
.wikiEditor-ui .wikiEditor-ui-top,
.wikiEditor-ui .wikiEditor-ui-view,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group,
.wikiEditor-ui-toolbar .sections .section,
.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar .page-characters div span:hover,
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
	border-color: var(--content-border-color);
}

.oo-ui-messageDialog-content > .oo-ui-window-foot {
	outline-color: var(--content-border-color);
}

.oo-ui-windowManager-modal > .oo-ui-dialog {
	background-color: var(--box-background-color);
}

.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
	background: var(--page-background-color);
	border-color: var(--content-border-color);
	filter: saturate(0.5);
}

.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
	border-color: white;
	box-shadow: none;
}

.wikiEditor-ui-toolbar {
	background-color: var(--box-row-color);
	box-shadow: none;
}

.wikiEditor-ui-toolbar .booklet > .index > .current {
	background-color: white;
}

.wikiEditor-ui-toolbar .booklet > .index > .current,
.wikiEditor-ui-toolbar .page-characters div span:hover {
	color: black;
}

.wikiEditor-ui-toolbar .booklet > .index > :hover {
	background-color: var(--button-color);
	color: var(--content-text-color);
}

.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group {
	min-height: 36px;
}

.wikiEditor-ui-toolbar .tabs span.tab,
.wikiEditor-ui-toolbar .group .tool-select .label {
	margin-top: 2px;
}

.wikiEditor-ui-toolbar .tabs span.tab a {
	color: var(--link-color);
}

#msupload-div {
	background: var(--box-row-color);
	border-color: var(--content-border-color);
}

#msupload-dropzone {
	color: var(--content-text-color);
	border-color: var(--content-border-color);
}
Retrieved from "https://carrion.wiki.gg/index.php?title=MediaWiki:Vector.css&oldid=1818"