MediaWiki:Citizen.css: Difference between revisions

/* All CSS here will be loaded for users of the Citizen skin */
:root {
	--font-family-citizen-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--color-progressive-oklch__l: 0.5447;
	--color-progressive-oklch__c: 0.2121;
	--color-progressive-oklch__h: 23.85;
	/*--color-progressive-oklch__l: 0.6822;*/
	/*--color-progressive-oklch__c: 0.2063;*/
	/*--color-progressive-oklch__h: 24.43;*/
	--color-progressive-hsl__h: 352.62;
	--color-progressive-hsl__s: 82.38;
	--color-progressive-hsl__l: 44.51;
}

:root.skin-theme-clientpref-day {
	--color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
	--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
	--color-surface-2: #ddd;
	--color-surface-3: #ddd;
	--color-surface-4: #ddd;
	--color-base: #000;
	--color-base--emphasized: #cf142b;
	--color-base--subtle: #cf142b;
	--color-subtle: #666;
	--color-emphasized: #000;
	--background-color-progressive--hover: #b01125;
	--color-placeholder: #999;
}

:root.skin-theme-clientpref-night {
	--color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
	--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
	--color-surface-2: #333;
	--color-surface-3: #333;
	--color-surface-4: #333;
	--color-base: #fff;
	--color-base--emphasized: #ff5555;
	--color-base--subtle: #ff5555;
	--color-subtle: #bbb;
	--color-emphasized: #fff;
	--background-color-progressive--hover: #ff5555;
	--color-placeholder: #666;
	--color-link: #ff5555;
}

@media screen and (prefers-color-scheme:light) {
	:root.skin-theme-clientpref-os {
		--color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
		--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
		--color-surface-2: #ddd;
		--color-surface-3: #ddd;
		--color-surface-4: #ddd;
		--color-base: #000;
		--color-base--emphasized: #cf142b;
		--color-base--subtle: #cf142b;
		--color-subtle: #666;
		--color-emphasized: #000;
		--background-color-progressive--hover: #b01125;
		--color-placeholder: #999;
	}
}

@media screen and (prefers-color-scheme:dark) {
	:root.skin-theme-clientpref-os {
		--color-surface-0: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
		--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
		--color-surface-2: #333;
		--color-surface-3: #333;
		--color-surface-4: #333;
		--color-base: #fff;
		--color-base--emphasized: #ff5555;
		--color-base--subtle: #ff5555;
		--color-subtle: #bbb;
		--color-emphasized: #fff;
		--background-color-progressive--hover: #ff5555;
		--color-placeholder: #666;
    	--color-link: #ff5555;
	}
}

#citizen-site-title {
	padding-bottom: 5px;
	font-weight: bold
}

@media (max-width:768px) {
	#citizen-site-title {
		font-size: 1.1em;
		flex: 0 1
	}
}

@media (min-width:769px) {
	#citizen-site-title {
		margin-right: 20px;
		font-size: 1.4em
	}
}