Jump to content

MediaWiki:Citizen.css

From The Petit Planet Wiki
Revision as of 17:14, 13 November 2025 by Stevium (talk | contribs) (Reduced citizen-body padding on smaller screens)

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 {
    --transform-image-hover: none;
}

:root.skin-theme-clientpref-day,
:root.skin-theme-clientpref-night {
    --color-surface-0: var(--page-background-color);
    --color-surface-1: var(--theme-color-1);
    --color-surface-2: var(--theme-color-2);
    --color-surface-3: var(--theme-color-3);
    --color-surface-4: var(--theme-color-4);
    --color-base: var(--page-text-color);
}

:root.skin-theme-clientpref-night {
    --color-destructive__h: 360;
    --color-destructive__l: 67%;
}

/* Disable auto theme and extra midnight theme */
#skin-client-prefs-skin-theme .citizen-client-prefs-radio:has(input[value="os"]),
#skin-client-prefs-citizen-feature-pure-black {
    display: none !important; 
}

#skin-client-prefs-skin-theme form {
    grid-template-columns:repeat(2,1fr);
}

h2, h3 {
    font-weight: var(--font-weight-normal);
}

.citizen-body {
    background-color: var(--color-surface-0);
    border-radius: var(--border-radius-large);
}

.citizen-body {
    padding: var(--padding-page);
}

@media screen and (max-width: 640px) {
    .citizen-body {
        padding: 12px;
    }
}

/* Only apply styling on wider screens */
@media screen and (min-width: 1119px) {
    #citizen-sidebar-lastmod, 
    #citizen-toc {
        background-color: var(--color-surface-0);
        border-radius: var(--border-radius-large);
        padding: calc(0.5*var(--space-unit));
    }
}

.citizen-toc .citizen-menu__heading,
.citizen-toc-contents {
    background-color: var(--color-surface-0);
}

/* Remove identation of lists inside wikitables and portable infoboxes */
.wikitable, .portable-infobox {
    ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1.6em;
    margin-right: 0;
    -webkit-margin-start: 1.6em;
    -webkit-margin-end: 0;
    margin-inline-start: 1.6em;
    margin-inline-end: 0;
    padding: 0;
    }
}