Template:Crafting/styles.css: Difference between revisions

Latest revision as of 10:08, 24 August 2026

/* 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: .45em .7em;
	color: #fbfbfb;
	text-shadow: .1em .1em 0 #3e3e3e;
	font-size: .8em;
	font-weight: normal;
	white-space: nowrap;
	line-height: 1.25;
	z-index: 100;
	pointer-events: none;
}

/* The output slot sits at the far right edge of the whole widget, so
   a centered tooltip (the default above) routinely got clipped by the
   right edge of whatever's containing it (a table cell, the page
   itself). Anchoring it to the slot's own right edge instead, growing
   leftward, keeps it from ever extending past that edge no matter how
   narrow the container is. */
.mcui-output .invslot-item[data-tooltip]:hover::after {
	left: auto;
	right: 0;
	transform: none;
}