MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Version 9.0 - Miraheze Reconstruction (Stable Build) */
+/* Version 10.0 - Miraheze Style (Desktop & Infobox Logic) */
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');
@@ Line 7: / Line 7: @@
      --kh-dark-text: #2d4234 !important;
      --kh-light-bg: #f9fdfa !important;
-    --kh-label-bg: #f2f2f2 !important;
-    --kh-data-bg: #ffffff !important;
-    --kh-border: 2px solid #3e5a47 !important;
 }
-/* 1. GLOBAL LAYOUT & BACKGROUND */
+/* 1. GLOBAL STYLE */
-body, html, #cosmos-content-wrapper {
+body, html {
+    font-family: 'Crimson Pro', serif !important;
      background-color: var(--kh-light-bg) !important;
-    font-family: 'Crimson Pro', serif !important;
 }
+h1, h2, h3, .mw-headline {
-/* 2. THE DESKTOP CARD LOOK (1024px+) */
+     color: var(--kh-green) !important;
-@media screen and (min-width: 1024px) {
+     font-family: 'Cinzel', serif !important;
-     #cosmos-content {
-        width: 1200px !important;
-        margin: 40px auto !important;
-        display: block !important;
-        overflow: visible !important;
-    }
-    #cosmos-content-main {
-        width: 860px !important;
-        float: left !important;
-        background: #ffffff !important;
-        padding: 40px !important;
-        border-radius: 4px !important;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
-        box-sizing: border-box !important;
-        min-height: 800px;
-    }
-     #cosmos-right-rail {
-        width: 310px !important;
-        float: right !important;
-        background: #ffffff !important;
-        padding: 20px !important;
-        border-radius: 4px !important;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
-        box-sizing: border-box !important;
-    }
 }
+h2::before, h3::before { content: "\1F343\0020" !important; }
-/* 3. INFOBOX ALIGNMENT (The Miraheze Fix) */
+/* 2. PORTABLE INFOBOXES (Miraheze Alignment Fix) */
 .portable-infobox {
-     background-color: var(--kh-data-bg) !important;
+     background-color: #fff !important;
-     border: var(--kh-border) !important;
+     border: 2px solid var(--kh-green) !important;
      width: 300px !important;
      float: right !important;
      margin: 0 0 1em 1em !important;
      border-collapse: collapse !important;
+    display: table !important;
 }
 .portable-infobox .pi-title {
      background-color: var(--kh-yellow) !important;
@@ Line 65: / Line 36: @@
      padding: 10px !important;
      text-align: center !important;
-    border-bottom: var(--kh-border) !important;
 }
 .portable-infobox .pi-header {
      background-color: var(--kh-green) !important;
      color: #ffffff !important;
      font-family: 'Cinzel', serif !important;
-    padding: 6px !important;
-    text-align: center !important;
 }
-/* Forces Label and Data to be side-by-side using Table Cells */
 .pi-item.pi-data {
-     display: table !important;
+     display: table-row !important;
-    width: 100% !important;
-    border-bottom: 1px solid #ddd;
 }
 .pi-data-label {
      display: table-cell !important;
      width: 40% !important;
-     background-color: var(--kh-label-bg) !important;
+     background-color: #f2f2f2 !important;
      padding: 8px !important;
-     font-family: 'Cinzel', serif !important;
+     font-weight: bold !important;
-    font-size: 0.8em !important;
      border-right: 1px solid #ddd;
-     vertical-align: middle;
+     border-bottom: 1px solid #ddd;
 }
 .pi-data-value {
      display: table-cell !important;
-    width: 60% !important;
      padding: 8px !important;
-     background-color: var(--kh-data-bg) !important;
+     border-bottom: 1px solid #ddd;
-    vertical-align: middle;
 }
-/* 4. HEADERS & ICONS */
+/* 3. DESKTOP CARD LAYOUT */
-h1, h2, h3, .mw-headline {
+@media screen and (min-width: 1024px) {
-     color: var(--kh-green) !important;
+     #cosmos-content {
-     font-family: 'Cinzel', serif !important;
+        width: 1200px !important;
+        margin: 40px auto !important;
+        display: block !important;
+    }
+    #cosmos-content-main {
+        width: 860px !important;
+        float: left !important;
+        background: #ffffff !important;
+        padding: 40px !important;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
+     }
+    #cosmos-right-rail {
+        width: 310px !important;
+        float: right !important;
+    }
 }
-h2::before, h3::before { content: "\1F343\0020" !important; }
-/* 5. SITE NAVIGATION */
+/* 4. HEADER */
 #cosmos-header, .header-container {
      background-color: var(--kh-green) !important;
      border-bottom: 3px solid var(--kh-yellow) !important;
-}
-/* 6. MOBILE RESPONSIVENESS */
-@media screen and (max-width: 1023px) {
-    #cosmos-content-main {
-        width: 100% !important;
-        padding: 20px !important;
-        border-radius: 8px !important;
-    }
-    .portable-infobox {
-        width: 100% !important;
-        float: none !important;
-        margin: 10px 0 !important;
-    }
-}
-/* MOBILE-ONLY BRANDING */
-@media screen and (max-width: 1023px) {
-    /* Adds a leaf icon before the site name in the mobile header */
-    #cosmos-header-logo::before {
-        content: "\1F343";
-        font-size: 20px;
-        margin-right: 8px;
-        display: inline-block;
-        vertical-align: middle;
-    }
-    /* Styles the mobile header text to match your KH Green */
-    .cosmos-header-title {
-        color: var(--kh-yellow) !important;
-        font-family: 'Cinzel', serif !important;
-        font-size: 1.2em !important;
-    }
-    /* Makes the mobile search bar slightly rounded like Fandom */
-    #cosmos-searchform input {
-        border-radius: 20px !important;
-        border: 1px solid var(--kh-green) !important;
-    }
 }