MediaWiki:Common.css
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 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);
/* Edit OO-UI */
--ooui-text: #cbd9f4;
--ooui-interface: #222e45;
--ooui-interface-border: #2f4060;
--ooui-window-background: rgba(25,25,25,0.6);
--ooui-input: #384766;
--ooui-input-border: #475980;
--ooui-input-border--hover: #556c9b;
--ooui-normal: #313e59;
--ooui-normal--hover: #384766;
--ooui-normal-border: #3f5073;
--ooui-progressive: #617ebc;
--ooui-progressive--hover: #859bcb;
--ooui-accent: var(--link-color);
--ooui-disabled: #8992a4;
--ooui-disabled-border: #8992a4;
--ooui-disabled-text: var(--ooui-text);
--ooui-pending-background-image: repeating-linear-gradient(-45deg,var(--search-box),var(--search-box) 20px,var(--body-main) 20px,var(--body-main) 30px);
/* ICONS */
--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");
--echo-icon-person-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13.836' viewBox='0 0 12 13.836'%3E%3Cpath fill='%23cbd9f4' d='M1.938,6.656c-1.32,1.485-1.47,3.15-0.97,4.25c0.323,0.707,0.78,1.127,1.313,1.375 c0.496,0.229,1.074,0.273,1.658,0.282c0.023,0,0.04,0.03,0.062,0.03h4.187c0.61,0,1.225-0.125,1.75-0.405 c0.527-0.28,0.961-0.718,1.188-1.376c0.335-0.964,0.175-2.529-1.094-4.03C9.094,7.954,7.68,8.719,6.065,8.719 c-1.677,0-3.182-0.812-4.125-2.063H1.938z'/%3E%3Cpath fill='%23cbd9f4' d='M6.063,0c-1.89,0-3.595,1.674-3.594,3.563C2.467,5.45,4.173,7.155,6.06,7.155 c1.89,0,3.564-1.705,3.563-3.593C9.625,1.673,7.95,0,6.063,0L6.063,0z'/%3E%3C/svg%3E");
--echo-icon-bell-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E bell %3C/title%3E%3Cpath fill='%23cbd9f4' d='M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z'/%3E%3C/svg%3E");
--echo-icon-tray-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E tray %3C/title%3E%3Cpath fill='%23cbd9f4' d='M17 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 12h-4l-1 2H8l-1-2H3V3h14z'/%3E%3C/svg%3E");
--watch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='transparent' stroke='%238cabe6' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E%0A");
--unwatch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%238cabe6' stroke='%238cabe6' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E%0A");
--external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238cabe6' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
--ul-list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='13'%3E%3Ccircle cx='2.5' cy='9' r='2.5' fill='%23cbd9f4'/%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);
}
/* MAIN NAV */
.vector-menu-tabs-legacy {
padding-left: 0px;
}
.vector-user-menu-legacy #pt-userpage a, .vector-user-menu-legacy #pt-anonuserpage {
background-image: var(--echo-icon-person-bg-image);
padding-top: 0;
background-position-y: 0;
}
#pt-notifications-alert .oo-ui-icon-bell {
background-image: var(--echo-icon-bell-bg-image);
}
#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {
background-size: 75%;
background-position: center 80%;
background-repeat: no-repeat;
opacity: unset;
}
#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {
background-size: 75%;
background-position: center 80%;
background-repeat: no-repeat;
opacity: unset;
}
#pt-notifications-notice .oo-ui-icon-tray {
background-image: var(--echo-icon-tray-bg-image);
}
/* 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 .new a, .vector-menu-tabs-legacy .new a:visited {
color: var(--redlink-color);
}
.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;
}
.vector-search-box-input::placeholder {
color: var(--background-text-color);
opacity: 1; /* Firefox */
}
.searchButton[name='go'] {
background: no-repeat center var(--searchbutton-icon);
}
/* Search Results */
.suggestions-results {
background-color: var(--body-light);
cursor: pointer;
border: 1px solid var(--body-border);
padding: 0;
margin: 0;
}
.suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus {
text-decoration: none;
}
.suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus {
color: var(--text-color);
}
.suggestions-result {
margin: 0;
line-height: 1.5em;
padding: 0.01em 0.25em;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-color);
}
.suggestions-special {
position: relative;
cursor: pointer;
background-color: var(--body-light);
border: 1px solid var(--body-border);
margin: 0;
margin-top: -2px;
display: none;
padding: 0.25em 0.25em;
line-height: 1.25em;
}
.suggestions-special .special-query {
color: var(--text-color);
}
.suggestions-special .special-label {
color: var(--byline-color);
}
.suggestions-result-current .special-label, .suggestions-result-current .special-query {
color: var(--text-color);
}
.suggestions-result-current {
background-color: var(--body-mid);
color: var(--text-color);
}
/* Edit Bar */
.oo-ui-toolbar-bar {
background-color: var(--ooui-interface);
color: var(--ooui-text);
}
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
border-bottom-color: var(--body-mid);
}