html.luchi-catalog-open {
overflow: hidden;
}
.catalog-viewer {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--color-on-dark);
}
.catalog-viewer::backdrop {
background: var(--overlay-viewer);
} .catalog-viewer__bar {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 64px;
padding: 0 calc(var(--container-padding) - 12px);
}
.catalog-viewer__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-width: 48px;
height: 48px;
padding: 0 12px;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--color-on-dark);
font: inherit;
text-decoration: none;
cursor: pointer;
transition: opacity var(--duration-fast) var(--ease-out);
}
.catalog-viewer__button:focus-visible {
outline-color: var(--color-on-dark);
}
.catalog-viewer__button:disabled {
opacity: 0.3;
cursor: default;
} .catalog-viewer__icon {
flex: none;
width: 26px;
height: 26px;
}
.catalog-viewer__icon * {
vector-effect: non-scaling-stroke;
stroke-width: 1.5px;
} .catalog-viewer__zoom .catalog-viewer__icon * {
stroke-width: 1px;
shape-rendering: crispEdges;
} .catalog-viewer__bar .catalog-viewer__icon {
transition: transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
.catalog-viewer__bar .catalog-viewer__button:not(:disabled):hover .catalog-viewer__icon {
transform: scale(1.15);
}
.catalog-viewer__bar .catalog-viewer__prev:not(:disabled):hover .catalog-viewer__icon {
transform: rotate(180deg) scale(1.15);
}
}
.catalog-viewer__download {
justify-self: start;
}
.catalog-viewer__nav {
display: flex;
align-items: center;
}
.catalog-viewer__prev .catalog-viewer__icon {
transform: rotate(180deg);
}
.catalog-viewer__close {
justify-self: end;
}
@media (min-width: 768px) {
.catalog-viewer__bar {
height: 80px;
}
.catalog-viewer__button {
min-width: 56px;
height: 56px;
}
.catalog-viewer__icon {
width: 32px;
height: 32px;
}
} .catalog-viewer__pager {
display: flex;
justify-content: center;
min-width: 10ch;
}
.catalog-viewer__counter {
min-height: 48px;
padding: 0 var(--space-xs);
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--color-on-dark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: text;
} .catalog-viewer__counter-text {
position: relative;
display: inline-block;
padding-bottom: 6px;
}
.catalog-viewer__counter-text::after {
content: '';
position: absolute;
left: 0;
right: var(--tracking-label); bottom: 0;
height: var(--border-width);
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-base) var(--ease-out);
}
.catalog-viewer__counter:not(:disabled):hover .catalog-viewer__counter-text::after,
.catalog-viewer__counter:focus-visible .catalog-viewer__counter-text::after {
transform: scaleX(1);
}
.catalog-viewer__counter:focus-visible {
outline-color: var(--color-on-dark);
}
.catalog-viewer__goto {
display: flex;
align-items: center;
gap: var(--space-xs);
min-height: 48px;
}
.catalog-viewer__goto[hidden] {
display: none;
}
.catalog-viewer__input {
width: 5ch;
padding: 4px 0;
border: 0;
border-bottom: var(--border-width) solid var(--color-on-dark);
border-radius: var(--radius);
background: transparent;
color: var(--color-on-dark);
font-variant-numeric: tabular-nums;
text-align: center;
}
.catalog-viewer__input:focus-visible {
outline: none;
border-bottom-width: 2px;
}
.catalog-viewer__total {
color: var(--color-on-dark);
white-space: nowrap;
} .catalog-viewer__stage {
position: absolute;
inset: 64px 0 0;
display: flex;
overflow: auto;
overscroll-behavior: contain;
touch-action: pan-x pan-y;
scrollbar-color: var(--color-steel) transparent;
}
.catalog-viewer__stage.is-zoomed {
cursor: grab;
}
.catalog-viewer__stage.is-dragging {
cursor: grabbing;
user-select: none;
}
.catalog-viewer__spread {
display: flex;
flex: none;
margin: auto;
padding: var(--space-s) var(--space-s) var(--space-l);
transform-origin: 0 0;
} .catalog-viewer__page {
position: relative;
flex: none;
background: var(--color-white);
}
.catalog-viewer__page canvas {
display: block;
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
.catalog-viewer__stage {
inset: 80px 0 0;
}
.catalog-viewer__spread {
padding: var(--space-m) var(--space-xl) var(--space-l);
}
} .catalog-viewer__status {
position: absolute;
top: 50%;
right: var(--container-padding);
left: var(--container-padding);
z-index: 1;
margin: 0;
transform: translateY(-50%);
text-align: center;
pointer-events: none;
}
.catalog-viewer__status:empty {
display: none;
}
.catalog-viewer__status p {
margin: 0 0 var(--space-s);
}
.catalog-viewer__status a {
color: var(--color-on-dark);
pointer-events: auto;
} .catalog-viewer__zoom {
position: absolute;
right: calc(var(--container-padding) - 12px);
bottom: var(--space-s);
z-index: 2;
display: flex;
flex-direction: column;
background: transparent;
transition: background-color var(--duration-fast) var(--ease-out);
}
.catalog-viewer__zoom.is-over-page {
background: var(--overlay-strong);
}