fix(theme): improve code block scrollbar, close #427 (#435)

pengzhanbo · Jan 21, 2025 · 0ce2754 · 0ce2754
1 parent 0002996
commit 0ce2754
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/plugins/plugin-md-power/src/client/components/CodeTabs.vue b/plugins/plugin-md-power/src/client/components/CodeTabs.vue
@@ -134,6 +134,8 @@ function onTabNavClick(index: number): void {
   border-radius: 6px 6px 0 0;
   box-shadow: inset 0 -1px var(--vp-code-tab-divider);
   transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
+
+  scrollbar-width: thin;
 }
 
 @media print {

diff --git a/theme/src/client/styles/code.css b/theme/src/client/styles/code.css
@@ -13,6 +13,8 @@ html:not([data-theme="dark"]) .vp-code span {
   overflow-x: auto;
   background-color: var(--vp-code-block-bg);
   transition: background-color var(--vp-t-color);
+
+  scrollbar-width: thin;
 }
 
 @media (min-width: 640px) {