Template:Bee Hive Crafting GUI: Difference between revisions

@@ Line 1: / Line 1: @@
-<!-- Template:CraftingGUIHover -->
-<!--
-Parameters
-- bg           : full File:... syntax for the crafting window background image
-- width        : width in px to render the background (default 512)
-- tip1..tip9   : tooltip content for the 3×3 crafting grid (row-major: top-left to bottom-right)
-- tipout       : tooltip content for the output slot
-Optional alignment (px; adjust if your background differs):
-- grid_x, grid_y : top-left corner of the 3×3 grid relative to the background
-- slot           : slot box size (default 48)
-- gap_h, gap_v   : horizontal / vertical gaps between slots
-- out_x, out_y   : center of the output slot
--->
 <includeonly>
-<span class="crafting-gui" style="display:inline-block; position:relative; width:{{{width|512}}}px;">
+<table style="position:relative;width:auto;border-collapse:separate;border-spacing:4px;padding:0;margin:0 auto;border:none;">
-[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]
+<tr>
-<span style="position:absolute; inset:0; pointer-events:none;">
+<td style="width:0;height:0;padding:0;margin:0;border:none;">[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</td>
-<style>
+<td style="position:absolute;top:{{{grid_y|44}}}px;left:{{{grid_x|96}}}px;padding:0;margin:0;border:none;">
-.crafting-gui .hover-slot{position:absolute; width:{{{slot|48}}}px; height:{{{slot|48}}}px; transform:translate(-50%,-50%); pointer-events:auto;}
+<table style="border:none;border-collapse:separate;border-spacing:{{{gap_h|6}}}px;width:auto;margin:0 auto;padding:0;">
-.crafting-gui .hover-slot .tooltip{display:none; position:absolute; left:105%; top:50%; transform:translateY(-50%); z-index:3; background:#111; color:#fff; padding:6px; border:1px solid #444; border-radius:4px; max-width:360px; box-shadow:0 2px 6px rgba(0,0,0,.35);}
+<tr>
-.crafting-gui .hover-slot:hover .tooltip{display:block;}
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip1|}}}</span></div></div></td>
-</style>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip2|}}}</span></div></div></td>
-</span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip3|}}}</span></div></div></td>
+</tr>
-<!-- row 1 -->
+<tr>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 0 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 0 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip1|}}}</span></span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip4|}}}</span></div></div></td>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 0 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip2|}}}</span></span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip5|}}}</span></div></div></td>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 2 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 0 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip3|}}}</span></span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip6|}}}</span></div></div></td>
+</tr>
-<!-- row 2 -->
+<tr>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 0 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 1 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip4|}}}</span></span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip7|}}}</span></div></div></td>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 1 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip5|}}}</span></span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip8|}}}</span></div></div></td>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 2 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 1 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip6|}}}</span></span>
+<td style="text-align:center;width:{{{slot|48}}}px;height:{{{slot|48}}}px;border:none;padding:0;"><div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tip9|}}}</span></div></div></td>
+</tr>
-<!-- row 3 -->
+</table>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 0 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 2 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip7|}}}</span></span>
+</td>
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 2 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip8|}}}</span></span>
+<td style="position:absolute;top:{{{out_y|94}}}px;left:{{{out_x|380}}}px;padding:0;margin:0;border:none;">
-<span class="hover-slot" style="left:calc({{{grid_x|96}}}px + 2 * ({{{slot|48}}}px + {{{gap_h|6}}}px)); top:calc({{{grid_y|44}}}px + 2 * ({{{slot|48}}}px + {{{gap_v|6}}}px));"><span class="tooltip">{{{tip9|}}}</span></span>
+<div class="tooltip-wrapper" style="width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><div class="foreground-icon" style="top:0;left:0;width:{{{slot|48}}}px;height:{{{slot|48}}}px;">[[File:Transparent.png|{{{slot|48}}}px|link=]]<span class="tooltip-text">{{{tipout|}}}</span></div></div>
+</td>
-<!-- output slot -->
+</tr>
-<span class="hover-slot" style="left:{{{out_x|380}}}px; top:{{{out_y|94}}}px;"><span class="tooltip">{{{tipout|}}}</span></span>
+</table>
-</span>
 </includeonly>

Template:Bee Hive Crafting GUI: Difference between revisions

Latest revision as of 18:53, 5 September 2025