MediaWiki:Citizen.css: Difference between revisions

/* All CSS here will be loaded for users of the Citizen skin */
/* =========================================================
   Infobox — Citizen skin (light + dark mode)
   ========================================================= */

/* --- Base layout + light-mode appearance --- */
.mw-parser-output .infobox {
    float: right;
    clear: right;
    margin: 0 0 1em 1.5em;
    width: 22em;
    max-width: 100%;
    box-sizing: border-box;

    background-color: var( --color-surface-2, #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;
}

/* Title + caption */
.mw-parser-output .infobox-title,
.mw-parser-output .infobox caption {
    background-color: var( --color-surface-3, #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 */
.mw-parser-output .infobox-header,
.mw-parser-output .infobox-above,
.mw-parser-output .infobox-subheader,
.mw-parser-output .infobox-below {
    background-color: var( --color-surface-3, #eaecf0 );
    color: var( --color-emphasized, #202122 );
    text-align: center;
    font-weight: 600;
    padding: 0.4em 0.6em;
}

/* Label + data cells */
.mw-parser-output .infobox-label {
    background-color: var( --color-surface-1, #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 + caption */
.mw-parser-output .infobox-image {
    background-color: transparent;
    padding: 0.6em 0;
    text-align: center;
    border-top: 1px solid var( --border-color-base, #eaecf0 );
    border-bottom: 1px solid var( --border-color-base, #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 */
.mw-parser-output .infobox a {
    color: var( --color-link, #36c );
}

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

/* =========================================================
   Explicit dark-mode overrides
   -----------------------------
   These neutralise the hard-coded colours that TemplateStyles
   loads from Module:Infobox/styles.css, which otherwise show
   through as light grey / pale blue in Citizen's dark theme.
   ========================================================= */
.skin-citizen-dark .mw-parser-output .infobox,
.skin-citizen-dark .mw-parser-output .infobox-data,
.skin-citizen-dark .mw-parser-output .infobox-full-data {
    background-color: var( --color-surface-2, #11151c );
    color: var( --color-base, #eaecf0 );
}

.skin-citizen-dark .mw-parser-output .infobox-title,
.skin-citizen-dark .mw-parser-output .infobox caption,
.skin-citizen-dark .mw-parser-output .infobox-header,
.skin-citizen-dark .mw-parser-output .infobox-above,
.skin-citizen-dark .mw-parser-output .infobox-subheader,
.skin-citizen-dark .mw-parser-output .infobox-below {
    background-color: var( --color-surface-3, #1b1f27 );
    color: var( --color-emphasized, #fff );
    border-color: var( --border-color-base, #3a3a3a );
}

.skin-citizen-dark .mw-parser-output .infobox-label {
    background-color: var( --color-surface-1, #0c0e13 );
    color: var( --color-subtle, #a2a9b1 );
}

.skin-citizen-dark .mw-parser-output .infobox-image {
    border-top-color: var( --border-color-base, #3a3a3a );
    border-bottom-color: var( --border-color-base, #3a3a3a );
}

.skin-citizen-dark .mw-parser-output .infobox {
    border-color: var( --border-color-base, #3a3a3a );
}

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