forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
122 lines
2.4 KiB
CSS
122 lines
2.4 KiB
CSS
/**
|
|
* @file
|
|
*/
|
|
|
|
.blazy,
|
|
.blazy *,
|
|
.blazy *::before,
|
|
.blazy *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* The lazyloaded element: IMG, IFRAME, DIV. */
|
|
.b-lazy,
|
|
.b-responsive {
|
|
display: block;
|
|
height: auto;
|
|
min-height: 1px;
|
|
}
|
|
|
|
/* Ensure that without js (or in print or emails) our lazy-loader stubs don't
|
|
interfere. */
|
|
html:not(.js) .b-lazy[data-src],
|
|
html:not(.js) [data-b-blur] {
|
|
display: none;
|
|
}
|
|
|
|
.b-bg,
|
|
/* Tricking IE and other oldies to fix aspect ratio. */
|
|
.media--ratio .is-b-ie {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
}
|
|
|
|
/* Needed to display preloader with CSS BG image, otherwise hidden. */
|
|
.b-loaded,
|
|
.b-error,
|
|
.b-bg.is-b-loading {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* The .blazy container is not always present such at lightboxes. */
|
|
.litebox,
|
|
.blazy iframe,
|
|
.media iframe {
|
|
border: 0;
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.media--blazy iframe {
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.media-wrapper--inline {
|
|
margin: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */
|
|
.blazy .media {
|
|
display: block;
|
|
}
|
|
|
|
/**
|
|
* Non-js element. Supports both BG, or inline media.
|
|
* Makes generic animation container, either blur, or other animate.css.
|
|
*/
|
|
.media--fx {
|
|
/* Hide extra blur edges. */
|
|
overflow: hidden;
|
|
/* Dup for BlazyFilter which has no .blazy container. */
|
|
position: relative;
|
|
}
|
|
|
|
.media--fx img {
|
|
/* Prevents unwanted alt text from showing. */
|
|
color: transparent;
|
|
display: block;
|
|
/* Prevents blinking.
|
|
opacity: 1; */
|
|
/* Prevents collapsing thumbnail image if Aspect ratio is disabled. */
|
|
width: 100%;
|
|
}
|
|
|
|
/* Aspect ratio element: IMG, IFRAME, DIV.
|
|
The best things we can do to minimize layout/ reflows with dynamic DOM:
|
|
absolute position and fixed dimensions. */
|
|
.media--ratio .media__element,
|
|
.media--fx .b-blur {
|
|
bottom: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
min-height: 1px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 0;
|
|
/** Temp fix, also to fix the VIDEO element to max width, not only IMG. */
|
|
object-fit: cover;
|
|
}
|
|
|
|
.animated img,
|
|
.b-bg.is-b-animated {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Be sure to add width to the container accordingly, otherwise collapsed. */
|
|
.field[data-blazy] {
|
|
min-width: 50%;
|
|
}
|
|
|
|
/* Overrides .field--type-image img, causes confusing blur mismatched height. */
|
|
.blazy .media--blazy img.b-blur,
|
|
.blazy .media--blazy img.media__element {
|
|
margin: 0;
|
|
}
|