MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the Citizen skin */
:root {
    --font-family-citizen-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --color-progressive-oklch__l: 0.5447;
    --color-progressive-oklch__c: 0.2121;
    --color-progressive-oklch__h: 23.85;
    --color-progressive-hsl__h: 352.62;
    --color-progressive-hsl__s: 82.38;
    --color-progressive-hsl__l: 44.51;
    /*--color-surface-0: */
    /*--color-surface-1: */
    /*--color-surface-2: */
    /*--color-surface-3: */
    /*--color-surface-4: */
}

:root.skin-theme-clientpref-day {
    --color-surface-0: white;
    --color-surface-1: #fffaf9;
    --color-surface-2: #ddd;
    --color-surface-3: #ddd;
    --color-surface-4: #ddd;
    --color-base: #000;
    --color-base--emphasized: #cf142b;
    --color-base--subtle: #cf142b;
    --color-subtle: #666;
    --color-emphasized: #000;
    --background-color-progressive--hover: #b01125;
    --color-placeholder: #999;
}

:root.skin-theme-clientpref-night {
    --color-surface-0: #212529;
    --color-surface-1: #262629;
    --color-surface-2: #333;
    --color-surface-3: #333;
    --color-surface-4: #333;
    --color-base: #fff;
    --color-base--emphasized: #cf142b;
    --color-base--subtle: #cf142b;
    --color-subtle: #999;
    --color-emphasized: #fff;
    --background-color-progressive--hover: #b01125;
    --color-placeholder: #666;
}

@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --color-surface-0: #212529;
        --color-surface-1: #262629;
        --color-surface-2: #333;
        --color-surface-3: #333;
        --color-surface-4: #333;
        --color-base: #fff;
        --color-base--emphasized: #cf142b;
        --color-base--subtle: #cf142b;
        --color-subtle: #999;
        --color-emphasized: #fff;
        --background-color-progressive--hover: #b01125;
        --color-placeholder: #666;
    }
}

@media (max-width: 768px) { /* Adjust breakpoint if needed */
    .xcitizen-header {
        position: fixed !important;   /* Keep it visible */
        top: 0 !important;            /* Move to top */
        bottom: auto !important;      /* Remove default bottom positioning */
        width: 100%;                  /* Full width */
        z-index: 9999;                /* Stay above content */
    }

    /* Push page content down so it’s not hidden behind the header */
    .xmw-body {
        padding-top: 20px; /* Adjust based on header height */
    }
}