MediaWiki:Vector.css: Difference between revisions

← Older edit Newer edit →

@@ Line 4: / Line 4: @@
-/* CENTERED VECTOR VARIABLES */
+/* LAYOUT VARIABLES */
-/* ------------------------- */
+/* ---------------- */
 :root {
 	--wiki-shell-width: 1350px;
@@ Line 11: / Line 11: @@
 	--wiki-content-width: calc(var(--wiki-shell-width) - var(--wiki-sidebar-width));
 	--wiki-shell-gap: max(0px, calc((100vw - var(--wiki-shell-width)) / 2));
+	--wiki-head-height: 96px;
 }
@@ Line 21: / Line 22: @@
-/* VECTOR BASE STRIPS */
+/* DISABLE VECTOR'S FAKE BACKGROUND STRIPS */
-/* ------------------ */
+/* --------------------------------------- */
-body.skin-vector-legacy #mw-page-base {
+/* These are decorative Vector layout layers. We are replacing them with our own layout. */
-	position: absolute;
+body.skin-vector-legacy #mw-page-base,
-	top: 0;
-	left: var(--wiki-shell-gap) !important;
-	width: var(--wiki-shell-width) !important;
-	margin-left: 0 !important;
-	background: #fff;
-}
 body.skin-vector-legacy #mw-head-base {
-	position: absolute;
+	display: none !important;
-	top: 0;
-	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
-	width: var(--wiki-content-width) !important;
-	margin-left: 0 !important;
-	background: #fff;
 }
-/* LEFT SIDEBAR LAYOUT */
+/* LEFT SIDEBAR PANEL */
-/* ------------------- */
+/* ------------------ */
 body.skin-vector-legacy #mw-panel {
-	position: absolute;
+	position: absolute !important;
 	left: var(--wiki-shell-gap) !important;
 	top: 0 !important;
@@ Line 52: / Line 41: @@
 	box-sizing: border-box;
 	padding: 24px 18px;
+	z-index: 50;
 	background: #171717;
 	color: #f2eadc;
@@ Line 73: / Line 64: @@
-/* MAIN CONTENT LAYOUT */
+/* TOP HEAD BAR */
-/* ------------------- */
+/* ------------ */
-body.skin-vector-legacy #content.mw-body {
+/* This is the full head/navigation area to the right of the sidebar. */
-	margin-left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
+body.skin-vector-legacy #mw-head {
+	position: absolute !important;
+	top: 0 !important;
+	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
+	right: auto !important;
 	width: var(--wiki-content-width) !important;
-	max-width: var(--wiki-content-width) !important;
+	height: var(--wiki-head-height) !important;
 	box-sizing: border-box;
+	z-index: 20;
 	background: #fff;
+	border-bottom: 1px solid #a7d7f9;
 }
-/* TOP HEAD LAYOUT */
+/* USER MENU */
-/* --------------- */
+/* --------- */
-body.skin-vector-legacy #mw-head {
+/* This is the top-right personal/user menu. */
-	position: absolute;
+body.skin-vector-legacy #p-personal {
-	top: 0;
+	position: absolute !important;
-	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
+	top: 8px !important;
-	right: auto !important;
+	right: 16px !important;
-	width: var(--wiki-content-width) !important;
+	left: auto !important;
-	box-sizing: border-box;
+	width: auto !important;
+	margin: 0 !important;
+	z-index: 40;
 }
-/* TOP LEFT PAGE TABS */
+/* LEFT PAGE TABS */
-/* ------------------ */
+/* -------------- */
-/* Vector normally adds its own left offset here. This removes that hidden push. */
+/* Main Page / Discussion. The sidebar sits in front of this area if they overlap. */
 body.skin-vector-legacy #left-navigation {
-	position: absolute;
+	position: absolute !important;
 	left: 0 !important;
-	margin-left: 0 !important;
+	top: 56px !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	z-index: 30;
 }
-/* TOP RIGHT PAGE TABS AND SEARCH */
+/* RIGHT PAGE TABS AND SEARCH */
-/* ------------------------------ */
+/* -------------------------- */
+/* Read / Edit / View history / Search. */
 body.skin-vector-legacy #right-navigation {
-	position: absolute;
+	position: absolute !important;
 	right: 0 !important;
-	margin-right: 0 !important;
+	top: 56px !important;
-	max-width: 620px;
+	margin: 0 !important;
-	box-sizing: border-box;
+	padding: 0 !important;
-}
+	max-width: 760px;
-/* PERSONAL LINKS */
-/* -------------- */
-body.skin-vector-legacy #p-personal {
-	position: absolute;
-	top: 0;
-	right: var(--wiki-shell-gap) !important;
-	width: var(--wiki-content-width);
 	box-sizing: border-box;
+	z-index: 30;
 }
@@ Line 139: / Line 135: @@
-/* SIDEBAR LINK STYLING */
+/* MAIN CONTENT BODY */
-/* -------------------- */
+/* ----------------- */
+/* The page body starts under the head bar and to the right of the sidebar. */
+body.skin-vector-legacy #content.mw-body {
+	position: relative !important;
+	margin-left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width)) !important;
+	margin-top: var(--wiki-head-height) !important;
+	width: var(--wiki-content-width) !important;
+	max-width: var(--wiki-content-width) !important;
+	box-sizing: border-box;
+	z-index: 10;
+	background: #fff;
+}
+/* SIDEBAR LINKS */
+/* ------------- */
 body.skin-vector-legacy #mw-panel a {
 	color: #d08b00;
@@ Line 154: / Line 166: @@
-/* SIDEBAR SECTION STYLING */
+/* SIDEBAR SECTIONS */
-/* ----------------------- */
+/* ---------------- */
 body.skin-vector-legacy #mw-panel .portal {
 	margin: 0 0 18px 0;
@@ Line 176: / Line 188: @@
-/* PAGE TITLE TEXT RULES */
+/* PAGE TITLE TEXT */
-/* --------------------- */
+/* --------------- */
 body.skin-vector-legacy h1#firstHeading,
 body.skin-vector-legacy h1#firstHeading .mw-page-title-main {