Minor css improvements

src/css/common.scss

@@ -205,7 +205,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);
     // color: $accentColorDark;
@@ -345,6 +345,7 @@ canvas {
 
 ::-webkit-scrollbar-thumb {
     // border-radius: 4px;
+    @include S(border-radius, $globalBorderRadius);
     background: #cdd0d4;
 }
 

src/css/ingame_hud/buildings_toolbar.scss

@@ -23,6 +23,9 @@
         transform: translateX(-50%) translateY(#{D(100px)});
     }
 
+    @include S(border-top-left-radius, $globalBorderRadius);
+    @include S(border-top-right-radius, $globalBorderRadius);
+
     .buildings {
         display: grid;
         grid-auto-flow: column;

src/css/ingame_hud/interactive_tutorial.scss

@@ -15,6 +15,8 @@
     display: flex;
     flex-direction: column;
 
+    @include S(border-radius, $globalBorderRadius);
+
     @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
         0% {
         }

src/css/states/main_menu.scss

@@ -265,13 +265,15 @@
             @include S(min-width, 130px);
             @include S(padding, 15px, 20px);
             letter-spacing: 0.3em !important;
-
+            @include IncreasedClickArea(0px);
             font-weight: bold;
             color: #fff;
             background-color: $colorGreenBright;
-            transition: transform 0.12s ease-in-out;
+            transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out;
+
             &:hover {
-                transform: scale(1.02);
+                background-color: darken($colorGreenBright, 4);
+                opacity: 1;
             }
 
             &.continueButton {
@@ -281,9 +283,11 @@
 
         .importButton {
             @include S(margin-top, 15px);
+            @include IncreasedClickArea(0px);
         }
 
         .newGameButton {
+            @include IncreasedClickArea(0px);
             @include S(margin-top, 15px);
             @include S(margin-left, 15px);
         }
@@ -306,8 +310,8 @@
                 display: grid;
                 grid-template-columns: 1fr auto auto;
                 grid-template-rows: auto auto;
-                @include S(grid-column-gap, 5px);
+                @include S(grid-column-gap, 4px);
-                @include S(grid-row-gap, 3px);
+                @include S(grid-row-gap, 1px);
 
                 .playtime {
                     grid-column: 1 / 2;
@@ -325,12 +329,9 @@
                 button.resumeGame,
                 button.downloadGame,
                 button.deleteGame {
-                    grid-column: 3 / 4;
-                    grid-row: 1 / 3;
-                    @include S(width, 30px);
-                    @include S(height, 30px);
                     padding: 0;
                     align-self: center;
+                    justify-self: center;
                     @include IncreasedClickArea(0px);
                     background: #44484a uiResource("icons/play.png") center center / 40% no-repeat;
                 }
@@ -338,12 +339,13 @@
                 button.downloadGame {
                     grid-column: 2 / 3;
                     grid-row: 1 / 2;
+                    background-color: $colorBlueBright;
                     background-image: uiResource("icons/download.png");
                     @include S(width, 15px);
                     @include IncreasedClickArea(0px);
                     @include S(height, 15px);
-                    align-self: end;
                     background-size: 60%;
+                    align-self: start;
                 }
 
                 button.deleteGame {
@@ -357,6 +359,14 @@
                     align-self: end;
                     background-size: 60%;
                 }
+
+                button.resumeGame {
+                    grid-column: 3 / 4;
+                    grid-row: 1 / 3;
+                    margin: 0;
+                    @include S(width, 32px);
+                    height: 100%;
+                }
             }
         }
     }
@@ -370,7 +380,7 @@
         grid-template-columns: auto auto auto 1fr;
         @include S(padding, 10px);
         box-sizing: border-box;
-        @include S(grid-gap, 5px);
+        @include S(grid-gap, 4px);
 
         .author {
             flex-grow: 1;
@@ -390,7 +400,7 @@
             grid-template-columns: 1fr auto;
 
             justify-content: center;
-            background: #fdfdfd;
+            background: #fdfdfd 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);
@@ -401,15 +411,14 @@
             text-transform: uppercase;
             color: #616266;
 
-            transition: all 0.12s ease-in-out;
+            transition: background-color 0.12s ease-in-out;
-            transition-property: background-color, transform;
             pointer-events: all;
             @include S(width, 120px);
             @include S(height, 60px);
 
             cursor: pointer;
             &:hover {
-                background-color: #fff;
+                background-color: #f0f6ff;
             }
 
             .thirdpartyLogo {
@@ -432,7 +441,7 @@
             align-items: flex-start;
             justify-content: flex-start;
             grid-template-rows: 1fr 1fr 1fr;
-            @include S(grid-gap, 2px);
+            @include S(grid-gap, 3px);
             @include S(height, 60px);
 
             > a {
@@ -441,7 +450,7 @@
                 height: 100%;
 
                 &:hover {
-                    background-color: #fff;
+                    background-color: #f0f6ff;
                 }
                 @include SuperSmallText;
                 text-transform: uppercase;
@@ -457,6 +466,9 @@
                 background-position: #{D(5px)} center;
                 background-size: #{D(12px)};
                 background-repeat: no-repeat;
+                @include S(border-radius, $globalBorderRadius);
+
+                transition: background-color 0.12s ease-in-out;
 
                 &.redditLink {
                     background-image: uiResource("main_menu/reddit.svg");

src/css/variables.scss

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