Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

Maintenance script (talk | contribs)

933 edits
Definitive clean layout - OSRS style
Fresh layout rebuild - OSRS style from scratch
Line 619: Line 619:
     margin-top: 48px !important; /* Push it down below the beige header bar */
     margin-top: 48px !important; /* Push it down below the beige header bar */
}
}
/* --- 19. Fix Header Banner & Solid Body Canvas --- */
/* Move the banner image from the body to the dedicated #mw-page-base container.
  This explicitly crops the image to the header height (hiding the watermark)
  and prevents it from fading or bleeding down behind the main content area. */
#mw-page-base {
    background-image: none !important;
    background-size: cover !important;
    height: 180px !important;
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}


/* Ensure the body is strictly a solid beige color, with NO background image */
/* ==========================================================================
  CLEAN LAYOUT SYSTEM - Rebuilt from scratch to match OSRS Wiki
 
  Vector Legacy DOM order:
    #mw-page-base  (empty div, used for background)
    #mw-head-base  (empty div, hide it)
    #content      (article body)
    #mw-navigation
      #mw-head    (tab bar, search, personal tools)
      #mw-panel    (sidebar + logo)
 
  Goal: banner spans top 160px, sidebar/logo overlaps banner from left,
        tabs sit at bottom of banner and latch onto content box border,
        content starts at 160px.
  ========================================================================== */
 
/* --- Body: solid beige canvas, no image --- */
body {
body {
    background: #e1d5be !important;
     background-image: none !important;
     background-image: none !important;
    background-color: #e1d5be !important;
}
}


/* Make sure the content box (#content) has a solid background so it doesn't look faded */
/* --- mw-page-base: this is the banner. Vector Legacy already positions it absolute. --- */
#content {
    background-color: #f1e7d3 !important;
}
/* --- 20. Final Layout Fixes --- */
/* Remove absolute positioning from mw-page-base so it actually pushes the content down below the header again */
#mw-page-base {
#mw-page-base {
     position: static !important;
     position: absolute !important;
}
    top: 0 !important;
 
    left: 0 !important;
/* Ensure the main content box does NOT use the mountain background image, and is strictly solid beige */
    right: 0 !important;
#content {
     width: 100% !important;
     background-image: none !important;
     height: 160px !important;
     background-color: #f1e7d3 !important;
    background: url('/resources/assets/mystical_header.png') center top no-repeat !important;
}
    background-size: 100% 160px !important;
 
    background-color: transparent !important;
 
     z-index: 0 !important;
 
     display: block !important;
/* ==========================================================================
  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-head-base: hide the legacy gradient overlay --- */
#mw-page-base,
#mw-head-base {
#mw-head-base {
     display: none !important;
     display: none !important;
    height: 0 !important;
}
}


/* ==========================================================================
/* ==========================================================================
   DESKTOP LAYOUT (min-width: 1000px)
   DESKTOP LAYOUT (>= 1000px wide)
  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) {
    /* 1. Banner on body */
    body {
        background: url('/resources/assets/mystical_header.png') center top no-repeat !important;
        background-color: #e1d5be !important;
        background-size: 100% 160px !important;
    }


     /* 2. Tab bar: absolute, sitting flush on top of content box */
     /* --- mw-head: the tab bar row ---
    /* Tab bar is ~40px tall. Content starts at 160px. So tabs sit at top: 120px */
      Banner = 160px. Tab bar is ~40px tall.
      Position it at top: 120px so tabs sit at the bottom of the banner. */
     #mw-head {
     #mw-head {
         position: absolute !important;
         position: absolute !important;
Line 699: Line 675:
         left: 0 !important;
         left: 0 !important;
         right: 0 !important;
         right: 0 !important;
        height: 40px !important;
         width: 100% !important;
         width: 100% !important;
        height: 40px !important;
         margin: 0 !important;
         margin: 0 !important;
        padding: 0 !important;
         z-index: 50 !important;
         z-index: 50 !important;
     }
     }


     /* 3. Personal tools (login, create account) - top-right corner of page */
     /* --- Beige bar that runs behind the tabs --- */
     #p-personal {
     #mw-head::before {
         position: fixed !important;
        content: "" !important;
         top: 4px !important;
        display: block !important;
         right: 10px !important;
         position: absolute !important;
         z-index: 200 !important;
        bottom: 0 !important;
         margin: 0 !important;
         left: 165px !important;
         right: 0 !important;
        height: 40px !important;
        background-color: #d8ccb4 !important;
         border-top: 2px solid #3d2b1f !important;
         z-index: 0 !important;
     }
     }


     /* 4. Left nav (tab row) and right nav (read/edit buttons) - inside mw-head */
     /* --- Tab navigation: left side (Main Page, Discussion) --- */
     #left-navigation {
     #left-navigation {
         position: absolute !important;
         position: absolute !important;
         bottom: 0 !important;
         bottom: 0 !important;
         left: 175px !important;
         left: 165px !important;
         margin: 0 !important;
         margin: 0 !important;
         float: none !important;
         float: none !important;
         z-index: 2 !important;
         z-index: 2 !important;
     }
     }
    /* --- Tab navigation: right side (Read, Edit, Search) --- */
     #right-navigation {
     #right-navigation {
         position: absolute !important;
         position: absolute !important;
         bottom: 0 !important;
         bottom: 0 !important;
         right: 10px !important;
         right: 0 !important;
         margin: 0 !important;
         margin: 0 !important;
         float: none !important;
         float: none !important;
Line 732: Line 716:
     }
     }


     /* 5. Beige bar behind tabs */
     /* --- Personal tools (Create account / Log in) - top right corner --- */
     #mw-head::before {
     #p-personal {
        content: "" !important;
         position: absolute !important;
         position: absolute !important;
         bottom: 0 !important;
         top: -90px !important;
         left: 175px !important;
         right: 10px !important;
         right: 0 !important;
         margin: 0 !important;
         height: 40px !important;
         z-index: 200 !important;
         background-color: #d8ccb4 !important;
    }
         border-top: 1px solid #94866d !important;
    #p-personal ul {
         z-index: 0 !important;
         background-color: transparent !important;
         border: none !important;
         padding: 0 !important;
     }
     }


     /* 6. Content box: pushed down by banner height, left margin for sidebar */
     /* --- Content box: starts exactly at bottom of banner --- */
     #content {
     #content {
        margin-top: 160px !important;
        margin-left: 175px !important;
         position: relative !important;
         position: relative !important;
         z-index: 1 !important;
         z-index: 1 !important;
        margin-top: 160px !important;
        margin-left: 165px !important;
         padding-top: 0 !important;
         padding-top: 0 !important;
     }
     }


     /* 7. Active tab latch over content border */
     /* --- Active tab: pulls down 3px to merge with content box top border --- */
     .vector-menu-tabs .vector-menu-content-list > li.selected {
     .vector-menu-tabs .vector-menu-content-list > li.selected {
         margin-bottom: -3px !important;
         margin-bottom: -3px !important;
         z-index: 3 !important;
         z-index: 3 !important;
        position: relative !important;
     }
     }


     /* 8. Logo sits in top-left spanning banner height */
     /* --- Sidebar panel: sits at top:0 so logo naturally overlaps the banner --- */
     #p-logo {
     #mw-panel {
         position: absolute !important;
         position: absolute !important;
         top: 0 !important;
         top: 0 !important;
         left: 0 !important;
         left: 0 !important;
         width: 175px !important;
         width: 165px !important;
        padding-top: 0 !important;
        z-index: 10 !important;
    }
 
    /* --- Logo: spans the full banner height (160px) --- */
    #p-logo {
         height: 160px !important;
         height: 160px !important;
         z-index: 60 !important;
         display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
     }
     }
     #p-logo a {
     #p-logo a {
        display: block !important;
        width: 100% !important;
         height: 160px !important;
         height: 160px !important;
    }
        background-position: center center !important;
 
         background-size: contain !important;
    /* 9. Sidebar below banner */
    #mw-panel {
        position: absolute !important;
         top: 160px !important;
        left: 0 !important;
        width: 165px !important;
     }
     }
}
}


/* ==========================================================================
/* ==========================================================================
   MOBILE LAYOUT (max-width: 999px)
   MOBILE LAYOUT (< 1000px wide)
   ========================================================================== */
   ========================================================================== */
@media screen and (max-width: 999px) {
@media screen and (max-width: 999px) {
     body {
     body {
         background-image: none !important;
         background: #e1d5be !important;
         background-color: #e1d5be !important;
    }
    #mw-page-base {
         display: none !important;
     }
     }
     #content {
     #content {
Line 794: Line 788:
         margin-left: 10px !important;
         margin-left: 10px !important;
         margin-right: 10px !important;
         margin-right: 10px !important;
        padding-top: 10px !important;
    }
    #mw-head {
        position: static !important;
        top: auto !important;
     }
     }
     #mw-head::before {
     #mw-head::before {
Line 800: Line 799:
     #mw-panel {
     #mw-panel {
         position: static !important;
         position: static !important;
    }
    #p-logo {
        height: auto !important;
     }
     }
     .vector-menu-tabs .vector-menu-content-list > li {
     .vector-menu-tabs .vector-menu-content-list > li {
Line 820: Line 822:
   DISCORD WIDGET
   DISCORD WIDGET
   ========================================================================== */
   ========================================================================== */
.discord-btn a {
    background-color: #5865F2 !important;
    padding: 12px 20px !important;
    font-size: 1.05em !important;
    border: none !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease-in-out !important;
}
.discord-btn a:hover {
    background-color: #4752C4 !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}
.discord-widget-modern {
.discord-widget-modern {
     position: relative;
     position: relative;
Line 850: Line 838:
     text-decoration: none !important;
     text-decoration: none !important;
}
}
.discord-click-target {
.discord-click-target { display: block; width: 100%; height: 100%; }
    display: block;
.discord-top { padding: 16px 20px; display: flex; align-items: center; }
    width: 100%;
    height: 100%;
}
.discord-top {
    padding: 16px 20px;
    display: flex;
    align-items: center;
}
.discord-icon {
.discord-icon {
     width: 45px;
     width: 45px; height: 35px;
    height: 35px;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" fill="%23ffffff"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c0,0,.04-.06.05-.09,2.7-27.14-2.88-51.52-19-72.06ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.31,60,73.31,53s5-12.74,11.43-12.74S96.2,46,96.09,53,91.04,65.69,84.69,65.69Z"/></svg>');
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" fill="%23ffffff"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c0,0,.04-.06.05-.09,2.7-27.14-2.88-51.52-19-72.06ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.31,60,73.31,53s5-12.74,11.43-12.74S96.2,46,96.09,53,91.04,65.69,84.69,65.69Z"/></svg>');
     background-size: contain;
     background-size: contain; background-repeat: no-repeat; background-position: center;
    background-repeat: no-repeat;
    background-position: center;
     margin-right: 15px;
     margin-right: 15px;
}
}
Line 874: Line 851:
.discord-arrow { font-size: 28px; font-weight: bold; margin-left: 10px; line-height: 1; }
.discord-arrow { font-size: 28px; font-weight: bold; margin-left: 10px; line-height: 1; }
.discord-bottom {
.discord-bottom {
     background-color: #4752C4;
     background-color: #4752C4; padding: 10px; text-align: center;
    padding: 10px;
     font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
    text-align: center;
     font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
     transition: background-color 0.2s ease;
     transition: background-color 0.2s ease;
}
}
.discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; }
.discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; }
.discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; }
.discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; }
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"