Improve CSS for future proofing and horizontal phone usage

Icecreamdudes · Dec 1, 2024 · 2a90b28 · 2a90b28
1 parent 9008fb3
commit 2a90b28
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/css/system-style.css b/css/system-style.css
@@ -11,7 +11,7 @@
 }
 .titleHeader {
 	position: absolute;
-	width: 262px;
+	width: 272px;
 	height: 60px;
 	display: flex;
 	justify-content: center;
@@ -29,8 +29,8 @@
 	top: 62px;
 	justify-content: auto;
 	user-select: none;
-	height:calc(100% - 66px);
-	left:50px;
+	height:calc(100% - 64px);
+	left:60px;
 	background: #0f0f0f;
 	display: block;
 	overflow-y: scroll;
@@ -60,28 +60,30 @@
 .contentMenu {
 	position: absolute;
 	z-index:1001;
-	width: 66px;
+	width: 77px;
 	top: 62px;
 	justify-content: auto;
 	user-select: none;
 	height:calc(100% - 64px);
 	left:50px;
 	background: #0f0f0f;
 	display: flex;
-	overflow-y: hidden;
+	flex-grow:1;
+	overflow-y: scroll;
 	overflow-x: hidden;
 	flex-direction: column;
+	border-bottom: 2px solid #7a7a7a;
 }
 .uniMenu {
 	z-index:1001;
 	width: 60px;
 	justify-content: auto;
-	flex: 1;
-	height:calc(100% - 76px);
+	flex: 1 0 auto;
+	height:auto;
 	left:0px;
 	background: #0f0f0f;
 	display: block;
-	overflow-y: auto;
+	overflow-y: hidden;
 	overflow-x: hidden;
 	flex-direction: column;
 	border-left: 2px solid #7a7a7a;
@@ -120,7 +122,6 @@
 	flex-direction: column;
 	border-left: 2px solid #7a7a7a;
 	border-right: 4px solid #7a7a7a;
-	border-bottom: 2px solid #7a7a7a;
 }
 .miscMenu {
 	z-index:1001;
@@ -134,7 +135,6 @@
 	border-left: 2px solid #7a7a7a;
 	border-right: 4px solid #7a7a7a;
 	border-top: 2px solid #7a7a7a;
-	border-bottom: 2px solid #7a7a7a;
 }
 .miscButton {
 	width: 50px;

diff --git a/index.html b/index.html
@@ -41,8 +41,8 @@
 
 <body onload="load()" onmousemove="updateMouse(event)">
 	<div id="app">
-		<div class="titleHeader" v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c'" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'-266px'}:{'left':'0px'}">Celestial<br>Incremental</div>
-		<div class="contentMenu" v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c'" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'-260px'}:{'left':'0px'}">
+		<div class="titleHeader" v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c'" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'-276px'}:{'left':'0px'}">Celestial<br>Incremental</div>
+		<div class="contentMenu" v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c'" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'-270px'}:{'left':'0px'}">
 		<!-- Universes -->
 			<div class="uniMenu">
 				<div class="contentHeader">UNI</div>
@@ -63,7 +63,7 @@
 				<img class="miscButton" onclick="showTab('settings')" src="options_wheel.png"></img>
 			</div>
 		</div>
-		<div class="layerMenu" v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c'" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'-200px'}:{'left':'66px'}">
+		<div class="layerMenu" v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c'" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'-200px'}:{'left':'76px'}">
 		<!-- Universe 1 Stuff -->
 			<div class="uniHeader" v-if="player.universe == 1">Universe 1<br>Overworld</div>
 				<button class="menuButton" v-if="player.universe == 1" v-bind:style="constructMenuButtonStyle('u1u') " onclick="showTab('u1u')"><span class="buttonText">Upgrades</span></button>
@@ -148,7 +148,7 @@
 				<button class="menuButton" v-if="player.cb.epicPetLevels[2].gte(1) && player.universe == 0.5" v-bind:style="constructCbButtonStyle('ep2') " onclick="showTab('ep2')"><span class="buttonText">Cookie</span></button>
 
 		</div>
-		<button class="backButton" onclick="toggleOpt('menuShown')"v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c' && player.tab != 'g' && player.tab != 'rg' && player.startedGame" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'0px'}:{'left':'264px'}">{{options.menuShown==true?'<':'>'}}</button>
+		<button class="backButton" onclick="toggleOpt('menuShown')"v-if="options.newMenu==true && player.tab != 'bigc' && player.tab != 'revc' && player.tab != 'c' && player.tab != 'g' && player.tab != 'rg' && player.startedGame" v-bind:style="!options.menuShown || !player.startedGame || player.tab == 'c' ?{'left':'0px'}:{'left':'274px'}">{{options.menuShown==true?'<':'>'}}</button>
 		<canvas id="treeCanvas" class="canvas" v-if="!(tmp.gameEnded && !player.keepGoing)"></canvas>
 
 		<div v-if="false" id="loadingSection" class="fullWidth">