MediaWiki:Citizen.css

/* 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);
}

/* Background image handling */
:root {
    --background-image: none;
}

 @media screen {
    .skin-theme-clientpref-night .citizen-page-container:before {
        background-image: url(https://petitplanet.wiki/images/b/b4/Background_Dark.jpg);
        background-position: 70% center;
    }
    .skin-theme-clientpref-day .citizen-page-container:before {
        background-image: url(https://petitplanet.wiki/images/c/c3/Background_Light.jpg);
        background-position: 70% center;
    }
}


/* Background image handling */
.citizen-page-container,
.citizen-body-container {
    position: relative;
}

.citizen-page-container {
    background-color: var(--color-surface-0);
}

.citizen-page-container::before,
.citizen-body-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.citizen-page-container::before {
    background-repeat: no-repeat;
}

.citizen-page-container::before {
    height: 120px;
    background-size: cover;
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0.01) 66%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0.01) 66%,
        transparent 100%
    );
}

/* Adjust wordmark height */
@media screen and (min-width: 640px) {
    img.mw-logo-wordmark {
        height: 2rem;
    }
}

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;
    }
}

/* Wikitable fixes */
.wikitable {
    border-collapse: separate;
}

.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) {
    box-shadow: none;
}

/* Remove border from mbox */
.mbox {
    border-width: 0;
}

/* Move quotation marks inside box for mobile users */
.pull-quote__text p:after {
    bottom: -16px;
}