MediaWiki:Common.css: Difference between revisions
From Lenn's Fun Stuff
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ============================================================ | /* ============================================================ | ||
KH LEAF THEME - | KH LEAF THEME - FULLY UNIFIED & FIXED VERSION | ||
============================================================ */ | ============================================================ */ | ||
/* 1. UNIVERSAL COLOR VARIABLES | /* 1. UNIVERSAL COLOR VARIABLES */ | ||
:root { | :root { | ||
--kh-green: #3e5a47; | --kh-green: #3e5a47; | ||
| Line 12: | Line 11: | ||
} | } | ||
/* 2. | /* 2. PORTABLE INFOBOX: EDGE-TO-EDGE FIX */ | ||
.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. | 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 ( | /* 3. CONTENT DECORATIONS (Leaf Icons) */ | ||
.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 | /* 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 & | /* 5. USER TOOLS & NAVIGATION */ | ||
#p-personal a, | #p-personal a, | ||
.nav-link, | .nav-link, | ||
.anisa-user-menu a { | .anisa-user-menu a { | ||
color: var(--kh-green) !important; | color: var(--kh-green) !important; | ||
font-weight: bold !important; | font-weight: bold !important; | ||
} | } | ||
| Line 81: | Line 116: | ||
} | } | ||
/* 7. | /* 7. CLEANUP (Compatibility Shield) */ | ||
#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; | ||
} | } | ||
Revision as of 05:53, 12 March 2026
/* ============================================================
KH LEAF THEME - FULLY UNIFIED & FIXED VERSION
============================================================ */
/* 1. UNIVERSAL COLOR VARIABLES */
:root {
--kh-green: #3e5a47;
--kh-yellow: #ffd700;
--kh-dark-text: #2d4234;
--kh-light-bg: #f9fdfa;
}
/* 2. PORTABLE INFOBOX: EDGE-TO-EDGE FIX */
.portable-infobox {
width: 300px;
float: right;
margin-left: 20px;
margin-bottom: 15px;
background-color: #ffffff !important;
border: 2px solid var(--kh-green) !important;
font-family: "Georgia", serif !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 {
background-color: var(--kh-yellow) !important;
color: var(--kh-dark-text) !important;
font-weight: bold !important;
padding: 10px !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 {
background-color: var(--kh-green) !important;
color: #ffffff !important;
text-transform: uppercase !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 (Leaf Icons) */
.mw-parser-output h2,
.mw-parser-output h3 {
border-bottom: 2px solid var(--kh-green) !important;
color: var(--kh-green) !important;
margin-top: 1.5em !important;
}
.mw-parser-output h2::before { content: "\1F343 "; font-size: 1.2em; }
.mw-parser-output h3::before { content: "\1F343 "; font-size: 1em; }
/* 4. TABLE OF CONTENTS */
#toc, .toc, .mw-toc {
border: 2px solid var(--kh-green) !important;
background-color: var(--kh-light-bg) !important;
border-radius: 4px !important;
}
.tocnumber { color: var(--kh-yellow) !important; font-weight: bold; }
.toctext { color: var(--kh-green) !important; }
/* 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 */
.mw-parser-output::after {
content: "🍃\A END OF ENTRY";
white-space: pre !important;
display: block !important;
text-align: center !important;
margin-top: 50px !important;
padding-top: 20px !important;
border-top: 1px solid var(--kh-green) !important;
color: var(--kh-green) !important;
font-size: 0.8em !important;
letter-spacing: 2px !important;
}
/* 7. CLEANUP (Compatibility Shield) */
#p-cactions h3::before,
#p-search h3::before,
.vector-menu-heading::before {
content: none !important;
}