MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Version 1.0 | /* Version 1.1.0 - Universal KH Leaf Framework */ | ||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap'); | ||
/* 1. | /* 1. GLOBAL VARIABLES (The "Brain" of your theme) */ | ||
:root { | :root { | ||
--kh-green: #3e5a47; | --kh-green: #3e5a47; | ||
| Line 10: | Line 10: | ||
--kh-label-bg: #f2f2f2; | --kh-label-bg: #f2f2f2; | ||
--kh-data-bg: #ffffff; | --kh-data-bg: #ffffff; | ||
/* Universal Borders */ | |||
--kh-border: 2px solid var(--kh-green); | |||
} | } | ||
/* 2. | /* 2. UNIVERSAL LINK & TEXT COLORS */ | ||
/* This affects the whole wiki, regardless of skin or extension */ | |||
a { color: var(--kh-green) !important; } | |||
a:visited { color: var(--kh-dark-text) !important; } | |||
a.new { color: #ba0000 !important; } /* Red for broken links */ | |||
/* 3. UNIVERSAL HEADERS (The "Leaf" Look) */ | |||
h1, h2, h3, h4, .mw-headline { | |||
color: var(--kh-green) !important; | |||
font-family: 'Cinzel', serif !important; | |||
} | |||
h1, h2 { | |||
border-bottom: var(--kh-border) !important; | |||
} | |||
/* Adds the leaf to every H2 and H3 on the wiki */ | |||
h2::before, h3::before { | |||
content: "\1F343\0020"; | |||
display: inline-block; | |||
} | |||
/* 4. EXTENSION COMPATIBILITY: PORTABLE INFOBOXES */ | |||
.portable-infobox { | .portable-infobox { | ||
background-color: var(--kh-data-bg) !important; | background-color: var(--kh-data-bg) !important; | ||
border: | border: var(--kh-border) !important; | ||
font-family: 'Crimson Pro', serif !important; | font-family: 'Crimson Pro', serif !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
| Line 30: | Line 49: | ||
color: var(--kh-dark-text) !important; | color: var(--kh-dark-text) !important; | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
border-bottom: var(--kh-border); | |||
border-bottom: | |||
} | } | ||
| Line 43: | Line 56: | ||
color: #ffffff !important; | color: #ffffff !important; | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
} | } | ||
/* Split-Row Styling for all Infoboxes */ | |||
.portable-infobox .pi-data { | .portable-infobox .pi-data { | ||
display: flex !important; | display: flex !important; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
} | } | ||
.portable-infobox .pi-data-label { | .portable-infobox .pi-data-label { | ||
background-color: var(--kh-label-bg) !important; | background-color: var(--kh-label-bg) !important; | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
flex: 0 0 40% !important; | flex: 0 0 40% !important; | ||
border-right: 1px solid #ddd; | border-right: 1px solid #ddd; | ||
} | } | ||
. | /* 5. UNIVERSAL WIKI WIDGETS (TOC, Categories, etc.) */ | ||
#toc, .toc, .catlinks, .mw-ui-button { | |||
border: var(--kh-border) !important; | |||
background-color: var(--kh-light-bg) !important; | |||
font- | font-family: 'Crimson Pro', serif; | ||
} | } | ||
. | .tocnumber { color: var(--kh-yellow) !important; } | ||
} | |||
. | /* 6. SKIN-SPECIFIC ADAPTATION (Cosmos & Others) */ | ||
/* This forces the top bars of any skin to try and use your green */ | |||
#cosmos-header, #cosmos-navigation, .vector-header, .header-container { | |||
background-color: var(--kh-green) !important; | |||
border-bottom: 3px solid var(--kh-yellow) !important; | |||
/* | |||
. | |||
} | } | ||
/* 7. THE AUTOMATIC FOOTER */ | |||
/* | |||
.mw-parser-output::after { | .mw-parser-output::after { | ||
content: "\1F343\000A END OF ENTRY"; | content: "\1F343\000A END OF ENTRY"; | ||
| Line 125: | Line 97: | ||
border-top: 1px solid var(--kh-green) !important; | border-top: 1px solid var(--kh-green) !important; | ||
color: var(--kh-green) !important; | color: var(--kh-green) !important; | ||
font-family: 'Cinzel', serif; | font-family: 'Cinzel', serif; | ||
} | } | ||