formstone
Version:
Library of modular front end components.
328 lines (285 loc) • 7.05 kB
CSS
.fs-lightbox {
--fs-lightbox-duration: 0.25s;
--fs-lightbox-timing: linear;
--fs-lightbox-overlay-bg: rgba(0, 0, 0, 0.9);
--fs-lightbox-loading-color: #fff;
--fs-lightbox-loading-size: 40px;
--fs-lightbox-loading-spread: 5px;
--fs-lightbox-loading-duration: 0.75s;
--fs-lightbox-item-duration: 0.25s;
--fs-lightbox-item-timing: ease;
--fs-lightbox-details-bg: rgba(0, 0, 0, 0.6);
--fs-lightbox-details-color: #fff;
--fs-lightbox-details-font: 16px / 1.4 sans-serif;
--fs-lightbox-details-padding: calc(env(safe-area-inset-top, 0px) + 40px) calc(env(safe-area-inset-top, 0px) + 60px) calc(env(safe-area-inset-bottom, 0px) + 40px);
--fs-lightbox-details-gap: 10px;
--fs-lightbox-button-background: rgba(0, 0, 0, 0.8);
--fs-lightbox-button-color: #fff;
height: 100vh;
width: 100vw;
z-index: 999;
opacity: 0;
transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
}
@media (prefers-reduced-motion) {
.fs-lightbox {
--fs-lightbox-duration: 0s;
--fs-lightbox-loading-duration: 0s;
--fs-lightbox-item-duration: 0s;
}
}
.fs-lightbox,
.fs-lightbox * {
box-sizing: border-box;
}
.fs-lightbox-open {
opacity: 1;
}
.fs-lightbox,
.fs-lightbox-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.fs-lightbox-overlay {
z-index: 0;
background: var(--fs-lightbox-overlay-bg);
}
.fs-lightbox-sr {
width: 1px ;
height: 1px ;
position: absolute ;
border-width: 0 ;
clip: rect(0, 0, 0, 0) ;
margin: -1px ;
overflow: hidden ;
padding: 0 ;
white-space: nowrap ;
}
.fs-lightbox-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
user-select: none;
}
.fs-lightbox-container.fs-lightbox-touching {
cursor: grabbing;
}
.fs-lightbox-item {
position: absolute;
top: env(safe-area-inset-top, 0px);
right: env(safe-area-inset-right, 0px);
bottom: env(safe-area-inset-bottom, 0px);
left: env(safe-area-inset-left, 0px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transition: opacity var(--fs-lightbox-item-duration) var(--fs-lightbox-item-timing), transform var(--fs-lightbox-item-duration) var(--fs-lightbox-item-timing);
transform: none;
}
.fs-lightbox-item_previous {
transform: translate(-100%, 0);
}
.fs-lightbox-item_next {
transform: translate(100%, 0);
}
.fs-lightbox-item.fs-lightbox-active.fs-lightbox-loaded {
opacity: 1;
}
.fs-lightbox-rtl .fs-lightbox-item_previous {
transform: translate(100%, 0);
}
.fs-lightbox-rtl .fs-lightbox-item_next {
transform: translate(-100%, 0);
}
.fs-lightbox-container.fs-lightbox-touching .fs-lightbox-item {
transition: none;
}
.fs-lightbox-wrap {
max-height: 100%;
max-width: 100%;
display: flex;
justify-content: center;
position: relative;
}
.fs-lightbox-media {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.fs-lightbox-media_video {
max-width: 1200px;
flex-grow: 1;
}
.fs-lightbox-media_image img {
height: auto;
width: auto;
min-width: 200px;
max-height: 100%;
max-width: 100%;
border: none;
display: block;
margin: auto;
user-select: none;
touch-action: none;
}
.fs-lightbox-video {
position: relative;
width: 100%;
}
.fs-lightbox-video iframe {
aspect-ratio: 16 / 9;
width: 100%;
background: #000;
}
.fs-lightbox-iframe iframe {
height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
background: #000;
}
.fs-lightbox-element {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.fs-lightbox-details {
display: grid;
grid-template-columns: 1fr;
gap: var(--fs-lightbox-details-gap);
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background: linear-gradient(to bottom, transparent, var(--fs-lightbox-details-bg));
color: var(--fs-lightbox-details-color);
font: var(--fs-lightbox-details-font);
opacity: 0;
padding: var(--fs-lightbox-details-padding);
transition: opacity 0.001s var(--fs-lightbox-item-timing) 0s;
pointer-events: none;
}
.fs-lightbox-details * {
pointer-events: all;
}
.fs-lightbox-item.fs-lightbox-active .fs-lightbox-details {
opacity: 1;
transition-delay: var(--fs-lightbox-item-duration);
transition-duration: var(--fs-lightbox-item-duration);
}
.fs-lightbox-container.fs-lightbox-touching .fs-lightbox-item.fs-lightbox-active .fs-lightbox-details {
opacity: 0;
transition-delay: 0.001s;
transition-duration: 0s;
}
.fs-lightbox-close {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
position: absolute;
top: env(safe-area-inset-top, 0px);
right: env(safe-area-inset-right, 0px);
z-index: 2;
appearance: none;
background: var(--fs-lightbox-button-background);
border: none;
color: var(--fs-lightbox-button-color);
cursor: pointer;
padding: 0;
}
.fs-lightbox-close svg {
width: 30px;
}
.fs-lightbox:not(.fs-lightbox-gallery) .fs-lightbox-control {
display: none;
}
.fs-lightbox-control {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
position: absolute;
top: env(safe-area-inset-top, 0px);
bottom: env(safe-area-inset-bottom, 0px);
z-index: 2;
appearance: none;
background: var(--fs-lightbox-button-background);
border: none;
color: var(--fs-lightbox-button-color);
margin: auto;
padding: 0;
opacity: 0.5;
transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
}
@media screen and (max-width: 739px) {
.fs-lightbox-control {
top: auto;
}
}
.fs-lightbox-control_previous {
left: 0;
}
.fs-lightbox-control_next {
right: 0;
}
.fs-lightbox-control svg {
width: 28px;
}
.fs-lightbox-rtl .fs-lightbox-control svg {
transform: scale(-1);
}
.fs-lightbox-rtl .fs-lightbox-control_previous {
left: unset;
right: 0;
}
.fs-lightbox-rtl .fs-lightbox-control_next {
right: unset;
left: 0;
}
.fs-lightbox-control:not([disabled]) {
cursor: pointer;
opacity: 1;
}
.fs-lightbox-loading {
display: flex;
justify-content: center;
align-items: center;
height: var(--fs-lightbox-loading-size);
width: var(--fs-lightbox-loading-size);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: fs-lightbox-loading-spin var(--fs-lightbox-loading-duration) linear infinite;
border: var(--fs-lightbox-loading-spread) solid transparent;
border-top-color: var(--fs-lightbox-loading-color);
border-radius: 100%;
margin: auto;
opacity: 0;
transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
}
.fs-lightbox-loading.fs-lightbox-visible {
opacity: 1;
}
@keyframes fs-lightbox-loading-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}