From f50c362c8e149024243e53cbd2fc4e9b980ec85c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 6 Jun 2023 18:15:08 +0200
Subject: [PATCH] tabs: adjust tab handle styling #550

---
 layouts/partials/shortcodes/tabs.html |  5 ++++-
 static/css/theme.css                  | 20 ++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 9444dea336..8399ad3459 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -60,7 +60,10 @@
       class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
       onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
     >
-      <div><div>{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div></div>
+      <div>
+        <div class="tab-nav-hidden">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div>
+        <div class="tab-nav-text">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div>
+      </div>
     </button>
   {{- end }}
   </div>
diff --git a/static/css/theme.css b/static/css/theme.css
index 42e655bf80..ecfc296411 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1850,6 +1850,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
 }
 
 #body .tab-nav-button{
+    -webkit-appearance: none;
+    appearance: none;
     background-color: transparent;
     border: 1px solid transparent;
     display: block;
@@ -1864,14 +1866,18 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     cursor: default;
 }
 
+#body .tab-nav-button > *{
+    position: relative;
+}
+
 #body .tab-nav-button.active > *{
     border-radius: 1px 1px 0 0;
 }
 
 #body .tab-nav-button > * > *{
     border-bottom-style: solid;
-    border-bottom-width: 2px;
-    padding: .2rem .6rem;
+    border-bottom-width: .2rem;
+    padding: .2rem .6rem 0 .6rem;
 }
 
 #body .tab-nav-button.active > * > *{
@@ -1879,6 +1885,16 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     font-weight: 500;
 }
 
+#body .tab-nav-button > * > .tab-nav-hidden{
+    font-weight: 500;
+    visibility: hidden;
+}
+
+#body .tab-nav-button > * > .tab-nav-text{
+    position: absolute;
+    top: 0;
+}
+
 #body .tab-content{
     border-style: solid;
     border-width: 1px;