MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ============================================================
   --- MOBILE OPTIMIZATIONS (FIXED SPACING) ---
   ============================================================ */
@media screen and (max-width: 768px) {

    /* 1. Global Wrapper: Full Bleed + Tightened Top Padding */
    .bc-wrap {
        padding: 10px 0 !important;        
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important; 
        box-shadow: none !important;
    }

    /* 2. Compact Table of Contents for Mobile */
    html body .mw-parser-output #toc,
    html body .vector-toc {
        display: block !important;
        width: 95% !important;
        margin: 0 auto 10px auto !important; /* Center with minimal bottom gap */
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 3. Kill "Ghost Spacing" after TOC */
    /* Removes empty paragraphs or breaks MediaWiki often inserts after the TOC */
    .mw-parser-output > #toc + p,
    .mw-parser-output > .vector-toc + p,
    .mw-parser-output > #toc + br {
        display: none !important;
    }

    /* 4. Fix the Grids (Stack vertically) */
    .bc-grid, .bc-2col, .bc-btngrid, .bc-linkgrid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;        
    }

    /* 5. Hero Section: Full width & Compact */
    .bc-hero {
        padding: 40px 15px !important;
        text-align: center !important;
        border-radius: 0 !important; 
        margin-bottom: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bc-hero h1 { font-size: 1.8rem !important; line-height: 1.2 !important; }
    .bc-hero p { font-size: 1rem !important; margin-bottom: 20px !important; }

    /* 6. Cards: Full Bleed Style */
    .bc-card {
        padding: 25px 20px !important;
        border-radius: 0 !important; 
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important; 
        box-shadow: none !important; 
        margin-bottom: 0 !important;
    }
    
    /* 7. Screenshot Frame Mobile Fix */
    .bc-screenshot-frame {
        float: none !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   --- IMAGE & INTERACTIVE ELEMENTS ---
   ============================================================ */

/* Interactive Dimming for Dark Mode */
html.skin-theme-clientpref-night .thumbimage,
html.skin-theme-clientpref-night .bc-screenshot-frame img,
html.skin-theme-clientpref-night .bc-card img {
    filter: brightness(0.7) contrast(1.1) !important;
    transition: filter 0.3s ease !important;
}

html.skin-theme-clientpref-night .thumbimage:hover,
html.skin-theme-clientpref-night .bc-screenshot-frame:hover img,
html.skin-theme-clientpref-night .bc-card img:hover {
    filter: brightness(1) contrast(1) !important;
}

/* Final cleanup for H2 headers in Dark Mode */
html.skin-theme-clientpref-night .mw-parser-output h2 {
    border-bottom: 1px solid #333 !important;
}