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

Текущая версия от 15:18, 2 июня 2025

/* --- Светлая тема --- */
.skin-theme-clientpref-day {
    /* Ваши переменные для СВЕТЛОЙ темы */

    /* Текстовые цвета (темный текст на светлом фоне) */
    --color-base: #2f363d;;              /* Основной текст: глубокий серо-синий для мягкости */
    --color-subtle: #606f7b;            /* Второстепенный, неяркий текст: приглушенный серо-синий */
    --color-emphasized: #1a1e21;        /* Выделенный текст: очень темный, почти черный  */

    /* Цвета ссылок */
    --color-link: #007585;
    --color-link--hover: #005F6B;

    /* "Прогрессивные" элементы*/
    --color-progressive: #008C9E;
    --color-progressive--hover: #007585;
    --color-progressive--active: #005F6B;

    /* Переменные Citizen для фона*/
    /* Эти значения создают чистый и светлый фон */
    --color-surface-0: #f8f9fa;         /* Основной фон страницы: очень светлый, почти белый */
    --color-surface-1: #ffffff;         /* Фон для элементов типа карточек, меню: чистый белый */
    --color-surface-2: #e9ecef;         /* Следующий уровень поверхности: легкий серый для разделения */
    /* --color-surface-3: #dee2e6; */   /* Пример дополнительного фона, если нужен */
    /* --color-surface-4: #ced4da; */   /* Пример еще одного уровня фона */

    /* Дополнительно: можно определить основной HSL цвет с бирюзовым оттенком,
       если вы хотите, чтобы Citizen генерировал другие элементы на его основе.
       Бирюзовый оттенок находится примерно между 180 и 195 градусами для более голубого варианта.
    */
    --color-primary__h: 190;        // Оттенок бирюзово-голубого
    --color-primary__s: 70%;        // Насыщенность
    --color-primary__l: 40%;        // Светлота (достаточно темная для генерации контрастных вариаций)

    --color-widget-bg: #e9ecef; /* Цвет фона виджета */
    --color-widget-bg-btn: #e9ecef; /* Цвет фона кнопки на виджите */
    --color-widget-bg-btn-hover: #f0f3f7; /* Цвет фона кнопки на виджите при наведении */
    --color-widget-border: var(--border-color-base); /* Цвет рамки виджета */

    --color-panel-transparent: rgba(241,243,247,0.5);
    --color-box-shadow: rgba(0,0,0,0.03);

    --labirint-color: #00acc1;
    --labirint-accent-color: #29d8ef;   
}

html.skin-theme-clientpref-day .main-page-title {
  color: var(--color-emphasized);
}

html.skin-theme-clientpref-day .main-page-subtitle {
  color: var(--color-subtle);
}

/* --- Темная тема --- */
.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: ... */
    --color-widget-bg: #1E2228; /* Цвет фона виджета */
    --color-widget-bg-btn: #171B20; /* Цвет фона кнопки на виджите */
    --color-widget-bg-btn-hover: #282D35; /* Цвет фона кнопки на виджите при наведении */
    --color-widget-border: #2A2E35; /* Цвет рамки виджета */

    --color-panel-transparent: rgba(26,29,35,0.5);
    --color-box-shadow: rgba(0,0,0,0.2);

    --labirint-color: #00acc1;
    --labirint-accent-color: #29d8ef;
}

html.skin-theme-clientpref-night .main-page-title {
  color: #4DD0E1; /* Основной цвет текста заголовка */
  text-shadow:
    0px 15px 5px rgba(0, 172, 196, 0.1),
    10px 20px 5px rgba(0, 172, 196, 0.05),
    -10px 20px 5px rgba(0, 172, 196, 0.05),
    0px 0px 6px rgba(0, 172, 196, 0.7);
}

html.skin-theme-clientpref-night .main-page-subtitle {
  color: #4fa9bf;
}