/* Кнопка «Пасануть другу» для страниц матча хоккея, тенниса и баскетбола (07.09.2026). Футбольная MatchPage.aspx намеренно НЕ переведена на этот файл: там свои классы .mp-share-* внутри страницы и рабочий прод-контур поверх строки live-грида — переписывать его ради единообразия дороже, чем держать два комплекта. Префикс .sp- (share pass) выбран, чтобы не столкнуться с .share-btn/.share-menu, которые уже живут в гридах HockeyPage/TennisPage со своей разметкой. */ .sp-cta { margin:10px 0 16px; text-align:center; } .sp-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; background:#2e7d32; border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:600; padding:9px 22px; cursor:pointer; font-family:inherit; box-shadow:0 2px 8px rgba(46,125,50,0.30); } .sp-btn:hover { background:#1b5e20; } .sp-btn.sharing { opacity:0.7; cursor:progress; } /* Сцена снаряда. overflow:visible — по клику он улетает за её пределы; поток это не двигает (transform не влияет на раскладку), поэтому ширина не задана. */ .sp-scene { display:inline-flex; line-height:0; overflow:visible; } .sp-scene svg { display:block; overflow:visible; } .sp-ball { display:inline-flex; transition:transform .18s ease; } .sp-btn:hover .sp-ball { transform:translateY(-2px); } /* Первая буква подписи — по ней бьёт снаряд, поэтому у неё свой span. inline-block и origin в основании обязательны: inline-элемент не поворачивается вовсе, а без origin буква заваливалась бы вокруг центра, а не «с ног». */ .sp-first { display:inline-block; transform-origin:50% 100%; } .sp-share { display:inline-flex; line-height:0; opacity:0.9; } .sp-share circle, .sp-share path { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; } /* ── Анимация в покое: снаряд бьёт в первую букву, она заваливается и отпружинивает. Период 7 с — подсказка должна быть редкой, а не мельтешить; сам удар укладывается в первые ~0.45 с, дальше пауза. Движение у каждого спорта своё, потому что снаряды ведут себя по-разному: шайба скользит плашмя (без вращения, с наклоном на разгоне), теннисный мяч отскакивает по дуге, баскетбольный катится как футбольный. ── */ @keyframes spLetHit { 0%,5% { transform:rotate(0); } 8% { transform:rotate(-20deg); } 12.5% { transform:rotate(7deg); } 19%,100% { transform:rotate(0); } } @keyframes spSlide { 0% { transform:translateX(0) skewX(0); } 5.1% { transform:translateX(14px) skewX(-8deg); } 13.7%,100% { transform:translateX(0) skewX(0); } } @keyframes spServe { 0% { transform:translate(0,0) rotate(0); } 3.4% { transform:translate(6px,-13px) rotate(120deg); } 6.9% { transform:translate(13px,0) rotate(240deg); } 13.7%,100% { transform:translate(0,0) rotate(0); } } @keyframes spRoll { 0% { transform:translateX(0) rotate(0); } 6.3% { transform:translateX(13px) rotate(200deg); } 13.7%,100% { transform:translateX(0) rotate(0); } } .sp-btn.idle .sp-first { animation:spLetHit 7s ease-in-out infinite; } .sp-btn.idle.sp-hockey .sp-ball { animation:spSlide 7s ease-in-out infinite; transition:none; } .sp-btn.idle.sp-tennis .sp-ball { animation:spServe 7s ease-in-out infinite; transition:none; } .sp-btn.idle.sp-basketball .sp-ball { animation:spRoll 7s ease-in-out infinite; transition:none; } /* Пас по клику — общий для всех: снаряд уходит вправо поверх подписи и гаснет. Правило идёт ПОСЛЕ .idle: при равной специфичности побеждает последнее. */ @keyframes spPass { 0% { transform:translate(0,0) rotate(0); opacity:1; } 65% { transform:translate(34px,-7px) rotate(500deg); opacity:1; } 100% { transform:translate(58px,0) rotate(760deg); opacity:0; } } .sp-btn.kick .sp-ball { animation:spPass .5s ease-out; transition:none; } @media (prefers-reduced-motion: reduce) { .sp-btn.idle .sp-ball, .sp-btn.idle .sp-first, .sp-btn.kick .sp-ball { animation:none; } } /* Тост и мини-меню — свои, а не общие с гридом: на страницах матча гридовых .share-* нет, а тянуть ради двух правил весь live.css незачем. */ .sp-toast { position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(12px); background:#1565C0; color:#fff; padding:8px 14px; border-radius:18px; font-size:13px; font-weight:600; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 4px 14px rgba(0,0,0,.3); max-width:80vw; text-align:center; } .sp-toast.show { opacity:1; transform:translateX(-50%) translateY(0); } .sp-toast-err { background:#c0392b; } .sp-menu { position:fixed; z-index:10000; background:#fff; border:1px solid #d0d7de; border-radius:10px; box-shadow:0 6px 22px rgba(0,0,0,.22); padding:4px; min-width:172px; display:flex; flex-direction:column; gap:2px; } .sp-menu-item { display:block; width:100%; text-align:left; background:transparent; border:0; padding:9px 12px; font-size:13px; font-weight:600; color:#1b2733; cursor:pointer; border-radius:7px; white-space:nowrap; font-family:inherit; } .sp-menu-item:hover, .sp-menu-item:active { background:#e8f0fe; color:#1565C0; } body.dark-theme .sp-menu { background:#252525; border-color:#3a3a3a; } body.dark-theme .sp-menu-item { color:#ddd; } body.dark-theme .sp-menu-item:hover, body.dark-theme .sp-menu-item:active { background:#2c2c2c; color:#6fa8ff; } /* ── Карточка под съёмку. Все цвета жёсткие и НЕ зависят от темы сайта: картинка уходит в чужие мессенджеры, где тёмная тема ScanGoal ничего не значит. Первая версия снимала клон самой шапки матча — html2canvas ломал её: фон катка (градиенты и псевдоэлементы) пересобирался в мешанину линий, а счёт, спозиционированный absolute от карточки, в клоне не отрисовывался вовсе. Отсюда правило: в этой карточке НЕТ ни absolute, ни градиентов, ни псевдоэлементов — только плоский поток. */ .sp-shot { background:#fff; padding:10px; box-sizing:border-box; } .sp-shot-bar { display:flex; align-items:center; gap:7px; padding:0 2px 8px; } .sp-shot-ico { width:22px; height:22px; border-radius:5px; display:block; } .sp-shot-name { font-size:15px; font-weight:800; color:#1b2733; letter-spacing:0.2px; } .sp-shot-url { margin-left:auto; font-size:12px; font-weight:600; color:#6b7785; } /* Сама карточка на странице скрыта — она существует только чтобы её сняли. */ #spShotCard { display:none; } .sp-shot .sp-shot-card { display:block; width:100%; box-sizing:border-box; background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:14px 12px; } .sp-shot-card .spc-league { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#6b7785; padding-bottom:12px; } .sp-shot-card .spc-date { margin-left:auto; font-weight:600; color:#8a94a0; } .sp-shot-card .spc-row { display:flex; align-items:flex-start; } .sp-shot-card .spc-team { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; } .sp-shot-card .spc-name { font-size:14px; font-weight:700; color:#1b2733; line-height:1.25; } .sp-shot-card .spc-score { flex:0 0 auto; padding:0 10px; font-size:28px; font-weight:800; color:#1b2733; line-height:46px; white-space:nowrap; } /* Логотип принудительно квадратный: у части клубов блоб непропорциональный, и в вертикальном стеке он растягивал бы имя вниз. Селектор по img, а не по классу: у каждого вида спорта свой хелпер и свой класс логотипа (hk-logo, bk-logo, tn-logo). */ .sp-shot-card img { width:46px; height:46px; object-fit:contain; } /* ── Шапка карточки: ряд на команду, три колонки — имя, периоды, счёт. Периоды стоят ровно на уровне своего счёта, но мельче, чтобы не спорить с ним за внимание. Ритм и доминирование ушли строкой ниже (.sp-meta-row): голая пилюля «70» и полоса «65/35» посреди шапки в пересланной картинке ничего не значат — в гриде их объясняет заголовок колонки, здесь объяснять нечему, поэтому у них теперь подписи. Счёт по периодам: правило .hk-pc i живёт в ДЕСКТОПНОМ медиазапросе HockeyPage.aspx, в мобильную карточку не попадает и цифры слипаются в «000» — повторяем его тут, но горизонтально: в узкой карточке столбик занял бы три строки. */ #spShotHolder .teams-block .teams-row-v2 { display:grid; grid-template-columns:1fr auto auto; align-items:center; column-gap:10px; row-gap:3px; } #spShotHolder .teams-row-v2 > .team-link:nth-of-type(1) { grid-column:1; grid-row:1; min-width:0; } #spShotHolder .teams-row-v2 > .team-link:nth-of-type(2) { grid-column:1; grid-row:2; min-width:0; } #spShotHolder .teams-row-v2 .hk-pc-h { grid-column:2; grid-row:1; } #spShotHolder .teams-row-v2 .hk-pc-a { grid-column:2; grid-row:2; } #spShotHolder .teams-block .score-center-v2 { grid-column:3; grid-row:1 / span 2; justify-self:end; min-width:0; padding:0 0 0 2px; } /* Имена крупнее логотипов и периодов: в снимке левая колонка — главный якорь, из-за мелкого шрифта ряд читался как строка таблицы, а не как табло. */ #spShotHolder .teams-block .team-name-h, #spShotHolder .teams-block .team-name-a { font-size:14px !important; font-weight:700; gap:5px; } #spShotHolder .teams-block .team-logo-mini { width:18px; height:18px; } #spShotHolder .hk-pc { display:inline-flex; align-items:center; justify-self:end; } #spShotHolder .hk-pc i { font-style:normal; font-size:11px; font-weight:600; line-height:1.15; color:#8a94a3; font-variant-numeric:tabular-nums; } #spShotHolder .hk-pc i + i::before { content:'-'; color:#c2c8d0; margin:0 1px; } #spShotHolder .hk-pc i.hk-pc-now { color:#ff5252; } /* Статус вместо времени начала и дата в строке лиги: картинка уходит в мессенджер без контекста, а «13:30» у сыгранного матча читалось как «матч ещё не начался». */ #spShotHolder .minute-badge.sp-badge-ft { background:#37474f !important; font-size:8px !important; font-weight:700; letter-spacing:0.6px; padding:2px 6px !important; } #spShotHolder .league-row-v2 .sp-date { margin-left:auto; padding-left:8px; font-size:9px; font-weight:600; color:#9aa3ad; white-space:nowrap; } /* Ритм и доминирование — подписанной строкой под командами. */ #spShotHolder .sp-meta-row { display:flex; align-items:center; gap:11px; margin:8px 0 0; } #spShotHolder .sp-meta { display:flex; align-items:center; gap:5px; min-width:0; } #spShotHolder .sp-dom { flex:1 1 auto; } #spShotHolder .sp-mlbl { font-size:8px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#9aa3ad; white-space:nowrap; } #spShotHolder .sp-dom .dom-wrap { flex:1 1 auto; width:auto; min-width:0; } #spShotHolder .sp-dom .dom-thick-bar { height:14px; } #spShotHolder .sp-dom .dom-seg { font-size:8px; } #spShotHolder .sp-pace .pulse-wrap { height:14px; min-width:30px; width:30px; } #spShotHolder .sp-pace .pulse-lbl { line-height:14px; font-size:9px; } /* Вывод одной фразой — то, ради чего картинку пересылают. */ #spShotHolder .sp-lead { margin:9px 0 1px; font-size:11px; line-height:1.35; color:#39424d; } /* Слот графика моментума в секции «Ход матча» (сам график переезжает туда из строки грида после отрисовки — см. placeMomentum). Пустым слот не занимает высоту: раньше на его месте стоял неотрисованный svg на 52 px, то есть 9% снимка белым хвостом. */ #spShotHolder .sp-mom-slot { margin:0 0 7px; } #spShotHolder .sp-mom-slot:empty { display:none; } /* ── Снимок — самостоятельная картинка, а не вырезанный кусок интерфейса. Жёлтый фон раскрытой строки грида (#fffdf3 + жёлтая полоса слева + янтарные заголовки) внутри сайта говорит «ты развернул строку»; в мессенджере он говорит только «это скриншот». Убираем во всех скинах, цветовые различия — ниже. */ #spShotHolder .sp-shot tr.live-expand-row > td { background:transparent !important; border-left:0 !important; border-bottom:0 !important; padding:9px 0 0 !important; } #spShotHolder .sp-shot .le-sec-h { border-bottom-color:#e9edf2; } #spShotHolder .sp-shot table.live-table { border:0; } #spShotHolder .sp-shot table.live-table tbody tr[data-mid] { border-bottom:0; padding:0; } /* Значения в узких ячейках — по левому краю под своей подписью: центрированные столбики («Тотал П1: 1.5 / 4-10 / 3-10») висели в стороне от заголовка и читались как чужие. !important обязателен: text-align:center у этих div стоит ИНЛАЙНОМ из построителя грида. */ #spShotHolder .sp-shot .le-grid > .le-cell:not(.le-wide) .le-val, #spShotHolder .sp-shot .le-grid > .le-cell:not(.le-wide) .le-val * { text-align:left !important; } /* Стрелка «развернуть» (▾) — элемент управления гридом: в картинке кликать нечего. */ #spShotHolder .sp-shot .teams-block::after { display:none; } /* Полосы статистики шире карточки на 28 px: у .stat-popup padding 10/14 стоит с !important (правило грида), инлайн width:100% его не перебивает, а box-sizing по умолчанию content-box — правые значения («22», «41») уезжали за край и обрезались. */ #spShotHolder .sp-shot .le-wide .stat-popup { padding:0 !important; box-sizing:border-box; } /* Две ровные колонки вместо auto-fit по 78 px: на ширине снимка auto-fit давал четыре слота, а занято всегда два — правая половина секции стояла пустой. */ #spShotHolder .sp-shot .le-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; } /* ── Скин doc: светлая карточка-документ. Одна пара цветов на всю картинку — хозяева синие, гости оранжевые, как в полосах статистики; до этого счёт был синим у обеих команд, доминирование сине-серым, а полосы сине-оранжевыми — три языка сразу. */ #spShotHolder .sp-skin-doc .le-sec-h { color:#8a94a3; } #spShotHolder .sp-skin-doc .score-center-v2 .sc-h { color:#1565C0; } #spShotHolder .sp-skin-doc .score-center-v2 .sc-a { color:#e8730c; } #spShotHolder .sp-skin-doc .score-center-v2 .sc-lead { color:inherit; font-weight:800; } #spShotHolder .sp-skin-doc .sp-dom .dom-home { background:#1565C0; } #spShotHolder .sp-skin-doc .sp-dom .dom-away { background:#f0862a; } #spShotHolder .sp-skin-doc .sp-dom .dom-seg.dom-away { color:#fff; } /* ── Скин board: шапка — тёмное табло, данные ниже на белом. Красить надо СТРОКУ, а не таблицу: раскрытая панель живёт в той же , и фон на таблице заливал всю карточку — тёмный текст секций оказывался на тёмном, а overflow:hidden на ней же срезал правые значения полос статистики. */ #spShotHolder .sp-skin-board table.live-table tbody tr[data-mid] { background:#15263c; padding:10px; border-radius:10px; } #spShotHolder .sp-skin-board .team-name-h, #spShotHolder .sp-skin-board .team-name-a { color:#fff !important; } #spShotHolder .sp-skin-board .league-row-v2, #spShotHolder .sp-skin-board .league-link-v2 { color:#8ea6c4 !important; } #spShotHolder .sp-skin-board .sp-date { color:#8ea6c4; } #spShotHolder .sp-skin-board .hk-pc i { color:#8ea6c4; } #spShotHolder .sp-skin-board .hk-pc i + i::before { color:#4d658a; } #spShotHolder .sp-skin-board .score-center-v2 .sc-h { color:#6fb3ff; } #spShotHolder .sp-skin-board .score-center-v2 .sc-a { color:#ffa94d; } #spShotHolder .sp-skin-board .score-center-v2 .sc-lead { color:inherit; font-weight:800; } #spShotHolder .sp-skin-board .sp-mlbl { color:#7d93af; } #spShotHolder .sp-skin-board .sp-dom .dom-home { background:#2f7fd4; } #spShotHolder .sp-skin-board .sp-dom .dom-away { background:#d97a22; } #spShotHolder .sp-skin-board .sp-dom .dom-seg.dom-away { color:#fff; } #spShotHolder .sp-skin-board .sp-lead { color:#c6d4e3; } #spShotHolder .sp-skin-board .teams-block::after { color:#3f5674; } #spShotHolder .sp-skin-board .le-sec-h { color:#8a94a3; } /* ── Скин tiles: секции — плитки, шапка в рамке. */ #spShotHolder .sp-skin-tiles table.live-table { border:1px solid #e3e8ee; border-radius:10px; } #spShotHolder .sp-skin-tiles table.live-table tbody tr[data-mid] { padding:9px 10px; } #spShotHolder .sp-skin-tiles .le-sec { background:#f7f9fc; border:1px solid #ebeff4; border-radius:10px; padding:8px 10px; margin-bottom:7px; } #spShotHolder .sp-skin-tiles .le-sec-h { color:#7d8795; border-bottom:0; margin-bottom:4px; padding-bottom:0; } #spShotHolder .sp-skin-tiles .score-center-v2 .sc-h { color:#1565C0; } #spShotHolder .sp-skin-tiles .score-center-v2 .sc-a { color:#e8730c; } #spShotHolder .sp-skin-tiles .score-center-v2 .sc-lead { color:inherit; font-weight:800; } #spShotHolder .sp-skin-tiles .sp-dom .dom-home { background:#1565C0; } #spShotHolder .sp-skin-tiles .sp-dom .dom-away { background:#f0862a; } #spShotHolder .sp-skin-tiles .sp-dom .dom-seg.dom-away { color:#fff; } /* Геймы по сетам — только у тенниса: одного числа там не бывает, сеты сверху, геймы снизу. */ .sp-shot-card .spc-sets { margin-top:11px; padding-top:9px; border-top:1px solid #eef1f5; text-align:center; font-size:13px; font-weight:700; color:#4a5560; letter-spacing:0.4px; white-space:nowrap; } /* На мобиле кнопка во всю ширину: тап-таргет и заметность важнее компактности — ровно та же правка, что оправдала себя на футбольной странице 08.08.2026. */ @media (max-width:600px) { .sp-cta { margin:8px 0 12px; } .sp-btn { width:100%; padding:12px; font-size:15px; border-radius:12px; } }