Tweak styling for tabs with single codeblock

Author: satya164

src/css/custom.css

@@ -81,8 +81,12 @@
 
   --ifm-footer-padding-horizontal: var(--ifm-spacing-horizontal);
   --ifm-footer-padding-vertical: var(--ifm-spacing-vertical);
-  --ifm-tabs-padding-vertical: 0.5rem;
+  --ifm-tabs-padding-vertical: 0.375rem;
+
+  --ifm-alert-shadow: none;
   --ifm-alert-border-left-width: 0;
+
+  --codeblock-background-color: #f6f8fa;
 }
 
 :root[data-theme='dark'] {
@@ -133,6 +137,8 @@
   --ifm-home-color-border: #f7f7ff;
 
   --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.07);
+
+  --codeblock-background-color: #282a35;
 }
 
 h1 {
@@ -388,15 +394,37 @@ p {
 }
 
 .tabs__item {
-  border-bottom: 1px solid var(--ifm-toc-border-color);
+  border-bottom: 2px solid var(--ifm-toc-border-color);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .tabs__item--active,
 .tabs__item--active:hover {
   border-bottom-color: var(--ifm-tabs-color-active-border);
-  background-color: var(--ifm-menu-color-background-active);
+}
+
+.tabs-container:has(
+    > .margin-top--md > [role='tabpanel'] > .theme-code-block:only-child
+  ):not(:has(> .margin-top--md > [role='tabpanel'] > :nth-child(2))) {
+  background-color: var(--codeblock-background-color);
+  border-radius: var(--ifm-code-border-radius);
+
+  & > .margin-top--md {
+    margin-top: 0 !important;
+  }
+
+  & > .tabs {
+    box-shadow: inset 0 -2px 0 var(--ifm-toc-border-color);
+  }
+
+  & > .tabs > .tabs__item {
+    border-top-right-radius: 0;
+  }
+
+  & > .tabs > .tabs__item:not(:first-child) {
+    border-top-left-radius: 0;
+  }
 }
 
 .col:has(.table-of-contents) {
@@ -475,6 +503,10 @@ samp {
   display: none;
 }
 
+.theme-code-block {
+  box-shadow: none !important;
+}
+
 .theme-code-block:has(+ .snack-sample-link) {
   margin-bottom: 0;
   border-bottom-left-radius: 0;
@@ -488,17 +520,15 @@ samp {
   margin-top: 0;
   margin-bottom: var(--ifm-leading);
   padding: calc(var(--ifm-pre-padding) / 2) var(--ifm-pre-padding);
-  background-color: #f6f8fa;
+  background-color: var(--codeblock-background-color);
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: var(--ifm-color-gray-200);
   border-bottom-left-radius: var(--ifm-pre-border-radius);
   border-bottom-right-radius: var(--ifm-pre-border-radius);
-  box-shadow: var(--ifm-global-shadow-lw);
 }
 
 [data-theme='dark'] .theme-code-block + .snack-sample-link {
-  background-color: #282a35;
   border-top-color: rgba(255, 255, 255, 0.07);
 }