MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Version 32.0 - Dual-Skin Miraheze | /* Version 32.0 - Dual-Skin Miraheze Reconstruction | ||
Optimized for Anisa (Desktop) and Cosmos (Mobile) | |||
*/ | */ | ||
| Line 8: | Line 8: | ||
--kh-green: #3e5a47; | --kh-green: #3e5a47; | ||
--kh-yellow: #ffd700; | --kh-yellow: #ffd700; | ||
--miraheze-border: #a2a9b1; | |||
} | } | ||
/* --- GLOBAL TYPOGRAPHY --- */ | /* --- 1. GLOBAL TYPOGRAPHY --- */ | ||
body { | body { | ||
font-family: 'Crimson Pro', serif !important; | font-family: 'Crimson Pro', serif !important; | ||
/* Fixes the "Small Text" issue in Anisa/Desktop */ | |||
font-size: 16px !important; | |||
line-height: 1.6 !important; | line-height: 1.6 !important; | ||
} | } | ||
/* --- ANISA | /* --- 2. ANISA DESKTOP SPECIFICS --- */ | ||
.skin-anisa #content, | /* Ensures the content area in Anisa feels substantial and centered */ | ||
.skin-anisa .mw-body { | .skin-anisa #content, .skin-anisa .mw-body { | ||
background-color: #ffffff !important; | |||
border: 1px solid var(--miraheze-border) !important; | |||
padding: 2em 3em !important; | |||
margin: 20px auto !important; | margin: 20px auto !important; | ||
max-width: 1150px !important; | |||
box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; | |||
} | } | ||
/* --- COSMOS | /* --- 3. COSMOS MOBILE SPECIFICS --- */ | ||
.skin-cosmos #content | .skin-cosmos #content { | ||
padding: 15px !important; | |||
padding: | |||
margin: 0 !important; | margin: 0 !important; | ||
border: none !important; | |||
} | } | ||
/* --- | /* --- 4. THE MIRAHEZE INFOBOX (SHARED) --- */ | ||
.portable-infobox { | .portable-infobox { | ||
background-color: #fff !important; | background-color: #fff !important; | ||
border: 1px solid | border: 1px solid var(--miraheze-border) !important; | ||
width: 280px !important; | width: 280px !important; | ||
float: right !important; | float: right !important; | ||
| Line 43: | Line 46: | ||
border-collapse: collapse !important; | border-collapse: collapse !important; | ||
border-spacing: 0 !important; | border-spacing: 0 !important; | ||
} | } | ||
| Line 51: | Line 53: | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
font-weight: bold !important; | font-weight: bold !important; | ||
padding: | padding: 15px 10px !important; | ||
font-size: 1. | font-size: 1.25em !important; | ||
text-align: center !important; | text-align: center !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--miraheze-border) !important; | ||
} | } | ||
| Line 61: | Line 63: | ||
color: #fff !important; | color: #fff !important; | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
padding: | padding: 10px 5px !important; | ||
text-align: center !important; | text-align: center !important; | ||
font-weight: bold !important; | |||
} | } | ||
/* Data Row Precision */ | |||
.pi-item.pi-data { | .pi-item.pi-data { | ||
display: table-row !important; | display: table-row !important; | ||
| Line 74: | Line 78: | ||
background-color: #f2f2f2 !important; | background-color: #f2f2f2 !important; | ||
font-weight: bold !important; | font-weight: bold !important; | ||
padding: | padding: 8px !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--miraheze-border) !important; | ||
border-right: 1px solid | border-right: 1px solid var(--miraheze-border) !important; | ||
} | } | ||
.pi-data-value { | .pi-data-value { | ||
display: table-cell !important; | display: table-cell !important; | ||
padding: | padding: 8px !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--miraheze-border) !important; | ||
background-color: #ffffff !important; | background-color: #ffffff !important; | ||
} | } | ||
/* --- TABLE OF CONTENTS --- */ | /* --- 5. TABLE OF CONTENTS --- */ | ||
#toc, .toc { | #toc, .toc { | ||
background-color: #f8f9fa !important; | background-color: #f8f9fa !important; | ||
border: 1px solid | border: 1px solid var(--miraheze-border) !important; | ||
padding: 10px !important; | padding: 10px !important; | ||
display: table !important; | display: table !important; | ||
} | } | ||
/* --- MOBILE RESPONSIVENESS --- */ | /* --- 6. MOBILE RESPONSIVENESS --- */ | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.portable-infobox { | .portable-infobox { | ||