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.
/* Define color and background image */
:root {
--body-background-color: #f5eddd;
--body-background-image: url("/resources/assets/bg.png");
--content-background-color: #fdf9f3;
--text-color: #2a2a2a;
}
/* Set the base background with image + color */
body {
background: var(--body-background-image) var(--body-background-color) top center / cover no-repeat;
background-attachment: fixed;
font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
color: var(--text-color);
}
/* Soft gradient overlay for image taper */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(245, 237, 221, 0.95) 0%,
rgba(245, 237, 221, 0.98) 30%,
rgba(245, 237, 221, 1) 70%,
rgba(245, 237, 221, 1) 100%
);
}
/* Optional vignette effect (fade to dark corners) */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%);
}
/* Unified content background box */
#content,
.mw-body,
.vector-body {
background-color: var(--content-background-color);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
padding: 1em;
}
/* Tabs and navigation bar matching content box */
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs li a,
.vector-menu-tabs .selected,
.vector-menu-tabs .selected a {
background-color: var(--content-background-color) !important;
color: var(--text-color) !important;
box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
}
/* Adjust tab hover effect */
.vector-menu-tabs li:not(.selected):hover {
background-color: #e8e1d5;
}