From 98aac390473f4c498fdff22f0675a2b38079a3e7 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 17 Aug 2022 12:35:36 +0200
Subject: [PATCH] WIP getting all legacy menus close to new webcomponent
 styling

---
 api/templates/default/etemplate2.css | 21 +++++++++++++++------
 pixelegg/css/pixelegg.css            | 12 ------------
 pixelegg/less/etemplate2.less        | 14 --------------
 3 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 17e1e4eb77..8e4943e560 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2884,11 +2884,18 @@ div.et2_toolbar.ui-widget-header {
     background-color: #fafafa;
 }
 
-.et2_toolbar et2-button, .et2_toolbar et2-switch {
+.et2_toolbar .et2_toolbar_actionlist et2-button,
+.et2_toolbar .et2_toolbar_actionlist et2-switch {
     margin-right: 1ex;
     min-width: 24px;
 }
+.et2_toolbar .ui-toolbar-menulist > *:hover{
+    outline: none;
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
+}
 
+.et2_toolbar .ui-toolbar-menulist > *:hover::part(label){color: var(--sl-color-neutral-0);}
 .nextmatch_header_row et2-button::part(container) {
     height: 18px;
 }
@@ -3101,20 +3108,21 @@ et2-button.transparent-button::part(container) {
     height: inherit;
     z-index: 999 !important;
     overflow: hidden !important;
-    border: solid black 1px;
     padding: 0 !important;
     margin-top: 3px !important;
     min-width: 150px;
     padding-top: 3px;
     padding-top: 1px;
     padding-bottom: 1px;
-    box-shadow: 2px 3px 13px #666;
-    -moz-box-shadow: 2px 3px 13px #666;
-    -webkit-box-shadow: 2px 3px 13px #666;
-    -khtml-box-shadow: 2px 3px 13px #666;
     -moz-user-select: none;
     background: white;
     right: 0;
+    font-size: 11px;
+    font-weight: 400;
+    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+    border: 1px solid hsl(240deg 6% 90%);
+    border-radius: 3px;
+    overscroll-behavior: none;
 }
 .ui-toolbar-menulist > * {
     border: none !important;
@@ -3135,6 +3143,7 @@ et2-button.transparent-button::part(container) {
 .ui-toolbar-menulist et2-button::part(base) {
     border: none;
     margin: 0.3em;
+    background-color: transparent;
 }
 .ui-toolbar-menulist > button {
     margin: 0 !important;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index eed1fb14b2..35c4d9e452 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1050,18 +1050,6 @@
                     margin: 2px !important;
                     min-height: 19px;*/
   }
-  div.ui-toolbar-menulist {
-    position: absolute;
-    height: inherit;
-    z-index: 999 !important;
-    overflow: hidden !important;
-    border: solid black 1px;
-    padding: 0 !important;
-    margin-top: 3px !important;
-  }
-  .ui-toolbar-menulist > h {
-    padding-bottom: 7px;
-  }
   .ui-toolbar-menulistHeader {
     font-size: xx-small;
     height: 100%;
diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less
index 90e3152b7f..27c626a3cf 100755
--- a/pixelegg/less/etemplate2.less
+++ b/pixelegg/less/etemplate2.less
@@ -906,20 +906,6 @@ textarea.description {
 
 }
 
-
-
-div.ui-toolbar-menulist{
-	position: absolute;
-	height: inherit;
-	z-index: 999 !important;
-	overflow: hidden !important;
-	border: solid black 1px;
-	padding: 0 !important;
-	margin-top: 3px !important;
-}
-.ui-toolbar-menulist > h {
-	padding-bottom: 7px;
-}
 .ui-toolbar-menulistHeader{
 	font-size: xx-small;
 	height:100%;