MediaWiki:Vector.css

/* 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;
}