Add small tutorial

src/css/ingame_hud/tutorial_hints.scss

@@ -0,0 +1,68 @@
+#ingame_HUD_TutorialHints {
+    position: absolute;
+    @include S(left, 10px);
+    @include S(bottom, 50px);
+    display: flex;
+    flex-direction: column;
+    background: rgba(50, 60, 70, 0);
+
+    transition: all 0.2s ease-in-out;
+    pointer-events: all;
+
+    transition-property: background-color, transform, bottom, left;
+
+    @include S(padding, 5px);
+    video {
+        transition: all 0.2s ease-in-out;
+        transition-property: opacity, width;
+        @include S(width, 0px);
+        opacity: 0;
+    }
+
+    .header {
+        @include PlainText;
+        color: #333438;
+        display: grid;
+        align-items: center;
+        @include S(grid-gap, 2px);
+        grid-template-columns: 1fr;
+        @include S(margin-bottom, 3px);
+    }
+    button.toggleHint {
+        .hide {
+            display: none;
+        }
+    }
+
+    &.enlarged {
+        background: rgba(50, 60, 70, 0.9);
+        left: 50%;
+        bottom: 50%;
+        transform: translate(-50%, 50%);
+
+        .header {
+            grid-template-columns: 1fr auto;
+            color: #fff;
+        }
+
+        video {
+            @include InlineAnimation(0.2s ease-in-out) {
+                0% {
+                    opacity: 0;
+                    @include S(width, 0px);
+                }
+            }
+
+            opacity: 1;
+            @include S(width, 500px);
+        }
+        button.toggleHint {
+            .hide {
+                display: block;
+            }
+            .show {
+                display: none;
+            }
+        }
+    }
+}

src/css/main.scss

@@ -44,6 +44,7 @@
 @import "ingame_hud/settings_menu";
 @import "ingame_hud/debug_info";
 @import "ingame_hud/entity_debugger";
+@import "ingame_hud/tutorial_hints";
 
 // prettier-ignore
 $elements: 
@@ -57,13 +58,14 @@ ingame_HUD_PlacerVariants,
 
 // Regular hud
 ingame_HUD_PinnedShapes,
-ingame_HUD_buildings_toolbar,
 ingame_HUD_GameMenu,
 ingame_HUD_KeybindingOverlay,
 ingame_HUD_Notifications,
 ingame_HUD_MassSelector,
 ingame_HUD_DebugInfo,
 ingame_HUD_EntityDebugger,
+ingame_HUD_TutorialHints,
+ingame_HUD_buildings_toolbar,
 
 // Overlays
 ingame_HUD_BetaOverlay,
@@ -91,7 +93,8 @@ body.uiHidden {
     #ingame_HUD_GameMenu,
     #ingame_HUD_MassSelector,
     #ingame_HUD_PinnedShapes,
-    #ingame_HUD_Notifications {
+    #ingame_HUD_Notifications,
+    #ingame_HUD_TutorialHints {
         display: none !important;
     }
 }
@@ -99,7 +102,7 @@ body.uiHidden {
 body.modalDialogActive,
 body.externalAdOpen,
 body.ingameDialogOpen {
-    > *:not(.ingameDialog):not(.modalDialogParent):not(.loadingDialog):not(.gameLoadingOverlay):not(#ingame_HUD_ModalDialogs) {
+    > *:not(.ingameDialog):not(.modalDialogParent):not(.loadingDialog):not(.gameLoadingOverlay):not(#ingame_HUD_ModalDialogs):not(.noBlur) {
         filter: blur(5px) !important;
     }
 }