Updates

index.html

@@ -180,26 +180,21 @@ <h2 class="title">Select a recipe <span class="game-version"></span></h2>
                     </div>
                     <div class="property" id="selected-recipe-input">
                         <div class="title">Input per min</div>
-                        <div class="resource">
-                            <img class="icon" alt="" />
-                            <p class="amount"></p>
-                        </div>
                     </div>
                     <div class="property" id="selected-recipe-output">
                         <div class="title">Output per min</div>
-                        <div class="resource">
-                            <img class="icon" alt="" />
-                            <p class="amount"></p>
-                        </div>
-                        <div class="resource">
-                            <img class="icon" alt="" />
-                            <p class="amount"></p>
-                        </div>
                     </div>
                     <div class="property" id="selected-recipe-power">
                         <div class="title">Power</div>
                         <div class="text"></div>
                     </div>
+                    <div class="property" id="selected-recipe-produced-power">
+                        <div class="title">Output (MW)</div>
+                        <div class="resource power">
+                            <img class="icon" alt="" src="GameData/SatisfactoryIcons/Resource/Power.png" />
+                            <p class="amount"></p>
+                        </div>
+                    </div>
                     <div class="button dimmed" id="discard-recipe">Discard</div>
                     <div class="button" id="confirm-recipe">Create node</div>
                 </div>

style.css

@@ -228,6 +228,10 @@ svg#canvas {
     fill: #8BAADA;
 }
 
+.node rect.output-slot.power {
+    fill: #ffce53;
+}
+
 .node rect.input-slot.missing {
     fill: var(--missing);
 }
@@ -244,7 +248,7 @@ svg#canvas {
 .node rect.machine:hover,
 .node rect.machine.selected,
 .node rect.input-slot:not(.missing):hover,
-.node rect.output-slot:not(.exceeding):hover,
+.node rect.output-slot:not(.exceeding):not(.power):hover,
 .node rect.input-slot.selected:not(.missing),
 .node rect.output-slot.selected:not(.exceeding) {
     filter: brightness(110%);
@@ -321,10 +325,18 @@ svg#canvas {
     height: 16px;
 }
 
+.node .recipe-container .property.power .resource img.icon {
+    margin: 0 -4px;
+}
+
 .node .recipe-container .property .resource p.amount {
     margin: 0;
 }
 
+.node .recipe-container .property.power .resource p.amount {
+    padding-top: 1px;
+}
+
 /* Recipe display near slots */
 
 .slots-group foreignObject.resources-display {
@@ -754,6 +766,7 @@ div#node-creation-modal .title span.game-version {
 
 #node-creation-modal div.recipe {
     display: flex;
+    flex-direction: column;
 
     position: relative;
 
@@ -765,14 +778,30 @@ div#node-creation-modal .title span.game-version {
     width: 64px;
 
     padding: 8px;
-    gap: 4px;
+    gap: 2px;
 
     border-radius: 0px;
 
     transition-property: border-radius, border-color;
     transition-duration: 0.2s;
 }
 
+#node-creation-modal .recipe div.ingredient-icons {
+    display: flex;
+
+    height: 12px;
+
+    gap: 1px;
+}
+
+#node-creation-modal .recipe div.product-icons {
+    display: flex;
+
+    height: 34px;
+
+    gap: 2px;
+}
+
 #node-creation-modal .recipe div.progress-bar {
     position: absolute;
 
@@ -894,11 +923,19 @@ div#node-creation-modal .title span.game-version {
     margin: 0;
 }
 
+#node-creation-modal #selected-recipe .property .resource.power p.amount {
+    padding-top: 2px;
+}
+
 #node-creation-modal #selected-recipe .property .machine img.icon {
     width: 40px;
     height: 40px;
 }
 
+#node-creation-modal #selected-recipe .property .resource.power img.icon {
+    margin: 0 -8px;
+}
+
 /* Node creation modal's confirmation button */
 
 #node-creation-modal div.button {