UNPKG

formstone

Version:

Library of modular front end components.

85 lines (75 loc) 1.39 kB
.fs-background { --fs-background-duration: 0.15s; position: relative; } @media (prefers-reduced-motion) { .fs-background { --fs-background-duration: 0s; } } .fs-background, .fs-background-container, .fs-background-media { transition: none; } .fs-background-container { display: grid; grid-template-areas: 'fs-background-stack'; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; } .fs-background-media { grid-area: fs-background-stack; min-height: 0; min-width: 0; z-index: 1; background-position: center; background-size: cover; opacity: 0; transition: opacity var(--fs-background-duration) linear; } .fs-background-media img, .fs-background-media video, .fs-background-media iframe { width: 100%; height: 100%; display: block; -webkit-user-drag: none; } .fs-background-media video { object-fit: cover; object-position: center; } .fs-background-media iframe { z-index: 0; } .fs-background-image, .fs-background-video { width: 100%; height: 100%; } .fs-background-embed { aspect-ratio: 16 / 9; align-self: center; justify-self: center; min-height: 100%; min-width: 100%; } .fs-background-embed:after { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ''; }