Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 56: Line 56:


.mw-logo-wordmark {
.mw-logo-wordmark {
   height: 8rem !important;
   height: 4rem !important;
   filter: none !important;
   filter: none !important;
}
}
Line 62: Line 62:
@media screen and (min-width: 640px) {
@media screen and (min-width: 640px) {
     img.mw-logo-wordmark {
     img.mw-logo-wordmark {
       height: 4rem !important;
       height: 8rem !important;
     }
     }
}
}

Revision as of 23:51, 12 May 2025

/* All CSS here will be loaded for users of the Citizen skin */
:root.skin-theme-clientpref-dark {
    --color-surface-0: #050e1b;
    --color-surface-1: #0d1014;
    --color-base: #fff;
    --color-base--emphasized: #808080;
    --color-base--subtle: #162132;
}
:root.skin-theme-clientpref-os {
    --color-surface-0: #050e1b;
    --color-surface-1: #0d1014;
    --color-base: #fff;
    --color-base--emphasized: #808080;
    --color-base--subtle: #162132;
}

.citizen-page-container {
    position: relative;
    background-image: url("resources/assets/hero.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
    overflow: hidden;
}

.citizen-page-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}

.citizen-page-container > * {
    position: relative;
    z-index: 2;
}

.citizen-body {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 0 1rem;
}

h1, h2 {
   margin-block-start: 0;
}

.mw-logo-wordmark {
   height: 4rem !important;
   filter: none !important;
}

@media screen and (min-width: 640px) {
    img.mw-logo-wordmark {
       height: 8rem !important;
    }
}