Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

Maintenance script (talk | contribs)

1,990 edits
Perfect OSRS Layout Override
Definitive clean layout - OSRS style
Line 656: Line 656:
}
}


/* --- DESKTOP ONLY OSRS LAYOUT OVERRIDES --- */
 
 
/* ==========================================================================
  DEFINITIVE LAYOUT OVERRIDE - DO NOT ADD MORE BLOCKS BELOW THIS
  Goal: Match OSRS Wiki layout - art banner at top, tabs latched to content box
  ========================================================================== */
 
/* --- BODY: Solid beige canvas, banner only on desktop via body background --- */
body {
    background-image: none !important;
    background-color: #e1d5be !important;
}
 
/* --- HIDE native MediaWiki gradient containers completely --- */
#mw-page-base,
#mw-head-base {
    display: none !important;
    height: 0 !important;
}
 
/* ==========================================================================
  DESKTOP LAYOUT (min-width: 1000px)
  Structure:
    - body has the mystical banner as a 160px tall background-image
    - #mw-panel (sidebar) sits at top: 160px
    - #mw-head (tab bar) is absolute, top: ~120px (160px - 40px tab height)
    - #content gets margin-top: 160px to start right below the banner/tabs
  ========================================================================== */
@media screen and (min-width: 1000px) {
@media screen and (min-width: 1000px) {
     /* --- 21. Pixel-Perfect Content Latch --- */
     /* 1. Banner on body */
     #mw-page-base { position: absolute !important; }
    body {
    #content { margin-top: 61px !important; position: relative; z-index: 1; }
        background: url('/resources/assets/mystical_header.png') center top no-repeat !important;
   
        background-color: #e1d5be !important;
     /* --- 22. Fine-Tuned 4px Shift --- */
        background-size: 100% 160px !important;
     #content { margin-top: 65px !important; }
    }
    .vector-menu-tabs .vector-menu-content-list > li.selected { margin-bottom: -7px !important; }
 
   
    /* 2. Tab bar: absolute, sitting flush on top of content box */
     /* --- 23. Shift Header Up & Unify Left Padding --- */
    /* Tab bar is ~40px tall. Content starts at 160px. So tabs sit at top: 120px */
     #mw-head { margin-top: -30px !important; }
     #mw-head {
    #content { margin-top: 35px !important; }
        position: absolute !important;
     #left-navigation { margin-left: 175px !important; }
        top: 120px !important;
    #content { margin-left: 175px !important; }
        left: 0 !important;
     #mw-head::before { left: 175px !important; }
        right: 0 !important;
   
        width: 100% !important;
    /* --- 24. Fix Buttons Overlapping and Login Visibility --- */
        height: 40px !important;
    #p-personal { top: 35px !important; z-index: 100 !important; }
        margin: 0 !important;
     #left-navigation, #right-navigation { position: relative !important; z-index: 50 !important; }
        z-index: 50 !important;
    #content { position: relative !important; z-index: 1 !important; }
    }
   
 
     /* 3. Personal tools (login, create account) - top-right corner of page */
     #p-personal {
        position: fixed !important;
        top: 4px !important;
        right: 10px !important;
        z-index: 200 !important;
        margin: 0 !important;
    }
 
     /* 4. Left nav (tab row) and right nav (read/edit buttons) - inside mw-head */
     #left-navigation {
        position: absolute !important;
        bottom: 0 !important;
        left: 175px !important;
        margin: 0 !important;
        float: none !important;
        z-index: 2 !important;
    }
     #right-navigation {
        position: absolute !important;
        bottom: 0 !important;
        right: 10px !important;
        margin: 0 !important;
        float: none !important;
        z-index: 2 !important;
    }
 
    /* 5. Beige bar behind tabs */
     #mw-head::before {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 175px !important;
        right: 0 !important;
        height: 40px !important;
        background-color: #d8ccb4 !important;
        border-top: 1px solid #94866d !important;
        z-index: 0 !important;
    }
 
     /* 6. Content box: pushed down by banner height, left margin for sidebar */
    #content {
        margin-top: 160px !important;
        margin-left: 175px !important;
        position: relative !important;
        z-index: 1 !important;
        padding-top: 0 !important;
     }
     }
/* --- MOBILE ONLY FIXES --- */
 
    /* 7. Active tab latch over content border */
    .vector-menu-tabs .vector-menu-content-list > li.selected {
        margin-bottom: -3px !important;
        z-index: 3 !important;
    }
 
    /* 8. Logo sits in top-left spanning banner height */
    #p-logo {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 175px !important;
        height: 160px !important;
        z-index: 60 !important;
    }
    #p-logo a {
        height: 160px !important;
    }
 
    /* 9. Sidebar below banner */
    #mw-panel {
        position: absolute !important;
        top: 160px !important;
        left: 0 !important;
        width: 165px !important;
    }
}
 
/* ==========================================================================
  MOBILE LAYOUT (max-width: 999px)
  ========================================================================== */
@media screen and (max-width: 999px) {
@media screen and (max-width: 999px) {
     #mw-page-base { display: none !important; } /* Hide the banner image on small screens */
     body {
     #content { margin-top: 20px !important; margin-left: 10px !important; margin-right: 10px !important; }
        background-image: none !important;
     #mw-head::before { display: none !important; } /* Hide the beige tab bar on mobile */
        background-color: #e1d5be !important;
     .vector-menu-tabs .vector-menu-content-list > li { margin-bottom: 2px !important; }
    }
     #content {
        margin-top: 20px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
     #mw-head::before {
        display: none !important;
    }
    #mw-panel {
        position: static !important;
    }
     .vector-menu-tabs .vector-menu-content-list > li {
        margin-bottom: 2px !important;
    }
}
}


/* --- REMOVE SIDEBAR PORTAL BACKGROUND --- */
/* ==========================================================================
div.vector-menu-portal,  
  SIDEBAR PORTAL BACKGROUNDS
  ========================================================================== */
div.vector-menu-portal,
#mw-panel div.portal,
#mw-panel div.portal,
.portal,
.portal,
Line 696: Line 817:
}
}


/* MODERN DISCORD BUTTON OVERRIDE */
/* ==========================================================================
  DISCORD WIDGET
  ========================================================================== */
.discord-btn a {
.discord-btn a {
     background-color: #5865F2 !important;
     background-color: #5865F2 !important;
Line 711: Line 834:
     transform: translateY(-2px) !important;
     transform: translateY(-2px) !important;
}
}
/* NEW DISCORD WIDGET */
.discord-widget-modern {
.discord-widget-modern {
     position: relative;
     position: relative;
Line 747: Line 869:
     margin-right: 15px;
     margin-right: 15px;
}
}
.discord-text {
.discord-text { flex-grow: 1; }
    flex-grow: 1;
.discord-server-name { font-weight: 800; font-size: 17px; margin-bottom: 2px; }
}
.discord-join-text { font-size: 14px; }
.discord-server-name {
.discord-arrow { font-size: 28px; font-weight: bold; margin-left: 10px; line-height: 1; }
    font-weight: 800;
    font-size: 17px;
    margin-bottom: 2px;
}
.discord-join-text {
    font-size: 14px;
}
.discord-arrow {
    font-size: 28px;
    font-weight: bold;
    margin-left: 10px;
    line-height: 1;
}
.discord-bottom {
.discord-bottom {
     background-color: #4752C4;
     background-color: #4752C4;
Line 773: Line 882:
     transition: background-color 0.2s ease;
     transition: background-color 0.2s ease;
}
}
.discord-widget-modern:hover {
.discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; }
    background-color: #4752C4;
.discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; }
    cursor: pointer;
}
.discord-widget-modern:hover .discord-bottom {
    background-color: #3b45a5;
}
/* --- FORCE HIDE ALL LEGACY GRADIENTS --- */
#mw-page-base,
#mw-head-base {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    height: 0 !important;
}
/* --- PERFECT OSRS LAYOUT OVERRIDE --- */
@media screen and (min-width: 1000px) {
    /* 1. The Body Banner */
    body {
        background: url('/resources/assets/mystical_header.png') center top no-repeat !important;
        background-color: #e1d5be !important;
        background-size: 100% 180px !important;
    }
 
    /* 2. Hide Native Page Gradients */
    #mw-page-base, #mw-head-base {
        display: none !important;
        height: 0 !important;
    }
 
    /* 3. Push Content Down 180px */
    #content {
        margin-top: 180px !important;
        position: relative !important;
        z-index: 1 !important;
    }
 
    /* 4. Position the Tabs Exactly on top of Content */
    /* If #content starts at 180px, and tabs are 46px tall, they should start at 134px */
    #mw-head {
        position: absolute !important;
        top: 134px !important;
        height: 46px !important;
        width: 100% !important;
        margin: 0 !important;
    }
 
    /* 5. Personal tools (Login etc) should be moved up above the tabs */
    #p-personal {
        position: absolute !important;
        top: -30px !important;
        right: 15px !important;
        z-index: 100 !important;
    }
 
    /* 6. Fix the Beige Tab Bar background */
    #mw-head::before {
        bottom: 0 !important;
        height: 46px !important;
        z-index: 0 !important;
    }
 
    /* 7. Push the Sidebar down so it aligns with content */
    #mw-panel {
        top: 180px !important;
    }
 
    /* 8. Pull the Logo back up to the top */
    #p-logo {
        top: -180px !important;
        height: 180px !important;
    }
 
    /* 9. Make the active tab visually latch */
    .vector-menu-tabs .vector-menu-content-list > li.selected {
        margin-bottom: -3px !important;
        z-index: 2 !important;
    }
}
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"