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.

/* =========================
   Infobox Styles
   ========================= */

/* Base infobox container */
.infobox {
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
    padding: 5px;

    background-color: var(--background-color-base);
    border: 1px solid var(--border-color-base);
    color: var(--color-base); /* theme-aware text */
    font-size: 90%;
    border-collapse: collapse;
}

/* Top row title (first row th) */
.infobox > tbody > tr:first-child > th {
    background: none !important;        /* remove default header background */
    background-image: none !important;  /* remove gradient/image */
    color: inherit !important;          /* inherits from .infobox (theme-aware) */
    font-weight: 600;
    text-align: center;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-color-base);
}

/* Table headers inside infobox (other than top row) */
.infobox th {
    background: none !important;
    background-image: none !important;
    text-align: left;
    padding: 4px;
    color: var(--color-emphasized);
    font-weight: 600;
}

/* Table cells inside infobox */
.infobox td {
    padding: 4px;
}

.infobox td:first-child {
    color: var(--color-subtle);
    font-weight: 500;
}

.infobox td:last-child {
    color: var(--color-base);
}

/* Links inside infobox */
.infobox a {
    color: var(--color-progressive);
    text-decoration: none;
}

.infobox a:hover {
    color: var(--color-progressive--hover);
    text-decoration: underline;
}

/* Mobile / responsive fix */
@media (max-width: 768px) {
    .infobox {
        float: none !important;
        width: 100% !important;
        margin: 0 0 1em 0 !important;
        clear: both;
    }

    /* Make images inside infobox scale to table width */
    .infobox img {
        width: 100% !important;       /* fill available width */
        height: auto !important;      /* maintain aspect ratio */
        max-width: 100% !important;   /* prevent overflow */
        display: block;               /* remove inline spacing */
        margin: 0 auto;               /* center the image */
    }

    /* Remove extra padding around images */
    .infobox td img {
        padding: 0 !important;
    }
}