Участник:Torgovec/citizen.css: различия между версиями

/* Импорт шрифтов */
/* Шрифт нечитаемых палочек */
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
/* Пиксельный шрифт */
@import url('https://fonts.googleapis.com/css2?family=Tiny5:ital,wght@0,100..900;1,100..900&display=swap');
/* Тонкий шрифт */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
/* Шрифт Kelly Slab*/
@import url('https://fonts.googleapis.com/css2?family=Kelly+Slab&display=swap');

:root {
	/* Меняем основной оттенок с синего (~215) на зелёный (140) */
	--color-primary__h: 140;
	--color-primary__s: 65%;
	--color-primary__l: 40%;
	
	/* шрифты */
	--font-family-citizen-base: 'Tiny5', 'Roboto-fallback';
    --font-family-citizen-serif: 'Poiret One';
    --font-family-citizen-monospace: 'Roboto Mono';
	
	--font-family-base: var(--font-family-citizen-base), var(--font-family-language-base), system-ui, -apple-system, sans-serif;
    --font-family-serif: var(--font-family-citizen-serif), var(--font-family-language-serif), 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
    --font-family-monospace: var(--font-family-citizen-monospace), var(--font-family-language-monospace), 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;

	--backdrop-filter-blur: blur(2px);
    --backdrop-filter-frosted-glass: blur(16px) saturate(140%);

}

/* Отдельная настройка яркости для тёмной темы, чтобы зелёный хорошо читался */
html.skin-citizen-dark,
html.skin-theme-clientpref-night {
	--color-primary__h: 140;
	--color-primary__s: 60%;
	--color-primary__l: 55%;
	
	--color-progressive: #33FDDDAA;
	
	--color-surface-0: #33883333;
	--color-surface-1: #225522BB;
	--color-surface-2: #406F4FBF;
	--color-surface-3: #22885588;
	--color-surface-4: #36383F88;

}

/* Переносим backdrop-filter на конкретные элементы интерфейса скина Citizen, которые используют полупрозрачность */
html.skin-citizen-dark .mw-header,
html.skin-citizen-dark .citizen-card,
html.skin-citizen-dark .vector-sidebar,
html.skin-theme-clientpref-night .mw-header,
html.skin-theme-clientpref-night .citizen-card,
html.skin-theme-clientpref-night .vector-sidebar,
.menu, .options{
	backdrop-filter: var(--backdrop-filter-frosted-glass);
}