MediaWiki:Common.css: Difference between revisions
Style tabs to match OSRS Wiki and sit flush on content box |
Add OSRS full-width header bar behind tabs |
||
| Line 456: | Line 456: | ||
background-color: #efeee6 !important; | background-color: #efeee6 !important; | ||
border: 1px solid #94866d !important; | border: 1px solid #94866d !important; | ||
} | |||
/* --- 10. OSRS Full-Width Header Bar --- */ | |||
/* Create the continuous beige bar behind the tabs */ | |||
#mw-head::before { | |||
content: ""; | |||
position: absolute; | |||
bottom: 0; | |||
left: 170px; /* Starts just right of the logo */ | |||
right: 0; | |||
height: 38px; /* Matches tab height */ | |||
background-color: #d8ccb4; /* Darker parchment */ | |||
border-top: 1px solid #94866d; | |||
z-index: 0; | |||
} | |||
/* Ensure navigation sits on top of the pseudo-element bar */ | |||
#left-navigation, | |||
#right-navigation { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
/* Force transparency on all Vector legacy header backgrounds so the beige bar shows through */ | |||
#mw-head-base, | |||
.vector-menu-tabs, | |||
.vector-menu-tabs ul, | |||
.vector-menu-tabs li, | |||
#p-views, | |||
#p-cactions, | |||
#p-search, | |||
#p-personal { | |||
background-image: none !important; | |||
background-color: transparent !important; | |||
} | |||
/* Re-apply the specific tab backgrounds we WANT */ | |||
.vector-menu-tabs .vector-menu-content-list > li { | |||
background-color: #cfc08d !important; /* Inactive tab */ | |||
} | |||
.vector-menu-tabs .vector-menu-content-list > li.selected { | |||
background-color: #f1e7d3 !important; /* Active tab */ | |||
} | |||
/* Personal tools (top right: Create account, Log in) */ | |||
#p-personal { | |||
top: -20px !important; /* Push it up into the mushroom background */ | |||
} | |||
#p-personal ul { | |||
background-color: rgba(241, 231, 211, 0.85); /* Semi-transparent parchment */ | |||
padding: 4px 10px; | |||
border-radius: 4px; | |||
border: 1px solid #b3a07d; | |||
} | |||
#p-personal li a { | |||
color: #4a3c28 !important; | |||
font-weight: bold; | |||
} | } | ||