MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
:root {
    --body-main: #172136;
    --body-light: #313e59;
    --body-mid: #222e45;
    --body-dark: #222e45;
    --body-border: #596e96;
    --body-background-color: #071022;
    --button-background: #605443;
    --button-color: #fff;
    --button-border: #3c352a;
    --button-dark: #18140c;
    --button-light: #3a301d;
    --sidebar: #596e96;
    --background-text-color: #cbd9f4;
    --background-link-color: var(--link-color);
    --search-box: #efeee6;
    --link-color: #8cabe6;
    --redlink-color: #f26d60;
    --text-color: #cbd9f4;
    --byline-color: #98a2b6;
    --subtle-color: var(--byline-color);
    --search-box: var(--body-light);
    --admin-blue: #332e75;
    --bearcat-green: #13592e;
    --awb-purple: #933b96;
    --rsw-blue: #438ab6;
    --osrsw-brown: #605443;
    --thumb-bg: var(--body-light);
    --thumb-caption-bg: var(--body-mid);
    --sourceeditor-input-background: #fff;
    --sourceeditor-background: var(--body-main);
    --sourceeditor-background-secondary: var(--body-main);
    --sourceeditor-border: var(--body-mid);
    --codemirror-gutter-background: var(--body-mid);
    
    --vector-tab-background: #222e45;
    --vector-tab-background--hover: #293753;
    --vector-tab-link-color: var(--background-link-color);
}

:root {
    --base-text-color: var(--text-color);
    --base-heading-color:  var(--text-color);
    --base-heading-border: var(--sidebar);
    --mw-code-background-color: #222e45;
    --body-background-image: url('https://realms-wiki.ams3.cdn.digitaloceanspaces.com/Old_School_RuneScape_Wiki_background_darkmode.jpg');
}

body{
	background: var(--body-background-image) var(--body-background-color) top left / 1500px 375px no-repeat;
}

#mw-head, #mw-page-base  {
	background-color: var(--body-background-color);
    background: none;

}

.mw-body {
	background-color: var(--body-main);
    color: var(--text-color);
    border-color: transparent;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: white;
}

.mw-parser-output h2:first-of-type {
    clear: left;
}

.mw-footer {
    color: var(--background-text-color);
}

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

.mw-footer a,
.mw-footer a:active,
.mw-footer a:visited {
    color: var(--background-link-color);
}

::placeholder {
    color: var(--subtle-color);
}

a {
    color: var(--link-color);
}

a:visited,
a:active {
    color: var(--link-color);
}

a.new {
    color: var(--redlink-color);
}

a.new:visited {
    color: var(--redlink-color);
}

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

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

.vector-menu-tabs-legacy li {
    background: var(--vector-tab-background);
	
}

.vector-menu-tabs-legacy li a {
    color: var(--vector-tab-link-color);
    padding: 0 0.75em;
    padding-top: 1em;
}

.vector-menu-tabs-legacy .selected {
    background: var(--body-main);
    color: var(--text-color);
}

.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited{
	color: var(--text-color);
}

.vector-menu-dropdown{
	color: var(--vector-tab-link-color);
	background: var(--vector-tab-background);
}

.vector-menu-dropdown .vector-menu-heading {
	color: var(--vector-tab-link-color);
}

.vector-menu-dropdown {
    direction: ltr;
    float: left;
    cursor: pointer;
    position: relative;
    line-height: 1.125em;
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none;
    background-repeat: no-repeat;
    background-size: 1px 100%;
}

.vector-menu-dropdown .vector-menu-heading, .vector-menu-dropdown .vector-menu-heading:hover, .vector-menu-dropdown .vector-menu-heading:focus {
    color: var(--background-text-color);
}