MediaWiki:Citizen.css: различия между версиями

Версия от 21:50, 1 июня 2025

/* --- Светлая тема с бирюзовыми акцентами --- */
.skin-theme-clientpref-light {
    /* == Фоновые цвета == */
    /* Основной фон страницы */
    --color-surface-0: #F7FAFC;     /* Очень светлый, почти белый с холодным оттенком */

    /* Фон для карточек, меню, модальных окон и т.д. */
    --color-surface-1: #E0F2F7;     /* Легкий, нежный бирюзово-голубой оттенок */

    /* Дополнительный уровень фона (например, для вложенных элементов или границ) */
    --color-surface-2: #D4EBFO;     /* Чуть более насыщенный, но все еще светлый бирюзовый оттенок */
    /* Вы можете добавить --color-surface-3, --color-surface-4 при необходимости */

    /* == Цвета текста == */
    /* Основной цвет текста (хорошо читаемый на --color-surface-0 и --color-surface-1) */
    --color-base: #37474F;          /* Темный серо-синий (шиферный) */

    /* Второстепенный, менее акцентированный текст */
    --color-subtle: #546E7A;        /* Более светлый серо-синий */

    /* Выделенный текст (например, заголовки, если они не используют отдельные переменные) */
    --color-emphasized: #263238;    /* Очень темный серо-синий, почти черный */

    /* == Интерактивные элементы (Бирюзовые) == */
    /* Ссылки */
    --color-link: #00838F;          /* Насыщенный, но не слишком яркий бирюзово-голубой (Dark Cyan) */
    --color-link--hover: #006064;   /* Более темный бирюзово-голубой при наведении */

    /* Кнопки и "прогрессивные" элементы */
    --color-progressive: #00796B;       /* Классический бирюзовый/тиловый (Teal) для кнопок */
    --color-progressive--hover: #00695C; /* Темнее при наведении */
    --color-progressive--active: #004D40;/* Самый темный тиловый при нажатии */

    /* Опционально: Если вы хотите, чтобы основной генерируемый цвет скина был бирюзовым */
    /*
    --color-primary__h: 175;        // Оттенок в HSL для бирюзы (примерно 170-185)
    --color-primary__s: 70%;        // Насыщенность
    --color-primary__l: 45%;        // Светлота (средняя, чтобы скин мог генерировать и светлые, и темные вариации)
    */
}

/* --- Темная тема --- */
.skin-theme-clientpref-night {
    /* Ваши переменные для ТЕМНОЙ темы */
    /* Текстовые цвета (светлый текст на темном фоне) - используем ваши исходные значения */
    --color-base: #E0E0E0;          /* Основной текст: светло-серый */
    --color-subtle: #bbbbbb;        /* Второстепенный, неяркий текст: более тусклый светло-серый (f5f5f5 может быть слишком ярким для "subtle") */
    --color-emphasized: #f5f5f5;    /* Выделенный текст: почти белый */

    /* Цвета ссылок - используем ваши исходные значения */
    --color-link: #60bec9;
    --color-link--hover: #29d8ef;

    /* "Прогрессивные" элементы - используем ваши исходные значения */
    --color-progressive: #00acc1;
    --color-progressive--hover: #29d8ef;
    --color-progressive--active: #29d8ef; /* Можно сделать темнее для активного состояния, например #008a9a */

    /* Переменные Citizen для фона (примеры) */
    --color-surface-0: #07090d;     /* Основной фон страницы (почти черный) */
    --color-surface-1: #0a0d14;     /* Фон для элементов типа карточек, меню (чуть светлее основного) */
    --color-surface-2: #0d121b;     /* Следующий уровень поверхности */
    /* --color-surface-3: ... */
    /* --color-surface-4: ... */
}