Template:Crafting/styles.css - Revision history

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T10:08:52Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

← Older revision		Revision as of 10:08, 24 August 2026
Line 185:		Line 185:
	background-color: rgba(16, 0, 16, .94);		background-color: rgba(16, 0, 16, .94);
	border: 2px solid rgba(100, 40, 220, .6);		border: 2px solid rgba(100, 40, 220, .6);
	padding: .~~3em~~ .~~6em~~;		padding: .45em .7em;
	color: #fbfbfb;		color: #fbfbfb;
	text-shadow: .1em .1em 0 #3e3e3e;		text-shadow: .1em .1em 0 #3e3e3e;

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T09:47:29Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

@@ Line 192: / Line 192: @@
 	white-space: nowrap;
 	line-height: 1.25;
-	z-index: 20;
+	z-index: 100;
 	pointer-events: none;
+}

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T09:38:28Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

← Older revision		Revision as of 09:38, 24 August 2026
Line 98:		Line 98:
	/* text-align:center (added on top of minecraft.wiki's own rule, which		/* 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		just inherits .invslot's left-aligned text) so a narrower-than-32px
	icon -- anything ~~not natively square, scaled by height via x32px~~ in		icon -- anything given its own *width override in the slot() below
	the slot() below -- sits centered in its slot instead of jammed		for a non-square file -- sits centered in its slot instead of jammed
	against the left edge. */		against the left edge. */
	.invslot-item {		.invslot-item {

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T09:32:29Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

← Older revision		Revision as of 09:32, 24 August 2026
Line 96:		Line 96:
	}		}

			/* 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 not natively square, scaled by height via x32px in
			the slot() below -- sits centered in its slot instead of jammed
			against the left edge. */
	.invslot-item {		.invslot-item {
	box-sizing: content-box;		box-sizing: content-box;
Line 105:		Line 110:
	height: 32px;		height: 32px;
	cursor: default;		cursor: default;
			text-align: center;
	}		}

Line 115:		Line 121:
	width: 32px;		width: 32px;
	height: 32px;		height: 32px;
			text-align: center;
	}		}

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T09:19:40Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

@@ Line 139: / Line 139: @@
 	font-weight: normal;
 	color: #ffffff;
+}

Kaph: Disable native image dragging on the arrow and slot icons via pointer-events:none

2026-08-24T09:12:55Z

Disable native image dragging on the arrow and slot icons via pointer-events:none

← Older revision		Revision as of 09:12, 24 August 2026
Line 117:		Line 117:
	}		}

			/* 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 {		.pixel-image img {
	image-rendering: pixelated;		image-rendering: pixelated;
			pointer-events: none;
	}		}

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T09:07:08Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

@@ Line 104: / Line 104: @@
 	width: 32px;
 	height: 32px;
+}
@@ Line 130: / Line 131: @@
 	font-weight: normal;
 	color: #ffffff;
+}

Kaph: Fix box-sizing: this wiki applies border-box globally, which shrank the padded output slot instead of enlarging it as the copied minecraft.wiki sizing assumed

2026-08-24T08:54:28Z

Fix box-sizing: this wiki applies border-box globally, which shrank the padded output slot instead of enlarging it as the copied minecraft.wiki sizing assumed

← Older revision		Revision as of 08:54, 24 August 2026
Line 1:		Line 1:
			/* 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		/* Outer beveled GUI panel -- light top/left edge, dark bottom/right
	edge, the classic Minecraft "raised" 3D window border. Colors read		edge, the classic Minecraft "raised" 3D window border. Colors read
	directly off minecraft.wiki's own .mcui rule. */		directly off minecraft.wiki's own .mcui rule. */
	.mcui {		.mcui {
			box-sizing: content-box;
	display: inline-block;		display: inline-block;
	position: relative;		position: relative;
Line 26:		Line 37:

	.mcui-arrow {		.mcui-arrow {
			box-sizing: content-box;
	display: inline-block;		display: inline-block;
	width: 32px;		width: 32px;
Line 44:		Line 56:
	at two of its four corners; same trick minecraft.wiki uses. */		at two of its four corners; same trick minecraft.wiki uses. */
	.invslot {		.invslot {
			box-sizing: content-box;
	position: relative;		position: relative;
	display: inline-block;		display: inline-block;
Line 84:		Line 97:

	.invslot-item {		.invslot-item {
			box-sizing: content-box;
	position: relative;		position: relative;
	display: block;		display: block;
Line 93:		Line 107:

	.invslot-item a:first-child {		.invslot-item a:first-child {
			box-sizing: content-box;
	position: relative;		position: relative;
	display: block;		display: block;

Kaph: Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

2026-08-24T08:37:52Z

Create Template:Crafting, replicating minecraft.wiki's crafting-grid style without Lua

New page

/* 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 {
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 {
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 {
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;
}

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

.invslot-item a:first-child {
position: relative;
display: block;
margin: -2px;
padding: 2px;
width: 32px;
height: 32px;
}

.pixel-image img {
image-rendering: pixelated;
}

/* 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;
}