/* ===== theme_v02 — оформление экрана просмотра записи ===== Подключается ПОСЛЕ styles.css и переопределяет только экран #view-player. Всё заскоплено на body.theme-v02 — чтобы откатиться, достаточно снять класс у в index.html (или убрать на этот файл): styles.css один отрисует прежний вид. Полный снимок прежнего оформления — в theme-v01.css. Сделано по согласованному макету планшета 1280×800: тёмная плоская панель вместо «стеклянной» карточки, видео слева, колонка «участники + маркеры» справа, тонкая таймлиния с засечками и круглый транспорт снизу. */ body.theme-v02 { /* палитра макета — держим отдельными переменными, чтобы правки цвета не разъезжались по десятку правил. Оттенки взяты у общей темы (см. блоки :root[data-theme] в styles.css): экран плеера должен переключаться вместе со всем остальным, а не остаться зелёным островом. Свои значения тут только там, где макет сознательно отходит от общего вида — глухая плоская панель вместо стеклянной карточки. */ --v2-panel:var(--player-panel); /* фон панели плеера */ --v2-line:rgb(var(--lift) / .08); --v2-line-soft:rgb(var(--lift) / .05); --v2-txt:var(--player-txt); --v2-mut:var(--player-mut); --v2-accent:var(--player-acc); --v2-chip:rgb(var(--lift) / .08); --v2-chip-hi:rgb(var(--lift) / .16); } /* ---------- панель целиком ---------- */ body.theme-v02 #view-player .player-wrap{ background:var(--v2-panel); border:1px solid var(--v2-line); border-radius:12px; box-shadow:none; /* «стекло» из v01 убираем: на слабом планшете backdrop-filter на панели во весь экран стоит заметных кадров, а поверх видео он всё равно не читается */ backdrop-filter:none;-webkit-backdrop-filter:none; color:var(--v2-txt); } /* шапка панели: слева состав и счёт, справа — дата/клуб/стол. Профиль игрока живёт в общей шапке приложения справа сверху (#profilePill). */ body.theme-v02 #view-player .screen-h{ font-size:14px;font-weight:600;margin:0;padding:10px 16px; border-bottom:1px solid var(--v2-line);line-height:1.25; } body.theme-v02 #view-player .screen-h .v2-sub{ display:block;font-size:11px;font-weight:400;color:var(--v2-mut);margin-top:2px; } /* ---------- видео ---------- */ body.theme-v02 #view-player .player-video-box{background:#050807} body.theme-v02 #playerVideo{background:#050807} /* ---------- таймлиния ---------- */ /* высота 6px и засечки 3×12 — как в макете; общий .timeline из styles.css даёт 34px, поэтому переопределяем именно составной селектор */ body.theme-v02 #playerScrub .timeline.live-timeline{ height:6px;border-radius:3px;background:rgb(var(--lift) / .14); } body.theme-v02 #playerScrub .timeline.live-timeline::before{display:none} body.theme-v02 #playerScrub .live-scrub-fill{background:var(--v2-accent);border-radius:3px} body.theme-v02 #playerScrub .live-marks{inset:-3px 0} body.theme-v02 #playerScrub .tl-mark{ width:3px;height:12px;top:0;border-radius:2px;transform:translateX(-1.5px); } body.theme-v02 #playerScrub .live-scrub-row{justify-content:flex-start;margin-top:6px} body.theme-v02 #playerScrub .live-scrub-time{color:var(--v2-mut)} /* ---------- транспорт ---------- */ body.theme-v02 .player-scrub-row{ justify-content:flex-start;align-items:center;gap:12px;flex-wrap:nowrap; } /* «Играть» — круглая кнопка, как в макете; текст прячем, оставляем значок. overflow:hidden — страховка: подпись кнопки («▶ Играть») гасится нулевым кеглем, но на телефоне этого мало. iOS умеет поднимать кегль сам (минимальный размер шрифта в настройках, text-size-adjust), и тогда подпись снова получает ширину. */ body.theme-v02 #playerPlayToggle{ position:relative;overflow:hidden; width:40px;height:40px;padding:0;border-radius:50%; background:var(--v2-chip-hi);border:none;flex:none; font-size:0;color:transparent; display:inline-flex;align-items:center;justify-content:center; } /* Треугольник рисуем границами, а не глифом «▶»: у глифа своя метрика внутри строки, из-за неё он вставал левее центра кнопки, и подгонка margin'ом разъезжалась от шрифта к шрифту. position:absolute, а НЕ флекс-центрирование: рядом с псевдоэлементом в кнопке лежит текстовый узел подписи, и justify-content центрирует их пару. Стоит подписи получить хоть какую-то ширину (см. выше про iOS) — значок уезжает влево ровно на её половину; на десктопе этого не видно, на телефоне видно. Абсолютный значок вынесен из потока и центрируется по самой кнопке, что бы ни лежало рядом. Сдвиг на четверть ширины — оптический центр треугольника не совпадает с геометрическим. */ body.theme-v02 #playerPlayToggle::before{ content:"";position:absolute;top:50%;left:50%; width:0;height:0; border-style:solid;border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--v2-txt); transform:translate(-50%,-50%) translateX(2px); } /* пауза — две полосы тем же приёмом, без глифа */ body.theme-v02 #playerPlayToggle.is-playing::before{ width:11px;height:14px;border:none;background:none; transform:translate(-50%,-50%); border-left:4px solid var(--v2-txt);border-right:4px solid var(--v2-txt); box-sizing:border-box; } /* остальные — «пилюли». Регулятор длины хвоста тут же: он не кнопка, но в ряду должен читаться такой же плашкой, а не отдельной рамкой поверх пульта */ body.theme-v02 #playerSpeedBtn, body.theme-v02 #playerViewToggle, body.theme-v02 #playerFullscreenBtn, body.theme-v02 #playerTrajBtn, body.theme-v02 #playerSpeedToggle, body.theme-v02 #playerTrajLenWrap{ height:34px;padding:0 12px;border-radius:12px;border:none; background:var(--v2-chip);color:var(--v2-txt);font-size:12px;flex:none; display:inline-flex;align-items:center;gap:6px; } /* включённое состояние — на плашке, а не на обводке (её больше нет) */ body.theme-v02 #playerTrajBtn.is-on, body.theme-v02 #playerSpeedToggle.is-on{background:rgba(20,119,63,.45);color:var(--ok-t)} body.theme-v02 #playerTrajLenWrap{gap:10px;flex:0 1 auto;min-width:0} /* время — прижато вправо, как в макете */ body.theme-v02 .player-scrub-row .v2-time{ margin-left:auto;font-size:12px;color:var(--v2-mut);font-variant-numeric:tabular-nums; } /* «Экран» на всю ширину не нужен — иконка + подпись помещаются */ body.theme-v02 #playerFullscreenBtn{margin-left:0} /* ---------- правая колонка ---------- */ body.theme-v02 .player-aside{border-left:1px solid var(--v2-line)} body.theme-v02 .v2-aside-label{ font-size:11px;color:var(--v2-mut);padding:12px 14px 6px;flex-shrink:0; } /* участники: кружок с инициалами + имя */ body.theme-v02 #playerRoster{ padding:0 14px 12px;border-bottom:1px solid var(--v2-line-soft);flex-shrink:0; } body.theme-v02 .v2-player-row{display:inline-flex;align-items:center;gap:8px} /* «кто против кого» одной строкой: порядок сторон совпадает с порядком цифр в счёте у маркеров (см. renderPlayerRoster) */ body.theme-v02 .v2-vs{display:flex;align-items:center;flex-wrap:wrap;gap:6px} /* в колонке всего три сотни пикселей: чтобы «кто против кого» уместилось одной строкой, кружки и подписи здесь мельче, чем были в столбике */ body.theme-v02 .v2-vs .v2-avatar{width:20px;height:20px;font-size:9px} body.theme-v02 .v2-vs .v2-player-row{gap:5px} body.theme-v02 .v2-vs .v2-player-name{font-size:12px} body.theme-v02 .v2-vs-dash{color:var(--v2-mut);flex:none} body.theme-v02 .v2-vs-plus{color:var(--v2-mut);font-size:12px;flex:none} body.theme-v02 .v2-avatar{ width:26px;height:26px;border-radius:50%;flex:none; display:inline-flex;align-items:center;justify-content:center;font-size:11px; background:rgb(var(--lift) / .12);color:var(--v2-txt); } /* своя команда/слот 1 — акцентным цветом, как в макете */ body.theme-v02 .v2-avatar.is-owner{background:var(--v2-accent);color:#04342c} body.theme-v02 .v2-player-name{font-size:13px} body.theme-v02 .v2-player-row.is-empty .v2-player-name{opacity:.75} /* маркеры: строка «значок + название … счёт … время» */ body.theme-v02 .marker-list{border-top:none;padding:0 14px} body.theme-v02 .marker-row{ padding:7px 0;gap:8px;font-size:12px; border-bottom:1px solid var(--v2-line-soft); } body.theme-v02 .marker-row .dot{width:9px;height:9px;border-radius:2px} body.theme-v02 .marker-row-label{font-size:12px} body.theme-v02 .marker-row-score, body.theme-v02 .marker-row-time{color:var(--v2-mut);font-size:12px} /* легенда — компактнее и в подвале колонки */ body.theme-v02 #markerLegend.legend{ margin:10px 14px;gap:10px 14px;font-size:11px;color:var(--v2-mut); border-top:1px solid var(--v2-line-soft);padding-top:10px; } /* скачивание — те же «пилюли», что и транспорт, чтобы кнопки не выбивались */ body.theme-v02 .player-actions{margin:0 14px 14px;gap:8px;flex-wrap:wrap} body.theme-v02 .player-actions .btn{ flex:1 1 100%;min-height:34px;padding:8px 12px;border-radius:12px; background:var(--v2-chip);border:none;color:var(--v2-txt);font-size:12px;font-weight:500; } body.theme-v02 .player-actions .btn:active{filter:brightness(1.25)} @media (hover:hover){ body.theme-v02 .player-actions .btn:hover{background:var(--v2-chip-hi)} body.theme-v02 #playerSpeedBtn:hover, body.theme-v02 #playerViewToggle:hover, body.theme-v02 #playerFullscreenBtn:hover{background:var(--v2-chip-hi)} } /* ---------- планшет в ландшафте: пропорции макета ---------- */ @media (min-width:900px) and (orientation:landscape){ /* в макете колонка занимает 31% и не шире 300px */ body.theme-v02 #view-player .player-wrap{ grid-template-columns:minmax(0,1fr) clamp(260px,31%,300px); } /* границы между зонами в v01 были справа у видео/таймлинии; в макете одна общая линия слева у колонки — её и оставляем, лишние убираем */ body.theme-v02 #view-player .player-video-box, body.theme-v02 #playerScrub, body.theme-v02 .player-scrub-row{border-right:none} body.theme-v02 #playerScrub{padding:10px 16px 0} body.theme-v02 .player-scrub-row{ margin:8px 16px 14px;border-top:1px solid var(--v2-line);padding-top:10px; } body.theme-v02 .player-aside{overflow-y:auto} } /* мета-строка (тип/клуб/стол/длительность) — компактнее, чем в v01: в макете это мелкая подпись под составом, а не абзац в полтора интерлиньяжа */ body.theme-v02 #view-player .player-meta{ padding:10px 14px 0;font-size:11px;line-height:1.5;color:var(--v2-mut); } /* На узком экране четыре кнопки + время в одну строку не помещаются, и время ломается на две («00:00 /» и «00:00»). Разрешаем перенос: время уходит на свою строку целиком и остаётся прижатым вправо. */ @media (max-width:520px){ body.theme-v02 .player-scrub-row{flex-wrap:wrap;gap:8px} body.theme-v02 .player-scrub-row .v2-time{white-space:nowrap} } /* фото участника вместо кружка с инициалами (см. renderPlayerRoster) */ body.theme-v02 .v2-avatar-img{object-fit:cover;background:rgb(var(--lift) / .12)}