Template:RecipeBlock: Difference between revisions

Latest revision as of 00:13, 19 January 2026

Crafting Recipe

📦 Required Materials

{{{ingredients}}}

Icon	Material	Qty

⚙️ Crafting Details

{{{bench_icon}}}

Workbench

[[{{{bench}}}]]

⭐

Workbench Tier

{{{tier}}}

⏱️

Crafting Time

{{{time}}}

📋

Requirements

{{{requirements}}}

@@ Line 1: / Line 1: @@
-<div class="recipe-visual" style="display:flex; flex-wrap:wrap; align-items:flex-start; gap:1em; padding:1em; margin-top:1em;">
+<div class="recipe-container">
+  <h3 class="recipe-header">Crafting Recipe</h3>
-<!-- Ingredients -->
+  <div class="recipe-grid">
-<div style="flex:1; min-width:250px;">
-<div style="font-weight:bold; margin-bottom:0.5em;">Required Ingredients</div>
+    <!-- Left Column: Ingredients -->
+    <div>
+      <h4 class="recipe-section-title">📦 Required Materials</h4>
+      <table class="recipe-table">
+        <tr class="recipe-table-header">
+          <th>Icon</th>
+          <th>Material</th>
+          <th>Qty</th>
+        </tr>
+        {{{ingredients}}}
+      </table>
+    </div>
-<table style="width:100%; border-collapse:collapse;">
+    <!-- Right Column: Crafting Info -->
-<tr>
+    <div>
-  <th style="text-align:left; padding:4px; width:32px">Icon</th>
+      <h4 class="recipe-section-title">⚙️ Crafting Details</h4>
-  <th style="text-align:left; padding:4px;">Material</th>
-  <th style="text-align:right; padding:4px;">Quantity</th>
+      <div class="crafting-details">
-</tr>
-{{{ingredients}}}
+        <div class="detail-item">
-</table>
+          <div class="detail-icon">{{{bench_icon}}}</div>
+          <div>
+            <div class="detail-label">Workbench</div>
+            <div class="detail-value">[[{{{bench}}}]]</div>
+          </div>
+        </div>
-<!-- Bench / Tier -->
+        <div class="detail-item">
-<div style="margin-top:1em; font-size:90%;">
+          <div class="detail-icon">⭐</div>
-<span style="font-weight:bold;">Workbench:</span> [[{{{bench}}}]]<br/>
+          <div>
-<span style="font-weight:bold;">Required Tier:</span> {{{tier}}}<br/>
+            <div class="detail-label">Workbench Tier</div>
-<span style="font-weight:bold;">Crafting Time:</span> {{{time}}}<br/>
+            <div class="detail-value">{{{tier}}}</div>
-<span style="font-weight:bold;">Requirements:</span> {{{requirements}}}
+          </div>
-</div>
+        </div>
-</div>
+        <div class="detail-item">
+          <div class="detail-icon">⏱️</div>
+          <div>
+            <div class="detail-label">Crafting Time</div>
+            <div class="detail-value">{{{time}}}</div>
+          </div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-icon">📋</div>
+          <div>
+            <div class="detail-label">Requirements</div>
+            <div class="detail-value">{{{requirements}}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>