/* Просмотрщик фотографий объекта ============================================================ Оверлей поверх страницы: кадр во весь экран, стрелки, счётчик. Разметку собирает pdd-school.js (buildViewer) при первом открытии — до него в документе ничего нет. Почему отдельный файл, а не блок в school.css: school.css описывает карточку в потоке страницы, а это модалка, у которой с карточкой общего только список кадров. Заодно откат — одна строка в $styles (functions.php) и одно удаление файла. Свой оверлей, а не slick плагина thumbnail_gallery: у плагина своя вёрстка и свой CSS с !important, подчинить его эталону дороже, чем нарисовать четыре узла. Ровно та же причина, по которой полосу кадров на телефоне рисует тема, а не плагин (school.css, блок 3). ============================================================ */ /* Страница под оверлеем не прокручивается. Класс на , а не на : на iOS фиксация body уводит страницу в начало, и после закрытия просмотрщика человек оказывается в шапке, а не там, где нажал на кадр. */ html.pdd-viewer-open, html.pdd-viewer-open body { overflow: hidden; } .pdd-viewer { /* Ниже — только собственные значения: оверлей лежит в , вне .pdd-card, и токены карточки сюда не наследуются. */ position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 56px 16px; background: rgba(11, 11, 15, 0.92); /* Тап по фону закрывает — курсор об этом говорит */ cursor: zoom-out; } .pdd-viewer.is-open { display: flex; } .pdd-viewer__photo { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: default; /* Кадры Яндекса приходят разного размера, и без фона под загрузкой на месте вертикального снимка видна дыра. */ background: rgba(255, 255, 255, 0.06); } .pdd-viewer__nav, .pdd-viewer__close { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #0b0b0f; background: rgba(255, 255, 255, 0.92); border: none; border-radius: 50%; cursor: pointer; transition: background 0.15s ease-out, transform 0.15s ease-out; } .pdd-viewer__nav:hover, .pdd-viewer__close:hover { background: #fff; transform: scale(1.06); } .pdd-viewer__nav svg, .pdd-viewer__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pdd-viewer__nav--prev { left: 16px; } .pdd-viewer__nav--next { right: 16px; } .pdd-viewer__close { top: 16px; right: 16px; } .pdd-viewer__counter { position: absolute; bottom: 16px; left: 50%; margin: 0; padding: 6px 12px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: #fff; background: rgba(11, 11, 15, 0.6); border-radius: 999px; } /* Кадр — кликабелен, и это должно быть видно до клика. Курсор ставится на клетки коллажа и на рамку, но не на всю галерею: в ней же лежат кнопка «назад» и кружок избранного. */ body.pdd .pdd-gallery__frame, body.pdd .pdd-gallery__cell, body.pdd .pdd-gallery__slide { cursor: zoom-in; } /* Телефон: стрелки не нужны — там листают пальцем, и две кнопки по краям накрывают половину узкого кадра. Закрытие и счётчик остаются. */ @media (max-width: 767px) { .pdd-viewer { padding: 56px 0; } .pdd-viewer__nav { display: none; } .pdd-viewer__photo { border-radius: 0; } }