tabs: revamp for color options support #550

layouts/partials/shortcodes/tabs.html

@@ -2,7 +2,7 @@
 {{- $tabs := .content | default slice }}
 {{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
 {{- with $context }}
-<div class="tab-panel" data-tab-group="{{ $groupid }}">
+<div class="tab-panel cstyle default" data-tab-group="{{ $groupid }}">
   <div class="tab-nav">
   {{- range $idx, $tab := $tabs }}
     <button
@@ -10,7 +10,8 @@
       class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}"
       onclick="switchTab('{{ $groupid }}','{{ .name | $context.RenderString | plainify}}')"
     >
-      <span>{{ .name | $context.RenderString }}</span></button>
+      <div><div>{{ .name | $context.RenderString }}</div></div>
+    </button>
   {{- end }}
   </div>
   <div class="tab-content">

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) {
+#body .tab-nav-button.active {
-    opacity: 1;
+    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 {

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{
+	#body .tab-content{
-		float: left;
+		margin-top: -1px;
-	}
-	#body .tab-nav-button:first-child {
-		margin-left: 9px;
 	}
 	/* 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 */
 

static/css/tabs.css

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

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

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