/* ─────────────────────────────────────────────────────────── Страница трансляции — раскладка (десктоп) ┌──────────────────────────────────────────────┐ │ топбар (в app.vue, вне этой сетки) │ ├────────────────────────────┬─────────────────┤ │ │ .stream-title │ │ .stream-player (iframe) ├─────────────────┤ │ │ .stream-chat │ │ │ ├ .chat-body │ ├────────────────────────────┤ └ .chat-form │ │ .stream-under (источники) │ │ └────────────────────────────┴─────────────────┘ Нижняя полоса слева и поле ввода справа имеют одну высоту (--stream-bottom-h), поэтому их края совпадают. ─────────────────────────────────────────────────────────── */ .stream-page { --stream-side-w: 500px; /* ширина правой колонки: название + чат */ --stream-title-h: 110px; /* высота блока с названием и ссылкой */ --stream-bottom-h: 70px; /* полоса под плеером и поле ввода одновременно */ /* --topbar-h сюда не пишем: его меряет useTopbar() и кладёт на . Локальное значение перебивало измеренное и уводило высоту плеера. */ display: flex; flex-direction: column; /* Страница ровно в экран: прокрутки нет. Вычитаем и шапку, и бегущую строку под ней — иначе экран длиннее окна ровно на высоту дорожки. Обе величины меряет useTopbar(). */ height: calc(100vh - var(--topbar-h, 48px) - var(--ticker-h, 0px)); overflow: hidden; } .stream-layout { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ─── Левая колонка ─────────────────────────────────────── */ .stream-left { flex: 1; min-width: 0; display: flex; flex-direction: column; } .stream-player { position: relative; /* для оверлея .source-loading */ flex: 1; min-height: 0; background: #0b002b; } .stream-iframe { width: 100%; height: 100%; border: none; display: block; } /* Строка контролов над названием: источники слева, помощь справа. */ .stream-title__controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* В общих стилях у .source-select есть центрирующий margin-left: auto — сбрасываем, чтобы кнопка встала слева. */ .stream-title__controls .source-select, .stream-title__controls .source-select__btn { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none; float: none; } .stream-title__controls .source-select { margin: 0 auto 0 0; flex: 0 0 auto; } .stream-title__controls .source-select__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 12px; } /* ─── Правая колонка ────────────────────────────────────── */ .stream-side { width: var(--stream-side-w); flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: #111; border-left: 1px solid #222; } .stream-title { /* min-height, а не height: при фиксированной высоте и центрировании длинное название вылезало вверх и срезалось overflow'ом родителя. */ min-height: var(--stream-title-h); height: auto; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 16px; background: #0a0030; border-bottom: 1px solid #222; } .stream-title__text { margin: 0; font-family: 'Mozilla Text', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; color: #fff; /* Длинное слово без пробелов переносится, а не вылезает за край. */ overflow-wrap: anywhere; } /* ─── Ссылка на трансляцию ──────────────────────────────── */ .stream-share { display: flex; align-items: center; gap: 8px; height: 32px; flex-shrink: 0; padding: 0 4px 0 12px; border-radius: 8px; background: #16162a; border: 1px solid rgba(255,255,255,.10); } .stream-share__url { flex: 1; min-width: 0; /* без этого ellipsis не сработает во flex */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(234,240,255,.75); } .stream-share__btn { flex: 0 0 auto; height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: rgba(255,255,255,.10); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s ease; } .stream-share__btn:hover { background: rgba(255,255,255,.18); } .stream-share__btn:active { transform: translateY(1px); } .stream-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* ─── Чат внутри правой колонки ─────────────────────────── */ /* Задаём геометрию здесь, а не в общих стилях чата, чтобы не сломать ChatBox в других местах сайта. */ /* ChatBox изначально был панелью фиксированной ширины — здесь снимаем это ограничение и растягиваем на всю колонку. */ .stream-chat .chat-wrap { flex: 1; width: 100%; max-width: none; min-height: 0; display: flex; flex-direction: column; } .stream-chat .chat-body { flex: 1; width: 100%; max-width: none; min-height: 0; overflow-y: auto; } /* Ровно та же высота, что у полосы слева — края совпадают. */ .stream-chat .chat-form { height: var(--stream-bottom-h); width: 100%; max-width: none; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid #222; background: #0a0030; } /* Поле ввода занимает всё, что осталось от кнопки отправки. */ .stream-chat .chat-form__pill { flex: 1; min-width: 0; } /* ─── Пустая страница ───────────────────────────────────── */ .stream-notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1; color: #aaa; } .stream-notfound__back { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-family: inherit; } /* ─── Мобильная версия ──────────────────────────────────── */ /* Временная заглушка, чтобы не разваливалось на телефоне. Нормальную раскладку сделаем отдельно. */ @media (max-width: 768px) { /* На телефоне плеер, чат и лента в один экран не помещаются — здесь страница снова обычной высоты и прокручивается. */ .stream-page { height: auto; min-height: calc(100vh - var(--topbar-h, 48px) - var(--ticker-h, 0px)); overflow: visible; } .stream-layout { flex-direction: column; height: auto; overflow: visible; } .stream-left { flex: 0 0 auto; } .stream-player { --player-offset: 15px; height: auto; aspect-ratio: 16 / 9; flex: 0 0 auto; overflow: visible; } /* Увеличиваем отрисованное содержимое iframe целиком, лишнее срезает overflow у родителя. Менять только число в scale(): 1 — без обрезки. */ .stream-player .stream-iframe { width: 100%; height: 100%; transform: scale(1); transform-origin: center center; } .stream-side { width: 100%; flex: 1 1 auto; border-left: none; border-top: 1px solid #222; } .stream-title { min-height: 0; padding: 4.5px 16px; gap: 8px; } .stream-title__text { font-size: 17px; } } /* В разметке чата есть id (#chatBody, #chatForm), а селектор по id весит больше любых классов. Перебиваем теми же id вместе с классом. */ .stream-page .stream-side .stream-chat, .stream-page .stream-side .stream-chat .chat-wrap, .stream-chat #chatBody, .stream-chat #chatForm { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; } .stream-chat #chatForm { height: var(--stream-bottom-h); flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; } .stream-chat #chatBody { flex: 1; min-height: 0; overflow-y: auto; } /* ===================================================================== ЛЕНТА ДРУГИХ ТРАНСЛЯЦИЙ Узкая полоса под плеером и чатом. Карточки компактные (MiniEventCard) и едут вбок: большой ряд .erow в такой высоте сплющивался. ===================================================================== */ .stream-more { /* Полоса внизу экрана: высоту забирает у плеера один раз и держит её. Карточки едут вбок внутри полосы, поэтому страница не растёт. */ flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 12px; border-top: 1px solid var(--fz-stroke, #3941547a); background: var(--fz-bg, #1b1f2a); } .stream-more__head { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .stream-more__title { margin: 0; line-height: 1; font-family: 'Mozilla Text', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; } .stream-more__all { font-family: 'Mozilla Text', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #ffee00; text-decoration: none; white-space: nowrap; } .stream-more__all:hover { color: #fff; } /* ─── Лента вбок ──────────────────────────────────────────── */ .stream-more__rail { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .stream-more__list { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 0; /* Полосу прокрутки прячем: ленту двигают стрелки и свайп */ scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .stream-more__list::-webkit-scrollbar { display: none; } .stream-more__arrow { flex: 0 0 auto; width: 28px; height: 66px; border: 1px solid var(--fz-stroke, #3941547a); border-radius: 8px; background: var(--fz-row-2, #1f2431); color: #cfd6e4; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .stream-more__arrow:hover { background: #2c3444; color: #fff; } @media (max-width: 768px) { .stream-more { padding: 8px 10px 10px; } .stream-more__title { font-size: 13px; } /* На телефоне ленту листают пальцем — стрелки только заняли бы место */ .stream-more__arrow { display: none; } } /* ===================================================================== ВЫРАВНИВАНИЕ ПРАВОЙ КОЛОНКИ Порядок блоков не менялся — подогнаны только отступы и размеры. Одна вертикаль на всю колонку: 12px от левого края у названия, ссылки, сообщений и поля ввода. Раньше у каждого блока было своё значение (16, 12, 22, 30), и колонка выглядела рассыпанной. ===================================================================== */ .stream-title { gap: 8px; padding: 12px; } .stream-title__text { font-size: 20px; } .stream-share { height: 30px; padding: 0 4px 0 10px; } /* Сообщения тянутся во всю ширину, а текст встаёт на ту же вертикаль, что и название сверху. Полоса чередования при этом идёт от края до края и не выглядит обрубленной. */ .stream-chat .chat-body { padding: 8px 0 10px; } .stream-chat .chat-msg { padding: 5px 12px; border-radius: 0; } .stream-chat .chat-msg--system { padding: 8px 12px; margin: 0 0 4px; } /* Затемнения над полем ввода больше нет: оно только пачкало нижние сообщения и полоску ответа. */ .stream-chat .chat-wrap::before { display: none; } .stream-chat .chat-form { gap: 10px; padding: 0 12px; } .stream-chat .chat-form__pill { height: 42px; padding: 0 8px 0 12px; border-radius: 8px; } .stream-chat .chat-form input { font-size: 14px; } .stream-chat .chat-form button#chatSend { width: 42px; height: 42px; border-radius: 8px; } .stream-chat .chat-form button#chatSend svg { width: 20px; height: 20px; } /* Строка ошибки на той же вертикали, что и всё остальное */ .stream-chat .chat-error { margin: 0 12px 6px; } @media (max-width: 768px) { .stream-title { padding: 10px 12px; } .stream-title__text { font-size: 18px; } } /* ===================================================================== ТЕЛЕФОН: ЧАТ НЕ ТЯНЕТ СТРАНИЦУ ВНИЗ Раньше у правой колонки не было заданной высоты, поэтому список сообщений рос вместе с содержимым, а вместе с ним росла и страница: каждое отправленное сообщение делало её длиннее. Теперь колонке задана высота от окна, а прокручивается сам список. Единица dvh, а не vh: она учитывает выехавшую клавиатуру и сворачивающуюся панель браузера, поэтому поле ввода не уезжает под клавиатуру при наборе. ===================================================================== */ @media (max-width: 768px) { .stream-page { min-height: calc(100dvh - var(--topbar-h, 48px) - var(--ticker-h, 0px)); } .stream-side { /* Что осталось от экрана после плеера 16:9 (это 56.25vw) */ height: calc(100dvh - 56.25vw - var(--topbar-h, 48px) - var(--ticker-h, 0px)); min-height: 300px; flex: 0 0 auto; display: flex; flex-direction: column; min-width: 0; } .stream-chat { flex: 1 1 auto; min-height: 0; } .stream-chat .chat-wrap { min-height: 0; } /* Прокрутка живёт здесь, а не у страницы */ .stream-chat #chatBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Полоса ввода ниже — под большой палец, и без запаса на вырез */ .stream-chat #chatForm { height: 60px; padding-bottom: env(safe-area-inset-bottom); } }