105 lines
2.3 KiB
CSS
105 lines
2.3 KiB
CSS
.lightbox-gallery {
|
|
@apply grid sm:grid-cols-2 lg:grid-cols-3 gap-6;
|
|
img {
|
|
@apply h-full w-full object-cover max-h-80 rounded-lg;
|
|
}
|
|
&__picture {
|
|
@apply pointer-events-none;
|
|
}
|
|
&__trigger {
|
|
@apply block relative;
|
|
cursor: zoom-in;
|
|
/* content: url('../resources/img/graphic-assets/icone-external-link-purple.svg'); */
|
|
|
|
&:after {
|
|
transition: all 0.3s ease;
|
|
content: '';
|
|
@apply bg-contain bg-center w-16 h-16 top-1/2 right-1/2 absolute z-40 content-[''];
|
|
@apply opacity-0;
|
|
transform: translateY(10px);
|
|
translate: 50% -50%;
|
|
background-image: url('../resources/img/graphic-assets/icone-focus-galerie.svg');
|
|
}
|
|
|
|
&:hover:after {
|
|
transform: translateY(0px);
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
transition: opacity 0.3s;
|
|
|
|
&.fade-out {
|
|
opacity: 0;
|
|
}
|
|
|
|
&--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 rounded-xl;
|
|
width: 90%;
|
|
height: fit-content;
|
|
min-height: 90vh;
|
|
@apply my-4 mx-auto;
|
|
}
|
|
&__current-picture {
|
|
img {
|
|
@apply h-full w-full max-w-xl rounded-lg;
|
|
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
&__current-picture-description {
|
|
@apply text-center text-neutral-800 pt-2;
|
|
}
|
|
}
|
|
|
|
@keyframes lightboxIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|