https://wiki.cosmicsky.net/index.php?action=history&feed=atom&title=Template%3ABee_Hive_Crafting_GUI 2026-05-10T13:53:57Z Revision history for this page on the wiki MediaWiki 1.42.1 https://wiki.cosmicsky.net/index.php?title=Template:Bee_Hive_Crafting_GUI&diff=4019&oldid=prev 2025-09-05T18:53:37Z

<p></p> <a href="https://wiki.cosmicsky.net/index.php?title=Template:Bee_Hive_Crafting_GUI&amp;diff=4019&amp;oldid=4018">Show changes</a>

Benos https://wiki.cosmicsky.net/index.php?title=Template:Bee_Hive_Crafting_GUI&diff=4018&oldid=prev 2025-09-05T18:51:28Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 18:51, 5 September 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l2">Line 2:</td> <td colspan="2" class="diff-lineno">Line 2:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;span style=&quot;display:inline-block;position:relative;width:{{{width|512}}}px;height:{{{height|211}}}px;&quot;&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;span style=&quot;display:inline-block;position:relative;width:{{{width|512}}}px;height:{{{height|211}}}px;&quot;&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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<del style="font-weight: bold; text-decoration: none;">;display:block</del>;z-index:<del style="font-weight: bold; text-decoration: none;">3;pointer-events:auto</del>;"&gt;&lt;span class="<del style="font-weight: bold; text-decoration: none;">tooltip</del>-<del style="font-weight: bold; text-decoration: none;">text</del>"<del style="font-weight: bold; text-decoration: none;">&gt;{{{tip1|}}}&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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;z-index:<ins style="font-weight: bold; text-decoration: none;">2</ins>;"&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position</del>:<del style="font-weight: bold; text-decoration: none;">absolute</del>;<del style="font-weight: bold; text-decoration: none;">left</del>:<del style="font-weight: bold; text-decoration: none;">calc</del>({{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ 1 * (</del>{{{slot|48}}}px <del style="font-weight: bold; text-decoration: none;">+ </del>{{{<del style="font-weight: bold; text-decoration: none;">gap_h</del>|<del style="font-weight: bold; text-decoration: none;">6</del>}}}<del style="font-weight: bold; text-decoration: none;">px))</del>;<del style="font-weight: bold; text-decoration: none;">top</del>:calc({{{<del style="font-weight: bold; text-decoration: none;">grid_y</del>|<del style="font-weight: bold; text-decoration: none;">44</del>}}}px + <del style="font-weight: bold; text-decoration: none;">0 </del>* ({{{slot|48}}}px + {{{<del style="font-weight: bold; text-decoration: none;">gap_v</del>|6}}}px));<del style="font-weight: bold; text-decoration: none;">width</del>:{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px<del style="font-weight: bold; text-decoration: none;">;height:</del>{{{slot|48}}}px;<del style="font-weight: bold; text-decoration: none;">display:block;z-index:3;pointer-events</del>:<del style="font-weight: bold; text-decoration: none;">auto;"&gt;&lt;span class="tooltip-text"&gt;</del>{{{<del style="font-weight: bold; text-decoration: none;">tip2</del>|}}}<del style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon" style=</ins>"<ins style="font-weight: bold; text-decoration: none;">position:absolute;top:50%;left</ins>:<ins style="font-weight: bold; text-decoration: none;">50%</ins>;<ins style="font-weight: bold; text-decoration: none;">transform</ins>:<ins style="font-weight: bold; text-decoration: none;">translate</ins>(<ins style="font-weight: bold; text-decoration: none;">-50%,-50%);width:</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">;height:</ins>{{{slot|48}}}px<ins style="font-weight: bold; text-decoration: none;">;"&gt;&lt;span class="tooltip-text"&gt;</ins>{{{<ins style="font-weight: bold; text-decoration: none;">tip1</ins>|}}}<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute</del>;<del style="font-weight: bold; text-decoration: none;">left</del>:<del style="font-weight: bold; text-decoration: none;">calc(</del>{{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ </del>2 <del style="font-weight: bold; text-decoration: none;">* ({{{slot|48}}}px + </del>{{{<del style="font-weight: bold; text-decoration: none;">gap_h</del>|<del style="font-weight: bold; text-decoration: none;">6</del>}}}px<del style="font-weight: bold; text-decoration: none;">))</del>;<del style="font-weight: bold; text-decoration: none;">top</del>:<del style="font-weight: bold; text-decoration: none;">calc(</del>{{{<del style="font-weight: bold; text-decoration: none;">grid_y</del>|<del style="font-weight: bold; text-decoration: none;">44</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ 0 * (</del>{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}<del style="font-weight: bold; text-decoration: none;">px + {{{gap_v|6}}}px))</del>;<del style="font-weight: bold; text-decoration: none;">width</del>:{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px<del style="font-weight: bold; text-decoration: none;">;height:</del>{{{slot|48}}}px<del style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto;"&gt;&lt;span class="tooltip-text"&gt;</del>{<del style="font-weight: bold; text-decoration: none;">{{tip3</del>|}}}<del style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute</del>;<del style="font-weight: bold; text-decoration: none;">left</del>:calc({{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96</del>}}}px + 0 * ({{{slot|48}}}px + {{{<del style="font-weight: bold; text-decoration: none;">gap_h</del>|6}}}px));<del style="font-weight: bold; text-decoration: none;">top</del>:<del style="font-weight: bold; text-decoration: none;">calc(</del>{{{<del style="font-weight: bold; text-decoration: none;">grid_y</del>|<del style="font-weight: bold; text-decoration: none;">44</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ 1 * (</del>{{{slot|48}}}px <del style="font-weight: bold; text-decoration: none;">+ {{{gap_v|6}}}px))</del>;<del style="font-weight: bold; text-decoration: none;">width</del>:<del style="font-weight: bold; text-decoration: none;">{{{slot|48}}}px</del>;<del style="font-weight: bold; text-decoration: none;">height</del>:{{{slot|48}}}px;<del style="font-weight: bold; text-decoration: none;">display</del>:<del style="font-weight: bold; text-decoration: none;">block</del>;<del style="font-weight: bold; text-decoration: none;">z-index:3;pointer-events:auto;"</del>&gt;&lt;span class="tooltip-text"&gt;{{{<del style="font-weight: bold; text-decoration: none;">tip4</del>|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute</ins>;<ins style="font-weight: bold; text-decoration: none;">left</ins>:calc({{{<ins style="font-weight: bold; text-decoration: none;">grid_x</ins>|<ins style="font-weight: bold; text-decoration: none;">96</ins>}}}px + <ins style="font-weight: bold; text-decoration: none;">1 </ins>* ({{{slot|48}}}px + {{{<ins style="font-weight: bold; text-decoration: none;">gap_h</ins>|6}}}px));<ins style="font-weight: bold; text-decoration: none;">top</ins>:<ins style="font-weight: bold; text-decoration: none;">calc(</ins>{{{<ins style="font-weight: bold; text-decoration: none;">grid_y</ins>|<ins style="font-weight: bold; text-decoration: none;">44</ins>}}}px <ins style="font-weight: bold; text-decoration: none;">+ 0 * (</ins>{{{slot|48}}}px <ins style="font-weight: bold; text-decoration: none;">+ {{{gap_v|6}}}px))</ins>;<ins style="font-weight: bold; text-decoration: none;">width</ins>:{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}<ins style="font-weight: bold; text-decoration: none;">px</ins>;<ins style="font-weight: bold; text-decoration: none;">height</ins>:{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">;z-index:</ins>2<ins style="font-weight: bold; text-decoration: none;">;"&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span style="position:absolute;left:calc({{{grid_x|96}}}px + <del style="font-weight: bold; text-decoration: none;">1 </del>* ({{{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<del style="font-weight: bold; text-decoration: none;">;display:block</del>;z-index:<del style="font-weight: bold; text-decoration: none;">3;pointer-events:auto</del>;"&gt;&lt;span class="<del style="font-weight: bold; text-decoration: none;">tooltip</del>-<del style="font-weight: bold; text-decoration: none;">text</del>"<del style="font-weight: bold; text-decoration: none;">&gt;{{{tip5|}}}&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px;<ins style="font-weight: bold; text-decoration: none;">height</ins>:{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">;"&gt;&lt;span class="tooltip-text"&gt;</ins>{{{<ins style="font-weight: bold; text-decoration: none;">tip2</ins>|}}}<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style</del>="position:absolute;left:<del style="font-weight: bold; text-decoration: none;">calc</del>({{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ 2 * (</del>{{{slot|48}}}px <del style="font-weight: bold; text-decoration: none;">+ {{{gap_h|6}}}px));top:calc(</del>{{{<del style="font-weight: bold; text-decoration: none;">grid_y</del>|<del style="font-weight: bold; text-decoration: none;">44</del>}}}<del style="font-weight: bold; text-decoration: none;">px + 1 * </del>({{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px + {{{<del style="font-weight: bold; text-decoration: none;">gap_v</del>|<del style="font-weight: bold; text-decoration: none;">6</del>}}}px<del style="font-weight: bold; text-decoration: none;">));width:</del>{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px;<del style="font-weight: bold; text-decoration: none;">height</del>:{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px<del style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto;"&gt;&lt;span class="tooltip-text"&gt;</del>{{{<del style="font-weight: bold; text-decoration: none;">tip6</del>|}}}<del style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute;left:calc(</del>{{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ 0 * (</del>{{{slot|48}}}px <del style="font-weight: bold; text-decoration: none;">+ </del>{{{<del style="font-weight: bold; text-decoration: none;">gap_h</del>|<del style="font-weight: bold; text-decoration: none;">6</del>}}}px<del style="font-weight: bold; text-decoration: none;">))</del>;<del style="font-weight: bold; text-decoration: none;">top</del>:<del style="font-weight: bold; text-decoration: none;">calc({{{grid_y|44}}}px + 2 * (</del>{{{slot|48}}}px <del style="font-weight: bold; text-decoration: none;">+ </del>{{{<del style="font-weight: bold; text-decoration: none;">gap_v</del>|<del style="font-weight: bold; text-decoration: none;">6</del>}}}px<del style="font-weight: bold; text-decoration: none;">))</del>;<del style="font-weight: bold; text-decoration: none;">width:</del>{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}<del style="font-weight: bold; text-decoration: none;">px;height:{{</del>{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px<del style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto;"&gt;&lt;span class="tooltip-text"&gt;</del>{{{<del style="font-weight: bold; text-decoration: none;">tip7</del>|}}}<del style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute</ins>;<ins style="font-weight: bold; text-decoration: none;">left</ins>:<ins style="font-weight: bold; text-decoration: none;">calc(</ins>{{{<ins style="font-weight: bold; text-decoration: none;">grid_x</ins>|<ins style="font-weight: bold; text-decoration: none;">96</ins>}}}px <ins style="font-weight: bold; text-decoration: none;">+ 2 * (</ins>{{{slot|48}}}px <ins style="font-weight: bold; text-decoration: none;">+ {{</ins>{<ins style="font-weight: bold; text-decoration: none;">gap_h</ins>|<ins style="font-weight: bold; text-decoration: none;">6</ins>}}}<ins style="font-weight: bold; text-decoration: none;">px))</ins>;<ins style="font-weight: bold; text-decoration: none;">top</ins>:calc({{{<ins style="font-weight: bold; text-decoration: none;">grid_y</ins>|<ins style="font-weight: bold; text-decoration: none;">44</ins>}}}px + 0 * ({{{slot|48}}}px + {{{<ins style="font-weight: bold; text-decoration: none;">gap_v</ins>|6}}}px));<ins style="font-weight: bold; text-decoration: none;">width</ins>:{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">;height:</ins>{{{slot|48}}}px;<ins style="font-weight: bold; text-decoration: none;">z-index</ins>:<ins style="font-weight: bold; text-decoration: none;">2</ins>;<ins style="font-weight: bold; text-decoration: none;">"&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute;left:calc(</del>{{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96}}}px + 1 * ({{{slot|48}}}px + {{{gap_h|6</del>}}}px));top:calc({{{grid_y|44}}}px + <del style="font-weight: bold; text-decoration: none;">2 </del>* ({{{slot|48}}}px + {{{gap_v|6}}}px));width:{{{slot|48}}}px;height:{{{slot|48}}}px<del style="font-weight: bold; text-decoration: none;">;display:block</del>;z-index:<del style="font-weight: bold; text-decoration: none;">3;pointer-events:auto</del>;"&gt;&lt;span class="<del style="font-weight: bold; text-decoration: none;">tooltip</del>-<del style="font-weight: bold; text-decoration: none;">text</del>"<del style="font-weight: bold; text-decoration: none;">&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width</ins>:{{{slot|48}}}px;<ins style="font-weight: bold; text-decoration: none;">height</ins>:<ins style="font-weight: bold; text-decoration: none;">{{{slot|48}}}px</ins>;<ins style="font-weight: bold; text-decoration: none;">"</ins>&gt;&lt;span class="tooltip-text"&gt;{{{<ins style="font-weight: bold; text-decoration: none;">tip3</ins>|}}}&lt;/span&gt;<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position</del>:<del style="font-weight: bold; text-decoration: none;">absolute</del>;<del style="font-weight: bold; text-decoration: none;">left</del>:<del style="font-weight: bold; text-decoration: none;">calc</del>({{{<del style="font-weight: bold; text-decoration: none;">grid_x</del>|<del style="font-weight: bold; text-decoration: none;">96</del>}}}px <del style="font-weight: bold; text-decoration: none;">+ 2 * (</del>{{{slot|48}}}px <del style="font-weight: bold; text-decoration: none;">+ </del>{{{<del style="font-weight: bold; text-decoration: none;">gap_h</del>|<del style="font-weight: bold; text-decoration: none;">6</del>}}}<del style="font-weight: bold; text-decoration: none;">px))</del>;<del style="font-weight: bold; text-decoration: none;">top</del>:calc({{{<del style="font-weight: bold; text-decoration: none;">grid_y</del>|<del style="font-weight: bold; text-decoration: none;">44</del>}}}px + <del style="font-weight: bold; text-decoration: none;">2 </del>* ({{{slot|48}}}px + {{{<del style="font-weight: bold; text-decoration: none;">gap_v</del>|6}}}px));<del style="font-weight: bold; text-decoration: none;">width</del>:{{{<del style="font-weight: bold; text-decoration: none;">slot</del>|<del style="font-weight: bold; text-decoration: none;">48</del>}}}px<del style="font-weight: bold; text-decoration: none;">;height:</del>{{{slot|48}}}px;<del style="font-weight: bold; text-decoration: none;">display:block;z-index:3;pointer-events</del>:<del style="font-weight: bold; text-decoration: none;">auto;"&gt;&lt;span class="tooltip-text"&gt;</del>{{{<del style="font-weight: bold; text-decoration: none;">tip9</del>|}}}<del style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute</del>;<del style="font-weight: bold; text-decoration: none;">left</del>:{{{<del style="font-weight: bold; text-decoration: none;">out_x</del>|<del style="font-weight: bold; text-decoration: none;">380</del>}}}px;<del style="font-weight: bold; text-decoration: none;">top:{{{out_y|94}}}px;width:{{{slot|48}}}</del>px;height:{{{slot|48}}}px<del style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</del>;"&gt;&lt;span class="tooltip-text"&gt;{{{tipout|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span style="position:absolute;left:calc({{{grid_x|96}}}px + <ins style="font-weight: bold; text-decoration: none;">0 </ins>* ({{{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;z-index:<ins style="font-weight: bold; text-decoration: none;">2</ins>;"&gt;</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" <ins style="font-weight: bold; text-decoration: none;">style</ins>="position:absolute<ins style="font-weight: bold; text-decoration: none;">;top:50%</ins>;left:<ins style="font-weight: bold; text-decoration: none;">50%;transform:translate</ins>(<ins style="font-weight: bold; text-decoration: none;">-50%,-50%);width:</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">;height:</ins>{{{slot|48}}}px<ins style="font-weight: bold; text-decoration: none;">;"&gt;&lt;span class="tooltip-text"&gt;</ins>{{{<ins style="font-weight: bold; text-decoration: none;">tip4</ins>|}}}<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute;left:calc</ins>({{{<ins style="font-weight: bold; text-decoration: none;">grid_x</ins>|<ins style="font-weight: bold; text-decoration: none;">96</ins>}}}px + <ins style="font-weight: bold; text-decoration: none;">1 * (</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px <ins style="font-weight: bold; text-decoration: none;">+ </ins>{{{<ins style="font-weight: bold; text-decoration: none;">gap_h</ins>|<ins style="font-weight: bold; text-decoration: none;">6</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">))</ins>;<ins style="font-weight: bold; text-decoration: none;">top</ins>:<ins style="font-weight: bold; text-decoration: none;">calc(</ins>{{{<ins style="font-weight: bold; text-decoration: none;">grid_y</ins>|<ins style="font-weight: bold; text-decoration: none;">44</ins>}}}px <ins style="font-weight: bold; text-decoration: none;">+ 1 * (</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}<ins style="font-weight: bold; text-decoration: none;">px + </ins>{{{<ins style="font-weight: bold; text-decoration: none;">gap_v</ins>|<ins style="font-weight: bold; text-decoration: none;">6</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">));width:</ins>{{{slot|48}}}px<ins style="font-weight: bold; text-decoration: none;">;height:</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px;<ins style="font-weight: bold; text-decoration: none;">z-index:2;"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width</ins>:{{{slot|48}}}px<ins style="font-weight: bold; text-decoration: none;">;height:</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px;<ins style="font-weight: bold; text-decoration: none;">"&gt;&lt;span class="tooltip-text"&gt;</ins>{{{<ins style="font-weight: bold; text-decoration: none;">tip5</ins>|}}}<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute;left:calc({{</ins>{<ins style="font-weight: bold; text-decoration: none;">grid_x</ins>|<ins style="font-weight: bold; text-decoration: none;">96</ins>}}}px <ins style="font-weight: bold; text-decoration: none;">+ 2 * (</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}<ins style="font-weight: bold; text-decoration: none;">px + </ins>{{{<ins style="font-weight: bold; text-decoration: none;">gap_h</ins>|<ins style="font-weight: bold; text-decoration: none;">6</ins>}}}px));top:calc({{{grid_y|44}}}px + <ins style="font-weight: bold; text-decoration: none;">1 </ins>* ({{{slot|48}}}px + {{{gap_v|6}}}px));width:{{{slot|48}}}px;height:{{{slot|48}}}px;z-index:<ins style="font-weight: bold; text-decoration: none;">2</ins>;"&gt;</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon" style=</ins>"<ins style="font-weight: bold; text-decoration: none;">position:absolute;top:50%;left</ins>:<ins style="font-weight: bold; text-decoration: none;">50%</ins>;<ins style="font-weight: bold; text-decoration: none;">transform</ins>:<ins style="font-weight: bold; text-decoration: none;">translate</ins>(<ins style="font-weight: bold; text-decoration: none;">-50%,-50%);width:</ins>{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px<ins style="font-weight: bold; text-decoration: none;">;height:</ins>{{{slot|48}}}px<ins style="font-weight: bold; text-decoration: none;">;"&gt;&lt;span class="tooltip-text"&gt;</ins>{{{<ins style="font-weight: bold; text-decoration: none;">tip6</ins>|}}}<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute</ins>;<ins style="font-weight: bold; text-decoration: none;">left</ins>:calc({{{<ins style="font-weight: bold; text-decoration: none;">grid_x</ins>|<ins style="font-weight: bold; text-decoration: none;">96</ins>}}}px + <ins style="font-weight: bold; text-decoration: none;">0 </ins>* ({{{slot|48}}}px + {{{<ins style="font-weight: bold; text-decoration: none;">gap_h</ins>|6}}}px));<ins style="font-weight: bold; text-decoration: none;">top</ins>:<ins style="font-weight: bold; text-decoration: none;">calc(</ins>{{{<ins style="font-weight: bold; text-decoration: none;">grid_y</ins>|<ins style="font-weight: bold; text-decoration: none;">44</ins>}}}px <ins style="font-weight: bold; text-decoration: none;">+ 2 * (</ins>{{{slot|48}}}px <ins style="font-weight: bold; text-decoration: none;">+ {{{gap_v|6}}}px))</ins>;<ins style="font-weight: bold; text-decoration: none;">width</ins>:{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}<ins style="font-weight: bold; text-decoration: none;">px</ins>;<ins style="font-weight: bold; text-decoration: none;">height</ins>:{{{<ins style="font-weight: bold; text-decoration: none;">slot</ins>|<ins style="font-weight: bold; text-decoration: none;">48</ins>}}}px;<ins style="font-weight: bold; text-decoration: none;">z-index:2;"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:{{{slot|48}}}px;height:{{{slot|48}}}px;"&gt;&lt;span class="tooltip-text"&gt;{{{tip7|}}}&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span 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;z-index:2;"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:{{{slot|48}}}px;height:{{{slot|48}}}px;"&gt;&lt;span class="tooltip-text"&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span 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;z-index:2;"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:{{{slot|48}}}px;height:{{{slot|48}}}px;"&gt;&lt;span class="tooltip-text"&gt;{{{tip9|}}}&lt;/span&gt;&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span style="position:absolute;left:{{{out_x|380}}}px;top:{{{out_y|94}}}px;width:{{{slot|48}}}px;height:{{{slot|48}}}px;z-index:2;"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;span class="foreground-icon" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:{{{slot|48}}}</ins>px;height:{{{slot|48}}}px;"&gt;&lt;span class="tooltip-text"&gt;{{{tipout|}}}&lt;/span&gt;<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/includeonly&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/includeonly&gt;</div></td></tr> </table>

Benos https://wiki.cosmicsky.net/index.php?title=Template:Bee_Hive_Crafting_GUI&diff=4017&oldid=prev 2025-09-05T18:48:31Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 18:48, 5 September 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td> <td colspan="2" class="diff-lineno">Line 1:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;includeonly&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;includeonly&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="craft-grid" </del>style="display:inline-block;position:relative;width:{{{width|512}}}px;height:{{{height|211}}}px;"&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span style="display:inline-block;position:relative;width:{{{width|512}}}px;height:{{{height|211}}}px;"&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;"&gt;&lt;span class="tooltip-text"&gt;{{{tip1|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tip1|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;<del style="font-weight: bold; text-decoration: none;">"&gt;&lt;</del>span class="tooltip-text"&gt;{{{tip2|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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;<ins style="font-weight: bold; text-decoration: none;">display:block;z-index:3;pointer-events:auto;"&gt;&lt;</ins>span class="tooltip-text"&gt;{{{tip2|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;"&gt;&lt;span class="tooltip-text"&gt;{{{tip3|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tip3|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class</del>="<del style="font-weight: bold; text-decoration: none;">slot foreground-icon" style="position</del>: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;"&gt;&lt;span class="tooltip-text"&gt;{{{tip4|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <ins style="font-weight: bold; text-decoration: none;">style</ins>="<ins style="font-weight: bold; text-decoration: none;">position</ins>: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<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tip4|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;<del style="font-weight: bold; text-decoration: none;">"&gt;&lt;</del>span class="tooltip-text"&gt;{{{tip5|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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;<ins style="font-weight: bold; text-decoration: none;">display:block;z-index:3;pointer-events:auto;"&gt;&lt;</ins>span class="tooltip-text"&gt;{{{tip5|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;"&gt;&lt;span class="tooltip-text"&gt;{{{tip6|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tip6|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class</del>="<del style="font-weight: bold; text-decoration: none;">slot foreground-icon" style="position</del>: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;"&gt;&lt;span class="tooltip-text"&gt;{{{tip7|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <ins style="font-weight: bold; text-decoration: none;">style</ins>="<ins style="font-weight: bold; text-decoration: none;">position</ins>: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<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tip7|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;<del style="font-weight: bold; text-decoration: none;">"&gt;&lt;</del>span class="tooltip-text"&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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;<ins style="font-weight: bold; text-decoration: none;">display:block;z-index:3;pointer-events:auto;"&gt;&lt;</ins>span class="tooltip-text"&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>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;"&gt;&lt;span class="tooltip-text"&gt;{{{tip9|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span 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<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tip9|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">class="slot foreground-icon" </del>style="position:absolute;left:{{{out_x|380}}}px;top:{{{out_y|94}}}px;width:{{{slot|48}}}px;height:{{{slot|48}}}px;"&gt;&lt;span class="tooltip-text"&gt;{{{tipout|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span style="position:absolute;left:{{{out_x|380}}}px;top:{{{out_y|94}}}px;width:{{{slot|48}}}px;height:{{{slot|48}}}px<ins style="font-weight: bold; text-decoration: none;">;display:block;z-index:3;pointer-events:auto</ins>;"&gt;&lt;span class="tooltip-text"&gt;{{{tipout|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/includeonly&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/includeonly&gt;</div></td></tr> </table>

Benos https://wiki.cosmicsky.net/index.php?title=Template:Bee_Hive_Crafting_GUI&diff=4015&oldid=prev 2025-09-05T18:46:14Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 18:46, 5 September 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td> <td colspan="2" class="diff-lineno">Line 1:</td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;!-- Template:CraftingGUIHover --&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;!--</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Parameters</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- bg          : full File:... syntax for the crafting window background image</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- width        : width in px to render the background (default 512)</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- tip1..tip9  : tooltip content for the 3×3 crafting grid (row-major: top-left to bottom-right)</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- tipout      : tooltip content for the output slot</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Optional alignment (px; adjust if your background differs):</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- grid_x, grid_y : top-left corner of the 3×3 grid relative to the background</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- slot          : slot box size (default 48)</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- gap_h, gap_v  : horizontal / vertical gaps between slots</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">- out_x, out_y  : center of the output slot</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">--&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;includeonly&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;includeonly&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">crafting</del>-<del style="font-weight: bold; text-decoration: none;">gui</del>" style="display:inline-block; position:relative; width:{{{width|512}}}px;"&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">craft</ins>-<ins style="font-weight: bold; text-decoration: none;">grid</ins>" style="display:inline-block;position:relative;width:{{{width|512<ins style="font-weight: bold; text-decoration: none;">}}}px;height:{{{height|211</ins>}}}px;"&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <del style="font-weight: bold; text-decoration: none;">style</del>="<del style="font-weight: bold; text-decoration: none;">position:absolute; inset:0; pointer</del>-<del style="font-weight: bold; text-decoration: none;">events:none;</del>"<del style="font-weight: bold; text-decoration: none;">&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span <ins style="font-weight: bold; text-decoration: none;">class</ins>="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style<ins style="font-weight: bold; text-decoration: none;">="</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip1|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;</del>style<del style="font-weight: bold; text-decoration: none;">&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip2|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">.crafting-gui .hover-slot{position:absolute; width:{{{slot|48}}}px; height:{{{slot|48}}}px; transform:translate(-50%,-50%); pointer-events:auto;}</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip3|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">.crafting-gui .hover-slot .tooltip{display:none; </del>position:absolute; <del style="font-weight: bold; text-decoration: none;">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);}</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip4|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">.crafting-gui .hover-slot:hover .tooltip{display:block;}</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip5|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/style&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip6|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/span&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip7|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;!-- row 1 --&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>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))<ins style="font-weight: bold; text-decoration: none;">;width:{{{slot|48}}}px;height:{{{slot|48}}}px</ins>;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tip9|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;span class="hover-slot" style="</del>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));"&gt;&lt;span class="tooltip"&gt;{{{tip1|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<ins style="font-weight: bold; text-decoration: none;">slot foreground</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>" style="<ins style="font-weight: bold; text-decoration: none;">position:absolute;</ins>left:{{{out_x|380}}}px;top:{{{out_y|94<ins style="font-weight: bold; text-decoration: none;">}}}px;width:{{{slot|48}}}px;height:{{{slot|48</ins>}}}px;"&gt;&lt;span class="tooltip<ins style="font-weight: bold; text-decoration: none;">-text</ins>"&gt;{{{tipout|}}}&lt;/span&gt;&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip2|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip3|}}}&lt;/span&gt;&lt;/span<del style="font-weight: bold; text-decoration: none;">&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;!-- row 2 --</del>&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip4|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip5|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip6|}}}&lt;/span&gt;&lt;/span<del style="font-weight: bold; text-decoration: none;">&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;!-- row 3 --</del>&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip7|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" 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));"&gt;&lt;span class="tooltip"&gt;{{{tip9|}}}&lt;/span&gt;&lt;/span<del style="font-weight: bold; text-decoration: none;">&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;!-- output slot --</del>&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;span class="<del style="font-weight: bold; text-decoration: none;">hover</del>-<del style="font-weight: bold; text-decoration: none;">slot</del>" style="left:{{{out_x|380}}}px; top:{{{out_y|94}}}px;"&gt;&lt;span class="tooltip"&gt;{{{tipout|}}}&lt;/span&gt;&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/includeonly&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/includeonly&gt;</div></td></tr> </table>

Benos https://wiki.cosmicsky.net/index.php?title=Template:Bee_Hive_Crafting_GUI&diff=4012&oldid=prev 2025-09-05T18:42:08Z

<p>Created page with &quot;&lt;!-- Template:CraftingGUIHover --&gt; &lt;!-- 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...&quot;</p> <p><b>New page</b></p><div>&lt;!-- Template:CraftingGUIHover --&gt;<br /> <br /> &lt;!--<br /> Parameters<br /> - bg : full File:... syntax for the crafting window background image<br /> - width : width in px to render the background (default 512)<br /> - tip1..tip9 : tooltip content for the 3×3 crafting grid (row-major: top-left to bottom-right)<br /> - tipout : tooltip content for the output slot<br /> <br /> Optional alignment (px; adjust if your background differs):<br /> - grid_x, grid_y : top-left corner of the 3×3 grid relative to the background<br /> - slot : slot box size (default 48)<br /> - gap_h, gap_v : horizontal / vertical gaps between slots<br /> - out_x, out_y : center of the output slot<br /> --&gt;<br /> <br /> &lt;includeonly&gt;<br /> &lt;span class=&quot;crafting-gui&quot; style=&quot;display:inline-block; position:relative; width:{{{width|512}}}px;&quot;&gt;<br /> [[File:{{{bg|CraftingGUI-Example.png}}}|{{{width|512}}}px|link=]]<br /> &lt;span style=&quot;position:absolute; inset:0; pointer-events:none;&quot;&gt;<br /> &lt;style&gt;<br /> .crafting-gui .hover-slot{position:absolute; width:{{{slot|48}}}px; height:{{{slot|48}}}px; transform:translate(-50%,-50%); pointer-events:auto;}<br /> .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);}<br /> .crafting-gui .hover-slot:hover .tooltip{display:block;}<br /> &lt;/style&gt;<br /> &lt;/span&gt;<br /> <br /> &lt;!-- row 1 --&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip1|}}}&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip2|}}}&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip3|}}}&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- row 2 --&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip4|}}}&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip5|}}}&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip6|}}}&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- row 3 --&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip7|}}}&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip8|}}}&lt;/span&gt;&lt;/span&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;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));&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tip9|}}}&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;!-- output slot --&gt;<br /> &lt;span class=&quot;hover-slot&quot; style=&quot;left:{{{out_x|380}}}px; top:{{{out_y|94}}}px;&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;{{{tipout|}}}&lt;/span&gt;&lt;/span&gt;<br /> <br /> &lt;/span&gt;<br /> &lt;/includeonly&gt;</div>

Benos