/* pub-camera.css — оформление ТЕХНИЧЕСКОГО стенда камеры (V3.17). Черновое намеренно: решение о финальной камере принимается по замерам с телефона, а не по виду стенда. Разметка печатается только для allowlist на dev. */ .camproto{ position:fixed;inset:0;z-index:6100; /* Содержимое прижато К НИЗУ. Иначе под панелью оставалась пустая полоса, ящик замера отсчитывал свою границу от края экрана и заходил панели на голову. Свободное место теперь сверху — там, где у телефона вырез, и это единственно правильное для камеры место: кнопки должны быть под большим пальцем. */ display:flex;flex-direction:column;justify-content:flex-end; background:#05080d;color:#fff; /* Вырезы и домашняя полоса iPhone: кнопки не должны уезжать под них. */ padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)} .camproto[hidden]{display:none} /* Пока стенд открыт, страница под ним не прокручивается. */ html.pub-camproto-open,html.pub-camproto-open body{overflow:hidden} /* КАНОНИЧЕСКАЯ СЦЕНА 9:16 (V3.17-FIX). Раньше сцена брала «сколько осталось» и получалась 430×505 — при потоке 9:16 это срезало половину кадра. Теперь пропорция задана жёстко, а высота берётся наибольшая из возможных: сцена сжимается только если экран ниже, чем 16/9 её ширины. */ /* СЦЕНА — ВСЁ МЕСТО НАД ПАНЕЛЬЮ. Жёсткой пропорции у неё больше нет. Прошлая попытка — сцена ровно 9:16 плюс object-fit:fill — опровергнута живыми скриншотами: лицо осталось узким и длинным, ноутбук вытянутым. Значит равенство сторон CSS-бокса НЕ означает равного масштаба того, что Safari реально рисует внутри: intrinsic живого потока (1920×1080) не совпадает с картинкой, которую браузер уже развернул сам, и fill растягивает по правилам, которых мы не видим. Полагаться на fill здесь нельзя. */ .camproto__stage{ position:relative;flex:1 1 auto;min-height:0;background:#000;overflow:hidden; width:100%;margin:0 auto} /* ДВУСЛОЙНЫЙ ПРЕДПРОСМОТР. Одним элементом одновременно получить полный экран, полный кадр, отсутствие обрезки и отсутствие полей на iOS Safari невозможно — проверено четырьмя способами: полоса, срез 71 %, поворот набок, растяжение. Поэтому задачи разделены между двумя слоями. Резкий слой вписывается целиком (contain) и не трогается ничем: ни поворота, ни растяжения, ни обрезки. Пустое место вокруг него закрывает нижний слой — тот же поток, но размытый и затемнённый. Его обрезка не имеет значения: там нет ничего, кроме пятен цвета, и человек по нему не ориентируется. */ .camproto__raw-wrap{ position:absolute;inset:0;overflow:hidden; display:block;background:#000} /* Зеркало — на обёртке, СРАЗУ ДЛЯ ОБОИХ СЛОЁВ: иначе размытый фон окажется отражением не той стороны и края перестанут сходиться с резким кадром. */ .camproto__raw-wrap.is-mirror{transform:scaleX(-1)} /* ФОН — ТОЛЬКО ЗАЛИВКА. Увеличен чуть больше единицы, чтобы размытая кромка не давала светлую рамку по краям экрана, и притушен, чтобы не спорить с резким кадром. */ .camproto__raw-bg{ position:absolute;left:0;top:0;width:100%;height:100%; max-width:none;max-height:none; object-fit:cover;transform:scale(1.12); filter:blur(28px) brightness(.55) saturate(1.1); opacity:.85;pointer-events:none;background:#000;display:block} /* РЕЗКИЙ КАДР. contain — единственное правило, которое ничего не режет и ничего не растягивает: браузер вписывает кадр целиком и сам держит его пропорции. Поля, которые при этом остаются, закрыты нижним слоем. */ .camproto__raw-src{ position:absolute;left:0;top:0; width:100%;height:100%; /* Общий RWD-файл держит max-width:100% для видео — здесь он не нужен и мешает. */ max-width:none;max-height:none; object-fit:contain;display:block;background:transparent} /* Канва осталась ТОЛЬКО для диагностики и по умолчанию скрыта. */ .camproto__canvas{ position:absolute;inset:0;width:100%;height:100%; object-fit:contain;background:#000;display:none} .camproto[data-camproto-canvas="1"] .camproto__canvas{display:block} .camproto[data-camproto-canvas="1"] .camproto__raw-wrap{display:none} .camproto[data-camproto-state="result"] .camproto__canvas{display:none} .camproto[data-camproto-state="result"] .camproto__raw-wrap{display:none} /* Записанный файл уже вертикальный — вписываем его целиком, обрезать нечего. */ .camproto__video{ position:absolute;inset:0;width:100%;height:100%; object-fit:contain;background:#000;display:block} /* Фронтальную камеру человек привык видеть как в зеркале. Записанный файл — нет: зеркалить и его значило бы показать не то, что увидят читатели. */ .camproto__video.is-mirror{transform:scaleX(-1)} .camproto__video--result{display:none} .camproto[data-camproto-state="result"] .camproto__video--result{display:block} .camproto__timer{ position:absolute;left:12px;top:12px;z-index:3; padding:3px 9px;border-radius:999px;background:rgba(8,12,18,.62); font-size:12px;font-weight:500;font-variant-numeric:tabular-nums} .camproto__badge{ position:absolute;right:56px;top:12px;z-index:3; padding:3px 9px;border-radius:999px;background:rgba(8,12,18,.62);font-size:12px} .camproto__close{ -webkit-appearance:none;appearance:none; /* Выше замера: выйти из камеры человек должен мочь всегда. */ position:absolute;right:8px;top:6px;z-index:30; width:44px;height:44px;border:0;border-radius:999px; background:rgba(8,12,18,.62);color:#fff;font-size:16px;line-height:1;cursor:pointer} .camproto__msg{ position:absolute;left:12px;right:12px;bottom:12px;z-index:5;margin:0; padding:10px 12px;border-radius:12px;background:rgba(8,12,18,.86); font-size:12.5px;line-height:1.4;white-space:normal;overflow-wrap:anywhere} .camproto__msg[hidden]{display:none} /* НИЖНЯЯ ПАНЕЛЬ ВСЕГДА ПОВЕРХ ЗАМЕРА. Ящик замера был прижат к низу оверлея и накрывал собой запись, переворот и «Использовать видео»: закончить съёмку становилось нечем. Панель управления — единственное, что человек обязан достать в любой момент, поэтому у неё свой слой выше диагностики, а не наоборот. */ .camproto__bar{ position:relative;z-index:20; flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0))} .camproto[data-camproto-state="result"] .camproto__bar{display:none} /* ВО ВРЕМЯ ЗАПИСИ НА ЭКРАНЕ ТОЛЬКО ТО, ЧТО РАБОТАЕТ. Переворот камеры и вход в замер в этот момент запрещены, и держать их на виду выключенными — значит предлагать человеку нажать и получить отказ. Их просто нет: остаются таймер, кадр и кнопка остановки. */ .camproto[data-camproto-rec="1"] .camproto__flip, .camproto[data-camproto-rec="1"] .camproto__devbtn{visibility:hidden;pointer-events:none} /* Кнопка записи остаётся по центру и не прыгает, когда соседи исчезли. */ .camproto[data-camproto-rec="1"] .camproto__bar{justify-content:center} .camproto__rec{ -webkit-appearance:none;appearance:none; width:64px;height:64px;flex:0 0 auto;border-radius:999px; border:4px solid rgba(255,255,255,.85);background:#e8362c;cursor:pointer; transition:border-radius .15s,transform .15s} /* Идёт запись — круг становится квадратом: это читается без подписи. */ .camproto__rec.is-on{border-radius:16px;transform:scale(.82)} .camproto__flip{ -webkit-appearance:none;appearance:none; min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:12px; background:transparent;color:#fff;font:inherit;font-size:12.5px;cursor:pointer} /* Единственная служебная кнопка на видимой сцене — вход в ящик замера. */ .camproto__devbtn{ -webkit-appearance:none;appearance:none; min-width:44px;min-height:44px;padding:0 10px; border:1px solid rgba(255,255,255,.2);border-radius:12px; background:transparent;color:rgba(255,255,255,.5);font:inherit;font-size:11px;cursor:pointer} .camproto__after{ position:relative;z-index:20; flex:0 0 auto;display:flex;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0)); justify-content:center} .camproto__after[hidden]{display:none} .camproto__btn{ -webkit-appearance:none;appearance:none; min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.28);border-radius:12px; background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer} .camproto__btn--main{border-color:transparent;background:var(--pub-brand,#e8651c)} /* Замер виден прямо на стенде: цифры собираются на устройстве и уезжают одной строкой. */ /* Ящик замера ОТКРЫВАЕТСЯ ПОВЕРХ, а не отнимает высоту у сцены. */ /* ЯЩИК ЗАМЕРА ЗАКАНЧИВАЕТСЯ ТАМ, ГДЕ НАЧИНАЕТСЯ ПАНЕЛЬ. Он больше не доходит до низа экрана: снизу оставлена полоса под кнопки вместе с домашней полосой iPhone. Прокрутка своя, поэтому длинный замер растёт внутрь себя, а не наружу. Закрытый — display:none: ни места в раскладке, ни невидимого слоя, перехватывающего нажатия. */ .camproto__diagbox{ position:absolute;left:0;right:0;top:0; /* Нижняя граница — РОВНО высота видимой панели: её измеряет и печатает сюда скрипт (--camproto-bar-h). Магического числа тут быть не может — панель меняет высоту вместе с безопасной зоной и состоянием экрана. */ bottom:var(--camproto-bar-h, calc(96px + env(safe-area-inset-bottom,0))); z-index:10; display:flex;flex-direction:column;gap:6px; padding:10px 12px;overflow:auto;-webkit-overflow-scrolling:touch; background:rgba(4,7,11,.94);border-bottom:1px solid rgba(255,255,255,.14)} .camproto__diagbox[hidden]{display:none} /* Закрыть замер — отдельной кнопкой, а не поиском пустого места. */ /* Слева, а не справа: справа вверху живёт крестик закрытия камеры, и две кнопки в одной точке — верный способ закрыть не то. */ .camproto__diagclose{ -webkit-appearance:none;appearance:none;align-self:flex-start; min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.32);border-radius:10px; background:rgba(8,12,18,.7);color:#fff;font:inherit;font-size:12px;cursor:pointer} .camproto__copy{ -webkit-appearance:none;appearance:none;align-self:flex-start; min-height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:9px; background:transparent;color:#fff;font:inherit;font-size:11.5px;cursor:pointer} .camproto__diagrow{display:flex;flex-wrap:wrap;gap:6px} .camproto__diag{ margin:0;flex:1 1 auto;min-height:0;overflow:auto; font-size:10px;line-height:1.35;color:rgba(255,255,255,.72); white-space:pre-wrap;overflow-wrap:anywhere} /* Сырой кадр — для сверки глазами: вписывается целиком, без обрезки. */ .camproto__rawbox{margin:0;display:flex;flex-direction:column;gap:3px} .camproto__raw{ max-width:100%;max-height:22vh;object-fit:contain; border:1px solid rgba(255,255,255,.22);border-radius:8px;background:#000} .camproto__raw[hidden]{display:none} .camproto__rawcap{font-size:10px;color:rgba(255,255,255,.6)} /* Снимки режимов — колонкой, чтобы сравнивать их рядом. */ .camproto__shots{display:flex;flex-direction:column;gap:8px} /* Кнопка входа в стенд у медиаблока: служебная, не спорит с «+». */ .pub-sheet__camproto{ -webkit-appearance:none;appearance:none; align-self:flex-start;min-height:30px;margin:0 0 8px;padding:0 10px; border:1px dashed var(--pub-bd);border-radius:9px;background:transparent; color:var(--pub-muted);font:inherit;font-size:11.5px;cursor:pointer} .pub-sheet__camproto[hidden]{display:none} /* Экран узкий и высокий — на компьютере стенд остаётся тем же, просто уже. */ @media (min-width:768px){ .camproto__stage{max-width:min(430px,100%);margin:0 auto;width:100%} .camproto__bar,.camproto__after{max-width:min(430px,100%);margin:0 auto;width:100%} } @media (prefers-reduced-motion: reduce){ .camproto__rec{transition:none} } /* ═══════════════════ ЭКРАН КАМЕРЫ REELS (V3.24.1) ═══════════════════ * * Это ПОЛЬЗОВАТЕЛЬСКИЙ экран, а не стенд: у стенда выше свои классы camproto, и они * остаются нетронутыми. Общее между ними — только ядро камеры в JS. * * ТЁМНЫЙ ВСЕГДА. Камера не подчиняется светлой теме сайта: белый интерфейс поверх * живого кадра слепит и мешает видеть то, что снимаешь. Поэтому цвета здесь заданы * прямо, а не токенами темы. */ .reels{ position:fixed;inset:0;z-index:2147483000; display:flex;flex-direction:column; background:#000;color:#fff; -webkit-user-select:none;user-select:none; overscroll-behavior:contain; /* ОБЛАСТЬ ПОКАЗА СНЯТОГО — ВО ВЕСЬ ЭКРАН («Вариант 8», утверждён владельцем 25.09.2026). Управление лежит ПОВЕРХ кадра, читаемость дают мягкие затемнения сверху и снизу (--ds-editor-scrim-*). В редакторе кадр ЗАПОЛНЯЕТ экран (cover, решение владельца 28.09.2026: без чёрных полей и «окна в окне»); полный исходник и точное кадрирование — в режиме «Обрезка». Отступ объявлен один раз (MediaGeometryContractTest). */ --reels-fit-top:0px; --reels-fit-bottom:0px; --reels-fit-left:0px; --reels-fit-right:0px} .reels[hidden]{display:none} /* Пока камера открыта, страница под ней не прокручивается: жест принадлежит камере. */ html.reels-open,html.reels-open body{overflow:hidden;overscroll-behavior:none} /* ─────────── сцена ─────────── На телефоне занимает всё, на компьютере — вертикальный прямоугольник по центру: растягивать камеру телефона на широкий монитор незачем, кадр от этого шире не станет. */ .reels__stage{ position:relative;flex:1 1 auto;min-height:0; width:100%;max-width:min(430px,100%);margin:0 auto; background:#000;overflow:hidden} .reels__wrap{position:absolute;inset:0;overflow:hidden;display:block;background:#000} /* ═══ РЕДАКТОР («Вариант 8») — ТОЛЬКО В СОСТОЯНИИ ПРОСМОТРА СНЯТОГО ═══ * Живая камера остаётся тёмной всегда (нативное поведение). Редактор снятого следует теме * приложения через токены --ds-editor-* (assets/ds/tokens/ds-theme.css) — своих селекторов * [data-theme] здесь нет. * ПРАВИЛО ЧЕРНИЛ (Олег, контракт theme): --ds-editor-ink / -ink-2 ставятся ТОЛЬКО на то, у * чего под ними стекло (--ds-editor-glass) или лист (--ds-editor-sheet). Всё, что лежит прямо * на кадре без подложки, берёт тему-независимые --reels-ink (белый) — под ним живой кадр. */ .reels[data-reels-state="recorded"],.reels[data-reels-state="recorded"] .reels__stage{background:var(--ds-editor-canvas,#000)} /* СТЕКЛО РЕДАКТОРА — СМЕШАННЫЙ ПУТЬ (токены --ds-editor-*): неподвижный кадр — матовое стекло; играет видео (data-pov-vplay ставит pub-overlay-editor.js) — без размытия, плотнее. */ .reels{--pov-glass:var(--ds-editor-glass,rgba(24,24,27,.74));--pov-glass-blur:var(--ds-editor-blur-static,none)} .reels[data-pov-vplay]{--pov-glass:var(--ds-editor-glass-solid,rgba(24,24,27,.84));--pov-glass-blur:var(--ds-editor-blur,none)} /* Полосы живой камеры (верх, низ) в редакторе без своих затемнений: их роль у затемнений экрана выше; иначе на светлом холсте внизу оставалась серая полоса. */ .reels[data-reels-state="recorded"] .reels__bar{background:none} .reels[data-reels-state="recorded"] .reels__stage::before, .reels[data-reels-state="recorded"] .reels__stage::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none} .reels[data-reels-state="recorded"] .reels__stage::before{top:0;height:calc(190px + env(safe-area-inset-top,0) - 59px);min-height:130px; background:var(--ds-editor-scrim-top,linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.18) 55%,rgba(0,0,0,0)))} .reels[data-reels-state="recorded"] .reels__stage::after{bottom:0;height:calc(226px + env(safe-area-inset-bottom,0)); background:var(--ds-editor-scrim-bottom,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.35) 35%,rgba(0,0,0,.72)))} .reels__wrap[hidden]{display:none} /* Зеркало — на обёртке, сразу для обоих слоёв: иначе размытый фон отразится не той стороной и края перестанут сходиться с резким кадром. */ .reels__wrap.is-mirror{transform:scaleX(-1)} /* Нижний слой — тот же поток, размытый и притушенный. Он закрывает поля, оставшиеся от вписывания кадра целиком; читать по нему нечего, поэтому обрезка не важна. */ .reels__bg{ position:absolute;left:0;top:0;width:100%;height:100%; max-width:none;max-height:none; object-fit:cover;transform:scale(1.12); filter:blur(28px) brightness(.5) saturate(1.1); opacity:.85;pointer-events:none;background:#000;display:block} /* ЖИВОЙ КАДР занимает экран целиком и обрезается по нему — как в нативной камере. Превью ≠ файл: в запись уходит ПОЛНЫЙ поток, ориентацию нормализует сервер. Результат сюда БОЛЬШЕ НЕ ВХОДИТ: у него своя область и своя геометрия (ниже). Раньше оба слоя делили это правило, и результат наследовал экранную рамку вместе с обрезкой — именно отсюда бралась потеря краёв. */ .reels__live{ position:absolute;left:0;top:0;width:100%;height:100%; max-width:none;max-height:none; display:block;background:transparent;object-fit:cover} /* ═══════════ РЕЗУЛЬТАТ ПОКАЗЫВАЕТСЯ ЦЕЛИКОМ, В СВОЁМ СООТНОШЕНИИ ═══════════ * * ЧТО БЫЛО. Результат показывался обрезкой по экрану (object-fit:cover) — тем же правилом, * что и живой кадр. Для живого это верно: нативная камера делает так же, а в файл всё равно * уходит полный поток. Но экран результата — это ВОПРОС «то ли вы публикуете», и обрезка * отвечала на него неправдой. Замерено на стенде из этой же разметки и этих же стилей * (экран 390×844): у горизонтального кадра 16:9 за краями оставалось по 555 точек с каждой * стороны — три четверти ширины; у квадрата — по 227; даже вертикальное 9:16 теряло по 42. * * ЧТО СТАЛО. Кадр вписывается в СВОЮ область (.reels__shot) целиком и в своей форме: * соотношение приходит числом из общего замера (assets/pub-media-geometry.js) и живёт в * --pub-shot-ar. Ни растяжения, ни обрезки: рамка элемента и есть форма содержимого. * * ПОЧЕМУ ЭТО НЕ ВОЗВРАТ К contain. Прежняя беда была не в полях как таковых, а в том, что * поля появлялись ВНУТРИ кадра и экран разваливался на «картинку» и «чёрную зону с * кнопками». Теперь свободное место принадлежит области показа, а сама картинка полей не * имеет вовсе — рамка обнимает её вплотную. */ /* Кадр — слой 1, затемнения редактора — 2 (::before/::after сцены), управление — 3 и выше. */ .reels__shot{ position:absolute;z-index:1; top:var(--reels-fit-top);right:var(--reels-fit-right); bottom:var(--reels-fit-bottom);left:var(--reels-fit-left); /* ДОРОЖКИ ЗАДАНЫ ЯВНО, А НЕ auto. Дорожка auto растёт под содержимое, и тогда max-height:100% у кадра меряется от РАЗРОСШЕЙСЯ дорожки, то есть сам от себя — предел перестаёт что-либо ограничивать. Замер это и поймал: на экране 360×640 вертикальный кадр 9:16 выходил на 611 точек в области высотой 500 и заезжал под кнопки. С явной дорожкой оба предела считаются от самой области, и кадр уменьшается целиком, не теряя формы. */ display:grid;grid-template:100% / 100%;place-items:center; pointer-events:none} .reels__result{ position:static; width:auto;height:auto; max-width:100%;max-height:100%; /* Соотношение объявляется ЧИСЛОМ, а не подбирается из нескольких заготовок: 4:5, 3:4 и панорама в три ведра «вертикальное/горизонтальное/квадратное» не помещаются. ЗАПАСНОЕ ЗНАЧЕНИЕ ТО ЖЕ, ЧТО У ФОРМЫ (3/4). Показывают эти два экрана один и тот же файл, и два разных запасных значения давали бы заметный скачок рамки при переходе «Далее», если замер ещё не приехал. Виден он редко: замер переезжает вместе с файлом и обычно готов раньше первой отрисовки. */ aspect-ratio:var(--pub-shot-ar, 3 / 4); /* Рамка уже той же формы, что содержимое, поэтому вписывание ничего не делает. Оставлено страховкой от округления в пол-точки и на случай, если размеры ещё не пришли. */ object-fit:contain; background:transparent} .reels__result[hidden]{display:none} /* ═══ РЕДАКТОР НА ШИРОКОМ ЭКРАНЕ (лист 6 «Адаптация») ═══ Планшет в портрете — колонка редактора до 480 px по центру; горизонталь — кадр 9:16 колонкой по центру во всю высоту, управление остаётся у краёв экрана. По бокам — тот же кадр размытым (--pov-backdrop кладёт pub-overlay-editor.js), а не пустота. На телефоне в портрете колонка — весь экран, и этот слой не рисуется вовсе. */ /* Планшет в портрете: весь редактор (кадр и управление) — колонка до 480 px по центру (лист 6.4), размытый кадр — снаружи колонки, во всю ширину экрана. */ @media (min-width:768px) and (orientation:portrait){ .reels[data-reels-state="recorded"]{left:max(0px,calc(50% - 240px));right:max(0px,calc(50% - 240px))} .reels[data-reels-state="recorded"] .reels__stage{max-width:none} } /* Горизонталь (лист 6.5): кадр 9:16 колонкой по центру во всю высоту; крестик — слева сверху, колонка инструментов — справа сверху (столбцом, как на телефоне), «Переснять» — снизу слева, «Далее» — снизу справа, у краёв экрана с учётом выреза. */ @media (orientation:landscape){ .reels[data-reels-state="recorded"]:not([data-pov-edit="music"]){ --reels-fit-left:max(0px,calc(50% - 100dvh * 9 / 32));--reels-fit-right:max(0px,calc(50% - 100dvh * 9 / 32));--reels-fit-bottom:0px} .reels[data-reels-state="recorded"] .reels__stage{background:transparent;max-width:none} .reels[data-reels-state="recorded"] .reels__after{left:0;right:0;top:auto;bottom:0;flex-direction:row;justify-content:space-between; align-items:center;min-height:56px;background:none; padding:0 max(16px,env(safe-area-inset-right,0)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0))} } @media (orientation:landscape) and (max-height:560px){ .reels[data-reels-state="recorded"] .pov-rail{flex-direction:column;width:var(--reels-tool);padding:2px 0} } @media (min-width:768px) and (orientation:portrait),(orientation:landscape){ .reels[data-reels-state="recorded"]::before{content:"";position:absolute;top:-40px;left:-40px;right:-40px;bottom:-40px;z-index:0; background:var(--pov-backdrop,none) center / cover no-repeat,var(--ds-editor-canvas,#000); filter:blur(28px) brightness(.55) saturate(1.1);pointer-events:none} } @media (min-width:768px) and (orientation:portrait){ .reels[data-reels-state="recorded"]::before{left:calc(-50vw + 240px - 40px);right:calc(-50vw + 240px - 40px)} } /* ═══ РЕДАКТОР: КАДР ПО ШИРИНЕ / ПО ВЫСОТЕ (владелец, 28.09.2026, после проверки на iPhone) ═══ Вертикальное и квадратное медиа — во всю ШИРИНУ экрана: края по бокам не обрезаются; если медиа ниже экрана — сверху и снизу тёмный фон редактора (--ds-editor-canvas), если выше — лишнее уходит за верх и низ поровну. Широкое медиа (признак data-reels-wide ставит pub-camera-reels.js) — во всю ВЫСОТУ. Форма элемента = форма содержимого (--pub-shot-ar), поэтому слой надписей считает масштаб по рамке элемента, а видимую часть — по пересечению с областью показа (pub-overlay-editor.js measure). Управление — поверх. Живая камера — своё правило (.reels__live), обрезка фото — свой холст. */ .reels[data-reels-state="recorded"] .reels__result{ width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:var(--pub-shot-ar, 3 / 4);object-fit:cover} .reels[data-reels-state="recorded"][data-reels-wide] .reels__result{width:auto;height:100%} /* ПРЕДПРОСМОТР ВИДЕО ИГРАЕТСЯ. Область показа (.reels__shot) нажатий не принимает, чтобы не перехватывать панели; сам кадр видео и кнопка воспроизведения — принимают. Кнопка лежит в той же ячейке сетки, что и кадр, поэтому стоит по его центру при любой форме кадра. */ .reels__shot > video.reels__result{pointer-events:auto;cursor:pointer;grid-area:1 / 1;-webkit-tap-highlight-color:transparent} /* ФОТО ТОЖЕ ПРИНИМАЕТ КАСАНИЯ: по нему выбирают, двигают и правят надписи. Без этого касание проходило сквозь кадр в фон экрана, и надпись на фото нельзя было ни взять, ни открыть. Системное меню долгого нажатия и перетаскивание картинки браузером жест не перебивают. */ .reels__shot > img.reels__result{pointer-events:auto;grid-area:1 / 1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none; -webkit-user-drag:none;-webkit-tap-highlight-color:transparent} .reels__play{ grid-area:1 / 1;align-self:center;justify-self:center;pointer-events:auto; width:56px;height:56px;border-radius:50%;border:0;padding:0; display:grid;place-items:center;color:#fff;cursor:pointer; background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 2px 12px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent} /* Центр тяжести треугольника уже в середине рамки значка: большой сдвиг вправо делал кнопку кривой. */ .reels__play svg{width:26px;height:26px;margin-left:1px;display:block} .reels__play[hidden]{display:none} .reels__play:focus-visible{outline:2px solid #fff;outline-offset:3px} /* ЗЕРКАЛО РЕЗУЛЬТАТА = зеркалу LIVE. Live-превью фронталки зеркалится (.reels__wrap.is-mirror), а .reels__result лежит СНАРУЖИ wrap → без этого правила на Stop картинка резко переворачивалась (P0-1). Зеркалим ТОЛЬКО показ результата, тем же признаком data-reels-mirror; сам записанный файл/Blob не трогается — зеркалится лишь превью, как в обычной селфи-камере. */ /* Выбранное из галереи — не селфи-превью: его кадр показывается как есть, без зеркала. */ /* С НАДПИСЯМИ зеркала нет и у своей съёмки: текст ложится на кадр ФАЙЛА, и человек должен видеть кадр таким, каким его получат зрители, — иначе надпись у лица уехала бы на другую сторону. */ .reels[data-reels-mirror="mirror"]:not([data-reels-source="gallery"]):not([data-pov-has]):not([data-pov-editing]) .reels__result{transform:scaleX(-1)} /* Подложка больше не используется: cover заполняет экран сам. */ .reels__bg{display:none !important} /* ─────────── единое правило превью (cover в любой ориентации) ─────────── * * ПРЕЖДЕ здесь было раздвоение: вертикальный поток — cover, горизонтальный — contain + размытая * подложка. Оно опиралось на клиентскую подмену потока под ориентацию (watchFormat/switchFormat), * которая на iOS 18.7 падала ошибкой «Не удалось сменить формат». Подмена убрана: превью теперь * ВСЕГДА cover (правило .reels__live выше), заполняет экран как нативная камера, подложка не * нужна. Ориентацию итогового файла нормализует сервер (-autorotate), а не CSS превью. */ /* ─────────── подложка первого открытия (V3.24.1Q) ─────────── * * Между нажатием «Reels» и первым кадром камеры проходит около секунды, и всё это время * поверхность была чёрной пустотой. Заменить эту секунду нечем — её занимает сама * камера, — но пустоту можно убрать: спокойный фон проекта и мелкий значок читаются как * «экран открыт и работает», а не как «ничего не происходит». * * Ни снимков экрана, ни содержимого страницы здесь нет: только фон. Слой лежит НИЖЕ * управления и нажатий не перехватывает — закрыть камеру можно в любой момент. */ .reels__warm{ position:absolute;left:0;top:0;width:100%;height:100%;z-index:0; display:flex;align-items:center;justify-content:center;pointer-events:none; background:radial-gradient(120% 90% at 50% 42%,#161b24 0%,#0a0d13 62%,#05070b 100%); opacity:1;transition:opacity .2s ease-out} .reels__warm-icon{ width:34px;height:26px;border:2px solid rgba(255,255,255,.34);border-radius:6px; position:relative} .reels__warm-icon::after{ content:'';position:absolute;left:50%;top:50%;translate:-50% -50%; width:11px;height:11px;border:2px solid rgba(255,255,255,.34);border-radius:999px} /* Уходит, как только показан настоящий кадр. */ .reels[data-reels-ready="1"] .reels__warm{opacity:0} @media (prefers-reduced-motion:reduce){ .reels__warm{transition:none} } /* ─────────── застывший кадр при переключении камеры (V3.24.1N) ─────────── * * Снимок последнего увиденного кадра. Лежит над видео (z-index 1), но ниже панелей * управления, и нажатий не перехватывает. * * ЗЕРКАЛО В НЕГО УЖЕ ВРИСОВАНО. Холст лежит ВНЕ обёртки, на которой живёт отражение, — * иначе смена режима под новую камеру перевернула бы и застывший кадр, а он обязан * выглядеть ровно так, как человек видел его секунду назад. * * Уходит только прозрачностью: любой transform здесь дал бы тот самый скачок. */ .reels__frozen{ position:absolute;left:0;top:0;width:100%;height:100%;z-index:1; display:block;pointer-events:none;background:#000; opacity:1;transition:opacity .18s ease-out} .reels__frozen[hidden]{display:none} .reels[data-reels-frozen="0"] .reels__frozen{opacity:0} /* Под снимком переворота подложка не проявляется: снимок и есть картинка (Виктория, POST 29.09). */ .reels[data-reels-frozen="1"] .reels__warm{opacity:0;transition:none} @media (prefers-reduced-motion:reduce){ .reels__frozen{transition:none} } /* ─────────── появление первого кадра (V3.24.1K) ─────────── * * Живой слой прозрачен, пока камера не отдала настоящий кадр. Это не заглушка: сцена под * ним чёрная, и человек видит открытый экран камеры с работающей панелью, а не отдельное * окно ожидания. Заодно снимается горизонтальный всплеск — поток подключён к элементу * ещё во время измерения, и без этого правила полоса успевала мелькнуть. * * Плавность здесь по делу, а не для красоты: мгновенная подмена чёрного кадром читается * как рывок. Плавно уходит ПОДЛОЖКА .reels__warm — она лежит поверх живого слоя (позже в * разметке), а сам слой встаёт сразу: два встречных перехода давали просадку яркости * посередине (Виктория, PRE 29.09.2026). Кому движение мешает — у подложки его нет. */ .reels__live,.reels__bg{opacity:0} .reels[data-reels-ready="1"] .reels__live, .reels[data-reels-ready="1"] .reels__bg{opacity:1} /* Слой видим, но ещё НАКРЫТ — под непрозрачной подложкой или снимком переворота — в последние кадры перед проявлением. data-reels-live-prep ставит revealAfterLayout только после подтверждения или предела, в том числе при перевороте: раньше подтверждения слой не включается и под снимком (Артём, POST B-fix3: на iOS видео не должно успеть лечь поверх холста). Браузер показывает слой, ставший видимым, лишь со следующего кадра — без этого мелькал чёрный кадр (Виктория, POST B-fix2). */ .reels[data-reels-live-prep="1"] .reels__live{opacity:1} /* Не совсем непрозрачное покрытие: над полностью непрозрачным слоем браузер считает видео перекрытым и не выводит его кадры — в момент ухода покрытия мелькал чёрный кадр (reduced motion 6/6, провал до 38.6; Виктория, POST fix5). 2% не видны глазу. Подложка — только когда слой уже готовится (после подтверждения), снимок — пока он на экране. */ .reels[data-reels-live-prep="1"]:not([data-reels-ready="1"]):not([data-reels-frozen="1"]) .reels__warm{opacity:.98} .reels[data-reels-frozen="1"] .reels__frozen{opacity:.98} .reels[data-reels-ready="1"] .reels__bg{opacity:.85} /* ─────────── верх ─────────── */ .reels__top{ position:absolute;left:0;right:0;top:0;z-index:3; display:flex;align-items:center;justify-content:space-between;gap:8px; /* Бока — не меньше выреза: телефон лёжа прячет под «чёлкой» крайнюю кнопку (матрица рендера, 844×390: «Закрыть» под левым вырезом). */ padding:calc(8px + env(safe-area-inset-top,0)) max(12px,env(safe-area-inset-right,0)) 8px max(12px,env(safe-area-inset-left,0)); background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))} /* В редакторе верхний ряд без своей полосы (её роль у затемнения экрана); «×» — круг 36 на стекле внутри цели 44. */ .reels[data-reels-state="recorded"] .reels__top{background:none;padding-left:max(12px,env(safe-area-inset-left,0))} .reels[data-reels-state="recorded"] .reels__icon{position:relative;border:0;background:transparent;color:var(--ds-editor-ink,#fff)} .reels[data-reels-state="recorded"] .reels__icon::before{content:"";position:absolute;inset:4px;border-radius:50%; background:var(--pov-glass,rgba(24,24,27,.74));box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} .reels[data-reels-state="recorded"] .reels__icon svg{position:relative;width:18px;height:18px} /* 44px — не «покрупнее», а стандарт проекта для тач-таргета (CLAUDE.md). Закрытие и вспышка стояли 40×40: в горизонтали это ещё и у самого края экрана, где промахнуться легче всего, а закрытие обязано срабатывать с первого раза в любом состоянии. */ .reels__icon{ -webkit-appearance:none;appearance:none; width:44px;height:44px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; /* Круг с тонкой светлой обводкой — читается и на чёрном поле над кадром, и на ярком кадре; та же пара «подложка + обводка», что у колонки инструментов (.pov-rail). */ border:1px solid rgba(255,255,255,.18);box-sizing:border-box;border-radius:var(--ds-r-pill,999px); background:var(--ds-scrim,rgba(0,0,0,.35)); color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent} .reels__icon[hidden]{display:none} .reels__icon svg{width:20px;height:20px} .reels__icon:focus-visible{outline:2px solid #fff;outline-offset:2px} .reels__timer{ font-size:13px;font-weight:600;letter-spacing:.02em; font-variant-numeric:tabular-nums; padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.45)} .reels__timer[hidden]{display:none} /* Красная точка появляется только во время записи — рядом с временем, без анимации, которая отвлекала бы от кадра. */ .reels[data-reels-state="recording"] .reels__timer::before{ content:'';display:inline-block;width:7px;height:7px;margin-right:6px; border-radius:50%;background:#ff3b30;vertical-align:middle} /* ─────────── сообщения ─────────── */ /* КАРТОЧКА, А НЕ ПОЛОСА. Раньше left:16/right:16 растягивало сообщение на всю ширину — в горизонтали это была огромная полоса через весь экран (дефект P0-2). Теперь ширина ограничена и карточка центрируется: одинаково аккуратно в портрете и в ландшафте. */ .reels__note{ position:absolute;left:50%;top:50%;z-index:4; transform:translate(-50%,-50%); width:max-content;max-width:min(440px, calc(100% - 32px)); display:flex;flex-direction:column;gap:12px;align-items:center; padding:16px;border-radius:14px;background:rgba(12,14,18,.86); text-align:center} .reels__note[hidden]{display:none} /* Негромкое сообщение: узкая строка под верхней панелью. Ожидание — не событие, и занимать под него середину кадра нельзя: это выглядит отдельным экраном. */ .reels__note--soft{ top:calc(56px + env(safe-area-inset-top,0));transform:none; left:50%;right:auto;translate:-50% 0; width:max-content;max-width:calc(100% - 32px); padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.55); font-size:13px} .reels__note--soft .reels__note-text{font-size:13px} .reels__note-text{margin:0;font-size:14px;line-height:1.45} .reels__note-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .reels__note-row[hidden]{display:none} /* ─────────── низ ─────────── */ .reels__bar{ position:absolute;left:0;right:0;bottom:0;z-index:3; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:12px;padding:14px 24px calc(18px + env(safe-area-inset-bottom,0)); background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0))} /* Галерея и переворот равны по весу и стоят по краям: главная кнопка одна, и она в центре. Тач-цель 48 — не меньше пальца. */ /* ПОЛЕ ВЫБОРА ФАЙЛА. Скрыто прозрачностью — и НИЧЕМ БОЛЬШЕ: ни pointer-events:none, ни clip-path, ни display:none. Каждое из них уже отнимало у нас выбор: элемент, исключённый из проверки попадания, система не считает получателем результата. Лежит рядом со своей подписью; нажатие идёт по подписи, а окно открывает браузер. */ .reels__file{ position:absolute;left:0;bottom:0;width:1px;height:1px; opacity:0;border:0;padding:0;margin:0} .reels__side{ -webkit-tap-highlight-color:transparent; -webkit-appearance:none;appearance:none; width:48px;height:48px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.28);border-radius:12px; background:rgba(0,0,0,.3);color:#fff;cursor:pointer; -webkit-tap-highlight-color:transparent} .reels__side:first-child{justify-self:start} .reels__side:last-child{justify-self:end} .reels__side[hidden]{display:none} .reels__side[disabled]{opacity:.4;pointer-events:none} .reels__side svg{width:22px;height:22px} .reels__side:focus-visible{outline:2px solid #fff;outline-offset:2px} /* Кнопка записи — единственный крупный элемент экрана. Белое кольцо и цветная сердцевина: в покое фирменный оранжевый, в записи красный квадрат «стоп». */ .reels__rec{ -webkit-appearance:none;appearance:none; width:74px;height:74px;justify-self:center; display:flex;align-items:center;justify-content:center; border:4px solid rgba(255,255,255,.95);border-radius:999px; background:transparent;cursor:pointer;padding:0; -webkit-tap-highlight-color:transparent} .reels__rec[hidden]{display:none} .reels__rec[disabled]{opacity:.6;pointer-events:none} .reels__rec:focus-visible{outline:2px solid #fff;outline-offset:3px} .reels__rec-dot{ display:block;width:56px;height:56px;border-radius:999px; /* Фирменный цвет проекта — оранжевый (--clike-orange). Локальный акцент композера здесь не годится: он синий, и камера получала бы чужой цвет. */ background:var(--clike-orange,#ff6a00); transition:width .16s ease,height .16s ease,border-radius .16s ease,background .16s ease} .reels[data-reels-state="recording"] .reels__rec-dot{ width:28px;height:28px;border-radius:6px;background:#ff3b30} /* ─────────── переключатель ФОТО / ВИДЕО (над кнопкой съёмки) ─────────── */ .reels__modes{ position:absolute;left:0;right:0; bottom:calc(104px + env(safe-area-inset-bottom,0)); display:flex;justify-content:center;gap:6px;pointer-events:none; /* Выше панели .reels__bar: нижнее поле касания пунктов (::after) не должно уходить под неё. */ z-index:4} .reels__modes[hidden]{display:none} /* Вкладки Фото/Видео — свой tablist внутри группы; раскладка та же, что у группы. */ .reels__modes-tabs{display:flex;flex-direction:inherit;gap:inherit} .reels__mode{ -webkit-appearance:none;appearance:none;pointer-events:auto; min-height:32px;padding:6px 16px;border:0;border-radius:999px; background:rgba(0,0,0,.4);color:rgba(255,255,255,.72); font:600 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.04em; cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative} /* Цель 44 при видимых 32 (приём .reels__after .reels__btn): поле касания шире рисунка. */ .reels__mode::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px} .reels__mode.is-active{background:#fff;color:#111} .reels__mode:focus-visible{outline:2px solid #fff;outline-offset:2px} /* Фото-затвор: сплошной белый кружок (как в нативной камере), а не оранжевая точка записи. */ .reels[data-reels-mode="photo"] .reels__rec-dot{background:#fff;border-radius:999px} /* В ландшафте панель уходит вправо колонкой во всю высоту — переключатель встаёт ЛЕВЕЕ неё, на границе резерва кадра (--reels-fit-right, 160px), прижатый книзу. Прежде он лежал над самой панелью: касание уходило в .reels__bar и кнопку галереи — в горизонте режимы не нажимались; по центру высоты на низком экране (≤320) его накрывало сообщение сверху (Виктория, POST 28.09). Колонка с зазором 12: поля касания ±6 соседей не пересекаются. */ @media (orientation:landscape){ .reels__modes{left:auto;right:calc(160px + env(safe-area-inset-right,0));top:auto; bottom:calc(14px + env(safe-area-inset-bottom,0));flex-direction:column;gap:12px} } /* ─────────── после съёмки («Вариант 8») ─────────── «Переснять» — стекло слева, «Далее →» — справа; полосы своей нет (затемнение экрана). Высота ряда 64 над safe-bottom: центр кнопок там же, где на эталоне. */ .reels__after{ position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;gap:10px;justify-content:space-between;align-items:center; min-height:64px;box-sizing:content-box; padding:0 max(16px,env(safe-area-inset-right,0)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0))} .reels__after .reels__btn{min-height:40px;display:inline-flex;align-items:center;gap:8px;position:relative;white-space:nowrap; font:600 15px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)} /* Цель 44 при видимых 40. */ .reels__after .reels__btn::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px} .reels__after .reels__btn svg{width:18px;height:18px;flex:0 0 auto} /* История: «Опубликовать историю» длиннее «Далее» — на телефоне «Переснять» становится кругом со знаком (подпись остаётся экранному чтецу), чтобы обе кнопки встали в одну строку. */ @media (max-width:420px){ .reels[data-reels-purpose="story"] .reels__after .reels__btn:not(.reels__btn--main){width:40px;padding:0;justify-content:center} .reels[data-reels-purpose="story"] .reels__after .reels__btn:not(.reels__btn--main)::after{left:-2px;right:-2px} .reels[data-reels-purpose="story"] .reels__after .reels__btn:not(.reels__btn--main) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} } .reels__btn[data-reels-retake-mode="back"] [data-reels-retake-ic="again"], .reels__btn:not([data-reels-retake-mode="back"]) [data-reels-retake-ic="back"]{display:none} .reels__after .reels__btn:not(.reels__btn--main){padding:0 14px 0 12px;border:0; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} /* «Далее» — ПОСЛЕДНИМ в ряду, у правого края. Белый на оранжевом 2.9:1 не используется (SPEC §2): тёмный текст на бренд-градиенте. Без свечения (владелец, 28.09.2026): оранжевый — только заливка. */ .reels__after .reels__btn--main{margin-left:auto;padding:0 14px 0 18px;font-weight:700; background:var(--ds-brand-grad,linear-gradient(135deg,#e8651c,#f5872e));color:var(--ds-brand-ink,#1c1206); box-shadow:none} .reels__after[hidden]{display:none} .reels__btn{ -webkit-appearance:none;appearance:none; min-height:44px;padding:0 18px; border:1px solid rgba(255,255,255,.3);border-radius:999px; background:rgba(0,0,0,.35);color:#fff; font:inherit;font-size:14px;cursor:pointer; -webkit-tap-highlight-color:transparent} /* Единственное главное действие на экране красится фирменным цветом. */ .reels__btn--main{background:var(--clike-orange,#ff6a00);border-color:transparent;font-weight:600} .reels__btn:focus-visible{outline:2px solid #fff;outline-offset:2px} /* ─────────── подтверждение выхода ─────────── */ .reels__ask{ position:absolute;left:16px;right:16px;top:50%;z-index:5; transform:translateY(-50%); display:flex;flex-direction:column;gap:14px; padding:18px;border-radius:16px;background:rgba(16,18,22,.95); box-shadow:0 12px 40px rgba(0,0,0,.5)} .reels__ask[hidden]{display:none} .reels__ask-text{margin:0;font-size:15px;line-height:1.4;text-align:center} .reels__ask-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* ─────────── узкие экраны ─────────── */ @media (max-width:360px){ .reels__rec{width:64px;height:64px;border-width:3px} .reels__rec-dot{width:48px;height:48px} .reels__side{width:44px;height:44px} .reels__bar{padding-left:16px;padding-right:16px} .reels__btn{padding:0 14px;font-size:13px} } /* ─────────── ГОРИЗОНТАЛЬНАЯ СЪЁМКА ─────────── * * Горизонтальное видео — обычная публикация ленты, а не ошибка. Значит и экран камеры * обязан быть горизонтальным, а не растянутым по ширине портретным макетом. * * Сцена занимает всё, что есть: ограничение ширины 430 пикселей здесь оставило бы * вертикальную колонку посреди широкого экрана — ровно то, от чего мы уходили. * * Панель управления переезжает ВПРАВО и становится колонкой: снизу в горизонте места * почти нет, а под большим пальцем оказывается именно правый край. Безопасные отступы * учитываются с той стороны, с которой они и появляются при повороте. */ @media (orientation:landscape){ /* Сцена занимает всё: ограничение в 430 пикселей оставило бы вертикальную колонку посреди широкого экрана — ровно то, от чего мы уходили. */ .reels__stage{max-width:none} /* ПАНЕЛЬ ЛЕЖИТ НАД СЦЕНОЙ, а не рядом с ней: она позиционирована абсолютно, и переключать направление flex-контейнера бессмысленно — на неё это не действует. Поэтому она переезжает к правому краю и разворачивается в колонку прямо здесь. Снизу в горизонте места почти нет, а под большим пальцем оказывается правый край; безопасный отступ учитывается с той стороны, с которой он и появляется. */ .reels__bar{ left:auto;top:0;right:0;bottom:0;width:auto; grid-template-columns:none;grid-template-rows:1fr auto 1fr; justify-items:center;gap:14px; padding:14px calc(18px + env(safe-area-inset-right,0)) 14px 24px; background:linear-gradient(270deg,rgba(0,0,0,.6),rgba(0,0,0,0))} /* Сообщение центрируется в СЦЕНЕ, а не во всём экране: правую полосу управления не перекрывает, к безопасной зоне не липнет. */ .reels__note{left:calc(50% - 44px);max-width:min(440px, calc(100% - 160px))} /* Управление ушло вправо колонкой — значит и область показа отходит вправо, а не вниз: иначе кадр стоял бы под кнопками, которых внизу больше нет. СВЕРХУ НИЧЕГО НЕ ПЕРЕОБЪЯВЛЯЕТСЯ: верхний ряд (закрыть · таймер · вспышка) остаётся полосой во всю ширину и в горизонте, значит отступ сверху нужен тот же. Значение наследуется из базового блока; повторить его здесь — завести дубль, который однажды разойдётся с оригиналом. Проверено замером: при отступе 8px кадр 16:9 заезжал под верхний ряд, и тот закрывал 14.5% картинки. ШИРИНА РЕЗЕРВА — 160px, столько же, сколько отводит себе сообщение (.reels__note ниже). Замерено на 844×390: колонка кнопок занимает 147px («Переснять» 105 + набивка 24 и 18). Запас в 13px — на длинный перевод и на более крупный системный шрифт. */ .reels{ --reels-fit-bottom:calc(8px + env(safe-area-inset-bottom,0)); --reels-fit-left:calc(8px + env(safe-area-inset-left,0)); --reels-fit-right:calc(160px + env(safe-area-inset-right,0))} /* Кнопки «после съёмки» (Переснять/Продолжить) — тоже правой колонкой, как управление. */ .reels__after{ left:auto;top:0;right:0;bottom:0; flex-direction:column;justify-content:center; padding:14px calc(18px + env(safe-area-inset-right,0)) 14px 24px; background:linear-gradient(270deg,rgba(0,0,0,.65),rgba(0,0,0,0))} } /* Совсем низкий ландшафт: кнопки мельче, иначе панель съедает кадр. */ @media (orientation:landscape) and (max-height:560px){ .reels__rec{width:56px;height:56px} .reels__rec-dot{width:42px;height:42px} .reels__bar{gap:10px} } /* ─────────── ПОДПИСЬ ФОРМАТА (этап B) ─────────── * * Камера снимает и вертикально, и горизонтально. Человеку достаточно знать, что * получится, — большого переключателя для этого не нужно. * * Здесь больше нет слоя «Поверните телефон вертикально»: горизонтальное видео перестало * быть ошибкой и стало обычной публикацией ленты. * * Подпись не перехватывает нажатий и не поворачивается ничем: поворачивается кадр * камеры, а не интерфейс. */ .reels__fmt{ position:absolute;left:50%;translate:-50% 0; top:calc(56px + env(safe-area-inset-top,0));z-index:4; display:none;width:max-content;max-width:calc(100% - 32px); padding:6px 12px;border-radius:999px;pointer-events:none; background:rgba(0,0,0,.55);color:rgba(255,255,255,.96); font-size:13px;line-height:1.3;white-space:nowrap} .reels[data-reels-fmt-note="1"] .reels__fmt{display:block} /* ═══════════ НАДПИСИ ПОВЕРХ ВИДЕО (assets/pub-overlay-editor.js) ═══════════ * * Шрифты — файлы проекта (Manrope, Unbounded), под своими именами семейств: редактор рисует * ими в canvas, и совпадение предпросмотра с файлом не должно зависеть от того, объявлены ли * эти семейства где-то ещё на странице. */ @font-face{font-family:'ClikeOvManrope';src:url('fonts/manrope/manrope-cyrillic-d8fc94bf.woff2') format('woff2');unicode-range:U+0400-04FF;font-weight:400 800;font-display:swap} @font-face{font-family:'ClikeOvManrope';src:url('fonts/manrope/manrope-latin-b4295101.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-weight:400 800;font-display:swap} @font-face{font-family:'ClikeOvUnbounded';src:url('fonts/unbounded/unbounded-cyrillic-f4b8aa63.woff2') format('woff2');unicode-range:U+0400-04FF;font-weight:500 800;font-display:swap} @font-face{font-family:'ClikeOvUnbounded';src:url('fonts/unbounded/unbounded-latin-1924221f.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-weight:500 800;font-display:swap} /* Слой лежит ровно на прямоугольнике кадра (координаты ставит редактор). Сам слой нажатий не принимает: касания ловит область кадра и решает по геометрии надписей — иначе касание мимо текста не ставило бы видео на паузу. Принимает только поле ввода (курсор). */ .pov{position:absolute;z-index:3;pointer-events:none;overflow:visible;will-change:transform} .pov[hidden]{display:none} /* Подъём над каталогом шрифтов уходит плавно, а не рывком. Во время ввода и жестов переход выключен: там слой обязан следовать за клавиатурой и пальцем без запаздывания. */ .pov{transition:transform .18s ease} .reels[data-pov-mode="typing"] .pov,.reels[data-pov-dragging] .pov{transition:none} .pov__canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* Поле ввода прозрачное: буквы рисует холст той же функцией, что и картинку публикации. */ /* ПЕРЕНОС ПОЛЯ ВВОДА СОВПАДАЕТ С ХОЛСТОМ. Раньше здесь стояло white-space:pre — поле росло в одну строку вместе с блоком надписи, выходило за кадр и тянуло за собой раскладку экрана (замер на iPhone 17.09). Ширина блока теперь ограничена кадром (layout → textAreaWidth), а поле переносит те же слова. */ .pov__ta{position:absolute;margin:0;border:0;outline:0;box-sizing:border-box;resize:none;overflow:hidden; white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;background:transparent;color:transparent; -webkit-text-fill-color:transparent;-webkit-appearance:none;appearance:none;border-radius:0; pointer-events:auto;transform-origin:50% 50%;letter-spacing:0;text-indent:0; -webkit-user-select:text;user-select:text;z-index:2} .pov__ta[hidden]{display:none} .pov__ta:focus,.pov__ta:focus-visible{outline:none;box-shadow:none} /* ПОЛЯ РЕДАКТОРА НАДПИСЕЙ НЕ ПЕРЕКРАШИВАЮТСЯ ОБЩИМИ ПРАВИЛАМИ ФОРМ. Светлая тема сайта задаёт :root[data-theme="light"] textarea/input { background:#fff } (public-feed-base.css) — это правило сильнее одиночного класса, и на iPhone со светлой темой поле ввода надписи стало белым прямоугольником поверх букв холста (17.09): текст не был виден при наборе. Здесь та же защита, но сильнее по специфичности и не зависит от порядка подключения стилей. */ :root textarea.pov__ta[data-pov-ta],:root textarea.pov__ta[data-pov-ta]:focus{background:transparent;color:transparent; -webkit-text-fill-color:transparent;border:0;border-radius:0;box-shadow:none;outline:none} /* Ползунки оттенка тоже input: без этой защиты правило светлой темы дало бы им белый фон и рамку поверх градиента. Сам градиент задаётся ниже, здесь снимается чужая заливка. */ :root input.pov-hsv__range[type="range"]{background:transparent;border:0;box-shadow:none;border-radius:0} :root input.pov-cat__search[data-pov-cat-search]{border:1px solid var(--ds-btn-bd,rgba(255,255,255,.18));background:var(--ds-panel-2,rgba(255,255,255,.08));color:var(--ds-ink,#fff); -webkit-text-fill-color:var(--ds-ink,#fff);border-radius:12px;box-shadow:none} .pov__frame{position:absolute;box-sizing:border-box;border:1.5px dashed rgba(255,255,255,.85); border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;transform-origin:50% 50%} .pov__frame[hidden]{display:none} .pov__guide{position:absolute;pointer-events:none;background:#ff6b1a;box-shadow:0 0 0 .5px rgba(0,0,0,.25)} .pov__guide--v{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)} .pov__guide--h{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)} .pov__guide[hidden],.pov__safe[hidden]{display:none} .pov__safe{position:absolute;inset:5%;border:1px dashed rgba(255,255,255,.55);border-radius:6px;pointer-events:none} /* Затемнение при вводе — только кадра и только настолько, чтобы буквы читались. */ .pov-dim{position:absolute;inset:0;z-index:2;background:var(--ds-editor-dim,rgba(0,0,0,.36));pointer-events:none} .pov-dim[hidden]{display:none} .reels[data-pov-has] .reels__result,.reels[data-pov-mode="selected"] .reels__result{touch-action:none} .reels{--reels-tool:44px;--reels-gap:12px} /* ═══ КОЛОНКА ИНСТРУМЕНТОВ ГЛАВНОГО ЭКРАНА ═══ * * Справа сверху — вертикальная пилюля круглых действий: «Aa», музыка, фильтры (ТЗ владельца, * 25.09.2026). Первая кнопка стоит на уровне «×» слева; отступы — от safe-area. Кнопки ОДНОГО * размера (44px — тач-цель проекта) и одного вида; брендовые кольца на каждой сняты — когда * бренд везде, активную не отличить (Виктория). Активная — брендовая заливка с тёмным знаком * плюс кольцо: состояние видно не только цветом. В режимах правки колонка скрыта * (.reels[data-pov-edit]). */ .pov-rail{position:absolute;z-index:6; right:max(14px,env(safe-area-inset-right,0)); /* Центр первого пункта — на линии верхнего ряда: safe-top + 30 (набивка 2 + половина 44). */ top:calc(6px + env(safe-area-inset-top,0)); display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 0;width:var(--reels-tool); border-radius:calc(var(--reels-tool) / 2);background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} .pov-rail:not(:has(> button:not([hidden]))){display:none} .pov-rail > button{ -webkit-appearance:none;appearance:none;flex:0 0 auto;position:relative; width:var(--reels-tool);height:var(--reels-tool);box-sizing:border-box;padding:0;margin:0; border:0;border-radius:50%;display:grid;place-items:center; background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:color var(--ds-dur-fast,.12s) var(--ds-ease,ease),transform var(--ds-dur-fast,.12s) var(--ds-ease,ease)} .pov-rail > button::before{content:"";position:absolute;inset:4px;border-radius:50%} .pov-rail > button > *{position:relative} .pov-rail > button[hidden]{display:none} .pov-rail > button:active{transform:scale(.94)} .pov-rail > button svg{width:22px;height:22px;display:block} .pov-rail > button:focus-visible{outline:2px solid var(--reels-ink,#fff);outline-offset:2px} /* Активный — оранжевая иконка и тонкое кольцо вместо сплошного круга (SPEC §3): состояние видно не только цветом. */ .pov-rail > button.is-on,.pov-rail > button[aria-expanded="true"]{color:var(--ds-editor-on,#f5872e)} .pov-rail > button.is-on::before,.pov-rail > button[aria-expanded="true"]::before{ background:var(--ds-editor-on-tint,rgba(245,135,46,.18));box-shadow:inset 0 0 0 1.5px var(--ds-editor-ring,#f5872e)} .reels__aa{font:650 17px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);letter-spacing:-.02em} .reels__aa.is-full{opacity:.45} /* Телефон лёжа: высоты мало — колонка ложится строкой в верхний ряд, не наезжая на правую колонку «Назад / Опубликовать». */ @media (orientation:landscape) and (max-height:560px){ .pov-rail{flex-direction:row;width:auto;padding:0 2px;top:calc(6px + env(safe-area-inset-top,0))} } /* ═══ ОБРЕЗКА ВИДЕО ═══ * * «Обрезать» — четвёртый пункт колонки (.pov-rail; вид — общий у пунктов колонки). Режим — тот же * механизм: сверху «Отмена · Обрезка · Готово», внизу одна полоса кадров со скобой отрезка. */ .pov-trim{position:absolute;z-index:4;left:0;right:0; bottom:calc(10px + env(safe-area-inset-bottom,0)); display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px; padding:0 max(24px,env(safe-area-inset-right,0)) 0 max(24px,env(safe-area-inset-left,0))} .pov-trim[hidden]{display:none} /* Чип над полосой: служебный текст над кадром — только в чипе (SPEC §3). */ .pov-trim__info{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px; font:500 12px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);font-variant-numeric:tabular-nums; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink-2,rgba(255,255,255,.86)); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent)} .pov-trim__info b{font-weight:700;color:var(--ds-editor-ink,#fff)} .pov-trim__loop{font-size:13px;color:var(--ds-editor-ink,#fff)} .pov-trim__moving{font-weight:700;color:var(--ds-editor-on,#f5872e)} .pov-trim__bounds{padding-left:7px;border-left:1px solid var(--ds-editor-glass-line,rgba(255,255,255,.18))} /* ОДНА полоса кадров 40 px без контейнера, поля 24 (лист 4). */ .pov-trim__track{position:relative;justify-self:stretch;height:40px;border-radius:var(--ds-r-10,10px); background:rgba(255,255,255,.08);box-shadow:0 6px 18px -8px rgba(0,0,0,.55),inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)); touch-action:none} .pov-trim__thumbs{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr; border-radius:inherit;overflow:hidden} .pov-trim__thumb{display:block;background:rgba(255,255,255,.06) center/cover no-repeat} /* Скоба отрезка — та же, что у фрагмента музыки: 2 px сверху/снизу, ручки 12 px заливкой. */ .pov-trim__win{position:absolute;top:0;bottom:0;left:0;right:0;box-sizing:border-box; border:2px solid var(--ds-brand-2,#f5872e);border-left-width:12px;border-right-width:12px; border-radius:var(--ds-r-10,10px);pointer-events:none} /* Вне отрезка — притушено. */ .pov-trim__dim{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.55);pointer-events:none} .pov-trim__dim--l{left:0;border-radius:var(--ds-r-10,10px) 0 0 var(--ds-r-10,10px)} .pov-trim__dim--r{right:0;border-radius:0 var(--ds-r-10,10px) var(--ds-r-10,10px) 0} /* Ручка: касание 44 поверх видимых 12. Зона смещена ВНУТРЬ окна: у краёв ленты палец не уходит к краю экрана, где Safari ловит жест «назад» (SPEC §3). */ .pov-trim__h{position:absolute;top:-4px;bottom:-4px;width:var(--ds-touch-min,44px);pointer-events:auto; cursor:ew-resize;touch-action:none;-webkit-tap-highlight-color:transparent} .pov-trim__h--a{left:-14px} .pov-trim__h--b{right:-14px} /* Насечка 2×12 на ручке; активная ручка — белая. */ .pov-trim__h::after{content:"";position:absolute;top:50%;width:2px;height:12px;margin-top:-6px; border-radius:1px;background:rgba(18,22,28,.55)} .pov-trim__h--a::after{left:19px} .pov-trim__h--b::after{right:19px} .pov-trim__h::before{content:"";position:absolute;top:4px;bottom:4px;width:12px;background:#fff;opacity:0; border-radius:var(--ds-r-10,10px) 0 0 var(--ds-r-10,10px)} .pov-trim__h--a::before{left:14px} .pov-trim__h--b::before{right:14px;border-radius:0 var(--ds-r-10,10px) var(--ds-r-10,10px) 0} .pov-trim__h.is-active::before{opacity:1} .pov-trim__h:focus-visible{outline:2px solid var(--reels-ink,#fff);outline-offset:-10px;border-radius:12px} /* Текущий кадр — белая черта с тенью. */ .pov-trim__head{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;border-radius:2px; background:var(--reels-ink,#fff);box-shadow:0 0 3px rgba(0,0,0,.6);pointer-events:none} .reels[data-pov-trim-open] .pov-trash{visibility:hidden} /* РЕЖИМ ПРАВКИ — ОДНО ПРАВИЛО НА ТРИ РЕЖИМА (текст, фильтры, музыка; data-pov-edit ставит pub-overlay-editor.js). Глобальные действия — закрытие, «Назад», «Опубликовать», кнопки инструментов и капсула — живут только на главном экране просмотра; внутри режима сверху «Отмена» и «Готово». Прежде фильтры в это правило не входили, и под полосой фильтров оставались «Назад» и «Опубликовать» (дефект с iPhone, 25.09.2026). */ .reels[data-pov-edit] .pov-rail, .reels[data-pov-edit] .reels__play,.reels[data-pov-edit] .reels__after,.reels[data-pov-edit] .reels__cap, .reels[data-pov-edit] .reels__top{visibility:hidden;pointer-events:none} /* ═══ КАПСУЛА ВЫБРАННОЙ КОМПОЗИЦИИ ═══ * * Сверху по центру, вторым рядом под «фильтр / ♪ / Aa»: там её ищет глаз. Не в середине * кадра и не внизу: середина — лицо, низ занят подписями, «Далее» и полосой home-indicator. * * Прячется и возвращается ВМЕСТЕ с остальными инструментами — своего правила видимости у * неё нет намеренно: два правила о том, когда экран отдан правке текста, разошлись бы. * * Цвета и величины — из токенов темы, как у панелей редактора. Размытие за капсулой не * ставится: под ней живой кадр, и backdrop-filter стоил бы отдельного прохода на каждом * обновлении видео. */ /* ═══ ЧЕРНИЛА ЭКРАНА СЪЁМКИ НЕ ЗАВИСЯТ ОТ ТЕМЫ ПРИЛОЖЕНИЯ ═══ * * Под этим экраном живой кадр, а не поверхность темы: он тёмный ВСЕГДА, при любой теме. * Капсула взяла --ds-primary-ink — и у человека со светлой темой подпись трека стала * тёмно-коричневой поверх тёмного кадра: замер 1.10:1, то есть не видна вовсе. Рядом, * в том же ряду, ♪ и Aa оставались белыми: две кнопки одного ряда — одна белая, другая * почти чёрная. * * Поэтому у поверхности свои чернила, объявленные ОДИН раз здесь. Это не «литерал мимо * токенов»: это токен самой поверхности, у которой темы нет по устройству. */ .reels{--reels-ink:#fff;--reels-cap-bg:rgba(18,18,20,.88)} /* СВЕРХУ ПО ЦЕНТРУ, вторым рядом: ровно под серединой экрана, не задевая кнопок верхнего ряда. Видимая пилюля — 34px (компактно, не «плашка»), тач-зона обеих целей остаётся 44px за счёт невидимого расширения (::before у целей ниже). Ширина — по содержимому, но не шире кадра с полями: на 320px это 280px, на широком экране — не больше 320px. */ .reels__cap{position:absolute;z-index:7; left:50%;transform:translateX(-50%); /* В ВЕРХНЕМ РЯДУ, центр на линии safe-top + 30 (SPEC §1.2): пилюля 32. Ширина — между «×» и колонкой: min(252, 100% − 2·(поле 14 + колонка 44 + зазор 10)) — SPEC §3. */ top:calc(env(safe-area-inset-top,0) + 14px); display:flex;align-items:center;gap:0; height:32px;box-sizing:border-box; max-width:min(calc(100% - 2 * (var(--reels-tool,44px) + 24px)),252px); border-radius:16px; /* Стекло редактора: чернила следуют теме — под ними подложка (правило чернил выше). */ background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} .reels__cap[hidden]{display:none} /* Тело капсулы — «настроить». Высота по тач-минимуму: элемент интерактивный, и меряется он правилом тач-таргета, а не на глаз. */ .reels__cap-open{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px; height:100%;padding:0 2px 0 4px; border:0;background:transparent;color:inherit;cursor:pointer; font:600 var(--ds-text-sm,13px)/1.2 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); -webkit-tap-highlight-color:transparent} .reels__cap-note{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center; background:var(--ds-brand-grad,linear-gradient(135deg,#e8651c,#f5872e)) center/cover no-repeat} .reels__cap-note.has-art .reels__cap-eq{display:none} .reels__cap-eq{display:flex;gap:2px;align-items:flex-end;height:12px} .reels__cap-eq u{display:block;width:2.5px;border-radius:2px;background:#fff} .reels__cap-eq u:nth-child(1){height:7px}.reels__cap-eq u:nth-child(2){height:12px} .reels__cap-eq u:nth-child(3){height:5px}.reels__cap-eq u:nth-child(4){height:9px} /* ОДНА СТРОКА С МНОГОТОЧИЕМ. Бегущей строки здесь быть не может: она нарушила бы уменьшенное движение, а название трека читают один раз, а не смотрят на него. */ .reels__cap-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reels__cap-title{font-weight:600;font-size:13px} .reels__cap-artist{font-weight:500;color:var(--ds-editor-ink-2,rgba(255,255,255,.86))} /* «Убрать» — отдельная цель, чтобы не нажиматься вместо «настроить». */ .reels__cap-off{position:relative;flex:0 0 auto;width:32px;height:32px; display:grid;place-items:center;border:0;border-radius:var(--ds-r-pill,999px); background:transparent;color:inherit;cursor:pointer; font:400 18px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); -webkit-tap-highlight-color:transparent} /* «×» — круг 24 внутри цели 44 (SPEC §3). */ .reels__cap-off::after{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(127,127,127,.18)} .reels__cap-off svg{position:relative;z-index:1;width:11px;height:11px} /* Тач-зона 44px при пилюле 32px: невидимое расширение на 6px вверх и вниз, у «×» — и вправо. */ .reels__cap-open::before,.reels__cap-off::before{content:"";position:absolute;top:-6px;bottom:-6px;left:0;right:0} .reels__cap-off::before{left:-6px;right:-6px} @media (orientation:landscape){ /* Кадр в ландшафте стоит по центру СЦЕНЫ — без правой колонки «Переснять / Далее» (160px); капсула встаёт над ним, а не над серединой всего экрана. */ .reels__cap{left:calc((100% - 160px - env(safe-area-inset-right,0)) / 2)} } .reels__cap-open:focus-visible, .reels__cap-off:focus-visible{outline:2px solid var(--ds-link-brand,#f5872e);outline-offset:2px} .reels__cap-open:focus:not(:focus-visible), .reels__cap-off:focus:not(:focus-visible){outline:none} /* ═══ ПОЛОСА ФИЛЬТРОВ ═══ * * Над «Переснять / Далее»: кадр остаётся виден целиком выше полосы, а выбор делается тем * же большим пальцем, что и «Далее». Миниатюры — ЭТОТ кадр под каждым пресетом: человек * выбирает по результату, а не по названию. Полоса прокручивается вбок с привязкой к * плиткам; своего фона нет — только мягкое затемнение снизу, как у панели «после съёмки». * Величины — clamp(): от 320px до планшета плитки растут плавно, без ступенек. */ .pov-fx{position:absolute;z-index:4;left:0;right:0; /* Внизу экрана: «Назад / Опубликовать» в режиме фильтров спрятаны, их ряд свободен. Своей подложки нет («панель снизу лёгкая», лист 2): под ней — затемнение панели экрана. */ bottom:calc(8px + env(safe-area-inset-bottom,0)); display:grid;grid-template-columns:minmax(0,1fr);gap:6px; padding:6px 0 4px} /* Затемнение под полосой — выше обычного нижнего (SPEC §2: 330 px). */ .reels[data-pov-fx-open] .reels__stage::after,.reels[data-pov-trim-open] .reels__stage::after{ height:calc(296px + env(safe-area-inset-bottom,0));background:var(--ds-editor-scrim-panel,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.45) 30%,rgba(0,0,0,.78)))} .pov-fx[hidden]{display:none} .pov-fx__strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(52px,15.4vw,60px);gap:clamp(6px,2vw,10px); /* На широком экране все плитки помещаются — стоят по центру, как кадр и «Сила», а не прижаты влево; на узком safe center сам уступает прокрутке. */ justify-content:safe center; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none; /* Порядок сокращённой записи: верх, ПРАВО, низ, ЛЕВО — отступ выреза своей стороны. */ /* сверху 4: кольцо выбранной (зазор 2 + 2) не срезается краем прокрутки */ padding:4px max(16px,env(safe-area-inset-right,0)) 4px max(16px,env(safe-area-inset-left,0)); -webkit-overflow-scrolling:touch} .pov-fx__strip::-webkit-scrollbar{display:none} .pov-fx__item{position:relative;scroll-snap-align:center;display:grid;grid-template-rows:auto auto;justify-items:center;gap:5px; min-height:44px;padding:0 0 8px;border:0;background:transparent;color:var(--ds-editor-ink-2,rgba(255,255,255,.86));cursor:pointer; -webkit-tap-highlight-color:transparent; font:500 12px/1.15 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)} /* Миниатюра 60×78 r12 с тонкой внутренней обводкой; выбранная — зазор 2 + кольцо 2 и точка. */ .pov-fx__thumb{display:block;width:100%;aspect-ratio:60/78;border-radius:12px; background:#2a2a2e center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.14))} .pov-fx__item[aria-pressed="true"] .pov-fx__thumb{outline:2px solid var(--ds-editor-ring,#f5872e);outline-offset:2px} .pov-fx__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pov-fx__item[aria-pressed="true"] .pov-fx__label{color:var(--ds-editor-ink,#fff);font-weight:700} .pov-fx__item[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px; border-radius:50%;background:var(--ds-editor-on,#f5872e)} .pov-fx__item:focus-visible{outline:2px solid var(--ds-editor-ink,#fff);outline-offset:3px;border-radius:12px} /* «Сила» — над миниатюрами: чип-подпись, тонкая дорожка, чип-значение (служебный текст над кадром — только в чипе, SPEC §3). */ .pov-fx__power{order:-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px; margin:0 auto;width:min(calc(100% - 32px),420px);min-height:44px; font:600 12px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)} .pov-fx__power[hidden]{display:none} .pov-fx__power-cap,.pov-fx__power-val{height:22px;padding:0 8px;border-radius:11px;display:inline-flex;align-items:center; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1))} .pov-fx__power-val{min-width:3ch;justify-content:center;font-variant-numeric:tabular-nums} :root input.pov-fx__range[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0; background:transparent;border:0;box-shadow:none;cursor:pointer} :root input.pov-fx__range[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:2px; background:linear-gradient(90deg,var(--ds-editor-on,#f5872e) var(--v,80%),var(--ds-editor-track,rgba(255,255,255,.3)) var(--v,80%)); box-shadow:0 0 0 .5px rgba(0,0,0,.25)} :root input.pov-fx__range[type="range"]::-moz-range-track{height:3px;border-radius:2px;background:var(--ds-editor-track,rgba(255,255,255,.3))} :root input.pov-fx__range[type="range"]::-moz-range-progress{height:3px;border-radius:2px;background:var(--ds-editor-on,#f5872e)} :root input.pov-fx__range[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9.5px; border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35)} :root input.pov-fx__range[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35)} :root input.pov-fx__range[type="range"]:focus-visible{outline:2px solid var(--ds-editor-ink,#fff);outline-offset:2px;border-radius:12px} /* Пока открыта полоса, низ принадлежит ей: корзина надписей там не показывается. */ .reels[data-pov-fx-open] .pov-trash{visibility:hidden} /* Кадр НЕ поднимается над полосой («Вариант 8»): полоса лёгкая, без подложки, лежит поверх нижнего затемнения — открыто больше 75% кадра (лист эталона 2). */ @media (orientation:landscape){ /* Правая колонка «Назад / Опубликовать» в режиме спрятана — полоса во всю ширину. */ .pov-fx{bottom:env(safe-area-inset-bottom,0);right:env(safe-area-inset-right,0)} } /* Низкий ландшафт (телефон боком): высота — самый дефицитный ресурс. Плитки квадратные и мельче, «Сила» — одной строкой рядом с полосой не помещается, поэтому просто плотнее. Тач-цели остаются ≥44px: у плитки это её собственная высота, у ползунка — поле 44px. */ @media (orientation:landscape) and (max-height:560px){ .pov-fx{gap:2px;padding:4px 0 2px} .pov-fx__strip{grid-auto-columns:52px;gap:8px} .pov-fx__thumb{aspect-ratio:1/1;border-radius:10px} .pov-fx__item{gap:3px;font-size:12px} /* текст над кадром ≥12; длинное — многоточием (.pov-fx__label) */ } @media (prefers-reduced-motion:reduce){ .pov-fx__strip{scroll-behavior:auto} } /* ═══ МУЗЫКА: КАРТОЧКА ВИДЕО НАД ЛИСТОМ («Вариант 8», лист 3) ═══ Это тот же кадр редактора, а не второй элемент: область показа отходит от верхнего ряда и от листа музыки (его высота — dc-music-picker.css, 286 + safe-bottom), кадр — карточка r18 с тенью. Лист одной высоты во всех состояниях, поэтому карточка не прыгает. */ .reels[data-pov-edit="music"]{--reels-fit-bottom:min(calc(352px + env(safe-area-inset-bottom,0)), calc(100dvh - 120px + 12px))} /* лист 340 + 12 (dc-music-picker.css --mus-host-h) */ /* Фактическая высота листа (фрагмент — по содержимому) приходит от окна; карточка плавно встаёт над ним. */ @media (orientation:portrait),(min-height:561px){ .reels[data-pov-edit="music"][style*="--reels-music-sheet-h"]{--reels-fit-bottom:calc(var(--reels-music-sheet-h) + 12px)} } .reels[data-pov-edit="music"] .reels__shot{transition:bottom var(--ds-dur,.18s) var(--ds-ease,ease)} @media (prefers-reduced-motion:reduce){ .reels[data-pov-edit="music"] .reels__shot{transition:none} } .reels[data-pov-edit="music"] .reels__shot{box-sizing:border-box;padding-top:calc(58px + env(safe-area-inset-top,0))} /* Карточка — 9:16 (лист 3), заполненная кадром (cover); тот же элемент, воспроизведение не прерывается. */ .reels[data-pov-edit="music"] .reels__result{width:auto;height:100%;max-width:100%;aspect-ratio:9 / 16; border-radius:18px;box-shadow:0 18px 40px -14px rgba(0,0,0,.6)} .reels[data-pov-edit="music"] .reels__stage::after{display:none} /* Чип отрывка — внизу карточки 9:16 (лист 3): ширина карточки считается от области кадра. */ .reels[data-pov-edit="music"] .reels__shot{container-type:size} .pov-mchip{display:none} .reels[data-pov-edit="music"] .pov-mchip:not([hidden]){grid-area:1 / 1;align-self:end;justify-self:center;z-index:2; display:flex;align-items:center;justify-content:space-between;box-sizing:border-box; width:min(100cqw, 100cqh * 9 / 16);padding:0 10px 10px;pointer-events:none} .pov-mchip__t{height:24px;padding:0 9px;border-radius:12px;display:inline-flex;align-items:center;white-space:nowrap; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)); font:600 12px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);font-variant-numeric:tabular-nums} .pov-mchip__eq{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff);box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1))} /* Узкая карточка (низкий экран, 320×568): чип в одну строку не помещается — не показывается вовсе, а не ломается на три строки поверх кадра (Виктория). Отрывок виден в листе. */ @container (max-height:300px){ .reels[data-pov-edit="music"] .pov-mchip:not([hidden]){display:none} } /* Фон за карточкой — размытый тот же кадр (лист 3): картинку кладёт редактор (--pov-backdrop). */ .reels[data-pov-edit="music"] .reels__stage::before{z-index:0;top:-40px;left:-40px;right:-40px;bottom:-40px;height:auto;min-height:0; background:var(--pov-backdrop,none) center / cover no-repeat,var(--ds-editor-canvas,#000);filter:blur(28px) brightness(.62) saturate(1.1)} @media (orientation:landscape) and (max-height:560px){ .reels[data-pov-edit="music"]{--reels-fit-bottom:calc(12px + env(safe-area-inset-bottom,0));--reels-fit-right:calc(min(420px,52vw) + 12px)} } /* ═══ ОБРЕЗКА ФОТО («Вариант 8», лист 5) ═══ Свой холст поверх кадра (pub-overlay-editor.js): фото под неподвижной рамкой, всё вне рамки мягко затемнено (--ds-editor-crop-outside). Рамка — сетка третей 1 px и угловые скобы 3 px с тенью; поля рамки ≥ 24. Внизу — «Повернуть / Отразить / Сбросить» и форматы 62×62 (на 320 — 52). */ .pov-crop{position:absolute;inset:0;z-index:5;overflow:hidden;touch-action:none; background:var(--ds-editor-canvas,#000);--pov-crop-outside:var(--ds-editor-crop-outside,rgba(0,0,0,.62))} .pov-crop[hidden]{display:none} .pov-crop__cv{position:absolute;inset:0;width:100%;height:100%;display:block} .pov-crop__frame{position:absolute;box-sizing:border-box;pointer-events:none; background: linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px) calc(66.667% - .5px),rgba(255,255,255,.55) calc(66.667% - .5px) calc(66.667% + .5px),transparent calc(66.667% + .5px)), linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px) calc(66.667% - .5px),rgba(255,255,255,.55) calc(66.667% - .5px) calc(66.667% + .5px),transparent calc(66.667% + .5px)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)} .pov-crop__corner{position:absolute;width:20px;height:20px;border:0 solid var(--ds-editor-crop-corner,#fff); filter:drop-shadow(0 0 2px rgba(0,0,0,.45))} .pov-crop__corner--tl{left:-3px;top:-3px;border-left-width:3px;border-top-width:3px} .pov-crop__corner--tr{right:-3px;top:-3px;border-right-width:3px;border-top-width:3px} .pov-crop__corner--bl{left:-3px;bottom:-3px;border-left-width:3px;border-bottom-width:3px} .pov-crop__corner--br{right:-3px;bottom:-3px;border-right-width:3px;border-bottom-width:3px} /* 9:16 истории — пунктир безопасных зон: там будут шапка истории и подпись с кнопками. */ .pov-crop__safe{position:absolute;inset:0} .pov-crop__safe[hidden]{display:none} .pov-crop__safeline{position:absolute;left:0;right:0;height:0;padding:0 6px;border-top:1px dashed rgba(255,214,102,.9); font:600 12px/18px var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:#ffd666;text-align:right;white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6)} .pov-crop__safetag{display:inline-block;margin-top:4px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.72);text-shadow:none} /* 6:1 на белом кадре */ .pov-crop__safeline--top{top:12%} .pov-crop__safeline--bot{top:82%} .pov-crop__chip{position:absolute;transform:translateX(-50%);height:24px;padding:0 9px;border-radius:12px;display:inline-flex;align-items:center; font:600 12px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);font-variant-numeric:tabular-nums; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff);pointer-events:none} .pov-crop__chip[hidden]{display:none} .pov-crop__panel{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0));display:grid;gap:10px;justify-items:center; padding:0 max(16px,env(safe-area-inset-right,0)) 0 max(16px,env(safe-area-inset-left,0))} .pov-crop__tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .pov-crop__tool{position:relative;height:32px;padding:0 12px 0 10px;border:0;border-radius:16px;display:inline-flex;align-items:center;gap:6px;cursor:pointer; font:600 13px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-tap-highlight-color:transparent} .pov-crop__tool::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px} /* касание 44 */ .pov-crop__tool svg{width:16px;height:16px} .pov-crop__fmts{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(52px,16vw,62px);gap:clamp(4px,1.6vw,10px);justify-content:center} .pov-crop__fmt{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:3px;aspect-ratio:1/1;padding:8px 2px 7px; border:0;border-radius:14px;background:transparent;color:var(--ds-editor-ink-2,rgba(255,255,255,.86));cursor:pointer; font:500 11.5px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);-webkit-tap-highlight-color:transparent} .pov-crop__fmt-ic{display:block;box-sizing:border-box;border:1.5px solid currentColor;border-radius:3px} .pov-crop__fmt-ic--orig{border-style:dashed} .pov-crop__fmt[aria-checked="true"]{color:var(--ds-editor-on,#f5872e);background:var(--ds-editor-on-tint,rgba(245,135,46,.18)); box-shadow:inset 0 0 0 1.5px var(--ds-editor-ring,#f5872e)} .pov-crop__fmt[aria-checked="true"] .pov-crop__fmt-lb{color:var(--ds-editor-ink,#fff);font-weight:700} .pov-crop__fmt-lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pov-crop__fmt:focus-visible,.pov-crop__tool:focus-visible{outline:2px solid var(--ds-editor-ink,#fff);outline-offset:2px} /* ═══ ХОД ВИДЕО И ЧИП ФИЛЬТРА — ГЛАВНЫЙ ЭКРАН («Вариант 8», лист 0) ═══ */ .pov-vbar{position:absolute;z-index:6;left:max(16px,env(safe-area-inset-left,0));right:max(16px,env(safe-area-inset-right,0)); bottom:calc(78px + env(safe-area-inset-bottom,0));display:flex;align-items:center;gap:10px; font:600 12px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);font-variant-numeric:tabular-nums} .pov-vbar[hidden]{display:none} .pov-vbar__chip{height:22px;padding:0 8px;border-radius:11px;display:inline-flex;align-items:center; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1))} /* Полоса — прямо на кадре: чернила от темы не зависят (белая с тенью). Касание 44. */ .pov-vbar__track{position:relative;flex:1 1 auto;height:3px;border-radius:2px;background:rgba(255,255,255,.35); box-shadow:0 0 0 .5px rgba(0,0,0,.3);cursor:pointer} .pov-vbar__track::after{content:"";position:absolute;left:0;right:0;top:-20px;bottom:-20px} .pov-vbar__fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#fff} .pov-fxchip{position:absolute;z-index:7;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top,0)); height:32px;padding:0 14px;border-radius:16px;display:inline-flex;align-items:center;white-space:nowrap;pointer-events:none; font:600 12.5px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} .pov-fxchip[hidden]{display:none} .pov-fxchip b{font-weight:600} .reels[data-pov-edit] .pov-vbar,.reels[data-pov-edit] .pov-fxchip{visibility:hidden} /* ═══ ВЕРХНИЙ РЯД РЕЖИМА: «Отмена · название · Готово» («Вариант 8», SPEC §1.2, §3) ═══ Одна линия с главным экраном (центр safe-top + 30). Пилюли 32, касание 44 (::after). «Готово» — главное действие: бренд-градиент с тёмной надписью; «Отмена» и название — стекло. */ .pov-done,.pov-cancel,.pov-title{position:absolute;z-index:7;top:calc(14px + env(safe-area-inset-top,0)); height:32px;box-sizing:border-box;padding:0 14px;border:0;border-radius:16px; display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; font:600 14.5px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); -webkit-tap-highlight-color:transparent} .pov-done::after,.pov-cancel::after{content:"";position:absolute;left:-4px;right:-4px;top:-6px;bottom:-6px} .pov-done{right:max(16px,env(safe-area-inset-right,0));cursor:pointer;font-weight:700; background:var(--ds-brand-grad,linear-gradient(135deg,#e8651c,#f5872e));color:var(--ds-brand-ink,#1c1206); box-shadow:none} /* Пока подтверждать нечего (музыка без трека) — стекло без заливки. */ .pov-done[disabled]{cursor:default;box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)); background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink-2,rgba(255,255,255,.86))} .pov-done[hidden]{display:none} .pov-cancel,.pov-title{background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} .pov-cancel{left:max(16px,env(safe-area-inset-left,0));cursor:pointer} .pov-cancel[hidden]{display:none} /* Название — по центру экрана; не шире места между кнопками. */ .pov-title{left:50%;transform:translateX(-50%);max-width:calc(100% - 2 * 104px);overflow:hidden;text-overflow:ellipsis;pointer-events:none} .pov-title[hidden]{display:none} .pov-title b{font-weight:600} .pov-title__sub{margin-left:.35em;font-weight:500;color:var(--ds-editor-ink-2,rgba(255,255,255,.86));font-variant-numeric:tabular-nums} .pov-cancel:focus-visible,.pov-done:focus-visible{outline:2px solid var(--reels-ink,#fff);outline-offset:2px} /* Размер — вертикально слева: клиновидная дорожка, крупный бегунок под палец. */ .pov-size{position:absolute;z-index:7;left:max(4px,env(safe-area-inset-left,0));top:22%; height:clamp(120px,24vh,200px);width:44px;touch-action:none;cursor:ns-resize;-webkit-tap-highlight-color:transparent} .pov-size[hidden]{display:none} /* Лист 1: тонкая дорожка (.7) с тенью и бегунок 22 с тенью — над кадром, чернила от темы не зависят. */ .pov-size__track{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);border-radius:1px; background:rgba(255,255,255,.7);box-shadow:0 0 3px rgba(0,0,0,.45)} .pov-size__thumb{position:absolute;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%; background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none} /* Корзина — только пока надпись тащат. */ .pov-trash{position:absolute;z-index:7;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0)); width:56px;height:56px;margin-left:-28px;border-radius:50%;display:grid;place-items:center;color:#fff; border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);pointer-events:none; transition:transform .14s ease,background-color .14s ease} .pov-trash svg{width:26px;height:26px} .pov-trash[hidden]{display:none} .pov-trash[data-on]{transform:scale(1.22);background:#ff3b30;border-color:#ff3b30} .reels[data-pov-dragging] .pov-dock,.reels[data-pov-dragging] .pov-size,.reels[data-pov-dragging] .pov-done, .reels[data-pov-dragging] .pov-rail{visibility:hidden} /* надпись не прячется под колонку (Виктория) */ /* Нижний блок: полоса шрифтов или лист цвета над инструментами; поднимается над клавиатурой (низ ставит редактор по общему замеру клавиатуры, dcKeyboardInset). */ .pov-dock{position:absolute;z-index:8;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px; padding:8px max(10px,env(safe-area-inset-right,0)) calc(8px + env(safe-area-inset-bottom,0)) max(10px,env(safe-area-inset-left,0))} /* Лист шрифтов или цвета — непрозрачный лист редактора с ручкой; пилюля инструментов — внизу листа. */ .pov-dock:has(> .pov-cat:not([hidden])),.pov-dock:has(> .pov-color:not([hidden])){ padding-top:18px;border-radius:22px 22px 0 0;background:var(--ds-editor-sheet,rgba(22,22,25,.96)); box-shadow:0 -10px 30px -12px rgba(0,0,0,.45)} /* Внутри непрозрачного листа — чернила листа (в светлой теме тёмные), а не чернила «над кадром»; пилюля инструментов на листе — без своей подложки (лист 1.2/1.5). */ .pov-cat,.pov-color{--ds-editor-ink:var(--ds-editor-sheet-ink,#fff);--ds-editor-ink-2:var(--ds-editor-sheet-ink-2,rgba(255,255,255,.62)); --ds-editor-track:var(--ds-editor-sheet-track,rgba(255,255,255,.3))} .pov-dock:has(> .pov-cat:not([hidden])) .pov-tools,.pov-dock:has(> .pov-color:not([hidden])) .pov-tools{ --ds-editor-ink:var(--ds-editor-sheet-ink,#fff);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .pov-dock[hidden]{display:none} /* Фон блока касаний не принимает: надпись у нижнего края кадра остаётся доступной пальцу. Принимают только сами кнопки, полоса шрифтов и лист цвета. */ .pov-dock,.pov-tools{pointer-events:none} .pov-tool,.pov-color,.pov-cat{pointer-events:auto} .reels[data-pov-mode="typing"] .pov-dock{padding-bottom:8px} /* СЕМЬ ИНСТРУМЕНТОВ — ОДНА СТЕКЛЯННАЯ ПИЛЮЛЯ (лист 1): 7 × 44 + 8 = 316. На ≤340 — во всю ширину. */ .pov-tools{display:flex;justify-content:space-between;align-items:center;gap:0;width:316px;max-width:100%;box-sizing:border-box; margin:0 auto;padding:0 4px;border-radius:22px;pointer-events:auto; background:var(--pov-glass,rgba(24,24,27,.74));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1px var(--ds-editor-glass-line,rgba(255,255,255,.1)),var(--ds-editor-glass-shadow,0 0 0 transparent); -webkit-backdrop-filter:var(--pov-glass-blur,none);backdrop-filter:var(--pov-glass-blur,none)} /* Семь кнопок по 44px — 308px без зазоров. На 320px с полями 10+10 и зазорами строка выходила на 332px, и «Выше» уезжала за край (матрица рендера). Ужимаем поля и зазоры, а не кнопки: тач-цель остаётся 44px. */ @media (max-width:340px){ .pov-dock{padding-left:max(2px,env(safe-area-inset-left,0));padding-right:max(2px,env(safe-area-inset-right,0))} .pov-tools{width:100%} /* 320 (лист 6.6/6.8): подписи фильтров чуть шире миниатюры, «Повернуть / Отразить / Сбросить» — одной строкой. */ .pov-fx__label{max-width:calc(100% + 8px)} /* 12 px (текст над кадром ≥12); длинное — многоточием */ .pov-crop__tools{flex-wrap:nowrap;gap:6px} .pov-crop__tool{padding:0 9px 0 8px;gap:4px;font-size:12px} } .pov-tool{position:relative;flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center; background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .pov-tool > *{position:relative} .pov-tool svg{width:22px;height:22px} /* Активный инструмент — как в колонке: оранжевый знак, заливка on-tint и кольцо 1.5. */ .pov-tool::before{content:"";position:absolute;inset:4px;border-radius:50%} .pov-tool[data-on]{color:var(--ds-editor-on,#f5872e)} .pov-tool[data-on]::before{background:var(--ds-editor-on-tint,rgba(245,135,46,.18));box-shadow:inset 0 0 0 1.5px var(--ds-editor-ring,#f5872e)} .pov-tool:disabled{opacity:.35} .pov-tool[data-pov-style="box"] svg rect{fill:currentColor;fill-opacity:.35} .pov-tool[data-pov-style="outline"] svg path{stroke-width:2.6} .pov-tool[data-pov-style="plain"] svg rect{stroke-dasharray:3 3} .pov-tool__dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--ds-editor-ink,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.3)} /* ТЕМА РЕДАКТОРА — КАНОНИЧЕСКАЯ ТЕМА CLIKE (assets/ds/tokens/ds-theme.css). Своих «тёмных» цветов у панелей нет: поверхность, границы, текст и кнопки берутся из --ds-*, поэтому редактор выглядит частью той темы, которую выбрал человек, и следует за её переключением. Управление ПОВЕРХ кадра (рамка надписи, направляющие, корзина, «Готово», «Aa») остаётся светлым на затемнении: там фон — само фото или видео, а не поверхность приложения, и токены темы к нему не применимы. */ .pov-color{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;max-width:560px;width:100%;min-width:0;margin:0 auto;box-sizing:border-box; padding:0 8px 6px;border:0;border-radius:0;background:transparent;color:var(--ds-editor-ink,#fff);box-shadow:none;transition:transform .16s ease} .pov-color[hidden]{display:none} .pov-color__grip{width:44px;height:18px;margin:0 auto;position:relative;touch-action:none;cursor:grab} .pov-color__grip::after{content:"";position:absolute;left:8px;right:8px;top:7px;height:4px;border-radius:2px;background:var(--ds-muted,rgba(255,255,255,.35))} /* Быстрые цвета — один ряд; не помещаются — ряд прокручивается внутри листа, лист не шире экрана. */ .pov-color__presets{display:flex;justify-content:space-between;gap:clamp(4px,1.6vw,10px);flex-wrap:nowrap;overflow-x:auto;min-width:0; scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 4px} .pov-color__presets::-webkit-scrollbar{display:none} .pov-swatch{flex:0 0 auto;width:28px;height:28px;border-radius:50%;cursor:pointer;padding:0; border:2px solid var(--ds-muted-2,rgba(255,255,255,.3));-webkit-tap-highlight-color:transparent;position:relative} .pov-swatch::before{content:"";position:absolute;inset:-8px} /* касание 44 (лист 1.3: шаг 44) */ .pov-swatch[data-on]{box-shadow:0 0 0 2px var(--ds-editor-sheet,rgba(22,22,25,.96)),0 0 0 4px var(--ds-editor-ring,#f5872e)} .pov-swatch--pick{background:var(--ds-panel-3,rgba(255,255,255,.12));color:var(--ds-ink,#fff);display:grid;place-items:center} .pov-swatch--pick svg{width:18px;height:18px} .pov-hsv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;font-size:13px;color:var(--ds-editor-sheet-ink-2,rgba(255,255,255,.62))} .pov-hsv .pov-hsv__range{grid-column:1 / -1} .pov-hsv__value{justify-self:end;font:600 12.5px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); color:var(--ds-editor-ink,#fff);font-variant-numeric:tabular-nums} .pov-hsv-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:end;gap:8px} .pov-hsv-row .pov-swatch--pick{width:44px;height:44px} .pov-hsv__range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:-8px 0} /* строка касания 44, дорожка 8 */ .pov-hsv__range::-webkit-slider-runnable-track{height:8px;border-radius:4px} .pov-hsv__range::-moz-range-track{height:8px;border-radius:4px} .pov-hsv__range--h::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)} .pov-hsv__range--h::-moz-range-track{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)} .pov-hsv__range--s::-webkit-slider-runnable-track{background:linear-gradient(90deg,#fff,var(--pov-sat-end,#ff6b1a))} .pov-hsv__range--s::-moz-range-track{background:linear-gradient(90deg,#fff,var(--pov-sat-end,#ff6b1a))} .pov-hsv__range--v::-webkit-slider-runnable-track{background:linear-gradient(90deg,#000,var(--pov-bri-end,#ff6b1a))} .pov-hsv__range--v::-moz-range-track{background:linear-gradient(90deg,#000,var(--pov-bri-end,#ff6b1a))} /* БЕГУНОК И ДОРОЖКИ — НЕ ПОВЕРХНОСТЬ ПРИЛОЖЕНИЯ, А ЦВЕТОВОЙ ГРАДИЕНТ. Токены темы сюда не идут: на тёмной панели бегунок цвета --ds-panel пропадал на чёрном конце яркости, на светлой — на белом конце насыщенности. Бегунок всегда белый с тёмной обводкой, а у дорожек есть собственный контур, иначе их края растворяются в панели той же яркости. */ .pov-hsv__range::-webkit-slider-runnable-track,.pov-hsv__range::-moz-range-track{ box-shadow:inset 0 0 0 1px var(--ds-panel-bd,rgba(255,255,255,.18))} .pov-hsv__range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%; background:#fff;border:3px solid rgba(0,0,0,.35);box-shadow:0 1px 6px rgba(0,0,0,.35)} .pov-hsv__range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid rgba(0,0,0,.35)} @media (min-width:768px){ .pov-size{left:max(16px,calc(50% - 280px))} } @media (orientation:landscape) and (max-height:560px){ .pov-size{top:12%;height:60vh} .pov-color{gap:6px;padding:4px 12px 8px} .pov-hsv__range{height:22px} } /* ─────────── КОЛЛЕКЦИЯ ШРИФТОВ ─────────── «Aa» открывает каталог сразу, промежуточной полосы нет. Карточки фиксированной высоты: догрузившийся шрифт меняет только начертание образца, раскладка стоит. */ .pov-cat{display:flex;flex-direction:column;gap:8px; max-width:560px;width:100%;min-width:0;margin:0 auto;box-sizing:border-box; max-height:min(38vh,340px);padding:0 4px;border:0;border-radius:0;background:transparent;color:var(--ds-editor-ink,#fff);overflow:hidden; /* лист 1.2: верх листа ≈416 на 390×844 */ box-shadow:none;transition:transform .16s ease} .pov-cat[hidden]{display:none} .pov-cat__head{display:flex;align-items:center;gap:6px;min-width:0} .pov-cat__chips{display:flex;gap:6px;overflow-x:auto;min-width:0;flex:1 1 auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding:2px 0; /* Край строки категорий гаснет (лист 1.2): «дальше ещё», а не обрубок. */ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)} .pov-cat__chips::-webkit-scrollbar{display:none} .pov-cat__chip{position:relative;flex:0 0 auto;height:30px;margin:7px 0;padding:0 12px;border-radius:15px;cursor:pointer;white-space:nowrap; border:0;background:rgba(127,127,127,.16);color:var(--ds-editor-sheet-ink-2,rgba(255,255,255,.62));font:600 13px/1 var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); -webkit-tap-highlight-color:transparent} .pov-cat__chip::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px} /* касание 44 */ .pov-cat__chip[data-on]{background:var(--ds-editor-on-tint,rgba(245,135,46,.18));color:var(--ds-editor-ink,#fff); box-shadow:inset 0 0 0 1.5px var(--ds-editor-ring,#f5872e)} .pov-cat__find{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center; background:transparent;color:var(--ds-editor-ink,#fff);cursor:pointer;-webkit-tap-highlight-color:transparent} .pov-cat__find svg{width:20px;height:20px} .pov-cat__search{width:100%;box-sizing:border-box;min-height:40px;padding:0 12px;border-radius:12px; border:1px solid var(--ds-btn-bd,rgba(255,255,255,.18));background:var(--ds-panel-2,rgba(255,255,255,.08));color:var(--ds-ink,#fff);font-size:16px;outline:none} .pov-cat__search::placeholder{color:var(--ds-muted,rgba(255,255,255,.6));-webkit-text-fill-color:var(--ds-muted,rgba(255,255,255,.6));opacity:1} .pov-cat__search[hidden]{display:none} .pov-cat__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow-y:auto;overflow-x:hidden;min-height:0;touch-action:pan-y; flex:1 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-content:start;padding-bottom:12px; /* Нижний край мягко растворяется: видно, что список продолжается, без обрезанной полосы. */ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)} .pov-cat__head,.pov-cat__search,.pov-color__grip{flex:0 0 auto} .pov-cat__empty{color:var(--ds-muted,rgba(255,255,255,.6));font-size:14px;text-align:center;padding:14px 8px} .pov-cat__empty[hidden]{display:none} .pov-card-wrap{position:relative;min-width:0} .pov-card-wrap[hidden]{display:none} .pov-card{display:grid;grid-template-rows:30px 16px;align-content:center;gap:1px;width:100%;height:60px;box-sizing:border-box; padding:6px 38px 6px 12px;border-radius:14px;border:0;background:rgba(127,127,127,.12); color:var(--ds-editor-ink,#fff);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden} .pov-card[data-on]{background:var(--ds-editor-on-tint,rgba(245,135,46,.18));box-shadow:inset 0 0 0 1.5px var(--ds-editor-ring,#f5872e)} .pov-card__sample{display:block;font-size:18px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--ds-muted,rgba(255,255,255,.55));transition:color .12s ease} .pov-card[data-ready] .pov-card__sample{color:var(--ds-ink,#fff)} .pov-card[data-failed] .pov-card__sample{color:var(--ds-muted-2,rgba(255,255,255,.35));text-decoration:line-through} .pov-card__name{display:block;font:500 11.5px/16px var(--ds-ui-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--ds-editor-sheet-ink-2,rgba(255,255,255,.62)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pov-card__fav{position:absolute;top:0;right:0;width:44px;height:44px;border:0;background:transparent;cursor:pointer; color:var(--ds-muted,rgba(255,255,255,.3));font-size:16px;line-height:44px;padding:0;-webkit-tap-highlight-color:transparent} .pov-card__fav[data-on]{color:var(--ds-editor-on,#f5872e)} .pov-toast{position:absolute;z-index:9;left:50%;top:calc(64px + env(safe-area-inset-top,0));transform:translateX(-50%); width:max-content;max-width:calc(100% - 32px);padding:8px 14px;border-radius:12px;background:var(--ds-panel,rgba(0,0,0,.78));color:var(--ds-ink,#fff);border:1px solid var(--ds-panel-bd,transparent); box-shadow:var(--ds-shadow-2,0 12px 32px rgba(0,0,0,.28)); font:500 13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center;pointer-events:none} .pov-toast[hidden]{display:none} @media (min-width:768px){ .pov-cat__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (orientation:landscape) and (max-height:560px){ .pov-cat{max-height:58vh} .pov-card{height:54px;grid-template-rows:28px 14px} .pov-card__sample{font-size:18px;line-height:28px} } /* ОТМЕТКИ НА ФОТО В РЕДАКТОРЕ (pub-camera-reels.js). Слой поверх кадра, маркер тянется, у выбранного виден крестик удаления. Токены экрана камеры, своего дизайна нет. */ .reels__tags{position:absolute;inset:0;z-index:30;pointer-events:none} .reels__tag{ position:absolute; transform:translate(-50%,-100%); pointer-events:auto; display:inline-flex; align-items:center; gap:6px; max-width:65%; margin-top:-8px; padding:5px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(10,16,23,.7); color:#fff; font-size:12px; line-height:1.2; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; white-space:nowrap; } .reels__tag.is-sel{background:rgba(232,101,28,.85);border-color:#f5872e} .reels__tag-name{overflow:hidden;text-overflow:ellipsis;pointer-events:none} .reels__tag-x{ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; width:20px;height:20px; border-radius:50%; background:rgba(0,0,0,.45); font-size:11px; line-height:1; } /* Мини-бар выбора человека — внизу сцены, поверх кадра, клавиатуре не мешает. */ .reels__tagbar{ position:absolute; left:12px;right:12px;bottom:12px; z-index:40; display:flex; gap:8px; padding:8px; border-radius:14px; background:rgba(10,16,23,.92); border:1px solid rgba(255,255,255,.14); } .reels__tagbar-input{ flex:1; min-width:0; appearance:none; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#0c121c; color:#fff; font-size:15px; padding:10px 12px; min-height:44px; } .reels__tagbar-ok{ appearance:none; border:0; border-radius:10px; padding:0 16px; min-height:44px; font-size:14px; font-weight:600; background:#e8651c; color:#fff; } .reels__tagbar .pmc{bottom:calc(100% + 8px);top:auto}