MediaWiki:Citizen.css

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

:root.skin-citizen-dark {
    --color-primary__h: 205;
    --color-primary__s: 60%;
    --color-primary__l: 50%;
    --color-mw: #eaecf0;
    --color-red: #68191b;
    --color-blue: #185893;
    --link-red: #4b9ad2;
    --link-blue: #4b9ad2;
    --background-red: #172026;
    --background-blue: #172026;
    --background-message-error: #2b1919;
    --background-message-warn: #2b2b19;
    --background-message-info: #19192b;
    --border-red: 1px solid #460c10;
    --border-blue: 1px solid #0f304a;
    --border-message-error: 1px solid #d33;
    --border-message-warn: 1px solid #fc3;
    --border-message-info: 1px solid #3366cc;
    --border-radius: 0.5em;
    --shadow-mw: 0 0 0.5em 0.1em #00000080
}

:root,
:root.skin-citizen-dark {
    --color-mw-border: var(--border-color-base); /* citizen default */
    --border-mw: 1px solid var(--border-color-base); /* citizen default */
    --background-mw-heading: var(--color-surface-0); /* citizen default */
    --background-mw: var(--color-surface-1); /* citizen default */
    --background-mw-even: var(--color-surface-2); /* citizen default */
    --background-mw-odd: var(--color-surface-1); /* citizen default */
}

/* sitenotice */
.sitenotice-card {
    background-color: var(--color-surface-0);
    color: var(--color-base);
    border-bottom: 1px solid var(--color-base);
}

/* Template:Infobox */
div.infobox div.infobox-image > div.infobox-gallery img:hover {
    background: var(--background-mw-even);
    box-shadow: 0 0 0.25em var(--color-mw-border);
}
div.infobox div.infobox-image > div.infobox-gallery img.selected {
    background: var(--background-mw-even);
    box-shadow: 0 0 0.25em var(--color-mw-border) inset;
}
div.infobox div.infobox-item > div:first-child > div.floatright {
    margin-left: 0;
}
div.infobox div.infobox-item > div:first-child {
    width: 45%;
}

/* Div based "system" style messages (system messages). */
div.mw-lag-warn-normal, div.noarticletext, div.fmbox-system {
    border: 1px solid var(--border-color-base);
    background-color: var(--color-surface-2);
}

/* Error message */
div.mw-warning-with-logexcerpt, 
div.mw-lag-warn-high, 
div.mw-cascadeprotectedwarning {
    border: var(--border-message-error);
    background: var(--background-message-error);
}

/* Responsive elements */
@media screen and (max-width: 639px) {
    div.infobox {
        width: 100%;
    }
    .quote {
        clear: both;
    }
}