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

/* 1. Reset default Vector background strips completely */
body {
    background-image: none !important;
    background-color: #f4f1ea !important; /* Base site color below the header */
}
#mw-page-base {
    height: 160px !important; /* Determines the precise vertical thickness of your banner */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Embed the banner art strictly inside Vector's native top slice */
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('https://pbs.twimg.com/profile_banners/2049672463005474816/1778779323') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
#mw-head-base {
    background-image: none !important;
    background-color: transparent !important;
    margin-top: -160px !important; /* Keeps structural elements perfectly tracked */
    height: 160px !important;
}

/* 2. Fix the Logo to Layer on Top of the Banner */
#p-logo {
    position: absolute !important;
    top: -160px !important; /* Pulls the logo up into the active banner space */
    left: 0 !important;
    z-index: 100 !important; /* Guarantees it overlays cleanly on top of the art */
    height: 160px !important;
}

/* 3. Re-align elements inside the header so they sit cleanly */
#mw-head {
    top: 0 !important;
    position: relative !important;
}
#right-navigation, #left-navigation {
    margin-top: 110px !important; /* Positions your action buttons/tabs near the bottom edge of your banner */
}
#p-personal {
    top: 10px !important; /* Keeps your user utility items (Login, Talk, Preferences) neatly at the top right */
}

/* 4. Formatting header elements for maximum contrast */
#p-personal ul li a,
.vectorTabs li a,
#p-search h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 5. Clean up tab containers so background gradients don't block your art */
.vectorTabs, .vectorTabs li, .vectorTabs li a {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
}

/* 6. Simple indicator overlay for active navigation elements */
.vectorTabs li.selected a {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px;
    color: #ffffff !important;
}