diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 3279ce2881..2e03f832dc 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -65,10 +65,7 @@
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 }}')"
>
-
- {{ if .icon }}{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}{{ end }}
- {{ if .icon }}{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}{{ end }}
-
+ {{ if .icon }}{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}{{ end }}
{{- end }}
diff --git a/static/css/format-print.css b/static/css/format-print.css
index 905f9df55e..e0128c8327 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -160,7 +160,7 @@ div.box > .box-content {
border-bottom-color: rgba( 255, 255, 255, 1 );
color: rgba( 0, 0, 0, 1 );
}
-#R-body .tab-nav-button.active > * {
+#R-body .tab-nav-button.active > .tab-nav-text {
background-color: rgba( 255, 255, 255, 1 );
}
#R-body .tab-content-text {
diff --git a/static/css/ie.css b/static/css/ie.css
index 8d68cef5c3..351b24c4b7 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -810,11 +810,11 @@
color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
}
- #R-body .tab-nav-button.active > *{
+ #R-body .tab-nav-button.active > .tab-nav-text{
background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
}
- #R-body .tab-nav-button > * > *{
+ #R-body .tab-nav-button > .tab-nav-text{
border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
}
diff --git a/static/css/theme.css b/static/css/theme.css
index 3d3c12521e..2e805beacf 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -2084,36 +2084,23 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
cursor: default;
}
-#R-body .tab-nav-button > *{
- display: block;
- position: relative;
-}
-
-#R-body .tab-nav-button.active > *{
- border-radius: 1px 1px 0 0;
-}
-
-#R-body .tab-nav-button > * > *{
+#R-body .tab-nav-button > .tab-nav-text{
border-bottom-style: solid;
border-bottom-width: .2rem;
+ display: block;
padding: .2rem .6rem 0 .6rem;
}
-
-#R-body .tab-nav-button.active > * > *{
+/* https://stackoverflow.com/a/46452396 */
+#R-body .tab-nav-button.active > .tab-nav-text{
border-bottom-color: transparent;
- font-weight: 500;
+ border-radius: 1px 1px 0 0;
+ text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
}
-
-#R-body .tab-nav-button > * > .tab-nav-hidden{
- display: block;
- font-weight: 500;
- visibility: hidden;
-}
-
-#R-body .tab-nav-button > * > .tab-nav-text{
- display: block;
- position: absolute;
- top: 0;
+@supports (-webkit-text-stroke-width: 0.04ex){
+ #R-body .tab-nav-button.active > .tab-nav-text{
+ text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
+ -webkit-text-stroke-width: 0.04ex;
+ }
}
#R-body .tab-content{
diff --git a/static/css/variant.css b/static/css/variant.css
index 648baa445a..59947c6d7a 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -408,11 +408,11 @@ article ul > li > input[type="checkbox"] {
color: var(--VARIABLE-BOX-TEXT-color);
}
-#R-body .tab-nav-button.active > *{
+#R-body .tab-nav-button.active > .tab-nav-text{
background-color: var(--VARIABLE-BOX-BG-color);
}
-#R-body .tab-nav-button > * > *{
+#R-body .tab-nav-button > .tab-nav-text{
border-color: var(--VARIABLE-BOX-color);
}