Module:Outfits/styles.css

/*
 * Outfit sprites are pixel art and must not be interpolated.
 *
 * The wiki has no rule for this. `cp-image-pixelated` is used all over the
 * place, by this page, by Module:Rarity and by the creo infoboxes, but it is
 * not defined in MediaWiki:Common.css or anywhere else the site serves, so it
 * has always been an empty class. At exactly 1:1 that goes unnoticed. It stops
 * going unnoticed the moment anything scales the image, and something almost
 * always does: a HiDPI screen, or Windows at 125%, resamples every one of
 * these sprites and softens it.
 *
 * Declaring it here fixes this page. Adding the same rule to Common.css would
 * fix the rest of the wiki, which needs an interface editor.
 *
 * Do not write `.mw-parser-output` in front of these selectors. TemplateStyles
 * prepends it to every rule on the way in, so writing it as well produces
 * `.mw-parser-output .mw-parser-output .cp-outfit-gallery`, which needs two
 * nested content wrappers and therefore matches nothing on a real page.
 */
.cp-outfit-gallery img,
.cp-outfit-icon img {
	image-rendering: pixelated;
}

/*
 * The gallery is a plain flex row rather than a <gallery>.
 *
 * A gallery tag scales every cell to one `heights`, and these images are not
 * one height: a plain outfit is a row of two figures and a colour family is two
 * rows of up to ten. Any shared target stretches most of them by some fraction,
 * which is exactly what pixel art cannot survive. Laying them out here instead
 * lets every image draw at its own size, unscaled.
 */
.cp-outfit-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 14px 10px;
	margin: 0.5em 0;
}

.cp-outfit-gallery .cp-outfit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.cp-outfit-gallery .cp-outfit-name {
	margin-top: 4px;
	max-width: 16em;
	font-size: 0.85em;
	line-height: 1.2;
	text-align: center;
}