mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-14 10:09:31 -07:00
56b87d6393
Update gallery image styles to use max-height based on window minus nav, max-width 100%, and auto width for proper scaling with contain fit. Signed-off-by: Sped0n <hi@sped0n.com>
70 lines
1.1 KiB
SCSS
70 lines
1.1 KiB
SCSS
.gallery {
|
|
pointer-events: all;
|
|
|
|
position: fixed;
|
|
top: var(--nav-height);
|
|
z-index: var(--z-nav-gallery);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
width: 100vw;
|
|
height: calc(var(--window-height) - var(--nav-height));
|
|
background: white;
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
.galleryInner {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
img {
|
|
max-height: calc(var(--window-height) - 2 * var(--nav-height));
|
|
max-width: 100%;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.loadingText {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
}
|
|
|
|
.slideContainer {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav {
|
|
height: var(--nav-height);
|
|
padding: var(--space-standard);
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.curtain {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: var(--z-curtain);
|
|
|
|
width: 100vw;
|
|
height: var(--window-height);
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
}
|