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 23: Line 23:
}
}


/* selected dark mode */
@media screen {
@media screen {
.skin-theme-clientpref-night {
.skin-theme-clientpref-night {
--color-surface-0: #14181f !important;
--color-surface-0: #14181f !important;
--color-destructive: #a40a0a; !important;
--color-destructive: #a40a0a; !important;
--footer-color-1: #303030;
--footer-color-2: #202020;
--footer-color-3: #181818;
}
}
}
}


/* automatic mode */
/* automatic dark mode */
@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
.skin-theme-clientpref-os {
.skin-theme-clientpref-os {
--color-surface-0: #14181f !important;
--color-surface-0: #14181f !important;
--color-destructive: #a40a0a; !important;
--color-destructive: #a40a0a; !important;
}
}
/* dark mode */
@media screen {
html.skin-theme-clientpref-night .pane {
--footer-color-1: #303030;
--footer-color-1: #303030;
--footer-color-2: #202020;
--footer-color-2: #202020;
Line 49: Line 45:
}
}


/* automatic dark mode */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .pane {
--footer-color-1: #303030;
--footer-color-2: #202020;
--footer-color-3: #181818;
}
}


/* light mode */
/* selected light mode */
@media screen {
@media screen {
html.skin-theme-clientpref-light .pane {
.skin-theme-clientpref-light {
--footer-color-1: #000000;
--footer-color-1: #000000;
--footer-color-2: #000000;
--footer-color-2: #000000;
Line 69: Line 57:
/* automatic light mode */
/* automatic light mode */
@media screen and (prefers-color-scheme: light) {
@media screen and (prefers-color-scheme: light) {
html.skin-theme-clientpref-os .pane {
.skin-theme-clientpref-os {
--footer-color-1: #000000;
--footer-color-1: #000000;
--footer-color-2: #000000;
--footer-color-2: #000000;

Revision as of 08:56, 17 July 2025

/* All CSS here will be loaded for users of the Citizen skin */
:root {
	--width-layout: 1280px; /* Slightly wider content */
}

html

.citizen-body a.image:hover > img {
 	transform: scale(1) !important;
}

.citizen-footer__content {
 	padding-top: 0px; !important;
 	padding-bottom: 0px; !important;
}
.citizen-footer__bottom {
 	display: none !important;
}

.skin-theme-clientpref-night {
	--background-color-warning: #bd951b;

}

/* selected dark mode */
@media screen {
	.skin-theme-clientpref-night {
		--color-surface-0: #14181f !important;
		--color-destructive: #a40a0a; !important;
		--footer-color-1: #303030;
		--footer-color-2: #202020;
		--footer-color-3: #181818;
	}
}

/* automatic dark mode */
@media screen and (prefers-color-scheme: dark) {
	.skin-theme-clientpref-os {
		--color-surface-0: #14181f !important;
		--color-destructive: #a40a0a; !important;
		--footer-color-1: #303030;
		--footer-color-2: #202020;
		--footer-color-3: #181818;
	}
}


/* selected light mode */
@media screen {
	.skin-theme-clientpref-light {
		--footer-color-1: #000000;
		--footer-color-2: #000000;
		--footer-color-3: #000000;
	}
}

/* automatic light mode */
@media screen and (prefers-color-scheme: light) {
	.skin-theme-clientpref-os {
		--footer-color-1: #000000;
		--footer-color-2: #000000;
		--footer-color-3: #000000;
	}
}


.footer-color-1 {
	background: var(--footer-color-1);
}


.footer-color-2 {
	background: var(--footer-color-2);
}


.footer-color-3 {
	background: var(--footer-color-3);
}