MediaWiki:Vector.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* CENTERED VECTOR LAYOUT */
 /* ---------------------- */
 :root {
-	--wiki-shell-width: 1400px;
+	--wiki-shell-width: 1350px;
-	--wiki-sidebar-width: 170px;
+	--wiki-sidebar-width: 210px;
 	--wiki-shell-gap: max(0px, calc((100vw - var(--wiki-shell-width)) / 2));
 }
-/* Optional page background around the centered wiki */
 body.skin-vector-legacy {
 	background: #f5f3ee;
 }
-/* Left sidebar moves into the centered shell */
+/* Sidebar sits at the top-left of the centred shell */
 body.skin-vector-legacy #mw-panel {
 	left: var(--wiki-shell-gap);
+	top: 0;
 	width: var(--wiki-sidebar-width);
+	min-height: 100vh;
+	box-sizing: border-box;
+	padding: 24px 18px;
+	background: #171717;
+	color: #f2eadc;
+	border-left: 1px solid #3a2f1d;
+	border-right: 1px solid #3a2f1d;
 }
-/* Main page body sits beside the sidebar inside the centered shell */
+/* Logo lives inside the sidebar */
+body.skin-vector-legacy #p-logo {
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 150px;
+	margin: 0 0 24px 0;
+	background-position: center top;
+	background-size: contain;
+}
+/* Content begins beside the sidebar */
 body.skin-vector-legacy #content.mw-body {
 	margin-left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width));
@@ Line 27: / Line 46: @@
 }
-/* Keep the top personal links from stretching oddly */
+/* Top head/navigation also begins beside sidebar */
+body.skin-vector-legacy #mw-head {
+	left: calc(var(--wiki-shell-gap) + var(--wiki-sidebar-width));
+	right: var(--wiki-shell-gap);
+}
+/* Personal links stay inside centred shell */
 body.skin-vector-legacy #p-personal {
 	right: var(--wiki-shell-gap);
 }
-/* LEFT SIDEBAR PANEL */
+/* Sidebar link styling */
-/* ------------------ */
+body.skin-vector-legacy #mw-panel a {
-body.skin-vector-legacy #mw-panel {
+	color: #d08b00;
-	left: var(--wiki-shell-gap);
-	top: 190px;
-	width: var(--wiki-sidebar-width);
-	box-sizing: border-box;
-	background: #f7f3ec;
-	border-left: 1px solid #d8d0c4;
-	border-right: 1px solid #d8d0c4;
-	padding: 0 14px 24px 14px;
-	min-height: calc(100vh - 190px);
 }
-/* Move the logo down with the sidebar */
+body.skin-vector-legacy #mw-panel a:visited {
-body.skin-vector-legacy #p-logo {
+	color: #d08b00;
-	top: -165px;
-	left: 0;
-	width: 100%;
 }
-/* Keep sidebar menus visually inside the panel */
 body.skin-vector-legacy #mw-panel .portal {
 	margin: 0 0 18px 0;
@@ Line 62: / Line 72: @@
 body.skin-vector-legacy #mw-panel .portal h3 {
-	margin: 0 0 6px 0;
+	color: #cfc2aa;
-	padding: 0;
+	font-weight: bold;
-	color: #555;
+	border-bottom: 1px dotted #7b5b1d;
-	font-weight: normal;
+	margin: 0 0 8px 0;
+	padding-bottom: 4px;
 }