MediaWiki:Vector-2022.css

From Winds Of Valen Wiki
Revision as of 00:53, 11 July 2026 by Maintenance script (talk | contribs) (WoV OSRS theme v3 - based on OSRS CSS patterns)
Jump to navigation Jump to search

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 WIKI — OSRS-Inspired Theme v3
   Based on the official OSRS Wiki CSS variable pattern.
   ============================================================ */

/* --- 1. COLOR SYSTEM (following OSRS CSS variable pattern) --- */
:root {
    /* Core palette - warm parchment tones */
    --body-main: #e2dbc8;
    --body-light: #d8ccb4;
    --body-mid: #d0bd97;
    --body-dark: #b8a282;
    --body-border: #94866d;
    --body-background-color: #c0a886;
    --sidebar: #cfc08d;

    /* Text and links */
    --text-color: #000;
    --link-color: #936039;
    --redlink-color: #ba0000;
    --byline-color: #4c4c4c;
    --subtle-color: #777;
    --background-text-color: #444;
    --background-link-color: #52351e;

    /* Buttons */
    --button-background: #605443;
    --button-color: #fff;
    --button-border: #3c352a;

    /* Search */
    --search-box: #efeee6;

    /* Wiki page background image */
    --body-background-image: url('/images/valen_banner.png');

    /* === Override MediaWiki's own CSS variables to match our palette === */
    --background-color-base: var(--body-main);
    --background-color-neutral: var(--body-light);
    --background-color-neutral-subtle: var(--body-mid);
    --color-base: var(--text-color);
    --color-subtle: var(--byline-color);
    --border-color-base: var(--body-border);
    --border-color-emphasized: var(--body-border);
    --color-progressive: var(--button-background);
    --color-progressive--hover: #7e6e58;

    /* Force light mode */
    color-scheme: light !important;
}

/* --- 2. PAGE BACKGROUND with banner fading down --- */
body.skin-vector-2022 {
    background-color: var(--body-background-color) !important;
    background-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 180px,
            var(--body-background-color) 340px
        ),
        var(--body-background-image) !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: 100% auto !important;
}

/* --- 3. CLEAR #mw-page-base (like OSRS does) --- */
#mw-page-base {
    background: none !important;
}

/* --- 4. TRANSPARENT HEADER so banner shows through --- */
body.skin-vector-2022 .vector-header-container,
body.skin-vector-2022 .mw-header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.skin-vector-2022 .vector-header-start,
body.skin-vector-2022 .vector-header-end {
    background: transparent !important;
}

/* Logo text hidden, show icon only */
body.skin-vector-2022 .mw-logo-container {
    display: none !important;
}

/* User links — white text over banner */
body.skin-vector-2022 .vector-user-links a,
body.skin-vector-2022 #pt-createaccount a,
body.skin-vector-2022 #pt-login a {
    color: #f5e8c8 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
}

/* Search box */
body.skin-vector-2022 .cdx-text-input__input,
body.skin-vector-2022 #searchInput {
    background-color: var(--search-box) !important;
    border-color: var(--body-border) !important;
    color: var(--text-color) !important;
}

/* --- 5. PAGE TOOLBAR TABS (Article | Discussion | Read | Edit...) --- */
body.skin-vector-2022 .vector-page-toolbar {
    background: rgba(15, 10, 3, 0.5) !important;
    border-bottom: 1px solid rgba(200,160,80,0.3) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

body.skin-vector-2022 .vector-page-toolbar-container {
    background: transparent !important;
}

body.skin-vector-2022 #p-associated-pages a,
body.skin-vector-2022 #p-views a,
body.skin-vector-2022 #p-cactions a {
    color: #f0ddb0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
    background: transparent !important;
}

body.skin-vector-2022 #ca-nstab-main.selected a,
body.skin-vector-2022 .selected.vector-tab-noicon a {
    color: #ffd700 !important;
    border-bottom: 2px solid #ffd700 !important;
    font-weight: bold !important;
}

/* --- 6. PAGE CONTAINER - transparent so background shows --- */
body.skin-vector-2022 .mw-page-container,
body.skin-vector-2022 .mw-page-container-inner {
    background: transparent !important;
    max-width: none !important;
}

/* --- 7. LEFT SIDEBAR NAVIGATION --- */
body.skin-vector-2022 .vector-column-start,
body.skin-vector-2022 .vector-main-menu-container,
body.skin-vector-2022 #vector-main-menu,
body.skin-vector-2022 #mw-panel {
    background: transparent !important;
}

body.skin-vector-2022 .vector-menu-heading {
    color: var(--background-text-color) !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 1px solid var(--body-border) !important;
    padding-bottom: 2px !important;
    margin-bottom: 4px !important;
}

body.skin-vector-2022 .vector-menu-content-list li a {
    color: var(--background-link-color) !important;
    font-size: 0.9em !important;
}

body.skin-vector-2022 .vector-menu-content-list li a:hover {
    color: var(--link-color) !important;
    text-decoration: underline !important;
}

/* --- 8. MAIN CONTENT BODY (exactly like OSRS .mw-body rule) --- */
body.skin-vector-2022 #content.mw-body {
    background-color: var(--body-main) !important;
    color: var(--text-color) !important;
    border-color: transparent !important;
    box-shadow: 0 0 7px rgba(0,0,0,0.15) !important;
    margin-top: 0 !important;
}

body.skin-vector-2022 .mw-content-container {
    background: transparent !important;
}

/* --- 9. HEADINGS --- */
body.skin-vector-2022 .mw-body h1,
body.skin-vector-2022 .mw-body .mw-heading1,
body.skin-vector-2022 .mw-body-content h1,
body.skin-vector-2022 .mw-body-content h2,
body.skin-vector-2022 .mw-body-content h3,
body.skin-vector-2022 .mw-body-content h4,
body.skin-vector-2022 .mw-body-content h5,
body.skin-vector-2022 .mw-body-content h6 {
    font-family: 'PT Serif', 'Palatino', 'Georgia', serif !important;
    color: var(--text-color) !important;
}

body.skin-vector-2022 h1, body.skin-vector-2022 h2 {
    border-color: var(--sidebar) !important;
}

/* --- 10. LINKS --- */
body.skin-vector-2022 a,
body.skin-vector-2022 a:visited,
body.skin-vector-2022 a:active,
body.skin-vector-2022 a:hover {
    color: var(--link-color) !important;
}

body.skin-vector-2022 a.new {
    color: var(--redlink-color) !important;
}

/* --- 11. HIDE MAIN PAGE TITLE --- */
body.skin-vector-2022.page-Main_Page .mw-first-heading,
body.skin-vector-2022.page-Main_Page #firstHeading {
    display: none !important;
}

/* --- 12. HIDE APPEARANCE PANEL --- */
body.skin-vector-2022 .vector-appearance-landmark,
body.skin-vector-2022 #vector-appearance-dropdown {
    display: none !important;
}

/* --- 13. WIKITABLE (following OSRS .wikitable pattern) --- */
body.skin-vector-2022 .wikitable {
    background: var(--body-light) !important;
    color: var(--text-color) !important;
    border-color: var(--body-border) !important;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1) !important;
}

body.skin-vector-2022 .wikitable > * > tr > th {
    background-color: var(--body-dark) !important;
    color: var(--text-color) !important;
    border-color: var(--body-border) !important;
}

body.skin-vector-2022 .wikitable > * > tr > td {
    border-color: var(--body-border) !important;
}

/* --- 14. FOOTER --- */
body.skin-vector-2022 .mw-footer {
    color: var(--background-text-color) !important;
}

body.skin-vector-2022 .mw-footer a,
body.skin-vector-2022 .mw-footer a:visited,
body.skin-vector-2022 .mw-footer a:hover {
    color: var(--background-link-color) !important;
}

/* --- 15. CATEGORY LINKS --- */
body.skin-vector-2022 .catlinks {
    background: var(--body-light) !important;
    border: 1px solid var(--body-dark) !important;
}
Retrieved from "https://windsofvalenwiki.com/index.php?title=MediaWiki:Vector-2022.css&oldid=507"