Mobile theme W.I.P.:

- Fix couple of issues for framework styling
This commit is contained in:
Hadi Nategh 2016-02-10 13:37:36 +00:00
parent 63b3009bb5
commit 34519b1e6b
4 changed files with 110 additions and 44 deletions

View File

@ -6611,7 +6611,7 @@ span.egw_tutorial_title {
top: 0;
left: 0;
bottom: 0;
background-color: #ffc200;
background-color: #0c5da5;
height: 100%;
width: 100%;
}
@ -6848,10 +6848,10 @@ span.egw_tutorial_title {
}
body #egw_fw_basecontainer #egw_fw_userinfo {
position: fixed;
top: 60px;
top: 50px;
margin-left: 8px;
width: 300px;
height: 60px;
height: 50px;
z-index: 1000;
text-align: left;
}
@ -6994,7 +6994,7 @@ span.egw_tutorial_title {
background-color: #b4b4b4;
}
body #egw_fw_sidebar {
top: 120px;
top: 110px;
bottom: 5px;
}
body #egw_fw_sidebar #egw_fw_sidemenu {
@ -7066,9 +7066,10 @@ span.egw_tutorial_title {
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 {
text-transform: uppercase;
font-size: 1.4em;
font-size: 12px;
color: #000000;
padding-top: .8em;
padding-top: 4px;
padding-left: 32px;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
@ -7150,13 +7151,13 @@ span.egw_tutorial_title {
/*######################*/
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) {
padding: 5px 0.3em 1.5em 0.3em;
margin: 0 0 10px 0;
background-color: #b3b3b3 !important;
border-color: #b4b4b4;
border-bottom: 1px solid #b4b4b4;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content > div {
background-color: #b3b3b3 !important;
background: none !important;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category:nth-last-of-type(-n+3) {
border-bottom: 1px solid #b4b4b4;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category {
margin: 4px 5px 5px 5px;
@ -7192,6 +7193,24 @@ span.egw_tutorial_title {
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content {
border-radius: 0;
font-size: 12px;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content .sidebox-favorites ul.favorites li.ui-menu-item {
min-height: 18px;
padding-top: 9px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
overflow-x: hidden;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content .sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar {
padding-right: 13px;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content .sidebox-favorites ul.favorites li.ui-menu-item a div.ui-icon-heart {
padding-right: 10px;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content .sidebox-favorites ul.favorites li.ui-menu-item a img {
padding-right: 5px;
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category:hover {
background-color: #999999;
@ -7367,13 +7386,22 @@ span.egw_tutorial_title {
#egw_fw_print {
display: none;
}
div#loginMainDiv {
background-color: #486F93;
width: 101%;
}
div#loginMainDiv #divAppIconBar {
background: white;
}
div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 40%;
margin-top: 5px;
background: white;
}
div#loginMainDiv div#centerBox {
position: absolute;
margin: 0;
bottom: 0;
width: 100%;
padding: 0;
-webkit-border-top-right-radius: 0;
@ -7388,14 +7416,14 @@ span.egw_tutorial_title {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
background-color: none;
background-color: transparent;
background-image: none;
background-repeat: none;
background-repeat: no-repeat;
border: none;
border-radius: none;
border-radius: 0;
}
div#loginMainDiv div#centerBox form {
margin-top: -2em;
margin-top: 3em;
}
div#loginMainDiv div#centerBox form table.divLoginbox {
width: 100%;
@ -7423,8 +7451,11 @@ span.egw_tutorial_title {
background-size: 48px auto;
}
div#loginMainDiv div#centerBox #loginCdMessage {
font-size: large;
font-size: 10pt !important;
color: white;
padding: 0;
border: 0;
background: none;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

View File

@ -79,7 +79,7 @@
top: 0;
left: 0;
bottom: 0;
.background_color_egw_normal;
.background_color_egw_dark;
height: 100%;
width: 100%;
&:before{
@ -358,10 +358,10 @@
}
#egw_fw_userinfo {
position: fixed;
top:60px;
top:50px;
margin-left:8px;
width:300px;
height:60px;
height:50px;
z-index:1000;
text-align : left;
span.avatar {
@ -511,7 +511,7 @@
//# #
//###################
#egw_fw_sidebar{
top: 120px;
top: 110px;
bottom: 5px;
//SIDE AREA
#egw_fw_sidemenu {
@ -576,7 +576,7 @@
img {padding-left: 9px; padding-top: 6px; height: 18px;}
h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;}
h1 {text-transform: uppercase; font-size: 12px; .color_100_gray; padding-top: 4px;padding-left:32px;}
&:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
&:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}
@ -613,18 +613,15 @@
// rounded Corner on bottom
&:nth-last-of-type(-n+3) {
padding: 5px 0.3em 1.5em 0.3em;
margin: 0 0 10px 0;
.background_color_30_gray;
border-color: @gray_30;
border-bottom: 1px solid @gray_30;
}
& > div {.background_color_30_gray;}
& > div {background: none !important;}
//###################################################
// has round corners
div.egw_fw_ui_category:nth-last-of-type(-n+3) {
border-bottom: 1px solid @gray_30;
}
//###################################################
@ -658,6 +655,24 @@
div.egw_fw_ui_category_content {
border-radius: 0;
font-size: 12px;
.sidebox-favorites {
ul.favorites {
li.ui-menu-item {
min-height: 18px;
padding-top:9px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
overflow-x: hidden;
a{
div.sideboxstar{padding-right: 13px;}
div.ui-icon-heart{padding-right:10px;}
img{padding-right:5px;}
}
}
}
}
}
//#################################
// Hover
@ -865,15 +880,20 @@
display:none;
}
div#loginMainDiv{
.mob-bg-login;
width:101%;
#divAppIconBar {
background:white;
#divLogo img[src$="svg"] {
width:40%;
margin-top: 5px;
background:white;
}
}
div#centerBox{
position:absolute;
margin: 0;
bottom:0;
width: 100%;
padding: 0;
-webkit-border-top-right-radius: 0;
@ -888,19 +908,13 @@
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
background-color: none;
background-color: transparent;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat: none;
background-repeat: no-repeat;
border:none;
border-radius: none;
border-radius: 0;
form {
margin-top: -2em;
margin-top: 3em;
table.divLoginbox {
width:100%;
@ -929,8 +943,11 @@
}
}
#loginCdMessage {
font-size:large;
.mob-fontsize-n !important;
.mob-color-login-message;
padding:0;
border:0;
background: none;
}
}
}
@ -1743,4 +1760,4 @@
display: block;
}
}
}
}

View File

@ -161,7 +161,10 @@ div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #div
";
if (html::$ua_mobile) $ret['app_css'] .= "
/* Mobile theme custom colors*/
if (html::$ua_mobile)
{
$ret['app_css'] = "
/* Mobile theme specific color changes */
/*nextmatch header and plus_button in mobile theme*/
@ -171,10 +174,14 @@ body button.plus_button,
body div.et2_nextmatch .search .nm_action_header,
body div.et2_nextmatch .search .nm_toggle_header,
body div.et2_nextmatch .search .nm_favorites_button,
body .dialogHeadbar,
body #egw_fw_firstload{
body #loginMainDiv,
body #egw_fw_firstload,
body .dialogHeadbar{
background-color: $color;
}";
}
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active{background-color: $sidebox_color !important};
";
}
}
return $ret;
}

View File

@ -18,4 +18,15 @@
.mob-fontsize-s {font-size: @mobile-fontsize-base*0.9;}
.mob-fontsize-n {font-size: @mobile-fontsize-base}
.mob-fontsize-l {font-size: @mobile-fontsize-base*1.2;}
.mob-fontsize-xl {font-size: @mobile-fontsize-base*1.5;}
.mob-fontsize-xl {font-size: @mobile-fontsize-base*1.5;}
/*Colors*/
.mob-color-login-message {color:white;}
/*background colors*/
.mob-bg-login {background-color: #486F93;}
.mob-bg-login-logo-area {background-color:white;}
.mob-bg-applist-header {background-color:#486F93;}
/*border colors*/