Add "interactive" tutorial for first level

src/css/ingame_hud/blueprint_placer.scss

@@ -5,7 +5,7 @@
     transform: translateX(-50%);
     color: #333;
     z-index: 9999;
-    background: rgba(0, 10, 20, 0.5);
+    background: $ingameHudBg;
     @include S(padding, 5px);
     display: flex;
     flex-direction: column;

src/css/ingame_hud/building_placer.scss

@@ -10,7 +10,7 @@
     @include S(width, 240px);
     @include S(grid-column-gap, 5px);
 
-    background: rgba(#333438, 0.8);
+    background: $ingameHudBg;
     grid-template-columns: 1fr auto;
     grid-template-rows: auto 1fr;
 
@@ -108,7 +108,8 @@
         .variant {
             grid-row: 2 / 3;
             @include S(border-radius, $globalBorderRadius);
-            background: rgba(0, 10, 20, 0.2);
+            background: rgba($ingameHudBg, 0.3);
+            opacity: 0.5;
             display: inline-flex;
             vertical-align: top;
             position: relative;
@@ -117,7 +118,8 @@
             @include S(grid-gap, 10px);
 
             &.active {
-                background-color: rgba(74, 163, 223, 0.6);
+                opacity: 1;
+                background-color: rgba($colorBlueBright, 0.8);
             }
 
             $iconSize: 25px;

src/css/ingame_hud/debug_info.scss

@@ -1,8 +1,9 @@
 #ingame_HUD_DebugInfo {
     position: absolute;
     @include S(bottom, 5px);
-    @include S(left, 5px);
+    @include S(right, 5px);
 
+    text-align: right;
     font-size: 15px;
     display: flex;
     line-height: 15px;

src/css/ingame_hud/interactive_tutorial.scss

@@ -0,0 +1,50 @@
+#ingame_HUD_InteractiveTutorial {
+    position: absolute;
+    @include S(left, 10px);
+    @include S(bottom, 10px);
+
+    @include StyleBelowWidth(1430px) {
+        @include S(bottom, 10px + 40px);
+    }
+
+    @include S(width, 150px);
+
+    background: $ingameHudBg;
+    @include S(padding, 4px);
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+
+    @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
+        0% {
+        }
+
+        50% {
+            transform: translateX(-100%);
+        }
+
+        100% {
+        }
+    }
+
+    .title {
+        color: #fff;
+        opacity: 0.5;
+        @include SuperSmallText;
+        text-transform: uppercase;
+    }
+
+    .desc {
+        @include SuperSmallText;
+        strong {
+            color: $colorBlueBright;
+            font-weight: bold;
+        }
+    }
+
+    .helperGif {
+        @include S(margin-top, 5px);
+        @include S(height, 150px);
+        background: center center / contain no-repeat;
+    }
+}

src/css/ingame_hud/mass_selector.scss

@@ -3,8 +3,7 @@
     @include S(top, 50px);
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(lighten(#f77, 5), 0.95);
-    @include S(border-radius, $globalBorderRadius);
+    background: $ingameHudBg;
     @include S(padding, 6px, 10px);
     @include SuperSmallText;
     color: #fff;

src/css/ingame_hud/tutorial_hints.scss

@@ -66,7 +66,7 @@
     }
 
     &.enlarged {
-        background: rgba(50, 60, 70, 0.9);
+        background: $ingameHudBg;
         left: 50%;
         bottom: 50%;
         transform: translate(-50%, 50%);
@@ -81,7 +81,7 @@
             bottom: -1000px;
             z-index: 0;
 
-            background: rgba(50, 60, 70, 0.3);
+            background: rgba($ingameHudBg, 0.3);
         }
 
         .header {

src/css/main.scss

@@ -49,6 +49,7 @@
 @import "ingame_hud/watermark";
 @import "ingame_hud/blueprint_placer";
 @import "ingame_hud/waypoints";
+@import "ingame_hud/interactive_tutorial";
 
 // prettier-ignore
 $elements: 
@@ -69,6 +70,7 @@ ingame_HUD_Notifications,
 ingame_HUD_MassSelector,
 ingame_HUD_DebugInfo,
 ingame_HUD_EntityDebugger,
+ingame_HUD_InteractiveTutorial,
 ingame_HUD_TutorialHints,
 ingame_HUD_buildings_toolbar,
 ingame_HUD_BlueprintPlacer,
@@ -79,9 +81,9 @@ ingame_HUD_Watermark,
 ingame_HUD_BetaOverlay,
 
 // Dialogs
-ingame_HUD_UnlockNotification,
 ingame_HUD_Shop,
 ingame_HUD_Statistics,
+ingame_HUD_UnlockNotification,
 ingame_HUD_SettingsMenu,
 ingame_HUD_ModalDialogs;
 

src/css/variables.scss

@@ -34,8 +34,7 @@ $colorGreenBright: #66bb6a;
 $colorBlueBright: rgb(74, 163, 223);
 $colorRedBright: #ef5072;
 $themeColor: #393747;
-$ingameHudBg: rgba($accentColorBright, 0.1);
-$ingameHudBorder: #{D(1.5px)} solid $accentColorDark;
+$ingameHudBg: rgba(#333438, 0.9);
 
 $text3dColor: #f4ffff;