MediaWiki:Common.css: Difference between revisions

Line 1:

/* ============================================================

KH LEAF THEME - ~~COMPLETED~~ VERSION

KH LEAF THEME - MASTER CONSOLIDATED VERSION

============================================================ */

/* 1. THE MAIN CONTAINER */

/* 1. THE MAIN INFOBOX CONTAINER */

.portable-infobox {

background-color: #ffffff !important;

Line 17:

}

/* 2. ~~THE~~ TITLE (Solid Blue, Full ~~Width~~) */

/* 2. INFOBOX TITLE (Solid Blue, White Text, Full Stretch) */

.portable-infobox .pi-title {

background-color: #003366 !important;

Line 28:

margin: -2px -2px 0 -2px !important;

box-sizing: border-box !important;

border: none !important;

}

/* 3. SECTION HEADERS (Solid Green, White Text) */

/* 3. INFOBOX SECTION HEADERS (Solid Green, White Text) */

.portable-infobox .pi-header {

background-color: #3e5a47 !important;

Line 43:

Line 44:

text-transform: uppercase !important;

letter-spacing: 1px !important;

border: none !important;

}

/* 4. IMAGE AREA (Centered with Soft Green Tint) */

/* 4. INFOBOX IMAGE AREA (Centered with Soft Green Tint) */

.portable-infobox .pi-image {

background-color: #f2f7f4 !important; ~~/* Soft leafy-green tint */~~

background-color: #f2f7f4 !important;

padding: 15px !important;

text-align: center !important;

Line 61:

Line 63:

}

/* 5. DATA ROWS & LEAF BULLETS */

/* 5. INFOBOX DATA ROWS & LEAF BULLETS */

.portable-infobox .pi-data {

display: flex !important;

Line 83:

Line 85:

}

/* ~~Leaf~~ Bullets 🍃 */

/* List Bullets inside Infobox */

.portable-infobox .pi-data-value ul {

list-style: none !important;

Line 96:

Line 98:

}

/* 6. ~~PAGE~~ HEADERS (H2/H3) LEAF DECORATION */

/* 6. ARTICLE HEADERS (H2/H3) LEAF DECORATION */

/* Scoped to .mw-parser-output to protect Search Bar/Sidebar */

.mw-parser-output h2, .mw-parser-output h3 {

border-bottom: 2px solid #3e5a47 !important;

color: #003366 !important;

padding-bottom: 5px !important;

clear: none !important;

}

Line 106:

Line 110:

.mw-parser-output h3::before { content: "\1F343 " !important; font-size: 16px !important; }

/* 7. ~~UI FIXES~~ */

/* 7. AUTOMATIC "END OF ENTRY" FOOTER */

~~#p-search,~~ .~~vector~~-~~search~~-~~box~~ {

.mw-parser-output::after {

~~float~~: ~~right~~ !important;

content: "🍃\A END OF ENTRY";

}

white-space: pre !important;

display: block !important;

~~/* ============================================================~~

~~LEAF LEGEND FOOTER~~

~~============================================================ */~~

~~.leaf-footer {~~

~~width~~: ~~100%~~ !important;

text-align: center !important;

margin-top: ~~3em~~ !important;

margin-top: 50px !important;

padding-top: ~~1em~~ !important;

padding-top: 20px !important;

border-top: 1px solid #3e5a47 !important; ~~/* Forest Green Line */~~

border-top: 1px solid #3e5a47 !important;

font-family: "Georgia", serif !important;

color: #003366 !important; ~~/* KH Blue */~~

color: #003366 !important;

font-size: ~~12px~~ !important;

font-size: 10px !important;

letter-spacing: ~~2px~~ !important;

letter-spacing: 3px !important;

~~text~~-~~transform~~: ~~uppercase~~ !important;

font-weight: bold !important;

clear: both !important;

}

.~~leaf~~-~~footer::before~~ {

/* 8. UI FIXES (SEARCH BAR ALIGNMENT) */

~~content~~: ~~"🍃 "~~;

#p-search, .vector-search-box, #searchform {

~~display~~: ~~block~~ !important;

float: right !important;

~~font-size~~: ~~20px~~ !important;

margin-left: auto !important;

~~margin-bottom~~: ~~5px~~ !important;

}

/* Shield Sidebar/Menus from Leaf Decorations */

#mw-panel h3::before, .vector-menu-heading::before, #p-search h3::before {

content: none !important;

display: none !important;

}

@@ Line 1: / Line 1: @@
 /* ============================================================
-    KH LEAF THEME - COMPLETED VERSION
+    KH LEAF THEME - MASTER CONSOLIDATED VERSION
     ============================================================ */
-/* 1. THE MAIN CONTAINER */
+/* 1. THE MAIN INFOBOX CONTAINER */
 .portable-infobox {
      background-color: #ffffff !important;
@@ Line 17: / Line 17: @@
 }
-/* 2. THE TITLE (Solid Blue, Full Width) */
+/* 2. INFOBOX TITLE (Solid Blue, White Text, Full Stretch) */
 .portable-infobox .pi-title {
      background-color: #003366 !important;
@@ Line 28: / Line 28: @@
      margin: -2px -2px 0 -2px !important;
      box-sizing: border-box !important;
+    border: none !important;
 }
-/* 3. SECTION HEADERS (Solid Green, White Text) */
+/* 3. INFOBOX SECTION HEADERS (Solid Green, White Text) */
 .portable-infobox .pi-header {
      background-color: #3e5a47 !important;
@@ Line 43: / Line 44: @@
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
+    border: none !important;
 }
-/* 4. IMAGE AREA (Centered with Soft Green Tint) */
+/* 4. INFOBOX IMAGE AREA (Centered with Soft Green Tint) */
 .portable-infobox .pi-image {
-     background-color: #f2f7f4 !important; /* Soft leafy-green tint */
+     background-color: #f2f7f4 !important;
      padding: 15px !important;
      text-align: center !important;
@@ Line 61: / Line 63: @@
 }
-/* 5. DATA ROWS & LEAF BULLETS */
+/* 5. INFOBOX DATA ROWS & LEAF BULLETS */
 .portable-infobox .pi-data {
      display: flex !important;
@@ Line 83: / Line 85: @@
 }
-/* Leaf Bullets 🍃 */
+/* List Bullets inside Infobox */
 .portable-infobox .pi-data-value ul {
      list-style: none !important;
@@ Line 96: / Line 98: @@
 }
-/* 6. PAGE HEADERS (H2/H3) LEAF DECORATION */
+/* 6. ARTICLE HEADERS (H2/H3) LEAF DECORATION */
+/* Scoped to .mw-parser-output to protect Search Bar/Sidebar */
 .mw-parser-output h2, .mw-parser-output h3 {
      border-bottom: 2px solid #3e5a47 !important;
      color: #003366 !important;
      padding-bottom: 5px !important;
+    clear: none !important;
 }
@@ Line 106: / Line 110: @@
 .mw-parser-output h3::before { content: "\1F343  " !important; font-size: 16px !important; }
-/* 7. UI FIXES */
+/* 7. AUTOMATIC "END OF ENTRY" FOOTER */
-#p-search, .vector-search-box {
+.mw-parser-output::after {
-     float: right !important;
+     content: "🍃\A END OF ENTRY";
-}
+    white-space: pre !important;
+     display: block !important;
-/* ============================================================
-   LEAF LEGEND FOOTER
-   ============================================================ */
-.leaf-footer {
-     width: 100% !important;
      text-align: center !important;
-     margin-top: 3em !important;
+     margin-top: 50px !important;
-     padding-top: 1em !important;
+     padding-top: 20px !important;
-     border-top: 1px solid #3e5a47 !important; /* Forest Green Line */
+     border-top: 1px solid #3e5a47 !important;
      font-family: "Georgia", serif !important;
-     color: #003366 !important; /* KH Blue */
+     color: #003366 !important;
-     font-size: 12px !important;
+     font-size: 10px !important;
-     letter-spacing: 2px !important;
+     letter-spacing: 3px !important;
-     text-transform: uppercase !important;
+     font-weight: bold !important;
      clear: both !important;
 }
-.leaf-footer::before {
+/* 8. UI FIXES (SEARCH BAR ALIGNMENT) */
-     content: "🍃  ";
+#p-search, .vector-search-box, #searchform {
-     display: block !important;
+     float: right !important;
-     font-size: 20px !important;
+     margin-left: auto !important;
-     margin-bottom: 5px !important;
+}
+/* Shield Sidebar/Menus from Leaf Decorations */
+#mw-panel h3::before, .vector-menu-heading::before, #p-search h3::before {
+     content: none !important;
+     display: none !important;
 }