mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/images.less
jdlrobson 2cc9516cde Minerva is its own skin
This is programmatic output from python3 scripts/migrate.py

This will result in a Minerva skin dependent on MobileFrontend.

Post merge we will rename message keys to have minerva- prefix

Bug: T166748
Change-Id: Iff1f7e63e796cc5d4a6d2ab0370e0c33248d2fce
2017-07-12 08:12:40 -07:00

54 lines
1.1 KiB
Plaintext

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