From 7da2073845e8f3f0f95b92fb13fa7950f4e25dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Fri, 27 Aug 2021 22:23:58 +0200
Subject: [PATCH] tabs: enhance styling #65 #64 #35

---
 layouts/shortcodes/tabs.html |  2 +-
 static/css/tabs.css          | 31 +++++++++++++++++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 417a808783..163d12f95d 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -8,7 +8,7 @@
           data-tab-group="{{ $groupId }}"
           class="tab-nav-button btn {{ cond (eq $idx 0) "active" ""}}"
           onclick="switchTab('{{ $groupId }}','{{ .name }}')"
-         >{{ .name }}</button>
+         ><span>{{ .name }}</span></button>
     {{ end }}
     </div>
     <div class="tab-content">
diff --git a/static/css/tabs.css b/static/css/tabs.css
index 2ad2728772..acf95618cb 100644
--- a/static/css/tabs.css
+++ b/static/css/tabs.css
@@ -2,7 +2,9 @@
     border-width: 1px 1px 1px 1px !important;
     border-color: #ccc !important;
     border-radius: 4px 4px 0 0 !important;
-    background-color: #ddd !important;
+    background-color: #eaeaea !important;
+	-webkit-print-color-adjust: exact;
+	color-adjust: exact;
     float: left;
     display: block;
     position: relative;
@@ -10,24 +12,41 @@
     bottom: -1px;
 }
 #body .tab-nav-button:first-child {
-    margin-left: 0px;
+    margin-left: 9px;
 }
 #body .tab-nav-button.active {
     background-color: #fff !important;
     border-bottom-color: #fff !important;
 }
-
+#body .tab-nav-button:not(.active) {
+    border-bottom-color: #ddd !important;
+    margin-top: 7px;
+    padding-bottom: 2px !important;
+    padding-top: 2px !important;
+}
+#body .tab-nav-button:not(.active) span {
+    opacity: .8;
+}
+@media print {
+    #body .tab-nav-button:not(.active) {
+        opacity: .5;
+    }
+}
 #body .tab-panel {
-    margin-top: 32px;
-    margin-bottom: 32px;
+    margin-top: 1.7rem;
+    margin-bottom: 2rem;
 }
 #body .tab-content {
-    display: block;
+    background-color: #fff;
     clear: both;
+	-webkit-print-color-adjust: exact;
+	color-adjust: exact;
+    display: block;
     padding: 8px;
     border-width: 1px;
     border-style: solid;
     border-color: #ccc;
+    z-index: 10;
 }
 #body .tab-content .tab-item{
     display: none;