@@ Line 512: / Line 512: @@
      color: #4a3c28 !important;
      font-weight: bold;
-}
-/* --- 11. Cut-off Background & Attach Welcome Box --- */
-/* Change body background to repeat-x (horizontal only) so it cuts off,
-   and use a solid color for the rest of the page behind the content */
-body {
-    background-image: none !important;
-    background-color: #e1d5be !important; /* Or #e1d5be if they want tan canvas */
-}
-/* Remove the top padding from #content ONLY on the Main Page so the
-   Welcome box slides up and attaches perfectly to the top border */
-.page-Main_Page #content {
-    padding-top: 0 !important;
-}
-/* The Welcome Box and Stats Box touch the top border */
-.page-Main_Page .mainpage-header {
-    margin-top: 0;
 }
 /* --- 12. Remove Vector Text Shadows --- */
@@ Line 554: / Line 536: @@
      padding-left: 14px !important;
      padding-right: 14px !important;
-}
-/* --- 14. Logo Subtext --- */
-/* Inject text under the logo */
-#p-logo::after {
-    content: "The Winds of Valen Wiki";
-    display: block;
-    text-align: center;
-    font-family: 'Kingthings Petrock', 'PT Serif', Georgia, serif; /* Using the custom OSRS font! */
-    font-size: 1.3em;
-    font-weight: normal;
-    color: #f1e7d3; /* Parchment color */
-    text-shadow: 2px 2px 3px #000000, -1px -1px 2px #000000; /* Strong dark outline to make it readable over backgrounds */
-    position: relative;
-    top: -35px; /* Pull it up into the logo bounding box so it sits right under the image */
-    line-height: 1.2;
-    z-index: 10;
-}
-/* Push the sidebar navigation down slightly to make room for the new text */
-#p-navigation {
-    margin-top: 10px !important;
 }
 /* --- 15. VisualEditor Toolbar Fixes --- */
@@ Line 619: / Line 580: @@
      margin-top: 48px !important; /* Push it down below the beige header bar */
 }
 /* ==========================================================================
-    CLEAN LAYOUT SYSTEM - Rebuilt from scratch to match OSRS Wiki
+    BODY & BACKGROUND
+    ========================================================================== */
-   Vector Legacy DOM order:
+body {
-     #mw-page-base  (empty div, used for background)
+    background: #e1d5be;
-     #mw-head-base  (empty div, hide it)
+    background-image: none;
-     #content       (article body)
+}
-     #mw-navigation
-       #mw-head     (tab bar, search, personal tools)
-       #mw-panel    (sidebar + logo)
-    Goal: banner spans top 160px, sidebar/logo overlaps banner from left,
+/* ==========================================================================
-         tabs sit at bottom of banner and latch onto content box border,
+    LOGO TEXT (sidebar, below logo icon)
-         content starts at 160px.
     ========================================================================== */
+#p-logo::after {
-/* --- Body: solid beige canvas, no image --- */
+    content: "The Winds of Valen Wiki";
-body {
+    display: block;
-     background: #e1d5be !important;
+    text-align: center;
-     background-image: none !important;
+    font-family: 'Kingthings Petrock', 'PT Serif', Georgia, serif;
+    font-size: 1.1em;
+    font-weight: normal;
+    color: #f1e7d3;
+    text-shadow: 2px 2px 4px #000000, -1px -1px 2px #000000;
+    line-height: 1.2;
+     padding: 0 6px;
+     margin-top: 2px;
 }
-/* --- mw-page-base: this is the banner. Vector Legacy already positions it absolute. --- */
+/* ==========================================================================
+   BANNER
+   #mw-page-base is already position:absolute in Vector Legacy skin.
+   We use it as the full-width banner container.
+   ========================================================================== */
 #mw-page-base {
      position: absolute !important;
@@ Line 657: / Line 626: @@
 }
-/* --- mw-head-base: hide the legacy gradient overlay --- */
+/* Hide the redundant head-base gradient overlay */
 #mw-head-base {
      display: none !important;
@@ Line 663: / Line 632: @@
 /* ==========================================================================
-    DESKTOP LAYOUT  (>= 1000px wide)
+    DESKTOP LAYOUT  >= 1000px
     ========================================================================== */
 @media screen and (min-width: 1000px) {
-     /* --- mw-head: the tab bar row ---
+     /* Tab bar row: sits at the bottom of the 160px banner */
-       Banner = 160px. Tab bar is ~40px tall.
-       Position it at top: 120px so tabs sit at the bottom of the banner. */
      #mw-head {
          position: absolute !important;
@@ Line 682: / Line 649: @@
      }
-     /* --- Beige bar that runs behind the tabs --- */
+     /* Beige bar behind the tabs */
      #mw-head::before {
          content: "" !important;
@@ Line 696: / Line 663: @@
      }
-     /* --- Tab navigation: left side (Main Page, Discussion) --- */
+     /* Left nav: Main Page, Discussion tabs */
      #left-navigation {
          position: absolute !important;
@@ Line 706: / Line 673: @@
      }
-     /* --- Tab navigation: right side (Read, Edit, Search) --- */
+     /* Right nav: Read, Edit, Search */
      #right-navigation {
          position: absolute !important;
@@ Line 716: / Line 683: @@
      }
-     /* --- Personal tools (Create account / Log in) - top right corner --- */
+     /* Personal tools: Create account / Log in — top right corner */
      #p-personal {
          position: absolute !important;
-         top: -90px !important;
+         top: -80px !important;
          right: 10px !important;
          margin: 0 !important;
@@ Line 725: / Line 692: @@
      }
      #p-personal ul {
-         background-color: transparent !important;
+         background: transparent !important;
          border: none !important;
-         padding: 0 !important;
+         padding: 2px 0 !important;
      }
-     /* --- Content box: starts exactly at bottom of banner --- */
+     /* Content box: starts at bottom of banner, shifted right of sidebar */
      #content {
          position: relative !important;
@@ Line 739: / Line 706: @@
      }
-     /* --- Active tab: pulls down 3px to merge with content box top border --- */
+     /* Active tab latches onto content box top border */
      .vector-menu-tabs .vector-menu-content-list > li.selected {
          margin-bottom: -3px !important;
@@ Line 746: / Line 713: @@
      }
-     /* --- Sidebar panel: sits at top:0 so logo naturally overlaps the banner --- */
+     /* Sidebar: starts at top:0 so logo naturally overlaps the banner */
      #mw-panel {
          position: absolute !important;
@@ Line 754: / Line 721: @@
          padding-top: 0 !important;
          z-index: 10 !important;
+        background: transparent !important;
      }
-     /* --- Logo: spans the full banner height (160px) --- */
+     /* Logo area: spans full 160px banner height */
      #p-logo {
          height: 160px !important;
-         display: flex !important;
+         display: block !important;
-         align-items: center !important;
+         overflow: hidden !important;
-        justify-content: center !important;
          padding: 0 !important;
          margin: 0 !important;
      }
+    /* Logo anchor: shows the icon image in top portion, leaves room for text below */
      #p-logo a {
          display: block !important;
-         width: 100% !important;
+         width: 165px !important;
-         height: 160px !important;
+         height: 110px !important;
-         background-position: center center !important;
+        background-size: 100px auto !important;
-         background-size: contain !important;
+         background-position: center 8px !important;
+         background-repeat: no-repeat !important;
      }
 }
 /* ==========================================================================
-    MOBILE LAYOUT  (< 1000px wide)
+    MOBILE LAYOUT  < 1000px
     ========================================================================== */
 @media screen and (max-width: 999px) {
      body {
          background: #e1d5be !important;
+        background-image: none !important;
      }
      #mw-page-base {
@@ Line 802: / Line 773: @@
      #p-logo {
          height: auto !important;
+    }
+    #p-logo a {
+        height: 80px !important;
+        background-size: contain !important;
+        background-position: center !important;
      }
      .vector-menu-tabs .vector-menu-content-list > li {
@@ Line 857: / Line 833: @@
 .discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; }
 .discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; }
-/* ==========================================================================
-   TARGETED FIXES - appended last to win cascade
-   ========================================================================== */
-/* 1. Force body to pure beige - override ALL earlier background rules */
-body,
-html body {
-    background: #e1d5be !important;
-    background-image: none !important;
-    background-color: #e1d5be !important;
-}
-/* 2. Sidebar navigation link colors - make them visible */
-#mw-panel a,
-#mw-panel .vector-menu-heading-label,
-.portal h3,
-.mw-portlet h3 {
-    color: #4a3c28 !important;
-}
-/* 3. Logo text: reposition for new 160px tall logo area
-   Logo icon occupies roughly the top 110px, text goes below it */
-#p-logo::after {
-    position: relative !important;
-    top: auto !important;
-    display: block !important;
-    text-align: center !important;
-    margin-top: -10px !important;
-    font-family: 'Kingthings Petrock', 'PT Serif', Georgia, serif !important;
-    font-size: 1.1em !important;
-    color: #f1e7d3 !important;
-    text-shadow: 2px 2px 4px #000, -1px -1px 2px #000 !important;
-    line-height: 1.2 !important;
-    z-index: 10 !important;
-}
-/* 4. Make sure the logo link fills the full banner height */
-#p-logo a {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
-    height: 160px !important;
-    background-position: center 10px !important;
-    background-size: 120px auto !important;
-    padding-top: 0 !important;
-}

MediaWiki:Common.css: Difference between revisions

Maintenance script (talk | contribs)