MediaWiki:Vector-2022.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.
/* ============================================================
WINDS OF VALEN WIKI — Vector 2022 Skin Overrides
OSRS-inspired parchment theme
============================================================ */
/* --- CSS Variables (OSRS palette) --- */
body.skin-vector-2022 {
--body-main: #e2dbc8;
--body-light: #d8ccb4;
--body-mid: #d0bd97;
--body-dark: #b8a282;
--body-border: #94866d;
--body-background-color: #c0a886;
--button-background: #605443;
--button-color: #fff;
--button-border: #3c352a;
--button-dark: #18140c;
--button-light: #3a301d;
--link-color: #936039;
--background-link-color: #52351e;
--text-color: #000;
--byline-color: #4c4c4c;
--subtle-color: #777;
--thumb-bg: var(--body-light);
--thumb-caption-bg: var(--body-mid);
}
/* --- Page background (gradient sky into parchment) --- */
body.skin-vector-2022 {
background-color: var(--body-main);
color: var(--text-color);
color-scheme: light;
}
/* --- Header banner with background image bleed --- */
body.skin-vector-2022 .vector-header,
body.skin-vector-2022 .mw-header {
background: linear-gradient(to bottom,
rgba(30, 24, 18, 0.92) 0%,
rgba(80, 60, 35, 0.78) 60%,
rgba(160, 120, 70, 0.55) 100%);
background-size: cover;
background-position: center top;
min-height: 54px;
}
/* --- Make the logo bigger in the top bar --- */
body.skin-vector-2022 #p-logo {
width: 66px !important;
padding: 6px 4px;
}
body.skin-vector-2022 #p-logo .mw-logo-icon {
width: 54px !important;
height: 54px !important;
}
/* --- Tab bar (Main page | Discussion) --- */
body.skin-vector-2022 .vector-page-tabs .mw-list-item a {
background: transparent;
border-bottom: none;
color: var(--body-main);
font-size: 0.82em;
letter-spacing: 0.02em;
}
body.skin-vector-2022 .vector-page-tabs .mw-list-item.selected a,
body.skin-vector-2022 .vector-page-tabs .mw-list-item a:hover {
color: #fff;
}
body.skin-vector-2022 .vector-page-toolbar {
background: rgba(30, 22, 12, 0.72);
border-bottom: 1px solid rgba(180, 140, 80, 0.45);
}
/* ============================================================
SIDEBAR — blend into the page like OSRS
============================================================ */
/* Kill the white background on the sidebar container */
body.skin-vector-2022 #vector-main-menu-pinned-container,
body.skin-vector-2022 .vector-main-menu,
body.skin-vector-2022 #vector-main-menu {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hide the "Main menu / hide" header — logo replaces it */
body.skin-vector-2022 .vector-pinnable-header {
display: none !important;
}
/* Section headings (Navigation, Guides, Community…) */
body.skin-vector-2022 .vector-main-menu .mw-portlet h3,
body.skin-vector-2022 #vector-main-menu .mw-portlet h3 {
font-family: 'PT Serif', Georgia, serif;
font-size: 0.83em;
font-weight: bold;
text-transform: none;
color: var(--text-color);
border: none;
border-bottom: 1px solid var(--body-border);
padding: 8px 12px 4px 12px;
margin: 6px 0 0 0;
background: none;
}
/* Nav links */
body.skin-vector-2022 .vector-main-menu .mw-portlet-body ul,
body.skin-vector-2022 #vector-main-menu .mw-portlet-body ul {
list-style: none;
margin: 0;
padding: 2px 0 6px 0;
}
body.skin-vector-2022 .vector-main-menu .mw-portlet-body ul li,
body.skin-vector-2022 #vector-main-menu .mw-portlet-body ul li {
margin: 0;
padding: 0;
}
body.skin-vector-2022 .vector-main-menu .mw-portlet-body ul li a,
body.skin-vector-2022 #vector-main-menu .mw-portlet-body ul li a {
display: block;
padding: 2px 12px;
color: var(--link-color);
font-size: 0.85em;
text-decoration: none;
line-height: 1.7;
}
body.skin-vector-2022 .vector-main-menu .mw-portlet-body ul li a:hover,
body.skin-vector-2022 #vector-main-menu .mw-portlet-body ul li a:hover {
color: var(--background-link-color);
text-decoration: underline;
}
/* Toolbox section */
body.skin-vector-2022 #vector-main-menu .mw-portlet-body {
padding: 0;
}
/* ============================================================
LOGO BANNER (injected via JS above sidebar)
============================================================ */
body.skin-vector-2022 .wov-sidebar-logo {
background: linear-gradient(160deg, #2c1d0d 0%, #4a3018 50%, #2c1d0d 100%);
border-bottom: 3px solid #8a6234;
padding: 20px 10px 16px;
text-align: center;
position: relative;
overflow: hidden;
}
body.skin-vector-2016 .wov-sidebar-logo::before,
body.skin-vector-2022 .wov-sidebar-logo::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(255,200,80,0.12) 0%, transparent 70%);
pointer-events: none;
}
body.skin-vector-2022 .wov-sidebar-logo a {
text-decoration: none;
}
body.skin-vector-2022 .wov-sidebar-logo img {
display: block;
margin: 0 auto 8px;
width: 72px;
height: 72px;
filter: drop-shadow(0 2px 8px rgba(255,190,60,0.35));
}
body.skin-vector-2022 .wov-sidebar-logo-title {
font-family: 'Cinzel', 'PT Serif', Georgia, serif;
font-size: 0.95em;
font-weight: 700;
color: #e8c878;
text-transform: uppercase;
letter-spacing: 1.5px;
text-shadow: 0 0 10px rgba(255,200,80,0.4), 0 1px 2px rgba(0,0,0,0.8);
line-height: 1.3;
}
body.skin-vector-2022 .wov-sidebar-logo-sub {
font-family: 'PT Serif', Georgia, serif;
font-size: 0.78em;
color: #c9a86c;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* ============================================================
DISCORD BUTTON (injected via JS below logo)
============================================================ */
body.skin-vector-2022 .wov-discord-btn {
padding: 8px 10px 6px;
}
body.skin-vector-2022 .wov-discord-btn a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #5865F2;
border: 1px solid #4752c4;
border-radius: 5px;
color: #fff !important;
font-size: 0.87em;
font-weight: bold;
padding: 7px 10px;
text-decoration: none !important;
transition: background 0.15s ease;
box-shadow: 0 2px 6px rgba(88,101,242,0.3);
}
body.skin-vector-2022 .wov-discord-btn a:hover {
background: #4752c4;
text-decoration: none !important;
}
body.skin-vector-2022 .wov-discord-btn svg {
flex-shrink: 0;
width: 20px;
height: 20px;
}
/* ============================================================
CONTENT AREA
============================================================ */
body.skin-vector-2022 .mw-body,
body.skin-vector-2022 #content {
background: var(--body-main);
border: 1px solid var(--body-border);
border-radius: 0;
}
/* Make wikitables look like OSRS */
body.skin-vector-2022 table.wikitable {
background-color: var(--body-light);
border: 1px solid var(--body-border);
color: var(--text-color);
}
body.skin-vector-2022 table.wikitable th {
background-color: var(--body-dark);
border: 1px solid var(--body-border);
color: var(--text-color);
}
body.skin-vector-2022 table.wikitable td {
background-color: var(--body-main);
border: 1px solid var(--body-border);
}
/* Links */
body.skin-vector-2022 a {
color: var(--link-color);
}
body.skin-vector-2022 a:hover {
color: var(--background-link-color);
}
/* Headings */
body.skin-vector-2022 h1,
body.skin-vector-2022 h2,
body.skin-vector-2022 h3 {
font-family: 'PT Serif', Georgia, serif;
border-bottom-color: var(--body-border);
}