From eacb9e54947dbfbeca0ba2ef461e5c55ea7a669f Mon Sep 17 00:00:00 2001
From: milan <mk@egroupware.org>
Date: Fri, 13 Sep 2024 00:06:41 +0200
Subject: [PATCH] change styling of fancy theme tabbox to visualy group tab
 contents

---
 pixelegg/css/fancy.css  | 35 ++++++++++++++++++++++++++++-
 pixelegg/css/fancy.less | 50 ++++++++++++++++++++++++++++++-----------
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css
index 01ce689d6c..42a030f221 100644
--- a/pixelegg/css/fancy.css
+++ b/pixelegg/css/fancy.css
@@ -7147,11 +7147,44 @@ img.et2_button_icon[src*="svg"]:hover {
 .sl-theme-dark et2-tabbox {
   --track-width: 0px;
 }
+:root et2-tabbox::part(tabs),
+:host et2-tabbox::part(tabs),
+.sl-theme-light et2-tabbox::part(tabs),
+.sl-theme-dark et2-tabbox::part(tabs) {
+  padding-bottom: var(--sl-spacing-large);
+  padding-top: var(--sl-spacing-x-large);
+  gap: var(--sl-spacing-large);
+}
+:root et2-tabbox et2-tab::part(base),
+:host et2-tabbox et2-tab::part(base),
+.sl-theme-light et2-tabbox et2-tab::part(base),
+.sl-theme-dark et2-tabbox et2-tab::part(base) {
+  border: 1px solid;
+  border-color: var(--sl-color-neutral-300);
+  border-radius: var(--sl-border-radius-pill);
+}
 :root et2-tabbox et2-tab[active]::part(base),
 :host et2-tabbox et2-tab[active]::part(base),
 .sl-theme-light et2-tabbox et2-tab[active]::part(base),
 .sl-theme-dark et2-tabbox et2-tab[active]::part(base) {
-  border: 1px solid;
+  border-color: var(--sl-color-neutral-900);
+}
+:root et2-tabbox et2-tab-panel,
+:host et2-tabbox et2-tab-panel,
+.sl-theme-light et2-tabbox et2-tab-panel,
+.sl-theme-dark et2-tabbox et2-tab-panel {
+  border: 1px solid var(--sl-color-neutral-300);
+  border-radius: var(--sl-border-radius-medium);
+  padding: var(--sl-spacing-medium);
+}
+:root et2-tabbox .et2_toolbar input.et2_textbox,
+:host et2-tabbox .et2_toolbar input.et2_textbox,
+.sl-theme-light et2-tabbox .et2_toolbar input.et2_textbox,
+.sl-theme-dark et2-tabbox .et2_toolbar input.et2_textbox,
+:root et2-tabbox .nextmatch_header_row input.et2_textbox,
+:host et2-tabbox .nextmatch_header_row input.et2_textbox,
+.sl-theme-light et2-tabbox .nextmatch_header_row input.et2_textbox,
+.sl-theme-dark et2-tabbox .nextmatch_header_row input.et2_textbox {
   border-radius: var(--sl-border-radius-pill);
 }
 .nextmatch_header .header_count {
diff --git a/pixelegg/css/fancy.less b/pixelegg/css/fancy.less
index 4ce79249aa..ed47a2deab 100644
--- a/pixelegg/css/fancy.less
+++ b/pixelegg/css/fancy.less
@@ -9,23 +9,47 @@
 
 // overwriting pixelegg.less and Shoelace themes
 :root, :host, .sl-theme-light, .sl-theme-dark {
-  --sl-border-radius-medium: 20px;
-  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
-  --et2-button-image-padding-left: .3rem;
+    --sl-border-radius-medium: 20px;
+    --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+    --et2-button-image-padding-left: .3rem;
 
-  et2-tabbox {
-	--track-width: 0px;
+    et2-tabbox {
+        --track-width: 0px;
 
-	et2-tab[active] {
-	  &::part(base) {
-		border: 1px solid;
-		border-radius: var(--sl-border-radius-pill);
-	  }
-	}
-  }
+
+        &::part(tabs) {
+            padding-bottom: var(--sl-spacing-large);
+            padding-top: var(--sl-spacing-x-large);
+            gap: var(--sl-spacing-large);
+        }
+
+        et2-tab {
+            &::part(base) {
+                border: 1px solid;
+                border-color: var(--sl-color-neutral-300);
+                border-radius: var(--sl-border-radius-pill);
+            }
+        }
+
+        et2-tab[active] {
+            &::part(base) {
+                border-color: var(--sl-color-neutral-900);
+            }
+        }
+        
+        et2-tab-panel{
+            border: 1px solid var(--sl-color-neutral-300);
+            border-radius: var(--sl-border-radius-medium);
+            padding: var(--sl-spacing-medium);
+        }
+
+        .et2_toolbar input.et2_textbox, .nextmatch_header_row input.et2_textbox{
+            border-radius: var(--sl-border-radius-pill);
+        }
+    }
 }
 
 // styling of legacy NM parts
 .nextmatch_header .header_count {
-	border-radius: var(--sl-border-radius-medium);
+    border-radius: var(--sl-border-radius-medium);
 }
\ No newline at end of file