Template:Bee Hive Crafting GUI: Difference between revisions

Newer edit →

@@ 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;">
+<span class="craft-grid" style="display:inline-block;position:relative;width:{{{width|512}}}px;height:{{{height|211}}}px;">
 [[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]
-<span style="position:absolute; inset:0; pointer-events:none;">
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip1|}}}</span></span>
-<style>
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip2|}}}</span></span>
-.crafting-gui .hover-slot{position:absolute; width:{{{slot|48}}}px; height:{{{slot|48}}}px; transform:translate(-50%,-50%); pointer-events:auto;}
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip3|}}}</span></span>
-.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);}
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip4|}}}</span></span>
-.crafting-gui .hover-slot:hover .tooltip{display:block;}
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip5|}}}</span></span>
-</style>
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip6|}}}</span></span>
-</span>
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip7|}}}</span></span>
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip8|}}}</span></span>
-<!-- row 1 -->
+<span class="slot foreground-icon" style="position:absolute;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));width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tip9|}}}</span></span>
-<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>
+<span class="slot foreground-icon" style="position:absolute;left:{{{out_x|380}}}px;top:{{{out_y|94}}}px;width:{{{slot|48}}}px;height:{{{slot|48}}}px;"><span class="tooltip-text">{{{tipout|}}}</span></span>
-<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>
-<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>
-<!-- row 2 -->
-<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>
-<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>
-<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>
-<!-- row 3 -->
-<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>
-<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>
-<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>
-<!-- output slot -->
-<span class="hover-slot" style="left:{{{out_x|380}}}px; top:{{{out_y|94}}}px;"><span class="tooltip">{{{tipout|}}}</span></span>
 </span>
 </includeonly>

Template:Bee Hive Crafting GUI: Difference between revisions

Revision as of 18:46, 5 September 2025