MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

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

/* https://stackoverflow.com/questions/65344006/why-does-filter-invert1-hue-rotate180deg-turn-red-into-a-peachy-pink-colo */
.skin-citizen-dark .mw-logo-icon {
	filter: invert(1) hue-rotate(180deg) saturate(10);
}

.skin-citizen-dark body.page-Main_Page .mp-nav-button img {
	filter: invert(73%) sepia(90%) saturate(349%) hue-rotate(142deg) brightness(93%) contrast(92%);
}

/* Site notice */
#siteNotice {
	display: grid;
	grid-gap: 1em;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--padding-page);
	max-width: var(--width-layout);
}

@media screen and (min-width: 1300px) {
	.citizen-toc-enabled #siteNotice {
		padding-right: var(--width-toc);
	}
}

/* Central notice */
#centralNotice {
	border-radius: var(--border-radius--medium);
	overflow: hidden;
}

/* Local notice */
#localNotice {
	border: 1px solid var(--border-color-base);
	background-color: var(--background-color-framed);
	border-radius: var(--border-radius--medium);
	color: inherit;
	padding: 1em;
}

#localNotice p {
	margin: 0;
}

/* OO ui fullscreen */
.oo-ui-windowManager-fullscreen > .oo-ui-dialog {
	z-index: 10;
}

/* Language toggle */
.mw-pt-languages {
	border-radius: var(--border-radius--small);
}

/* Main page */
body.page-Main_Page .mw-body-header,
body.page-Main_Page .citizen-body {
	max-width: min(1680px, var(--width-layout));
}

/* Popups */
.mwe-popups .mwe-popups-container {
	background: transparent;
}

/* Gallery */
#content li.gallerybox div.thumb {
	background-color: var(--background-color-framed);
}
.gallerybox .thumb img {
    background-color: transparent;
}

.skin-citizen ul.mw-gallery-packed li.gallerybox,
.skin-citizen ul.mw-gallery-packed-hover li.gallerybox,
.skin-citizen ul.mw-gallery-packed-overlay li.gallerybox {
	flex-grow: 0;
}

/* Documentation */
.template-documentation,
#documentation-meta-data {
	background-color: hsla(150, 72.7%, 95.7% , 0.15) !important;
	border-radius: var(--border-radius--small);
}

/* Warning box */
.warningbox {
	background-color: var(--background-color-warning);
	padding: 10px;
}

/* Error box */
.errorbox {
	background-color: var(--background-color-destructive);
	padding: 10px;
}

/* Ombox */
table.ombox {
	background-color: var(--color-surface-2);
}

/* Imbox */
table.imbox {
	background-color: var(--color-surface-2);
}

/* Math */
.skin-citizen-light .mwe-math-fallback-image-inline {
	filter: invert(0.3);
}

.skin-citizen-dark .mwe-math-fallback-image-inline {
	filter: invert(0.7);
}

/* Indicators */
.mw-indicators {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.skin-citizen-dark .mw-indicator {
	filter: none;
}

/* Media player */
.mw-tmh-player.audio {
	border-radius: var(--border-radius--small);
	overflow: hidden;
}

/* Show Main Page title when header is sticky */
body.page-Main_Page.citizen-body-header--sticky h1#firstHeading,
body.page-Main_Page.citizen-body-header--sticky #siteSub,
body.page-Main_Page.citizen-body-header--sticky #contentSub,
body.page-Main_Page.citizen-body-header--sticky #contentSub2 {
	display: block;
}