MediaWiki:Common.css: Difference between revisions

From Lenn's Fun Stuff

No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
/* Version 1.1.4 - Universal KH Leaf (Clean Base for Cosmos & Anisa) */
/* Version 1.1.6 - Universal KH Leaf (Full Desktop-on-Mobile Force) */
@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 VARIABLES */
:root {
:root {
     --kh-green: #3e5a47;
     --kh-green: #3e5a47;
Line 8: Line 7:
     --kh-dark-text: #2d4234;
     --kh-dark-text: #2d4234;
     --kh-light-bg: #f9fdfa;
     --kh-light-bg: #f9fdfa;
    --kh-label-bg: #f2f2f2;
    --kh-data-bg: #ffffff;
     --kh-border: 2px solid var(--kh-green);
     --kh-border: 2px solid var(--kh-green);
}
}


/* 2. UNIVERSAL COLORS & FONTS */
/* 1. GLOBAL STYLES */
body {
body {  
     font-family: 'Crimson Pro', serif !important;
     font-family: 'Crimson Pro', serif !important;  
    background-color: var(--kh-light-bg);
    min-width: 1200px !important; /* Prevents body from shrinking */
}
}
a { color: var(--kh-green); }
a { color: var(--kh-green); }
a:visited { color: var(--kh-dark-text); }
h1, h2, h3, .mw-headline {  
a.new { color: #ba0000 !important; }
     color: var(--kh-green) !important;  
 
     font-family: 'Cinzel', serif !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"; }
h2::before, h3::before { content: "\1F343\0020"; display: inline-block; }


/* 3. UNIVERSAL SKIN ELEMENTS */
/* 2. COSMOS HEADER */
/* This colors the header for both Cosmos and Anisa */
#cosmos-header, .header-container {
#cosmos-header, #cosmos-navigation, .anisa-header, .vector-header, .header-container {
     background-color: var(--kh-green) !important;
     background-color: var(--kh-green) !important;
     border-bottom: 3px solid var(--kh-yellow) !important;
     border-bottom: 3px solid var(--kh-yellow) !important;
    min-width: 1200px !important;
}
}


/* 4. COSMOS SPECIFIC (Clean Customization) */
/* 3. FORCE DESKTOP STRUCTURE (Flexbox Logic) */
/* This targets the Cosmos "Command Menu" bubble without forcing its position */
/* This forces the Content and Rail to stay side-by-side even on mobile */
.cosmos-menu, .cosmos-button {
#cosmos-content, .mw-body {
    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-header, .header-container {
        min-width: 1000px !important;
    }
 
    /* Ensure the body doesn't zoom in weirdly */
    body {
        min-width: 1000px !important;
        overflow-x: auto !important;
    }
}
 
/* DISABLE COSMOS MOBILE HIDING */
@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;
     display: flex !important;
     flex-direction: row !important; /* Forces the Rail to stay to the right */
     flex-direction: row !important;  
    flex-wrap: nowrap !important;
     width: 1200px !important;
     width: 1200px !important;
     max-width: 1200px !important;
     max-width: 1200px !important;
     margin: 0 auto !important;
     margin: 40px auto !important;
    background: white;
}
}


/* Force the Sidebar (Rail) to stay visible */
/* Force the Sidebar (Rail) to be visible and fixed width */
.mw-mf-viewport #cosmos-right-rail {
#cosmos-right-rail, .cosmos-right-rail {
     display: block !important;
     display: block !important;
    visibility: visible !important;
     width: 300px !important;
     width: 300px !important;
     min-width: 300px !important;
     min-width: 300px !important;
    flex: 0 0 300px !important;
}
}


/* Stop the header from collapsing into a hamburger menu only */
/* Force the Main Content area */
.mw-mf-viewport #cosmos-header {
#cosmos-content-main, #bodyContent {
     width: 1200px !important;
     flex: 0 0 880px !important;
     display: flex !important;
     width: 880px !important;
}
 
/* STOP MOBILEFRONTEND FROM HIDING THE RAIL */
.mobile #cosmos-right-rail,
.mobile .cosmos-right-rail {
     display: block !important;
     display: block !important;
    float: right !important;
    width: 300px !important;
}
}


.mobile #cosmos-content {
/* 4. FOOTER */
     width: 1200px !important;
.mw-parser-output::after {
    content: "\1F343\000A END OF ENTRY";
     white-space: pre !important;
     display: block !important;
     display: block !important;
}
    text-align: center !important;
 
    margin-top: 50px !important;
/* Ensure the background stays the same */
     color: var(--kh-green) !important;
.mobile body {
    font-family: 'Cinzel', serif;
     background-color: var(--kh-light-bg) !important;
}
}

Revision as of 22:44, 16 March 2026

/* Version 1.1.6 - Universal KH Leaf (Full Desktop-on-Mobile Force) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');

:root {
    --kh-green: #3e5a47;
    --kh-yellow: #ffd700;
    --kh-dark-text: #2d4234;
    --kh-light-bg: #f9fdfa;
    --kh-border: 2px solid var(--kh-green);
}

/* 1. GLOBAL STYLES */
body { 
    font-family: 'Crimson Pro', serif !important; 
    background-color: var(--kh-light-bg); 
    min-width: 1200px !important; /* Prevents body from shrinking */
}
a { color: var(--kh-green); }
h1, h2, h3, .mw-headline { 
    color: var(--kh-green) !important; 
    font-family: 'Cinzel', serif !important; 
}
h2::before, h3::before { content: "\1F343\0020"; }

/* 2. COSMOS HEADER */
#cosmos-header, .header-container {
    background-color: var(--kh-green) !important;
    border-bottom: 3px solid var(--kh-yellow) !important;
    min-width: 1200px !important;
}

/* 3. FORCE DESKTOP STRUCTURE (Flexbox Logic) */
/* This forces the Content and Rail to stay side-by-side even on mobile */
#cosmos-content, .mw-body {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    width: 1200px !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    background: white;
}

/* Force the Sidebar (Rail) to be visible and fixed width */
#cosmos-right-rail, .cosmos-right-rail {
    display: block !important;
    visibility: visible !important;
    width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
}

/* Force the Main Content area */
#cosmos-content-main, #bodyContent {
    flex: 0 0 880px !important;
    width: 880px !important;
    display: block !important;
}

/* 4. 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;
    color: var(--kh-green) !important;
    font-family: 'Cinzel', serif;
}