@codingame/monaco-vscode-api 15.0.3 → 16.0.1

package/vscode/src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -0,0 +1,87 @@
+.monaco-icon-label {
+	display: flex;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.monaco-icon-label::before {
+	background-size: 16px;
+	background-position: left center;
+	background-repeat: no-repeat;
+	padding-right: 6px;
+	width: 16px;
+	height: 22px;
+	line-height: inherit !important;
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	vertical-align: top;
+	flex-shrink: 0;
+}
+.monaco-icon-label-iconpath {
+	width: 16px;
+	height: 16px;
+	padding-left: 2px;
+	margin-top: 2px;
+	display: flex;
+}
+.monaco-icon-label-container.disabled {
+	color: var(--vscode-disabledForeground);
+}
+.monaco-icon-label > .monaco-icon-label-container {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: 1;
+}
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
+	color: inherit;
+	white-space: pre;
+}
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
+	margin: 0 2px;
+	opacity: 0.5;
+}
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
+	opacity: .7;
+	white-space: pre;
+}
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
+	opacity: .7;
+	margin-left: 0.5em;
+	font-size: 0.9em;
+	white-space: pre;
+}
+.monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
+	white-space: nowrap
+}
+.vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
+	opacity: .95;
+}
+.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
+	font-style: italic;
+}
+.monaco-icon-label.deprecated {
+	text-decoration: line-through;
+	opacity: 0.66;
+}
+.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
+	text-decoration: line-through;
+}
+.monaco-icon-label::after {
+	opacity: 0.75;
+	font-size: 90%;
+	font-weight: 600;
+	margin: auto 16px 0 5px;
+	text-align: center;
+}
+.monaco-list:focus .selected .monaco-icon-label,
+.monaco-list:focus .selected .monaco-icon-label::after
+{
+	color: inherit !important;
+}
+.monaco-list-row.focused.selected .label-description,
+.monaco-list-row.selected .label-description {
+	opacity: .8;
+}

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.css

@@ -0,0 +1,81 @@
+.monaco-inputbox {
+	position: relative;
+	display: block;
+	padding: 0;
+	box-sizing:	border-box;
+	border-radius: 2px;
+	font-size: inherit;
+}
+.monaco-inputbox > .ibwrapper > .input,
+.monaco-inputbox > .ibwrapper > .mirror {
+	padding: 4px 6px;
+}
+.monaco-inputbox > .ibwrapper {
+	position: relative;
+	width: 100%;
+}
+.monaco-inputbox > .ibwrapper > .input {
+	display: inline-block;
+	box-sizing:	border-box;
+	width: 100%;
+	height: 100%;
+	line-height: inherit;
+	border: none;
+	font-family: inherit;
+	font-size: inherit;
+	resize: none;
+	color: inherit;
+}
+.monaco-inputbox > .ibwrapper > input {
+	text-overflow: ellipsis;
+}
+.monaco-inputbox > .ibwrapper > textarea.input {
+	display: block;
+	scrollbar-width: none;
+	outline: none;
+}
+.monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
+	display: none;
+}
+.monaco-inputbox > .ibwrapper > textarea.input.empty {
+	white-space: nowrap;
+}
+.monaco-inputbox > .ibwrapper > .mirror {
+	position: absolute;
+	display: inline-block;
+	width: 100%;
+	top: 0;
+	left: 0;
+	box-sizing: border-box;
+	white-space: pre-wrap;
+	visibility: hidden;
+	word-wrap: break-word;
+}
+.monaco-inputbox-container {
+	text-align: right;
+}
+.monaco-inputbox-container .monaco-inputbox-message {
+	display: inline-block;
+	overflow: hidden;
+	text-align: left;
+	width: 100%;
+	box-sizing:	border-box;
+	padding: 0.4em;
+	font-size: 12px;
+	line-height: 17px;
+	margin-top: -1px;
+	word-wrap: break-word;
+}
+.monaco-inputbox .monaco-action-bar {
+	position: absolute;
+	right: 2px;
+	top: 4px;
+}
+.monaco-inputbox .monaco-action-bar .action-item {
+	margin-left: 2px;
+}
+.monaco-inputbox .monaco-action-bar .action-item .codicon {
+	background-repeat: no-repeat;
+	width: 16px;
+	height: 16px;
+}

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.js

@@ -13,7 +13,7 @@ import { Emitter, Event } from '../../../common/event.js';
 import { HistoryNavigator } from '../../../common/history.js';
 import { equals } from '../../../common/objects.js';
 import { ScrollbarVisibility } from '../../../common/scrollable.js';
-import './inputBox.css.js';
+import './inputBox.css';
 import { localize } from '../../../../nls.js';
 import { MutableDisposable } from '../../../common/lifecycle.js';
 
@@ -449,7 +449,7 @@ class HistoryInputBox extends InputBox {
         this.onDidFocus = this._onDidFocus.event;
         this._onDidBlur = this._register(( new Emitter()));
         this.onDidBlur = this._onDidBlur.event;
-        this.history = ( new HistoryNavigator(options.history, 100));
+        this.history = this._register(( new HistoryNavigator(options.history, 100)));
         const addSuffix = () => {
             if (options.showHistoryHint && options.showHistoryHint() && !this.placeholder.endsWith(NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_NO_PARENS) && !this.placeholder.endsWith(NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_IN_PARENS) && this.history.getHistory().length) {
                 const suffix = this.placeholder.endsWith(')') ? NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_NO_PARENS : NLS_PLACEHOLDER_HISTORY_HINT_SUFFIX_IN_PARENS;

package/vscode/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css

@@ -0,0 +1,27 @@
+.monaco-keybinding {
+	display: flex;
+	align-items: center;
+	line-height: 10px;
+}
+.monaco-keybinding > .monaco-keybinding-key {
+	display: inline-block;
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 3px;
+	vertical-align: middle;
+	font-size: 11px;
+	padding: 3px 5px;
+	margin: 0 2px;
+}
+.monaco-keybinding > .monaco-keybinding-key:first-child {
+	margin-left: 0;
+}
+.monaco-keybinding > .monaco-keybinding-key:last-child {
+	margin-right: 0;
+}
+.monaco-keybinding > .monaco-keybinding-key-separator {
+	display: inline-block;
+}
+.monaco-keybinding > .monaco-keybinding-key-chord-separator {
+	width: 6px;
+}

package/vscode/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.js

@@ -5,7 +5,7 @@ import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { UILabelProvider } from '../../../common/keybindingLabels.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
-import './keybindingLabel.css.js';
+import './keybindingLabel.css';
 import { localize } from '../../../../nls.js';
 
 const $ = $$1;

package/vscode/src/vs/base/browser/ui/list/list.css

@@ -0,0 +1,60 @@
+.monaco-list {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	white-space: nowrap;
+}
+.monaco-list.mouse-support {
+	user-select: none;
+	-webkit-user-select: none;
+}
+.monaco-list > .monaco-scrollable-element {
+	height: 100%;
+}
+.monaco-list-rows {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+.monaco-list.horizontal-scrolling .monaco-list-rows {
+	width: auto;
+	min-width: 100%;
+}
+.monaco-list-row {
+	position: absolute;
+	box-sizing: border-box;
+	overflow: hidden;
+	width: 100%;
+}
+.monaco-list.mouse-support .monaco-list-row {
+	cursor: pointer;
+	touch-action: none;
+}
+.monaco-list .monaco-scrollable-element > .scrollbar.vertical,
+.monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
+	z-index: 14;
+}
+.monaco-list-row.scrolling {
+	display: none !important;
+}
+.monaco-list.element-focused,
+.monaco-list.selection-single,
+.monaco-list.selection-multiple {
+	outline: 0 !important;
+}
+.monaco-list-type-filter-message {
+	position: absolute;
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	padding: 40px 1em 1em 1em;
+	text-align: center;
+	white-space: normal;
+	opacity: 0.7;
+	pointer-events: none;
+}
+.monaco-list-type-filter-message:empty {
+	display: none;
+}

package/vscode/src/vs/base/browser/ui/list/listPaging.js

@@ -3,7 +3,7 @@ import { range } from '../../../common/arrays.js';
 import { CancellationTokenSource } from '../../../common/cancellation.js';
 import { Event } from '../../../common/event.js';
 import { Disposable } from '../../../common/lifecycle.js';
-import './list.css.js';
+import './list.css';
 import { List } from './listWidget.js';
 import { isActiveElement } from '../../dom.js';
 

package/vscode/src/vs/base/browser/ui/list/listView.js

@@ -1,7 +1,7 @@
 
 import { __decorate } from '../../../../../../../external/tslib/tslib.es6.js';
 import { DataTransfers } from '../../dnd.js';
-import { getContentWidth, scheduleAtNextAnimationFrame, getWindow, addDisposableListener, getActiveElement, getContentHeight, $, getDocument, getTopLeftOffset, animate, isHTMLElement, isSVGElement, isAncestor } from '../../dom.js';
+import { getContentWidth, scheduleAtNextAnimationFrame, getWindow, addDisposableListener, getActiveElement, getContentHeight, getDocument, getTopLeftOffset, animate, isHTMLElement, isSVGElement, isAncestor } from '../../dom.js';
 import { DomEmitter } from '../../event.js';
 import { Gesture, EventType } from '../../touch.js';
 import { SmoothScrollableElement } from '../scrollbar/scrollableElement.js';
@@ -17,6 +17,7 @@ import { RangeMap, shift } from './rangeMap.js';
 import { RowCache } from './rowCache.js';
 import { BugIndicatingError } from '../../../common/errors.js';
 import { clamp } from '../../../common/numbers.js';
+import { applyDragImage } from '../dnd/dnd.js';
 
 const StaticDND = {
     CurrentDragAndDropData: undefined
@@ -807,27 +808,14 @@ class ListView {
         const elements = this.dnd.getDragElements(element);
         event.dataTransfer.effectAllowed = 'copyMove';
         event.dataTransfer.setData(DataTransfers.TEXT, uri);
-        if (event.dataTransfer.setDragImage) {
-            let label;
-            if (this.dnd.getDragLabel) {
-                label = this.dnd.getDragLabel(elements, event);
-            }
-            if (typeof label === 'undefined') {
-                label = String(elements.length);
-            }
-            const dragImage = $('.monaco-drag-image');
-            dragImage.textContent = label;
-            const getDragImageContainer = (e) => {
-                while (e && !e.classList.contains('monaco-workbench')) {
-                    e = e.parentElement;
-                }
-                return e || this.domNode.ownerDocument;
-            };
-            const container = getDragImageContainer(this.domNode);
-            container.appendChild(dragImage);
-            event.dataTransfer.setDragImage(dragImage, -10, -10);
-            setTimeout(() => dragImage.remove(), 0);
+        let label;
+        if (this.dnd.getDragLabel) {
+            label = this.dnd.getDragLabel(elements, event);
         }
+        if (typeof label === 'undefined') {
+            label = String(elements.length);
+        }
+        applyDragImage(event, this.domNode, label, [this.domId ]);
         this.domNode.classList.add('dragging');
         this.currentDragData = ( new ElementsDragAndDropData(elements));
         StaticDND.CurrentDragAndDropData = ( new ExternalElementsDragAndDropData(elements));
@@ -851,7 +839,10 @@ class ListView {
             }));
             selectionStore.add(addDisposableListener(doc, 'selectionchange', () => {
                 const selection = doc.getSelection();
-                if (!selection) {
+                if (!selection || selection.isCollapsed) {
+                    if (movementStore.isDisposed) {
+                        selectionStore.dispose();
+                    }
                     return;
                 }
                 let start = this.getIndexOfListElement(selection.anchorNode);
@@ -1072,8 +1063,9 @@ class ListView {
     getRenderRange(renderTop, renderHeight) {
         const range = this.getVisibleRange(renderTop, renderHeight);
         if (this.currentSelectionBounds) {
-            range.start = Math.min(range.start, this.currentSelectionBounds.start);
-            range.end = Math.max(range.end, this.currentSelectionBounds.end + 1);
+            const max = this.rangeMap.count;
+            range.start = Math.min(range.start, this.currentSelectionBounds.start, max);
+            range.end = Math.min(Math.max(range.end, this.currentSelectionBounds.end + 1), max);
         }
         return range;
     }

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -19,7 +19,7 @@ import { dispose, DisposableStore } from '../../../common/lifecycle.js';
 import { clamp } from '../../../common/numbers.js';
 import { isMacintosh } from '../../../common/platform.js';
 import { isNumber } from '../../../common/types.js';
-import './list.css.js';
+import './list.css';
 import { ListError } from './list.js';
 import { ListView } from './listView.js';
 import { StandardMouseEvent } from '../../mouseEvent.js';
@@ -680,13 +680,13 @@ class DefaultStyleController {
         }
         if (styles.listFocusAndSelectionBackground) {
             content.push(`
-				.monaco-drag-image,
+				.monaco-drag-image${suffix},
 				.monaco-list${suffix}:focus .monaco-list-row.selected.focused { background-color: ${styles.listFocusAndSelectionBackground}; }
 			`);
         }
         if (styles.listFocusAndSelectionForeground) {
             content.push(`
-				.monaco-drag-image,
+				.monaco-drag-image${suffix},
 				.monaco-list${suffix}:focus .monaco-list-row.selected.focused { color: ${styles.listFocusAndSelectionForeground}; }
 			`);
         }
@@ -720,8 +720,8 @@ class DefaultStyleController {
         }
         if (styles.listFocusOutline) {
             content.push(`
-				.monaco-drag-image,
-				.monaco-list${suffix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
+				.monaco-drag-image${suffix},
+				.monaco-list${suffix}:focus .monaco-list-row.focused,
 				.monaco-workbench.context-menu-visible .monaco-list${suffix}.last-focused .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }
 			`);
         }

package/vscode/src/vs/base/browser/ui/menu/menu.js

@@ -881,6 +881,7 @@ ${formatRule(Codicon.menuSubmenu)}
 	text-align: right;
 	font-size: 12px;
 	line-height: 1;
+	opacity: 0.7;
 }
 
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator {

package/vscode/src/vs/base/browser/ui/mouseCursor/mouseCursor.css

@@ -0,0 +1,3 @@
+.monaco-mouse-cursor-text {
+	cursor: text;
+}

package/vscode/src/vs/base/browser/ui/mouseCursor/mouseCursor.js

@@ -1,5 +1,5 @@
 
-import './mouseCursor.css.js';
+import './mouseCursor.css';
 
 const MOUSE_CURSOR_TEXT_CSS_CLASS_NAME = `monaco-mouse-cursor-text`;
 

package/vscode/src/vs/base/browser/ui/progressbar/progressbar.css

@@ -0,0 +1,33 @@
+.monaco-progress-container {
+	width: 100%;
+	height: 2px;
+	overflow: hidden;
+}
+.monaco-progress-container .progress-bit {
+	width: 2%;
+	height: 2px;
+	position: absolute;
+	left: 0;
+	display: none;
+}
+.monaco-progress-container.active .progress-bit {
+	display: inherit;
+}
+.monaco-progress-container.discrete .progress-bit {
+	left: 0;
+	transition: width 100ms linear;
+}
+.monaco-progress-container.discrete.done .progress-bit {
+	width: 100%;
+}
+.monaco-progress-container.infinite .progress-bit {
+	animation-name: progress;
+	animation-duration: 4s;
+	animation-iteration-count: infinite;
+	transform: translate3d(0px, 0px, 0px);
+	animation-timing-function: linear;
+}
+.monaco-progress-container.infinite.infinite-long-running .progress-bit {
+	animation-timing-function: steps(100);
+}
+@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }

package/vscode/src/vs/base/browser/ui/progressbar/progressbar.js

@@ -4,7 +4,7 @@ import { getProgressAcccessibilitySignalScheduler } from './progressAccessibilit
 import { RunOnceScheduler } from '../../../common/async.js';
 import { Disposable, MutableDisposable } from '../../../common/lifecycle.js';
 import { isNumber } from '../../../common/types.js';
-import './progressbar.css.js';
+import './progressbar.css';
 
 const CSS_DONE = 'done';
 const CSS_ACTIVE = 'active';

package/vscode/src/vs/base/browser/ui/sash/sash.css

@@ -0,0 +1,118 @@
+:root {
+	--vscode-sash-size: 4px;
+	--vscode-sash-hover-size: 4px;
+}
+.monaco-sash {
+	position: absolute;
+	z-index: 35;
+	touch-action: none;
+}
+.monaco-sash.disabled {
+	pointer-events: none;
+}
+.monaco-sash.mac.vertical {
+	cursor: col-resize;
+}
+.monaco-sash.vertical.minimum {
+	cursor: e-resize;
+}
+.monaco-sash.vertical.maximum {
+	cursor: w-resize;
+}
+.monaco-sash.mac.horizontal {
+	cursor: row-resize;
+}
+.monaco-sash.horizontal.minimum {
+	cursor: s-resize;
+}
+.monaco-sash.horizontal.maximum {
+	cursor: n-resize;
+}
+.monaco-sash.disabled {
+	cursor: default !important;
+	pointer-events: none !important;
+}
+.monaco-sash.vertical {
+	cursor: ew-resize;
+	top: 0;
+	width: var(--vscode-sash-size);
+	height: 100%;
+}
+.monaco-sash.horizontal {
+	cursor: ns-resize;
+	left: 0;
+	width: 100%;
+	height: var(--vscode-sash-size);
+}
+.monaco-sash:not(.disabled) > .orthogonal-drag-handle {
+	content: " ";
+	height: calc(var(--vscode-sash-size) * 2);
+	width: calc(var(--vscode-sash-size) * 2);
+	z-index: 100;
+	display: block;
+	cursor: all-scroll;
+	position: absolute;
+}
+.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
+	> .orthogonal-drag-handle.start,
+.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
+	> .orthogonal-drag-handle.end {
+	cursor: nwse-resize;
+}
+.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
+	> .orthogonal-drag-handle.end,
+.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
+	> .orthogonal-drag-handle.start {
+	cursor: nesw-resize;
+}
+.monaco-sash.vertical > .orthogonal-drag-handle.start {
+	left: calc(var(--vscode-sash-size) * -0.5);
+	top: calc(var(--vscode-sash-size) * -1);
+}
+.monaco-sash.vertical > .orthogonal-drag-handle.end {
+	left: calc(var(--vscode-sash-size) * -0.5);
+	bottom: calc(var(--vscode-sash-size) * -1);
+}
+.monaco-sash.horizontal > .orthogonal-drag-handle.start {
+	top: calc(var(--vscode-sash-size) * -0.5);
+	left: calc(var(--vscode-sash-size) * -1);
+}
+.monaco-sash.horizontal > .orthogonal-drag-handle.end {
+	top: calc(var(--vscode-sash-size) * -0.5);
+	right: calc(var(--vscode-sash-size) * -1);
+}
+.monaco-sash:before {
+	content: '';
+	pointer-events: none;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+}
+.monaco-workbench:not(.reduce-motion) .monaco-sash:before {
+	transition: background-color 0.1s ease-out;
+}
+.monaco-sash.hover:before,
+.monaco-sash.active:before {
+	background: var(--vscode-sash-hoverBorder);
+}
+.monaco-sash.vertical:before {
+	width: var(--vscode-sash-hover-size);
+	left: calc(50% - (var(--vscode-sash-hover-size) / 2));
+}
+.monaco-sash.horizontal:before {
+	height: var(--vscode-sash-hover-size);
+	top: calc(50% - (var(--vscode-sash-hover-size) / 2));
+}
+.pointer-events-disabled {
+	pointer-events: none !important;
+}
+.monaco-sash.debug {
+	background: cyan;
+}
+.monaco-sash.debug.disabled {
+	background: rgba(0, 255, 255, 0.2);
+}
+.monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
+	background: red;
+}

package/vscode/src/vs/base/browser/ui/sash/sash.js

@@ -9,7 +9,7 @@ import { memoize } from '../../../common/decorators.js';
 import { Emitter } from '../../../common/event.js';
 import { DisposableStore, Disposable, toDisposable } from '../../../common/lifecycle.js';
 import { isMacintosh } from '../../../common/platform.js';
-import './sash.css.js';
+import './sash.css';
 
 const DEBUG = false;
 var OrthogonalEdge;

package/vscode/src/vs/base/browser/ui/scrollbar/media/scrollbars.css

@@ -0,0 +1,56 @@
+.monaco-scrollable-element > .scrollbar > .scra {
+	cursor: pointer;
+	font-size: 11px !important;
+}
+.monaco-scrollable-element > .visible {
+	opacity: 1;
+	background:rgba(0,0,0,0);
+	transition: opacity 100ms linear;
+	z-index: 11;
+}
+.monaco-scrollable-element > .invisible {
+	opacity: 0;
+	pointer-events: none;
+}
+.monaco-scrollable-element > .invisible.fade {
+	transition: opacity 800ms linear;
+}
+.monaco-scrollable-element > .shadow {
+	position: absolute;
+	display: none;
+}
+.monaco-scrollable-element > .shadow.top {
+	display: block;
+	top: 0;
+	left: 3px;
+	height: 3px;
+	width: 100%;
+	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
+}
+.monaco-scrollable-element > .shadow.left {
+	display: block;
+	top: 3px;
+	left: 0;
+	height: 100%;
+	width: 3px;
+	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
+}
+.monaco-scrollable-element > .shadow.top-left-corner {
+	display: block;
+	top: 0;
+	left: 0;
+	height: 3px;
+	width: 3px;
+}
+.monaco-scrollable-element > .shadow.top.left {
+	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
+}
+.monaco-scrollable-element > .scrollbar > .slider {
+	background: var(--vscode-scrollbarSlider-background);
+}
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+	background: var(--vscode-scrollbarSlider-hoverBackground);
+}
+.monaco-scrollable-element > .scrollbar > .slider.active {
+	background: var(--vscode-scrollbarSlider-activeBackground);
+}

package/vscode/src/vs/base/browser/ui/scrollbar/scrollableElement.js

@@ -11,7 +11,7 @@ import { Emitter } from '../../../common/event.js';
 import { dispose } from '../../../common/lifecycle.js';
 import { isMacintosh } from '../../../common/platform.js';
 import { Scrollable, ScrollbarVisibility } from '../../../common/scrollable.js';
-import './media/scrollbars.css.js';
+import './media/scrollbars.css';
 
 const HIDE_TIMEOUT = 500;
 const SCROLL_WHEEL_SENSITIVITY = 50;