* Mobile theme: Login page style improvement

This commit is contained in:
Hadi Nategh 2015-02-18 11:46:54 +00:00
parent 54d4fc28dc
commit bc7c9d6e2f
3 changed files with 239 additions and 4 deletions

View File

@ -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;
}
}

View File

@ -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{
@ -734,3 +829,42 @@
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;
}
}
}
}
}

View File

@ -14,8 +14,8 @@
<tr class="divLoginboxHeader">
<td colspan="3">{website_title}</td>
</tr>
<tr>
<td colspan="2" height="20">
<tr class="hiddenCredential">
<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}