79 lines
1.4 KiB
CSS
79 lines
1.4 KiB
CSS
.d2-lightbox {
|
|
--d2-lightbox--list-height: 80px;
|
|
--d2-lightbox--list-padding: 10px;
|
|
|
|
z-index: 10000000;
|
|
position: fixed;
|
|
display: none;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.d2-lightbox:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.d2-lightbox__bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* .d2-lightbox__content {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: 1fr var(--d2-lightbox--list-height);
|
|
gap: 2rem;
|
|
overflow: hidden;
|
|
} */
|
|
|
|
.d2-lightbox__list {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: var(--d2-lightbox--list-padding);
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap ;
|
|
gap: .5rem;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.d2-lightbox__list-image {
|
|
width: var(--d2-lightbox--list-height);
|
|
height: var(--d2-lightbox--list-height);
|
|
object-fit: contain;
|
|
opacity: 0.6;
|
|
border: solid 1px #fff;
|
|
transition: 0.3s;
|
|
|
|
&:hover,
|
|
&[data-active="true"] {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.d2-lightbox__gallery {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* padding: 100px; */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.d2-lightbox__gallery-image{
|
|
position: absolute;
|
|
/* cursor: grab; */
|
|
/* width: 100%;
|
|
height: 100%;
|
|
object-fit: contain; */
|
|
}
|