images.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

images.less
View Options

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

	// 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: @background-color-interactive;

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

	.content {
	a > .lazy-image-placeholder {
	// make sure that images in articles don't cause a horizontal scrollbar
	// on small screens
	max-width: 100% !important;
	}
	}

	@media print {
	.lazy-image-placeholder {
	page-break-inside: avoid;
	}
	}