MediaWiki:Common.css: Difference between revisions
Revert absolute header layout and remove legacy background |
Perfect OSRS Layout Override |
||
| Line 787: | Line 787: | ||
background-color: transparent !important; | background-color: transparent !important; | ||
height: 0 !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; | |||
} | |||
} | } | ||