MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Version 17.0 - Clean Miraheze Build */
+/* Version 18.0 - Miraheze Reconstruction (Stable Build) */
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');
@@ Line 14: / Line 14: @@
      background-color: var(--kh-light-bg) !important;
 }
+h1, h2, h3, .mw-headline {
+    color: var(--kh-green) !important;
+    font-family: 'Cinzel', serif !important;
+}
+h2::before, h3::before { content: "\1F343\0020" !important; }
-/* 2. PORTABLE INFOBOXES (Miraheze Clone) */
+/* 2. PORTABLE INFOBOXES (Full Width Fix) */
 .portable-infobox {
-     background: #fff !important;
+     background-color: #fff !important;
      border: 2px solid var(--kh-green) !important;
      width: 300px !important;
      float: right !important;
      margin: 0 0 1em 1em !important;
-     display: table !important; /* Switch back to table for better data alignment */
+     display: flex !important;
-     border-collapse: collapse !important;
+     flex-direction: column !important;
 }
-/* Fix for squished titles/images - Force them to be their own rows */
+/* Force Title, Header, and Image to take full 100% width */
 .portable-infobox .pi-title,
 .portable-infobox .pi-header,
-.portable-infobox .pi-image {
+.portable-infobox .pi-image,
-    display: table-caption !important; /* Force them to top */
+.portable-infobox .pi-image img {
      width: 100% !important;
+    display: block !important;
+    box-sizing: border-box !important;
+    float: none !important;
 }
@@ Line 40: / Line 48: @@
      padding: 10px !important;
      text-align: center !important;
-    caption-side: top !important;
 }
@@ Line 48: / Line 55: @@
      font-family: 'Cinzel', serif !important;
      padding: 6px !important;
-    text-align: center !important;
-    display: table-row !important;
 }
-/* Data Row Alignment */
+/* Side-by-Side Data Row Logic */
 .pi-item.pi-data {
-     display: table-row !important;
+     display: flex !important;
+    flex-direction: row !important;
+    width: 100% !important;
+    border-bottom: 1px solid #ddd;
 }
 .pi-data-label {
-     display: table-cell !important;
+     flex: 0 0 40% !important;
-    width: 40% !important;
      background-color: #f2f2f2 !important;
      padding: 8px !important;
      font-weight: bold !important;
+    font-family: 'Cinzel', serif !important;
+    font-size: 0.85em !important;
      border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
 }
 .pi-data-value {
-     display: table-cell !important;
+     flex: 1 !important;
      padding: 8px !important;
-    border-bottom: 1px solid #ddd;
 }