UNPKG

formstone

Version:

Library of modular front end components.

328 lines (285 loc) 7.05 kB
.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 !important; height: 1px !important; position: absolute !important; border-width: 0 !important; clip: rect(0, 0, 0, 0) !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; white-space: nowrap !important; } .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); } }