|
|
| Riga 3: |
Riga 3: |
| #siteSub{ display: none !important; } | | #siteSub{ display: none !important; } |
| body { font-size: larger; } | | 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
| |
| );
| |
| }
| |
