MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
/* ============================================================
/* ============================================================
   KH LEAF THEME - EXTENSION-FRIENDLY UNIVERSAL VERSION
   KH LEAF THEME - FULLY UNIFIED & FIXED VERSION
   ============================================================ */
   ============================================================ */


/* 1. UNIVERSAL COLOR VARIABLES  
/* 1. UNIVERSAL COLOR VARIABLES */
  Change these here to update the whole wiki at once! */
:root {
:root {
     --kh-green: #3e5a47;
     --kh-green: #3e5a47;
Line 12: Line 11:
}
}


/* 2. UNIVERSAL PORTABLE INFOBOX (Green & Yellow) */
/* 2. PORTABLE INFOBOX: EDGE-TO-EDGE FIX */
/* Targets the extension "PortableInfobox" specifically */
.portable-infobox {
.portable-infobox {
    width: 300px;
    float: right;
    margin-left: 20px;
    margin-bottom: 15px;
     background-color: #ffffff !important;
     background-color: #ffffff !important;
     border: 2px solid var(--kh-green) !important;
     border: 2px solid var(--kh-green) !important;
     font-family: "Georgia", serif !important;
     font-family: "Georgia", serif !important;
     box-shadow: 4px 4px 10px rgba(0,0,0,0.05) !important;
     box-shadow: 4px 4px 10px rgba(0,0,0,0.05) !important;
    padding: 0 !important; /* Removes the top and side gaps */
    overflow: hidden; /* Keeps the top corners clean */
}
}


/* Title: Fills the top perfectly */
.portable-infobox .pi-title {
.portable-infobox .pi-title {
     background-color: var(--kh-yellow) !important;
     background-color: var(--kh-yellow) !important;
Line 27: Line 32:
     padding: 10px !important;
     padding: 10px !important;
     text-align: center !important;
     text-align: center !important;
    margin: 0 !important;
    width: 100%;
    border-bottom: 1px solid var(--kh-green);
}
}


/* Headers: Fills the width perfectly */
.portable-infobox .pi-header {
.portable-infobox .pi-header {
     background-color: var(--kh-green) !important;
     background-color: var(--kh-green) !important;
     color: #ffffff !important;
     color: #ffffff !important;
     text-transform: uppercase !important;
     text-transform: uppercase !important;
     font-size: 0.9em !important;
     font-size: 0.85em !important;
    padding: 8px !important;
    text-align: center !important;
    margin: 0 !important;
}
 
/* Data Rows: Padding added here so text doesn't touch the edges */
.portable-infobox .pi-data {
    padding: 8px 12px !important;
    border-bottom: 1px solid #eeeeee;
}
 
/* Label & Value styling */
.pi-data-label {
    font-weight: bold;
    color: var(--kh-dark-text);
}
 
/* Image styling */
.portable-infobox .pi-image {
    padding: 0;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #eee;
}
 
.portable-infobox .pi-image img {
    max-width: 100%;
    height: auto;
}
}


/* 3. CONTENT DECORATIONS (Friendly for VisualEditor/Mobile) */
/* 3. CONTENT DECORATIONS (Leaf Icons) */
/* Targets standard H2/H3 markers used by almost every extension */
.mw-parser-output h2,  
.mw-parser-output h2,  
.mw-parser-output h3 {
.mw-parser-output h3 {
Line 48: Line 84:
.mw-parser-output h3::before { content: "\1F343  "; font-size: 1em; }
.mw-parser-output h3::before { content: "\1F343  "; font-size: 1em; }


/* 4. TABLE OF CONTENTS (Universal) */
/* 4. TABLE OF CONTENTS */
#toc, .toc, .mw-toc {
#toc, .toc, .mw-toc {
     border: 2px solid var(--kh-green) !important;
     border: 2px solid var(--kh-green) !important;
Line 58: Line 94:
.toctext { color: var(--kh-green) !important; }
.toctext { color: var(--kh-green) !important; }


/* 5. USER TOOLS & PERSONAL MENU (Safe Mode) */
/* 5. USER TOOLS & NAVIGATION */
/* We only color the text to stay compatible with Anisa & SocialProfile */
#p-personal a,  
#p-personal a,  
.nav-link,  
.nav-link,  
.anisa-user-menu a {
.anisa-user-menu a {
     color: var(--kh-green) !important; /* Change this for username color */
     color: var(--kh-green) !important;
     font-weight: bold !important;
     font-weight: bold !important;
}
}
Line 81: Line 116:
}
}


/* 7. EXTENSION COMPATIBILITY SHIELD */
/* 7. CLEANUP (Compatibility Shield) */
/* Prevents leaf icons from appearing on extension-specific menus
  (like the edit toolbar or social notifications) */
#p-cactions h3::before,
#p-cactions h3::before,
#p-search h3::before,
#p-search h3::before,
.vector-menu-heading::before {
.vector-menu-heading::before {
     content: none !important;
     content: none !important;
}
/* Portable Infobox Styling */
.portable-infobox {
    width: 300px; /* Limits the width so it's not full-screen */
    float: right; /* Pushes it to the right side of the page */
    margin-left: 20px;
    margin-bottom: 15px;
    background: #f9f9f9; /* Light background */
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
/* Make sure headers look good inside the box */
.pi-header {
    background-color: #222;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 5px;
}
/* Label styling (e.g., "Full Name", "Occupation") */
.pi-data-label {
    font-weight: bold;
    width: 40%;
}
}