MediaWiki:Common.CSS: Difference between revisions

Revision as of 06:33, 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;
    }
}