Further ui improvements, fix simple belts with wires

src/css/ingame_hud/buildings_toolbar.scss

@@ -1,6 +1,6 @@
 .ingame_buildingsToolbar {
-    position: fixed;
-    @include S(bottom, 0px);
+    position: absolute;
+    @include S(bottom, 5px);
     left: 50%;
     transform: translateX(-50%);
 
@@ -8,23 +8,25 @@
     display: flex;
     flex-direction: column;
     background: transparent;
-    border-bottom-width: 0;
     transition: transform 120ms ease-in-out;
     will-change: transform;
 
-    backdrop-filter: blur(D(5px));
+    backdrop-filter: blur(D(3px));
+    background-color: rgba(0, 40, 80, 0.05);
+    @include S(border-radius, $globalBorderRadius);
 
     @include DarkThemeOverride {
-        background-color: darken($darkModeGameBackground, 15);
+        background-color: rgba(darken($darkModeGameBackground, 15), 0.4);
+
+        &#ingame_HUD_wires_toolbar {
+            background-color: rgba(darken($darkModeGameBackground, 5), 0.1);
+        }
     }
 
     &:not(.visible) {
         transform: translateX(-50%) translateY(#{D(100px)});
     }
 
-    @include S(border-top-left-radius, $globalBorderRadius);
-    @include S(border-top-right-radius, $globalBorderRadius);
-
     .buildings {
         display: grid;
         grid-auto-flow: column;
@@ -41,7 +43,7 @@
             @include S(width, 35px);
             @include S(height, 40px);
 
-            background: center center / 65% no-repeat;
+            background: center center / 70% no-repeat;
 
             &:not(.unlocked) {
                 @include S(width, 20px);
@@ -67,25 +69,10 @@
                 pointer-events: all;
                 transition: all 50ms ease-in-out;
                 transition-property: background-color, transform;
-                cursor: pointer;
-                will-change: transform;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    background-color: $accentColorDark;
-                    opacity: 0;
-                    will-change: opacity;
-                }
 
+                cursor: pointer;
                 &:hover {
-                    &::before {
-                        opacity: 0.1;
-                    }
+                    background-color: rgba(30, 40, 90, 0.1);
                 }
 
                 &.pressed {
@@ -94,13 +81,7 @@
 
                 &.selected {
                     // transform: scale(1.05);
-
-                    &::before {
-                        background-color: rgba($colorBlueBright, 0.2);
-                        opacity: 1;
-                        border-top: D(3px) solid $colorBlueBright;
-                        @include S(top, -3px);
-                    }
+                    background-color: rgba(lighten($colorBlueBright, 9), 0.4);
 
                     .keybinding {
                         color: #111;

src/js/game/belt_path.js

@@ -1190,6 +1190,11 @@ export class BeltPath extends BasicSerializableObject {
             return false;
         }
 
+        if (this.root.currentLayer !== "regular") {
+            // Not in regular layer
+            return true;
+        }
+
         const mousePos = this.root.app.mousePosition;
         if (!mousePos) {
             // Mouse not registered

src/js/game/systems/belt.js

@@ -501,7 +501,7 @@ export class BeltSystem extends GameSystemWithFilter {
             // POTATO Mode: Only show items when belt is hovered
             let hoveredBeltPath = null;
             const mousePos = this.root.app.mousePosition;
-            if (mousePos) {
+            if (mousePos && this.root.currentLayer === "regular") {
                 const tile = this.root.camera.screenToWorld(mousePos).toTileSpace();
                 const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
                 if (contents && contents.components.Belt) {