Mobile theme WIP:

- Fix nm header styling and add new white icon for toggle menu
- Implement custom theme color for nm header and plus_button

pixelegg/css/mobile.css

@@ -6742,13 +6742,11 @@ span.egw_tutorial_title {
   #egw_fw_basecontainer div#egw_fw_menu {
     background-image: url(../images/topmenu_items/mobile/menu_active.png);
     cursor: pointer;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
     position: fixed;
     left: 13px;
     top: 13px;
-    width: 32px;
+    width: 65px;
-    height: 32px;
+    height: 50px;
     background-size: 32px 32px;
     background-repeat: no-repeat;
     z-index: 999;
@@ -6758,6 +6756,9 @@ span.egw_tutorial_title {
     -moz-box-shadow: none;
     box-shadow: none;
   }
+  #egw_fw_basecontainer div#egw_fw_menu:focus {
+    outline: none;
+  }
   #egw_fw_basecontainer div#egw_fw_menu:active {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
@@ -7258,11 +7259,6 @@ span.egw_tutorial_title {
     filter: gray;
     /* IE 6-9 */
   }
-  .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
-    background-image: url(../images/topmenu_items/mobile/menu.png);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
   .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu {
     width: 82px !important;
   }
@@ -7486,6 +7482,16 @@ span.egw_tutorial_title {
 /*mobile etemplate2*/
 /*mobile etemplate2*/
 @media only screen and (min-width: 320px) and (max-width: 1279px) {
+  body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
+    background-image: url(../images/topmenu_items/mobile/menu_white.png);
+    width: 65px;
+    height: 50px;
+    background-color: transparent;
+    top: -3px;
+    background-position: 15px center;
+    background-size: 32px 32px;
+    left: 0;
+  }
   body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_menu {
     top: 8px;
   }
@@ -7601,7 +7607,10 @@ span.egw_tutorial_title {
   body .et2_nextmatch .search {
     background: #0c5da5;
     margin-top: 0;
-    margin-left: 60px;
+    padding-left: 60px;
+    box-shadow: 0px 4px 5px 2px silver;
+    position: relative;
+    z-index: 1;
   }
   body .et2_nextmatch .search button {
     height: 50px;
@@ -7769,6 +7778,7 @@ span.egw_tutorial_title {
   }
   body .et2_nextmatch .egwGridView_outer thead {
     max-height: 1px;
+    display: none;
   }
   body .et2_nextmatch .egwGridView_outer thead tr th {
     font-size: large;

pixelegg/css/mobile.less

@@ -204,13 +204,11 @@
 		div#egw_fw_menu{
 			background-image: url(../images/topmenu_items/mobile/menu_active.png);
 			cursor: pointer;
-			-webkit-transform:rotate(360deg);
-			transform:rotate(360deg);
 			position: fixed;
 			left: 13px;
 			top: 13px;
-			width: 32px;
+			width: 65px;
-			height: 32px;
+			height: 50px;
 			background-size: 32px 32px;
 			background-repeat: no-repeat;
 			z-index: 999;
@@ -219,6 +217,9 @@
 				-moz-box-shadow: none;
 				box-shadow: none;
 			}
+			&:focus {
+				outline: none;
+			}
 		}
 		div#egw_fw_menu:active {
 			-webkit-box-shadow: none;
@@ -721,9 +722,7 @@
 
 	.sidebar-toggle{
 		#egw_fw_top_toolbar div#egw_fw_menu{
-			background-image: url(../images/topmenu_items/mobile/menu.png);
+			
-			-webkit-transform:rotate(0deg);
-			transform:rotate(0deg);
 		}
 		#egw_fw_sidebar{
 			#egw_fw_sidemenu{
@@ -1018,6 +1017,20 @@
 @media only screen and (min-width: 320px)  and (max-width: 1279px) {
 	body
 	{
+		#egw_fw_basecontainer.sidebar-toggle {
+			#egw_fw_top_toolbar {
+				div#egw_fw_menu {
+					background-image: url(../images/topmenu_items/mobile/menu_white.png);
+					width: 65px;
+					height: 50px;
+					background-color: transparent;
+					top: -3px;
+					background-position: 15px center;
+					background-size: 32px 32px;
+					left: 0;
+				}
+			}
+		}
 		#egw_fw_basecontainer {
 			#egw_fw_top_toolbar {
 				div#egw_fw_menu {
@@ -1156,7 +1169,10 @@
 			.search {
 				background: @mobile-nm-search-bg;
 				margin-top: 0;
-				margin-left: 60px;
+				padding-left: 60px;
+				box-shadow: 0px 4px 5px 2px silver;
+				position: relative;
+				z-index: 1;
 				button {
 					height: @mobile-elem-height;
 					width: @mobile-button-width;
@@ -1334,6 +1350,7 @@
 			.egwGridView_outer {
 				thead{
 					max-height: 1px;
+					display: none;
 				}
 				thead tr th {
 					font-size: large;

pixelegg/inc/class.pixelegg_framework.inc.php

@@ -152,6 +152,16 @@ div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #div
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active{
 	background-color: $color_hex_darker !important;
 }
+
+/*nextmatch header and plus_button in mobile theme*/
+body div.et2_nextmatch .search,
+body div.et2_nextmatch .search button,
+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 {
+	background-color: $color;
+}
 ";
 		}
 		return $ret;