From 2b5657494e67c83791d803381c6c70f898759353 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 3 May 2021 16:17:07 +0200
Subject: [PATCH] WIP login Ui: fix some styling issues

---
 pixelegg/css/mobile.css             | 12 ++++++++----
 pixelegg/css/monochrome.css         | 12 ++++++++----
 pixelegg/css/pixelegg.css           | 12 ++++++++----
 pixelegg/less/layout_loginPage.less | 10 ++++++----
 pixelegg/mobile/fw_mobile.css       | 12 ++++++++----
 5 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 6a34428982..fccda60f7b 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -2026,26 +2026,30 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   max-width: 100%;
 }
 #loginMainDiv div#login_footer {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   display: inline-block;
   right: 0;
   width: 100%;
   height: 40px;
   background: #1865aa;
+  overflow-x: clip;
 }
 #loginMainDiv div#login_footer .apps {
-  width: 50%;
-  margin: auto;
+  width: 812px;
+  margin: 0 auto;
   display: flex;
   overflow: hidden;
 }
 #loginMainDiv div#login_footer .apps .app {
   width: 30px;
   height: 30px;
-  margin: 5px 20px auto 20px;
+  margin: 5px 1% auto 2%;
   display: flex;
 }
+#loginMainDiv div#login_footer .apps .app:hover img.icon {
+  transform: scale(1.1);
+}
 #loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index 04a653b28d..a0669f2302 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -2006,26 +2006,30 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   max-width: 100%;
 }
 #loginMainDiv div#login_footer {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   display: inline-block;
   right: 0;
   width: 100%;
   height: 40px;
   background: #1865aa;
+  overflow-x: clip;
 }
 #loginMainDiv div#login_footer .apps {
-  width: 50%;
-  margin: auto;
+  width: 812px;
+  margin: 0 auto;
   display: flex;
   overflow: hidden;
 }
 #loginMainDiv div#login_footer .apps .app {
   width: 30px;
   height: 30px;
-  margin: 5px 20px auto 20px;
+  margin: 5px 1% auto 2%;
   display: flex;
 }
+#loginMainDiv div#login_footer .apps .app:hover img.icon {
+  transform: scale(1.1);
+}
 #loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index b075277007..634491ce2f 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -2016,26 +2016,30 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   max-width: 100%;
 }
 #loginMainDiv div#login_footer {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   display: inline-block;
   right: 0;
   width: 100%;
   height: 40px;
   background: #1865aa;
+  overflow-x: clip;
 }
 #loginMainDiv div#login_footer .apps {
-  width: 50%;
-  margin: auto;
+  width: 812px;
+  margin: 0 auto;
   display: flex;
   overflow: hidden;
 }
 #loginMainDiv div#login_footer .apps .app {
   width: 30px;
   height: 30px;
-  margin: 5px 20px auto 20px;
+  margin: 5px 1% auto 2%;
   display: flex;
 }
+#loginMainDiv div#login_footer .apps .app:hover img.icon {
+  transform: scale(1.1);
+}
 #loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index ca8bca4943..880fe95ec0 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -162,23 +162,25 @@ div#loginMainDiv.stockLoginBackground {
 		color: #0a5ca5;
 	}
 	div#login_footer {
-		position: absolute;
+		position: fixed;
 		bottom: 0;
 		display: inline-block;
 		right: 0;
 		width: 100%;
 		height: 40px;
 		background: #1865aa;
+		overflow-x: clip;
 		.apps {
-			width: 50%;
-			margin: auto;
+			width: 812px;
+			margin: 0 auto;
 			display: flex;
 			overflow: hidden;
 			.app {
 				width: 30px;
 				height: 30px;
-				margin: 5px 20px auto 20px;
+				margin: 5px 1% auto 2%;;
 				display: flex;
+				&:hover img.icon {transform:scale(1.1)}
 				img.icon {
 					width: 30px;
 					filter: brightness(0) invert(1);
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 3aa1e41e6b..a23fe4c6dc 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -2037,26 +2037,30 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   max-width: 100%;
 }
 #loginMainDiv div#login_footer {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   display: inline-block;
   right: 0;
   width: 100%;
   height: 40px;
   background: #1865aa;
+  overflow-x: clip;
 }
 #loginMainDiv div#login_footer .apps {
-  width: 50%;
-  margin: auto;
+  width: 812px;
+  margin: 0 auto;
   display: flex;
   overflow: hidden;
 }
 #loginMainDiv div#login_footer .apps .app {
   width: 30px;
   height: 30px;
-  margin: 5px 20px auto 20px;
+  margin: 5px 1% auto 2%;
   display: flex;
 }
+#loginMainDiv div#login_footer .apps .app:hover img.icon {
+  transform: scale(1.1);
+}
 #loginMainDiv div#login_footer .apps .app img.icon {
   width: 30px;
   filter: brightness(0) invert(1);