MediaWiki:Vector.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ===================================
   WINDS OF VALEN - OSRS-Inspired Theme
   For Vector 2022 skin
   =================================== */

/* Force light color scheme regardless of browser dark mode */
:root {
    color-scheme: light !important;
    --background-color-base: #c7b89e !important;
    --background-color-interactive: #dfd3bc !important;
    --background-color-interactive-subtle: #e8dcc4 !important;
    --color-surface-1: #e5d8c5 !important;
    --color-surface-2: #dfd3bc !important;
    --color-base: #332717 !important;
    --color-subtle: #5c4a30 !important;
    --color-inverted: #332717 !important;
    --color-progressive: #7a5c35 !important;
    --color-progressive--hover: #5c4220 !important;
    --border-color-base: #9e8c74 !important;
    --border-color-muted: #b0a08a !important;
}

/* ===== PAGE BACKGROUND WITH BANNER ===== */
html, body {
    background-color: #c7b89e !important;
}

/* The main banner image fading into the background */
.vector-header {
    background-image: url('/images/valen_banner.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    position: relative;
}

/* Fade the header into the page background */
.vector-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #c7b89e);
    pointer-events: none;
}

/* ===== TOP NAVIGATION BAR ===== */
/* The outer wrapper of the whole header */
#mw-header-container, .vector-header-container {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
    padding: 0 !important;
}

/* Logo */
.mw-logo, .mw-logo-icon {
    background-color: transparent !important;
}

/* Tabs: Main Page, Discussion */
.vector-page-toolbar {
    background: rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
.vector-page-toolbar .mw-portlet-namespace li a,
.vector-page-toolbar .mw-portlet-views li a,
.vector-page-toolbar-container a {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}
.vector-tab-noicon.selected a,
.mw-portlet-namespace li.selected a {
    color: #ffd700 !important;
    border-bottom: 2px solid #ffd700 !important;
}

/* User links */
.vector-user-links a, #pt-login a, #pt-createaccount a {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* Search bar */
.vector-search-box input {
    background-color: rgba(255,255,255,0.85) !important;
    border: 1px solid #9e8c74 !important;
    color: #332717 !important;
}

/* ===== SIDEBAR ===== */
#mw-sidebar-container, .mw-table-of-contents-container {
    background: transparent !important;
}
.sidebar-toc, .vector-toc {
    background-color: rgba(229, 216, 197, 0.75) !important;
    border: 1px solid #9e8c74 !important;
    border-radius: 4px;
}
.mw-portlet-navigation .mw-portlet-header,
.mw-portlet-tb .mw-portlet-header,
.vector-menu-heading {
    color: #332717 !important;
    font-weight: bold !important;
}
.sidebar-toc a, .vector-toc a, .mw-portlet-navigation a, .mw-portlet-tb a {
    color: #5c4220 !important;
}

/* ===== MAIN CONTENT ===== */
.mw-content-container, .vector-column-content {
    background: transparent !important;
}

/* Content box itself */
#content, .mw-body {
    background-color: #e5d8c5 !important;
    border: 1px solid #9e8c74 !important;
    border-radius: 6px;
    color: #332717 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    margin-top: 1em !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2, .mw-body h3 {
    color: #332717 !important;
    border-bottom-color: #9e8c74 !important;
    font-family: 'Georgia', serif;
}

/* Links */
a, a:link, a:visited {
    color: #7a3c00 !important;
}
a:hover {
    color: #5c2c00 !important;
}

/* ===== HIDE MAIN PAGE TITLE ===== */
.page-Main_Page #firstHeading,
.page-Main_Page .mw-page-title-main {
    display: none !important;
}

/* ===== INFOBOX STYLING ===== */
.infobox {
    background-color: #dfd3bc !important;
    border: 1px solid #9e8c74 !important;
    color: #332717 !important;
}
.infobox th {
    background-color: #c7b89e !important;
    color: #332717 !important;
}

/* ===== FOOTER ===== */
.mw-footer, #footer {
    background-color: #b0a08a !important;
    border-top: 1px solid #9e8c74 !important;
    color: #5c4a30 !important;
}
.mw-footer a, #footer a {
    color: #5c2c00 !important;
}

/* ===== TABLE DEFAULTS ===== */
table.wikitable {
    background-color: #e5d8c5 !important;
    border: 1px solid #9e8c74 !important;
    color: #332717 !important;
}
table.wikitable th {
    background-color: #c7b89e !important;
}
table.wikitable tr:nth-child(even) {
    background-color: #dfd3bc !important;
}