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-hsl__h: 352.62;
    --color-progressive-hsl__s: 82.38;
    --color-progressive-hsl__l: 44.51;
    /*--color-surface-0: */
    /*--color-surface-1: */
    /*--color-surface-2: */
    /*--color-surface-3: */
    /*--color-surface-4: */
}

:root.skin-theme-clientpref-day {
    --color-surface-0: white;
    --color-surface-1: #fffaf9;
    --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;
}
/* Make light theme great again */
:root.skin-theme-clientpref-day {
    --color-surface-0: red;
    --color-surface-1: lime;
    --color-surface-2: fuchsia;
    --color-surface-3: yellow;
    --color-surface-4: aqua;
    --color-base: blue;
    --color-base--emphasized: darkblue;
    --color-base--subtle: cornflowerblue;
}
:root.skin-theme-clientpref-night {
    --color-surface-0: #212529;
    --color-surface-1: #262629;
    --color-surface-2: #333;
    --color-surface-3: #333;
    --color-surface-4: #333;
    --color-base: #fff;
    --color-base--emphasized: #cf142b;
    --color-base--subtle: #cf142b;
    --color-subtle: #999;
    --color-emphasized: #fff;
    --background-color-progressive--hover: #b01125;
    --color-placeholder: #666;
}

@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --color-surface-0: #212529;
        --color-surface-1: #262629;
        --color-surface-2: #333;
        --color-surface-3: #333;
        --color-surface-4: #333;
        --color-base: #fff;
        --color-base--emphasized: #cf142b;
        --color-base--subtle: #cf142b;
        --color-subtle: #999;
        --color-emphasized: #fff;
        --background-color-progressive--hover: #b01125;
        --color-placeholder: #666;
    }
}

#citizen-site-title {
	padding-bottom: 5px;
	font-weight: bold;
}
/* Mobile (small screens) */
@media (max-width: 768px) {
    #citizen-site-title {
        font-size: 1.1em;
		flex: 0 1;
}
}

/* Desktop / large screens */
@media (min-width: 769px) {
    #citizen-site-title {
		margin-right: 20px;
        font-size: 1.4em;  /* increase this size as you like */
    }
}