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);
    --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5' fill='%23cbd9f4'/%3E%3C/svg%3E");
    --searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13'%3E%3Cg fill='none' stroke='%238cabe6' stroke-width='2'%3E%3Cpath d='M11.29 11.71l-4-4'/%3E%3Ccircle cx='5' cy='5' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

: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);
}

/* SIDEBAR */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
    color: var(--link-color);
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
    color: var(--link-color);
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading{
	color: white;
	font-weight: bold;
	background: none;
}


/* MENU TABS */
.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:after {
    background-image: var(--arrow-down);
    opacity: 1;
}

.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-dropdown .vector-menu-heading {
    display: flex;
    color: #54595d;
    font-size: 0.8125em;
    background-position: right bottom;
    margin: 0 -1px 0 0;
    padding: 1em 8px 9px;
    font-weight: normal;
}

.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);
}

.vector-menu-dropdown .vector-menu-content {
    border-color: transparent;
    background-color: var(--body-light);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.1);
    left: 0;
}

.vector-menu-dropdown .mw-list-item a {
    color: var(--link-color);
}

/* SEARCH BOX */
.vector-search-box {
    margin: 0;
}

.vector-search-box-inner {
    background: var(--search-box);
    height: 2.5em;
    margin-top: 0;
    box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
}

.vector-search-box form {
    margin-top: 0;
}

.vector-search-box-input{
	color: var(--text-color);
    height: 100%;
    width: 100%;
    border: none;
    box-sizing: border-box;
    background: none;
    border-radius: 2px;
    padding: 5px 2.15384615em 5px 0.4em;
    padding-left: 0.75em;
    box-shadow: inset 0 0 0 1px transparent;
    font-family: inherit;
    font-size: 0.8125em;
    direction: ltr;
    transition-property: border-color,box-shadow;
    transition-duration: 250ms;
    -webkit-appearance: none;
}

.searchButton[name='go'] {
    background: no-repeat center var(--searchbutton-icon);
}