From bc7c9d6e2fc317135923602ef2ad919069273921 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 18 Feb 2015 11:46:54 +0000 Subject: [PATCH] * Mobile theme: Login page style improvement --- pixelegg/css/mobile.css | 101 +++++++++++++++++++ pixelegg/css/mobile.less | 136 +++++++++++++++++++++++++- pixelegg/templates/pixelegg/login.tpl | 6 +- 3 files changed, 239 insertions(+), 4 deletions(-) diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 9c73171882..cde3df2ba2 100644 --- a/pixelegg/css/mobile.css +++ b/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; + } +} diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 6fa0b774aa..63aac28461 100644 --- a/pixelegg/css/mobile.less +++ b/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; } -} \ No newline at end of file +} +@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; + } + } + } + } +} diff --git a/pixelegg/templates/pixelegg/login.tpl b/pixelegg/templates/pixelegg/login.tpl index 5d6e81cc07..fafe8b6ac4 100644 --- a/pixelegg/templates/pixelegg/login.tpl +++ b/pixelegg/templates/pixelegg/login.tpl @@ -14,8 +14,8 @@ {website_title} - - + + @@ -57,7 +57,7 @@ - + {lostpassword_link} {lostid_link} {register_link}