| @@ -69,16 +69,17 @@ button { | |||||
| #upgrades-area { | #upgrades-area { | ||||
| position: absolute; | position: absolute; | ||||
| width: 30%; | |||||
| right: 35%; | |||||
| width: 400px; | |||||
| right: 5%; | |||||
| top: 20%; | top: 20%; | ||||
| height: 20%; | |||||
| } | } | ||||
| #buildings-area { | #buildings-area { | ||||
| position: absolute; | position: absolute; | ||||
| width: 35vmin; | |||||
| width: 400px; | |||||
| right: 5%; | right: 5%; | ||||
| top: 20%; | |||||
| top: 40%; | |||||
| height: 80%; | height: 80%; | ||||
| max-height: 70vh; | max-height: 70vh; | ||||
| padding-bottom: 10px; | padding-bottom: 10px; | ||||
| @@ -247,13 +248,6 @@ button { | |||||
| } | } | ||||
| @media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||||
| #upgrades-area { | |||||
| position: absolute; | |||||
| top: 15%; | |||||
| left: 50%; | |||||
| height: 35%; | |||||
| width: 50%; | |||||
| } | |||||
| #resources-area { | #resources-area { | ||||
| top: 15%; | top: 15%; | ||||
| @@ -263,10 +257,6 @@ button { | |||||
| #tasty-micro { | #tasty-micro { | ||||
| width: 30vw; | width: 30vw; | ||||
| } | } | ||||
| #upgrades-list { | |||||
| max-height: 25vh !important; | |||||
| } | |||||
| } | } | ||||
| .title { | .title { | ||||
| @@ -277,7 +267,7 @@ button { | |||||
| #upgrades-list { | #upgrades-list { | ||||
| display: flex; | display: flex; | ||||
| flex-wrap: wrap; | flex-wrap: wrap; | ||||
| max-height: 70vh; | |||||
| max-height: 20%; | |||||
| padding-bottom: 75px; | padding-bottom: 75px; | ||||
| overflow-x: hidden; | overflow-x: hidden; | ||||
| overflow-y: scroll; | overflow-y: scroll; | ||||
| @@ -285,7 +275,7 @@ button { | |||||
| #upgrade-tooltip { | #upgrade-tooltip { | ||||
| position: absolute; | position: absolute; | ||||
| width: 200px; | |||||
| width: 400px; | |||||
| background: #333; | background: #333; | ||||
| display: none; | display: none; | ||||
| z-index: 1; | z-index: 1; | ||||
| @@ -329,9 +319,8 @@ button { | |||||
| } | } | ||||
| .upgrade-button { | .upgrade-button { | ||||
| width: 100px; | |||||
| height: 100px; | |||||
| margin: 10px; | |||||
| width: 80px; | |||||
| height: 80px; | |||||
| display: block; | display: block; | ||||
| background-color: #444; | background-color: #444; | ||||
| transition: 0.2s; | transition: 0.2s; | ||||
| @@ -341,13 +330,14 @@ button { | |||||
| .upgrade-button > .fas { | .upgrade-button > .fas { | ||||
| width: 100px; | width: 100px; | ||||
| height: 100px; | height: 100px; | ||||
| font-size: 75px; | |||||
| transform: translate(0%, -37.5%); | |||||
| font-size: 60px; | |||||
| transform: translate(-10px, -40px); | |||||
| opacity: 0.5; | opacity: 0.5; | ||||
| pointer-events: none; | |||||
| } | } | ||||
| .upgrade-button:hover { | .upgrade-button:hover { | ||||
| transform: scale(1.25, 1.25); | |||||
| background-color: #999; | |||||
| } | } | ||||
| .upgrade-button-inactive { | .upgrade-button-inactive { | ||||
| @@ -61,7 +61,6 @@ | |||||
| <div id="upgrades-list"></div> | <div id="upgrades-list"></div> | ||||
| </div> | </div> | ||||
| <div id="buildings-area"> | <div id="buildings-area"> | ||||
| <div id="buildings" class="title">Prey</div> | |||||
| <div id="building-tooltip"> | <div id="building-tooltip"> | ||||
| <div id="building-tooltip-name"></div> | <div id="building-tooltip-name"></div> | ||||
| <div id="building-tooltip-desc"></div> | <div id="building-tooltip-desc"></div> | ||||
| @@ -852,7 +852,7 @@ function createUpgrades() { | |||||
| button.id = "upgrade-" + key; | button.id = "upgrade-" + key; | ||||
| let buttonName = document.createElement("div"); | let buttonName = document.createElement("div"); | ||||
| buttonName.classList.add("upgrade-button-name"); | buttonName.classList.add("upgrade-button-name"); | ||||
| buttonName.innerText = value.name; | |||||
| buttonName.innerText = ""; | |||||
| let upgradeIcon = document.createElement("i"); | let upgradeIcon = document.createElement("i"); | ||||
| upgradeIcon.classList.add("fas"); | upgradeIcon.classList.add("fas"); | ||||
| @@ -1209,7 +1209,7 @@ function upgradeTooltip(id, event) { | |||||
| yTrans = Math.min(yTrans, height - tooltipSize - 150); | yTrans = Math.min(yTrans, height - tooltipSize - 150); | ||||
| tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)"); | |||||
| tooltip.style.setProperty("transform", "translate(-420px, " + yTrans + "px)"); | |||||
| } | } | ||||
| function upgradeTooltipRemove() { | function upgradeTooltipRemove() { | ||||