wuxu/codeg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): restore os-theme-codeg scrollbar theme lost during merge

Browse Source 
The merge commit ee60536 dropped the custom OverlayScrollbars theme
definition from globals.css, leaving scrollbar handles with zero size
and no background color. Restore the theme with a compound selector
(.os-scrollbar.os-theme-codeg) to ensure higher specificity than the
library's base defaults regardless of CSS load order.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xintaofei
2026-04-12 23:10:13 +08:00
parent 0f7286b858
commit 5038e352f7
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/globals.css
View File

@@ -1001,14 +1001,30 @@
} }
} }
/* Unified scrollbar style for scrollable containers. /* Native fallback for containers that cannot use OverlayScrollbars (e.g. virtua) */
Thin overlay scrollbar — no gutter reserved, no layout shift. */ .scrollbar-thin {
.scrollbar-thin,
.scrollbar-thin-edge {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--border) transparent; scrollbar-color: var(--border) transparent;
} }
/* OverlayScrollbars custom theme — 6px track, grows to 8px on hover.
Use compound selector to beat the base `.os-scrollbar` defaults
(--os-size:0, --os-handle-bg:none) regardless of CSS load order. */
.os-scrollbar.os-theme-codeg {
--os-size: 6px;
--os-handle-bg: var(--border);
--os-handle-bg-hover: var(--muted-foreground);
--os-handle-bg-active: var(--muted-foreground);
--os-handle-border-radius: 999px;
--os-handle-perpendicular-size: 100%;
--os-handle-perpendicular-size-hover: 100%;
--os-handle-perpendicular-size-active: 100%;
}
.os-scrollbar.os-theme-codeg:hover {
--os-size: 8px;
}
/* Streamdown code blocks: dark mode via shiki dual-theme CSS variables */ /* Streamdown code blocks: dark mode via shiki dual-theme CSS variables */
.dark [data-streamdown="code-block-body"] { .dark [data-streamdown="code-block-body"] {
background-color: var(--shiki-dark-bg, var(--sdm-bg, transparent)) !important; background-color: var(--shiki-dark-bg, var(--sdm-bg, transparent)) !important;