/* * ========================================================================== * PORTAL FOCUS — общие focus и mobile touch-состояния * Расположение: /public/css/common/portal-focus.css * * Зачем нужен отдельный слой: в проекте 97 файлов гасят `outline`, и только * 46 задают собственный `:focus-visible`. Из-за этого при навигации с * клавиатуры на большинстве экранов не было видно, где находится фокус. * * Файл подключается последним в , поэтому перекрывает `outline: none` * из страничных стилей. Focus-часть влияет только на `:focus-visible` — то есть на * клавиатуру и вспомогательные технологии; при клике мышью кольцо * не появляется. Этот же слой убирает WebKit touch-заливку только в mobile layout до 768 px. * * `:where()` держит нулевую специфичность подлежащего, поэтому страничные * правила фокуса, объявленные позже, по-прежнему могут его переопределить. * ========================================================================== */ :root { --portal-focus-ring: #2563eb; --portal-focus-ring-width: 2px; --portal-focus-ring-offset: 2px; } /* Mobile WebKit красит прямоугольник вокруг нажатого элемента. Свойство наследуется от html, поэтому одно правило покрывает и native controls, и кастомные button/div controls. Desktop и клавиатурное кольцо ниже не меняются. */ @media (max-width: 768px) { html { -webkit-tap-highlight-color: transparent; } /* На мобильных рабочих экранах нижняя навигация уже занимает роль постоянного завершения страницы, поэтому copyright/footer не дублируем. */ .page-footer, .dashboard-page-note, .landing-copyright { display: none !important; } } :where( a[href], area[href], button, input, select, textarea, summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"] ):focus-visible { outline: var(--portal-focus-ring-width) solid var(--portal-focus-ring); outline-offset: var(--portal-focus-ring-offset); } /* Элементы, прижатые к краю контейнера с обрезкой, теряли бы внешнее кольцо — для них смещение убирается, кольцо рисуется по самой границе. */ :where(td, th, li) > :where(a[href], button):focus-visible { outline-offset: 0; } /* Тёмные подложки: синее кольцо на них читается плохо, берём белое. */ :where(.chat-modal-header, .dashboard-sidebar, .sidebar, .new-header) :where(a[href], button, [role="button"]):focus-visible { outline-color: currentColor; } /* Пользователи с системным запретом анимации не должны получать дополнительное мерцание при переходе фокуса. */ @media (prefers-reduced-motion: reduce) { :where(a[href], button, input, select, textarea):focus-visible { transition: none; } }