MAPG-39 increase spaces between elements

This commit is contained in:
Bence Pőcze 2020-05-21 15:08:03 +02:00
parent 848c155c62
commit 532bc0416d

View File

@ -66,11 +66,11 @@ div.buttonContainer {
} }
div.buttonContainer.top { div.buttonContainer.top {
margin-bottom: 5px; margin-bottom: 10px;
} }
div.buttonContainer.bottom { div.buttonContainer.bottom {
margin-top: 5px; margin-top: 10px;
} }
#loading { #loading {
@ -92,7 +92,7 @@ div.buttonContainer.bottom {
#guess { #guess {
position: absolute; position: absolute;
bottom: 20px; bottom: 30px;
right: 20px; right: 20px;
z-index: 2; z-index: 2;
} }
@ -162,7 +162,7 @@ div.buttonContainer.bottom {
#showGuessButtonContainer { #showGuessButtonContainer {
position: absolute; position: absolute;
left: 20px; left: 20px;
bottom: 20px; bottom: 30px;
right: 20px; right: 20px;
z-index: 2; z-index: 2;
} }
@ -175,14 +175,14 @@ div.buttonContainer.bottom {
} }
#guessMap { #guessMap {
height: calc(100% - 80px); height: calc(100% - 90px);
} }
#result { #result {
top: 20px; top: 20px;
left: 20px; left: 20px;
right: 20px; right: 20px;
bottom: 20px; bottom: 30px;
} }
#scoreBarBase { #scoreBarBase {
@ -197,14 +197,14 @@ div.buttonContainer.bottom {
#guess { #guess {
width: 500px; width: 500px;
height: 350px; height: 375px;
opacity: 0.95; opacity: 0.95;
} }
#guess.adapt { #guess.adapt {
top: initial; top: initial;
width: 250px; width: 250px;
height: 175px; height: 200px;
opacity: 0.5; opacity: 0.5;
transition-property: width, height, opacity; transition-property: width, height, opacity;
transition-duration: 0.1s; transition-duration: 0.1s;
@ -213,7 +213,7 @@ div.buttonContainer.bottom {
#guess.adapt:hover { #guess.adapt:hover {
width: 500px; width: 500px;
height: 350px; height: 375px;
opacity: 0.95; opacity: 0.95;
transition-delay: 0s; transition-delay: 0s;
} }
@ -223,7 +223,7 @@ div.buttonContainer.bottom {
} }
#guessMap { #guessMap {
height: calc(100% - 40px); height: calc(100% - 45px);
} }
#result { #result {
@ -237,7 +237,7 @@ div.buttonContainer.bottom {
width: 60%; width: 60%;
} }
@media screen and (max-height: 389px) { @media screen and (max-height: 424px) {
#guess { #guess {
top: 20px; top: 20px;
height: initial; height: initial;