MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
+/* ============================================================
+   KH LEAF THEME - FINAL UNIFIED VERSION
+   ============================================================ */
+/* 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');
-/* 1. UNIVERSAL COLOR VARIABLES */
+/* 2. UNIVERSAL COLOR VARIABLES */
 :root {
      --kh-green: #3e5a47;
@@ Line 7: / Line 12: @@
      --kh-dark-text: #2d4234;
      --kh-light-bg: #f9fdfa;
-     --kh-label-bg: #f2f2f2;
+     --kh-label-bg: #f2f2f2; /* Subtle grey for the left side */
-     --kh-data-bg: #ffffff;
+     --kh-data-bg: #ffffff;  /* Pure white for the right side */
 }
-/* 2. PORTABLE INFOBOX: EDGE-TO-EDGE & SPLIT ROW FIX */
+/* 3. PORTABLE INFOBOX: EDGE-TO-EDGE & SPLIT ROW FIX */
 .portable-infobox {
      width: 300px;
@@ Line 25: / Line 30: @@
 }
+/* Title: Kingdom Hearts Style */
 .portable-infobox .pi-title {
      background-color: var(--kh-yellow) !important;
@@ Line 38: / Line 44: @@
 }
+/* Headers: Green "Command Menu" style */
 .portable-infobox .pi-header {
      background-color: var(--kh-green) !important;
@@ Line 50: / Line 57: @@
 }
+/* --- THE SPLIT ROW FIX --- */
 .portable-infobox .pi-data {
-     display: flex !important;
+     display: flex !important; /* Forces Label and Value on the same line */
-     padding: 0 !important;
+     padding: 0 !important;    /* Allows backgrounds to hit the edge */
      border-bottom: 1px solid #ddd;
-     align-items: stretch;
+     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;
@@ Line 65: / Line 74: @@
      text-transform: uppercase;
      padding: 8px 12px !important;
-     flex: 0 0 40%;
+     flex: 0 0 40%; /* Locks the label to 40% width */
      border-right: 1px solid #ddd;
      display: flex;
@@ Line 71: / Line 80: @@
 }
+/* The Value (Right Side - Lighter) */
 .portable-infobox .pi-data-value {
      background-color: var(--kh-data-bg) !important;
      padding: 8px 12px !important;
-     flex: 1;
+     flex: 1; /* Takes up the remaining 60% */
      font-size: 0.95em;
      display: flex;
@@ Line 80: / Line 90: @@
 }
+/* Image Handling */
 .portable-infobox .pi-image {
      padding: 0;
@@ Line 92: / Line 103: @@
 }
-/* 3. CONTENT DECORATIONS (Leaf Icons) */
+/* 4. CONTENT DECORATIONS (Leaf Icons) */
-.mw-parser-output h2, .mw-parser-output h3 {
+.mw-parser-output h2,
+.mw-parser-output h3 {
      border-bottom: 2px solid var(--kh-green) !important;
      color: var(--kh-green) !important;
@@ Line 103: / 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 113: / Line 125: @@
 .toctext { color: var(--kh-green) !important; font-family: 'Cinzel', serif; }
-/* 5. AUTOMATIC FOOTER */
+/* 6. AUTOMATIC FOOTER */
 .mw-parser-output::after {
      content: "🍃\A END OF ENTRY";
@@ Line 128: / Line 140: @@
 }
-/* 6. SIDEBAR STYLING */
+/* 7. CLEANUP (Compatibility Shield) */
-.vector-menu-portal .vector-menu-heading, #p-navigation h3, #p-DATABASE h3 {
+#p-cactions h3::before,
+#p-search h3::before,
+.vector-menu-heading::before {
+    content: none !important;
+}
+/* Styling Sidebar Headings */
+.vector-menu-portal .vector-menu-heading,
+#p-navigation h3,
+#p-DATABASE h3 {
      font-family: 'Cinzel', serif !important;
      color: var(--kh-green) !important;
@@ Line 137: / Line 158: @@
      border-bottom: 1px solid var(--kh-yellow);
      margin-bottom: 8px;
-}
-/* Cleanup */
-#p-cactions h3::before, #p-search h3::before, .vector-menu-heading::before {
-    content: none !important;
 }