MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Version | /* Version 34.0 - Anisa Desktop & Cosmos Mobile Precision | ||
Fixes: | Fixes: Large Navigation, Tab Spacing, and Content Padding | ||
*/ | */ | ||
@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. GLOBAL | :root { | ||
--kh-green: #3e5a47; | |||
--kh-yellow: #ffd700; | |||
--miraheze-border: #a2a9b1; | |||
} | |||
/* --- 1. GLOBAL & CONTENT AREA --- */ | |||
body { | body { | ||
font-family: 'Crimson Pro', serif !important; | font-family: 'Crimson Pro', serif !important; | ||
font-size: | font-size: 18px !important; /* Increased base size */ | ||
} | |||
/* The "Small but Big" Content Fix: Large padding, precise margins */ | |||
.skin-anisa #content, | |||
.skin-anisa .mw-body { | |||
background-color: #ffffff !important; | |||
border: 1px solid var(--miraheze-border) !important; | |||
padding: 40px 50px !important; /* Large internal "breathing room" */ | |||
margin-top: 30px !important; /* Big gap between tabs and content */ | |||
margin-left: auto !important; | |||
margin-right: auto !important; | |||
max-width: 1100px !important; | |||
line-height: 1.8 !important; /* Comfortable reading height */ | |||
} | } | ||
/* --- 2. | /* --- 2. NAVIGATION TABS (Read, Edit, Discussion, etc.) --- */ | ||
/* Target | /* Target every navigation link and its label */ | ||
.skin-anisa #left-navigation .vector-menu- | .skin-anisa #left-navigation .vector-menu-tabs li a, | ||
.skin-anisa #right-navigation .vector-menu- | .skin-anisa #right-navigation .vector-menu-tabs li a, | ||
.skin-anisa #p-views .vector-menu-content-list li a | .skin-anisa #p-views .vector-menu-content-list li a, | ||
.skin-anisa #p-cactions .vector-menu-heading-label, | .skin-anisa #p-cactions .vector-menu-heading-label, | ||
.skin-anisa .vector-menu-tabs li a span { | .skin-anisa .vector-menu-tabs li a span { | ||
font-size: | font-size: 22px !important; /* Force a much larger font */ | ||
font-weight: 400 !important; /* Regular weight | font-weight: 400 !important; /* Regular weight as requested */ | ||
color: #202122 !important; | color: #202122 !important; | ||
text-transform: none !important; | text-transform: none !important; | ||
padding: 12px 20px !important; /* Adds space BETWEEN the tabs */ | |||
height: auto !important; | |||
} | } | ||
/* | /* Space out the individual tab containers */ | ||
.skin-anisa | .skin-anisa .vector-menu-tabs li { | ||
margin- | margin-right: 15px !important; /* Horizontal space between tabs */ | ||
background-image: none !important; /* Removes default dividers if present */ | |||
} | } | ||
/* -- | /* The "Actions" dropdown label specifically */ | ||
.skin-anisa #p-cactions .vector-menu-heading-label { | |||
padding: 10px 25px !important; | |||
border: 1px solid | border: 1px solid transparent; | ||
} | } | ||
/* --- 3. MIRAHEZE INFOBOX (Seamless Look) --- */ | |||
.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; | ||
margin: 0 0 | margin: 0 0 1.5em 2em !important; | ||
border-collapse: collapse !important; | border-collapse: collapse !important; | ||
font-size: 0.9em !important; | |||
} | } | ||
.portable-infobox .pi-title { | .portable-infobox .pi-title { | ||
background-color: | background-color: var(--kh-yellow) !important; | ||
color: #000 !important; | color: #000 !important; | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
padding: | padding: 18px 10px !important; | ||
font-size: 1. | font-size: 1.3em !important; | ||
text-align: center !important; | text-align: center !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--miraheze-border) !important; | ||
} | } | ||
.portable-infobox .pi-header { | .portable-infobox .pi-header { | ||
background-color: | background-color: var(--kh-green) !important; | ||
color: #fff !important; | color: #fff !important; | ||
font-family: 'Cinzel', serif !important; | font-family: 'Cinzel', serif !important; | ||
padding: | padding: 12px 5px !important; | ||
text-align: center !important; | text-align: center !important; | ||
} | } | ||
.pi-item.pi-data { display: table-row !important; } | .pi-item.pi-data { display: table-row !important; } | ||
.pi-data-label { | .pi-data-label { | ||
| Line 71: | Line 91: | ||
width: 40% !important; | width: 40% !important; | ||
background-color: #f2f2f2 !important; | background-color: #f2f2f2 !important; | ||
padding: | padding: 10px !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; | ||
font-weight: 700 !important; | |||
} | } | ||
.pi-data-value { | .pi-data-value { | ||
display: table-cell !important; | display: table-cell !important; | ||
padding: | padding: 10px !important; | ||
border-bottom: 1px solid # | border-bottom: 1px solid var(--miraheze-border) !important; | ||
} | |||
/* --- 4. TABLE OF CONTENTS --- */ | |||
#toc, .toc { | |||
background-color: #f8f9fa !important; | |||
border: 1px solid var(--miraheze-border) !important; | |||
padding: 15px !important; | |||
margin-bottom: 2em !important; | |||
} | |||
/* --- 5. COSMOS MOBILE OVERRIDE --- */ | |||
@media screen and (max-width: 768px) { | |||
.skin-cosmos #content { | |||
padding: 15px !important; | |||
margin: 0 !important; | |||
border: none !important; | |||
} | |||
.portable-infobox { | |||
float: none !important; | |||
width: 100% !important; | |||
margin: 1em 0 !important; | |||
} | |||
} | } | ||