fix(terminal): Match the xterm scrollbar to the IDE's

Style xterm's own scrollbar slider with the scrollbar tokens, narrow it to
10px and blend the overview ruler border into the background.

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
This commit is contained in:
l0ng-ai committed 2026-10-24 12:36:40 +08:00
1 parent f38f63e397
commit 1bb454bd2f
3 files changed
+13 -5

No files matched your search

+9 -2
View File
@@ -70,8 +70,15 @@
.pane :global(.xterm-viewport) {
background-color: var(--bg-island, var(--bg-app)) !important;
}
.pane :global(.xterm .xterm-viewport::-webkit-scrollbar) {
width: 8px;
.pane :global(.xterm .xterm-scrollable-element > .scrollbar > .slider) {
box-sizing: border-box;
border: 2px solid transparent;
border-radius: 6px;
background: var(--scrollbar-thumb) content-box;
}
.pane :global(.xterm .xterm-scrollable-element > .scrollbar > .slider:hover),
.pane :global(.xterm .xterm-scrollable-element > .scrollbar > .slider.active) {
background: var(--scrollbar-thumb-hover) content-box;
}
.rename {
+2
View File
@@ -176,6 +176,8 @@ export class TerminalSession {
drawBoldTextInBrightColors: false,
minimumContrastRatio: 1,
smoothScrollDuration: 0,
// Same width as the IDE's scrollbars (global.css); the slider is styled there too (Terminal.module.css).
overviewRuler: { width: 10 },
theme: readTerminalTheme(),
});
this.term.loadAddon(this.fit);
+2 -3
View File
@@ -92,9 +92,8 @@ export function buildTheme(read: TokenReader): ITheme {
selectionBackground: toHex(selection ?? mix(bg, accent, 0.32)),
selectionInactiveBackground: toHex(selection ? mix(bg, selection, 0.6) : mix(bg, accent, 0.18)),
selectionForeground: undefined,
scrollbarSliderBackground: toHex(mix(bg, fg, 0.14)),
scrollbarSliderHoverBackground: toHex(mix(bg, fg, 0.24)),
scrollbarSliderActiveBackground: toHex(mix(bg, fg, 0.32)),
// The overview ruler (search matches beside the scrollbar) needs no separator line.
overviewRulerBorder: toHex(bg),
black: toHex(black),
red: toHex(red),
green: toHex(green),