Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
Reduced citizen-body padding on smaller screens
Applied many fixes for mobile users
Line 27: Line 27:
#skin-client-prefs-skin-theme form {
#skin-client-prefs-skin-theme form {
     grid-template-columns:repeat(2,1fr);
     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;
    }
}
}


Line 76: Line 137:
     padding: 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;
}
}