.eje-visor { --eje-canvas: var(--vulcano-color-canvas, var(--wp--preset--color--canvas));
--eje-surface: var(--vulcano-color-surface, var(--wp--preset--color--surface));
--eje-text: var(--vulcano-color-text, var(--wp--preset--color--text));
--eje-text-soft: var(--vulcano-color-text-soft, var(--wp--preset--color--text-soft));
--eje-accent: var(--vulcano-color-accent, var(--wp--preset--color--accent));
--eje-inverse: var(--vulcano-color-inverse, var(--wp--preset--color--inverse));
--eje-border: var(--vulcano-color-border, var(--wp--preset--color--border)); --eje-sp-2xs: var(--vulcano-space-2xs, 0.25rem);
--eje-sp-xs: var(--vulcano-space-xs, 0.5rem);
--eje-sp-s: var(--vulcano-space-s, 0.75rem);
--eje-sp-m: var(--vulcano-space-m, 1rem);
--eje-sp-l: var(--vulcano-space-l, 1.5rem);
--eje-r-md: var(--vulcano-radius-md, 0.375rem);
--eje-r-lg: var(--vulcano-radius-lg, 0.75rem);
position: fixed;
inset: 0; z-index: 100000;
display: flex;
} .eje-visor[hidden] {
display: none;
} .eje-visor__backdrop {
position: absolute;
inset: 0;
background: var(--eje-text);
background: color-mix(in srgb, var(--eje-text) 90%, transparent);
}
.eje-visor__dialog {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--eje-sp-s);
width: 100%;
height: 100%;
padding: var(--eje-sp-m);
box-sizing: border-box;
} .eje-visor__dialog {
pointer-events: none;
}
.eje-visor__dialog > * {
pointer-events: auto;
} .eje-visor__dialog:focus:not(:focus-visible) {
outline: none;
}
.eje-visor__figure { position: relative;
margin: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--eje-sp-xs);
max-width: 100%;
max-height: 100%;
} .eje-visor__img:not([src]) {
display: none;
}
.eje-visor__img:not([src]) ~ .eje-visor__credit {
visibility: hidden;
}
.eje-visor__img {
display: block;
max-width: 100%; max-height: calc(100vh - 11rem);
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--eje-r-md);
} .eje-visor__credit,
.eje-visor__counter,
.eje-visor__status {
margin: 0;
background: var(--eje-text);
color: var(--eje-inverse);
padding: var(--eje-sp-2xs) var(--eje-sp-xs);
border-radius: var(--eje-r-md);
font-size: var(--wp--preset--font-size--xs, 0.875rem);
max-width: 100%;
box-sizing: border-box;
}
.eje-visor__credit {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eje-visor__counter {
font-weight: 600;
text-align: center;
} .eje-visor__status {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); width: max-content;
font-weight: 600;
text-align: center;
}
.eje-visor__status:empty {
display: none;
}
.eje-visor__bar {
display: flex;
align-items: center;
justify-content: center;
gap: var(--eje-sp-s);
flex-wrap: wrap;
} .eje-visor .eje-visor__ctrl {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: var(--eje-sp-xs);
margin: 0;
border: 0;
border-radius: var(--eje-r-md);
background: var(--eje-text);
color: var(--eje-inverse);
cursor: pointer;
} .eje-visor .eje-visor__ctrl[hidden] {
display: none;
}
.eje-visor__icon {
display: block;
pointer-events: none;
} .eje-visor__ctrl-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .eje-visor__ctrl:focus-visible,
.eje-visor__dialog:focus-visible {
outline: 3px solid var(--eje-inverse);
outline-offset: 0;
box-shadow: 0 0 0 6px var(--eje-text);
} .eje-ficha-block .eje-visor__ctrl:focus-visible,
.eje-resena-block .eje-visor__ctrl:focus-visible {
outline: 3px solid var(--eje-inverse);
outline-offset: 0;
box-shadow: 0 0 0 6px var(--eje-text);
} @media (min-width: 40rem) {
.eje-visor__ctrl--close {
position: absolute;
top: var(--eje-sp-m);
right: var(--eje-sp-m);
}
.eje-visor__ctrl--prev,
.eje-visor__ctrl--next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.eje-visor__ctrl--prev {
left: var(--eje-sp-m);
}
.eje-visor__ctrl--next {
right: var(--eje-sp-m);
}
.eje-visor__counter {
position: absolute;
top: var(--eje-sp-m);
left: var(--eje-sp-m);
}
.eje-visor__img {
max-height: calc(100vh - 8rem);
}
} @media (max-width: 39.999rem) {
.eje-visor__dialog {
justify-content: space-between;
padding: var(--eje-sp-xs);
}
.eje-visor__ctrl--close {
align-self: flex-end;
}
.eje-visor__img {
max-height: calc(100vh - 12rem);
}
.eje-visor__bar {
width: 100%;
justify-content: space-between;
}
.eje-visor__counter {
flex: 1 1 auto;
}
} @keyframes eje-visor-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes eje-visor-rise {
from {
transform: scale(0.98);
}
to {
transform: none;
}
}
.eje-visor__backdrop {
animation: eje-visor-fade 200ms ease-out;
}
.eje-visor__dialog {
animation: eje-visor-rise 150ms ease-out;
} @media (prefers-reduced-motion: reduce) {
.eje-visor,
.eje-visor__backdrop,
.eje-visor__dialog,
.eje-visor__img {
animation: none;
transition: none;
}
}
.eje-visor--no-motion,
.eje-visor--no-motion .eje-visor__backdrop,
.eje-visor--no-motion .eje-visor__dialog,
.eje-visor--no-motion .eje-visor__img {
animation: none;
transition: none;
}