mediawiki-skins-MinervaNeue/resources/skins.minerva.content.styles/images.less
Timo Tijhof 64134bd8a6 Remove minerva.less from global import path
Use local imports instead given all relevant files are within the
same repository, and don't vary by configuraion.

Bug: T140807
Depends-On: If3edac9a35b346af0320c12f70c0d978a6346201
Change-Id: Ife3cc345a63aff452e93accbe0a593fbaa358732
2018-05-29 12:19:00 +00:00

79 lines
1.8 KiB
Plaintext

// Full-size images
//
// Inline and floated full-size images will be styled like so.
//
// Example wikitext:
// This is an [[File:Book.png]] inline image.
// [[File:Book.png|left]]Left-aligned image
// [[File:Book.png|right]]Right-aligned image
//
// Markup:
// <div class="content">
// <p>This is an <img src="images/arrow-left.png"> inline image.</p>
// <div class="floatleft"><img src="images/arrow-left.png">Left-aligned image</div>
// <div class="floatright"><img src="images/arrow-left.png">Right-aligned image</div>
// </div>
//
// Styleguide 1.3.
@import 'mediawiki.mixins.less';
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
.content {
img {
// Matches commonElements.css
vertical-align: middle;
}
// Applied to divs containing aligned, full-size images
.floatright {
/* @noflip */
clear: right;
/* @noflip */
float: right;
/* @noflip */
margin: 0 0 0.6em 0.6em;
}
// Applied to divs containing aligned, full-size images
.floatleft {
/* @noflip */
clear: left;
/* @noflip */
float: left;
/* @noflip */
margin: 0 0.6em 0.6em 0;
}
// Prevent inline styles on images in wikitext
// Note we restrict to img's to avoid conflicts with VisualEditor shields
// See bug T64460
a > img,
a > .lazy-image-placeholder,
// due to lazy loading images we also must consider imgs inside noscript tags (T191893)
noscript > img,
{
// make sure that images in articles don't cause a horizontal scrollbar
// on small screens
max-width: 100% !important;
}
// Note height auto is only applied to images. Not neeed for the lazy-image-placeholder which is
// a gray box and will cause reflows.
noscript > img,
a > img {
height: auto !important;
}
// bug T22030
.noresize {
max-width: 100%;
overflow-x: auto;
a > img {
max-width: none !important;
}
}
}