MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Version 11.0 - Miraheze Style (Infobox & Layout Fix) */
+/* Version 12.0 - Stable Miraheze Reconstruction */
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');
@@ Line 20: / Line 20: @@
 h2::before, h3::before { content: "\1F343\0020" !important; }
-/* 2. PORTABLE INFOBOXES (Miraheze Fix) */
+/* 2. PORTABLE INFOBOXES (The Final Fix) */
 .portable-infobox {
      background-color: #fff !important;
@@ Line 27: / Line 27: @@
      float: right !important;
      margin: 0 0 1em 1em !important;
+    display: flex !important;
+    flex-direction: column !important; /* Forces vertical stacking for headers/images */
+    border-collapse: collapse !important;
+}
+/* Force Title, Header, and Image to stretch 100% */
+.portable-infobox .pi-title,
+.portable-infobox .pi-header,
+.portable-infobox .pi-image,
+.portable-infobox .pi-image img {
+    width: 100% !important;
+    display: block !important;
+    box-sizing: border-box !important;
 }
-/* Title & Header: Force Full Width */
 .portable-infobox .pi-title {
      background-color: var(--kh-yellow) !important;
@@ Line 36: / Line 48: @@
      padding: 10px !important;
      text-align: center !important;
-    display: block !important; /* Prevents squishing */
 }
 .portable-infobox .pi-header {
      background-color: var(--kh-green) !important;
      color: #ffffff !important;
      font-family: 'Cinzel', serif !important;
-    display: block !important; /* Prevents squishing */
      text-align: center !important;
-     padding: 5px !important;
+     padding: 6px !important;
 }
-/* Image: Force Full Width */
+/* Side-by-Side Data Row Logic */
-.portable-infobox .pi-image {
-    display: block !important;
-    padding: 0 !important;
-}
-.portable-infobox .pi-image img {
-    width: 100% !important;
-    height: auto !important;
-}
-/* Data Rows: Side-by-Side Logic */
 .pi-item.pi-data {
      display: flex !important;
      flex-direction: row !important;
+    width: 100% !important;
      border-bottom: 1px solid #ddd;
 }
 .pi-data-label {
+    flex: 0 0 40% !important; /* Label takes 40% */
      background-color: #f2f2f2 !important;
      padding: 8px !important;
@@ Line 69: / Line 73: @@
      font-family: 'Cinzel', serif !important;
      font-size: 0.85em !important;
-    flex: 0 0 40% !important; /* Label takes 40% */
      border-right: 1px solid #ddd;
 }
 .pi-data-value {
+    flex: 1 !important; /* Value fills the remaining 60% */
      padding: 8px !important;
-     flex: 1 !important; /* Value takes the rest */
+     background-color: #fff !important;
 }
-/* 3. DESKTOP CARD LAYOUT */
+/* 3. DESKTOP CARD LAYOUT (1024px+) */
 @media screen and (min-width: 1024px) {
      #cosmos-content {
@@ Line 98: / Line 103: @@
 }
-/* 4. HEADER */
+/* 4. HEADER COLORS */
 #cosmos-header, .header-container {
      background-color: var(--kh-green) !important;
      border-bottom: 3px solid var(--kh-yellow) !important;
 }