MediaWiki:Citizen.css: Difference between revisions

Revision as of 23:15, 6 October 2026

/* All CSS here will be loaded for users of the Citizen skin */
/* Hide the Discussion button, including its sticky-header version */
#ca-talk,
#ca-talk-sticky-header {
    display: none !important;
}

/* Hide the three-dot page tools menu */
#citizen-page-more-dropdown,
#citizen-sticky-header-more {
    display: none !important;
}

/* Hide the entire site footer */
#footer,
.citizen-footer {
    display: none !important;
}

:root {
    /* Blimpuf rainbow palette */
    --blimpuf-pink: #ff6db2;
    --blimpuf-orange: #ff9f57;
    --blimpuf-yellow: #ffd95e;
    --blimpuf-green: #73e37d;
    --blimpuf-cyan: #66d9ff;
    --blimpuf-blue: #6ea8ff;
    --blimpuf-purple: #b98cff;
}

/* Citizen dark mode */
:root.skin-theme-clientpref-night {
    --color-surface-0: #0b0f16;
    --color-surface-1: #111827;
    --color-surface-2: #161d29;
    --color-surface-3: #1d2635;

    --color-base: #e8eefc;
    --color-emphasized: #ffffff;
    --color-subtle: #a9b7d1;

    /* Main Citizen accent */
    --color-progressive-oklch__h: 205;
}

/* Automatic theme when the OS is dark */
@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --color-surface-0: #0b0f16;
        --color-surface-1: #111827;
        --color-surface-2: #161d29;
        --color-surface-3: #1d2635;

        --color-base: #e8eefc;
        --color-emphasized: #ffffff;
        --color-subtle: #a9b7d1;

        --color-progressive-oklch__h: 205;
    }
}

.firstHeading {
    background: linear-gradient(
        90deg,
        var(--blimpuf-pink),
        var(--blimpuf-orange),
        var(--blimpuf-yellow),
        var(--blimpuf-green),
        var(--blimpuf-cyan),
        var(--blimpuf-blue),
        var(--blimpuf-purple)
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mw-parser-output a {
    color: var(--blimpuf-cyan);
}

.mw-parser-output a:hover {
    color: var(--blimpuf-pink);
}

#ca-edit a {
    background: linear-gradient(
        90deg,
        var(--blimpuf-blue),
        var(--blimpuf-purple)
    ) !important;

    border: none !important;
}

#content::before {
    content: "";
    display: block;
    height: 3px;
    margin-bottom: 1.5rem;

    background: linear-gradient(
        90deg,
        var(--blimpuf-pink),
        var(--blimpuf-orange),
        var(--blimpuf-yellow),
        var(--blimpuf-green),
        var(--blimpuf-cyan),
        var(--blimpuf-blue),
        var(--blimpuf-purple)
    );

    border-radius: 999px;
}