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

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

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

    /* Цвета ссылок */
    --color-link: #36c;             /* Стандартный синий для ссылок MediaWiki */
    --color-link--hover: #447ff5;   /* Ссылка при наведении: более яркий синий */

    /* "Прогрессивные" элементы (например, кнопки подтверждения) */
    --color-progressive: #008000;       /* Зеленый */
    --color-progressive--hover: #006400; /* Темно-зеленый при наведении */
    --color-progressive--active: #004d00;/* Еще темнее зеленый при активации */

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

/* --- Темная тема --- */
.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-base: #2f363d;              /* Основной текст: глубокий серо-синий для мягкости */
+     /* Текстовые цвета (темный текст на светлом фоне) */
-     --color-subtle: #606f7b;            /* Второстепенный, неяркий текст: приглушенный серо-синий */
+     --color-base: #202124;          /* Основной текст: темно-серый */
-     --color-emphasized: #1a1e21;        /* Выделенный текст: очень темный, почти черный */
+     --color-subtle: #5f6368;        /* Второстепенный, неяркий текст: серый */
+     --color-emphasized: #000000;    /* Выделенный текст: черный */
-     /* Цвета ссылок (бирюзовые) */
+     /* Цвета ссылок */
-     --color-link: #1abc9c;              /* Яркий бирюзовый для ссылок */
+     --color-link: #36c;             /* Стандартный синий для ссылок MediaWiki */
-     --color-link--hover: #16a085;       /* Более темный бирюзовый при наведении */
+     --color-link--hover: #447ff5;   /* Ссылка при наведении: более яркий синий */
-     /* "Прогрессивные" элементы (бирюзовые или комплементарные) */
+     /* "Прогрессивные" элементы (например, кнопки подтверждения) */
-     --color-progressive: #00A99D;       /* Насыщенный бирюзовый, чуть более "морской" */
+     --color-progressive: #008000;       /* Зеленый */
-     --color-progressive--hover: #00877A; /* Темнее при наведении */
+     --color-progressive--hover: #006400; /* Темно-зеленый при наведении */
-     --color-progressive--active: #006F64;/* Еще темнее при активации */
+     --color-progressive--active: #004d00;/* Еще темнее зеленый при активации */
-     /* Переменные Citizen для фона (очень светлые для контраста) */
+     /* Переменные Citizen для фона (примеры) */
-     --color-surface-0: #f8f9fa;     /* Основной фон страницы: очень светлый, почти белый (можно #ffffff) */
+     --color-surface-0: #ffffff;     /* Основной фон страницы (белый) */
-     --color-surface-1: #ffffff;     /* Фон для элементов типа карточек, меню: чистый белый */
+     --color-surface-1: #f8f9fa;     /* Фон для элементов типа карточек, меню (очень светло-серый) */
-     --color-surface-2: #e9ecef;     /* Следующий уровень поверхности: легкий серый для разделения */
+     --color-surface-2: #e9ecef;     /* Следующий уровень поверхности */
-     /* --color-surface-3: #dee2e6; */
+     /* --color-surface-3: ... */
-     /* --color-surface-4: #ced4da; */
+     /* --color-surface-4: ... */
-    /* Дополнительно: можно определить основной HSL цвет с бирюзовым оттенком,
-       если вы хотите, чтобы Citizen генерировал другие элементы на его основе.
-       Бирюзовый оттенок находится примерно между 160 и 180 градусами.
-    */
-    /*
-    --color-primary__h: 170;        // Оттенок бирюзового
-    --color-primary__s: 70%;        // Насыщенность
-    --color-primary__l: 45%;        // Светлота (для генерации как светлых, так и темных вариаций)
-    */
 }