Merge steam-demo branch

src/css/ingame_hud/standalone_advantages.scss

@@ -52,6 +52,11 @@
             }
         }
 
+        .playtimeDisclaimer {
+            @include S(margin-bottom, 10px);
+            @include PlainText;
+        }
+
         .steamLinkButton {
             @include IncreasedClickArea(5px);
             @include S(margin, 0);

src/css/ingame_hud/steam_capsule.scss

@@ -1,10 +1,16 @@
-#ingame_HUD_CatMemes {
+#ingame_HUD_SteamCapsule {
     position: absolute;
     @include S(width, 150px);
-    @include S(height, 150px);
-    background: transparent center center / contain no-repeat;
+    @include S(height, 119px);
+    background: transparent center center / cover no-repeat;
 
-    right: 0;
+    pointer-events: all;
+    overflow: hidden;
+    @include S(right, 10px);
+
+    border: D(2px) solid #000;
+    @include S(border-radius, $globalBorderRadius);
+    cursor: pointer;
     @include S(bottom, 150px);
 
     & {
@@ -12,6 +18,10 @@
         background-image: uiResource("res/ui/memes/cat1.png") !important;
     }
 
+    &:hover {
+        opacity: 0.95;
+    }
+
     @include InlineAnimation(0.5s ease-in-out) {
         0% {
             transform: translateX(100%);

src/css/main.scss

@@ -57,7 +57,7 @@
 @import "ingame_hud/shape_viewer";
 @import "ingame_hud/sandbox_controller";
 @import "ingame_hud/standalone_advantages";
-@import "ingame_hud/cat_memes";
+@import "ingame_hud/steam_capsule";
 @import "ingame_hud/puzzle_back_to_menu";
 @import "ingame_hud/puzzle_editor_review";
 @import "ingame_hud/puzzle_dlc_logo";
@@ -105,6 +105,7 @@ ingame_HUD_Waypoints_Hint,
 ingame_HUD_WatermarkClicker,
 ingame_HUD_Watermark,
 ingame_HUD_ColorBlindBelowTileHelper,
+ingame_HUD_SteamCapsule,
 ingame_HUD_SandboxController,
 
 // Overlays
@@ -118,8 +119,7 @@ ingame_HUD_StandaloneAdvantages,
 ingame_HUD_UnlockNotification,
 ingame_HUD_PuzzleCompleteNotification,
 ingame_HUD_SettingsMenu,
-ingame_HUD_ModalDialogs,
-ingame_HUD_CatMemes;
+ingame_HUD_ModalDialogs;
 
 $zindex: 100;
 
@@ -132,7 +132,7 @@ $zindex: 100;
 }
 
 body.uiHidden {
-    > div {
+    > div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not(#ingame_HUD_UnlockNotification):not(#ingame_HUD_PuzzleCompleteNotification) {
         display: none !important;
     }
 }

src/css/states/main_menu.scss

@@ -97,7 +97,7 @@
         }
 
         .standaloneBanner {
-            background: rgb(216, 79, 76);
+            background: rgba(12, 168, 93, 0.957);
             @include S(border-radius, $globalBorderRadius);
             box-sizing: border-box;
             @include S(padding, 15px);
@@ -129,8 +129,18 @@
                 @include S(padding-left, 20px);
                 li {
                     @include Text;
+                    color: #fff;
                 }
             }
+            strong {
+                margin: 0;
+            }
+
+            .playtimeDisclaimer {
+                color: #fff;
+                @include S(margin-top, 15px);
+                @include SuperSmallText;
+            }
 
             .steamLink {
                 align-self: center;
@@ -153,6 +163,12 @@
                     opacity: 0.9;
                 }
 
+                @include InlineAnimation(1s ease-in-out infinite) {
+                    50% {
+                        transform: scale(1.02, 1.03);
+                    }
+                }
+
                 > .discount {
                     position: absolute;
                     @include S(top, -7px);
@@ -186,9 +202,8 @@
         img {
             @include S(width, 300px);
         }
-
         position: relative;
-        @include S(left, -22px);
+        @include S(left, -8px);
 
         .updateLabel {
             position: absolute;
@@ -677,25 +692,19 @@
     }
 
     .footer {
-        display: grid;
+        display: flex;
         flex-grow: 1;
         justify-content: center;
         align-items: flex-end;
         width: 100%;
-        grid-template-columns: auto auto auto 1fr;
         @include S(padding, 10px);
         box-sizing: border-box;
         @include S(grid-gap, 4px);
 
-        &.noLinks {
-            grid-template-columns: auto 1fr;
-        }
-
         &.wegameDisclaimer {
             @include SuperSmallText;
             display: grid;
             justify-content: center;
-            grid-template-columns: 1fr auto 1fr;
             text-align: center;
 
             > .disclaimer {

src/css/states/settings.scss

@@ -47,6 +47,10 @@
                 align-self: end;
                 margin-top: auto;
 
+                &.noabout {
+                    align-self: start;
+                }
+
                 @include StyleBelowWidth($layoutBreak) {
                     margin-top: 0;
                     display: grid;