/* =========================================================================== Вход Rust+ — оформление под приложение. Цвета не подобраны на глаз: те же значения и те же роли, что в client/src/ui/theme/tokens.css. Экран входа и приложение должны выглядеть одним продуктом. ─── КАК ЭТО УСТРОЕНО, И ПОЧЕМУ ИМЕННО ТАК ─────────────────────────────── Тема v2 построена на PatternFly v5. У него есть свой тёмный режим, и он уже согласован: фон, текст, границы, наведение, отключённые состояния. Мы его ВКЛЮЧАЕМ (см. theme.properties) и ПЕРЕКРАШИВАЕМ его палитру — вместо того чтобы переопределять цвет каждого компонента по отдельности. Первая попытка была именно такой, поштучной, и провалилась наглядно: поля ввода стали тёмными, а карточка осталась белой. Причина в том, что PatternFly объявляет переменные компонента НА САМОМ КОМПОНЕНТЕ: .pf-v5-c-login__main { --pf-v5-c-login__main--BackgroundColor: ... } Объявление на :root такое не перебивает — оно наследуется, а локальное выигрывает. Поэтому красим не компоненты, а ПАЛИТРУ, из которой они берут цвет. Селекторы PatternFly с :where() имеют нулевую специфичность, поэтому обычного .pf-v5-theme-dark достаточно, чтобы победить их. =========================================================================== */ :root { /* ── Палитра приложения ──────────────────────────────────────────────── */ --rp-gray-0: #f1f1f1; /* основной текст */ --rp-gray-10: #cccccc; /* вторичный текст */ --rp-gray-20: #a7a7a7; /* подписи, muted */ --rp-gray-40: #5d5d5d; /* плейсхолдеры, disabled */ --rp-gray-70: #242424; /* поповеры */ --rp-gray-80: #1d1d1d; /* поля ввода */ --rp-gray-90: #121212; /* карточки и панели */ --rp-gray-100: #060606; /* холст */ --rp-orange-50: #ff5500; /* базовый акцент */ --rp-orange-40: #ff612b; /* наведение */ --rp-orange-20: #ffa371; /* нажатие */ --rp-red-50: #ff002b; /* ошибка */ --rp-line: rgba(255, 255, 255, 0.06); --rp-line-strong: rgba(255, 255, 255, 0.12); /* Нативные элементы браузера — полосы прокрутки, глазок у пароля, автозаполнение — красятся не нашим CSS, а этим свойством. Без него они остаются светлыми на тёмной странице. */ color-scheme: dark; /* Полоса поверх карточки: у темы она синяя по умолчанию. */ --keycloak-card-top-color: var(--rp-orange-50); } /* ── Палитра PatternFly в тёмном режиме ─────────────────────────────────── */ .pf-v5-theme-dark { /* Фоны. Роли выяснены по самому patternfly.min.css, а не угаданы: карточка входа берёт --BackgroundColor--300 (там лежит серо-синий #26292d, из-за него она и не попадала в наш цвет). Часть токенов задана через промежуточные «dark-», поэтому перекрашиваем и те, и другие — какой бы путь ни выбрал компонент, он придёт к нашему цвету. */ --pf-v5-global--BackgroundColor--300: var(--rp-gray-90); /* карточка входа */ --pf-v5-global--BackgroundColor--200: var(--rp-gray-100); /* холст */ --pf-v5-global--BackgroundColor--100: var(--rp-gray-90); /* панели */ --pf-v5-global--BackgroundColor--dark-100: var(--rp-gray-90); --pf-v5-global--BackgroundColor--dark-200: var(--rp-gray-100); --pf-v5-global--BackgroundColor--dark-300: var(--rp-gray-80); --pf-v5-global--BackgroundColor--dark-400: var(--rp-gray-70); /* Текст. */ --pf-v5-global--Color--light-100: var(--rp-gray-0); --pf-v5-global--Color--light-200: var(--rp-gray-20); /* Границы — ВСЕ четыре, а не только 100 и 300. Подчёркивание поля в спокойном состоянии берёт --200 и --400, а там лежит светло-серый #aaabac. Пропустил их в первой версии, и под каждым полем светилась чужая линия. */ --pf-v5-global--BorderColor--100: var(--rp-line-strong); --pf-v5-global--BorderColor--200: var(--rp-line-strong); --pf-v5-global--BorderColor--300: var(--rp-line); --pf-v5-global--BorderColor--400: var(--rp-line-strong); /* Акцент: кнопка «Войти», ссылки, фокус. */ --pf-v5-global--primary-color--100: var(--rp-orange-50); --pf-v5-global--primary-color--200: var(--rp-orange-40); --pf-v5-global--primary-color--300: var(--rp-orange-50); --pf-v5-global--primary-color--dark-100: var(--rp-orange-50); --pf-v5-global--primary-color--light-100: var(--rp-orange-50); --pf-v5-global--link--Color: var(--rp-orange-50); --pf-v5-global--link--Color--hover: var(--rp-orange-40); --pf-v5-global--active-color--100: var(--rp-orange-50); --pf-v5-global--danger-color--100: var(--rp-red-50); } /* Холст страницы. Тема v2 ставит сюда свою фоновую картинку через --keycloak-bg-logo-url — заменяем целиком, иначе графика Keycloak осталась бы поверх нашего цвета. */ .login-pf body { background: var(--rp-gray-100); } /* Шапка над карточкой. В теме v2 знак продукта — НЕ картинка: элемент #kc-header-wrapper выводит displayNameHtml realm'а. Правил для div.kc-logo-text здесь нет намеренно: этот элемент остался в старой теме `keycloak`, в v2 его не существует. */ #kc-header-wrapper { font-family: var(--pf-v5-global--FontFamily--heading, sans-serif); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--rp-gray-0); text-transform: none; padding-bottom: 14px; } #kc-header-wrapper .rp-accent { color: var(--rp-orange-50); } /* Поля ввода. Имена переменных здесь ПРОВЕРЕНЫ по самому patternfly.min.css, а не выведены по аналогии. Первая версия этого блока содержала четыре несуществующих имени — они молча не делали ничего, и поле оставалось наполовину чужим. Так и появился синий контур на скриншоте. Устройство поля у PatternFly такое: ::before рамка коробки — четыре стороны отдельными переменными, все берут --pf-v5-global--BorderColor--300 (перекрашен выше) ::after подчёркивание снизу — оно и есть индикатор фокуса Общей переменной «цвет рамки» не существует. */ .pf-v5-c-form-control { --pf-v5-c-form-control--BackgroundColor: var(--rp-gray-80); --pf-v5-c-form-control--Color: var(--rp-gray-0); /* Подчёркивание в спокойном состоянии — задано прямо на компоненте, чтобы не зависеть от того, какой из глобальных токенов PatternFly выберет в следующей версии. */ --pf-v5-c-form-control--after--BorderBottomColor: var(--rp-line-strong); --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--rp-orange-40); --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--rp-orange-50); } /* Обводка фокуса. PatternFly задаёт полю только outline-offset и НЕ задаёт саму обводку — проверено, во всём patternfly.min.css слово outline встречается один раз. Значит рисуется системная обводка браузера, а она синяя. Отсюда и был синий контур поверх нашей оранжевой линии. Не убираем её совсем — по обводке видно, где курсор, и это важнее красоты. Перекрашиваем в наш акцент. */ .pf-v5-c-form-control > :is(input, select, textarea):focus { outline: 2px solid var(--rp-orange-50); } /* Плейсхолдер. Переменной для него у PatternFly нет — только псевдоэлемент. */ .pf-v5-c-form-control > :is(input, textarea)::placeholder { color: var(--rp-gray-40); opacity: 1; } /* Карточка: убираем лишнюю тень PatternFly, вместо неё — тонкая рамка, как у панелей приложения. */ .pf-v5-c-login__main { /* Переменная объявлена на компоненте, а не на :root, — и это тот самый урок, из-за которого карточка сначала осталась белой. Дублирует --BackgroundColor--300 выше намеренно: так цвет карточки не зависит от того, какой токен PatternFly решит использовать в следующей версии. */ --pf-v5-c-login__main--BackgroundColor: var(--rp-gray-90); border: 1px solid var(--rp-line); box-shadow: none; } /* Переключатель языка. Это нативный