MediaWiki:Vector.css: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
No edit summary
(Fix syntax)
Line 463: Line 463:


/*** Light theme-related styling ***/
/*** Light theme-related styling ***/
body.theme-light {
body.theme-light .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-head {
border-bottom-color: var(--light-body-border);
border-bottom-color: var(--light-body-border);
 
}
 
.oo-ui-popupWidget-popup {
background-color: var(--light-body-light);
border-color: var(--light-body-border);
}
}


oo-ui-widget oo-ui-widget-enabled mw-echo-ui-placeholderItemWidget oo-ui-labelElement,
body.theme-light .oo-ui-popupWidget-popup {
.mw-echo-ui-placeholderItemWidget {
background-color: var(--light-body-light);
background-color: var(--light-body-mid);
border-color: var(--light-body-border);
}
}


.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
body.theme-light oo-ui-widget oo-ui-widget-enabled mw-echo-ui-placeholderItemWidget oo-ui-labelElement,
background-color: var(--light-body-mid);
body.theme-light .mw-echo-ui-placeholderItemWidget {
background-color: var(--light-body-mid);
}
}


body.theme-light .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var(--light-body-mid);
}
}


/*** Light theme-related colors ***/
/*** Light theme-related colors ***/

Revision as of 13:13, 27 February 2024

/*
CSS tooltip implementation. Usage in markup:

  <some-element aria-label="tooltip text here">
    normal text
  </some-element>
*/

[aria-label]:hover, [aria-label]:focus {position: relative}

[aria-label]:hover::after,
[aria-label]:focus::after {
  position: absolute;
  white-space: pre;
  line-height: 1;
  padding: 0.3rem;
  content: attr(aria-label);
  background-color: var(--aria-label-tooltip-bg);
  color: var(--aria-label-tooltip-fg);
  border: var(--aria-label-tooltip-border);
  text-decoration: unset;

  /* See optional override below. */
  bottom: 100%;
  left: 0;
}

/* Changes the tooltip position. */
[aria-label].aria-label-top-rig:hover::after,
[aria-label].aria-label-top-rig:focus::after {
  bottom: 100%;
  left: unset;
  right: 0;
}

/* Optional class for indicating tooltip presence via underline. */
.bg3wiki-help-tooltip[aria-label] {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: calc(1ex / 2);
}


/* 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: 0.2em;
}

/* Table styling */
.wikitable {
    border: var(--bg3wiki-box-border) !important;
}

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

table.wikitable td {
    background-color: var(--bg3wiki-wikitable-bg) !important;
    border: var(--bg3wiki-wikitable-border) !important;
}

.wikitable th {
    background-color: var(--bg3wiki-wikitable-header-bg) !important;
    border: var(--bg3wiki-wikitable-border) !important;
}

.wikitable td ul,
.wikitable td ol,
.wikitable td dl,
.wikitable tr td :is(ol,
ul) {
	text-align: left;
}

.wikitable > .ublist > ul,
.wikitable > .bg3wiki-ublist > ul {
	margin: 0;
}

/* 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 {
    /* Box and text colours - Default */
     --bg3wiki-box-dark-default: #383431;
     --bg3wiki-box-mid-default: #2e2a28;
     --bg3wiki-box-bright-default: #272321;
     --bg3wiki-box-bg-default: #1B1818;
     --bg3wiki-box-border-default: 1px solid #917459;
     --bg3wiki-box-border-faded-default: 1px solid #5C4D44;
     --bg3wiki-damage-colour-physical-fg: #8c8c8c;
      /* Box and text colours - Red */
     --bg3wiki-box-dark-red: #4a3034;
     --bg3wiki-box-mid-red: #36282a;
     --bg3wiki-box-bright-red: #2b2123;
	 --bg3wiki-box-bg-red: #1f1a1b;
	 --bg3wiki-box-border-red: 1px solid #a85050;
     --bg3wiki-box-border-faded-red: 1px solid #BA8E91;
     --bg3wiki-damage-colour-force-fg: #cc3333;
      /* Box and text colours - Orange*/
     --bg3wiki-box-dark-orange: #40352c;
     --bg3wiki-box-mid-orange: #332a25;
     --bg3wiki-box-bright-orange: #29231f;
	 	 --bg3wiki-box-bg-orange: #1c1917;
	 --bg3wiki-box-border-orange: 1px solid #a85050;
     --bg3wiki-box-border-faded-orange: 1px solid #BA8E91;
     --bg3wiki-damage-colour-fire-fg: #ee5500;
      /* Box and text colours - Yellow */
     --bg3wiki-box-dark-yellow: #3b3729;
     --bg3wiki-box-mid-yellow: #302c20;
     --bg3wiki-box-bright-yellow: #26241e;
	 	 --bg3wiki-box-bg-yellow: #1c1b17;
	 --bg3wiki-box-border-yellow: 1px solid #a85050;
     --bg3wiki-box-border-faded-yellow: 1px solid #BA8E91;
     --bg3wiki-damage-colour-radiant-fg: #ccaa00;
      /* Box and text colours - Yellow-green */
     --bg3wiki-box-dark-yellow-green: #383827;
     --bg3wiki-box-mid-yellow-green: #2e2e1d;
     --bg3wiki-box-bright-yellow-green: #272321;
	 	 --bg3wiki-box-bg-yellow-green: #1c1c16;
      --bg3wiki-preqreq-color: white;
	 --bg3wiki-box-border-yellow-green: 1px solid #a85050;
     --bg3wiki-box-border-faded-yellow-green: 1px solid #BA8E91;
     --bg3wiki-damage-colour-acid-fg: #80b000;
      /* Box and text colours - Green */
     --bg3wiki-box-dark-green: #343827;
     --bg3wiki-box-mid-green: #2a2e1d;
     --bg3wiki-box-bright-green: #24261e;
	 	 --bg3wiki-box-bg-green: #1b1c16;
	 --bg3wiki-box-border-green: 1px solid #a85050;
     --bg3wiki-box-border-faded-green: 1px solid #BA8E91;
     --bg3wiki-damage-colour-poison-fg: #44bb00;
      /* Box and text colours - Cyan-green*/
     --bg3wiki-box-dark-cyan-green: #2f3b28;
     --bg3wiki-box-mid-cyan-green: #232e1d;
     --bg3wiki-box-bright-cyan-green: #21261e;
	 	 --bg3wiki-box-bg-cyan-green: #181c16;
	 --bg3wiki-box-border-cyan-green: 1px solid #a85050;
     --bg3wiki-box-border-faded-cyan-green: 1px solid #BA8E91;
     --bg3wiki-damage-colour-necrotic-fg: #40b050;
      /* Box and text colours - Cyan */
     --bg3wiki-box-dark-cyan: #283b39;
     --bg3wiki-box-mid-cyan: #1d2e2c;
     --bg3wiki-box-bright-cyan: #1e2626;
	 	 --bg3wiki-box-bg-cyan: #161c1b;
	 --bg3wiki-box-border-cyan: 1px solid #a85050;
     --bg3wiki-box-border-faded-cyan: 1px solid #BA8E91;
     --bg3wiki-damage-colour-healing-fg: #30bbbb;
      /* Box and text colours - Blue*/
     --bg3wiki-box-dark-blue: #2a3a40;
     --bg3wiki-box-mid-blue: #202f33;
     --bg3wiki-box-bright-blue: #1e2426;
	 	 --bg3wiki-box-bg-blue: #161a1c;
	 --bg3wiki-box-border-blue: 1px solid #a85050;
     --bg3wiki-box-border-faded-blue: 1px solid #BA8E91;
     --bg3wiki-damage-colour-cold-fg: #3399cc;
      /* Box and text colours - Indigo */
     --bg3wiki-box-dark-indigo: #2e374a;
     --bg3wiki-box-mid-indigo: #262c38;
     --bg3wiki-box-bright-indigo: #21242b;
	 	 --bg3wiki-box-bg-indigo: #191a1f;
	 --bg3wiki-box-border-indigo: 1px solid #a85050;
     --bg3wiki-box-border-faded-indigo: 1px solid #BA8E91;
     --bg3wiki-damage-colour-lightning-fg: #3366cc;
      /* Box and text colours - Violet */
     --bg3wiki-box-dark-violet: #402f4d;
     --bg3wiki-box-mid-violet: #33273b;
     --bg3wiki-box-bright-violet: #27212b;
	 	 --bg3wiki-box-bg-violet: #1c191f;
	 --bg3wiki-box-border-violet: 1px solid #a85050;
     --bg3wiki-box-border-faded-violet: 1px solid #BA8E91;
     --bg3wiki-damage-colour-thunder-fg: #8844bb;
      /* Box and text colours - Magenta*/
     --bg3wiki-box-dark-magenta: #4a2e42;
     --bg3wiki-box-mid-magenta: #3b2636;
     --bg3wiki-box-bright-magenta: #2b2129;
	 	 --bg3wiki-box-bg-magenta: #1f191e;
	 --bg3wiki-box-border-magenta: 1px solid #a85050;
     --bg3wiki-box-border-faded-magenta: 1px solid #BA8E91;
     --bg3wiki-damage-colour-psychic-fg: #cc77aa;
      /* Bright colours */
	 --bg3wiki-damage-colour-physical-fg-bright: #8c8c8c;
	 --bg3wiki-damage-colour-force-fg-bright: #cc3333;
	 --bg3wiki-damage-colour-fire-fg-bright: #ee5500;
	 --bg3wiki-damage-colour-radiant-fg-bright: #ccaa00;
	 --bg3wiki-damage-colour-acid-fg-bright: #80b000;
	 --bg3wiki-damage-colour-poison-fg-bright: #44bb00;
	 --bg3wiki-damage-colour-necrotic-fg-bright: #40b050;
	 --bg3wiki-damage-colour-healing-fg-bright: #30bbbb;
	 --bg3wiki-damage-colour-cold-fg-bright: #3399cc;
	 --bg3wiki-damage-colour-lightning-fg-bright: #3366cc;
	 --bg3wiki-damage-colour-thunder-fg-bright: #8844bb;
	 --bg3wiki-damage-colour-psychic-fg-bright: #cc77aa;
    /* Temporary fix for ui link color issues */
    --bg3wiki-ui-menu-item-a: white;
	--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: #211e1c;
	--bg3wiki-accent-bg: #211e1c;
	--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);
    --bg3wiki-navbox-sublabel-bg: #3b3632;
	/* 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 styling ***/
body.theme-light .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
	border-bottom-color: var(--light-body-border);
}

body.theme-light .oo-ui-popupWidget-popup {
	background-color: var(--light-body-light);
	border-color: var(--light-body-border);
}

body.theme-light oo-ui-widget oo-ui-widget-enabled mw-echo-ui-placeholderItemWidget oo-ui-labelElement,
body.theme-light .mw-echo-ui-placeholderItemWidget {
	background-color: var(--light-body-mid);
}

body.theme-light .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	background-color: var(--light-body-mid);
}

/*** Light theme-related colors ***/
body.theme-light {
      /* Box and text colours - Default */
     --bg3wiki-box-dark-default: #bab3b6;
     --bg3wiki-box-mid-default: #c3c1c2;
     --bg3wiki-box-bright-default: #c9c7c8;
     --bg3wiki-box-bg-default: #d5d5db;
     --bg3wiki-box-border-default: 1px solid #a85050;
     --bg3wiki-box-border-faded-default: 1px solid #BA8E91;
     --bg3wiki-damage-colour-physical-fg: #58586F;
	 --bg3wiki-damage-colour-physical-fg-bright: #878787;
      /* Box and text colours - Red */
     --bg3wiki-box-dark-red: #d4a9b0;
     --bg3wiki-box-mid-red: #d4babe;
     --bg3wiki-box-bright-red: #d6c5c8;
     --bg3wiki-box-bg-red: #dbd5d6;
	 --bg3wiki-box-border-red: 1px solid #a85050;
     --bg3wiki-box-border-faded-red: 1px solid #BA8E91;
     --bg3wiki-damage-colour-force-fg: #A52C42;
	 --bg3wiki-damage-colour-force-fg-bright: #FF385D;
      /* Box and text colours - Orange*/
     --bg3wiki-box-dark-orange: #c9b199;
     --bg3wiki-box-mid-orange: #cfc0b2;
     --bg3wiki-box-bright-orange: #d1c6bc;
	 --bg3wiki-box-bg-orange: #dbd6d3;
	 --bg3wiki-box-border-orange: 1px solid #a85050;
     --bg3wiki-box-border-faded-orange: 1px solid #BA8E91;
     --bg3wiki-damage-colour-fire-fg: #8B4713;
	 --bg3wiki-damage-colour-fire-fg-bright: #E05E00;
      /* Box and text colours - Yellow */
     --bg3wiki-box-dark-yellow: #c2b793;
     --bg3wiki-box-mid-yellow: #c9c1a9;
     --bg3wiki-box-bright-yellow: #cfc9b6;
	 --bg3wiki-box-bg-yellow: #d9d7d0;
	 --bg3wiki-box-border-yellow: 1px solid #a85050;
     --bg3wiki-box-border-faded-yellow: 1px solid #BA8E91;
     --bg3wiki-damage-colour-radiant-fg: #6A5820;
	 --bg3wiki-damage-colour-radiant-fg-bright: #AD8200;
      /* Box and text colours - Yellow-green */
     --bg3wiki-box-dark-yellow-green: #baba8d;
     --bg3wiki-box-mid-yellow-green: #c4c4a1;
     --bg3wiki-box-bright-yellow-green: #c9c9ad;
	 --bg3wiki-box-bg-yellow-green: #d6d6ce;
	 --bg3wiki-box-border-yellow-green: 1px solid #a85050;
     --bg3wiki-box-border-faded-yellow-green: 1px solid #BA8E91;
     --bg3wiki-damage-colour-acid-fg: #5D5D1D;
	 --bg3wiki-damage-colour-acid-fg-bright: #8A8A00;
      /* Box and text colours - Green */
     --bg3wiki-box-dark-green: #aeba86;
     --bg3wiki-box-mid-green: #bfc7a3;
     --bg3wiki-box-bright-green: #c5ccaf;
	 --bg3wiki-box-bg-green: #d7d9d0;
	 --bg3wiki-box-border-green: 1px solid #a85050;
     --bg3wiki-box-border-faded-green: 1px solid #BA8E91;
     --bg3wiki-damage-colour-poison-fg: #4D6114;
	 --bg3wiki-damage-colour-poison-fg-bright: #6F9400;
      /* Box and text colours - Cyan-green*/
     --bg3wiki-box-dark-cyan-green: #9dbf8c;
     --bg3wiki-box-mid-cyan-green: #b1c9a5;
     --bg3wiki-box-bright-cyan-green: #bbcfb2;
	 --bg3wiki-box-bg-cyan-green: #d3d9d0;
	 --bg3wiki-box-border-cyan-green: 1px solid #a85050;
     --bg3wiki-box-border-faded-cyan-green: 1px solid #BA8E91;
     --bg3wiki-damage-colour-necrotic-fg: #2C6615;
	 --bg3wiki-damage-colour-necrotic-fg-bright: #339900;
      /* Box and text colours - Cyan */
     --bg3wiki-box-dark-cyan: #8ebfbb;
     --bg3wiki-box-mid-cyan: #a5c9c6;
     --bg3wiki-box-bright-cyan: #b2cfcc;
	 --bg3wiki-box-bg-cyan: #d0d9d8;
	 --bg3wiki-box-border-cyan: 1px solid #a85050;
     --bg3wiki-box-border-faded-cyan: 1px solid #BA8E91;
     --bg3wiki-damage-colour-healing-fg: #1A6560;
	 --bg3wiki-damage-colour-healing-fg-bright: #00998C;
      /* Box and text colours - Blue*/
     --bg3wiki-box-dark-blue: #9bb9c7;
     --bg3wiki-box-mid-blue: #afc3cc;
     --bg3wiki-box-bright-blue: #bccbd1;
	 --bg3wiki-box-bg-blue: #d0d7d9;
	 --bg3wiki-box-border-blue: 1px solid #a85050;
     --bg3wiki-box-border-faded-blue: 1px solid #BA8E91;
     --bg3wiki-damage-colour-cold-fg: #0E627C;
	 --bg3wiki-damage-colour-cold-fg-bright: #0091C2;
      /* Box and text colours - Indigo */
     --bg3wiki-box-dark-indigo: #a7b7d1;
     --bg3wiki-box-mid-indigo: #b8c2d6;
     --bg3wiki-box-bright-indigo: #c1c8d6;
	 --bg3wiki-box-bg-indigo: #d1d7e3;
	 --bg3wiki-box-border-indigo: 1px solid #a85050;
     --bg3wiki-box-border-faded-indigo: 1px solid #BA8E91;
     --bg3wiki-damage-colour-lightning-fg: #1A52C1;
	 --bg3wiki-damage-colour-lightning-fg-bright: #4281FF;
      /* Box and text colours - Violet */
     --bg3wiki-box-dark-violet: #c4aed4;
     --bg3wiki-preqreq-color: black;
     --bg3wiki-box-mid-violet: #cbbcd6;
     --bg3wiki-box-bright-violet: #cfc5d6;
	 --bg3wiki-box-bg-violet: #dbd5e0;
	 --bg3wiki-box-border-violet: 1px solid #a85050;
     --bg3wiki-box-border-faded-violet: 1px solid #BA8E91;
     --bg3wiki-damage-colour-thunder-fg: #8127C2;
	 --bg3wiki-damage-colour-thunder-fg-bright: #B957FF;
      /* Box and text colours - Magenta*/
     --bg3wiki-box-dark-magenta: #d4a7ca;
     --bg3wiki-box-mid-magenta: #d6b8cf;
     --bg3wiki-box-bright-magenta: #d6c1d1;
	 --bg3wiki-box-bg-magenta: #ded3dc;
	 --bg3wiki-box-border-magenta: 1px solid #a85050;
     --bg3wiki-box-border-faded-magenta: 1px solid #BA8E91;
     --bg3wiki-damage-colour-psychic-fg: #82457A;
	 --bg3wiki-damage-colour-psychic-fg-bright: #C766B2;
    /* Temporary fix for ui link color issues */
    --bg3wiki-ui-menu-item-a: black;
	--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-light);
	--bg3wiki-wikitable-header-bg: var(--light-body-dark);
    --bg3wiki-wikitable-border: 1px solid 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-light);
	--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);
    --bg3wiki-navbox-sublabel-bg: var(--light-body-mid);
	/* 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);
}