MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 21:56, 5 April 2025

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

/* Selection override */
::-moz-selection { /* Code for Firefox */
  background: var(--color-subtle);
}

::selection {
  background: var(--color-subtle);
}

/* Overrides for The Gallows Gazette landing page */
@media screen and (min-width: 1120px) {
    .page-Blog_The_Gallows_Gazette .citizen-page-header-inner {
        border-top: var(--border-width-base) solid var(--border-color-base);
    }
}

.page-Blog_The_Gallows_Gazette { 
    #content {
        display: flex;
        flex-direction: column;
    }

    .citizen-page-header {
        order: 9999;
    }

    .citizen-page-heading {
       display: none;
    }

    .citizen-page-header-inner {
        justify-content: center;
    }
}

/* Footer logo overrides */
.mw-logo-wordmark {
    font-family: Tico;
    text-transform: uppercase;
}

/* Site notice overrides */
.skin-citizen .mw-dismissable-notice-close > a::before {
   display: none !important;
}

.skin-citizen .mw-dismissable-notice-close > a {
   display: contents !important;
}

.citizen-sitenotice-container {
   margin: auto;
}

.anonymousnotice {
   padding: 10px 75px;
   border: 1px solid var(--border-color-base);
   background-color: var(--color-surface-2);
}

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

/***
 * HEADER IMAGE
 */
.citizen-page-container::before {
    background-image: url('https://medievil.wiki/images/7/7c/Mediawiki-header-bg-image.jpg');
    content: '';
    height: 200px;
    background-position: center 35%;
    background-repeat: no-repeat;
    -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%);
    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%);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/***
 * NOTEBOX
 */
.notebox {
    margin: var(--space-md) 0;
    font-size: var(--font-size-small);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color-base);
    padding: 10px;
}