MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* ============================================================
-    KH LEAF THEME - FULLY UNIFIED & FIXED VERSION
+    KH LEAF THEME - FINAL UNIFIED VERSION
     ============================================================ */
-/* 1. UNIVERSAL COLOR VARIABLES */
+/* 1. FONT IMPORTS (KH-Style Serifs) */
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');
+/* 2. UNIVERSAL COLOR VARIABLES */
 :root {
      --kh-green: #3e5a47;
@@ Line 9: / Line 12: @@
      --kh-dark-text: #2d4234;
      --kh-light-bg: #f9fdfa;
+    --kh-label-bg: #f2f2f2; /* Subtle grey for the left side */
+    --kh-data-bg: #ffffff;  /* Pure white for the right side */
 }
-/* 2. PORTABLE INFOBOX: EDGE-TO-EDGE FIX */
+/* 3. PORTABLE INFOBOX: EDGE-TO-EDGE & SPLIT ROW FIX */
 .portable-infobox {
      width: 300px;
@@ Line 17: / Line 22: @@
      margin-left: 20px;
      margin-bottom: 15px;
-     background-color: #ffffff !important;
+     background-color: var(--kh-data-bg) !important;
      border: 2px solid var(--kh-green) !important;
-     font-family: "Georgia", serif !important;
+     font-family: 'Crimson Pro', serif !important;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.05) !important;
-     padding: 0 !important; /* Removes the top and side gaps */
+     padding: 0 !important;
-     overflow: hidden; /* Keeps the top corners clean */
+     overflow: hidden;
 }
-/* Title: Fills the top perfectly */
+/* Title: Kingdom Hearts Style */
 .portable-infobox .pi-title {
      background-color: var(--kh-yellow) !important;
      color: var(--kh-dark-text) !important;
+    font-family: 'Cinzel', serif !important;
      font-weight: bold !important;
+    font-size: 1.3em !important;
      padding: 10px !important;
      text-align: center !important;
      margin: 0 !important;
      width: 100%;
-     border-bottom: 1px solid var(--kh-green);
+     border-bottom: 2px solid var(--kh-green);
 }
-/* Headers: Fills the width perfectly */
+/* Headers: Green "Command Menu" style */
 .portable-infobox .pi-header {
      background-color: var(--kh-green) !important;
      color: #ffffff !important;
+    font-family: 'Cinzel', serif !important;
      text-transform: uppercase !important;
+    letter-spacing: 1px;
      font-size: 0.85em !important;
      padding: 8px !important;
@@ Line 48: / Line 57: @@
 }
-/* Data Rows: Padding added here so text doesn't touch the edges */
+/* --- THE SPLIT ROW FIX --- */
 .portable-infobox .pi-data {
+    display: flex !important; /* Forces Label and Value on the same line */
+    padding: 0 !important;    /* Allows backgrounds to hit the edge */
+    border-bottom: 1px solid #ddd;
+    align-items: stretch;     /* Ensures both sides are the same height */
+}
+/* The Label (Left Side - Darker) */
+.portable-infobox .pi-data-label {
+    background-color: var(--kh-label-bg) !important;
+    color: var(--kh-dark-text) !important;
+    font-family: 'Cinzel', serif !important;
+    font-weight: bold !important;
+    font-size: 0.8em !important;
+    text-transform: uppercase;
      padding: 8px 12px !important;
-     border-bottom: 1px solid #eeeeee;
+    flex: 0 0 40%; /* Locks the label to 40% width */
+     border-right: 1px solid #ddd;
+    display: flex;
+    align-items: center;
 }
-/* Label & Value styling */
+/* The Value (Right Side - Lighter) */
-.pi-data-label {
+.portable-infobox .pi-data-value {
-     font-weight: bold;
+     background-color: var(--kh-data-bg) !important;
-    color: var(--kh-dark-text);
+    padding: 8px 12px !important;
+    flex: 1; /* Takes up the remaining 60% */
+    font-size: 0.95em;
+    display: flex;
+    align-items: center;
 }
-/* Image styling */
+/* Image Handling */
 .portable-infobox .pi-image {
      padding: 0;
      text-align: center;
      background: #fff;
-     border-bottom: 1px solid #eee;
+     border-bottom: 1px solid var(--kh-green);
 }
@@ Line 73: / Line 103: @@
 }
-/* 3. CONTENT DECORATIONS (Leaf Icons) */
+/* 4. CONTENT DECORATIONS (Leaf Icons) */
 .mw-parser-output h2,
 .mw-parser-output h3 {
      border-bottom: 2px solid var(--kh-green) !important;
      color: var(--kh-green) !important;
+    font-family: 'Cinzel', serif !important;
      margin-top: 1.5em !important;
 }
@@ Line 84: / Line 115: @@
 .mw-parser-output h3::before { content: "\1F343  "; font-size: 1em; }
-/* 4. TABLE OF CONTENTS */
+/* 5. TABLE OF CONTENTS */
 #toc, .toc, .mw-toc {
      border: 2px solid var(--kh-green) !important;
@@ Line 92: / Line 123: @@
 .tocnumber { color: var(--kh-yellow) !important; font-weight: bold; }
-.toctext { color: var(--kh-green) !important; }
+.toctext { color: var(--kh-green) !important; font-family: 'Cinzel', serif; }
-/* 5. USER TOOLS & NAVIGATION */
-#p-personal a,
-.nav-link,
-.anisa-user-menu a {
-    color: var(--kh-green) !important;
-    font-weight: bold !important;
-}
 /* 6. AUTOMATIC FOOTER */
@@ Line 113: / Line 136: @@
      color: var(--kh-green) !important;
      font-size: 0.8em !important;
-     letter-spacing: 2px !important;
+    font-family: 'Cinzel', serif;
+     letter-spacing: 2px;
 }