MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 23:18, 20 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 entire site footer */
#footer,
.citizen-footer {
    display: none !important;
}

/* Hide page-management controls by default */
#ca-viewsource,
#ca-history,
#ca-talk,
#citizen-page-more-dropdown,
#citizen-sticky-header-more {
    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;
}

/* Collapsible headings: aligned + rainbow-tinted */
.mw-heading {
    background:
        linear-gradient(
            90deg,
            rgba(255, 109, 178, 0.16),
            rgba(255, 159, 87, 0.13),
            rgba(255, 217, 94, 0.10),
            rgba(115, 227, 125, 0.10),
            rgba(102, 217, 255, 0.13),
            rgba(110, 168, 255, 0.14),
            rgba(185, 140, 255, 0.16)
        ),
        var(--color-surface-3);

    border-radius: 10px;

    margin-left: -0.85rem;
    margin-right: -0.85rem;

    padding: 0.4rem 0.85rem;
    margin-top: 1.25rem;

    transition:
        filter 0.15s ease,
        background-color 0.15s ease;
}

.mw-heading:hover {
    filter: brightness(1.12);
}

/* Hide the "Last modified" information block */
#footer-info-lastmod,
.citizen-page-info {
    display: none !important;
}

/* Hide the top-right "Last modified" panel */
#citizen-page-aside-lastmod {
    display: none !important;
}

/* Hide the “Redirected from” notice. */
.mw-redirectedfrom {
    display: none;
}