Add support for different building variants

src/css/ingame_hud/building_placer.scss

@@ -1,6 +1,6 @@
-#ingame_HUD_building_placer {
+#ingame_HUD_PlacementHints {
     position: fixed;
-    @include S(top, 40px);
+    @include S(top, 60px);
     @include S(right, 10px);
 
     display: grid;
@@ -54,3 +54,60 @@
         display: none !important;
     }
 }
+
+#ingame_HUD_PlacerVariants {
+    position: absolute;
+    @include S(left, 10px);
+    @include S(bottom, 80px);
+    display: grid;
+    grid-auto-flow: row;
+    @include S(grid-gap, 5px);
+
+    .explanation {
+        @include PlainText;
+        .keybinding {
+            position: relative;
+        }
+    }
+
+    .variant {
+        @include S(border-radius, 4px);
+        background: rgba(0, 10, 20, 0.1);
+        display: grid;
+        position: relative;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+        @include S(padding, 5px);
+        @include S(grid-gap, 10px);
+
+        &.active {
+            background-color: rgba(74, 163, 223, 0.6);
+        }
+
+        $iconSize: 25px;
+
+        .iconWrap {
+            grid-column: 1 / 2;
+            grid-row: 1 / 2;
+            position: relative;
+            @include S(width, $iconSize);
+            @include S(height, $iconSize);
+            background: center center / contain no-repeat;
+
+            &[data-tile-w="2"] {
+                @include S(width, 2 * $iconSize);
+            }
+
+            &[data-tile-h="2"] {
+                @include S(height, 2 * $iconSize);
+            }
+        }
+
+        .label {
+            grid-column: 2 / 3;
+            grid-row: 1 / 2;
+            @include PlainText;
+            color: #fff;
+        }
+    }
+}

src/css/ingame_hud/buildings_toolbar.scss

@@ -22,7 +22,7 @@
     .buildings {
         display: grid;
         grid-auto-flow: column;
-        @include S(padding, 0, 5px);
+        @include S(margin-bottom, 2px);
 
         .building {
             color: $accentColorDark;
@@ -33,19 +33,17 @@
             justify-content: center;
             @include S(padding, 5px);
             @include S(padding-bottom, 1px);
-            $buildingIconSize: 32px;
+            @include S(width, 35px);
+            @include S(height, 40px);
+
+            background: center center / 70% no-repeat;
 
             &:not(.unlocked) {
                 @include S(width, 30px);
-                .tooltip {
-                    display: none !important;
-                }
-                .keybinding,
-                .iconWrap {
-                    opacity: 0.01;
-                }
+                opacity: 0.8;
+                background-image: none !important;
+
                 &::before {
-                    opacity: 0.5;
                     content: " ";
                     background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
                         no-repeat;
@@ -58,8 +56,10 @@
                 }
             }
 
+            @include S(border-radius, 4px);
+
             &.selected {
-                background: rgba(74, 163, 223, 0.3) !important;
+                background-color: rgba(74, 163, 223, 0.3) !important;
                 transform: scale(1.05);
                 .keybinding {
                     color: #111;
@@ -69,35 +69,11 @@
             pointer-events: all;
             transition: all 0.05s ease-in-out;
             transition-property: background-color, transform;
+
             &.unlocked:hover {
-                background: rgba($accentColorDark, 0.1);
+                background-color: rgba($accentColorDark, 0.1);
                 cursor: pointer;
             }
-
-            .iconWrap {
-                position: relative;
-                @include S(width, $buildingIconSize);
-                @include S(height, $buildingIconSize);
-                @include S(margin-top, 3px);
-                @include S(margin-bottom, 6px);
-            }
-
-            .label {
-                @include SuperSmallText;
-                display: none;
-                font-weight: bold;
-                text-transform: uppercase;
-            }
-
-            &[data-tilewidth="2"] {
-                .iconWrap {
-                    @include S(width, 2 * $buildingIconSize);
-                }
-            }
-
-            &:last-child {
-                border: none;
-            }
         }
     }
 }

src/css/ingame_hud/mass_selector.scss

@@ -8,8 +8,11 @@
     @include S(padding, 9px);
     @include PlainText;
     color: #fff;
+    display: flex;
+    align-items: center;
 
     .keybinding {
+        @include S(margin, 0, 4px);
         position: relative;
         top: unset;
         left: unset;

src/css/ingame_hud/pinned_shapes.scss

@@ -1,7 +1,7 @@
 #ingame_HUD_PinnedShapes {
     position: absolute;
     @include S(left, 9px);
-    @include S(top, 120px);
+    @include S(top, 150px);
     @include PlainText;
     display: flex;
     flex-direction: column;

src/css/ingame_hud/shop.scss

@@ -101,7 +101,7 @@
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                    @include S(width, 65px);
+                    @include S(width, 75px);
 
                     button.pin {
                         @include S(width, 12px);

src/css/ingame_hud/statistics.scss

@@ -148,11 +148,13 @@
                     grid-column: 3 / 4;
                     grid-row: 1 / 2;
                     @include Heading;
+                    align-self: center;
+                    text-align: right;
                     color: #55595a;
                 }
 
                 canvas.graph {
-                    @include S(width, 300px);
+                    @include S(width, 270px);
                     @include S(height, 40px);
                     @include S(border-radius, 0, 0, 2px, 2px);
                     $color: rgba(0, 10, 20, 0.04);