diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss index be97da96..c8ed3315 100644 --- a/src/css/ingame_hud/dialogs.scss +++ b/src/css/ingame_hud/dialogs.scss @@ -11,6 +11,16 @@ align-items: center; justify-content: center; + @include InlineAnimation(0.12s ease-in-out) { + 0% { + background-color: transparent; + opacity: 0.5; + } + 100% { + background-color: $modalDialogBg; + } + } + &.visible { .dialogInner { opacity: 1; diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index 10531c4a..e32adfce 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -1,7 +1,6 @@ #ingame_HUD_GameMenu { position: absolute; top: 0; - left: calc(50% - #{D(50px)}); right: 0; display: flex; grid-auto-flow: column; @@ -12,6 +11,7 @@ flex-grow: 1; @include S(padding, 5px, 4px); justify-content: flex-end; + @include S(margin-left, 20px); > .button { @include S(width, 30px); diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 4c1422bd..b75d3580 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -37,7 +37,7 @@ .mainWrapper { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: 1fr 1fr 1fr; @include S(padding, 0, 10px); align-items: center; justify-items: center; @@ -55,6 +55,7 @@ strong { font-weight: bold; + @include S(margin, 0, 4px); } h3 { @@ -133,13 +134,14 @@ .mainContainer { display: flex; align-items: center; - justify-content: flex-start; + justify-content: center; flex-direction: column; background: #fafafa; @include S(padding, 20px); @include S(border-radius, 4px); // border: #{D(2px)} solid rgba(0, 10, 20, 0.1); height: 100%; + width: 100%; box-sizing: border-box; .playButton {