MediaWiki:Vector.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* CENTERED VECTOR LAYOUT */
+/* ============================== */
-/* ---------------------- */
+/* WIZLORDS VECTOR SKIN OVERRIDES */
+/* ============================== */
+/* CENTERED VECTOR VARIABLES */
+/* ------------------------- */
 :root {
 	--wiki-shell-width: 1350px;
 	--wiki-sidebar-width: 210px;
+	--wiki-content-width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
 	--wiki-shell-gap: max(0px, calc((100vw - var(--wiki-shell-width)) / 2));
 }
+/* PAGE BACKGROUND */
+/* --------------- */
 body.skin-vector-legacy {
 	background: #f5f3ee;
 }
-/* Sidebar sits at the top-left of the centred shell */
+/* VECTOR TOP BACKGROUND STRIPS */
+/* ---------------------------- */
+/* These are Vector's fake top background layers. They need to match the centred shell. */
+body.skin-vector-legacy #mw-page-base {
+	left: var(--wiki-shell-gap);
+	width: var(--wiki-shell-width);
+	margin-left: 0;
+	background: #fff;
+}
+body.skin-vector-legacy #mw-head-base {
+	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width));
+	width: var(--wiki-content-width);
+	margin-left: 0;
+	background: #fff;
+}
+/* LEFT SIDEBAR LAYOUT */
+/* ------------------- */
 body.skin-vector-legacy #mw-panel {
 	left: var(--wiki-shell-gap);
@@ Line 26: / Line 55: @@
 }
-/* Logo lives inside the sidebar */
+/* LEFT SIDEBAR LOGO */
+/* ----------------- */
 body.skin-vector-legacy #p-logo {
 	position: relative;
@@ Line 38: / Line 69: @@
 }
-/* Content begins beside the sidebar */
+/* MAIN CONTENT LAYOUT */
+/* ------------------- */
 body.skin-vector-legacy #content.mw-body {
 	margin-left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width));
-	width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
+	width: var(--wiki-content-width);
-	max-width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
+	max-width: var(--wiki-content-width);
 	box-sizing: border-box;
 	background: #fff;
 }
-/* Top head/navigation also begins beside sidebar */
+/* TOP NAVIGATION LAYOUT */
+/* --------------------- */
 body.skin-vector-legacy #mw-head {
-	position: absolute;
-	top: 0;
 	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width));
 	right: auto;
-	width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
+	width: var(--wiki-content-width);
-	box-sizing: border-box;
-	background: #fff;
-}
-/* Personal links stay inside centred shell */
-body.skin-vector-legacy #p-personal {
-	position: absolute;
-	top: 0;
-	right: var(--wiki-shell-gap);
-	width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
 	box-sizing: border-box;
 }
-/* Keep the content tabs/search inside the same shell */
 body.skin-vector-legacy #left-navigation {
 	left: 0;
@@ Line 76: / Line 98: @@
 }
-/* Sidebar link styling */
+/* PERSONAL LINKS LAYOUT */
+/* --------------------- */
+body.skin-vector-legacy #p-personal {
+	right: var(--wiki-shell-gap);
+}
+/* SIDEBAR LINK STYLING */
+/* -------------------- */
 body.skin-vector-legacy #mw-panel a {
 	color: #d08b00;
@@ Line 85: / Line 116: @@
 }
+body.skin-vector-legacy #mw-panel a:hover {
+	color: #ffb536;
+}
+/* SIDEBAR SECTION STYLING */
+/* ----------------------- */
 body.skin-vector-legacy #mw-panel .portal {
 	margin: 0 0 18px 0;
@@ Line 102: / Line 140: @@
 	padding: 0;
 	background: transparent;
+}
+/* PAGE TITLE TEXT RULES */
+/* --------------------- */
+body.skin-vector-legacy h1#firstHeading,
+body.skin-vector-legacy h1#firstHeading .mw-page-title-main {
+	font-family: Arial, Helvetica, sans-serif !important;
+	font-size: clamp(30px, 3.2vw, 42px) !important;
+	line-height: 1.1 !important;
+	font-weight: bold !important;
 }