- Added supports for reduce motion for vestibular people.

Blazy 8.x-2.0-dev, 2020-06-30

-----------------------------

- Added supports for reduce motion for vestibular people.

- Fixed for potential non-integer lightbox dimensions.

- Added partial supports for rich media lightbox contents.

- Deprecated .media--loading for .is-b-loading to reuse at non-media.

Blazy 8.x-2.0-dev, 2020-06-21

-----------------------------

- Issue #3149843 by Guido_S, gausarts: Support SVG Images.

/* Needed to display preloader with CSS BG image, otherwise hidden. */

.b-loaded,

.b-error,

.b-bg.media--loading {

/* @todo deprecated and removed media--loading for is-b-loading to make sense outside media. */

.b-bg.media--loading,

.b-bg.is-b-loading {

  opacity: 1;

}

.litebox,

.blazy iframe,

.media iframe {

  border: 0 none;

  border: 0;

  display: block;

  max-width: 100%;

}

.media-wrapper--inline {

  max-width: 100%;

}

/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */

.blazy .media {

  display: block;

.media--fx img {

  /* Prevents unwanted alt text from showing. */

  color: transparent;

  display: block;

  /* Prevents blinking. */

  opacity: 1;

  transition: none;

  /* Prevents collapsing thumbnail image if Aspect ratio is disabled. */

  width: 100%;

}

/* Aspect ratio element: IMG, IFRAME, DIV. */

.media--ratio .media__element,

.media--fx .b-blur {

  display: block;

  bottom: 0;

  height: 100%;

  left: 0;

  min-height: 1px;

  position: absolute;

  right: 0;

  top: 0;

  width: 100%;

  z-index: 0;

  color: transparent;

  /* < 980: The less the more artifacts. The more the slower. */

  filter: blur(3px);

  opacity: 1;

  opacity: .9;

  /* Longer than animation timing to let the actual image surface better. */

  transition: visibility 1.2s;

  visibility: visible;

  /* If overlayed, this causes unwanted dark shadow and more artifacts. */

  transition: opacity 1.2s;

  /* Avoid overlaying, this causes unwanted dark shadow and more artifacts. */

  /* z-index: 1; */

}

  /* > 980: The less the more artifacts. The more the slower. */

  filter: blur(6px);

  /* Reduces artifacts due to being large. */

  opacity: .9;

  opacity: .8;

}

/* JS class element. */

.is-b-animated .b-blur {

  visibility: hidden;

.animated img {

  opacity: 1;

}

/* Be sure to add width to the container accordingly, otherwise collapsed. */

/* Without transform, this is more of formality hooking into animation event.*/

@-webkit-keyframes blazyBlur {

  0% {

  from {

    opacity: .3;

  }

  30% {

    opacity: .4;

  }

  60% {

    opacity: .6;

  }

  90% {

    opacity: .8;

  }

  100% {

  to {

    opacity: 1;

  }

}

@keyframes blazyBlur {

  0% {

  from {

    opacity: .3;

  }

  30% {

    opacity: .4;

  }

  60% {

    opacity: .6;

  }

  90% {

    opacity: .8;

  }

  100% {

  to {

    opacity: 1;

  }

}

/**

 * Js dynamic classes during animation to match animate.css convention.

 * .animated.blur img:not(.b-blur), .animated.blur.b-bg,

 */

.animated.blur.b-bg,

.animated.blur img:not(.b-blur) {

  /* transition: opacity 500ms ease-in-out; */

  transition: none;

  /* The blurred image is not this actual image. */

  -webkit-animation: blazyBlur 1s;

  animation: blazyBlur 1s;

}

/* Supports reduced motion. */

@media (print), (prefers-reduced-motion: reduce) {

  .animated.blur img:not(.b-blur) {

    -webkit-animation-duration: 1ms !important;

    animation-duration: 1ms !important;

    -webkit-transition-duration: 1ms !important;

    transition-duration: 1ms !important;

    -webkit-animation-iteration-count: 1 !important;

    animation-iteration-count: 1 !important;

  }

  .media--fx-lg .b-blur {

    filter: blur(1px);

    opacity: .9;

  }

}

  }

}

.media--loading {

/* @todo deprecated and removed media--loading for is-b-loading to make sense outside media. */

.media--loading,

.is-b-loading {

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  position: relative;

}

/* Prevents costly double animations when Blur is enabled. */

.media--loading:not([data-animation])::before {

.media--loading:not([data-animation])::before,

.is-b-loading:not([data-animation])::before {

  content: '';

  display: none;

  display: block;

  width: 30px;

  height: 30px;

  max-width: 30px;

/**

 * With JS being disabled, the NOSCRIPT tag is replaced by SPAN.

 * No worries about video iframes, they are broken without JS anyway.

 * Hide JS stuffs when being disabled. Ensures to not mess up JS users.

 */

.blazy--on .media--loading:not([data-animation])::before {

  display: block;

}

/** Hide JS stuffs when being disabled. Ensures to not mess up JS users.

.media--loading.media--player > span ~ .media__icon, */

.media--loading > span + .b-lazy,

.media--loading > span + picture,

.media--loading > span + a,

.media--loading.media--player > span ~ .b-lazy {

.media--loading.media--player > span ~ .b-lazy,

.is-b-loading > span + .b-lazy,

.is-b-loading > span + picture,

.is-b-loading > span + a,

.is-b-loading.media--player > span ~ .b-lazy {

  display: none;

}

.media__icon--spinner {

  height: 80px;

  left: 50%;

  margin: -40px 0 0 -40px;

  top: 50%;

  -ms-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  width: 80px;

}