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

Версия от 22:02, 1 июня 2025

/* --- Светлая тема --- */
.skin-theme-clientpref-light {
    /* Ваши переменные для СВЕТЛОЙ темы */
    /* Текстовые цвета (темный текст на светлом фоне) */
    --color-base: #212529;              /* Основной текст: стандартный темный (почти черный) */
    --color-subtle: #6C757D;            /* Второстепенный, неяркий текст: серый */
    --color-emphasized: #000000;        /* Выделенный текст: черный для максимального акцента */

    /* Цвета ссылок */
    --color-link: #007bff;              /* Стандартный синий для ссылок */
    --color-link--hover: #0056b3;       /* Более темный синий при наведении */

    /* "Прогрессивные" элементы (например, кнопки подтверждения, информационные блоки) */
    --color-progressive: #17a2b8;       /* Бирюзово-голубой (Cyan) */
    --color-progressive--hover: #117a8b; /* Темнее при наведении */
    --color-progressive--active: #0c6270;/* Еще темнее при активации */

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


/* --- Темная тема --- */
.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: ... */
}

@@ Строка 1: / Строка 1: @@
-/* --- Светлая тема с бирюзовыми акцентами --- */
+/* --- Светлая тема --- */
 .skin-theme-clientpref-light {
-     /* == Фоновые цвета == */
+     /* Ваши переменные для СВЕТЛОЙ темы */
-     /* Основной фон страницы */
+    /* Текстовые цвета (темный текст на светлом фоне) */
-     --color-surface-0: #F7FAFC;     /* Очень светлый, почти белый с холодным оттенком */
+     --color-base: #212529;              /* Основной текст: стандартный темный (почти черный) */
+     --color-subtle: #6C757D;            /* Второстепенный, неяркий текст: серый */
+    --color-emphasized: #000000;        /* Выделенный текст: черный для максимального акцента */
-     /* Фон для карточек, меню, модальных окон и т.д. */
+     /* Цвета ссылок */
-     --color-surface-1: #E0F2F7;     /* Легкий, нежный бирюзово-голубой оттенок */
+    --color-link: #007bff;              /* Стандартный синий для ссылок */
+     --color-link--hover: #0056b3;       /* Более темный синий при наведении */
-     /* Дополнительный уровень фона (например, для вложенных элементов или границ) */
+     /* "Прогрессивные" элементы (например, кнопки подтверждения, информационные блоки) */
-     --color-surface-2: #D4EBFO;     /* Чуть более насыщенный, но все еще светлый бирюзовый оттенок */
+     --color-progressive: #17a2b8;       /* Бирюзово-голубой (Cyan) */
-     /* Вы можете добавить --color-surface-3, --color-surface-4 при необходимости */
+     --color-progressive--hover: #117a8b; /* Темнее при наведении */
+    --color-progressive--active: #0c6270;/* Еще темнее при активации */
-     /* == Цвета текста == */
+     /* Переменные Citizen для фона (примеры) */
-     /* Основной цвет текста (хорошо читаемый на --color-surface-0 и --color-surface-1) */
+     --color-surface-0: #FFFFFF;         /* Основной фон страницы: белый */
-    --color-base: #37474F;          /* Темный серо-синий (шиферный) */
+     --color-surface-1: #F8F9FA;         /* Фон для элементов типа карточек, меню: очень светло-серый */
+     --color-surface-2: #E9ECEF;         /* Следующий уровень поверхности: светло-серый (часто для границ или разделителей) */
-    /* Второстепенный, менее акцентированный текст */
+     /* --color-surface-3: #DEE2E6; */
-     --color-subtle: #546E7A;        /* Более светлый серо-синий */
+     /* --color-surface-4: #CED4DA; */
+}
-    /* Выделенный текст (например, заголовки, если они не используют отдельные переменные) */
-     --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%;        // Светлота (средняя, чтобы скин мог генерировать и светлые, и темные вариации)
-    */
-}
 /* --- Темная тема --- */