MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Version 27.0 - Hard Reset & Miraheze Precision
+/* Version 28.0 - Miraheze Exact Clone
-    Specifically fixing Reece McCartney and Featured World alignment
+    Fixes: TOC Styling, Infobox Borders, and Reece McCartney Alignment
 */
@@ Line 8: / Line 8: @@
      --kh-green: #3e5a47;
      --kh-yellow: #ffd700;
-    --miraheze-white: #ffffff;
 }
-/* --- 1. THE LAYOUT RESET --- */
+/* --- 1. THE MAIN PAGE CONTAINER --- */
-/* This stops Cosmos from "squishing" your content */
+body {
-.mw-body, #content {
+     font-family: 'Crimson Pro', serif !important;
-     background-color: var(--miraheze-white) !important;
-    border: 1px solid #dcdcdc !important;
-    padding: 30px !important;
-    margin: 20px auto !important;
-    max-width: 1200px !important;
-    display: block !important; /* Forces a standard block layout over Cosmos flex */
-    overflow: visible !important;
 }
-/* Fixes the "Featured World" and lore box alignment */
+#content, .mw-body {
-.mw-parser-output {
+    background-color: #ffffff !important;
+    border: 1px solid #a2a9b1 !important; /* Specific Miraheze Gray */
+    padding: 1.5em 2.5em !important;
+    margin: 1em auto !important;
+    max-width: 1100px !important; /* Restricts width to match Miraheze layout */
+    line-height: 1.6 !important;
      display: block !important;
-    text-align: left !important;
 }
-/* --- 2. THE INFOBOX (EXACT MIRAHEZE SPECS) --- */
+/* --- 2. TABLE OF CONTENTS (TOC) --- */
-/* Matches the padding and border-collapse of source  */
+/* Miraheze TOCs have a specific background and border */
+#toc, .toc {
+    background-color: #f8f9fa !important;
+    border: 1px solid #a2a9b1 !important;
+    padding: 10px !important;
+    font-size: 95% !important;
+    display: table !important; /* Ensures it only takes up needed space */
+    margin-bottom: 1em !important;
+}
+.toctitle h2 {
+    font-family: sans-serif !important; /* Miraheze TOC titles use sans-serif */
+    font-size: 100% !important;
+    font-weight: bold !important;
+    border-bottom: none !important;
+    text-align: center !important;
+    color: #000 !important;
+}
+/* --- 3. THE INFOBOX (MIRAHEZE RECONSTRUCTION) --- */
 .portable-infobox {
      background-color: #fff !important;
@@ Line 37: / Line 52: @@
      float: right !important;
      margin: 0 0 1em 1em !important;
-     border-collapse: collapse !important;
+     padding: 0 !important;
-     font-family: 'Crimson Pro', serif !important;
+     border-spacing: 0 !important;
 }
 .portable-infobox .pi-title {
      background-color: var(--kh-yellow) !important;
-     color: #2d4234 !important;
+     color: #000 !important;
      font-family: 'Cinzel', serif !important;
-     font-weight: 700 !important;
+     font-weight: bold !important;
-     padding: 12px !important;
+     padding: 10px !important;
+    font-size: 1.25em !important;
+    border-bottom: 1px solid #a2a9b1 !important;
      text-align: center !important;
-    font-size: 1.3em !important;
-    border-bottom: 1px solid #a2a9b1 !important;
 }
@@ Line 56: / Line 71: @@
      color: #fff !important;
      font-family: 'Cinzel', serif !important;
-     padding: 8px !important;
+     padding: 6px !important;
      text-align: center !important;
      font-weight: bold !important;
 }
-/* Data Table Alignment Fix */
+/* Data Row Precision */
 .pi-item.pi-data {
-     display: flex !important;
+     display: table-row !important; /* Forces traditional alignment */
      width: 100% !important;
-    border-bottom: 1px solid #f0f0f0 !important;
-    margin: 0 !important;
 }
 .pi-data-label {
-     flex: 0 0 40% !important;
+     display: table-cell !important;
-     background-color: #f8f9fa !important;
+    width: 35% !important;
-     font-weight: 700 !important;
+     background-color: #f2f2f2 !important;
-     padding: 10px !important;
+     font-weight: bold !important;
-     border-right: 1px solid #f0f0f0 !important;
+     padding: 7px 10px !important;
-     color: #202122 !important;
+    border-bottom: 1px solid #a2a9b1 !important;
+     border-right: 1px solid #a2a9b1 !important;
+     vertical-align: top !important;
 }
 .pi-data-value {
-     flex: 1 !important;
+     display: table-cell !important;
-     padding: 10px !important;
+     padding: 7px 10px !important;
-     background-color: #fff !important;
+    border-bottom: 1px solid #a2a9b1 !important;
+    vertical-align: top !important;
+     background-color: #ffffff !important;
 }
-/* --- 3. IMAGES & CAPTIONS --- */
+/* Remove bottom border from last item */
-.portable-infobox .pi-image {
+.pi-item.pi-data:last-child .pi-data-label,
-     padding: 10px !important;
+.pi-item.pi-data:last-child .pi-data-value {
-    text-align: center !important;
+     border-bottom: none !important;
-    background: #fff !important;
 }
-.portable-infobox .pi-image img {
+/* --- 4. MOBILE MIRROR --- */
-    max-width: 100% !important;
-    height: auto !important;
-}
-/* --- 4. MOBILE PRECISION --- */
 @media screen and (max-width: 768px) {
      #content, .mw-body {
-         padding: 15px !important;
+         padding: 1em !important;
          margin: 0 !important;
      }
@@ Line 107: / Line 118: @@
          width: 100% !important;
          margin: 1em 0 !important;
-    }
+         display: table !important;
-    .pi-item.pi-data {
-         flex-direction: column !important;
-    }
-    .pi-data-label {
-        width: 100% !important;
-        border-right: none !important;
-        background-color: #eee !important;
      }
 }