75 lines
1.4 KiB
CSS
75 lines
1.4 KiB
CSS
.lightbox-gallery {
|
|
@apply grid grid-cols-3 gap-6;
|
|
img {
|
|
@apply h-full w-full object-cover max-h-80;
|
|
}
|
|
}
|
|
|
|
.lightbox {
|
|
@apply fixed inset-0 w-full h-full z-40 bg-opacity-75 flex items-start justify-center;
|
|
/* backdrop-filter: blur(10px) lightness(20%); */
|
|
backdrop-filter: brightness(50%) blur(1px);
|
|
overflow-y: auto;
|
|
animation: lightboxIn 0.5s;
|
|
|
|
&--inactive {
|
|
@apply hidden;
|
|
}
|
|
|
|
&__prev,
|
|
&__next {
|
|
@apply absolute top-1/2 transform -translate-y-1/2 z-50;
|
|
transition: all 0.3s;
|
|
&:hover {
|
|
@apply scale-110;
|
|
}
|
|
}
|
|
|
|
&__prev {
|
|
@apply left-8;
|
|
img {
|
|
@apply rotate-180;
|
|
}
|
|
}
|
|
|
|
&__next {
|
|
@apply right-8;
|
|
}
|
|
|
|
&__close {
|
|
@apply absolute flex items-center top-0 right-0 m-4 text-neutral-900 text-base font-bold;
|
|
&:after {
|
|
@apply w-4 h-4 ml-4;
|
|
content: '';
|
|
display: inline-block;
|
|
background-image: url('../resources/img/graphic-assets/cross-close.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
&__container {
|
|
@apply relative flex justify-center items-center bg-white;
|
|
width: 90%;
|
|
height: fit-content;
|
|
min-height: 90vh;
|
|
@apply my-4 mx-auto;
|
|
}
|
|
|
|
&__current-picture {
|
|
img {
|
|
@apply h-full w-full max-w-xl;
|
|
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes lightboxIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|