MediaWiki:Vector.css

/* CSS placed here will affect users of the Vector skin */
html {
	background-repeat: no-repeat;
}

body.theme-dark-grey {
	/* Gradient background for centered body. */
	background: linear-gradient(rgba(27 27 27 / 90%) 80%, transparent);
}

/* Fix pre being bright on dark */
body.theme-dark-grey pre {
    background: var(--bg-main);
    color: var(--fg);
}

/* Set pre colour on light */
body.theme-light pre,
body.theme-light code {
	background: var(--mw-code-background-color);
}

.vector-body h3 {
	font-size: 120%;
}

.vector-body h4 {
	font-size: 100%;
}

.wikitable caption {
	padding: 5px;
}

.wikitable tr :is(th, td) {
	padding-left: 0.8em;
	padding-right: 0.8em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.wikitable tr td :is(ol, ul) {
	margin: 0 0 0 1em;
}

/* Toc styling */
.tocnumber {
	display: none;
}

.toc ul ul {
	border-left: 1px dotted var(--toc-subheader-border-color);
	padding-left: 0.5em;
}

.toc > ul {
    padding: 0.75em 1.75em;
    margin: 0;
}

/* 
 * Make some warnings more prominent
 */

body.theme-dark-grey .mw-userconfigpublic {
	color: yellow;
}

body.theme-dark-grey .mw-userconfigdangerous {
	color: red;
	font-weight: bold;
}

/* 
 * Main Page
 */

@media screen and (min-width: 780px) {
	.bg3wiki-mainpage-left {
		float: left;
		padding-left: 10px;
		padding-right: 15px;
		width: calc(50% - 25px);
	}
	.bg3wiki-mainpage-right {
		float: right;
		padding-left: 15px;
		padding-right: 10px;
		width: calc(50% - 25px);
	}
}

/*
 * Conditionally hiding things on narrow screens
 */

@media screen and (max-width: 1199px) {
	.bg3wiki-minwidth-1200 {
		display: none;
	}
}

/*
 * Feedback Footer
 */

body.theme-dark-grey .bg3wiki-article-footer {
	border: 1px solid var(--bdr-color);
	background-color: var(--bg-dark);
}

.bg3wiki-article-footer {
	font-size: 1.1em;
	margin-top: 1em;
	padding: 0.5em;
}

/*
 * Various elements used across the wiki
 */

/* Info blob */

body.theme-dark-grey .bg3wiki-info-blob {
	background-color: var(--bg-dark);
}

/* D20 background image for numbers */

.bg3wiki-d20-bg {
    background-image: url('/static/d20-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35px;
}

/* Tooltip box */
body.theme-dark-grey .bg3wiki-tooltip-box {
	background: #1B1A19;
}

body.theme-dark-grey .bg3wiki-tooltip-gradient-common {
	background: linear-gradient(to bottom, #1B1A1999, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .bg3wiki-tooltip-gradient-uncommon {
	background: linear-gradient(to bottom, #00491599, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .bg3wiki-tooltip-gradient-rare {
	background: linear-gradient(to bottom, #00374999, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .bg3wiki-tooltip-gradient-veryrare {
	background: linear-gradient(to bottom, #54003299, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .bg3wiki-tooltip-gradient-legendary {
	background: linear-gradient(to bottom, #563E0D99, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .bg3wiki-tooltip-gradient-story {
	background: linear-gradient(to bottom, #561D0099, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey {
	--bg3wiki-math: invert(1);
/* Variables with the dark suffix are intended for detail elements within the contents of pages, such as tabbers, infoboxes, amboxes and tables. These are darker than other elements. */
/* Intended for very large boxed elemetns that cover an entire page. */
	--bg3wiki-tooltip-doc-bg: #2b2a28;
	--bg3wiki-tooltip-bg: #1B1A19;
/* Intended for accents like headers or titles */
	--bg3wiki-accent: #23201f;
	--bg3wiki-accent-bg: #23201f;
	--bg3wiki-accent-dark-bg: #232324;
	--bg3wiki-accent-text: var(--fg);
/* Intended for labels in boxes */
	--bg3wiki-label-bg: #2f2b28;
    --bg3wiki-label-border: 2px solid #232323;
	--bg3wiki-label-dark-bg: #171717;
    --bg3wiki-label-dark-border: 1px solid #1f1d1c;
/* Intended for data elements in boxes, where its contents are displayed. */
	--bg3wiki-data-bg: #232323;
	--bg3wiki-data-border: 1px solid #4d4a46;
	--bg3wiki-data-row-even-bg: #272727;
	--bg3wiki-data-row-odd-bg: var(--bg-main);
	--bg3wiki-data-dark-bg: #1f1e1e;
    --bg3wiki-data-dark-border: 1px solid #242322;
/* Intended for detail elements in boxes */
	--bg3wiki-detail-bg: #1b1b1b;
	--bg3wiki-detail-dark-bg: #121212;
	--bg3wiki-detail-dark-border: 2px solid #121212;
/* Relative location */
	--bg3wiki-relative-location-bg: var(--bg3wiki-data-dark-bg);
	--bg3wiki-relative-location-header-bg-dark: var(--bg3wiki-accent-dark-bg);
	/* Old Navbox colours. Will be removed. */
	--bg3wiki-navbox-bg: var(--bg-dark);
	--bg3wiki-navbox-bg: var(--bg-dark);
	--bg3wiki-navbox-header-bg: var(--bg3wiki-accent);
	--bg3wiki-navbox-header-text: var(--bg3wiki-accent-text);
	--bg3wiki-navbox-header-secondary-bg: #28201B;
	--bg3wiki-gameplay-navbox-bg: #302d2d;
	--bg3wiki-gameplay-navbox-header-bg: #241f1f;
	/* css tooltip colours */
	--aria-label-tooltip-bg: hsl(200deg 5% 10%);
    --aria-label-tooltip-fg: hsl(0deg 0% 90%);
    --aria-label-tooltip-border: none;
    /* Documentation */
	--bg3wiki-documentation-bg: var(--bg3wiki-tooltip-doc-bg);
	--bg3wiki-documentation-border: var(--bg3wiki-tooltip-border);
	--bg3wiki-documentation-header-bg: var(--bg-dark);
	/* Tab bar */
	--bg3wiki-tabbar-bg: var(--bg3wiki-data-dark-bg);
	--bg3wiki-tabbar-active-color: var(--fgt);
	--bg3wiki-tabbar-active-bg: var(--bg3wiki-accent-dark-bg);
	/* License */
	--bg3wiki-license-color: rgb(210,210,210);
	/* Spoiler warning */
	--bg3wiki-spoiler-warning-start: #443E20;
	--bg3wiki-spoiler-warning-end: #232323;
	--bg3wiki-spoiler-warning-strong-color: #ebb73f;
	/* Widget:lower city map */
	--bg3wiki-lower-city-map-bg: var(--bg-dark);
	--bg3wiki-lower-city-map-inner-bg: var(--bg-main);
	/* Toc */
	--toc-subheader-border-color: var(--bg3wiki-tooltip-border);
	/* Tables */
	--bg3wiki-wikitable-bg: var(--bg3wiki-data-dark-bg);
    --bg3wiki-wikitable-header-bg: var(--bg3wiki-label-dark-bg);
    --bg3wiki-wikitable-border: var(--bg3wiki-data-border);
	--bg3wiki-wikitable-muted-bg: var(--bg3-wiki-label-dark-bg);
	--bg3wiki-wikitable-muted-border: var(--bg3wiki-data-border-bg);
	/* Quotes */
	--bg3wiki-blockquote-marks: #C1A878;
    /* Hatnotes */
    --bg3wiki-hatnote-bg: inherit;
    --bg3wiki-hatnote-font-style: italic;
    --bg3wiki-hatnote-font-size: inherit;
    --bg3wiki-hatnote-padding: 0 1.6em 0.4em 1.6em;
    --bg3wiki-hatnote-margin: 0 0 0.4em 0;
    /* Resistance colours */
    --bg3wiki-imagetext-text-resistant-color: #a9f5f0;
    --bg3wiki-imagetext-text-immune-color: #e8e29e;
    --bg3wiki-imagetext-text-vulnerable-color: #ff476c;
    /* Character info colours. Outdated. Will removed with the template. */
    --bg3wiki-characterinfo-bg: #1B1B1B;
    --bg3wiki-characterinfo-color: #C1A886; 
    --bg3wiki-characterinfo-border: 1px solid #785000; 
    --bg3wiki-characterinfo-header-bg:  #281C14;
    --bg3wiki-characterinfo-header-color: #C1A886;
    --bg3wiki-characterinfo-subheader-bg:  #1B1B1B;
    --bg3wiki-characterinfo-subheader-color: #C1A886;
    /* Infobox colours */
	--bg3wiki-box-header-bg: var(--bg3wiki-accent-dark-bg);
	--bg3wiki-box-label-bg: var(--bg3wiki-label-dark-bg);
	--bg3wiki-box-label-border: var(--bg3wiki-label-dark-border);
	--bg3wiki-box-data-bg: var(--bg3wiki-data-dark-bg);
    --bg3wiki-box-data-border: var(--bg3wiki-data-dark-border);
	--bg3wiki-box-detail-bg: var(--bg3wiki-detail-dark-bg);
	--bg3wiki-box-detail-border: var(--bg3wiki-detail-dark-border);
    --bg3wiki-box-border: 1px solid #785000; 
	--bg3wiki-box-accent-dark-border: 1px solid #121212;
	/* Navbox colours. */
	--bg3wiki-navbox-data-bg: var(--bg3wiki-data-row-even-bg);
	--bg3wiki-navbox-data-row-even-bg: var(--bg3wiki-data-row-even-bg);
	--bg3wiki-navbox-data-row-odd-bg: var(--bg3wiki-data-row-odd-bg);
	--bg3wiki-navbox-header-bg: var(--bg3wiki-accent-bg);
	--bg3wiki-navbox-label-bg: var(--bg3wiki-label-bg);
	--bg3wiki-navbox-label-border: var(--bg3wiki-label-border);
	/* Ambox. */
	--bg3wiki-ambox-bg: var(--bg3wiki-data-dark-bg);
}

/* References need to be recolored on dark theme */
body.theme-dark-grey .references li:target {
	background-color: var(--bg-darker);
}

/*** Light theme-related colors ***/
body.theme-light {
	--mw-code-background-color: #ddd4bb;
	/* We want itemicon border opacity to be 1.0. */
	--bg3wiki-itemicon-border-opacity: 100%;
	/* Navbox colours */
	--bg3wiki-navbox-header-bg: var(--light-body-dark);
	--bg3wiki-navbox-header-secondary-bg: var(--light-body-mid);
	--bg3wiki-gameplay-navbox-header-bg: var(--light-body-dark);
	
	--bg3wiki-navbox-bg: var(--light-body-light);
	--bg3wiki-gameplay-navbox-bg: var(--light-body-light);
	
	--bg3wiki-navbox-header-text: default;
	/* Define different colors for relative location theme */
	--bg3wiki-relative-location-bg: var(--light-body-light);
	--bg3wiki-relative-location-header-bg-dark: var(--light-body-dark);
	--aria-label-tooltip-bg: hsl(0deg 0% 90%);
    --aria-label-tooltip-fg: hsl(200deg 5% 10%);
    --aria-label-tooltip-border: 1px solid hsl(200deg 5% 10%);
    /* Override tooltip colour */
    --bg3wiki-tooltip-bg: var(--light-body-light);
    /* Documentation */
    --bg3wiki-documentation-bg: #eaf3ff;
	--bg3wiki-documentation-border: #a3caff;
	--bg3wiki-documentation-header-bg: #c2dcff;
	/* Tab bar */
	--bg3wiki-tabbar-bg: var(--light-body-light);
	--bg3wiki-tabbar-active-color: var(--light-background-link-color);
	--bg3wiki-tabbar-active-bg: var(--light-body-background-color);
	/* License box */
	--bg3wiki-license-color: black;
	/* Spoiler box */
	--bg3wiki-spoiler-warning-start: var(--light-body-dark);
	--bg3wiki-spoiler-warning-end: var(--light-body-light);
	--bg3wiki-spoiler-warning-strong-color: black;
	/* Widget:lower city map */
	--bg3wiki-lower-city-map-bg: var(--light-body-light);
	--bg3wiki-lower-city-map-inner-bg: var(--light-body-main);
	/* Toc */
	--toc-subheader-border-color: var(--light-body-border);
	/* Tables */
	--bg3wiki-wikitable-bg: var(--light-body-dark);
    --bg3wiki-wikitable-header-bg: var(--light-body-dark);
    --bg3wiki-wikitable-border: var(--light-body-border);
	--bg3wiki-wikitable-muted-bg: var(--light-body-mid);
	--bg3wiki-wikitable-muted-border: var(--light-body-border);
	/* Quotes */
	--bg3wiki-blockquote-marks: #4a2e1d;
    /* Hatnotes */
    --bg3wiki-hatnote-bg: inherit;
    --bg3wiki-hatnote-font-style: italic;
    --bg3wiki-hatnote-font-size: inherit;
    --bg3wiki-hatnote-padding: 0 1.6em 0.4em 1.6em;
    --bg3wiki-hatnote-margin: 0 0 0.4em 0;
    /* Resistance colours */
    --bg3wiki-imagetext-text-resistant-color: #0d5752;
    --bg3wiki-imagetext-text-immune-color: #424028;
    --bg3wiki-imagetext-text-vulnerable-color: #591523;
    /* Infobox colours old */
    --bg3wiki-characterinfo-bg: var(--light-body-light);
    --bg3wiki-characterinfo-color: black;
    --bg3wiki-characterinfo-border: 0; 
    --bg3wiki-characterinfo-header-bg: var(--light-body-dark);
    --bg3wiki-characterinfo-header-color: black;
    --bg3wiki-characterinfo-subheader-bg:  var(--light-body-mid);
    --bg3wiki-characterinfo-subheader-color: black;
    /* Infobox colours */
	--bg3wiki-box-header-bg: var(--light-body-dark);
	--bg3wiki-box-label-bg: var(--light-body-mid);
	--bg3wiki-box-label-border: none;
	--bg3wiki-box-data-bg: var(--light-body-light);
	--bg3wiki-box-detail-bg: var(--light-body-light);
	--bg3wiki-box-detail-border: none;
    --bg3wiki-box-border: var(--light-body-border);
	--bg3wiki-box-accent-dark-border: none;
	/* Navbox colours. */
	--bg3wiki-navbox-data-bg: var(--light-body-light);
	--bg3wiki-navbox-data-row-even-bg: var(--light-body-mid);
	--bg3wiki-navbox-data-row-odd-bg: var(--light-body-light);
	--bg3wiki-navbox-header-bg: var(--light-body-dark);
	--bg3wiki-navbox-label-bg: var(--light-body-mid);
	--bg3wiki-navbox-label-border: var(--light-body-light);
	/* Ambox. */
	--bg3wiki-ambox-bg: var(--light-body-mid);
}

/* Item icons */
body.theme-light .bg3wiki-itemicon {
	background-color: var(--light-body-light);
}

/* Info blob */
body.theme-light .bg3wiki-info-blob {
	background-color: var(--light-body-mid);
}

/* UID/UUID widget */
body.theme-light .bg3wiki-uid > tt {
	background-color: var(--light-body-mid);
}

/* Coordinates: Light skin needs the background not to be transparent */
body.theme-light .bg3wiki-coordinates {
	background: #343232;
}

/* Helper classes to add a drop shadow to white icons only on light theme */
body.theme-light .bg3wiki-lightmode-drop-shadow,
body.theme-light .bg3wiki-lightmode-drop-shadow > img {
	filter: drop-shadow(0 0 2px black);
}

body.theme-light .gallery.bg3wiki-gallery-drop-shadow img {
	filter: drop-shadow(0 0 2px black);
}