MediaWiki:Citizen.css: Difference between revisions

Revision as of 15:05, 28 March 2025

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

/* Primary colour override and new variable defines */
:root {
    --color-primary__h: 270;
    --color-primary__s: 50;
    --color-primary__l: 40;
    --color-dark-purple: hsl(var(--color-primary__h),40%,35%)
}

/* Colour overrides for all themes */
:root.skin-theme-clientpref-os,
:root.skin-theme-clientpref-light,
:root.skin-theme-clientpref-night {
    --color-link: #efbf04;
    --color-link--hover: #efbf04;
}

/* Overrides for specific classes */
.invert {
    filter: var( --filter-invert );
}

/* Main page box override */
.main-page-box .thumbinner > a:first-child:not(.image) {
    padding: 0;
}

/* Comments extension overrides */
.c-item, .c-avatar img {
    border-color: var(--border-color-base);
}

/* Pagination template overrides */
.pagination td:has(.mw-selflink) {
    background-color: var(--color-dark-purple) !important;
    border-bottom: 4px solid var(--color-dark-purple) !important;
}

/* Move edit button next to title names */
.mw-editsection {
    float: none;
    display: inline-block;
    text-indent: -9999px;
}

/* Dark theme */
@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --color-surface-0: #1a1a1f;
        --color-surface-1: #1f1f24;
        --color-surface-2: #23232e;
        --color-surface-3: #282833;
        --color-surface-4: #2c2c3c;
        --color-surface-5: #313142;
    }
}

:root.skin-theme-clientpref-night {
    --color-surface-0: #1a1a1f;
    --color-surface-1: #1f1f24;
    --color-surface-2: #23232e;
    --color-surface-3: #282833;
    --color-surface-4: #2c2c3c;
    --color-surface-5: #313142;
}

.skin-theme-clientpref-night {
    .citizen-typeahead-list-item-image {
        background-color: black;
    .citizen-footer {
        background-image: radial-gradient(rgba(0,0,0,0.75), var(--color-surface-2) 70%), url(https://medievil.wiki/images/5/59/MediEvilWikiBackground.jpg);
        background-size: cover;
    }
}