Template:Crafting/styles.css

/* Every width/height/padding/border combo below is copied verbatim
   from minecraft.wiki's own computed styles, which assume the browser
   default box-sizing (content-box) -- but this wiki's global reset
   sets box-sizing:border-box on everything, which would shrink each
   box's actual content area by its own padding+border instead of
   growing the box like the numbers below assume (most visible on the
   padded, larger .invslot-large output slot). box-sizing:content-box
   on every sized element here restores the original math regardless
   of that global default. */

/* Outer beveled GUI panel -- light top/left edge, dark bottom/right
   edge, the classic Minecraft "raised" 3D window border. Colors read
   directly off minecraft.wiki's own .mcui rule. */
.mcui {
	box-sizing: content-box;
	display: inline-block;
	position: relative;
	background-color: #c6c6c6;
	border-width: 2px;
	border-style: solid;
	border-color: #dbdbdb #5b5b5b #5b5b5b #dbdbdb;
	padding: 6px;
	text-align: left;
	white-space: nowrap;
	vertical-align: bottom;
	color: #000000;
}

.mcui-input {
	display: inline-block;
	vertical-align: top;
}

.mcui-row {
	display: block;
}

.mcui-arrow {
	box-sizing: content-box;
	display: inline-block;
	width: 32px;
	height: 27px;
	margin: 40px 4px 0;
	vertical-align: top;
}

.mcui-output {
	display: inline-block;
	vertical-align: top;
	margin: 28px 0 0;
}

/* Each slot is "recessed" -- the opposite bevel direction from the
   outer .mcui panel -- with a flat mid-grey fill. The ::before/::after
   corner squares patch the 1px gaps a beveled border otherwise leaves
   at two of its four corners; same trick minecraft.wiki uses. */
.invslot {
	box-sizing: content-box;
	position: relative;
	display: inline-block;
	background: center center / 32px 32px no-repeat #8b8b8b;
	border-width: 2px;
	border-style: solid;
	border-color: #373737 #ffffff #ffffff #373737;
	width: 32px;
	height: 32px;
	font-size: 16px;
	line-height: 1;
	text-align: left;
	vertical-align: bottom;
}

.invslot::before,
.invslot::after {
	content: "";
	position: absolute;
	background-color: #8b8b8b;
	height: 2px;
	width: 2px;
	pointer-events: none;
}

.invslot::before {
	bottom: -2px;
	left: -2px;
}

.invslot::after {
	top: -2px;
	right: -2px;
}

/* The output slot is the same recessed square, just padded out larger. */
.invslot-large {
	padding: 8px;
}

/* text-align:center (added on top of minecraft.wiki's own rule, which
   just inherits .invslot's left-aligned text) so a narrower-than-32px
   icon -- anything given its own *width override in the slot() below
   for a non-square file -- sits centered in its slot instead of jammed
   against the left edge. */
.invslot-item {
	box-sizing: content-box;
	position: relative;
	display: block;
	margin: -2px;
	padding: 2px;
	width: 32px;
	height: 32px;
	cursor: default;
	text-align: center;
}

.invslot-item a:first-child {
	box-sizing: content-box;
	position: relative;
	display: block;
	margin: -2px;
	padding: 2px;
	width: 32px;
	height: 32px;
	text-align: center;
}

/* Browsers make <img> draggable by default -- clicking and dragging
   the arrow (or any slot's icon) picked it up like a real image
   instead of doing nothing, since none of these are meant to be
   interacted with beyond an optional click-through link. Removing the
   img from pointer targeting entirely stops that; a linked icon still
   works since the click then lands on its wrapping <a>, right behind
   the img in the same spot, instead of the img itself. */
.pixel-image img {
	image-rendering: pixelated;
	pointer-events: none;
}

/* Bottom-right stack-size badge -- white Minecraft-style text with a
   dark drop shadow instead of an outline, same as the game's own HUD. */
.invslot-stacksize {
	position: absolute;
	right: 0;
	bottom: 0;
	text-shadow: 2px 2px 0 #3f3f3f;
	z-index: 2;
	font-weight: normal;
	color: #ffffff;
}

/* Shapeless-recipe badge, top-right corner of the whole widget --
   position/size read directly off minecraft.wiki's own .mcui-icons/
   .mcui-shapeless rules. Uses a native title="" tooltip (cursor:help
   shows the explanation on hover) rather than the custom hover-card
   used for item slots above -- that's genuinely what minecraft.wiki
   itself does for this specific badge too, so no extra CSS needed to
   match it. */
.mcui-icons {
	position: absolute;
	top: 6px;
	right: 6px;
}

.mcui-shapeless {
	display: inline-block;
	width: 19px;
	height: 15px;
	cursor: help;
}

/* Item hover tooltip -- minecraft.wiki's own #minetip-tooltip gadget
   follows the cursor via JS, which this wiki can't add (same
   interface-admin restriction as Common.css). A pure-CSS
   :hover + ::after tooltip anchored above the slot gets the same
   look -- near-black background, a purple-tinted border, and white
   text with Minecraft's signature hard drop-shadow instead of an
   outline -- without needing any script at all. */
.invslot-item[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	box-sizing: content-box;
	background-color: rgba(16, 0, 16, .94);
	border: 2px solid rgba(100, 40, 220, .6);
	padding: .3em .6em;
	color: #fbfbfb;
	text-shadow: .1em .1em 0 #3e3e3e;
	font-size: .8em;
	font-weight: normal;
	white-space: nowrap;
	line-height: 1.25;
	z-index: 20;
	pointer-events: none;
}