styles navtabs for web and pdf/print targets, uses CSS counters to highlight association between tab headers and tab content when printed, issue #211

Author: chlorenz

css/customstyles-precice.css

@@ -314,3 +314,14 @@ ul.devlist>li {
   }
 }
 
+/* style navtabs */
+.post-content ol li, .post-content ul li {
+  margin: 0px;
+}
+div.tab-content {
+  padding: 0px;
+  background-color: white;
+  }
+div.tab-content div.tab-pane pre {
+  margin-top: 0px;
+}

css/printstyles.css

@@ -40,7 +40,7 @@ a[href^="http:"]::after, a[href^="https:"]::after, a[href^="ftp:"]::after {
 a[href] {
     color: #0A76BB !important;
 }
-a[href*="mailto"]::after, a[data-toggle="tooltip"]::after, a[href].noCrossRef::after {
+a[href*="mailto"]::after, a[data-toggle="tooltip"]::after, a[href].noCrossRef::after, a[data-toggle="tab"]::after {
     content: "";
 }
 
@@ -219,4 +219,55 @@ pre > code {
 h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id] {
     padding-top: 1.5em;
     margin-top: -1em;
+}
+
+/* prepare nav tabs for printing */
+.nav > li.active > a, /* tab headers */
+.nav > li > a {
+    color: black;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 4px 4px 0 0;
+}
+.tab-content > .tab-pane {
+    display: block !important; /* display non-active panes */
+    position: relative;
+}
+div.tab-content div.tab-pane pre {
+  margin-top: 1em;
+}
+/* create counters to link tab headers to tab contents */
+.post-content ul.nav.nav-tabs { 
+    counter-reset: tab_number; /* creates a new instance of counter with name tab_number */
+}
+.post-content .nav.nav-tabs li::after {
+    counter-increment: tab_number; /* increment counter */
+    content: counter(tab_number); /* display value in small bubble */
+    position: absolute;
+    top:  -1em;
+    left:  -1em;
+    padding: 2px 5px;
+    background-color: white;
+    color: black;
+    font-size: 0.65em;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px grey;
+}
+div.tab-content { 
+  counter-reset: pane_number; 
+}
+div.tab-pane::after {
+    counter-increment: pane_number;
+    content: counter(pane_number);
+    position: absolute;
+    top: -1em;
+    left: -1em;
+    padding: 2px 5px;
+    background-color: white;
+    color: black;
+    font-size: 0.65em;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px gray;
 }