MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ============================================================ | /* ============================================================ | ||
KH LEAF THEME - | KH LEAF THEME - THE "NO GAPS" VERSION | ||
============================================================ */ | ============================================================ */ | ||
/* 1. MAIN | /* 1. THE MAIN CONTAINER */ | ||
.portable-infobox { | |||
background-color: #ffffff !important; | background-color: #ffffff !important; | ||
border: 2px solid #003366 !important; | border: 2px solid #003366 !important; | ||
| Line 11: | Line 11: | ||
margin: 0 0 1em 1em !important; | margin: 0 0 1em 1em !important; | ||
font-family: "Georgia", serif !important; | font-family: "Georgia", serif !important; | ||
overflow: hidden !important; | |||
padding: 0 !important; /* Removes the inner gap */ | |||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
} | } | ||
/* | /* 2. THE TITLE (FORCED FULL WIDTH) */ | ||
.portable-infobox .pi-title { | |||
background-color: #003366 !important; | background-color: #003366 !important; | ||
color: #ffffff !important; | color: #ffffff !important; | ||
text-align: center !important; | text-align: center !important; | ||
padding: 12px 0 !important; | padding: 12px 0 !important; | ||
font-size: 16px !important; | font-size: 16px !important; | ||
display: block !important; | display: block !important; | ||
width: 100% !important; /* | width: calc(100% + 4px) !important; /* Pulls it over the border slightly */ | ||
margin: 0 !important; | margin: -2px -2px 0 -2px !important; /* Aligns with the main border */ | ||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
} | } | ||
/* | /* 3. SECTION HEADERS (FORCED FULL WIDTH) */ | ||
.portable-infobox .pi-header { | |||
background-color: #3e5a47 !important; | background-color: #3e5a47 !important; | ||
color: #ffffff !important; | color: #ffffff !important; | ||
text-align: center !important; | text-align: center !important; | ||
padding: 8px 0 !important; | padding: 8px 0 !important; | ||
font-size: 11px !important; | font-size: 11px !important; | ||
display: block !important; | display: block !important; | ||
width: 100% !important; | width: calc(100% + 4px) !important; | ||
margin: 0 !important; | margin: 0 -2px !important; | ||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
text-transform: uppercase !important; | text-transform: uppercase !important; | ||
} | } | ||
/* | /* 4. IMAGE AREA (THE CENTER FIX) */ | ||
.portable-infobox .pi-image { | |||
background-color: #f8f9fa !important; | |||
padding: 15px !important; | padding: 15px !important; | ||
text-align: center !important; | |||
display: block !important; | |||
} | } | ||
.portable-infobox .pi-image img { | |||
margin: 0 auto !important; | |||
display: block !important; | |||
max-width: 100% !important; | max-width: 100% !important; | ||
height: auto !important; | height: auto !important; | ||
} | } | ||
/* | /* 5. DATA ROWS & THE LEAVES */ | ||
.portable-infobox .pi-data { | |||
display: flex !important; | display: flex !important; | ||
border-bottom: 1px solid #eee !important; | border-bottom: 1px solid #eee !important; | ||
} | } | ||
.portable-infobox .pi-data-label { | |||
background-color: #f2f2f2 !important; | background-color: #f2f2f2 !important; | ||
padding: 10px !important; | padding: 10px !important; | ||
flex: 0 0 40% !important; | flex: 0 0 40% !important; | ||
border-right: 1px solid # | border-right: 1px solid #ddd !important; | ||
font-size: 11px !important; | font-size: 11px !important; | ||
font-weight: bold !important; | font-weight: bold !important; | ||
} | } | ||
.portable-infobox .pi-data-value { | |||
padding: 10px !important; | padding: 10px !important; | ||
flex: 1 !important; | flex: 1 !important; | ||
font-size: 11px !important; | font-size: 11px !important; | ||
} | } | ||
/* | /* RE-ADDING THE LEAVES (The Fix) */ | ||
/* This ensures the 🍃 emoji appears in lists inside the box */ | |||
.portable-infobox .pi-data-value ul { | |||
list-style: none !important; | list-style: none !important; | ||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
.portable-infobox .pi-data-value li::before { | |||
content: "\1F343 " !important; | content: "\1F343 " !important; | ||
font-size: 10px !important; | font-size: 10px !important; | ||
display: inline-block !important; | |||
} | |||
/* 6. MAIN PAGE HEADERS (H2/H3) LEAVES */ | |||
.mw-parser-output h2::before { | |||
content: "\1F343 " !important; | |||
font-size: 20px !important; | |||
} | |||
.mw-parser-output h3::before { | |||
content: "\1F343 " !important; | |||
font-size: 16px !important; | |||
} | } | ||
/* | /* 7. SEARCH BAR (KEEPS IT RIGHT) */ | ||
#p-search, .vector-search-box | #p-search, .vector-search-box { | ||
float: right !important; | float: right !important; | ||
} | } | ||