Rebranding and minor polishing, part 2

src/css/common.scss

@@ -195,6 +195,7 @@ button {
     border: 0;
     background: $colorBlueBright;
     color: #fff;
+
     @include S(border-radius, $globalBorderRadius);
     // border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
     @include S(border-bottom-width, 2px);
@@ -673,7 +674,7 @@ input.rangeInput {
     text-transform: uppercase;
     @include S(padding, 1.5px, 3px, 2px);
     @include PlainText;
-    @include S(border-radius, $globalBorderRadius);
+    @include S(border-radius, 0.5 * $globalBorderRadius);
     &,
     > span {
         @include S(font-size, 9px);
@@ -682,6 +683,7 @@ input.rangeInput {
         text-shadow: none !important;
         // font-family: Arial, sans-serif !important;
     }
+
     font-weight: bold;
     color: $accentColorDark;
     text-align: center;

src/css/ingame_hud/building_placer.scss

@@ -14,9 +14,9 @@
     grid-template-columns: 1fr auto;
     grid-template-rows: auto 1fr;
 
-    @include DarkThemeOverride {
-        background-color: #55585a;
-    }
+    // @include DarkThemeOverride {
+    //     // background-color: #55585a;
+    // }
 
     transition: opacity 0.1s ease-out;
     &.hovered {
@@ -133,7 +133,7 @@
 
             grid-row: 2 / 3;
             @include S(border-radius, $globalBorderRadius);
-            background: rgba($ingameHudBg, 0.3);
+            background: rgba($ingameHudBg, 0.5);
             opacity: 0.5;
             display: inline-flex;
             vertical-align: top;

src/css/ingame_hud/buildings_toolbar.scss

@@ -7,6 +7,7 @@
     display: grid;
     grid-template-rows: auto auto;
     justify-items: center;
+    @include S(grid-gap, 4px);
 
     background: transparent;
     transition: transform 120ms ease-in-out;
@@ -32,8 +33,6 @@
 
         &.secondary {
             grid-row: 1 / 2;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
 
             .building {
                 @include S(width, 30px);
@@ -108,7 +107,7 @@
                 &.selected {
                     // transform: scale(1.05);
                     background-color: rgba(lighten($colorBlueBright, 9), 0.4);
-                    @include S(border-radius, 2px);
+                    @include S(border-radius, $globalBorderRadius);
 
                     .keybinding {
                         color: #111;

src/css/ingame_hud/dialogs.scss

@@ -96,6 +96,8 @@
                 @include S(grid-gap, 5px);
                 grid-template-columns: 1fr 1fr;
                 .option {
+                    @include S(border-radius, $globalBorderRadius);
+
                     pointer-events: all;
                     cursor: pointer;
                     @include S(padding, 10px);

src/css/ingame_hud/interactive_tutorial.scss

@@ -10,7 +10,7 @@
     @include S(width, 150px);
 
     background: $ingameHudBg;
-    @include S(padding, 4px);
+    @include S(padding, 7px);
     color: #eee;
     display: flex;
     flex-direction: column;
@@ -60,5 +60,6 @@
         @include S(height, 150px);
         background: center center / cover no-repeat;
         transition: opacity 0.1s ease-out;
+        @include S(border-radius, $globalBorderRadius);
     }
 }

src/css/ingame_hud/shape_viewer.scss

@@ -51,6 +51,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            @include S(border-radius, $globalBorderRadius);
 
             > canvas {
                 @include S(width, 50px);

src/css/ingame_hud/waypoints.scss

@@ -8,10 +8,11 @@
 
     @include PlainText;
     @include S(width, 150px);
-    background: rgba(0, 10, 20, 0.5);
-    @include S(padding, 5px);
+    background: $ingameHudBg;
+    @include S(padding, 7px);
 
     color: #eee;
+    @include S(border-radius, $globalBorderRadius);
 
     .desc {
         @include SuperSmallText;

src/css/states/main_menu.scss

@@ -63,9 +63,9 @@
         opacity: 0;
         display: none;
         transform: translate(50%, 50%);
-        filter: blur(D(3px));
+        filter: blur(D(7px));
 
-        $opacity: 0.07;
+        $opacity: 0.4;
         &.loaded {
             display: block;
             opacity: $opacity;
@@ -241,6 +241,7 @@
         position: relative;
         @include S(padding, 20px);
         @include S(border-radius, $globalBorderRadius);
+        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
 
         > .badge {
             color: #fff;
@@ -398,6 +399,8 @@
         @include S(padding, 20px);
         @include S(border-radius, $globalBorderRadius);
         // border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
+
+        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
         height: 100%;
         width: 100%;
         box-sizing: border-box;
@@ -716,18 +719,31 @@
         }
 
         .author {
-            flex-grow: 1;
+            margin-left: auto;
             text-align: right;
             @include PlainText;
-            color: #888a8f;
+            color: #000;
+
             a {
-                color: #333438;
+                &:hover {
+                    opacity: 0.8;
+                }
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                img {
+                    @include S(margin-left, 5px);
+                    @include S(margin-top, 3px);
+                    @include S(width, 50px);
+                    filter: invert(100%);
+                }
             }
         }
 
         @include S(padding, 15px);
 
-        $linkBg: #fdfdff;
+        $linkBg: rgba(#fdfdff, 0.5);
         $linkBgHover: darken($linkBg, 2);
         $linkColor: #55586a;
 
@@ -737,11 +753,9 @@
             grid-template-columns: 1fr auto;
 
             justify-content: center;
+            backdrop-filter: blur(5px);
+            background: $linkBg;
 
-            & {
-                /* @load-async */
-                background: $linkBg uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
-            }
             @include S(padding, 5px);
             @include S(padding-left, 10px);
             @include S(border-radius, $globalBorderRadius);
@@ -830,7 +844,7 @@
     }
 
     @include DarkThemeOverride {
-        background: $darkModeGameBackground center center / cover !important;
+        background: rgba($darkModeGameBackground, 0.5) center center / cover !important;
 
         .mainContainer {
             background: $darkModeControlsBackground;
@@ -861,19 +875,11 @@
         .footer {
             > a,
             .sidelinks > a {
-                background-color: $darkModeControlsBackground;
+                background-color: rgba($darkModeControlsBackground, 0.3);
                 color: #eee;
 
                 &:hover {
-                    background-color: darken($darkModeControlsBackground, 5);
-                }
-            }
-
-            .author {
-                color: #bdbdbd;
-
-                > a {
-                    color: white;
+                    background-color: rgba(darken($darkModeControlsBackground, 5), 0.5);
                 }
             }
 

src/css/variables.scss

@@ -1,4 +1,4 @@
-$globalBorderRadius: 2px;
+$globalBorderRadius: 6px;
 
 // When to reduce control elements size for small devices
 $layoutExpandMinWidth: 340px;

src/html/index.standalone.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>shapez.io Standalone</title>
+        <title>shapez</title>
 
         <!-- mobile stuff -->
         <meta name="format-detection" content="telephone=no" />

src/js/core/background_resources_loader.js

@@ -21,6 +21,10 @@ export function getLogoSprite() {
         return "logo_cn.png";
     }
 
+    if (G_IS_STANDALONE) {
+        return "logo.png";
+    }
+
     if (G_IS_BROWSER) {
         return "logo_demo.png";
     }

src/js/states/main_menu.js

@@ -40,7 +40,7 @@ export class MainMenuState extends GameState {
         const showExitAppButton = G_IS_STANDALONE;
         const showUpdateLabel = !G_WEGAME_VERSION;
         const showBrowserWarning = !G_IS_STANDALONE && !isSupportedBrowser();
-        const showPuzzleDLC = !G_WEGAME_VERSION && (G_IS_STANDALONE || G_IS_DEV);
+        const showPuzzleDLC = !G_WEGAME_VERSION && G_IS_STANDALONE;
         const showWegameFooter = G_WEGAME_VERSION;
         const hasMods = MODS.anyModsActive();
 
@@ -146,9 +146,6 @@ export class MainMenuState extends GameState {
                         <button class="styledButton puzzleDlcGetButton">${
                             T.mainMenu.puzzleDlcViewNow
                         }</button>
-                        <span class="hint">
-                            ${T.puzzleMenu.dlcHint}
-                        </span>
                     </div>`
                         : ""
                 }
@@ -230,10 +227,10 @@ export class MainMenuState extends GameState {
 
                         ${showExternalLinks ? `<a class="helpTranslate">${T.mainMenu.helpTranslate}</a>` : ""}
                     </div>
-                    <div class="author">${T.mainMenu.madeBy.replace(
+                    <div class="author"><a class="producerLink" target="_blank">${T.mainMenu.madeBy.replace(
                         "<author-link>",
-                        '<a class="producerLink" target="_blank">tobspr Games</a>'
-                    )}</div>
+                        `<img src="${cachebust("res/logo-tobspr-games.svg")}">`
+                    )}</a></div>
                 </div>
 
                 ${

src/js/states/mobile_warning.js

@@ -18,12 +18,12 @@ export class MobileWarningState extends GameState {
                 There is also no estimate when this will change, but feel to make a contribution! It's
                 &nbsp;<a href="https://github.com/tobspr/shapez.io" target="_blank">open source</a>!</p>
 
-            <p>If you want to play on your computer, you can also get the standalone on Steam:</p>
+            <p>If you want to play on your computer, you can also get the game on Steam:</p>
 
 
             <a href="${
                 THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_mobile"
-            }" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a>
+            }" class="standaloneLink" target="_blank">Get on Steam!</a>
         `;
     }
 

src/js/states/mods.js

@@ -47,7 +47,7 @@ export class ModsState extends TextualGameState {
 
                     <p>${T.mods.noModSupport}</p>
 
-                    <a href="#" class="steamLink steam_2_npr" target="_blank">Get the shapez.io standalone!</a>
+                    <a href="#" class="steamLink steam_2_npr" target="_blank">Get on Steam!</a>
 
 
                 </div>