Current File : /home/jvzmxxx/wiki1/extensions/MobileFrontend/resources/skins.minerva.base.styles/images.less

@import 'minerva.variables.less';
@import 'minerva.mixins.less';

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

	// 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 block, or
	// inline-block+overflow:hidden given it is nested inside an inline <a>
	display: block;

	// When inserted, don't show the image because we want to animate it
	img {
		opacity: 0;
	}

	// When the image has loaded transition background color and image opacity
	// for a fade-in effect
	&.loaded {
		.animation( fadeOutContainer @animationDuration ease-in );
		background-color: transparent;
		border: 0;

		img {
			.animation( fadeInImage @animationDuration ease-in );
			opacity: 1;
		}
	}
}

@-webkit-keyframes fadeInImage {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeInImage {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeOutContainer {
	from {
		background-color: @placeholderBackgroundColor;
	}
	to {
		background-color: transparent;
	}
}

@keyframes fadeOutContainer {
	from {
		background-color: @placeholderBackgroundColor;
	}
	to {
		background-color: transparent;
	}
}