MediaWiki:Citizen.css: differenze tra le versioni

Versione delle 13:35, 29 mar 2025

/* All CSS here will be loaded for users of the Citizen skin */

#siteSub{ display: none !important; }
body { font-size: larger; }

/**
 * Background images
 */

 @media screen {
    /* Hero image */
    .citizen-page-container:before {
        /* FIXME: Optimization needed (WebP, proper sized) */
        background-image: Shadow of the Tomb Raider Wallpaper 4 Definitive Edition 1920x1080.jpg;
        background-position: 70% center;
    }

    /* Site header image */
    .citizen-header:before {
        background-image: url(/w/images/2/28/Citizen_header_image.webp);
    }

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

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

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

.mw-body::before,
.citizen-body-container::after {
    background-repeat: repeat-y;
    filter: var(--filter-invert);
}

.citizen-header::before {
    background-position: center left;
    background-size: contain;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 32px);
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.2),
        transparent 32px
    );
}

.citizen-page-container::before {
    height: 200px;
    background-size: cover;
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0.35),
        rgba(0, 0, 0, 0.2) 3rem,
        rgba(0, 0, 0, 0.05) 9rem,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0.35),
        rgba(0, 0, 0, 0.2) 3rem,
        rgba(0, 0, 0, 0.05) 9rem,
        transparent 100%
    );
}

.mw-body::before {
    position: fixed; /* Avoid layout shift */
    margin-left: calc(var(--tg-inscription-size) + var(--padding-page));
    opacity: calc(
        var(--tg-opacity-pattern) * 0.5
    ); /* Since this is behind content, it should be more subtle */
    background-repeat: repeat;
    mask-image: linear-gradient(
        transparent,
        #000 480px,
        #000 calc(100% - 480px),
        transparent
    );
    -webkit-mask-image: linear-gradient(
        transparent,
        #000 480px,
        #000 calc(100% - 480px),
        transparent
    );
}

.citizen-body-container::after {
    background-size: var(--tg-inscription-size);
    opacity: var(--tg-opacity-pattern);
    mask-image: linear-gradient(
        transparent,
        #000 160px,
        #000 calc(100% - 160px),
        transparent
    );
    -webkit-mask-image: linear-gradient(
        transparent,
        #000 160px,
        #000 calc(100% - 160px),
        transparent
    );
}