Merge pull request #458 from Djspaceg/ui/optimization-1

Optimized some UI layers for fewer paints on interaction

src/css/ingame_hud/buildings_toolbar.scss

@@ -4,17 +4,18 @@
     left: 50%;
     transform: translateX(-50%);
 
+    // NOTE: This flex rule may not be necessary. Need to find out intent.
     display: flex;
     flex-direction: column;
-    background-color: rgb(255, 255, 255);
     background: transparent;
     border-bottom-width: 0;
-    transition: transform 0.12s ease-in-out;
+    transition: transform 120ms ease-in-out;
+    will-change: transform;
 
-    background: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
+    background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
 
     @include DarkThemeOverride {
-        background: #222428;
+        background-color: #222428;
     }
 
     &:not(.visible) {
@@ -60,21 +61,43 @@
 
             @include S(border-radius, $globalBorderRadius);
 
-            &.selected {
+            &.unlocked {
-                background-color: rgba($colorBlueBright, 0.6) !important;
+                pointer-events: all;
-                transform: scale(1.05);
+                transition: all 50ms ease-in-out;
-                .keybinding {
+                transition-property: background-color, transform;
-                    color: #111;
-                }
-            }
-
-            pointer-events: all;
-            transition: all 0.05s ease-in-out;
-            transition-property: background-color, transform;
-
-            &.unlocked:hover {
-                background-color: rgba($accentColorDark, 0.1);
                 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;
+                }
+
+                &:hover {
+                    &::before {
+                        opacity: 0.1;
+                    }
+                }
+
+                &.selected {
+                    transform: scale(1.05);
+
+                    &::before {
+                        background-color: $colorBlueBright;
+                        opacity: 0.6;
+                    }
+
+                    .keybinding {
+                        color: #111;
+                    }
+                }
             }
         }
     }

src/css/ingame_hud/game_menu.scss

@@ -22,6 +22,7 @@
             cursor: pointer;
             transition: all 0.12s ease-in-out;
             transition-property: opacity, transform;
+            will-change: opacity;
             opacity: 0.9;
             @include S(margin-left, 5px);
             position: relative;

src/css/ingame_hud/keybindings_overlay.scss

@@ -8,6 +8,10 @@
     align-items: flex-start;
     color: #333438;
     // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.1);
+    backdrop-filter: blur(D(3px));
+    border: D(1px) solid #d2d2d2;
+    border-radius: D(6px);
+    padding: D(3px);
 
     @include DarkThemeOverride {
         color: #fff;

src/css/ingame_hud/pinned_shapes.scss

@@ -18,6 +18,7 @@
         @include S(margin-bottom, 4px);
         color: #333438;
         // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
+        filter: drop-shadow(#{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2));
 
         &.unpinable {
             > canvas {
@@ -33,10 +34,12 @@
             grid-row: 1 / 3;
             pointer-events: all;
             transition: transform 0.1s ease-in-out;
+            transform-origin: D(2px) center;
+            will-change: transform;
             position: relative;
             z-index: 20;
             &:hover {
-                transform: scale(2) translateX(#{D(5px)});
+                transform: scale(2);
                 z-index: 21;
             }
         }

src/css/mixins.scss

@@ -2,8 +2,8 @@
 /* Forces an element to get rendered on its own layer, increasing
 the performance when animated. Use only transform and opacity in animations! */
 @mixin FastAnimation {
-    // will-change: transform, opacity;
+    will-change: transform, opacity, filter;
-    transform: translateZ(0);
+    // transform: translateZ(0);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }