Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

Maintenance script (talk | contribs)

1,990 edits
Add full modern Discord widget CSS
Apply responsive mobile layout and remove sidebar background
Line 674: Line 674:
     background-image: none !important;
     background-image: none !important;
     background-color: #f1e7d3 !important;
     background-color: #f1e7d3 !important;
}
/* --- 21. Pixel-Perfect Content Latch --- */
/* Make the header banner absolute again so it doesn't push the content down 180px */
#mw-page-base {
    position: absolute !important;
}
}


/* Explicitly push the content down by EXACTLY the distance of the tabs (15px top + 46px bar = 61px)
/* --- DESKTOP ONLY OSRS LAYOUT OVERRIDES --- */
  so it latches perfectly onto the bottom of the navigation menu! */
@media screen and (min-width: 1000px) {
#content {
    /* --- 21. Pixel-Perfect Content Latch --- */
     margin-top: 61px !important;
    #mw-page-base { position: absolute !important; }
    position: relative;
     #content { margin-top: 61px !important; position: relative; z-index: 1; }
    z-index: 1; /* Sit under the tabs which are z-index 2 */
   
}
    /* --- 22. Fine-Tuned 4px Shift --- */
/* --- 22. Fine-Tuned 4px Shift --- */
    #content { margin-top: 65px !important; }
/* Push the content box down by 4 more pixels so the inactive tabs stop overlapping the border */
    .vector-menu-tabs .vector-menu-content-list > li.selected { margin-bottom: -7px !important; }
#content {
   
     margin-top: 65px !important;
    /* --- 23. Shift Header Up & Unify Left Padding --- */
    #mw-head { margin-top: -30px !important; }
    #content { margin-top: 35px !important; }
    #left-navigation { margin-left: 175px !important; }
    #content { margin-left: 175px !important; }
    #mw-head::before { left: 175px !important; }
   
    /* --- 24. Fix Buttons Overlapping and Login Visibility --- */
    #p-personal { top: 35px !important; z-index: 100 !important; }
    #left-navigation, #right-navigation { position: relative !important; z-index: 50 !important; }
    #content { position: relative !important; z-index: 1 !important; }
   
    /* --- 25. The Ultimate Absolute Header Reset --- */
    #mw-page-base { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 180px !important; }
    #mw-head { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 90px !important; margin: 0 !important; z-index: 50 !important; }
    #p-personal { position: absolute !important; top: 10px !important; right: 15px !important; margin: 0 !important; z-index: 100 !important; }
    #left-navigation { position: absolute !important; bottom: 0 !important; left: 175px !important; margin: 0 !important; float: none !important; }
    #right-navigation { position: absolute !important; bottom: 0 !important; right: 15px !important; margin: 0 !important; float: none !important; }
    #mw-head::before { content: ""; position: absolute !important; bottom: 0 !important; left: 175px !important; right: 0 !important; height: 46px !important; z-index: 0 !important; }
    #content { margin-top: 90px !important; margin-left: 175px !important; position: relative !important; z-index: 1 !important; }
     .vector-menu-tabs .vector-menu-content-list > li.selected { margin-bottom: -3px !important; }
}
}


/* Because the content box moved down 4px, we must stretch the active tab down by 4 more pixels
/* --- MOBILE ONLY FIXES --- */
  so it still seamlessly overlaps the dark brown border of the content box! */
@media screen and (max-width: 999px) {
.vector-menu-tabs .vector-menu-content-list > li.selected {
     #mw-page-base { display: none !important; } /* Hide the banner image on small screens */
     margin-bottom: -7px !important;
    #content { margin-top: 20px !important; margin-left: 10px !important; margin-right: 10px !important; }
}
    #mw-head::before { display: none !important; } /* Hide the beige tab bar on mobile */
/* --- 23. Shift Header Up & Unify Left Padding --- */
    .vector-menu-tabs .vector-menu-content-list > li { margin-bottom: 2px !important; }
/* The user requested #mw-head to move up. We apply the negative margin and move the content up equally */
#mw-head {
    margin-top: -30px !important;
}
#content {
    margin-top: 35px !important; /* Shifted up 30px from 65px to stay connected to the tabs */
}
}


/* Unify the left-side alignment of the beige bar, the tabs, and the main content box
/* --- REMOVE SIDEBAR PORTAL BACKGROUND --- */
  so the beige bar never sticks out to the left of the active tab. */
div.vector-menu-portal,
#left-navigation {
#mw-panel div.portal,
    margin-left: 175px !important;
.portal,
}
.mw-portlet {
#content {
     background-image: none !important;
    margin-left: 175px !important;
     background-color: transparent !important;
}
#mw-head::before {
     left: 175px !important;
}
/* --- 24. Fix Buttons Overlapping and Login Visibility --- */
/* Pull the login/register tools down so they don't disappear off the top of the screen */
#p-personal {
    top: 35px !important;  
     z-index: 100 !important;
}
}


/* Ensure the entire navigation block (tabs, search, buttons) strictly sits ON TOP of the content box.
  This prevents the content box from swallowing the Read/Edit buttons. */
#left-navigation,
#right-navigation {
    position: relative !important;
    z-index: 50 !important;
}
/* Ensure the content box is layered safely UNDER the navigation menu */
#content {
    position: relative !important;
    z-index: 1 !important;
}
/* --- 25. The Ultimate Absolute Header Reset --- */
/* Make page-base absolute so it stops interfering with vertical flow */
#mw-page-base {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 180px !important; /* Keep the sky banner 180px tall */
}
/* Hardcode the header container to exactly 90px tall at the top of the page */
#mw-head {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 90px !important;
    margin: 0 !important;
    z-index: 50 !important; /* Ensure header is always above content */
}
/* Force personal tools (login) to sit at the absolute top right, far away from tabs */
#p-personal {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    margin: 0 !important;
    z-index: 100 !important;
}
/* Force Left Navigation (Main Page tab) to sit at the absolute bottom left of the 90px header */
#left-navigation {
    position: absolute !important;
    bottom: 0 !important;
    left: 175px !important;
    margin: 0 !important;
    float: none !important;
}
/* Force Right Navigation (Read/Edit/Search) to sit at the absolute bottom right of the 90px header */
#right-navigation {
    position: absolute !important;
    bottom: 0 !important;
    right: 15px !important;
    margin: 0 !important;
    float: none !important;
}
/* Ensure the beige bar spans the entire width and anchors to the bottom */
#mw-head::before {
    content: "";
    position: absolute !important;
    bottom: 0 !important;
    left: 175px !important;
    right: 0 !important;
    height: 46px !important;
    z-index: 0 !important; /* Behind the tabs */
}
/* Push the content box down by exactly 90px so it latches perfectly to the header */
#content {
    margin-top: 90px !important;
    margin-left: 175px !important;
    position: relative !important;
    z-index: 1 !important; /* Safely under the header */
}
/* Reset the active tab overlap to the correct 3px now that everything is perfectly absolute */
.vector-menu-tabs .vector-menu-content-list > li.selected {
    margin-bottom: -3px !important;
}
/* MODERN DISCORD BUTTON OVERRIDE */
/* MODERN DISCORD BUTTON OVERRIDE */
.discord-btn a {
.discord-btn a {
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"