formstone/src/less/background.less

Library of modular front end components.

@fs-background-duration: 0.15s;

.fs-background {
  --fs-background-duration: @fs-background-duration;

  @media (prefers-reduced-motion) {

    & {
      --fs-background-duration: 0s;
    }
  }

  //

  position: relative;

  &,
  &-container,
  &-media {
    transition: none;
  }

  // Container

  &-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;
  }

  // Media

  &-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;

    img,
    video,
    iframe {
      width: 100%;
      height: 100%;

      display: block;
      -webkit-user-drag: none;
    }

    video {
      object-fit: cover;
      object-position: center;
    }

    iframe {
      z-index: 0;
    }
  }

  &-image,
  &-video {
    width: 100%;
    height: 100%;
  }

  &-image {}

  &-video {}

  &-embed {
    aspect-ratio: 16 / 9;

    align-self: center;
    justify-self: center;

    // min-height: calc(100% + 120px); // Hiding youtube info requires extra zoom
    min-height: 100%;
    min-width: 100%;

    &:after {
      width: 100%;
      height: 100%;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;

      content: '';
    }
  }
}