Winds Of Valen Wiki

MediaWiki:Vector-2022.css: Difference between revisions

Newer edit →

Maintenance script (talk | contribs)

937 edits
Winds of Valen theme
 
WoV OSRS theme v3 - based on OSRS CSS patterns
Line 1: Line 1:
/* =======================================================
/* ============================================================
   WINDS OF VALEN WIKI - Fantasy Theme
   WINDS OF VALEN WIKI — OSRS-Inspired Theme v3
   Targeting MediaWiki 1.46 / Vector 2022 skin
   Based on the official OSRS Wiki CSS variable pattern.
   =======================================================
   ============================================================ */
 
  KEY DOM STRUCTURE (Vector 2022):
 
  <div class="vector-header-container">
    <header class="vector-header mw-header">
      <div class="vector-header-start"> ... logo ... </div>
      <div class="vector-header-end"> ... search ... user links ... </div>
    </header>
  </div>
  <div class="mw-page-container">
    <div class="mw-page-container-inner">
      <div class="vector-column-start">  <-- sidebar -->
      <div class="mw-content-container">
        <main id="content" class="mw-body">
          <div class="vector-page-toolbar"> <-- tabs row -->
*/


/* ---- 1. FORCE LIGHT MODE ---- */
/* --- 1. COLOR SYSTEM (following OSRS CSS variable pattern) --- */
:root {
: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;
     color-scheme: light !important;
}
}


/* ---- 2. PAGE BACKGROUND - the banner sits on html ---- */
/* --- 2. PAGE BACKGROUND with banner fading down --- */
html {
body.skin-vector-2022 {
     background-color: #c9b99a !important;
     background-color: var(--body-background-color) !important;
     background-image:
     background-image:
         linear-gradient(to bottom, transparent 0%, transparent 200px, #c9b99a 340px),
         linear-gradient(
         url('/images/valen_banner.png') !important;
            to bottom,
     background-size: cover !important;
            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-position: top center !important;
     background-repeat: no-repeat !important;
     background-size: 100% auto !important;
    background-attachment: scroll !important;
}
}


body {
/* --- 3. CLEAR #mw-page-base (like OSRS does) --- */
     background: transparent !important;
#mw-page-base {
    min-height: 100vh;
     background: none !important;
}
}


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


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


/* ---- 4. LOGO TEXT - hide wordmark, keep icon ---- */
/* Logo text hidden, show icon only */
.mw-logo-wordmark,
body.skin-vector-2022 .mw-logo-container {
.mw-logo-tagline {
     display: none !important;
     display: none !important;
}
}
.mw-logo-container.skin-invert {
 
     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;
}
}


/* ---- 5. USER LINKS (top right) ---- */
/* Search box */
.vector-user-links a,
body.skin-vector-2022 .cdx-text-input__input,
#pt-createaccount a,
body.skin-vector-2022 #searchInput {
#pt-login a,
    background-color: var(--search-box) !important;
#pt-anonuserpage a,
     border-color: var(--body-border) !important;
#pt-anontalk a,
     color: var(--text-color) !important;
#pt-anoncontribs a {
     color: #fff !important;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.85) !important;
}
}


/* ---- 6. SEARCH BOX ---- */
/* --- 5. PAGE TOOLBAR TABS (Article | Discussion | Read | Edit...) --- */
.cdx-text-input__input,
body.skin-vector-2022 .vector-page-toolbar {
#searchInput,
     background: rgba(15, 10, 3, 0.5) !important;
.vector-search-box input {
     border-bottom: 1px solid rgba(200,160,80,0.3) !important;
     background-color: rgba(255,255,255,0.85) !important;
     backdrop-filter: blur(3px) !important;
     border-color: rgba(0,0,0,0.3) !important;
    -webkit-backdrop-filter: blur(3px) !important;
     color: #332717 !important;
}
}


/* ---- 7. PAGE CONTAINER - transparent background ---- */
body.skin-vector-2022 .vector-page-toolbar-container {
.mw-page-container,
.mw-page-container-inner {
     background: transparent !important;
     background: transparent !important;
}
}


/* ---- 8. SIDEBAR ---- */
body.skin-vector-2022 #p-associated-pages a,
.vector-column-start,
body.skin-vector-2022 #p-views a,
.vector-main-menu-container,
body.skin-vector-2022 #p-cactions a {
#mw-panel,
    color: #f0ddb0 !important;
#mw-navigation {
    text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
     background: transparent !important;
     background: transparent !important;
}
}
.vector-menu-heading {
 
     color: #f5e6c8 !important;
body.skin-vector-2022 #ca-nstab-main.selected a,
     text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !important;
body.skin-vector-2022 .selected.vector-tab-noicon a {
     color: #ffd700 !important;
     border-bottom: 2px solid #ffd700 !important;
     font-weight: bold !important;
     font-weight: bold !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
}
.vector-menu-content-list li a {
 
     color: #f0ddb0 !important;
/* --- 6. PAGE CONTAINER - transparent so background shows --- */
     text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
body.skin-vector-2022 .mw-page-container,
body.skin-vector-2022 .mw-page-container-inner {
     background: transparent !important;
     max-width: none !important;
}
}
.vector-menu-content-list li a:hover {
 
    color: #fff !important;
/* --- 7. LEFT SIDEBAR NAVIGATION --- */
     text-decoration: underline !important;
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;
}
}


/* ---- 9. CONTENT CONTAINER ---- */
body.skin-vector-2022 .vector-menu-heading {
.mw-content-container {
    color: var(--background-text-color) !important;
     background: transparent !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;
}
}


/* ---- 10. MAIN CONTENT BODY - the actual article box ---- */
body.skin-vector-2022 .vector-menu-content-list li a {
#content.mw-body {
     color: var(--background-link-color) !important;
     background-color: #e8dcc4 !important;
     font-size: 0.9em !important;
    border: 1px solid #9e8c74 !important;
    border-radius: 4px !important;
    color: #332717 !important;
     box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    margin-top: 220px !important; /* push down below banner */
}
}


/* ---- 11. PAGE TOOLBAR (tabs row: Main Page | Discussion) ---- */
body.skin-vector-2022 .vector-menu-content-list li a:hover {
.vector-page-toolbar {
     color: var(--link-color) !important;
     background: rgba(20, 12, 4, 0.5) !important;
     text-decoration: underline !important;
    border-bottom: 1px solid rgba(255, 220, 150, 0.3) !important;
    backdrop-filter: blur(3px) !important;
     -webkit-backdrop-filter: blur(3px) !important;
}
}


.vector-page-toolbar-container {
/* --- 8. MAIN CONTENT BODY (exactly like OSRS .mw-body rule) --- */
     background: transparent !important;
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;
}
}


/* Tab links */
body.skin-vector-2022 .mw-content-container {
#p-associated-pages a,
#p-views a,
#p-cactions a {
    color: #f5e6c8 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
     background: transparent !important;
     background: transparent !important;
    border-bottom: none !important;
}
}


#ca-nstab-main.selected a,
/* --- 9. HEADINGS --- */
.selected.vector-tab-noicon a {
body.skin-vector-2022 .mw-body h1,
     color: #ffd700 !important;
body.skin-vector-2022 .mw-body .mw-heading1,
     border-bottom: 2px solid #ffd700 !important;
body.skin-vector-2022 .mw-body-content h1,
    font-weight: bold !important;
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;
}
}


/* ---- 12. TEXT CONTENT ---- */
body.skin-vector-2022 h1, body.skin-vector-2022 h2 {
h1.firstHeading, .mw-first-heading {
     border-color: var(--sidebar) !important;
     color: #332717 !important;
    border-bottom: 2px solid #9e8c74 !important;
    font-family: 'Georgia', serif !important;
}
}


h2, h3, h4, h5, h6 {
/* --- 10. LINKS --- */
     color: #332717 !important;
body.skin-vector-2022 a,
    border-bottom-color: #b5a48a !important;
body.skin-vector-2022 a:visited,
body.skin-vector-2022 a:active,
body.skin-vector-2022 a:hover {
     color: var(--link-color) !important;
}
}


a, a:link {
body.skin-vector-2022 a.new {
     color: #7a3c00 !important;
     color: var(--redlink-color) !important;
}
}
a:visited {
 
     color: #5c2c00 !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;
}
}


/* ---- 13. HIDE MAIN PAGE H1 ---- */
/* --- 12. HIDE APPEARANCE PANEL --- */
.page-Main_Page .mw-first-heading,
body.skin-vector-2022 .vector-appearance-landmark,
.page-Main_Page #firstHeading {
body.skin-vector-2022 #vector-appearance-dropdown {
     display: none !important;
     display: none !important;
}
}


/* ---- 14. HIDE APPEARANCE PANEL ---- */
/* --- 13. WIKITABLE (following OSRS .wikitable pattern) --- */
.vector-appearance-landmark,
body.skin-vector-2022 .wikitable {
#vector-appearance-dropdown {
    background: var(--body-light) !important;
     display: none !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;
}
}


/* ---- 15. TABLES ---- */
body.skin-vector-2022 .wikitable > * > tr > th {
table.wikitable {
     background-color: var(--body-dark) !important;
     background-color: #e8dcc4 !important;
     color: var(--text-color) !important;
     border-color: #9e8c74 !important;
     border-color: var(--body-border) !important;
     color: #332717 !important;
}
}
table.wikitable > * > tr > th {
 
     background-color: #c9b99a !important;
body.skin-vector-2022 .wikitable > * > tr > td {
    color: #332717 !important;
     border-color: var(--body-border) !important;
}
}
table.wikitable > * > tr:nth-child(even) > td {
 
     background-color: #ddd0b8 !important;
/* --- 14. FOOTER --- */
body.skin-vector-2022 .mw-footer {
     color: var(--background-text-color) !important;
}
}


/* ---- 16. FOOTER ---- */
body.skin-vector-2022 .mw-footer a,
footer.mw-footer, #footer {
body.skin-vector-2022 .mw-footer a:visited,
     background-color: #b5a48a !important;
body.skin-vector-2022 .mw-footer a:hover {
    border-top: 2px solid #9e8c74 !important;
     color: var(--background-link-color) !important;
    color: #5c4a30 !important;
}
}
footer.mw-footer a {
 
     color: #5c2c00 !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/w/MediaWiki:Vector-2022.css"