MediaWiki:Common.CSS: Difference between revisions

Latest revision as of 06:34, 18 May 2026

/* =========================================
   GLOBAL WIKI STYLES
   Applied to all skins
   ========================================= */

/* Link colors */
a {
    color: #2f7fff !important;
}

a:visited {
    color: #7a5cff !important;
}

a:hover {
    color: #5aa0ff !important;
    text-decoration: underline;
}
a.new {
    color: #d33 !important;
}

a.new:visited {
    color: #b66 !important;
}


/* Infobox styling */
.infobox {
    float: right;
    width: 300px;
    max-width: 100%;
    margin: 0 0 1em 1em;
    padding: 10px;
    border: 1px solid #aaa;
    background: #f9f9f9;
    box-sizing: border-box;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Tables */
table {
    max-width: 100%;
    border-collapse: collapse;
}

/* =========================================
   MOBILE STYLES
   Vector 2022 + accessibility focused
   ========================================= */

@media screen and (max-width: 768px) {

    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: 22px !important;
    }

    body,
    .vector-body,
    .mw-body,
    .mw-parser-output {
        font-size: 1rem !important;
        line-height: 1.8 !important;
        padding-left: 14px;
        padding-right: 14px;
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

    p,
    li,
    td,
    th {
        font-size: 1rem !important;
        line-height: 1.8 !important;
    }

    h1 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.8rem !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.4rem !important;
        line-height: 1.4;
    }

    .infobox {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 1em 0 !important;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    input,
    button,
    select,
    textarea {
        font-size: 1rem !important;
    }
}






/* =========================================
   EXTRA MOBILE FIXES
   Add to bottom of stylesheet
   ========================================= */

@media screen and (max-width: 768px) {

    /* Prevent horizontal scrolling */
    html,
    body {
        width: 100%;
        overflow-x: hidden !important;
    }

    /* Main content container */
    .mw-body,
    .vector-body,
    .mw-parser-output {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Make tables scroll instead of breaking layout */
    table,
    .wikitable {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Infobox improvements */
    .infobox {
        display: block;
        float: none !important;
        clear: both;
    }

    /* Images never overflow */
    img,
    figure,
    .thumbinner {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Code/preformatted blocks */
    pre,
    code {
        overflow-x: auto;
        word-break: break-word;
    }

    /* Long links or page titles */
    a,
    span,
    div,
    p,
    li {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Search box scaling */
    input[type="search"],
    input[type="text"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Reduce excessive side padding from Vector */
    .vector-page-toolbar,
    .vector-column-start,
    .vector-column-end {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Better touch targets */
    button,
    input,
    select,
    textarea,
    a {
        min-height: 44px;
    }

    /* Fix thumbnails */
    .thumb {
        width: 100% !important;
        margin: 1em 0 !important;
    }

    .thumb img {
        width: 100% !important;
        height: auto !important;
    }
}