Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit Advanced mobile edit |
| (11 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Version 1.1.4 - Universal KH Leaf (Clean Base for Cosmos & Anisa) */
| | @import url("/wiki/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css"); |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap'); | |
|
| |
|
| /* 1. GLOBAL VARIABLES */
| | body { background-color: #f9fdfa !important; } |
| :root {
| |
| --kh-green: #3e5a47;
| |
| --kh-yellow: #ffd700;
| |
| --kh-dark-text: #2d4234;
| |
| --kh-light-bg: #f9fdfa;
| |
| --kh-label-bg: #f2f2f2;
| |
| --kh-data-bg: #ffffff;
| |
| --kh-border: 2px solid var(--kh-green);
| |
| }
| |
| | |
| /* 2. UNIVERSAL COLORS & FONTS */
| |
| body { | |
| font-family: 'Crimson Pro', serif !important;
| |
| }
| |
| | |
| a { color: var(--kh-green); }
| |
| a:visited { color: var(--kh-dark-text); }
| |
| a.new { color: #ba0000 !important; }
| |
| | |
| h1, h2, h3, h4, .mw-headline {
| |
| color: var(--kh-green) !important;
| |
| font-family: 'Cinzel', serif !important;
| |
| }
| |
| h1, h2 { border-bottom: var(--kh-border) !important; }
| |
| h2::before, h3::before { content: "\1F343\0020"; display: inline-block; }
| |
| | |
| /* 3. UNIVERSAL SKIN ELEMENTS */
| |
| /* This colors the header for both Cosmos and Anisa */
| |
| #cosmos-header, #cosmos-navigation, .anisa-header, .vector-header, .header-container {
| |
| background-color: var(--kh-green) !important;
| |
| border-bottom: 3px solid var(--kh-yellow) !important;
| |
| }
| |
| | |
| /* 4. COSMOS SPECIFIC (Clean Customization) */
| |
| /* This targets the Cosmos "Command Menu" bubble without forcing its position */
| |
| .cosmos-menu, .cosmos-button {
| |
| background-color: var(--kh-green) !important;
| |
| border: 2px solid var(--kh-yellow) !important;
| |
| }
| |
| | |
| /* 5. ANISA SPECIFIC (Clean Customization) */
| |
| .skin-anisa #mw-content-block {
| |
| background-color: var(--kh-light-bg);
| |
| border-radius: 8px;
| |
| }
| |
| | |
| /* 6. AUTOMATIC FOOTER */
| |
| .mw-parser-output::after {
| |
| content: "\1F343\000A 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-family: 'Cinzel', serif;
| |
| }
| |
| | |
| /* FORCE DESKTOP VIEW ON MOBILE */
| |
| @media only screen and (max-width: 768px) {
| |
| /* Prevent the container from collapsing */
| |
| #cosmos-content, .mw-body, #content {
| |
| min-width: 1000px !important;
| |
| margin: 10px auto !important;
| |
| }
| |
|
| |
|
| /* Keep the header wide enough for the links */
| | #cosmos-content { padding: 10px !important; } |
| #cosmos-header, .header-container {
| |
| min-width: 1000px !important;
| |
| }
| |
|
| |
|
| /* Ensure the body doesn't zoom in weirdly */ | | #cosmos-content-main { |
| body { | | width: 100% !important; |
| min-width: 1000px !important;
| | padding: 20px !important; |
| overflow-x: auto !important;
| | background: #fff !important; |
| } | | border-radius: 8px !important; |
| | box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; |
| } | | } |
|
| |
|
| /* DISABLE COSMOS MOBILE HIDING */
| | #cosmos-right-rail { display: none !important; } |
| @media only screen and (max-width: 1024px) {
| |
| /* Force the sidebar/rail to stay visible */
| |
| #cosmos-right-rail, .cosmos-right-rail {
| |
| display: block !important;
| |
| visibility: visible !important;
| |
| width: 300px !important; /* Standard rail width */
| |
| }
| |
| | |
| /* Prevent the main container from expanding to 100% */
| |
| #cosmos-content {
| |
| display: flex !important;
| |
| flex-direction: row !important;
| |
| width: 1200px !important;
| |
| max-width: 1200px !important;
| |
| }
| |
| | |
| /* Keep the header items from stacking */
| |
| #cosmos-header, .header-container {
| |
| display: flex !important;
| |
| flex-wrap: nowrap !important;
| |
| width: 1200px !important;
| |
| }
| |
| }
| |
| | |
| /* FORCE DESKTOP LAYOUT WITHIN MOBILE FRONTEND */
| |
| .mw-mf-viewport #cosmos-content,
| |
| .mw-mf-viewport .mw-body {
| |
| display: flex !important;
| |
| flex-direction: row !important; /* Forces the Rail to stay to the right */
| |
| width: 1200px !important;
| |
| max-width: 1200px !important;
| |
| margin: 0 auto !important;
| |
| }
| |
| | |
| /* Force the Sidebar (Rail) to stay visible */
| |
| .mw-mf-viewport #cosmos-right-rail {
| |
| display: block !important;
| |
| width: 300px !important;
| |
| min-width: 300px !important;
| |
| }
| |
| | |
| /* Stop the header from collapsing into a hamburger menu only */
| |
| .mw-mf-viewport #cosmos-header {
| |
| width: 1200px !important;
| |
| display: flex !important;
| |
| }
| |
| | |
| /* FORCE DESKTOP STRUCTURE ON MOBILE VIEW */
| |
| | |
| /* 1. Reset the main container to allow side-by-side */
| |
| .mw-body, #cosmos-content {
| |
| display: flex !important;
| |
| flex-direction: row !important; /* Forces side-by-side */
| |
| flex-wrap: nowrap !important;
| |
| width: 1200px !important; /* Or whatever width you prefer */
| |
| margin: 0 auto !important;
| |
| }
| |
| | |
| /* 2. Force the Content area to not take up 100% */
| |
| #cosmos-content-main, .mw-content-ltr {
| |
| width: 850px !important; /* Content width */
| |
| flex: 0 0 850px !important;
| |
| }
| |
| | |
| /* 3. Force the Rail (Sidebar) to show up */
| |
| #cosmos-right-rail, .cosmos-right-rail { | |
| display: block !important;
| |
| visibility: visible !important;
| |
| width: 300px !important; /* Sidebar width */
| |
| flex: 0 0 300px !important;
| |
| margin-left: 20px !important;
| |
| } | |
|
| |
|
| /* 4. Stop the Header from collapsing */
| | .portable-infobox { |
| #cosmos-header {
| | width: 100% !important; |
| display: flex !important; | | float: none !important; |
| width: 1200px !important; | | margin: 10px 0 !important; |
| justify-content: space-between !important; | |
| } | | } |
