MediaWiki:Citizen.css


 * root {

--accent: 0,159,255; --text: 28,30,33; --bg: 230,230,230; --accenttext: 230,230,230; --bgopacity: 0; --color-warning: #E27126 !important; --background-color-dp-00: rgba(var(--bg), 1.0); --background-color-dp-01: rgba(var(--bg), 0.9); --background-color-dp-02: rgba(var(--bg), 0.8); --background-color-dp-03: rgba(var(--bg), 0.7); --background-color-dp-04: rgba(var(--bg), 0.6); --background-color-dp-06: rgba(var(--bg), 0.5); --background-color-dp-08: rgba(var(--bg), 0.4); --background-color-dp-12: rgba(var(--bg), 0.3); --background-color-dp-16: rgba(var(--bg), 0.2); --background-color-dp-24: rgba(var(--bg), 0.1); --color-surface-0: rgba(var(--bg), 0.1); --color-surface-1: rgba(var(--bg), 0.8); --color-surface-2: rgba(var(--bg), 0.6); --color-surface-3: rgba(var(--bg), 0.4); --color-surface-4: rgba(var(--bg), 0.2); }


 * root.skin-citizen-dark {

--accent: 0,159,255; --text: 230,230,230; --bg: 28,30,33; --bgopacity: 0.5; }

html, body { margin-top: 10% !important; color: rgba(var(--text), 1.0) !important; background: rgba(var(--bg),1.0) !important; }

body:after { content: "" !important; opacity: 1 !important; top: 0 !important; left: 0 !important; bottom: 65%; right: 0 !important; z-index: -1 !important; position: absolute; background: linear-gradient(61deg,rgba(var(--bg), var(--bgopacity)),rgba(var(--bg), var(--bgopacity))),url(https://i.imgur.com/e7WpvyK.gif) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

a:hover { color: var(--color-warning) !important; }

/* Header */

.mw-header, .oo-ui-toolbar-bar { background: rgba(var(--bg), 1.0) !important; }

.mw-header:before { bottom: calc(var(--height-header) / -50) !important; background: var(--color-surface-0) !important; border-bottom: 2px solid rgba(var(--accent), 1.0) !important; -webkit-mask-image: none !important; }

@media screen and (max-height: 800px) { .mw-logo-icon { display: block !important; } }

.citizen-body a.image, .mw-body-content a.image { max-width: 100%; padding: 1em; }

/* Buttons & Links */


 * root.skin-citizen-dark {

--color-primary__l: 20% !important; }

a { color: rgba(var(--accent), 1.0) !important; }

/* Footer */

.toc, .toccolours, .catlinks, .cnotice, .vector-menu-dropdown .vector-menu-content, #searchInput { border: none !important; }

.mw-footer:before, #mw-data-after-content:before { display: none !important; }

.last-modified-bar { background: background: rgba(0,0,0,0.2); }

.mw-footer { background: rgba(0,0,0,0.5); color: rgba(var(--accenttext), 0.8); }

.footer-bottom { background: background: rgba(0,0,0,0.2); }

/* Table of Contents */

@media screen and (max-width: 1300px) { .toctogglecheckbox:not(:checked) ~ .toctitle h2, .toctogglecheckbox:not(:checked) ~ ul { display: none !important; transform: translateX(-120%); }

.toc { background: transparent !important; position: relative !important; }

.toc > ul { box-shadow: none !important; margin: 0 !important; padding: 0 0 50px 0 !important; border: transparent !important; }

.toctitle h2 { margin: 0; color: rgba(var(--text),1) !important; font-size: initial !important; }

.toctogglecheckbox:not(:checked) ~ .toctitle h2, .toctogglecheckbox:not(:checked) ~ ul { transform: none !important; background: none !important; display: block !important; position: relative !important; }

}

.toc { background: rgba(var(--bg), 0.7); border-radius: 0 4em 0 0; }

.toc li.active { color: var(--color-warning) !important; }

.toc li.active { border-color: var(--color-primary); color: var(--color-primary); }

/* Editing */

.editOptions, .codeEditor-status, .ace-tm, .ace-tm .ace_gutter { background-color: rgba(var(--bg), 1) !important; color: rgba(var(--text), 1) !important; border: none !important; }

.ace-tm .ace_print-margin { background: transparent !important; }

.ace-tm .ace_marker-layer .ace_selection { background: rgba(226,113,38,0.4) !important; }

.toc { z-index: 0; }