UI Improvements

src/css/common.scss

@@ -563,7 +563,7 @@ canvas {
 .keybinding {
     background: #fff;
     text-transform: uppercase;
-    @include S(padding, 2px, 1px, 2px);
+    @include S(padding, 1.5px, 3px, 2px);
     @include PlainText;
     @include BorderRadius(2px);
     &,
@@ -589,7 +589,7 @@ canvas {
     box-sizing: border-box;
     @include S(height, 12px);
     overflow: hidden;
-    border: #{D(1px)} solid $accentColorDark;
+    border: #{D(0px)} solid $accentColorDark;
 
     .keybinding_space {
         @include S(font-size, 17px);

src/css/ingame_hud/building_placer.scss

@@ -1,30 +1,53 @@
 #ingame_HUD_building_placer {
     position: fixed;
-    @include S(top, 50px);
+    @include S(top, 40px);
     @include S(right, 10px);
 
-    display: flex;
-    flex-direction: column;
+    display: grid;
 
     @include S(padding, 6px);
-    justify-content: center;
-    align-items: flex-start;
-    @include S(border-radius, 4px);
-    background: rgba(#333, 0.9);
-    @include S(width, 200px);
+    @include S(border-radius, 2px);
+    @include S(width, 240px);
+    @include S(grid-column-gap, 5px);
+
+    background: rgba(#333438, 0.8);
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
 
     .buildingLabel {
         @include PlainText;
+        @include S(margin-bottom, 2px);
         color: #fff;
         text-transform: uppercase;
-        @include S(margin-bottom, 2px);
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
     }
 
-    .instructions,
     .description {
-        color: #fff;
-        opacity: 0.8;
+        color: #bbb;
         @include SuperSmallText;
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+        display: grid;
+        grid-template-rows: 1fr auto;
+
+        strong {
+            color: #fff;
+        }
+    }
+
+    .hotkey {
+        color: lighten($colorGreenBright, 10);
+        font-weight: bold;
+    }
+
+    .buildingImage {
+        grid-column: 2 / 3;
+        grid-row: 1 / 3;
+        @include S(width, 100px);
+        @include S(height, 100px);
+        background: top left / 100% 100% no-repeat;
+        @include S(border-radius, 2px);
     }
 
     @include StyleBelowWidth(700px) {

src/css/ingame_hud/buildings_toolbar.scss

@@ -7,14 +7,14 @@
     $toolbarBg: rgba($accentColorBright, 0.9);
     display: flex;
     flex-direction: column;
-    background-color: $toolbarBg;
-    // border: $ingameHudBorder;
+    background-color: rgb(255, 255, 255);
+    background: transparent;
     border-bottom-width: 0;
-
-    @include S(border-radius, 4px, 4px, 0, 0);
-    // box-shadow: 0 0 0 #{D(2px)} rgba(darken($toolbarBg, 20), 0.5);
     transition: transform 0.12s ease-in-out;
 
+    background: uiResource("toolbar_bg.lossless.png") center center / 100% 100% no-repeat;
+    @include S(padding, 20px, 100px, 0);
+
     &:not(.visible) {
         transform: translateX(-50%) translateY(#{D(100px)});
     }
@@ -32,7 +32,7 @@
             align-items: center;
             justify-content: center;
             @include S(padding, 5px);
-            @include S(padding-bottom, 7px);
+            @include S(padding-bottom, 1px);
             $buildingIconSize: 32px;
 
             &:not(.unlocked) {
@@ -59,7 +59,7 @@
             }
 
             &.selected {
-                background: rgb(173, 221, 253) !important;
+                background: rgba(74, 163, 223, 0.3) !important;
                 transform: scale(1.05);
                 .keybinding {
                     color: #111;
@@ -67,7 +67,7 @@
             }
 
             pointer-events: all;
-            transition: all 0.1s ease-in-out;
+            transition: all 0.05s ease-in-out;
             transition-property: background-color, transform;
             &.unlocked:hover {
                 background: rgba($accentColorDark, 0.1);
@@ -89,15 +89,6 @@
                 text-transform: uppercase;
             }
 
-            .keybinding {
-                // position: relative;
-                right: 50%;
-                transform: translateX(50%);
-                background: transparent;
-                border: 0;
-                @include S(bottom, 2pxpx);
-            }
-
             &[data-tilewidth="2"] {
                 .iconWrap {
                     @include S(width, 2 * $buildingIconSize);
@@ -107,80 +98,6 @@
             &:last-child {
                 border: none;
             }
-
-            .tooltip {
-                position: absolute;
-                pointer-events: none;
-                background: #333;
-                @include S(padding, 7px);
-                bottom: calc(100% + #{D(10px)});
-                left: 50%;
-                transform: translateX(-50%);
-                box-sizing: content-box;
-                @include SuperSmallText;
-                @include S(width, 200px);
-                @include S(border-radius, 4px);
-
-                box-shadow: #{D(1px)} #{D(1px)} 0 0 rgba(0, 10, 25, 0.2);
-
-                display: none;
-                z-index: 9999;
-
-                flex-direction: column;
-
-                .title {
-                    color: #fff;
-                    @include PlainText;
-                    text-transform: uppercase;
-                    margin-bottom: 5px;
-                }
-
-                .desc {
-                    color: #aaa;
-                    @include SuperSmallText;
-                    margin-bottom: 10px;
-                    strong {
-                        color: #fff;
-                    }
-                }
-
-                .tutorialImage {
-                    display: inline-block;
-                    @include S(width, 200px);
-                    @include S(height, 200px);
-                    @include S(border-radius, 4px);
-                    background-size: contain;
-                    background-repeat: no-repeat;
-                }
-
-                &::after {
-                    top: 100%;
-                    left: 50%;
-                    border: solid transparent;
-                    content: " ";
-                    height: 0;
-                    width: 0;
-                    position: absolute;
-                    pointer-events: none;
-                    border-top-color: #333;
-                    @include S(border-width, 5px);
-                    transform: translateX(-50%);
-                }
-            }
-
-            &:hover .tooltip {
-                display: flex;
-
-                @include InlineAnimation(0.5s ease-in-out) {
-                    90% {
-                        opacity: 0;
-                    }
-                    0% {
-                        transform: translate(-50%, 5%) scale(0.9);
-                        opacity: 0;
-                    }
-                }
-            }
         }
     }
 }

src/css/ingame_hud/keybindings_overlay.scss

@@ -38,6 +38,7 @@
                 background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
             }
         }
+
         label {
             color: $accentColorDark;
             @include SuperSmallText;
@@ -49,6 +50,7 @@
     &:not(.placementActive) .binding.placementOnly {
         display: none;
     }
+
     &.placementActive .binding.noPlacementOnly {
         display: none;
     }

src/css/ingame_hud/vignette_overlay.scss

@@ -0,0 +1,9 @@
+#ingame_VignetteOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: uiResource("vignette.lossless.png") center center / cover no-repeat;
+    pointer-events: none;
+}

src/css/main.scss

@@ -34,11 +34,12 @@
 @import "ingame_hud/blur_overlay";
 @import "ingame_hud/dialogs";
 @import "ingame_hud/mass_selector";
+@import "ingame_hud/vignette_overlay";
 
 // Z-Index
-$elements: ingame_Canvas, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu,
-    ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector,
-    ingame_HUD_UnlockNotification;
+$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar,
+    ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay,
+    ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
 
 $zindex: 100;
 

src/css/states/ingame.scss

@@ -13,4 +13,12 @@
         background: $mainBgColor;
         flex-direction: column;
     }
+
+    #ingame_Canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
 }