MediaWiki:Citizen.css

/* VSTU corporate palette for Citizen */
/* Links use a distinct corporate blue; body text stays dark navy.
   Missing-page links stay red even inside the main-page cards. */
:root {
    --color-progressive-oklch__h: 260;
    --color-progressive-oklch__l: 38%;
    --color-progressive-oklch__c: 0.09;
    --color-progressive-hsl__h: 219;
    --color-progressive-hsl__s: 54%;
    --color-progressive-hsl__l: 40%;
    --color-progressive: #2f5f9e;
    --color-link: #2f5f9e;
    --color-visited: #6b4f8a;
    --color-progressive--hover: #1f4b82;
    --color-progressive--active: #173a66;
    --color-destructive: #b32424;
}

/* Explicit light theme */
.skin-theme-clientpref-day {
    --color-progressive-oklch__l: 38%;
    --color-progressive-oklch__c: 0.09;
    --color-progressive-hsl__h: 219;
    --color-progressive-hsl__s: 54%;
    --color-progressive-hsl__l: 40%;
    --color-progressive: #2f5f9e;
    --color-link: #2f5f9e;
    --color-visited: #6b4f8a;
    --color-progressive--hover: #1f4b82;
    --color-progressive--active: #173a66;
    --color-destructive: #b32424;
}

/* Auto theme: light OS */
@media (prefers-color-scheme: light) {
    .skin-theme-clientpref-os {
        --color-progressive-oklch__l: 38%;
        --color-progressive-oklch__c: 0.09;
        --color-progressive-hsl__h: 219;
        --color-progressive-hsl__s: 54%;
        --color-progressive-hsl__l: 40%;
        --color-progressive: #2f5f9e;
        --color-link: #2f5f9e;
        --color-visited: #6b4f8a;
        --color-progressive--hover: #1f4b82;
        --color-progressive--active: #173a66;
        --color-destructive: #b32424;
    }
}

/* Explicit dark theme */
.skin-theme-clientpref-night {
    --color-progressive-oklch__l: 72%;
    --color-progressive-oklch__c: 0.06;
    --color-progressive-hsl__h: 219;
    --color-progressive-hsl__s: 35%;
    --color-progressive-hsl__l: 72%;
    --color-progressive: #9db4e0;
    --color-link: #9db4e0;
    --color-visited: #c3a6e6;
    --color-progressive--hover: #dbbd7d;
    --color-progressive--active: #e6d3a3;
    --color-destructive: #ff8a8a;
}

/* Auto theme: dark OS */
@media (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os {
        --color-progressive-oklch__l: 72%;
        --color-progressive-oklch__c: 0.06;
        --color-progressive-hsl__h: 219;
        --color-progressive-hsl__s: 35%;
        --color-progressive-hsl__l: 72%;
        --color-progressive: #9db4e0;
        --color-link: #9db4e0;
        --color-visited: #c3a6e6;
        --color-progressive--hover: #dbbd7d;
        --color-progressive--active: #e6d3a3;
        --color-destructive: #ff8a8a;
    }
}

/* Gold focus ring, matching the corporate accent */
:focus-visible {
    outline-color: #dbbd7d !important;
}

/* OIDC-only login UI.
   Local login stays enabled as an emergency fallback but is hidden from the form. */
#userloginForm .mw-userlogin-username,
#userloginForm .mw-userlogin-password,
#userloginForm .mw-userlogin-rememberme,
#userloginForm #wpLoginAttempt,
#userloginForm .mw-form-related-link-container {
    display: none !important;
}
#userloginForm .mw-htmlform-field-HTMLSubmitField:has(#wpLoginAttempt) {
    display: none !important;
}
#mw-input-pluggableauthlogin0 {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}

/* Missing pages: red link, not the card/link blue. Dotted underline adds
   a non-colour cue to the red colour. */
a.new,
a.new:visited,
.it-card a.new,
.it-card a.new:visited,
.it-quick__item a.new,
.it-quick__item a.new:visited,
.it-note a.new,
.it-note a.new:visited {
    color: var(--color-destructive, #b32424) !important;
}
.mw-parser-output a.new,
.mw-parser-output a.new:visited {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.12em;
}