Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Vector.css

MediaWiki interface page
Revision as of 03:17, 26 December 2023 by Willowisp (talk | contribs)

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.
/* 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-accent: #281C14;
	--bg3wiki-accent-text: #C1A886;
	--bg3wiki-tooltip-bg: #1B1A19;
	--bg3wiki-math: invert(1);
	
	--bg3wiki-relative-location-bg: var(--bg-main2);
	--bg3wiki-relative-location-header-bg-dark: var(--bg-main);
	/* Navbox colours */
	--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;
	/* Gameplay navbox colors */
	--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(--bg-main2);
	--bg3wiki-documentation-border: var(--bg3wiki-tooltip-border);
	--bg3wiki-documentation-header-bg: var(--bg-dark);
	/* Tab bar */
	--bg3wiki-tabbar-bg: var(--bg-dark);
	--bg3wiki-tabbar-active-color: var(--bg3wiki-accent-text);
	--bg3wiki-tabbar-active-bg: var(--bg3wiki-accent);
	/* 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: #231E1F;
	--bg3wiki-wikitable-muted-bg: #181514;
	--bg3wiki-wikitable-muted-border: 1px solid #0d0c0b;
	/* Links */
	--bg3wiki-visited-link: #f5975c;
	/* Quotes */
	--bg3wiki-blockquote-marks: #C1A878;
}

/* 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);
	/* Table */
	--bg3wiki-wikitable-bg: var(--light-body-dark);
	--bg3wiki-wikitable-muted-bg: var(--light-body-mid);
	/* Links */
	--bg3wiki-visited-link: #184578;
	/* Quotes */
	--bg3wiki-blockquote-marks: #4a2e1d;
}

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

/* A helper class 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);;
}