/* ============================================================================ OKO · ПРАВКИ ДАНИЭЛЯ 09.08 — слой поверх всего остального Грузится последним, поэтому при равной специфичности выигрывает без !important. !important стоит только там, где иначе не побить инлайновый стиль слоя, и рядом сказано зачем. ============================================================================ */ /* ============================================================================ 1. Бейджи профиля — без горизонтального скролла Даниэль: «Ранний MAX Партнёр 100+ реакций Автор — сделать без горизонтального скролла». Что было: .prof-ach — это flex с overflow-x:auto и маской, гасящей правые 20 px. То есть последний бейдж всегда наполовину растворён, и чтобы его увидеть, ряд надо листать пальцем. На 320 px пятёрка бейджей требует ~520 px — видно меньше двух третей. Что стало: перенос на столько строк, сколько нужно. Ничего не прячется, листать нечего, маска снята. ============================================================================ */ .prof-ach{ display: flex; flex-wrap: wrap; /* было: одна строка со скроллом */ overflow-x: visible; gap: 7px; padding-bottom: 0; /* Маска гасила правый край, создавая ощущение обрезанного текста. Списку с переносом она не нужна — перебиваем правило из index.html. */ -webkit-mask-image: none !important; mask-image: none !important; } .prof-ach .ach{ flex: 0 0 auto; min-width: 0; max-width: 100%; } .prof-ach .ach span{ white-space: nowrap; /* слово целиком, перенос только между бейджами */ overflow-wrap: normal; word-break: normal; } /* ============================================================================ 2. Папки чатов — тоже без пряток за краем Тот же приём, что и у бейджей: .folders листается вбок и прикрыт маской. Замер на 390 px: ряду нужно 883 px — влезает меньше половины, и человек не видит, что за «Непрочитанными» есть ещё «Управление». Переносим на две строки. Ряд короткий, места занимает немного, зато виден весь. ============================================================================ */ .folders{ flex-wrap: wrap; overflow-x: visible; row-gap: 6px; -webkit-mask-image: none !important; mask-image: none !important; } .folders > *{ flex: 0 0 auto; } /* ============================================================================ 3. Ничего не уезжает под шапку Голый env(safe-area-inset-*) внутри Telegram равен нулю — поэтому только переменные, которые выставляет JS из safeAreaInset и contentSafeAreaInset. Здесь страхуем подстраницы и полноэкранные панели: у главных вкладок отступ уже есть, а вот открытая панель иногда начинается вплотную к краю. ============================================================================ */ #okoSoc, #chView, #st2View, #psView, #systemView, #adminView, #searchView, #notifsView{ padding-top: max(var(--oko-safe-top), 0px); } /* ============================================================================ 4. Окно с вопросом всегда сверху Найдено при сборке тарифов: у #okoPopup z-index 70, а у страниц кошелька 118. То есть любое подтверждение, открытое из раздела, рисовалось ПОД ним — человек жал «Удалить», окно послушно появлялось и было не видно. Это не беда одних тарифов: панелей с z-index выше семидесяти в приложении много (страницы сущностей, чаты, настройки, штаб). Поэтому поднимаем не точечно, а один раз и высоко — окно с вопросом обязано быть поверх всего, что оно перекрывает по смыслу. Ниже только системные слои 99999 (запись голосового и входящий звонок), и это правильно: их перебивать нельзя. ============================================================================ */ #okoPopup{ z-index: 21000 !important; } /* ============================================================================ 5. Звёзды рейтинга — вектор, а не глиф В отзывах о курсах рейтинг рисовался символами ★ и ☆. Это шрифтовой глиф: на Android он приходит из системного эмодзи-шрифта и получается цветным и другого кегля, чем задумано, а в интерфейсе OKO иконок из шрифта нет — только спрайт. Пустая звезда — тот же контур приглушённым цветом. ============================================================================ */ .acd-cp-review-h .stars{ display: inline-flex; align-items: center; gap: 2px; line-height: 0; } .acd-cp-review-h .stars svg.i{ width: 13px; height: 13px; color: var(--border); flex: 0 0 auto; } .acd-cp-review-h .stars svg.i.on{ color: var(--accent); } /* ============================================================================ 6. Лестница партнёрских уровней не рвёт слова Пять ячеек в ряд по 1fr: на 320-пиксельном экране под текст остаётся ~43px, а MIDDLE в 11px uppercase — все 46. Слово переносилось прямо посреди: «MID / DLE», «JUNI / OR», «SENI / OR», «LEGE / ND». Лечим не переносом, а размером: слово в одну строку, кегль ужимается до ширины ячейки. Padding по бокам тоже режем — он тут ничего не держит. ============================================================================ */ .pp-ladder-cell .lv-name{ white-space: nowrap; } @media (max-width: 400px){ .pp-ladder{ gap: 4px; } .pp-ladder-cell{ padding-left: 2px; padding-right: 2px; } .pp-ladder-cell .lv-name{ font-size: 9px; letter-spacing: 0; } .pp-ladder-cell .lv-pct{ font-size: 9px; } } @media (max-width: 340px){ .pp-ladder-cell .lv-name{ font-size: 8px; } } /* ============================================================================ 7. Подпись под промо-карточкой не рвётся В подвале карточки два элемента в ряд: цветной тег и тип материала («сценарий» / «баннер» / «текст»). Оба — flex-элементы, и оба ужимались ниже своего содержимого: слово ломалось как «сценари / й». Тип материала короткий — ему запрещаем и сжиматься, и переноситься. Тегу можно ужаться, но не рваться: длинный обрезаем многоточием. ============================================================================ */ .pp-promo-meta{ gap: 8px; } .pp-promo-meta .dim{ flex: 0 0 auto; white-space: nowrap; } .pp-promo-meta .pp-promo-kind-tag{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================================ 8. Счётчики профиля не обрезаются на узком экране Ряд из трёх: подписчики, публикации, клипы. На 320 пикселях ячейка выходит 93 пикселя, а «ПОДПИСЧИКОВ» в 10.5px с межбуквенным разрядкой .05em просит 96 — и слово уезжало в многоточие. Правило Даниэля: текст не обрезается. Лечим кеглем, а не переносом: подпись остаётся одной строкой, шрифт подстраивается под ширину ячейки. Разрядку на узком снимаем — она тут стоит дороже, чем даёт. ============================================================================ */ .pp2-stat small, .ps-stat small{ white-space: nowrap; } @media (max-width: 380px){ .pp2-stat-row{ gap: 5px; padding: 12px 8px; } .pp2-stat small, .ps-stat small{ font-size: 9px; letter-spacing: 0; } } @media (max-width: 340px){ .pp2-stat small, .ps-stat small{ font-size: 8.5px; } } /* ============================================================================ 9. Награды академии не срезаются на узком экране Сетка наград — три колонки по 1fr. А `1fr` это `minmax(auto, 1fr)`: трек не имеет права стать уже своего содержимого. Подписи вроде «Пройти 100 уроков» и «Собрать 5 сертификатов» раздвигали сетку на 6-8 пикселей шире контейнера, и `.pad` с overflow-x:hidden срезал их насовсем — доскроллить до хвоста нельзя, его просто нет. Разрешаем трекам сжиматься (minmax(0,1fr)) и переносим подписи по словам. ============================================================================ */ .ac-badges{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ac-badge{ min-width: 0; } .ac-badge .t, .ac-badge .d{ min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: none; } @media (max-width: 340px){ .ac-badges{ gap: 6px; } .ac-badge{ padding-left: 4px; padding-right: 4px; } .ac-badge .d{ font-size: 9px; } } /* ============================================================================ 10. Источник трафика в партнёрке не теряет хвост `.pp-src-name` — одна строка с многоточием, и это правильно для длинного названия. Но внутри лежит вторая часть `.dim` («· посты · закреп»), у неё свой бокс, и обрезался он не многоточием, а насухо: 21 пиксель текста исчезал без следа. Многоточие должно доставаться самой длинной части. ============================================================================ */ .pp-src-name{ display: flex; align-items: baseline; gap: 4px; min-width: 0; } .pp-src-name > .dim{ margin-left: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================================ 11. Название раздела в шапке важнее размера иконок На 320 пикселях в шапке рядом стоят «назад», знак OKO, заголовок и три действия. Слой доступности честно растит иконочные кнопки до 44×44 — строка это переживает, переполнения нет, и он их оставляет. Платит за это заголовок: «Реклама» просит 83 пикселя, получает 64 и превращается в «Рекл…». Именно это Даниэль и называл «сверху обрезается». Решаем в пользу текста. Три кнопки по 36 вместо 44 отдают заголовку 30 пикселей — «Реклама» и «Партнёрка» помещаются целиком. Область нажатия при этом остаётся достаточной: 36 пикселей плюс невидимый расширитель, который тот же слой доступности добавляет псевдоэлементом. !important здесь по делу: слой доступности ставит min-width прямо в инлайновый стиль, обычное правило его не перебьёт. ============================================================================ */ @media (max-width: 360px){ /* Держим 44px даже на узких экранах: две-три иконки по 44px + заголовок помещаются в ~328px шапки. Прежнее ужимание до 36px нарушало цель нажатия (обновлено 11.08 — было width:36px). */ header .hdr-actions{ gap: 2px !important; } header .hdr-actions > button, header .theme-btn, header .notif-btn{ width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } header .hdr-actions svg.i{ width: 19px; height: 19px; } header .screen-title{ font-size: clamp(14px, 4.4vw, 17px); } } /* Прятать знак OKO ради заголовка не стали: селектор не умеет отличить реально показанную кнопку «назад» от скрытой классом, и знак пропадал с главных вкладок тоже. «Партнёрке» хватает четырёх пикселей — их даёт кегль. «Рулетке OKO» не хватает девятнадцати ни на 320, ни на 390: ей в шапке оставлено короткое «Рулетка», полное название стоит на самом экране (см. oko-v2.js). */ @media (max-width: 360px){ header .screen-title{ font-size: clamp(13px, 4.2vw, 17px); } } /* ============================================================================ 12. Редактор истории не растягивает сам себя Аудит: «Опубликовать историю» срезано на 16 пикселей, и вместе с ним весь экран уезжает вбок на те же 16. Причина не в кнопке. #spEditor — колонка flex, дети в ней растягиваются по ширине самого широкого. Панель инструментов (свотчи, стикеры, три группы кнопок) в 390 пикселей не помещается, колонка становится шире экрана — и кнопка публикации, растянутая по ней, вылезает за край вместе с подписью. Запрещаем детям колонки быть шире её самой. Панели инструментов при этом разрешаем переноситься и листаться — обрезать их нельзя, там выбор цвета и стикеров. ============================================================================ */ #spEditor{ overflow-x: hidden; } #spEditor > *{ max-width: 100%; min-width: 0; } .sp-ed-tools{ max-width: 100%; min-width: 0; } .sp-ed-row{ max-width: 100%; } .sp-ed-swatches, .sp-ed-stickers{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sp-ed-swatches::-webkit-scrollbar, .sp-ed-stickers::-webkit-scrollbar{ display: none; } .sp-ed-pub{ max-width: calc(100% - 32px); } /* ============================================================================ 13. КОНТРАСТ: четыре пары ниже нормы (замер probe-a11y) Требование WCAG AA для обычного текста — 4.5:1. Пробник нашёл четыре пары, которые до него не дотягивают. Все четыре — в СВЕТЛОЙ теме, и корень один: в светлой теме лайм темнеет (--accent становится #3a7600), а фон под ним местами остаётся тёмным — либо наоборот, тёмный текст лежит на тёмном лайме. ============================================================================ */ /* 13.1 Экран входа — 3.77:1 и 4.12:1. #authScreen чёрный ВСЕГДА, в обеих темах. Значит и текст на нём обязан быть из тёмной палитры, а не из светлой: иначе «условия сервиса» на первом же экране приложения читаются как тёмно-зелёное на чёрном (3.77:1), а строчка «Продолжая, ты принимаешь…» — как серо-зелёное на чёрном (4.12:1). Стало: 16.7:1 для ссылок и 8.5:1 для пояснения. */ #authScreen .auth-legal{ color:#a0a79a; } #authScreen .auth-legal .lg-a, #authScreen .lg-a{ color:#9AFF00; } /* 13.2 Кнопка «Копировать» в партнёрской — 3.56:1. Заливка var(--accent) в светлой теме тёмная (#3a7600), а надпись на ней осталась почти чёрной. Белый текст на этой заливке даёт 5.6:1 и не трогает тёмную тему, где лайм яркий и чёрная надпись правильна. */ :root[data-theme="light"] .m2-btn{ color:#fff; } :root[data-theme="light"] .m2-btn svg.i{ color:#fff; } /* 13.3 Оценка безопасности кошелька «2/4» — 3.76:1. Красный --danger светлой темы (#d43a3a) на бледно-розовой плашке. Тон тот же, просто темнее на два шага: 5.4:1. */ :root[data-theme="light"] .wal-safe-score.lo{ color:#b02525; } /* ============================================================================ 14. ЦЕЛИ НАЖАТИЯ В ШАПКЕ И НАВИГАЦИИ — до 40px (+ вертикальный хит-пад = 44) Пробник доступности отмечал иконки шапки (Поиск, Уведомления, 36–38px) и кнопки «Назад» (38px). Слой oko-a11y растит область нажатия вертикально до 44px, но по горизонтали растить нельзя — иконки стоят вплотную, и расширение налезло бы на соседнюю кнопку. Поэтому увеличиваем визуальный размер до 40px (стандарт Telegram): вместе с вертикальным хит-падом это даёт честные ~44px касания, а плотность шапки почти не меняется (было 38, стало 40). !important обязателен: базовый `.theme-btn{width:38px}` живёт в инлайн-