MediaWiki:Vector.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*— your colour variables —*/
:root {
--body-main: #e2dbc8;
--body-light: #d8ccb4;
--body-mid: #d0bd97;
--body-border: #94866d;
--background-link-color: #52351e;
/* …etc… */
}
/*— header gradient —*/
#mw-head {
position: relative;
overflow: hidden;
}
#mw-head::before {
content: "";
position: absolute;
top:0;left:0;right:0;height:250px;
background: linear-gradient(
to bottom,
rgba(226,219,200,0.95) 0%,
rgba(226,219,200,0) 100%
);
pointer-events: none;
z-index: 1;
}
#mw-head .mw-head-logo,
#mw-head .vector-menu {
position: relative; z-index:2;
}
/*— YOUR tabs overrides, using the *new* Vector class names —*/
.vector-menu-tabs-legacy {
background: var(--body-main);
border-bottom: none;
margin-bottom: 0;
padding: 0 .5em;
border-radius: .5em .5em 0 0;
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
}
.vector-menu-tabs-legacy > li > a {
background: var(--body-mid);
color: var(--background-link-color);
border: 1px solid var(--body-border);
border-bottom: none;
border-radius: .5em .5em 0 0;
margin-right: -1px;
padding: .5em 1em;
}
.vector-menu-tabs-legacy > li.selected > a {
background: #fff;
border-bottom: 1px solid #fff;
}
/*— kill the white “wrapper” and make the beige panel sit behind everything —*/
#mw-page-base { background: none; }
.vector-body .mw-body {
background-color: var(--body-main);
color: var(--text-color);
border-color: transparent;
box-shadow: 0 0 7px rgba(0,0,0,0.15);
margin-top: 0;
}
/*— fix the personal menu dropdown (“Edit source” / account) —*/
.vector-menu-dropdown .vector-menu-content {
background-color: var(--body-light);
border: 1px solid var(--body-border);
border-radius: 0 0 .5em .5em;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.vector-menu-dropdown .vector-menu-content::before,
.vector-menu-dropdown .vector-menu-content::after {
display: none;
}