MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Version 31.0 - Seamless Stack Miraheze Mirror
+/* Version 32.0 - Dual-Skin (Anisa & Cosmos) Mirror
-    Fixes: Gaps between Title, Headers, and Labels/Data
+    Fixes: Small text in Anisa, layout clashing, and unified Infoboxes
 */
@@ Line 8: / Line 8: @@
      --kh-green: #3e5a47;
      --kh-yellow: #ffd700;
+    --miraheze-border: #a2a9b1;
 }
-/* --- 1. THE MAIN PAGE CONTAINER --- */
+/* --- 1. GLOBAL TYPOGRAPHY --- */
 body {
      font-family: 'Crimson Pro', serif !important;
 }
-#content, .mw-body {
+/* Fix for small text in Anisa Skin */
+.skin-anisa #mw-content-text,
+.skin-anisa .mw-parser-output {
+    font-size: 1.1em !important; /* Bumps up the small Anisa text */
+    line-height: 1.6 !important;
+}
+/* Standardize content area for both skins */
+#content, .mw-body, .skin-anisa #bodyContent {
      background-color: #ffffff !important;
-     border: 1px solid #a2a9b1 !important;
+     border: 1px solid var(--miraheze-border) !important;
      padding: 1.5em 2em !important;
      margin: 1em auto !important;
-     max-width: 1100px !important;
+     max-width: 1150px !important;
      display: block !important;
 }
-/* --- 2. THE INFOBOX (ZERO-GAP CONSTRUCTION) --- */
+/* --- 2. TABLE OF CONTENTS (Unified) --- */
+#toc, .toc {
+    background-color: #f8f9fa !important;
+    border: 1px solid var(--miraheze-border) !important;
+    padding: 8px !important;
+    font-size: 95% !important;
+    display: table !important;
+}
+/* --- 3. THE INFOBOX (Anisa & Cosmos Optimized) --- */
 .portable-infobox {
      background-color: #fff !important;
-     border: 1px solid #a2a9b1 !important;
+     border: 1px solid var(--miraheze-border) !important;
-     width: 270px !important;
+     width: 280px !important;
      float: right !important;
      margin: 0 0 1em 1.2em !important;
      padding: 0 !important;
-    border-spacing: 0 !important; /* Removes gaps between cells */
+     border-collapse: collapse !important;
-     border-collapse: collapse !important; /* Ensures borders touch */
+     border-spacing: 0 !important;
-     font-size: 0.88em !important;
 }
-/* Force all internal "group" containers to have zero margin/padding gaps */
+/* Ensure Headers fill 100% of the box width */
-.portable-infobox .pi-item,
+.portable-infobox .pi-title,
-.portable-infobox .pi-group,
+.portable-infobox .pi-header {
-.portable-infobox .pi-section {
+    display: block !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+    font-family: 'Cinzel', serif !important;
+    text-align: center !important;
      margin: 0 !important;
-    padding: 0 !important;
 }
-/* Title Styling: Full Width and Height Fill */
 .portable-infobox .pi-title {
      background-color: var(--kh-yellow) !important;
      color: #000 !important;
-    font-family: 'Cinzel', serif !important;
+     padding: 12px 10px !important;
-    font-weight: bold !important;
+     font-size: 1.2em !important;
-     padding: 15px 10px !important;
+     border-bottom: 1px solid var(--miraheze-border) !important;
-     font-size: 1.25em !important;
-    text-align: center !important;
-    display: block !important;
-    margin: 0 !important;
-     border-bottom: 1px solid #a2a9b1 !important;
 }
-/* Header Styling: Full Width and Height Fill */
 .portable-infobox .pi-header {
      background-color: var(--kh-green) !important;
      color: #fff !important;
-    font-family: 'Cinzel', serif !important;
+     padding: 8px 5px !important;
-     padding: 10px 5px !important;
-    text-align: center !important;
-    font-weight: bold !important;
-    display: block !important;
-    margin: 0 !important;
 }
-/* Image Container: Remove gaps around the image */
+/* Data Row Precision (Labels/Values) */
-.portable-infobox .pi-image {
+.pi-item.pi-data {
-     padding: 0 !important; /* Miraheze usually has no padding here */
+     display: table-row !important;
-    margin: 0 !important;
-    line-height: 0 !important; /* Prevents tiny gap at bottom of images */
-    background-color: #fff !important;
 }
-.portable-infobox .pi-image img {
+.pi-data-label, .pi-data-value {
-    max-width: 100% !important;
+     display: table-cell !important;
-    height: auto !important;
+     padding: 8px !important;
-     display: block !important;
+     border-bottom: 1px solid #eee !important;
-     margin: 0 auto !important;
+     vertical-align: middle !important;
-}
-/* Data Row Precision */
-.pi-item.pi-data {
-     display: table-row !important;
-    width: 100% !important;
-     margin: 0 !important;
 }
 .pi-data-label {
-    display: table-cell !important;
      width: 40% !important;
      background-color: #f2f2f2 !important;
      font-weight: bold !important;
-    padding: 8px !important;
+     border-right: 1px solid var(--miraheze-border) !important;
-     border-bottom: 1px solid #a2a9b1 !important;
-    border-right: 1px solid #a2a9b1 !important;
-    vertical-align: middle !important;
 }
-.pi-data-value {
+/* --- 4. MOBILE / COSMOS OVERRIDES --- */
-     display: table-cell !important;
+@media screen and (max-width: 768px) {
-    padding: 8px !important;
+     #content, .mw-body {
-    border-bottom: 1px solid #a2a9b1 !important;
+        padding: 1em !important;
-    vertical-align: middle !important;
+        margin: 0 !important;
-    background-color: #ffffff !important;
+        width: 100% !important;
-}
+        max-width: 100% !important;
+    }
-/* --- 3. TABLE OF CONTENTS (TOC) --- */
+    .portable-infobox {
-#toc, .toc {
+        float: none !important;
-    background-color: #f8f9fa !important;
+        width: 100% !important;
-    border: 1px solid #a2a9b1 !important;
+        margin: 1em 0 !important;
-    padding: 8px !important;
+        display: table !important; /* Keeps table layout on mobile for labels */
-    font-size: 90% !important;
+     }
-     display: table !important;
 }