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); }