cleanup css variables

css/dashboard.css

@@ -66,7 +66,7 @@
 	z-index: 6 !important;
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	.showRightDashboard {
 		width: 100vw !important;
 		margin-right: 0 !important;

css/dock.css

@@ -60,7 +60,7 @@
 }
 
 
-/*Decrease scale to 0.85 if width is less than 580px*/
+/*Decrease scale to 0.85 if width is less than 470px*/
 @media screen and (max-width: 469px) and (max-height: 489px) {
 
 	.dockContainer {

css/search-box.css

@@ -53,7 +53,7 @@
 	pointer-events: initial !important;
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	#searchBox {
     	width: 50vw;
 	}

css/search-engine-settings.css

@@ -128,7 +128,7 @@ select::-ms-expand {
 	background: var(--base-focus-bg);
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	.searchEngine {
 		width: 96vw;
 		box-sizing: border-box;

css/theme-engine.css

@@ -175,7 +175,7 @@ select::-ms-expand {
 	background: var(--panel-bg);
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	.themeEngine {
 		width: 96vw;
 		box-sizing: border-box;

css/weather-screen.css

@@ -196,7 +196,7 @@
 	clear:both;
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	#weatherScreen {
 		padding-top: 6vh;
 		padding-bottom: 0vh;
@@ -211,7 +211,7 @@
 	}
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 
 	.weatherForecast {
 		display: inline-block;

css/weather-settings.css

@@ -163,7 +163,7 @@
 	height: auto;
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	.weatherSettings {
 		width: 96vw;
 		box-sizing: border-box;

css/web-menu.css

@@ -2,24 +2,19 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 100%;
-	height: 100%;
+	width: 100vw;
+	height: 100vh;
 	margin: 0;
 	background: var(--panel-bg);
 	z-index: 0;
 	overflow: hidden;
 	backdrop-filter: blur(var(--blur-strength));
 	
-	padding-top: 6vh;
+	padding-top: 40px;
 	padding-bottom: 6vh;
 	padding-left: 12vw;
 	padding-right: 12vw;
 
-	/*Dont increase the geometry by using padding*/
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-
 	/*Disable user touch/select on text elements*/
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -32,11 +27,11 @@
 	opacity: 0;
 	transform: scale(0);
 	transition: transform var(--transition-speed),
-	opacity var(--transition-speed),
-	z-index var(--transition-speed);
+				opacity var(--transition-speed),
+				z-index var(--transition-speed);
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	#webMenu {
 		padding-top: 6vh;
 		padding-bottom: 0vh;
@@ -45,12 +40,6 @@
 	}
 }
 
-@media screen and (max-height: 799px) {
-	#webMenu {
-		padding-top: 40px;
-	}
-}
-
 /*Show web menu*/
 .showWebMenu {
 	transform: scale(1) !important;
@@ -60,7 +49,7 @@
 
 #webMenuContainer {
 	background: transparent;
-	max-height: 100%;
+	max-height: 100vh;
 
 	overflow: hidden;
 }
@@ -88,7 +77,7 @@
 	font-weight: 700;
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	#webMenuSearchBox {
 		width: 50vw;
 	}
@@ -111,6 +100,7 @@
 	list-style-type: none;
 	padding: 0;
 	margin: 0 auto;
+	flex-grow: 1;
 	text-align: justify;
 
 	background: transparent;
@@ -122,7 +112,7 @@
 	display: inline-block;
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-width: 470px) {
 	#webMenuList li {
 		display: inline;
 	}
@@ -213,27 +203,18 @@
 
 #webMenuListContainer {
 	position: relative;
-	max-height: 70vh;
-
 	display: flex;
   	justify-content: center;
-
-	overflow-y: scroll;
-	/*scrollbar-width: none !important;
-	-ms-overflow-style: none !important;*/
+  	max-height: 74vh;
+	overflow-y: auto;
 
 	/*Fade transparency*/
 	/*-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
 	/*mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
 }
 
-/*Hide scrollbar*/
-/*#webMenuListContainer::-webkit-scrollbar {
-    display: none;
-}*/
-
-/*Stretch list item if screen width < 580px*/
-@media screen and (max-width: 580px) {
+/*Stretch list item if screen width < 470px*/
+@media screen and (max-width: 470px) {
 	#webMenuList {
 		flex-grow: 1;
 	}