MediaWiki:Citizen.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.

/* All CSS here will be loaded for users of the Citizen skin */
/* =========================================================
   Infobox tweaks for the Citizen skin
   ========================================================= */

/* Float the infobox to the right of the article body.
   Citizen constrains content width, so we need !important on a
   couple of properties because Citizen's own skinStyles can
   otherwise reset floats on tables inside .mw-parser-output. */
.mw-parser-output .infobox {
    float: right;
    clear: right;
    margin: 0 0 1em 1.5em;
    width: 22em;
    max-width: 100%;
    box-sizing: border-box;

    /* Use Citizen's theme variables so colours follow
       light/dark mode automatically. */
    background-color: var( --background-color-neutral-subtle, #f8f9fa );
    color: var( --color-base, #202122 );
    border: 1px solid var( --border-color-base, #a2a9b1 );
    border-radius: var( --border-radius--medium, 4px );
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: var( --box-shadow-card, 0 1px 2px rgba( 0, 0, 0, 0.05 ) );
    overflow: hidden; /* keeps rounded corners clean */
}

/* Title bar */
.mw-parser-output .infobox-title,
.mw-parser-output .infobox caption {
    background-color: var( --background-color-primary--hover, #eaecf0 );
    color: var( --color-emphasized, #202122 );
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.6em 0.8em;
    text-align: center;
    border-bottom: 1px solid var( --border-color-base, #a2a9b1 );
}

/* Section headers (e.g. | header1 = ...) */
.mw-parser-output .infobox-header,
.mw-parser-output .infobox-above,
.mw-parser-output .infobox-subheader,
.mw-parser-output .infobox-below {
    background-color: var( --background-color-neutral, #eaecf0 );
    color: var( --color-emphasized, #202122 );
    text-align: center;
    font-weight: 600;
    padding: 0.4em 0.6em;
}

/* Label (left) and data (right) cells */
.mw-parser-output .infobox-label {
    background-color: var( --background-color-neutral-subtle, #f8f9fa );
    color: var( --color-subtle, #54595d );
    text-align: left;
    vertical-align: top;
    padding: 0.4em 0.6em;
    width: 40%;
    font-weight: 500;
    white-space: nowrap;
}

.mw-parser-output .infobox-data,
.mw-parser-output .infobox-full-data {
    background-color: transparent;
    color: var( --color-base, #202122 );
    text-align: left;
    vertical-align: top;
    padding: 0.4em 0.6em;
}

/* Image row + caption */
.mw-parser-output .infobox-image {
    background-color: transparent;
    padding: 0.6em 0;
    text-align: center;
    border-top: 1px solid var( --border-color-subtle, #eaecf0 );
    border-bottom: 1px solid var( --border-color-subtle, #eaecf0 );
}

.mw-parser-output .infobox-image img {
    max-width: 100%;
    height: auto;
    border-radius: var( --border-radius--small, 2px );
}

.mw-parser-output .infobox-caption {
    font-size: 0.82rem;
    font-style: italic;
    color: var( --color-subtle, #54595d );
    padding: 0.4em 0.6em 0;
}

/* Links inside the infobox should use Citizen's link colour
   rather than the default blue, for better dark-mode contrast. */
.mw-parser-output .infobox a {
    color: var( --color-link, #36c );
}

.mw-parser-output .infobox a:visited {
    color: var( --color-link--visited, #6b4ba1 );
}

/* =========================================================
   Mobile / narrow viewports
   ========================================================= */
@media ( max-width: 720px ) {
    .mw-parser-output .infobox {
        float: none;
        clear: both;
        width: 100%;
        margin: 0 0 1em 0;
    }
}