/* Legend Connect — брендовый рескин Jitsi Meet (meet.1leg.ru). Подключается через nginx sub_filter ( в ). Меняем ТОЛЬКО цвет/скругления/тени/шрифт — не трогаем размеры/позиции (не ломаем раскладку Jitsi). stable-11031, стабильные классы. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); :root { --lg-grad: linear-gradient(135deg, #662EFF 0%, #A840D8 100%); --lg-grad-hover: linear-gradient(135deg, #2f60ee 0%, #9a34c9 100%); --lg-accent: #662EFF; --lg-accent-2: #A840D8; --lg-radius: 12px; --lg-radius-lg: 18px; --lg-shadow: 0 8px 24px rgba(102, 46, 255, 0.30); --lg-shadow-soft: 0 6px 20px rgba(20, 16, 40, 0.28); --lg-ease: 200ms cubic-bezier(.4, 0, .2, 1); } /* ── Шрифт бренда ── */ body, .premeeting-screen, .new-toolbox, .welcome, button, input { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* ══ PREJOIN / PREMEETING ══ */ /* Основная кнопка «Присоединиться к встрече» */ .premeeting-screen .action-btn.primary, .premeeting-screen .prejoin-preview-dropdown-btn, .prejoin-preview .action-btn.primary, .premeeting-screen button.primary { background: var(--lg-grad) !important; border: none !important; border-radius: var(--lg-radius) !important; box-shadow: var(--lg-shadow) !important; transition: transform var(--lg-ease), box-shadow var(--lg-ease), filter var(--lg-ease) !important; } .premeeting-screen .action-btn.primary:hover, .prejoin-preview .action-btn.primary:hover, .premeeting-screen button.primary:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; box-shadow: 0 12px 30px rgba(102, 46, 255, 0.42) !important; } .premeeting-screen .action-btn.primary:active, .premeeting-screen button.primary:active { transform: translateY(0) !important; } /* Вторичные кнопки prejoin */ .premeeting-screen .action-btn { border-radius: var(--lg-radius) !important; transition: all var(--lg-ease) !important; } /* Поле ввода имени */ .premeeting-screen input, #premeeting-name-input, .prejoin-input-area input { border-radius: var(--lg-radius) !important; transition: border-color var(--lg-ease), box-shadow var(--lg-ease) !important; } .premeeting-screen input:focus, #premeeting-name-input:focus, .prejoin-input-area input:focus { border-color: var(--lg-accent) !important; box-shadow: 0 0 0 3px rgba(102, 46, 255, 0.25) !important; outline: none !important; } /* Превью видео на prejoin — мягкое скругление */ .premeeting-screen .premeeting-preview, .premeeting-screen video { border-radius: var(--lg-radius-lg) !important; } /* ══ ТУЛБАР В ЗВОНКЕ — тёмно-серая «пилюля» с блюром (современный вид) ══ */ .new-toolbox .toolbox-content-items { background: rgba(26, 28, 36, 0.94) !important; /* тёмно-серый */ border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 18px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.46) !important; backdrop-filter: blur(16px) saturate(120%) !important; padding: 6px 8px !important; gap: 2px !important; } /* Иконки-чипы одного размера, мягкое скругление */ .toolbox-button { transition: transform var(--lg-ease) !important; } .toolbox-button .toolbox-icon { border-radius: 12px !important; transition: background var(--lg-ease), box-shadow var(--lg-ease) !important; } .toolbox-button:hover .toolbox-icon { background-color: rgba(102, 46, 255, 0.30) !important; } .toolbox-button:hover { transform: translateY(-2px) !important; } /* Активная/включённая кнопка — брендовый градиент с подсветкой */ .toolbox-icon.toggled, .toolbox-button--active .toolbox-icon { background: var(--lg-grad) !important; box-shadow: 0 4px 14px rgba(102, 46, 255, 0.45) !important; } /* Кнопка «Завершить» — красная, скруглённый прямоугольник (совр. стиль) */ .hangup-button, .hangup-menu-button { border-radius: 13px !important; transition: transform var(--lg-ease), filter var(--lg-ease) !important; } .hangup-button:hover, .hangup-menu-button:hover { transform: translateY(-2px) !important; filter: brightness(1.06) !important; } /* Плашка с именем участника — тёмная скруглённая (в тон панели) */ .displayNameContainer, .stage-participant .displayname, .videocontainer .displayname { background: rgba(26, 28, 36, 0.82) !important; border-radius: 10px !important; backdrop-filter: blur(6px) !important; } /* Меню «…» (overflow) — тёмное, в тон панели */ .overflow-menu, .toolbox-content-wrapper .overflow-menu { background: rgba(26, 28, 36, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 14px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.46) !important; backdrop-filter: blur(14px) !important; } /* ── Ручка перетаскивания панели (2 точечных столбца) — рисуется скриптом jitsi-toolbar.js ── */ .lg-drag-grip { display: flex; align-items: center; gap: 3px; align-self: stretch; padding: 0 8px 0 4px; margin-right: 2px; cursor: grab; touch-action: none; flex: 0 0 auto; } .lg-drag-grip:active { cursor: grabbing; } .lg-drag-grip span { width: 3px; height: 18px; color: rgba(255, 255, 255, 0.45); background-image: radial-gradient(currentColor 1.1px, transparent 1.4px); background-size: 3px 6px; background-repeat: repeat-y; } .lg-drag-grip:hover span { color: rgba(255, 255, 255, 0.8); } /* ══ WELCOME / MEETINGS ══ */ .welcome .welcome-page-button, .meetings-list .button, .welcome-card--blue { background: var(--lg-grad) !important; border-radius: var(--lg-radius) !important; box-shadow: var(--lg-shadow) !important; transition: all var(--lg-ease) !important; } .welcome .welcome-page-button:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; } /* ══ ОБЩИЙ БРЕНД-АКЦЕНТ ══ */ /* Кнопки диалогов Jitsi (OK/primary) */ .modal-dialog-form .primary, .dialog .primary, button.primary:not(.premeeting-screen button) { background: var(--lg-grad) !important; border: none !important; border-radius: var(--lg-radius) !important; } /* Прогресс-бар загрузки → бренд */ #reloadProgressBar .progress-indicator-fill { background: var(--lg-grad) !important; } /* Ссылки-акценты */ a { color: var(--lg-accent); } /* Скругление типовых карточек/попапов Jitsi */ .popover, .popupmenu__contents, .toolbox-content-wrapper .overflow-menu { border-radius: var(--lg-radius) !important; } /* Уважать reduced-motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .premeeting-screen .action-btn.primary:hover, .toolbox-button:hover, .hangup-button:hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ МОБИЛЬНАЯ ВСТРЕЧА — панель управления, раскладка видео, фильмстрип Панель Jitsi на телефоне не помещалась в строку и уезжала за край экрана, перекрывая видео. Теперь: прижата к низу, по умолчанию свёрнута до главных кнопок, по тапу разворачивается в две строки. Логику классов ставит jitsi-toolbar.js (body.lg-m-mini / body.lg-m-full). ⚠️ Условие — НЕ одна ширина. Порог 820px выключал ВСЮ адаптацию, стоило повернуть телефон: 844×390 шире 820, и панель (78px) снова ложилась поверх нижней строки демонстрации. Ширину подняли до 940 и добавили pointer: coarse — «палец, а не мышь». Так адаптация ловит телефон в обеих ориентациях и не включается на десктопе (там pointer: fine). Тот же порог продублирован в jitsi-toolbar.js — менять в паре. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 940px) and (pointer: coarse) { body.lg-m-mini .new-toolbox .toolbox-content-items, body.lg-m-full .new-toolbox .toolbox-content-items { position: fixed !important; left: 6px !important; right: 6px !important; bottom: max(6px, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 7px 8px !important; border-radius: 16px !important; overflow: visible !important; z-index: 500 !important; } /* Перетаскивание панели на телефоне не нужно — она закреплена снизу */ body.lg-m-mini .lg-drag-grip, body.lg-m-full .lg-drag-grip { display: none !important; } /* Свёрнутая: микрофон, камера, «…», «Завершить» (последняя) и шеврон. Кнопку overflow «…» помечает классом .lg-m-keep скрипт jitsi-toolbar.js: в CSS её не отличить от «Завершить звонок» — у обеих один набор классов (.toolbox-button-wth-dialog.context-menu). Без этой пометки «…» попадала под правило и получала rect 0×0: тап не работал, а вместе с ней с телефона были недоступны чат, участники и настройки, пока не раскроешь шеврон (найдено мобильной приёмкой 16.08). */ body.lg-m-mini .new-toolbox .toolbox-content-items > *:nth-child(n+4):not(.lg-m-toggle):not(.lg-m-fs):not(.lg-pip-btn):not(.lg-rec-btn):not(.lg-m-keep):not(:last-child) { display: none !important; } /* Развёрнутая: все кнопки, перенос на вторую строку */ body.lg-m-full .new-toolbox .toolbox-content-items { flex-wrap: wrap !important; row-gap: 6px !important; max-height: 42vh !important; overflow-y: auto !important; } /* Кнопка-переключатель «свернуть/развернуть» (рисует jitsi-toolbar.js) */ .lg-m-toggle { flex: 0 0 auto !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 12px !important; background: rgba(255,255,255,0.06) !important; color: #fff !important; cursor: pointer !important; order: 99 !important; } body.lg-m-full .lg-m-toggle { background: var(--lg-grad) !important; border-color: transparent !important; } /* ── Место под панель и размер видео ── Было: padding-bottom на #largeVideoContainer/.videocontainer. Оно не работало и вредило. Не работало: размер картинки задаёт #largeVideoWrapper, а он position:absolute — отступ контейнера его не двигает (в горизонтали панель перекрывала видео на 78px). Вредило: класс .videocontainer висит и на МИНИАТЮРАХ фильмстрипа — каждая получала 56px пустоты снизу и распухала со своих 56px до 116px. Стало: задаём размер самой обёртке. Инлайн-стили Jitsi (их пишет VideoLayout из JS) перебиваем !important — тогда наш размер держится и после его пересчётов. */ body.lg-m-mini #largeVideoWrapper, body.lg-m-full #largeVideoWrapper { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100vw !important; } /* contain, а не cover: обёртку теперь растягиваем мы, и при cover демонстрация обрезалась бы по краям — на телефоне это срезало бы крайние столбцы таблицы. */ body.lg-m-mini #largeVideo, body.lg-m-full #largeVideo { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* Стрелка «свернуть фильмстрип» на телефоне уезжает за левый край экрана (x = −26) */ body.lg-m-mini #toggleFilmstripButton, body.lg-m-full #toggleFilmstripButton { display: none !important; } /* Демонстрация уже показана во весь экран — её же миниатюра в полосе просто дубль. Прячем только пока она И ЕСТЬ большая (.videoContainerFocused): открепит человек её вручную — миниатюра вернётся, и путь обратно не потерян. */ body.lg-m-mini .filmstrip__videos .videocontainer[id*="-v"].videoContainerFocused, body.lg-m-full .filmstrip__videos .videocontainer[id*="-v"].videoContainerFocused, body.lg-m-mini #localScreenshare_container, body.lg-m-full #localScreenshare_container { display: none !important; } } /* ── ПОРТРЕТ: фильмстрип полосой снизу, демонстрация во всю ширину ── Было: #remoteVideos — столбец 137px во всю высоту (35% ширины экрана). Jitsi вписывал 16:9 в оставшиеся 253px и центровал: демонстрация выходила 252×142 — 10.9% экрана, с ~280px чёрного воздуха сверху и снизу. Стало: полоса 64px внизу, видео 390×219. */ @media (max-width: 940px) and (pointer: coarse) and (orientation: portrait) { /* Было: 150px и 198px — числа, снятые с одного телефона. У развёрнутой панели высота другая (вторая строка кнопок), и лента участников наезжала на кнопки. Теперь высоту панели меряет jitsi-toolbar.js и кладёт в --lg-bar-h; 64 — полоса миниатюр, 22 — зазоры. */ body.lg-m-mini #largeVideoWrapper, body.lg-m-full #largeVideoWrapper { height: calc(100vh - var(--lg-bar-h, 70px) - 86px) !important; } body.lg-m-mini .filmstrip, body.lg-m-full .filmstrip { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: calc(var(--lg-bar-h, 70px) + 12px) !important; width: 100vw !important; max-width: none !important; min-width: 0 !important; /* инлайновый max-width:135px от Jitsi */ height: 64px !important; flex-direction: row !important; z-index: 400 !important; } body.lg-m-mini #remoteVideos, body.lg-m-full #remoteVideos, body.lg-m-mini .filmstrip__videos, body.lg-m-full .filmstrip__videos { flex-direction: row !important; width: 100vw !important; max-width: none !important; height: 64px !important; min-height: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; } /* Список миниатюр виртуализован (react-window): детей он расставляет инлайновым top. Снимаем абсолютное позиционирование — тогда flex-строка раскладывает их по горизонтали. */ body.lg-m-mini .filmstrip__videos > div, body.lg-m-full .filmstrip__videos > div { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: 64px !important; min-height: 0 !important; display: flex !important; flex-direction: row !important; gap: 4px !important; } body.lg-m-mini .filmstrip__videos .videocontainer, body.lg-m-full .filmstrip__videos .videocontainer { position: relative !important; top: auto !important; left: auto !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; width: 96px !important; height: 56px !important; min-width: 0 !important; min-height: 0 !important; max-width: 96px !important; max-height: 56px !important; flex: 0 0 96px !important; overflow: hidden !important; } /* Аватар рисуется под миниатюру 120px и в полосе 56px вылезал кружком за её края */ body.lg-m-mini .filmstrip__videos .avatar-container, body.lg-m-full .filmstrip__videos .avatar-container { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.lg-m-mini .filmstrip__videos .avatar-container > *, body.lg-m-full .filmstrip__videos .avatar-container > * { width: 34px !important; height: 34px !important; min-width: 0 !important; min-height: 0 !important; font-size: 13px !important; } } /* ── ГОРИЗОНТАЛЬ: столбец миниатюр справа оставляем (по высоте полоса снизу дороже), но резервируем низ под панель — иначе она лежит поверх нижней строки демонстрации. ── */ @media (max-width: 940px) and (pointer: coarse) and (orientation: landscape) { body.lg-m-mini #largeVideoWrapper, body.lg-m-full #largeVideoWrapper { width: calc(100vw - 137px) !important; height: calc(100vh - var(--lg-bar-h, 70px) - 12px) !important; } body.lg-m-mini .filmstrip, body.lg-m-full .filmstrip { height: calc(100vh - var(--lg-bar-h, 70px) - 12px) !important; } } /* Превью камеры перед входом: показываем кадр ЦЕЛИКОМ (было обрезание по центру — на телефоне лицо уезжало вверх и оставался виден подбородок). */ .premeeting-screen video, .premeeting-screen .premeeting-preview video, #prejoinVideo, #prejoin-video { object-fit: contain !important; background: #0b0e14 !important; } /* Полноэкранный режим говорящего/демонстрации (двойной тап/клик по видео) */ #largeVideoContainer:fullscreen video, #largeVideoWrapper:fullscreen video { object-fit: contain !important; background: #000 !important; } /* ═══════════════════════════════════════════════════════════════════════ Jitsi перешёл на CSS-in-JS (классы вида css-thld0a-actionButton), поэтому старые селекторы .action-btn.primary перестали действовать — кнопки снова стали синими. Цепляемся за data-testid: он стабилен между версиями. ═══════════════════════════════════════════════════════════════════════ */ [data-testid="prejoin.joinMeeting"], [class*="actionButton"].primary, [class*="-actionButton"].primary { background: var(--lg-grad) !important; background-color: #662EFF !important; border: none !important; border-radius: var(--lg-radius) !important; box-shadow: var(--lg-shadow) !important; position: relative !important; /* место под стрелку «Присоединиться без звука» — раньше она наезжала на текст */ padding-right: 54px !important; } [data-testid="prejoin.joinMeeting"]:hover, [class*="actionButton"].primary:hover { filter: brightness(1.06) !important; } /* Стрелка вариантов входа — прижата к правому краю кнопки, поверх ничего не наезжает */ [data-testid="prejoin.joinOptions"], [class*="-options"] { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-left: 1px solid rgba(255,255,255,0.25) !important; border-radius: 0 !important; background: transparent !important; } /* Логотип в звонке: сервер Jitsi проставляет старый логотип inline-стилем, перебить его можно только !important. */ .watermark.leftwatermark, a.watermark > .watermark { background-image: url('https://op.1leg.ru/legenix-jitsi-logo.png') !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important; width: 116px !important; } /* Кнопка «поверх окон» (Picture-in-Picture) — рисует legend-pip.js прямо в панели встречи. Она обязана жить внутри страницы Jitsi: браузер пускает в PiP только по жесту в том же документе, кнопка из кабинета получила бы отказ. Вид — как у родных кнопок панели. */ .lg-pip-btn { flex: 0 0 auto !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 2px !important; border: none !important; border-radius: 12px !important; background: rgba(255,255,255,0.06) !important; color: #fff !important; cursor: pointer !important; transition: transform var(--lg-ease), background-color var(--lg-ease) !important; } .lg-pip-btn:hover { background: rgba(102, 46, 255, 0.30) !important; transform: translateY(-2px) !important; } /* Запись встречи на самой странице meet (legend-record.js): кнопка в панели и плашка состояния. Перенесена из кабинета — встреча теперь живёт в своей вкладке, а пишет она ЭТУ вкладку. */ .lg-rec-btn { flex: 0 0 auto !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 2px !important; border: none !important; border-radius: 12px !important; background: rgba(255,255,255,0.06) !important; cursor: pointer !important; transition: transform var(--lg-ease), background-color var(--lg-ease) !important; } .lg-rec-btn:hover { background: rgba(255, 90, 90, 0.25) !important; transform: translateY(-2px) !important; } .lg-rec-box { position: fixed !important; right: 16px !important; bottom: 90px !important; z-index: 9999 !important; display: none; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 320px; padding: 8px 10px; border-radius: 14px; background: rgba(20,23,31,0.96); border: 1px solid #232838; color: #e5e7eb; font-family: inherit; font-size: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); } .lg-rec-dot { width: 8px; height: 8px; border-radius: 999px; background: #ff5a5a; animation: lg-rec-pulse 1.4s infinite; } @keyframes lg-rec-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } .lg-rec-time { font-weight: 700; font-variant-numeric: tabular-nums; color: #ff5a5a; min-width: 34px; } .lg-rec-stop { width: 26px; height: 26px; border: 1px solid #2a3142; border-radius: 9px; background: #1d2230; color: #e5e7eb; cursor: pointer; line-height: 1; } .lg-rec-msg { display: none; width: 100%; line-height: 1.4; color: #cbd2e0; } .lg-rec-msg.bad { color: #fecaca; } /* Куски записи копятся в очереди — связь не тянет. Не ошибка: запись идёт, хвост доберётся. */ .lg-rec-msg.warn { color: #fde68a; } .lg-rec-msg.ok { color: #86efac; } .lg-rec-retry { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: #A840D8; font-weight: 600; font-size: 12px; cursor: pointer; } /* Пост-экран выхода (рисует legend-record.js). Close-страницу Jitsi мы гасим, но между выходом из зала и возвратом в кабинет оставался её «голый» пост-интерфейс — владелец спрашивал, что это вылезает при завершении. z-index ниже плашки записи (9999): та остаётся поверх с таймером, повторами отправки и кнопкой «Повторить отправку». */ .lg-exit { position: fixed; inset: 0; z-index: 9990; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #0d1016; color: #e5e7eb; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .lg-exit-brand { font-size: 22px; font-weight: 700; letter-spacing: .2px; background: var(--lg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lg-exit-msg { max-width: 420px; font-size: 14px; line-height: 1.5; color: #cbd2e0; } .lg-exit-msg.bad { color: #fecaca; } .lg-exit-msg.warn { color: #fde68a; } .lg-exit-msg.ok { color: #86efac; } /* ── Кнопка «во весь экран» в мобильной панели ── Двойной тап по видео на телефоне часто перехватывает сам Jitsi, а развернуть демонстрацию — главное, зачем к экрану вообще тянутся с телефона. Кнопка живёт и в свёрнутой панели. */ @media (max-width: 940px) and (pointer: coarse) { .lg-m-fs { flex: 0 0 auto !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 12px !important; background: rgba(255,255,255,0.06) !important; color: #fff !important; cursor: pointer !important; padding: 0 !important; order: 98 !important; /* перед переключателем панели (99) */ } .lg-m-fs:active { background: rgba(255,255,255,0.16) !important; } /* «Поверх окон» раньше выживала в свёрнутой панели только потому, что была последней кнопкой. Стоило добавить свои кнопки — она перестала быть последней и её накрыло правилом скрытия (нашёл браузерной проверкой: rect 0×0). Держим её явно, как и остальные наши. */ .lg-pip-btn { order: 97 !important; } } /* На десктопе кнопка не нужна — там есть двойной клик и полноценные контролы Jitsi */ @media not all and (pointer: coarse) { .lg-m-fs { display: none !important; } } /* ── Плашка «Похоже, вас не слышно» (сторож микрофона в jitsi-toolbar.js) ── Ставим НАД панелью и лентой: это сообщение о неработающей встрече, оно важнее картинки. */ .lg-mic-alert { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--lg-bar-h, 70px) + 88px); z-index: 900; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; padding: 12px 14px; border-radius: 14px; background: rgba(20, 12, 12, 0.96); border: 1px solid rgba(220, 38, 38, 0.55); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .lg-mic-alert .lg-mic-t { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .lg-mic-alert .lg-mic-say { font-size: 12.5px; line-height: 1.35; color: #e7d9d9; } .lg-mic-alert .lg-mic-btns { display: flex; gap: 8px; margin-top: 10px; } .lg-mic-alert button { flex: 1 1 auto; padding: 9px 10px; border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .lg-mic-alert .lg-mic-fix { background: #dc2626; color: #fff; } .lg-mic-alert .lg-mic-fix:active { background: #b91c1c; } .lg-mic-alert .lg-mic-close { background: rgba(255,255,255,0.12); color: #fff; flex: 0 0 auto; } /* ── Предложение автозаписи (флаг «Автоматическая запись» при планировании) ── Показывается один раз после входа в зал. Молча стартовать запись нельзя: доступ к вкладке даёт getDisplayMedia, а он требует жеста пользователя — поэтому одна заметная кнопка. */ .lg-autorec { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 950; width: min(420px, calc(100vw - 24px)); box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: rgba(16, 18, 27, 0.97); border: 1px solid rgba(168, 64, 216, 0.5); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .lg-autorec .lg-ar-t { font-size: 15px; font-weight: 700; margin-bottom: 5px; } .lg-autorec .lg-ar-s { font-size: 12.5px; line-height: 1.4; color: #cfd4e2; } .lg-autorec .lg-ar-b { display: flex; gap: 8px; margin-top: 12px; } .lg-autorec button { flex: 1 1 auto; padding: 10px 12px; border: 0; border-radius: 11px; font-size: 13px; font-weight: 600; cursor: pointer; } .lg-autorec .lg-ar-go { background: linear-gradient(135deg, #662EFF 0%, #A840D8 100%); color: #fff; } .lg-autorec .lg-ar-no { background: rgba(255,255,255,0.12); color: #fff; flex: 0 0 auto; } /* На телефоне плашка не должна перекрывать шапку зала */ @media (max-width: 940px) and (pointer: coarse) { .lg-autorec { top: 60px; padding: 12px 13px; } .lg-autorec .lg-ar-t { font-size: 14px; } } /* ── Комната ожидания: плашка ведущему (jitsi-toolbar.js) ── Ставим сверху по центру и выше всего остального: запрос гостя нельзя не заметить, иначе человек стоит под дверью, а ведущий смотрит в демонстрацию. */ .lg-lobby { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 980; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 20px)); box-sizing: border-box; padding: 10px 14px; border-radius: 14px; background: rgba(16, 18, 27, 0.97); border: 1px solid rgba(102, 46, 255, 0.6); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .lg-lobby .lg-lb-t { font-size: 13.5px; font-weight: 600; line-height: 1.3; } .lg-lobby .lg-lb-b { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; } .lg-lobby button { padding: 8px 14px; border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .lg-lobby .lg-lb-ok { background: linear-gradient(135deg, #662EFF 0%, #A840D8 100%); color: #fff; } .lg-lobby .lg-lb-no { background: rgba(255,255,255,0.12); color: #fff; } @media (max-width: 940px) and (pointer: coarse) { .lg-lobby { flex-direction: column; align-items: stretch; gap: 8px; top: 8px; } .lg-lobby .lg-lb-b { margin-left: 0; } .lg-lobby button { flex: 1 1 auto; } } /* ── Ведение встречи: кнопка в панели и панель управления (legend-record.js) ── */ .lg-host-btn { width: 40px; height: 40px; margin: 0 2px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; } .lg-host-btn:hover { background: rgba(255,255,255,0.16); } /* Ведущий пропал — кнопка «взять ведение» должна бросаться в глаза */ .lg-host-btn.lg-host-alert { background: linear-gradient(135deg, #662EFF 0%, #A840D8 100%); } .lg-host { position: fixed; left: 50%; bottom: calc(var(--lg-bar-h, 70px) + 24px); transform: translateX(-50%); z-index: 960; width: min(460px, calc(100vw - 24px)); box-sizing: border-box; max-height: 60vh; overflow-y: auto; padding: 14px 16px; border-radius: 16px; background: rgba(16, 18, 27, 0.98); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 44px rgba(0,0,0,0.55); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .lg-host .lg-h-t { font-size: 15px; font-weight: 700; margin-bottom: 6px; } .lg-host .lg-h-s { font-size: 12.5px; line-height: 1.4; color: #cfd4e2; margin-bottom: 10px; } .lg-host .lg-h-list { display: flex; flex-direction: column; gap: 8px; } .lg-host .lg-h-row { display: flex; align-items: center; gap: 8px; } .lg-host .lg-h-n { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-host button { padding: 8px 12px; border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; background: rgba(255,255,255,0.12); color: #fff; } .lg-host button:disabled { opacity: .6; cursor: default; } .lg-host .lg-h-give, .lg-host .lg-h-take, .lg-host .lg-h-send { background: linear-gradient(135deg, #662EFF 0%, #A840D8 100%); } .lg-host .lg-h-take { width: 100%; padding: 10px; } .lg-host .lg-h-inv { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); } .lg-host .lg-h-mail { flex: 1 1 auto; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font-size: 12.5px; } .lg-host .lg-h-b { margin-top: 12px; display: flex; justify-content: flex-end; } @media (max-width: 940px) and (pointer: coarse) { .lg-host { bottom: calc(var(--lg-bar-h, 70px) + 76px); max-height: 50vh; } .lg-host .lg-h-row { flex-wrap: wrap; } }