mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/images.less
Peter Ovchyn 8581b2c16b Make lazy-image-placeholder vertically aligned middle by default
All images in MinervaNeue skin are vertically aligned `middle`,
so placeholder for them should be consistent.

Bug: T199351
Change-Id: I5fa00bd0c02e67059543389e4bbd07b073a2c5e0
2020-08-17 18:30:21 +00:00

32 lines
967 B
Plaintext

@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
@placeholderBackgroundColor: @grayLightest;
// Only applies to mobile Minerva. For this reason these rules should likely be moved to
// `mobile.init.styles` either as a skin style or default style.
.lazy-image-placeholder {
background-color: @placeholderBackgroundColor;
// 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;
}
// 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;
// See T199351#6370886
vertical-align: middle;
}