From 61013d28cfbf6db059f3b19f7c0270c0de97035b Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Thu, 18 Aug 2022 10:54:18 +0200
Subject: [PATCH] Get avatar menu in the framework looking like the rest

---
 pixelegg/css/pixelegg.css               | 15 ++++++++-------
 pixelegg/less/def_colors.less           |  5 +++++
 pixelegg/less/layout_dhtmlSubmenu.less  |  6 +++---
 pixelegg/less/layout_raster_header.less | 11 ++++++++---
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 01c32d9f99..e0e2e8f500 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -4243,10 +4243,8 @@ span.overlayContainer img.overlay {
   z-index: 1001;
   top: 46px;
   background: white;
-  box-shadow: 2px 3px 13px #666666;
-  -moz-box-shadow: 2px 3px 13px #666666;
-  -webkit-box-shadow: 2px 3px 13px #666666;
-  -khtml-box-shadow: 2px 3px 13px #666666;
+  box-shadow: 0 2px 8px hsla(240, 3.8%, 46.1%, 0.12);
+  border: 1px solid hsl(240, 6%, 90%);
 }
 #egw_fw_header #egw_fw_topmenu a.powered_by {
   width: calc(100% - 20px);
@@ -4343,13 +4341,16 @@ span.overlayContainer img.overlay {
   border-top: #E6E6E6;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li:hover {
-  background: rgba(153, 204, 255, 0.4);
-  color: #FFFFFF;
+  background: hsl(200, 98%, 39%);
+  color: hsl(0, 0%, 100%);
+}
+#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li:hover a {
+  filter: invert(1) brightness(5);
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a {
   color: #000000;
   text-decoration: none;
-  font-size: 12px;
+  font-size: 11px;
   padding-left: 26px;
   line-height: 1.5em;
   display: inline-block;
diff --git a/pixelegg/less/def_colors.less b/pixelegg/less/def_colors.less
index 757383383a..f5fc3552af 100644
--- a/pixelegg/less/def_colors.less
+++ b/pixelegg/less/def_colors.less
@@ -165,6 +165,11 @@
 // Mouse over
 @color_hover_row : fade(@egw_color_hover, 40%);
 
+@sl-color-menu: hsl(0, 0%, 100%);
+@sl-bg-color-menu: hsl(200, 98%, 39%);
+@sl-filter-menu: invert(1) brightness(5);
+@sl-box-shadow-menu: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+@sl-border-menu: 1px solid hsl(240deg 6% 90%);
 
 /* Dialog Button panel Background Color*/
 @color_button_panel_bg_color : @egw_color_2_e;
diff --git a/pixelegg/less/layout_dhtmlSubmenu.less b/pixelegg/less/layout_dhtmlSubmenu.less
index 31a96e06cb..9b78f8d9cd 100644
--- a/pixelegg/less/layout_dhtmlSubmenu.less
+++ b/pixelegg/less/layout_dhtmlSubmenu.less
@@ -29,13 +29,13 @@ div.dhtmlxMenu_egw_SubLevelArea_Polygon{
 		tr.sub_item_selected  {
 			td.sub_item_icon {
 				img.sub_icon {
-					filter: invert(1) brightness(5);
+					filter: @sl-filter-menu;
 				}
 			}
-			background-color: hsl(200deg 98% 39%) !important;
+			background-color: @sl-bg-color-menu !important;
 			background-image: none !important;
 			div.sub_item_text, td.sub_item_hk div.sub_item_hk {
-				color: hsl(0deg 0% 100%);
+				color: @sl-color-menu;
 			}
 		}
 		div.sub_sep {
diff --git a/pixelegg/less/layout_raster_header.less b/pixelegg/less/layout_raster_header.less
index fd034cad06..de68fb9cb1 100644
--- a/pixelegg/less/layout_raster_header.less
+++ b/pixelegg/less/layout_raster_header.less
@@ -64,7 +64,8 @@
 		z-index: 1001;
 		top: 46px;
 	    background: white;
-		.box_shadow;
+		box-shadow: @sl-box-shadow-menu;
+		border: @sl-border-menu;
 		a.powered_by {
 			width: ~"calc(100% - 20px)";
 			display: inline-block;
@@ -162,11 +163,15 @@
 					color: @gray_0;
 					padding: 8px 10px;
 					border-top: @gray_10;
-					&:hover{ background: @color_hover_row;color: @gray_0;}
+					&:hover{
+						background: @sl-bg-color-menu;
+						color: @sl-color-menu;
+						a {filter:@sl-filter-menu}
+					}
 					a {
 						color: @gray_100;
 						text-decoration: none;
-						.fontsize_l;
+						.fontsize_m;
 						padding-left: 26px;
 						line-height: 1.5em;
 						display:inline-block;