MediaWiki:Vector.css: Difference between revisions

← Older edit Newer edit →

@@ Line 9: / Line 9: @@
 	--wiki-shell-width: min(1350px, 100vw);
 	--wiki-sidebar-width: 210px;
-	--wiki-content-right-gap: 18px;
+	--wiki-content-width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
-	--wiki-content-width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width) - var(--wiki-content-right-gap));
-	--wiki-shell-gap: max(0px, calc((100vw - var(--wiki-shell-width)) / 2));
 	--wiki-head-height: 82px;
 	--wiki-user-row-top: 8px;
 	--wiki-nav-row-top: 42px;
+	--wiki-content-padding: 16px;
 }
-/* PAGE BACKGROUND */
+/* OUTER PAGE BACKGROUND */
-/* --------------- */
+/* --------------------- */
+/* This is the space outside the centred wiki body. */
+html {
+	background: #f5f3ee;
+}
+/* CENTERED BODY SHELL */
+/* ------------------- */
+/* The actual MediaWiki body becomes the centred site container. */
 body.skin-vector-legacy {
-	background: #f5f3ee;
+	position: relative;
+	width: var(--wiki-shell-width);
+	min-height: 100vh;
+	margin: 0 auto !important;
+	padding: 0 !important;
+	background: transparent;
+	overflow-x: visible;
 }
@@ Line 27: / Line 41: @@
 /* DISABLE VECTOR'S FAKE BACKGROUND STRIPS */
 /* --------------------------------------- */
-/* These are decorative Vector layout layers. We are replacing them with our own layout. */
 body.skin-vector-legacy #mw-page-base,
 body.skin-vector-legacy #mw-head-base {
@@ Line 38: / Line 51: @@
 body.skin-vector-legacy #mw-panel {
 	position: absolute !important;
-	left: var(--wiki-shell-gap) !important;
+	left: 0 !important;
 	top: 0 !important;
 	width: var(--wiki-sidebar-width) !important;
@@ Line 69: / Line 82: @@
 /* TOP HEAD BAR */
 /* ------------ */
-/* This is the full head/navigation area to the right of the sidebar. */
+/* The header starts beside the sidebar and spans the same width as the content body. */
 body.skin-vector-legacy #mw-head {
 	position: absolute !important;
 	top: 0 !important;
-	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
+	left: var(--wiki-sidebar-width) !important;
 	right: auto !important;
 	width: var(--wiki-content-width) !important;
@@ Line 84: / Line 97: @@
 	overflow: visible;
 }
 /* USER MENU */
 /* --------- */
-/* This is the top-right personal/user menu. */
 body.skin-vector-legacy #p-personal {
 	position: absolute !important;
@@ Line 101: / Line 114: @@
 /* LEFT PAGE TABS */
 /* -------------- */
-/* Main Page / Discussion. */
 body.skin-vector-legacy #left-navigation {
 	position: absolute !important;
@@ Line 114: / Line 126: @@
 /* RIGHT PAGE TABS AND SEARCH */
 /* -------------------------- */
-/* Read / Edit / View history / Search. */
 body.skin-vector-legacy #right-navigation {
 	position: absolute !important;
@@ Line 140: / Line 151: @@
 /* MAIN CONTENT BODY */
 /* ----------------- */
-/* Outer page container. Border and padding live here, like the BG3 wiki. */
+/* This is the bordered outer page container, like the BG3 wiki content body. */
 body.skin-vector-legacy #content.mw-body {
 	position: absolute !important;
 	top: var(--wiki-head-height) !important;
-	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
+	left: var(--wiki-sidebar-width) !important;
 	right: auto !important;
@@ Line 156: / Line 167: @@
 	background: #fff;
 	border: 1px solid #333;
-	padding: 16px !important;
+	padding: var(--wiki-content-padding) !important;
 }
 /* PAGE TITLE STRIP */
 /* ---------------- */
-/* Title sits inside the padded content container. */
 body.skin-vector-legacy h1#firstHeading {
 	margin: 0 0 12px 0 !important;
@@ Line 182: / Line 193: @@
 	font-weight: inherit !important;
 }
 /* PAGE CONTENT AREA */
 /* ----------------- */
-/* Inner content should fill the padded area without adding another outer gap. */
 body.skin-vector-legacy #bodyContent {
 	width: 100%;
@@ Line 200: / Line 211: @@
 	box-sizing: border-box;
 }
 /* SIDEBAR LINKS */
@@ Line 235: / Line 247: @@
 	padding: 0;
 	background: transparent;
-}
-/* PAGE TITLE TEXT */
-/* --------------- */
-body.skin-vector-legacy h1#firstHeading {
-	margin: 0 0 8px 0 !important;
-	padding: 0 0 6px 0 !important;
-	border-bottom: 1px solid #c8ccd1;
-}
-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: 28px !important;
-	line-height: 1.1 !important;
-	font-weight: normal !important;
 }