From 0e379eeab4b7345a839afd12399902d8acbabd2d Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Wed, 24 Feb 2016 15:44:45 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Replace utf-8 chars with svg icons -
 Fix stylig applications icons - Get et2_buttons in dailogHeader in white
 color

---
 pixelegg/css/mobile.css                       |  10 -
 pixelegg/css/mobile.less                      |  13 +-
 pixelegg/css/pixelegg.css                     |   8 +-
 .../images/{next_match.svg => menu_list.svg}  |   0
 ...xt_match_round.svg => menu_list_round.svg} |   0
 pixelegg/mobile/fw_mobile.css                 | 146 ++++---
 pixelegg/mobile/fw_mobile.less                | 368 +++++++++---------
 7 files changed, 288 insertions(+), 257 deletions(-)
 rename pixelegg/images/{next_match.svg => menu_list.svg} (100%)
 rename pixelegg/images/{next_match_round.svg => menu_list_round.svg} (100%)

diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index a272c3d3f7..61b9a85ca8 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -6189,16 +6189,6 @@ span.egw_tutorial_title {
     background-position: 3px 7px;
     position: fixed;
   }
-  body span.egw_fw_mobile_popup_close.loaded {
-    background-image: none;
-  }
-  body span.egw_fw_mobile_popup_close.loaded:after {
-    content: "\2190";
-    font-size: 24pt;
-    color: white;
-    padding-left: 5px;
-    font-weight: bold;
-  }
   body #egw_fw_basecontainer {
     background: white;
   }
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index fc2a1bab3e..b84ccb5a96 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -130,16 +130,7 @@
 			background-position: 3px 7px;
 			position: fixed;
 		}
-		span.egw_fw_mobile_popup_close.loaded {
-			&:after {
-				content: "\2190";
-				font-size: 24pt;
-				color: white;
-				padding-left: 5px;
-				font-weight: bold;
-			}
-			background-image: none;
-		}
+		
 		/*EOF close/back button styling*/
 
 		#egw_fw_basecontainer{
@@ -715,7 +706,7 @@
 					padding-left: 0;
 					padding-right: 0px;
 					float: left;
-
+				
 					/*filter grey*/
 					.img_filter_gray;
 				}
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index a477738e88..6431b9e916 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -3763,7 +3763,7 @@ td.message span.message {
   text-decoration: none;
   height: 32px;
   /*font-size: 1.1em;*/
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   line-height: 1.5em;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@@ -3787,7 +3787,7 @@ td.message span.message {
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
   padding-right: 20px;
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   content: " ";
   background-image: url(../images/topmenu_items/home.png);
   background-repeat: no-repeat;
@@ -4185,7 +4185,7 @@ td.message span.message {
   padding-left: 3em;
   color: #999999;
   /*font-size: 12px;*/
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   line-height: 17px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@@ -4356,7 +4356,7 @@ td.message span.message {
   margin: 5px 0px 3px 5px;
   padding: 0px 0px 0px 15px;
   line-height: 1em;
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   background-image: url(../images/arrow_left.png);
   background-repeat: no-repeat;
   background-position: left center;
diff --git a/pixelegg/images/next_match.svg b/pixelegg/images/menu_list.svg
similarity index 100%
rename from pixelegg/images/next_match.svg
rename to pixelegg/images/menu_list.svg
diff --git a/pixelegg/images/next_match_round.svg b/pixelegg/images/menu_list_round.svg
similarity index 100%
rename from pixelegg/images/next_match_round.svg
rename to pixelegg/images/menu_list_round.svg
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 41fe7380b6..e8f40b024d 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -6200,16 +6200,6 @@ span.egw_tutorial_title {
     background-position: 3px 7px;
     position: fixed;
   }
-  body span.egw_fw_mobile_popup_close.loaded {
-    background-image: none;
-  }
-  body span.egw_fw_mobile_popup_close.loaded:after {
-    content: "\2190";
-    font-size: 24pt;
-    color: white;
-    padding-left: 5px;
-    font-weight: bold;
-  }
   body #egw_fw_basecontainer {
     background: white;
   }
@@ -6925,10 +6915,14 @@ span.egw_tutorial_title {
 /*Tablets landscape mode*/
 /*Tablets Portrait*/
 /*Smartphones*/
+.white-svg {
+  -webkit-filter: brightness(0) invert(1) !important;
+  filter: brightness(0) invert(1) !important;
+  background-color: transparent !important;
+  background-size: 24px 24px !important;
+  border: none;
+}
 @media only screen and (max-device-width : 1024px) {
-  html * {
-    -webkit-overflow-scrolling: touch;
-  }
   #egw_fw_print {
     display: none;
   }
@@ -7079,13 +7073,25 @@ span.egw_tutorial_title {
 @media all {
   html * {
     touch-action: auto;
+    -webkit-overflow-scrolling: touch;
   }
   body {
     /*Chosen*/
     /* View mode styles*/
   }
+  body span.egw_fw_mobile_popup_close.loaded {
+    background-image: url(../images/topmenu_items/mobile/back.svg);
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
+    top: 0;
+    background-position: center;
+    padding: 0;
+  }
   body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
-    background-image: url(../images/topmenu_items/mobile/menu_white.png);
+    background-image: url(../images/topmenu_items/mobile/menu.svg);
     width: 50px;
     height: 50px;
     background-color: transparent;
@@ -7103,6 +7109,20 @@ span.egw_tutorial_title {
     background: none;
     box-shadow: none;
   }
+  body #egw_fw_basecontainer #egw_fw_main img[src$="svg"],
+  body #egw_fw_basecontainer #egw_fw_footer img[src$="svg"] {
+    background: none;
+    border: none;
+    filter: none;
+    -webkit-filter: none;
+    box-shadow: none;
+  }
+  body #egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_apps > div {
+    display: inline-block;
+  }
+  body #egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_apps > div h1 {
+    display: none;
+  }
   body div.dhtmlxMenu_egw_SubLevelArea_Polygon {
     font-size: medium;
     top: 50px !important;
@@ -7301,25 +7321,25 @@ span.egw_tutorial_title {
     width: 50px;
   }
   body .et2_nextmatch .nm-mob-header button.nm_toggle_header {
+    background-image: url(../images/menu_list_round.svg);
     background-position: center;
     background-repeat: no-repeat;
     margin-right: 5px;
-    border-left: 1px solid silver;
-    border: 0;
-    color: white;
     width: 50px;
     height: 50px;
     display: block;
     float: right;
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
   }
   body .et2_nextmatch .nm-mob-header button.nm_toggle_header:focus {
     outline: none;
   }
-  body .et2_nextmatch .nm-mob-header button.nm_toggle_header:after {
-    font-size: 18pt;
-    content: "\2261";
-  }
   body .et2_nextmatch .nm-mob-header button.nm_action_header {
+    background-image: url(../images/dots.svg);
     background-position: center;
     background-repeat: no-repeat;
     margin-right: 5px;
@@ -7330,19 +7350,17 @@ span.egw_tutorial_title {
     height: 50px;
     display: block;
     float: right;
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
   }
   body .et2_nextmatch .nm-mob-header button.nm_action_header:focus {
     outline: none;
   }
-  body .et2_nextmatch .nm-mob-header button.nm_action_header:after {
-    font-size: 18pt;
-    content: "\205D";
-    font-weight: bold;
-  }
-  body .et2_nextmatch .nm-mob-header button.nm_action_header.back:after {
-    font-size: 18pt;
-    content: "\2190";
-    font-weight: bold;
+  body .et2_nextmatch .nm-mob-header button.nm_action_header.back {
+    background-image: url(../images/cancelled.svg);
   }
   body .et2_nextmatch .nm-mob-header div.nm_favorites_div {
     background-position: center;
@@ -7367,15 +7385,14 @@ span.egw_tutorial_title {
   body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:first-child {
     display: none;
   }
+  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2) {
+    background-position: center;
+    background-image: url(../images/topmenu_items/mobile/star.svg) !important;
+    background-size: 24px 24px;
+  }
   body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2) div:first-child {
     display: none;
   }
-  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2):after {
-    font-size: 17pt;
-    content: "\2606";
-    font-weight: bold;
-    vertical-align: super;
-  }
   body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites {
     width: 160px;
     box-shadow: 0px 4px 5px 2px silver;
@@ -7397,8 +7414,8 @@ span.egw_tutorial_title {
   body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a div.ui-icon-trash {
     display: block;
   }
-  body .et2_nextmatch .nm-mob-header button.nm_toggle_header_on:after {
-    content: "\2613";
+  body .et2_nextmatch .nm-mob-header button.nm_toggle_header_on {
+    background-image: url(../images/cancelled.svg);
   }
   body .et2_nextmatch .nm-mob-header input[type="search"] {
     width: 50px;
@@ -7612,6 +7629,14 @@ span.egw_tutorial_title {
     padding-top: 6px;
     margin-top: 0;
   }
+  body #popupMainDiv .dialogHeadbar button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
+    padding-right: 15px;
+  }
   body .rowHeader {
     font-size: 12pt;
   }
@@ -7640,30 +7665,32 @@ span.egw_tutorial_title {
     margin-left: 50px;
   }
   body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_actionlist button.et2_button.ui-draggable {
-    background-color: transparent !important;
     border: none !important;
     box-shadow: none !important;
     background-position: center !important;
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1);
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
+    margin-right: 15px;
   }
   body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-state-hover {
     background: none;
   }
   body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader {
     color: transparent;
-    border: none;
     height: 46px;
-    width: 35px;
+    width: 50px;
     padding: 0 !important;
-    margin-right: 15px;
-    margin-top: -7px;
-  }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader:after {
-    font-size: 18pt;
-    content: "\205D";
-    font-weight: bold;
-    color: white;
+    background-image: url(../images/dots.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
   }
   body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more h.ui-toolbar-menulistHeader span {
     display: none;
@@ -7745,10 +7772,15 @@ span.egw_tutorial_title {
     font-weight: bold;
   }
   body .et2_searchbox button.et2_button.searched {
-    background-image: url(../images/topmenu_items/mobile/search.png);
+    background-image: url(../images/search.svg);
   }
   body .et2_searchbox button.et2_button {
-    background-image: url(../images/topmenu_items/mobile/search_white.png) !important;
+    background-image: url(../images/search.svg) !important;
+    -webkit-filter: brightness(0) invert(1) !important;
+    filter: brightness(0) invert(1) !important;
+    background-color: transparent !important;
+    background-size: 24px 24px !important;
+    border: none;
   }
   body .et2_searchbox input {
     font-size: 10pt;
@@ -7775,7 +7807,7 @@ span.egw_tutorial_title {
     background-color: white;
     height: 49px;
     width: 50px;
-    background-image: url("../images/cancelled.png");
+    background-image: url("../images/cancelled.svg");
     background-position: center;
     background-repeat: no-repeat;
     border-bottom: 1px solid #e6e6e6;
@@ -7787,5 +7819,11 @@ span.egw_tutorial_title {
   body img.et2_button_icon[src*="svg"] {
     background: none;
     box-shadow: none;
+    border: none;
+  }
+  body img[src*="svg"] {
+    background: none !important;
+    border: none;
+    box-shado: none;
   }
 }
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index f2ccf64871..e556d1486e 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -36,12 +36,17 @@
 /*Smartphones*/
 @smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})";
 
+.white-svg {
+	-webkit-filter: brightness(0) invert(1) !important;
+	filter: brightness(0) invert(1) !important;
+	background-color: transparent !important;
+	background-size: 24px 24px !important;
+	border:none;
+}
 
 @media @handheld
 {
-	html * {
-		-webkit-overflow-scrolling: touch;
-	}
+	
 	#egw_fw_print {
 		display:none;
 	}
@@ -219,13 +224,20 @@
 @mobile-button-width: 50px;
 @mobile-nm-search-bg: #0c5da5;
 @media all {
-	html *{touch-action:auto;}
+	html *{touch-action:auto;-webkit-overflow-scrolling: touch;}
 	body
 	{
+		span.egw_fw_mobile_popup_close.loaded {
+			background-image: url(../images/topmenu_items/mobile/back.svg);
+			.white-svg;
+			top: 0;
+			background-position: center;
+			padding: 0;
+		}
 		#egw_fw_basecontainer.sidebar-toggle {
 			#egw_fw_top_toolbar {
 				div#egw_fw_menu {
-					background-image: url(../images/topmenu_items/mobile/menu_white.png);
+					background-image: url(../images/topmenu_items/mobile/menu.svg);
 					width: 50px;
 					height: 50px;
 					background-color: transparent;
@@ -248,8 +260,23 @@
 				background: none;
 				box-shadow: none;
 			}
+			#egw_fw_main img[src$="svg"], #egw_fw_footer img[src$="svg"] {
+				background:none;
+				border:none;
+				filter:none;
+				-webkit-filter:none;
+				box-shadow: none;
+			}
+			.egw_fw_ui_sidemenu_entry_apps> div{
+				display: inline-block;
+				h1 {
+					display: none;
+				}
+				
+			}
 		}
 		
+		
 		//###################
 		//#					#
 		//#	 CONTEXT MENU   #
@@ -450,27 +477,21 @@
 					width:50px;
 				}
 				button.nm_toggle_header {
+					background-image: url(../images/menu_list_round.svg);
 					background-position: center;
 					background-repeat: no-repeat;
 					margin-right:5px;
-					border-left:1px solid silver;
-					border:0;
-					color: white;
 					width:50px;
 					height:50px;
 					display:block;
 					float:right;
+					.white-svg;
 					&:focus{
 						outline:none;
 					}
-					&:after{
-						font-size: 18pt;
-						content:"\2261";
-						
-					}
-
 				}
 				button.nm_action_header {
+					background-image: url(../images/dots.svg);
 					background-position: center;
 					background-repeat: no-repeat;
 					margin-right:5px;
@@ -481,22 +502,13 @@
 					height:50px;
 					display:block;
 					float:right;
+					.white-svg;
 					&:focus{
 						outline:none;
 					}
-					&:after{
-						font-size:18pt;
-						content:"\205D";
-						font-weight: bold;
-					}
 				}
 				button.nm_action_header.back {
-					
-					&:after{
-						font-size:18pt;
-						content: "\2190";
-						font-weight: bold;
-					}
+					background-image: url(../images/cancelled.svg);
 				}
 				div.nm_favorites_div {
 					background-position: center;
@@ -521,15 +533,12 @@
 								display: none;
 							}
 							button:nth-child(2) {
+								background-position: center;
+								background-image: url(../images/topmenu_items/mobile/star.svg) !important;
+								background-size: 24px 24px;
 								div:first-child {
 									display: none;
 								}
-								&:after{
-									font-size: 17pt;
-									content: "\2606";
-									font-weight: bold;
-									vertical-align: super;
-								}
 							}
 						}
 						ul.favorites {
@@ -557,9 +566,7 @@
 					}
 				}
 				button.nm_toggle_header_on {
-					&:after {
-						content:"\2613";
-					}
+					background-image: url(../images/cancelled.svg);
 				}
 				input[type="search"] {
 					width: 50px;
@@ -781,6 +788,12 @@
 					margin-top:0;
 				}
 			}
+			.dialogHeadbar {
+				button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
+					.white-svg;
+					padding-right: 15px;
+				}
+			}
 		}
 		.rowHeader {
 			.mob-fontsize-l;
@@ -818,12 +831,11 @@
 				div.et2_toolbar_actionlist {
 					margin-left: 50px;
 					button.et2_button.ui-draggable {
-						background-color: transparent !important;
 						border: none !important;
 						box-shadow: none !important;
 						background-position: center !important;
-						-webkit-filter: brightness(0) invert(1);
-						filter: brightness(0) invert(1);
+						.white-svg;
+						margin-right: 15px;
 					}
 				}
 				div.et2_toolbar_more {
@@ -835,173 +847,173 @@
 						color:transparent;
 						border: none;
 						height: 46px;
-						width: 35px;
+						width: 50px;
 						padding: 0 !important;
-						margin-right: 15px;
-						margin-top: -7px;
-						&:hover {
-
-						}
-						&:after {
-							font-size:18pt;
-							content:"\205D";
-							font-weight: bold;
-							color:white;
-						}
+						background-image: url(../images/dots.svg);
+						background-repeat: no-repeat;
+						background-position: center;
+						.white-svg;
 						span {
 							display: none;
 						}
 					}
 				}
 			}
-			//###########################################
-			//#											#
-			//#		et2_tabbox styles					#
-			//#											#
-			//###########################################
-			.et2_tabbox.vertical {
-				.et2_tabflag {
-					border:none;
-					div.et2_tabtitle {
-						background-color: #f0f0f0;
-						&:before {
-							padding: 0;
-							width:30px;
-							height:30px;
-							text-align: center;
-							font-size: 18pt;
-						}
+		//###########################################
+		//#											#
+		//#		et2_tabbox styles					#
+		//#											#
+		//###########################################
+		.et2_tabbox.vertical {
+			.et2_tabflag {
+				border:none;
+				div.et2_tabtitle {
+					background-color: #f0f0f0;
+					&:before {
+						padding: 0;
+						width:30px;
+						height:30px;
+						text-align: center;
+						font-size: 18pt;
 					}
 				}
 			}
-			.et2_link_to {
-				div {
-					height:40px;
-					padding-bottom: 3px;
-					width: 99% !important;
-				}
-				.et2_file {
-					margin: 0;
-					padding:0;
-					.et2_file_span, .et2_file_spanHover, .et2_file_upload {
-						height:25px !important;
-					}
+		}
+		.et2_link_to {
+			div {
+				height:40px;
+				padding-bottom: 3px;
+				width: 99% !important;
+			}
+			.et2_file {
+				margin: 0;
+				padding:0;
+				.et2_file_span, .et2_file_spanHover, .et2_file_upload {
+					height:25px !important;
 				}
 			}
-			/*Chosen*/
-			.chzn-container {
-				ul.chzn-choices {
-					background: none;
-					border: none;
-					border-bottom: 1px solid @gray_10;
-					
-				}
+		}
+		/*Chosen*/
+		.chzn-container {
+			ul.chzn-choices {
+				background: none;
+				border: none;
+				border-bottom: 1px solid @gray_10;
 
 			}
-			.chzn-container-multi {
-				.chzn-choices {
-					li.search-field {
-						.default {
-							color:#666;
-						}
+
+		}
+		.chzn-container-multi {
+			.chzn-choices {
+				li.search-field {
+					.default {
+						color:#666;
 					}
 				}
 			}
-			.et2_taglist {
-				.ms-ctn {
-					border: none;
-					border-bottom: 1px solid @gray_10;
-					border-radius: 0;
-					margin-right:5px;
-				}
-				.ms-sel-ctn	{
-					background: white;
-				}
+		}
+		.et2_taglist {
+			.ms-ctn {
+				border: none;
+				border-bottom: 1px solid @gray_10;
+				border-radius: 0;
+				margin-right:5px;
 			}
-			
-			/* View mode styles*/
-			.et2_mobile_view {
-				display:block;
-				
-				.et2_mobile-view-container {
-					padding:0 14px 0 7px;
-					/*Disable et2_link_to as it does not make sense in view mode*/
-					div.et2_link_to {display: none;}
-				}
-				table.et2_grid{
-					tr {
-						td {
-							padding: 10px 5px 10px 0;
-						}
+			.ms-sel-ctn	{
+				background: white;
+			}
+		}
+
+		/* View mode styles*/
+		.et2_mobile_view {
+			display:block;
+
+			.et2_mobile-view-container {
+				padding:0 14px 0 7px;
+				/*Disable et2_link_to as it does not make sense in view mode*/
+				div.et2_link_to {display: none;}
+			}
+			table.et2_grid{
+				tr {
+					td {
+						padding: 10px 5px 10px 0;
 					}
 				}
 			}
-			.mobile-view-editBtn {
-				position: fixed;
-				top:2px;
-				left: 70px;
-				width: 50px;
-				height: 50px;
-				float:left;
-				z-index:104;
-				font-size:18pt !important;
+		}
+		.mobile-view-editBtn {
+			position: fixed;
+			top:2px;
+			left: 70px;
+			width: 50px;
+			height: 50px;
+			float:left;
+			z-index:104;
+			font-size:18pt !important;
+			color: white;
+			&:before {
+				content: "";
+				font-size: 24pt;
 				color: white;
-				&:before {
-					content: "";
-					font-size: 24pt;
-					color: white;
-					padding-left: 5px;
-					font-weight: bold;
-				}
-				display: block;
+				padding-left: 5px;
+				font-weight: bold;
 			}
-			
-			.et2_searchbox {
-				button.et2_button.searched {
-					background-image: url(../images/topmenu_items/mobile/search.png);
-				}
-				button.et2_button {
-					background-image: url(../images/topmenu_items/mobile/search_white.png) !important;
-				}
-				input{
-					.mob-fontsize-n;
-				}
+			display: block;
+		}
+
+		.et2_searchbox {
+			button.et2_button.searched {
+				background-image: url(../images/search.svg);
 			}
-			.et2_searchbox.expanded {
-				position: absolute;
-				width:100% !important;
-				height:50px;
-				margin-left:0;
-				button.et2_button{
-					background: none;
-				}
-				input {
-					width:100%;
-					height:45px;
-					margin:0;
-					top:0;
-					outline: none;
-				}
-				span.ui-icon.clear{
-					top: 0px;
-					left: -50px;
-					background-color: white;
-					height: 49px;
-					width: 50px;
-					background-image: url("../images/cancelled.png");
-					background-position: center;
-					background-repeat: no-repeat;
-					border-bottom: 1px solid #e6e6e6;
-					background-size: 24px 24px;
-				}
-				.flex{
-					width:100%;
-				}
+			button.et2_button {
+				background-image: url(../images/search.svg) !important;
+				.white-svg;
 			}
-			
-			img.et2_button_icon[src*="svg"] {
+			input{
+				.mob-fontsize-n;
+			}
+		}
+		.et2_searchbox.expanded {
+			position: absolute;
+			width:100% !important;
+			height:50px;
+			margin-left:0;
+			button.et2_button{
 				background: none;
-				box-shadow: none;
 			}
+			input {
+				width:100%;
+				height:45px;
+				margin:0;
+				top:0;
+				outline: none;
+			}
+			span.ui-icon.clear{
+				top: 0px;
+				left: -50px;
+				background-color: white;
+				height: 49px;
+				width: 50px;
+				background-image: url("../images/cancelled.svg");
+				background-position: center;
+				background-repeat: no-repeat;
+				border-bottom: 1px solid #e6e6e6;
+				background-size: 24px 24px;
+			}
+			.flex{
+				width:100%;
+			}
+		}
+		
+		img.et2_button_icon[src*="svg"] {
+			background: none;
+			box-shadow: none;
+			border:none;
+		}
+		img[src*="svg"] {
+			background:none !important;
+			border:none;
+			box-shado:none;
+		}
 	}	
 }