Template:Crafting/styles.css

/* Factory crafting grids: Template:Crafting, Module:UI and Module:Factory slot.
   The panel keeps the game's red Factory UI in both themes. */
.factoryui {
	display: block;
	background-color: #cf3f3f;
	color: #fff;
	padding: 1em;
}

.factoryui-row {
	display: flex;
}

.factoryui-crafting .factoryui-input {
	display: flex;
	flex-direction: column;
	line-height: 0;
	margin-bottom: 1.5em;
}

.factoryui-crafting .factoryui-output {
	display: flex;
	align-items: center;
}

.factoryui-crafting .factoryui-cost {
	margin-left: 1.5em;
}

/* The cost's E-notation keeps the panel's white instead of the muted page ink. */
.factoryui .tpt-num__e {
	color: inherit;
}

.factoryslot {
	display: inline-block;
	border: 1px solid #000;
	background-color: rgba(255, 255, 255, 0.4);
	width: 32px;
	height: 32px;
	padding: 8px;
	margin: -1px;
	line-height: 1;
}

.factoryslot.locked {
	background-color: #333;
}

.factoryslot.factoryslot-large {
	padding: 12px;
}

.factoryslot-item {
	display: block;
	position: relative;
	width: 32px;
	height: 32px;
	margin: -4px;
	padding: 4px;
}

.factoryslot-item.pixel-image {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.factoryslot-stacksize {
	position: absolute;
	bottom: 0;
	right: 0;
	white-space: nowrap;
	font-family: sans-serif !important;
	font-style: normal !important;
}

/* An item whose icon file is missing shows its file name; keep it inside the slot. */
.factoryslot-item .mw-broken-media {
	display: block;
	width: 32px;
	height: 32px;
	overflow: hidden;
	font-size: 8px;
	line-height: 9px;
	word-break: break-all;
	color: #fff;
}