MediaWiki:Vector-2022.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 WIKI - Fantasy Theme
   Targeting MediaWiki 1.46 / Vector 2022 skin
   =======================================================
   
   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 ---- */
:root {
    color-scheme: light !important;
}

/* ---- 2. PAGE BACKGROUND - the banner sits on html ---- */
html {
    background-color: #c9b99a !important;
    background-image:
        linear-gradient(to bottom, transparent 0%, transparent 200px, #c9b99a 340px),
        url('/images/valen_banner.png') !important;
    background-size: cover !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

body {
    background: transparent !important;
    min-height: 100vh;
}

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

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

/* ---- 4. LOGO TEXT - hide wordmark, keep icon ---- */
.mw-logo-wordmark,
.mw-logo-tagline {
    display: none !important;
}
.mw-logo-container.skin-invert {
    display: none !important;
}

/* ---- 5. USER LINKS (top right) ---- */
.vector-user-links a,
#pt-createaccount a,
#pt-login a,
#pt-anonuserpage a,
#pt-anontalk a,
#pt-anoncontribs a {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.85) !important;
}

/* ---- 6. SEARCH BOX ---- */
.cdx-text-input__input,
#searchInput,
.vector-search-box input {
    background-color: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.3) !important;
    color: #332717 !important;
}

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

/* ---- 8. SIDEBAR ---- */
.vector-column-start,
.vector-main-menu-container,
#mw-panel,
#mw-navigation {
    background: transparent !important;
}
.vector-menu-heading {
    color: #f5e6c8 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !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;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
}
.vector-menu-content-list li a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ---- 9. CONTENT CONTAINER ---- */
.mw-content-container {
    background: transparent !important;
}

/* ---- 10. MAIN CONTENT BODY - the actual article box ---- */
#content.mw-body {
    background-color: #e8dcc4 !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) ---- */
.vector-page-toolbar {
    background: rgba(20, 12, 4, 0.5) !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 {
    background: transparent !important;
}

/* Tab links */
#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;
    border-bottom: none !important;
}

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

/* ---- 12. TEXT CONTENT ---- */
h1.firstHeading, .mw-first-heading {
    color: #332717 !important;
    border-bottom: 2px solid #9e8c74 !important;
    font-family: 'Georgia', serif !important;
}

h2, h3, h4, h5, h6 {
    color: #332717 !important;
    border-bottom-color: #b5a48a !important;
}

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

/* ---- 13. HIDE MAIN PAGE H1 ---- */
.page-Main_Page .mw-first-heading,
.page-Main_Page #firstHeading {
    display: none !important;
}

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

/* ---- 15. TABLES ---- */
table.wikitable {
    background-color: #e8dcc4 !important;
    border-color: #9e8c74 !important;
    color: #332717 !important;
}
table.wikitable > * > tr > th {
    background-color: #c9b99a !important;
    color: #332717 !important;
}
table.wikitable > * > tr:nth-child(even) > td {
    background-color: #ddd0b8 !important;
}

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