/* comp-media.css — медиа в ленте, полноэкранный просмотр, мини-меню вложений, вставка из буфера. Часть css/components.css: файл был 107 КБ, и патч, несущий его целиком, вёз всё ради одного правила. Подключается из $cssParts в index.php — сразу за самим components.css и ДО надстроек-стилей (addons.css, rxmenu.css, convprev.css, scrollcalm.css), которые базу перекрывают. Рез только ХВОСТОВОЙ, и это не вкусовщина: части грузятся ПОСЛЕ components.css, поэтому вырезать секцию из середины значило бы опустить её ниже по каскаду — при равной силе селектора она начала бы выигрывать у того, что раньше выигрывало у неё. Здесь части идут строго теми же строками и в том же порядке, что в исходнике, поэтому итоговый каскад совпадает побайтово. Строки 426-541. */ /* ================= МЕДИА (фото/видео/кружки/голосовые/файлы) ================= */ /* Кадр фото/видео/кружка */ .media-frame{position:relative;width:min(280px,100%);max-width:280px;min-width:140px;border-radius:16px;overflow:hidden;background:#0c0d10;line-height:0} /* Потолок высоты кадра. Раньше его не было вовсе: кадр брал ширину (280 в ленте, 323 на десктопе) и считал высоту из пропорций сообщения. Для фотографии с телефона это ещё сходило (3:4 при 280 даёт 373), а вертикальное ВИДЕО — обычно снятый экран, 9:20 и уже — вырастало до 620px и занимало ленту целиком: пролистать один пузырь стоило двух движений. Считаем не «сколько отрезать», а «какой ширины кадр вписывается в потолок»: --media-ar (ширина делить на высоту, ставит js рядом с aspect-ratio) умноженная на потолок и даёт предельную ширину. Кадр остаётся ЦЕЛЫМ — ни обрезки, ни чёрных полей: он просто уже. Для 9:20 это 198×440 вместо 280×622. Ограничение через max-width, а не height, нарочно: базовую ширину задаёт каждый свой файл (280 здесь, 323 в tgsize.css для десктопа), и width:min(...) сам возьмёт меньшее из двух — потолок вмешивается только там, где кадр реально высокий, и не спорит с раскладкой. Потолок 440px выбран так, чтобы НЕ переделывать то, что и раньше выглядело нормально: обычный портрет 3:4 в него укладывается целиком на обеих раскладках (280×373 и 323×431), и потолок вмешивается только начиная с 2:3 и уже — там, где кадр и правда съедал пол-ленты. 99 в var() — «пропорции неизвестны» (кадр без размеров, пока грузится превью): 440×99 больше любого экрана, то есть потолок молчит, пока не станет что ограничивать. Только ОДИНОЧНЫЙ кадр (.mcontent > .media-frame): у клеток коллажа своя геометрия (квадрат, width:100%), и потолок сломал бы сетку. Кружок исключён по той же причине — у него свой размер и aspect-ratio 1/1. */ #messages .mcontent > .media-frame:not(.round){max-width:calc(var(--media-maxh, 440px) * var(--media-ar, 99))} /* На телефоне «огромный кадр» — это не столько пиксели, сколько ДОЛЯ экрана: 440px на телефоне с 800px полотна — больше половины ленты, и пузырь всё равно читается как экран, хотя на десктопе те же 440 выглядят нормально. Поэтому там потолок меряется экраном: 42% его высоты. Кадр занимает предсказуемую часть ленты на любом телефоне, а не на том, по которому подбирали число. Единицы парой, как у полноэкранного листа настроек в layout.css: сначала vh для движков без svh, затем svh — он считается по полотну с РАЗВЁРНУТЫМИ панелями браузера и, в отличие от dvh, не меняется, когда панели прячутся при листании; кадру, у которого от этого числа зависит ширина, менять размеры на ходу нельзя. Порог по pointer:coarse, а не по ширине окна: правило проекта — телефон в режиме «версия для ПК» о ширине врёт, а про палец отвечает честно. */ @media (pointer:coarse){ #messages .mcontent > .media-frame:not(.round){--media-maxh:min(440px, 42vh)} #messages .mcontent > .media-frame:not(.round){--media-maxh:min(440px, 42svh)} } .media-frame:not([style*="aspect-ratio"]){min-height:150px} .mmine .media-frame{border-bottom-right-radius:6px} .mthem .media-frame{border-bottom-left-radius:6px} /* Рамка кадра в цвет пузыря отправителя (задумка #195): свои — цветом исходящего пузыря, чужие — цветом входящего. Кадр в ленте лежит без пузыря вовсе, и на пёстрых обоях у него не было границы — фотография просто начиналась. Рамка её и рисует, и заодно связывает кадр с подписью: у подписи (#151) фон ровно этот же цвет, поэтому шов между ними не читается — блок выглядит одним куском. Своим рамку красит --accent, а НЕ --bubble-out, и это не небрежность: --bubble-out — это linear-gradient (tokens.css), а градиент цветом границы быть не может. `border:2px solid var(--bubble-out)` — объявление недопустимое целиком, браузер молча выбрасывает его, и рамки нет вовсе. Проверено на живом клиенте. Градиент пузыря и так идёт ОТ подмешанного белым акцента К самому акценту, то есть --accent — его же цвет, только без перехода; у тёмной темы ниже своя строка, потому что там пузырь темнее акцента. Коллажу это не мешает: там цвет уезжает в background (comp-bots.css), а фон градиент принимает. Только у ОДИНОЧНОГО кадра — `.mcontent > .media-frame`: у клеток коллажа своя рамка была бы двойной (у коллажа она общая, см. .album-grid в comp-bots.css), а они лежат внутри .album-cell и под этот селектор не попадают. Кружок (.round) намеренно не трогаем: он не «картинка в рамке», а свой силуэт, и цветное кольцо превратило бы его в аватарку. Про геометрию. box-sizing:border-box стоит на всём (tokens.css), поэтому рамка съедает 2px внутрь, а не раздувает кадр: ширина 280px, соотношение сторон и место в ряду остаются прежними. clip-path из addons.css (#150) считается по border-box — рамка попадает под ту же скруглённую обрезку, что и сам кадр, ничего дорисовывать там не нужно. */ .mmine .mcontent > .media-frame:not(.round){border:2px solid var(--accent)} .mthem .mcontent > .media-frame:not(.round){border:2px solid var(--bubble-in)} body.dark .mmine .mcontent > .media-frame:not(.round){border-color:color-mix(in oklch, var(--accent), black 19%)} .media-frame.round{width:200px;max-width:60vw;height:200px;min-width:0;min-height:0;border-radius:50%!important;aspect-ratio:1/1!important} .media-blur{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(14px);transform:scale(1.15);transition:opacity .25s;z-index:1} .media-blur.dark{background:linear-gradient(135deg,#22262c,#14171b)} .media-img,.media-vid{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s} .media-frame.round .media-img,.media-frame.round .media-vid{border-radius:50%} .media-frame.clickable{cursor:pointer} .media-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none} .media-overlay>*{pointer-events:auto} /* Три подписи поверх кадра: длительность, размер и время отправки. Геометрия у них ОБЩАЯ и живёт одним правилом — порознь они разъезжаются, что и случилось: .media-frame задаёт line-height:0 (он нужен, чтобы под