From f720ffdf1dc277d96dfe9552ef949f3cdc69c4af Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 9 Apr 2019 11:02:02 +0200
Subject: [PATCH] Fix favorites styles inside sidebar menu

---
 pixelegg/css/mobile.css                  |  32 +++--
 pixelegg/css/monochrome.css              |  32 +++--
 pixelegg/css/pixelegg.css                |  32 +++--
 pixelegg/images/favorites.svg            |   2 +-
 pixelegg/less/etemplate2.less            | 154 +++++++++++------------
 pixelegg/less/layout_raster_sidebar.less |   5 +-
 pixelegg/mobile/fw_mobile.css            |  32 +++--
 7 files changed, 128 insertions(+), 161 deletions(-)

diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index d13d639bc2..788e4d19d0 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -750,25 +750,26 @@
     min-height: 16px;
     padding: 3px 0px;
     margin-bottom: 0.2em;
-    background-color: #ece2f7;
+  }
+  .sidebox-favorites ul.favorites li.ui-menu-item a {
+    color: #000000;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover {
     color: #000000;
-    background-color: #9B6AD6;
+    background-color: rgba(153, 204, 255, 0.4);
     padding: 3px 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover a {
-    color: #FFFFFF;
+    color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type {
-    background-color: #FFFFFF;
+  .sidebox-favorites ul.favorites li.ui-menu-item:hover a .ui-icon-trash {
+    background-image: url(../images/delete.svg);
+    background-size: 12px 12px;
+    background-position: center 4px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type a {
     color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type {
-    background-color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type a {
     color: #000000;
   }
@@ -777,7 +778,7 @@
     padding: 2px 0px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item a div.ui-icon-heart {
-    background-image: url(../images/personal.png);
+    background-image: url(../images/favorites.svg);
     background-size: 12px 12px;
     background-position: 0 0;
     margin-right: 9px;
@@ -801,26 +802,23 @@
     margin-top: -3px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item [data-id="blank"] div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight {
     color: #000000;
-    background: #9B6AD6;
+    background: rgba(102, 153, 204, 0.7);
     padding: 3px 0;
     border: none;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight a {
-    color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li:first-child a div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li:first-child a div.sideboxstar {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
@@ -4800,8 +4798,6 @@ td.message span.message {
   text-decoration: none;
   min-width: 5em;
   vertical-align: bottom;
-}
-.egw_fw_ui_sidemenu_listitem a:hover {
   color: #000000;
 }
 .egw_fw_ui_sidemenu_listitem a:active {
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index 0625626c9c..b26ba23903 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -739,25 +739,26 @@
     min-height: 16px;
     padding: 3px 0px;
     margin-bottom: 0.2em;
-    background-color: #ece2f7;
+  }
+  .sidebox-favorites ul.favorites li.ui-menu-item a {
+    color: #000000;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover {
     color: #000000;
-    background-color: #9B6AD6;
+    background-color: rgba(153, 204, 255, 0.4);
     padding: 3px 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover a {
-    color: #FFFFFF;
+    color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type {
-    background-color: #FFFFFF;
+  .sidebox-favorites ul.favorites li.ui-menu-item:hover a .ui-icon-trash {
+    background-image: url(../images/delete.svg);
+    background-size: 12px 12px;
+    background-position: center 4px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type a {
     color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type {
-    background-color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type a {
     color: #000000;
   }
@@ -766,7 +767,7 @@
     padding: 2px 0px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item a div.ui-icon-heart {
-    background-image: url(../images/personal.png);
+    background-image: url(../images/favorites.svg);
     background-size: 12px 12px;
     background-position: 0 0;
     margin-right: 9px;
@@ -790,26 +791,23 @@
     margin-top: -3px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item [data-id="blank"] div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight {
     color: #000000;
-    background: #9B6AD6;
+    background: rgba(102, 153, 204, 0.7);
     padding: 3px 0;
     border: none;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight a {
-    color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li:first-child a div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li:first-child a div.sideboxstar {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
@@ -4789,8 +4787,6 @@ td.message span.message {
   text-decoration: none;
   min-width: 5em;
   vertical-align: bottom;
-}
-.egw_fw_ui_sidemenu_listitem a:hover {
   color: #000000;
 }
 .egw_fw_ui_sidemenu_listitem a:active {
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index ced099e4d7..3156043f9c 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -750,25 +750,26 @@
     min-height: 16px;
     padding: 3px 0px;
     margin-bottom: 0.2em;
-    background-color: #ece2f7;
+  }
+  .sidebox-favorites ul.favorites li.ui-menu-item a {
+    color: #000000;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover {
     color: #000000;
-    background-color: #9B6AD6;
+    background-color: rgba(153, 204, 255, 0.4);
     padding: 3px 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover a {
-    color: #FFFFFF;
+    color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type {
-    background-color: #FFFFFF;
+  .sidebox-favorites ul.favorites li.ui-menu-item:hover a .ui-icon-trash {
+    background-image: url(../images/delete.svg);
+    background-size: 12px 12px;
+    background-position: center 4px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type a {
     color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type {
-    background-color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type a {
     color: #000000;
   }
@@ -777,7 +778,7 @@
     padding: 2px 0px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item a div.ui-icon-heart {
-    background-image: url(../images/personal.png);
+    background-image: url(../images/favorites.svg);
     background-size: 12px 12px;
     background-position: 0 0;
     margin-right: 9px;
@@ -801,26 +802,23 @@
     margin-top: -3px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item [data-id="blank"] div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight {
     color: #000000;
-    background: #9B6AD6;
+    background: rgba(102, 153, 204, 0.7);
     padding: 3px 0;
     border: none;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight a {
-    color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li:first-child a div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li:first-child a div.sideboxstar {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
@@ -4800,8 +4798,6 @@ td.message span.message {
   text-decoration: none;
   min-width: 5em;
   vertical-align: bottom;
-}
-.egw_fw_ui_sidemenu_listitem a:hover {
   color: #000000;
 }
 .egw_fw_ui_sidemenu_listitem a:active {
diff --git a/pixelegg/images/favorites.svg b/pixelegg/images/favorites.svg
index 2e940b979a..0708b16ea0 100644
--- a/pixelegg/images/favorites.svg
+++ b/pixelegg/images/favorites.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<?xml-stylesheet type="text/css" href="../less/svg.css" ?>
+<?xml-stylesheet type="text/css" href="../less/svg.css" ?>
 <svg version="1.1" id="pixelegg_star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
 <path fill-rule="evenodd" clip-rule="evenodd" fill="#696969" d="M30.194,12.042
diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less
index b53784e5f8..6381a393b8 100755
--- a/pixelegg/less/etemplate2.less
+++ b/pixelegg/less/etemplate2.less
@@ -698,94 +698,80 @@ div.header_row_right{
 // Favoriten
 .sidebox-favorites {
 
-        ul.favorites {
-                    width: 99%;
-                    padding: 0px;
-                    border: none;
-                    background: white;
-
-                    li.ui-menu-item {
-                                    margin-left: 0px;
-                                    min-height: 16px;
-                                    padding: 3px 0px;
-                                    margin-bottom: 0.2em;
-                                    background-color: lighten(@egw_color_3_e, 30%);
-
-                                    // lila
-                                    &:hover{
-                                            .color_100_gray;
-                                            background-color: @egw_color_3_e;
-                                            padding: 3px 0;
-
-                                            a{color: @gray_0;}
-
-                                        }
-
-                                    // delete favourites
-                                    &:first-of-type {background-color: @gray_0;
-
-                                                     a{color: @gray_100;}
-                                    }
-
-                                    // view as favourites
-                                    &:last-of-type {background-color: @gray_0;
-
-                                                    a{color: @gray_100;}
-                                    }
-
-
-                                        a{
-
-                                                line-height: inherit;
-                                                padding: 2px 0px;
-
-
-                                                // Heart
-                                                div.ui-icon-heart {background-image: url(../images/personal.png); background-size: 12px 12px;background-position: 0 0;margin-right:9px;margin-left:2px;}
-
-                                                // Bulltpoints
-                                                div.sideboxstar {
-                                                                width: 4px;
-                                                                height: 12px;
-                                                                margin-left: 5px;
-																margin-right: 10px;
-                                                                background-image: url(../images/fav_filter.png);
-                                                                background-size: 12px 12px;
-                                                                background-position: 0 0;
-                                                                background-repeat: no-repeat;
-                                                            }
-
-                                             }
-
-                                       // Aktuelle Ansicht als Favorit
-                                       img {.dimension_width_height_xs; margin-left: 5px;margin-right:10px;margin-top:-3px;}
-
-                                       // Filter aufheben
-                                       [data-id="blank"]{
-
-                                                        div.ui-icon-heart {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
-
-                                                    }
-
-
-                                     } // Ende li
-					li.ui-menu-item.ui-state-highlight {
-						.color_100_gray;
-						background: @egw_color_3_e;
-						padding: 3px 0;
-						border: none;
-
-						a{color: @gray_0;}
+	ul.favorites {
+		width: 99%;
+		padding: 0px;
+		border: none;
+		background: white;
 
+		li.ui-menu-item {
+			margin-left: 0px;
+			min-height: 16px;
+			padding: 3px 0px;
+			margin-bottom: 0.2em;
+			a {color:@gray_100;}
+			&:hover {
+				.color_100_gray;
+				background-color: @color_hover_row;
+				padding: 3px 0;
+				a {
+					color: @gray_100;
+					.ui-icon-trash {
+						background-image: url(../images/delete.svg);
+						background-size: 12px 12px;
+						background-position: center 4px;
 					}
-                     // Filter aufheben
-                     li:first-child{
-                        a div.ui-icon-heart {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
-                        a div.sideboxstar {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
+				}
+			}
 
-                     }
+			// delete favourites
+			&:first-of-type {
+				a {color: @gray_100;}
+			}
 
-        }
+			// view as favourites
+			&:last-of-type {
+				a {color: @gray_100;}
+			}
+
+			a {
+				line-height: inherit;
+				padding: 2px 0px;
+				// Heart
+				div.ui-icon-heart {background-image: url(../images/favorites.svg); background-size: 12px 12px;background-position: 0 0;margin-right:9px;margin-left:2px;}
+				// Bulltpoints
+				div.sideboxstar {
+					width: 4px;
+					height: 12px;
+					margin-left: 5px;
+					margin-right: 10px;
+					background-image: url(../images/fav_filter.png);
+					background-size: 12px 12px;
+					background-position: 0 0;
+					background-repeat: no-repeat;
+				}
+
+			}
+			// Aktuelle Ansicht als Favorit
+			img {.dimension_width_height_xs; margin-left: 5px;margin-right:10px;margin-top:-3px;}
+
+			// Filter aufheben
+			[data-id="blank"] {
+				div.ui-icon-heart {background-image: url(../images/delete.svg); background-size: 12px 12px;background-position: 0 0;}
+			}
+		} // Ende li
+		li.ui-menu-item.ui-state-highlight {
+			.color_100_gray;
+			background: @color_selected_row;
+			padding: 3px 0;
+			border: none;
+		}
+		// Filter aufheben
+		li:first-child {
+		   a div.ui-icon-heart {background-image: url(../images/delete.svg); background-size: 12px 12px;background-position: 0 0;}
+		   a div.sideboxstar {background-image: url(../images/delete.svg); background-size: 12px 12px;background-position: 0 0;}
+		}
+	}
 } // sidebox-favorites
 
 // Favorites in nextmatch Header
diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less
index 69d42146ac..b164629d99 100644
--- a/pixelegg/less/layout_raster_sidebar.less
+++ b/pixelegg/less/layout_raster_sidebar.less
@@ -592,10 +592,7 @@
         text-decoration: none;
         min-width: 5em;
         vertical-align: bottom;
-
-        &:hover{
-            .color_100_gray;
-        }
+		.color_100_gray;
 
         &:active {
             .box_shadow_standard_light_inset;
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 3171bbd218..44152ea802 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -761,25 +761,26 @@
     min-height: 16px;
     padding: 3px 0px;
     margin-bottom: 0.2em;
-    background-color: #ece2f7;
+  }
+  .sidebox-favorites ul.favorites li.ui-menu-item a {
+    color: #000000;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover {
     color: #000000;
-    background-color: #9B6AD6;
+    background-color: rgba(153, 204, 255, 0.4);
     padding: 3px 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:hover a {
-    color: #FFFFFF;
+    color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type {
-    background-color: #FFFFFF;
+  .sidebox-favorites ul.favorites li.ui-menu-item:hover a .ui-icon-trash {
+    background-image: url(../images/delete.svg);
+    background-size: 12px 12px;
+    background-position: center 4px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item:first-of-type a {
     color: #000000;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type {
-    background-color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li.ui-menu-item:last-of-type a {
     color: #000000;
   }
@@ -788,7 +789,7 @@
     padding: 2px 0px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item a div.ui-icon-heart {
-    background-image: url(../images/personal.png);
+    background-image: url(../images/favorites.svg);
     background-size: 12px 12px;
     background-position: 0 0;
     margin-right: 9px;
@@ -812,26 +813,23 @@
     margin-top: -3px;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item [data-id="blank"] div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight {
     color: #000000;
-    background: #9B6AD6;
+    background: rgba(102, 153, 204, 0.7);
     padding: 3px 0;
     border: none;
   }
-  .sidebox-favorites ul.favorites li.ui-menu-item.ui-state-highlight a {
-    color: #FFFFFF;
-  }
   .sidebox-favorites ul.favorites li:first-child a div.ui-icon-heart {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
   .sidebox-favorites ul.favorites li:first-child a div.sideboxstar {
-    background-image: url(../images/trash.png);
+    background-image: url(../images/delete.svg);
     background-size: 12px 12px;
     background-position: 0 0;
   }
@@ -4811,8 +4809,6 @@ td.message span.message {
   text-decoration: none;
   min-width: 5em;
   vertical-align: bottom;
-}
-.egw_fw_ui_sidemenu_listitem a:hover {
   color: #000000;
 }
 .egw_fw_ui_sidemenu_listitem a:active {