mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/images.less

54 lines
1.1 KiB
Plaintext
Raw Normal View History

@import 'minerva.variables.less';
@import 'minerva.mixins.less';
@import 'mediawiki.mixins.animation';
@animationDuration: 0.3s;
@placeholderBackgroundColor: @grayLightest;
.lazy-image-placeholder {
// If the placeholder itself is inside an inline element do not use block
// See https://phabricator.wikimedia.org/T143558
// and https://phabricator.wikimedia.org/T144567
li &,
span & {
display: inline-block;
}
// The image placeholder for shouldn't show for no-js devices
.client-nojs & {
display: none;
}
background-color: @placeholderBackgroundColor;
// In order to avoid reflows placeholder needs to be inline-block
// Otherwise display block will always take up the full line
// instead of allowing text before and after
// see T146298
display: inline-block;
}
// When the image has loaded transition background color and image opacity
// for a fade-in effect
img.image-lazy-loaded {
.animation( fadeInImage @animationDuration ease-in );
}
@-webkit-keyframes fadeInImage {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInImage {
from {
opacity: 0;
}
to {
opacity: 1;
}
}