diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css index ad941f9..b0cb4b8 100644 --- a/frontend/src/styles/room.css +++ b/frontend/src/styles/room.css @@ -115,26 +115,6 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } @media (max-width: 600px) { .stage-tiles.lk-focus-layout { grid-template-columns: 1fr; } .stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); } - - /* Топбар: инвайт-чип (номер + копирование ссылки) убираем — на узком - экране это не помещалось рядом с названием (см. аудит мобильной версии), - сверху остаётся только название конференции и статус «активна». */ - .room-topbar { padding: var(--space-3) var(--space-4); } - .room-invite-chip { display: none; } - - /* Тулбар: демонстрация/полноэкранный режим/мини-окно скрыты на мобильном - (редко нужны с телефона, а тулбар со всеми 8 кнопками физически не - помещается в ширину экрана) — из оставшихся 5 кнопок собираем более - компактный вариант, чтобы они уместились без переноса и горизонтального - скролла. */ - .tb-btn--screenshare, - .tb-btn--fullscreen, - .tb-btn--pip { - display: none; - } - .room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; } - .tb-btn { min-width: 0; padding: 6px 8px; } - .tb-btn .icon-shell { width: 40px; height: 40px; } } /* @@ -500,3 +480,37 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } --lk-grid-gap: var(--space-4); --lk-control-bar-height: 0px; } + +/* ---------- Узкие экраны: топбар и тулбар комнаты ---------- + ВАЖНО: этот блок обязан идти строго ПОСЛЕДНИМ в файле. Селекторы ниже + (`.tb-btn`, `.room-toolbar`) имеют ту же специфичность, что и безусловные + правила выше, а при равной специфичности побеждает порядок в исходнике, а + не факт совпадения media query — тот же грабли уже ловили в + auth.css/calendar.css/lobby.css (см. комментарии там). Первая версия этого + блока стояла в середине файла: `.room-invite-chip` (объявлен ВЫШЕ) скрылся, + а `.tb-btn`/`.room-toolbar` (объявлены НИЖЕ) продолжали побеждать — тулбар + на мобильном не менялся вовсе. + + Топбар: скрываем название конференции и строку статуса — они и так есть + в самой конференции, а вот чип «№ … / Пригласить» с телефона нужен чаще + (скопировать ссылку и позвать участника), поэтому он остаётся. + + Тулбар: демонстрация экрана, полноэкранный режим и мини-окно с телефона + практически не нужны, а все 8 кнопок в ширину экрана физически не + помещаются — скрываем их и уплотняем оставшиеся пять + (микрофон/камера/устройства/чат/выход). `flex-wrap` + `min-width: 0` — + страховка на совсем узких экранах, чтобы футер ни при каких подписях не + вылезал за ширину окна. */ +@media (max-width: 600px) { + .room-topbar { padding: var(--space-3) var(--space-4); justify-content: flex-end; } + .room-title-block { display: none; } + + .tb-btn--screenshare, + .tb-btn--fullscreen, + .tb-btn--pip { display: none; } + + .room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; flex-wrap: wrap; } + .tb-btn { min-width: 0; padding: 6px 6px; } + .tb-btn .icon-shell { width: 40px; height: 40px; } + .tb-btn span.label { font-size: 11px; } +}