.pdf-catalog-wrap {
margin: 20px 0;
}
.pdf-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.pdf-catalog-grid .pdf-catalog-tile {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
border: 1px solid #ddd;
background: #f5f5f5;
overflow: hidden;
line-height: 0;
cursor: pointer;
}
.pdf-catalog-tile--pending {
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: pdf-catalog-shimmer 1.2s infinite;
pointer-events: none;
}
@keyframes pdf-catalog-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.pdf-catalog-grid img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
body.pdf-catalog-modal-open {
overflow: hidden;
}
.pdf-catalog-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.92);
cursor: pointer;
}
.pdf-catalog-modal.is-open {
display: grid;
grid-template-columns: 56px 1fr 56px;
align-items: center;
height: 100%;
width: 100%;
animation: pdf-catalog-fade-in 0.2s ease;
}
@keyframes pdf-catalog-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.pdf-catalog-modal__stage {
grid-column: 2;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
min-width: 0;
cursor: default;
overflow: hidden;
}
.pdf-catalog-modal__stage.is-zoomed {
overflow: auto;
-webkit-overflow-scrolling: touch;
align-items: flex-start;
}
.pdf-catalog-modal__frame {
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease;
max-width: 100%;
max-height: calc(100vh - 40px);
}
.pdf-catalog-modal__frame.is-visible {
opacity: 1;
transform: translateX(0);
}
.pdf-catalog-modal__frame.is-slide-out-left {
opacity: 0;
transform: translateX(-50px);
}
.pdf-catalog-modal__frame.is-slide-out-right {
opacity: 0;
transform: translateX(50px);
}
.pdf-catalog-modal__frame.is-slide-from-left {
opacity: 0;
transform: translateX(-50px);
}
.pdf-catalog-modal__frame.is-slide-from-right {
opacity: 0;
transform: translateX(50px);
}
.pdf-catalog-modal__zoom {
transform-origin: center center;
transition: transform 0.15s ease;
}
.pdf-catalog-modal__img {
display: block;
max-width: 100%;
max-height: calc(100vh - 40px);
width: auto;
height: auto;
object-fit: contain;
cursor: default;
user-select: none;
-webkit-user-drag: none;
}
.pdf-catalog-modal__loader {
display: none;
position: absolute;
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: pdf-catalog-spin 0.7s linear infinite;
z-index: 1;
}
.pdf-catalog-modal__loader.is-active {
display: block;
}
@keyframes pdf-catalog-spin {
to { transform: rotate(360deg); }
}
.pdf-catalog-modal__close,
.pdf-catalog-modal__prev,
.pdf-catalog-modal__next {
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
line-height: 1;
padding: 10px;
z-index: 100002;
}
.pdf-catalog-modal__close {
position: fixed;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
background: rgba(0, 0, 0, 0.55);
border-radius: 50%;
pointer-events: auto;
}
.admin-bar .pdf-catalog-modal__close {
top: 46px;
}
.pdf-catalog-modal__prev {
grid-column: 1;
justify-self: center;
font-size: 48px;
pointer-events: auto;
}
.pdf-catalog-modal__next {
grid-column: 3;
justify-self: center;
font-size: 48px;
pointer-events: auto;
}
.pdf-catalog-modal__hint {
display: none;
}
.pdf-catalog-modal__close:hover,
.pdf-catalog-modal__prev:hover,
.pdf-catalog-modal__next:hover {
opacity: 0.75;
}
@media (max-width: 767px) {
.pdf-catalog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.pdf-catalog-modal.is-open {
grid-template-columns: 1fr;
}
.pdf-catalog-modal__stage {
grid-column: 1;
width: 100%;
max-height: 100dvh;
}
.pdf-catalog-modal__frame {
width: 100%;
max-height: none;
}
.pdf-catalog-modal__img {
width: 100%;
max-width: 100vw;
max-height: none;
height: auto;
}
.pdf-catalog-modal__prev,
.pdf-catalog-modal__next {
position: fixed;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
background: rgba(0, 0, 0, 0.35);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.pdf-catalog-modal__prev {
left: 6px;
grid-column: auto;
}
.pdf-catalog-modal__next {
right: 6px;
grid-column: auto;
}
.pdf-catalog-modal__hint {
display: block;
position: fixed;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
pointer-events: none;
z-index: 100002;
}
}