MediaWiki:Citizen.css: Difference between revisions

/* MediaWiki:Citizen.css */
:root {
    /* Layout Width (default is 1320px; set higher for dense data tables) */
    --width-layout: 1440px;

    /* Custom Fonts */
    --font-family-base: system-ui, -apple-system, sans-serif;
    --font-family-heading: inherit;
    --font-family-monospace: 'Courier New', monospace;

    /* Border radius (0px for sharp retro look, 8px for soft modern look) */
    --border-radius-base: 4px;
}

/* Retro styling for inline code and preformatted blocks */
pre, code {
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
}

/* Display banner/logo at top of Main Page */
body.mainpage #mw-content-text::before,
body.page-Main_Page #mw-content-text::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 140px !important; /* Adjust based on image aspect ratio */
    background-image: url('/forum/logo_2026_wide.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;
    margin: 1rem 0 2rem 0 !important;
}

/* Hide standard Main Page title header */
body.mainpage .citizen-page-header,
body.page-Main_Page .citizen-page-header {
    display: none !important;
}

/* --- Dark Mode Overrides (Manual Toggle) --- */

/* Main Page Banner */
html.skin-theme-clientpref-night body.mainpage #mw-content-text::before,
html.skin-theme-clientpref-night body.page-Main_Page #mw-content-text::before,
html.citizen-dark body.mainpage #mw-content-text::before,
html.citizen-dark body.page-Main_Page #mw-content-text::before {
    background-image: url('/cpcwiki_logo_wide_dark.png') !important;
}

/* Top Header Icon */
html.skin-theme-clientpref-night .mw-logo-icon,
html.citizen-dark .mw-logo-icon {
    content: url('/cpcwiki_logo_dark.png') !important;
}

/* --- Dark Mode Overrides (Automatic / System Preference) --- */
@media (prefers-color-scheme: dark) {
    /* Main Page Banner */
    html.skin-theme-clientpref-os body.mainpage #mw-content-text::before,
    html.skin-theme-clientpref-os body.page-Main_Page #mw-content-text::before,
    html:not(.skin-theme-clientpref-day) body.mainpage #mw-content-text::before {
        background-image: url('/cpcwiki_logo_wide_dark.png') !important;
    }

    /* Top Header Icon */
    html.skin-theme-clientpref-os .mw-logo-icon,
    html:not(.skin-theme-clientpref-day) .mw-logo-icon {
        content: url('/cpcwiki_logo_dark.png') !important;
    }
}