fix(styles): adapt to light theme and prevent codeblock overflow

sapphi-red · Sep 17, 2023 · 76bd11d · 76bd11d
1 parent 58b991e
commit 76bd11d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/.changeset/red-dolphins-tell.md b/.changeset/red-dolphins-tell.md
@@ -0,0 +1,6 @@
+---
+'vitepress-plugin-tabs': patch
+---
+
+Use `--vp-c-bg` in light mode for code blocks inside tabs to have slight difference between the backgrounds.
+Specify margin and border radius on code blocks inside tabs to prevent them from overflowing on smaller viewport widths.
diff --git a/packages/vitepress-plugin-tabs/src/client/PluginTabs.vue b/packages/vitepress-plugin-tabs/src/client/PluginTabs.vue
@@ -139,4 +139,13 @@ provideTabsSingleState({ uid, selected })
 .plugin-tabs--tab[aria-selected='true']::after {
   background-color: var(--vp-plugin-tabs-tab-active-bar-color);
 }
+
+.plugin-tabs div[class*='language-'] {
+  border-radius: 8px;
+  margin: 16px 0;
+}
+
+:root:not(.dark) .plugin-tabs div[class*='language-'] {
+  background-color: var(--vp-c-bg);
+}
 </style>