Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

/* Font import */
@font-face {
    font-family: 'Afacad-Regular';
    src: url('/images/fonts/Afacad-Regular.ttf') format('truetype');
}

:root {
    --font-family-base: 'Afacad-Regular', sans-serif;
    --font-size-base: 1rem;
}

/* Light/Dark Mode Support */

/* Dark mode styles */
:root.skin-theme-clientpref-night {
    --color-surface-0: #02022b;
    --color-base: #e0e0e0;
    --color-base--emphasized:#66ccff ;
    --color-base--subtle: #999999;
}
/* Light mode styles */
:root.skin-theme-clientpref-light {
    --color-surface-0: #ffffff;
    --color-base: #333333;
    --color-base--emphasized: #0077cc;
    --color-base--subtle: #777777;
}

* {
	transition: color 0.3s;
}

/* Normal links */
a {
    color: #f72a57;
    transition: color 0.3s;
}

/* Visited links */
a:visited {
    color: #f72a57;
}

/* Links when hovered */
a:hover {
    color: #f72a57;
}

/* Active (clicked) links */
a:active {
    color: #f72a57;
}

/* New page links */
a.new {
    color: #6A38B3 !important;
}

.skin-theme-clientpref-night blockquote p {
    color: #bbbbbb;
}

.skin-theme-clientpref-light blockquote p {
    color: #555555;
}

.skin-theme-clientpref-night figure.mw-default-size figcaption {
    color: #cccccc;
}

.skin-theme-clientpref-light figure.mw-default-size figcaption {
    color: #aaaaaa;
}

@media screen {
    .citizen-page-container {
        background-image: 
            url("/images/97kkmoki2rx21.png"),
            linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        background-position: 70% center;
        background-repeat: no-repeat;
    }
}

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