View source for Module:CreoLink/styles.css

/*
 * Creo are shown by their overworld sprite, cropped to the Creo itself, so the
 * icons have no common size: they run from 12x13 to 45x51, with a median of
 * about 22x27. Nothing is ever enlarged, because the file link carries no size
 * parameter and each icon is drawn at its own dimensions. The boxes below only
 * ever shrink the few that do not fit.
 */

/*
 * Listing variant: one Creo to a row.
 *
 * 45px wide because that is the widest Creo, Robiole, and 40px tall because
 * only Nebu, at 25x51, is taller. Every Creo therefore occupies the same box
 * wherever it is listed, which keeps a column of names aligned and the rows an
 * even height.
 */
.t-creo-link .t-icon-link__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 40px;
}

.t-creo-link .t-icon-link__icon img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/*
 * Inline variant: several Creo to a cell, in a comma-separated party list.
 *
 * The icon is switched off here. A party cell reads as a sentence, and three or
 * four sprites threaded through it crowd the names rather than help find them.
 * The listing variant above is unaffected, so a Creo still appears behind its
 * sprite everywhere it gets a row to itself.
 *
 * To bring the icons back, delete the `display: none` rule at the end of this
 * block. The sizing rules under it are kept for exactly that reason: they hold
 * the icon to 1.5em by 1.375em, which is 24x22 at the body size, small enough
 * to sit inside the line box the text already reserves so the row does not grow.
 */
.t-creo-link--inline .t-icon-link__icon {
	display: none;
}

/*
 * The root returns to `display: inline` so the name keeps the surrounding
 * text's baseline and the level and comma after it read as one line. The
 * two-class selector is deliberate: Module:IconLink/styles.css sets
 * `display: inline-flex` at equal specificity and the two stylesheets have no
 * guaranteed order.
 */
.t-icon-link.t-creo-link--inline {
	display: inline;
}

.t-creo-link--inline .t-icon-link__icon img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}