MediaWiki:Common.css: Difference between revisions

Revision as of 08:09, 11 January 2026

/* Mobile-first approach or desktop-first with media queries?
   MediaWiki usually defaults to desktop, so we'll add responsive overrides. */

/* Base styles for the content area to ensure readability */
.mw-body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll on small screens */
    padding: 0 10px; /* Add some side padding on mobile */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #2c4c3b; /* A nice botanical dark green */
    border-bottom: 1px solid #eaecf0;
    padding-bottom: 0.3em;
}

/* Infobox styling - Standard Desktop (and default) */
.infobox {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    width: 300px; /* Fixed width on desktop */
    font-size: 90%;
    line-height: 1.5;
}

/* Clearfix for floats if needed, though MW usually handles this */
.mw-body::after {
    content: "";
    display: table;
    clear: both;
}

/* Internal infobox table styling (simulated based on typical MW infoboxes) */
.infobox table {
    width: 100%;
    border-collapse: collapse;
}

.infobox th {
    background-color: #e6f2e6; /* Light green header */
    text-align: center;
    padding: 0.5em;
}

.infobox td {
    padding: 0.4em;
}

.infobox img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Mobile Responsiveness */
@media screen and (max-width: 720px) {
    .mw-body {
        padding: 0 15px;
    }

    /* Stack the infobox on top or bottom, remove float */
    .infobox {
        float: none;
        clear: both;
        width: 100%; /* Full width on mobile */
        margin: 0 0 1em 0; /* Add bottom margin to separate from text */
        box-sizing: border-box; /* Ensure padding doesn't overflow width */
    }

    /* Adjust font sizes if necessary */
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
}