{{- range $idx, $tab := $tabs }}
+
{{ .name | $context.RenderString }}
+
{{- end }}
diff --git a/static/css/format-print.css b/static/css/format-print.css
index 5744a712c0..a5e6a9adf7 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -140,9 +140,6 @@ body,
#topbar > div {
background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */
}
-#body .tab-nav-button:not(.active) {
- opacity: .5;
-}
.tags {
display: none;
}
@@ -159,15 +156,18 @@ div.box > .box-content {
.btn,
#body .tab-nav-button {
- color: rgba( 0, 0, 0, 1 ) !important;
-}
-#body .tab-nav-button.active {
- background-color: rgba( 255, 255, 255, 1 ) !important;
- border-bottom-color: rgba( 255, 255, 255, 1 ) !important;
color: rgba( 0, 0, 0, 1 );
}
-#body .tab-nav-button:not(.active) {
- opacity: 1;
+#body .tab-nav-button.active {
+ border-bottom-color: rgba( 255, 255, 255, 1 );
+ color: rgba( 0, 0, 0, 1 );
+}
+#body .tab-nav-button.active > * {
+ background-color: rgba( 255, 255, 255, 1 );
+}
+#body .tab-content-text {
+ background-color: rgba( 255, 255, 255, 1 ) ;
+ color: rgba( 0, 0, 0, 1 );
}
article {
diff --git a/static/css/ie.css b/static/css/ie.css
index d6a5a4dcf8..5dd75c8b62 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -178,13 +178,10 @@
}
/* tabs */
#body .tab-nav-button {
- margin-left: 4px;
+ margin-left: .6rem;
}
- html[dir="rtl"] #body .tab-nav-button{
- float: left;
- }
- #body .tab-nav-button:first-child {
- margin-left: 9px;
+ #body .tab-content{
+ margin-top: -1px;
}
/* auto-complete */
.autocomplete-suggestions {
@@ -697,11 +694,6 @@
background: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
}
- #body .tab-nav-button.active {
- background-color: rgba( 255, 255, 255, 1 ) !important; /* var(--MAIN-BG-color) */
- border-bottom-color: rgba( 255, 255, 255, 1 ) !important; /* var(--MAIN-BG-color) */
- }
-
.badge > * {
border-color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
}
@@ -773,6 +765,38 @@
box-shadow: inset 1em 1em rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-PRIMARY-color) */
}
+ /* no style support for tabs in IE11; all styled as default */
+ #body .tab-nav-button {
+ color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */
+ }
+
+ #body .tab-nav-button.active {
+ background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
+ border-bottom-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
+ border-left-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
+ border-right-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
+ border-top-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
+ color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
+ }
+
+ #body .tab-nav-button.active > *{
+ background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
+ }
+
+ #body .tab-nav-button > * > *{
+ border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
+ }
+
+ #body .tab-content{
+ background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
+ border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
+ }
+
+ #body .tab-content-text{
+ background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
+ color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
+ }
+
/* ----------------------------------------------- */
/* set further styles to fix broken stuff in IE11 */
diff --git a/static/css/tabs.css b/static/css/tabs.css
deleted file mode 100644
index 0b2e880479..0000000000
--- a/static/css/tabs.css
+++ /dev/null
@@ -1,76 +0,0 @@
-#body .tab-panel{
- margin-bottom: 1.5rem;
- margin-top: 1.5rem;
-}
-#body .tab-nav-button{
- background-color: rgba( 134, 134, 134, .166 );
- border-color: rgba( 134, 134, 134, .333 );
- border-radius: 4px 4px 0 0;
- border-style: solid;
- border-width: 1px;
- bottom: -1px;
- -webkit-print-color-adjust: exact;
- color-adjust: exact;
- display: block;
- float: left;
- font-size: .9rem;
- font-weight: 500;
- line-height: 1.42857143;
- margin-inline-start: 4px;
- padding: 6px 12px;
- position: relative;
-}
-html[dir="rtl"] #body .tab-nav-button{
- float: right;
-}
-
-#body .tab-nav-button:after {
- content: "\200b"
-}
-
-#body .tab-nav-button:first-child{
- margin-inline-start: 9px;
-}
-#body .tab-nav-button.active{
- cursor: default;
-}
-#body .tab-nav-button:not(.active){
- border-bottom-color: rgba( 134, 134, 134, .1 );
- margin-top: 8px;
- padding-bottom: 2px !important;
- padding-top: 2px !important;
-}
-#body .tab-nav-button:not(.active) span{
- opacity: .8;
-}
-#body .tab-content{
- background-color: transparent;
- border-color: rgba( 134, 134, 134, .333 );
- border-style: solid;
- border-width: 1px;
- clear: both;
- -webkit-print-color-adjust: exact;
- color-adjust: exact;
- display: block;
- z-index: 10;
-}
-#body .tab-content-text{
- display: none;
- margin: 8px;
-}
-/* remove margin if only a single code block is contained in the tab */
-#body .tab-content-text:has(> div.highlight:only-child){
- margin: 0;
-}
-/* remove border from a code block if single */
-#body .tab-content-text > div.highlight:only-child > pre{
- border: 0;
-}
-#body .tab-content-text.active{
- display: block;
-}
-
-#body .tab-content-text pre{
- margin-bottom: 0;
- margin-top: 0;
-}
diff --git a/static/css/theme.css b/static/css/theme.css
index 3769509856..5a35d56d33 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1,7 +1,67 @@
@charset "UTF-8";
@import "tags.css";
-@import "tabs.css";
+
+/* until browsers don't let us set length values based on dppx, we
+need a way to calculate them ourself */
+:root {
+ --dpr: 1;
+}
+@media (min-resolution: 105dpi) {
+ :root {
+ --dpr: 1.1;
+ }
+}
+@media (min-resolution: 115dpi) {
+ :root {
+ --dpr: 1.2;
+ }
+ }
+@media (min-resolution: 120dpi) {
+ :root {
+ --dpr: 1.25;
+ }
+}
+@media (min-resolution: 128dpi) {
+ :root {
+ --dpr: 1.333;
+ }
+}
+@media (min-resolution: 144dpi) {
+ :root {
+ --dpr: 1.5;
+ }
+}
+@media (min-resolution: 160dpi) {
+ :root {
+ --dpr: 1.666;
+ }
+}
+@media (min-resolution: 168dpi) {
+ :root {
+ --dpr: 1.75;
+ }
+}
+@media (min-resolution: 192dpi) {
+ :root {
+ --dpr: 2;
+ }
+}
+@media (min-resolution: 240dpi) {
+ :root {
+ --dpr: 2.5;
+ }
+}
+@media (min-resolution: 288dpi) {
+ :root {
+ --dpr: 3;
+ }
+}
+@media (min-resolution: 384dpi) {
+ :root {
+ --dpr: 4;
+ }
+}
html {
height: 100%;
@@ -1777,3 +1837,72 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
column-count: 3;
}
}
+
+#body .tab-panel{
+ margin-bottom: 1.5rem;
+ margin-top: 1.5rem;
+}
+
+#body .tab-nav{
+ display: flex;
+ flex-wrap: wrap;
+}
+
+#body .tab-nav-button{
+ background-color: transparent;
+ border: 1px solid transparent;
+ display: block;
+ font-size: .9rem;
+ font-weight: 500;
+ line-height: 1.42857143;
+ margin-inline-start: .6rem;
+}
+
+#body .tab-nav-button.active{
+ border-radius: 2px 2px 0 0;
+ cursor: default;
+}
+
+#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;
+}
+
+#body .tab-nav-button.active > * > *{
+ border-bottom-color: transparent;
+}
+
+#body .tab-content{
+ border-style: solid;
+ border-width: 1px;
+ display: block;
+ /* if setting a border to 1px, a browser instead sets it to 1dppx which is not
+ usable as a unit yet, so we have to calculate it ourself */
+ margin-top: calc( -1px / var(--dpr) );
+ z-index: 10;
+}
+#body .tab-content-text{
+ display: none;
+ padding: 1rem;
+}
+/* remove margin if only a single code block is contained in the tab */
+#body .tab-content-text:has(> div.highlight:only-child){
+ padding: 0;
+}
+/* remove border from a code block if single */
+#body .tab-content-text > div.highlight:only-child > pre{
+ border: 0;
+}
+#body .tab-content-text.active{
+ display: block;
+}
+
+#body .tab-content-text pre{
+ margin-bottom: 0;
+ margin-top: 0;
+}
diff --git a/static/css/variant.css b/static/css/variant.css
index adfb26226a..aa440b4d78 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -352,11 +352,6 @@ pre .copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-MAIN-BG-color);
}
-#body .tab-nav-button.active {
- background-color: var(--INTERNAL-MAIN-BG-color) !important;
- border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
-}
-
.badge > * {
border-color: var(--VARIABLE-BOX-TEXT-color);
}
@@ -369,3 +364,54 @@ pre .copy-to-clipboard-button:hover {
.badge.cstyle.transparent{
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
}
+
+#body .tab-nav-button {
+ color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
+#body .tab-nav-button.active {
+ background-color: var(--VARIABLE-BOX-color);
+ border-bottom-color: var(--VARIABLE-BOX-BG-color);
+ color: var(--VARIABLE-BOX-TEXT-color);
+}
+
+#body .tab-nav-button.active > *{
+ background-color: var(--VARIABLE-BOX-BG-color);
+}
+
+#body .tab-nav-button > * > *{
+ border-color: var(--VARIABLE-BOX-color);
+}
+
+#body .tab-content{
+ background-color: var(--VARIABLE-BOX-color);
+ border-color: var(--VARIABLE-BOX-color);
+}
+
+#body .tab-content-text{
+ background-color: var(--VARIABLE-BOX-BG-color);
+ color: var(--VARIABLE-BOX-TEXT-color);
+}
+
+.tab-panel.cstyle.default {
+ --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
+ --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
+}
+
+.tab-panel.cstyle.transparent {
+ --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+ --VARIABLE-BOX-BG-color: transparent;
+}
+
+#body .tab-panel.cstyle.default > * > .tab-nav-button.active,
+#body .tab-panel.cstyle.transparent > * > .tab-nav-button.active{
+ background-color: var(--VARIABLE-BOX-BG-color);
+ border-left-color: var(--VARIABLE-BOX-color);
+ border-right-color: var(--VARIABLE-BOX-color);
+ border-top-color: var(--VARIABLE-BOX-color);
+}
+
+#body .tab-panel.cstyle.default > .tab-content,
+#body .tab-panel.cstyle.transparent > .tab-content{
+ background-color: var(--VARIABLE-BOX-BG-color);
+}