* Mobile theme: Login page style improvement

pixelegg/css/mobile.css

@@ -6248,10 +6248,83 @@ a.textSidebox {
 /*@import "../less/layout_nextmatch.less";*/
 /*@import "../less/layout_footer.less";*/
 /*@import "../less/layout_dialog.less";*/
+/********************************/
+/*								*/
+/*		MEDIA DEFINITION		*/
+/*								*/
+/********************************/
+/*Tablets Max-Width*/
+/*Smartphones Max-Width*/
+/*Smartphones Min-Width*/
+/*All devices portrait mode*/
+/*All devices landscape mode*/
+/*Tablets landscape mode*/
+/*Tablets Portrait*/
 @media all {
   body {
     background-color: transparent;
   }
+  body div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
+    width: 40%;
+    margin-top: 5px;
+  }
+  body div#loginMainDiv div#centerBox {
+    position: absolute;
+    margin: 0;
+    width: 100%;
+    background-color: transparent;
+    padding: 0;
+    -webkit-border-top-right-radius: 0;
+    -webkit-border-bottom-right-radius: 0;
+    -webkit-border-bottom-left-radius: 0;
+    -webkit-border-top-left-radius: 0;
+    -moz-border-radius-topright: 0;
+    -moz-border-radius-bottomright: 0;
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-topleft: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    background-color: none;
+    background-image: none;
+    background-repeat: none;
+    border: none;
+    border-radius: none;
+  }
+  body div#loginMainDiv div#centerBox form {
+    margin-top: -2em;
+    margin-right: 3em;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox {
+    width: 100%;
+    float: left;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox tr.hiddenCredential {
+    display: none;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
+    font-size: xx-large;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox input,
+  body div#loginMainDiv div#centerBox form table.divLoginbox select {
+    width: 100%;
+    height: 60px;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox td {
+    font-size: 300%;
+    padding: 0.8%;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
+    font-size: 180%;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox td select {
+    background-size: 48px auto;
+  }
+  body div#loginMainDiv div#centerBox #loginCdMessage {
+    font-size: large;
+    padding: 0;
+  }
   body div.egw_fw_mobile_iOS_popup_appHeader {
     padding-top: 15px;
   }
@@ -6966,3 +7039,31 @@ a.textSidebox {
     background-position: center;
   }
 }
+@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
+  body div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
+    width: 70%;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox {
+    width: 100%;
+    float: left;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
+    font-size: xx-large;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox input,
+  body div#loginMainDiv div#centerBox form table.divLoginbox select {
+    width: 100%;
+    height: 80px;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox td {
+    font-size: 400%;
+    padding: 0.8%;
+  }
+  body div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
+    font-size: 250%;
+  }
+  body div#loginMainDiv div#centerBox #loginCdMessage {
+    font-size: xx-large;
+    padding: 0;
+  }
+}

pixelegg/css/mobile.less

@@ -12,8 +12,103 @@
 
 @import "pixelegg.less";
 
+/********************************/
+/*								*/
+/*		MEDIA DEFINITION		*/
+/*								*/
+/********************************/
+/*Tablets Max-Width*/
+@tablet-max: 1024px;
+/*Smartphones Max-Width*/
+@smartphone-max: 768px;
+/*Smartphones Min-Width*/
+@smartphone-min: 321px;
+/*All devices portrait mode*/
+@handheld-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : portrait)";
+/*All devices landscape mode*/
+@handheld-landscape: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : landscape)";
+/*Tablets landscape mode*/
+@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)";
+/*Tablets Portrait*/
+@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : portrait)";
+
+
 @media all {
 	body{
+
+		div#loginMainDiv{
+			#divAppIconBar {
+				#divLogo img[src$="svg"] {
+					width:40%;
+					margin-top: 5px;
+				}
+			}
+			div#centerBox{
+				position:absolute;
+				margin: 0;
+				width: 100%;
+				background-color: transparent;
+				padding: 0;
+				-webkit-border-top-right-radius: 0;
+				-webkit-border-bottom-right-radius:0;
+				-webkit-border-bottom-left-radius: 0;
+				-webkit-border-top-left-radius: 0;
+				-moz-border-radius-topright: 0;
+				-moz-border-radius-bottomright: 0;
+				-moz-border-radius-bottomleft: 0;
+				-moz-border-radius-topleft: 0;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+				border-top-left-radius: 0;
+				background-color: none;
+				background-image: none;
+				background-image: none;
+				background-image: none;
+				background-image: none;
+				background-image: none;
+				background-image: none;
+				background-image: none;
+				background-repeat: none;
+				border:none;
+				border-radius: none;
+				form {
+					margin-top: -2em;
+					margin-right: 3em;
+
+					table.divLoginbox {
+						width:100%;
+						float:left;
+						tr.hiddenCredential {
+							display:none;
+						}
+						input[type="submit"] {
+							font-size: xx-large;
+
+						}
+						input, select {
+							width:100%;
+							height:60px;
+						}
+						td {
+							font-size: 300%;
+							padding:0.8%;
+							&.registration{
+								font-size: 180%;
+							}
+							select {
+								background-size: 48px auto;
+							}
+						}
+					}
+				}
+				#loginCdMessage {
+					font-size:large;
+					padding:0;
+				}
+			}
+		}
+
 		background-color: transparent;
 		// iOS appHeader class
 		div.egw_fw_mobile_iOS_popup_appHeader{
@@ -733,4 +828,43 @@
 		background-size: 120px 120px;
 		background-position: center;
 	}
-}
+}
+@media @handheld-portrait
+{
+	body{
+		div#loginMainDiv{
+			#divAppIconBar {
+				#divLogo img[src$="svg"] {
+					width:70%;
+				}
+			}
+			div#centerBox{
+				form {
+					table.divLoginbox {
+						width:100%;
+						float:left;
+						input[type="submit"] {
+							font-size: xx-large;
+
+						}
+						input, select {
+							width:100%;
+							height:80px;
+						}
+						td {
+							font-size: 400%;
+							padding:0.8%;
+							&.registration {
+								font-size: 250%;
+							}
+						}
+					}
+				}
+				#loginCdMessage {
+					font-size:xx-large;
+					padding:0;
+				}
+			}
+		}
+	}
+}

pixelegg/templates/pixelegg/login.tpl

@@ -14,8 +14,8 @@
                 <tr class="divLoginboxHeader">
                     <td colspan="3">{website_title}</td>
                 </tr>
-                <tr>
+                <tr class="hiddenCredential">
-                    <td colspan="2" height="20">
+                    <td colspan="2" height="20" >
                         <input type="hidden" name="passwd_type" value="text" />
                         <input type="hidden" name="account_type" value="u" />
                     </td>
@@ -57,7 +57,7 @@
                 </tr>
                 <!-- BEGIN registration -->
                 <tr>
-                    <td colspan="3" height="20" align="center">
+                    <td colspan="3" height="20" align="center" class="registration">
                         {lostpassword_link}
                         {lostid_link}
                         {register_link}