From 160f0e9aa749e3b02f965c2ae505a0769d7695b3 Mon Sep 17 00:00:00 2001
From: milan <mk@egroupware.org>
Date: Thu, 19 Sep 2024 17:34:52 +0200
Subject: [PATCH] align toolbar icons in the center

---
 api/js/etemplate/Et2Favorites/Et2Favorites.ts |  4 ++--
 pixelegg/css/fancy.css                        | 10 ++++++++--
 pixelegg/css/fancy.less                       |  4 ++--
 pixelegg/css/mobile.less                      |  3 +++
 pixelegg/css/pixelegg.css                     |  5 +++++
 pixelegg/css/pixelegg.less                    |  7 +++++++
 pixelegg/mobile/fw_mobile.css                 |  9 +++++++++
 7 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/api/js/etemplate/Et2Favorites/Et2Favorites.ts b/api/js/etemplate/Et2Favorites/Et2Favorites.ts
index f3b9a5b3e2..773531dd6a 100644
--- a/api/js/etemplate/Et2Favorites/Et2Favorites.ts
+++ b/api/js/etemplate/Et2Favorites/Et2Favorites.ts
@@ -53,12 +53,12 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
 			...super.styles,
 			css`
 			  :host {
-				min-width: 8ex;
+				  min-width: 8ex;
 			  }
 
 			  et2-image {
 				position: absolute;
-				left: ${egwIsMobile() ? css`-.4em` : css`.7em`};
+				left: var(--et2-favorites-left);
 				width: ${egwIsMobile() ? css`4ex` : css`20px`};
                 font-size: ${egwIsMobile() ? css`4ex` : css`20px`};
 				top: -2px;
diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css
index 1399c6d763..365b8a3066 100644
--- a/pixelegg/css/fancy.css
+++ b/pixelegg/css/fancy.css
@@ -6797,6 +6797,7 @@ table.egwGridView_grid img.et2_appicon {
   --sl-focus-ring-width: 2px;
   --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
   --track-width: 3px;
+  --et2-favorites-left: 0.4em;
 }
 .bi::before,
 [class^="bi-"]::before,
@@ -7142,6 +7143,11 @@ img.et2_button_icon[src*="svg"]:hover {
 ::-ms-input-placeholder {
   color: #666666;
 }
+.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
+  justify-content: center;
+  --et2-button-image-padding-left: 0;
+  padding-inline-start: 0;
+}
 :root,
 :host,
 .sl-theme-light,
@@ -7161,7 +7167,7 @@ img.et2_button_icon[src*="svg"]:hover {
 .sl-theme-light et2-tabbox::part(tabs),
 .sl-theme-dark et2-tabbox::part(tabs) {
   padding-bottom: var(--sl-spacing-x-small);
-  padding-top: var(--sl-spacing-medium);
+  padding-top: var(--sl-spacing-large);
   gap: var(--sl-spacing-medium);
 }
 :root et2-tabbox et2-tab::part(base),
@@ -7182,7 +7188,7 @@ img.et2_button_icon[src*="svg"]:hover {
 :host et2-tabbox .tabLabel,
 .sl-theme-light et2-tabbox .tabLabel,
 .sl-theme-dark et2-tabbox .tabLabel {
-  max-height: 1em;
+  max-height: 1.1em;
 }
 :root et2-tabbox et2-tab-panel,
 :host et2-tabbox et2-tab-panel,
diff --git a/pixelegg/css/fancy.less b/pixelegg/css/fancy.less
index 1ec8182e06..e0c3fee814 100644
--- a/pixelegg/css/fancy.less
+++ b/pixelegg/css/fancy.less
@@ -18,7 +18,7 @@
 
         &::part(tabs) {
             padding-bottom: var(--sl-spacing-x-small);
-            padding-top: var(--sl-spacing-medium);
+            padding-top: var(--sl-spacing-large);
             gap: var(--sl-spacing-medium);
         }
 
@@ -39,7 +39,7 @@
         }
 
         .tabLabel {
-            max-height: 1em;
+            max-height: 1.1em;
         }
         et2-tab-panel{
             border: 1px solid var(--sl-color-neutral-300);
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index 5e60d9f583..05a3b99753 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -31,6 +31,9 @@
 }
 
 @media all {
+	:host{
+		--et2-favorites-left: .7em;
+	}
 	body{
 
 		background-color: transparent;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index ab42f186b0..7c23cd4a5a 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -7135,3 +7135,8 @@ img.et2_button_icon[src*="svg"]:hover {
 ::-ms-input-placeholder {
   color: #666666;
 }
+.et2-toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
+  justify-content: center;
+  --et2-button-image-padding-left: 0;
+  padding-inline-start: 0;
+}
diff --git a/pixelegg/css/pixelegg.less b/pixelegg/css/pixelegg.less
index 8a80a8e2f4..3f4339a392 100644
--- a/pixelegg/css/pixelegg.less
+++ b/pixelegg/css/pixelegg.less
@@ -30,6 +30,7 @@
 	--sl-focus-ring-width: 2px;
 	--sl-color-gray-150: hsl(240, 4.9%, 92.5%);
 	--track-width: 3px;
+	--et2-favorites-left: .4em;
 }
 
 .bi::before,
@@ -410,4 +411,10 @@ img.et2_button_icon[src*="svg"], img.et2_button_icon[src*="svg"]:hover {
 }
 ::-ms-input-placeholder{
 	color: @color_placeholder;
+}
+
+.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
+	justify-content: center;
+	--et2-button-image-padding-left: 0;
+	padding-inline-start: 0;
 }
\ No newline at end of file
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 51343c6ba8..9b40e60395 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -6607,6 +6607,7 @@ span.egw_tutorial_title {
   --sl-focus-ring-width: 2px;
   --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
   --track-width: 3px;
+  --et2-favorites-left: 0.4em;
 }
 .bi::before,
 [class^="bi-"]::before,
@@ -6952,6 +6953,11 @@ img.et2_button_icon[src*="svg"]:hover {
 ::-ms-input-placeholder {
   color: #666666;
 }
+.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
+  justify-content: center;
+  --et2-button-image-padding-left: 0;
+  padding-inline-start: 0;
+}
 @keyframes fw-firstload {
   0%,
   20%,
@@ -6974,6 +6980,9 @@ img.et2_button_icon[src*="svg"]:hover {
   }
 }
 @media all {
+  :host {
+    --et2-favorites-left: 0.7em;
+  }
   body {
     background-color: transparent;
     /*BOF close/back button styling*/