(Pagina sostituita con '→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 *...') Etichette: Sostituito Annullato |
Nessun oggetto della modifica Etichetta: Annullato |
||
Riga 21: | Riga 21: | ||
} | } | ||
} | |||
/** | |||
* 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 | |||
); | |||
} | } |
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 ); }