diff --git a/src/features/terminal/Terminal.module.css b/src/features/terminal/Terminal.module.css index feace5f23..15c9bdac0 100644 --- a/src/features/terminal/Terminal.module.css +++ b/src/features/terminal/Terminal.module.css @@ -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 { diff --git a/src/features/terminal/session.ts b/src/features/terminal/session.ts index 560d30cc2..6e57dc56c 100644 --- a/src/features/terminal/session.ts +++ b/src/features/terminal/session.ts @@ -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); diff --git a/src/features/terminal/theme.ts b/src/features/terminal/theme.ts index 4b1788c48..631e76288 100644 --- a/src/features/terminal/theme.ts +++ b/src/features/terminal/theme.ts @@ -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),