MediaWiki:Citizen.css

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

/* Color changing and stuff */
:root.skin-citizen-dark {
	--color-primary__h: 41;
	--color-primary__s: 100%;
	--color-primary__l: 50%;
	
	--background-color__h: 0;
    --color-surface-0: hsl(var(--background-color__h), 0%, 5%);
    --color-surface-1: hsl(var(--background-color__h), 0%, 7%);
    --color-surface-2: hsl(var(--background-color__h), 0%, 10%);
    --color-surface-3: hsl(var(--background-color__h), 0%, 12%);
    --color-surface-4: hsl(var(--background-color__h), 0%, 15%);
    --background-color-primary--hover: hsl(var(--background-color__h), 0%, 15%);
    --background-color-primary--active: hsl(var(--background-color__h), 0%, 20%);
    --background-color-overlay: hsla(var(--background-color__h), 0%, 10%, 0.95);
    --background-color-overlay--lighter: hsla(var(--background-color__h), 0%, 10%, 0.6);
}

.skin-citizen-dark #siteSub {
	display: none;
}

/*.skin-citizen-dark .mw-page-title-main {*/
/*	display: none;*/
/*}*/

.skin-citizen-dark #ca-ve-edit a, .skin-citizen-dark #ca-edit a, .skin-citizen-dark .oo-ui-inputWidget-input.oo-ui-buttonElement-button .oo-ui-labelElement-label{
	color: var(--color-surface-0);
}

.skin-citizen-dark #ca-ve-edit a:before {
	filter: invert(0);
}

.skin-citizen-dark #ca-edit .citizen-ui-icon:before {
	filter: invert(0);
}

.skin-citizen-dark #pt-login a {
	color: var(--color-surface-0) !important;
}

.skin-citizen-dark #pt-login .citizen-ui-icon:before {
	filter: invert(0);
}

.skin-citizen-dark .catlinks li > a:hover {
	color: var(--color-surface-0);
}

/* Logo */
.skin-citizen-dark .mw-logo-icon {
	filter: invert(1) hue-rotate(180deg);
}

/* Drawer menu */
.skin-citizen-dark .citizen-drawer__menu {
	position: relative;
	padding-bottom: 3.5rem;
}

.skin-citizen-dark .citizen-drawer__menu #p-External {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border-color-base);
}

.skin-citizen-dark .citizen-drawer__menu #p-External .citizen-menu__heading {
	display: none;
}

.skin-citizen-dark .citizen-drawer__menu #p-External ul {
	display: flex;
	align-items: center;
	margin-top: .5rem;
}

.skin-citizen-dark .citizen-drawer__menu #p-External ul #n-Stay-in-touch {
	pointer-events: none;
}

.skin-citizen-dark .citizen-drawer__menu #p-External ul #n-Related {
	pointer-events: none;
	border-left: 1px solid var(--border-color-base);
	margin-left: var(--space-xs);
}

.skin-citizen-dark .citizen-drawer__menu #p-External ul #n-Stay-in-touch a, .skin-citizen-dark .citizen-drawer__menu #p-External ul #n-Related a {
	color: var(--color-base--subtle);
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a {
	font-size: 0;
	gap: 0;
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
    display: block;
    content: "";
    width: 24px;
    height: 24px;
    background: transparent center/contain no-repeat;
    opacity: var(--opacity-icon-base);
}


.skin-citizen-dark .citizen-drawer__menu #n-sidebar-icon-discord a:before {
	background-image: url(https://static.miraheze.org/grayzonewarfarewiki/1/18/Discord_icon.png);
}

.skin-citizen-dark .citizen-drawer__menu #n-sidebar-icon-twitter a:before {
	background-image: url(https://static.miraheze.org/grayzonewarfarewiki/f/f3/Twitter_icon.png);
}

.skin-citizen-dark .citizen-drawer__menu #n-sidebar-icon-youtube a:before {
	background-image: url(https://static.miraheze.org/grayzonewarfarewiki/5/59/Youtube_icon.png);
}

/* Article styling */
.skin-citizen-dark .citizen-body {
	border-radius: 1em;
	overflow: hidden;
	background-color: hsl(var(--background-color__h), 0%, 6%);
	box-shadow: 0px 12px 17px 2px hsla(0,0%,0%,0.14),   
	            0px 5px 22px 4px hsla(0,0%,0%,0.12),   
	            0px 7px 8px -4px hsla(0,0%,0%,0.2);
}

.skin-citizen-dark .citizen-body #contentSub {
	margin-top: -1em;
}

.skin-citizen-dark .citizen-body .mw-body-content {
	padding: 1em 4em 1em 2em;
}

.skin-citizen-dark .citizen-body .wpb-topbanner .image {
	pointer-events: none;
}