diff --git a/res/ui/icons/download.png b/res/ui/icons/download.png index bb28bf81..68ed3fb4 100644 Binary files a/res/ui/icons/download.png and b/res/ui/icons/download.png differ diff --git a/res/ui/icons/link.png b/res/ui/icons/link.png new file mode 100644 index 00000000..f51ca38b Binary files /dev/null and b/res/ui/icons/link.png differ diff --git a/src/css/common.scss b/src/css/common.scss index 6a87012e..b2078fa2 100644 --- a/src/css/common.scss +++ b/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; } diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss index 8decc232..65923db8 100644 --- a/src/css/ingame_hud/buildings_toolbar.scss +++ b/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; diff --git a/src/css/ingame_hud/interactive_tutorial.scss b/src/css/ingame_hud/interactive_tutorial.scss index d4fb58e1..3585c2af 100644 --- a/src/css/ingame_hud/interactive_tutorial.scss +++ b/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% { } diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 0981cdfc..07a47c2e 100644 --- a/src/css/states/main_menu.scss +++ b/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-row-gap, 3px); + @include S(grid-column-gap, 4px); + @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-property: background-color, transform; + transition: background-color 0.12s ease-in-out; 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"); diff --git a/src/css/variables.scss b/src/css/variables.scss index c1c69371..7646e471 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,4 +1,4 @@ -$globalBorderRadius: 0px; +$globalBorderRadius: 2px; // When to reduce control elements size for small devices $layoutExpandMinWidth: 340px;