/*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --shadow-xs: 0 0 2px rgba(0, 0, 0, 0.06); --shadow-sm: 0 0 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 0 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 0 12px rgba(0, 0, 0, 0.14); --shadow-xl: 0 0 20px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 0 20px rgba(0, 0, 0, 0.18); --shadow-hover: 0 0 8px rgba(0, 0, 0, 0.12); --shadow-sm-strong: 0 0 4px rgba(0, 0, 0, 0.18); --shadow-button-active: inset 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-inset-white: inset 0 0 4px rgba(255, 255, 255, 0.1); --shadow-active-tab: 0 8px 12px rgba(0, 0, 0, 0.02); --backdrop-blur-sm: blur(12px); --backdrop-blur-md: blur(20px) saturate(180%); --backdrop-blur-lg: blur(40px) saturate(180%); } /* Stealth Shadows - shadow-based depth for UI elements, controlled by workbench.stealthShadows.enabled */ /* Activity Bar */ .monaco-workbench .part.activitybar { box-shadow: var(--shadow-md); z-index: 50; position: relative; } .monaco-workbench.activitybar-right .part.activitybar { box-shadow: var(--shadow-md); } /* Sidebar */ .monaco-workbench .part.sidebar { box-shadow: var(--shadow-md); z-index: 40; position: relative; } .monaco-workbench.sidebar-right .part.sidebar { box-shadow: var(--shadow-md); } .monaco-workbench .part.auxiliarybar { box-shadow: var(--shadow-md); z-index: 40; position: relative; } /* Ensure iframe containers in pane-body render above sidebar z-index */ .monaco-workbench > div[data-keybinding-context], .monaco-workbench > div[data-keybinding-context] { z-index: 50 !important; } /* Ensure webview containers render above sidebar z-index */ .monaco-workbench .part.sidebar .webview, .monaco-workbench .part.sidebar .webview-container, .monaco-workbench .part.auxiliarybar .webview, .monaco-workbench .part.auxiliarybar .webview-container { position: relative; z-index: 50; transform: translateZ(0); } /* Panel */ .monaco-workbench .part.panel { box-shadow: var(--shadow-md); z-index: 35; position: relative; } .monaco-workbench.panel-position-left .part.panel { box-shadow: var(--shadow-md); } .monaco-workbench.panel-position-right .part.panel { box-shadow: var(--shadow-md); } .monaco-pane-view .split-view-view:first-of-type > .pane > .pane-header { border-top: 1px solid var(--vscode-sideBarSectionHeader-border) !important; } /* Sashes - ensure they extend full height and are above other panels */ .monaco-workbench .monaco-sash { z-index: 45; } .monaco-workbench .monaco-sash.vertical { z-index: 45; } .monaco-workbench .monaco-sash.horizontal { z-index: 45; } .monaco-workbench.vs .activitybar.left.bordered::before, .monaco-workbench.vs .activitybar.right.bordered::before { border: none; } /* Editor */ .monaco-workbench .part.editor { position: relative; } .monaco-workbench .part.editor > .content .editor-group-container > .title { box-shadow: none; position: relative; z-index: 10; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active { box-shadow: inset var(--shadow-active-tab); position: relative; z-index: 5; border-radius: 0; border-top: none !important; background: linear-gradient( to bottom, color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent) 0%, transparent 100% ), var(--vscode-tab-activeBackground) !important; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover:not(.active) { box-shadow: var(--shadow-sm); } /* Tab border bottom - make transparent */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container { --tabs-border-bottom-color: transparent !important; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { --tab-border-bottom-color: transparent !important; } /* Title Bar */ .monaco-workbench.vs .part.titlebar { box-shadow: var(--shadow-md); } .monaco-workbench .part.titlebar { position: relative; background: linear-gradient( to bottom, color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent) 0%, transparent 100% ), var(--vscode-titleBar-activeBackground) !important; } .monaco-workbench .part.titlebar.inactive { background: var(--vscode-titleBar-inactiveBackground) !important; .command-center .monaco-action-bar, .command-center .actions-container, .agent-status-pill, .agent-status-badge { background-color: transparent !important; } } /* Status Bar */ .monaco-workbench .part.statusbar { box-shadow: var(--shadow-md); z-index: 55; position: relative; } /* Quick Input (Command Palette) */ .monaco-workbench .quick-input-widget { box-shadow: var(--shadow-xl) !important; border-radius: 12px; background-color: color-mix(in srgb, var(--vscode-quickInput-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg); -webkit-backdrop-filter: var(--backdrop-blur-lg); -webkit-backdrop-filter: blur(40px) saturate(180%); } .monaco-workbench.vs-dark .quick-input-widget { border: 1px solid var(--vscode-menu-border) !important; } .monaco-workbench .quick-input-widget .monaco-list-rows { background-color: transparent !important; } .monaco-workbench .quick-input-widget .quick-input-header, .monaco-workbench .quick-input-widget .quick-input-list, .monaco-workbench .quick-input-widget .quick-input-titlebar, .monaco-workbench .quick-input-widget .quick-input-title, .monaco-workbench .quick-input-widget .quick-input-description, .monaco-workbench .quick-input-widget .quick-input-filter, .monaco-workbench .quick-input-widget .quick-input-action, .monaco-workbench .quick-input-widget .quick-input-message, .monaco-workbench .quick-input-widget .monaco-list, .monaco-workbench .quick-input-widget .monaco-list-row { border-color: transparent !important; outline: none !important; } .monaco-workbench .quick-input-widget .monaco-inputbox { box-shadow: none !important; background: transparent !important; } .monaco-workbench .quick-input-widget .quick-input-filter .monaco-inputbox { background: color-mix(in srgb, var(--vscode-input-background) 60%, transparent) !important; border-radius: 6px; } /* .monaco-workbench .quick-input-widget .monaco-list.list_id_6:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { background-color: color-mix(in srgb, var(--vscode-list-hoverBackground) 40%, transparent); } */ /* Chat Widget */ .monaco-workbench .interactive-session .chat-input-container { box-shadow: inset var(--shadow-sm); border-radius: var(--radius-md); } .monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor, .monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .monaco-workbench .interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container { border-radius: 0 0 var(--radius-md) var(--radius-md); } .monaco-workbench .part.panel .interactive-session, .monaco-workbench .part.auxiliarybar .interactive-session { position: relative; } .monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { background-color: transparent !important; } /* Notifications */ .monaco-workbench .notifications-toasts { box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); } .monaco-workbench .notification-toast { box-shadow: none !important; margin: 0 !important; } .monaco-workbench .notification-toast-container { backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; } .monaco-workbench.vs-dark .notification-toast-container { background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; } .monaco-workbench .notification-toast-container .notification-toast { background-color: transparent !important; } .monaco-workbench .notifications-center { backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; } .monaco-workbench.vs-dark .notifications-center { background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; } .monaco-workbench .notifications-list-container, .monaco-workbench > .notifications-center > .notifications-center-header, .monaco-workbench .notifications-list-container .monaco-list-rows { background: transparent !important; } /* Context Menus */ .monaco-workbench .monaco-menu .monaco-action-bar.vertical { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench .context-view .monaco-menu { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); } .monaco-workbench .action-widget { background: color-mix(in srgb, var(--vscode-menu-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench .action-widget .action-widget-action-bar { background: transparent; } /* Suggest Widget */ .monaco-workbench .monaco-editor .suggest-widget { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); background: color-mix(in srgb, var(--vscode-editorSuggestWidget-background) 60%, transparent) !important; } .monaco-workbench.vs-dark .monaco-editor .suggest-widget { background: color-mix(in srgb, var(--vscode-editorSuggestWidget-background) 60%, transparent) !important; border: 1px solid var(--vscode-editorWidget-border); } /* Find Widget */ .monaco-workbench .monaco-editor .find-widget { box-shadow: var(--shadow-hover); border: none; border-radius: var(--radius-lg); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); margin-top: 4px !important; } /* Dialog */ .monaco-workbench .monaco-dialog-box { box-shadow: var(--shadow-2xl); border: none; border-radius: var(--radius-xl); backdrop-filter: var(--backdrop-blur-lg); -webkit-backdrop-filter: var(--backdrop-blur-lg); background: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent) !important; } .monaco-workbench.vs-dark .monaco-dialog-box { border: 1px solid var(--vscode-dialog-border); } /* Peek View */ .monaco-workbench .monaco-editor .peekview-widget { box-shadow: var(--shadow-hover); border: none; background: color-mix(in srgb, var(--vscode-peekViewEditor-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-sm); -webkit-backdrop-filter: var(--backdrop-blur-sm); } .monaco-workbench.vs-dark .monaco-editor .peekview-widget { background: color-mix(in srgb, var(--vscode-peekViewEditor-background) 60%, transparent) !important; } .monaco-workbench .monaco-editor .peekview-widget .head, .monaco-workbench .monaco-editor .peekview-widget .body { background: transparent !important; } .monaco-editor .monaco-hover { background-color: color-mix(in srgb, var(--vscode-editorHoverWidget-background) 60%, transparent) !important; box-shadow: var(--shadow-sm-strong); border-radius: var(--radius-lg); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench .monaco-hover.workbench-hover, .monaco-hover.workbench-hover.compact { background-color: color-mix(in srgb, var(--vscode-editorHoverWidget-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; } .monaco-workbench .defineKeybindingWidget { box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench.vs-dark .defineKeybindingWidget { border: 1px solid var(--vscode-editorWidget-border); } .monaco-workbench .chat-editor-overlay-widget, .monaco-workbench .chat-diff-change-content-widget { box-shadow: var(--shadow-md); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench.vs-dark .chat-editor-overlay-widget, .monaco-workbench.vs-dark .chat-diff-change-content-widget { border: 1px solid var(--vscode-editorWidget-border); } /* Settings */ .monaco-workbench .settings-editor .settings-toc-container { box-shadow: var(--shadow-sm); } /* Welcome Tiles */ .monaco-workbench .part.editor .welcomePageContainer .tile { box-shadow: var(--shadow-md); border: none; border-radius: var(--radius-lg); } .monaco-workbench .part.editor .welcomePageContainer .tile:hover { box-shadow: var(--shadow-hover); } /* Extensions */ .monaco-workbench .extensions-list .extension-list-item { box-shadow: var(--shadow-sm); border: none; } .monaco-workbench .extensions-list .extension-list-item:hover { box-shadow: var(--shadow-md); } /* Breadcrumbs */ .monaco-workbench .breadcrumbs-picker-widget { backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); background: color-mix(in srgb, var(--vscode-breadcrumbPicker-background) 60%, transparent) !important; } .monaco-workbench.vs-dark .breadcrumbs-picker-widget { background: color-mix(in srgb, var(--vscode-breadcrumbPicker-background) 60%, transparent) !important; } /* Input Boxes */ .monaco-workbench .monaco-inputbox, .monaco-workbench .suggest-input-container { box-shadow: inset var(--shadow-sm); border: none; } .monaco-inputbox .monaco-action-bar .action-item .codicon, .monaco-workbench .search-container .input-box, .monaco-custom-toggle { color: var(--vscode-icon-foreground) !important; } /* Chat input toolbar icons should use proper foreground color, not the muted icon.foreground */ .monaco-workbench .interactive-session .chat-input-toolbars .monaco-action-bar .action-item .codicon, .monaco-workbench .interactive-session .chat-input-toolbars .action-label .codicon { color: var(--vscode-foreground) !important; } /* Buttons */ .monaco-workbench .monaco-button { box-shadow: var(--shadow-xs); } .monaco-workbench .monaco-button:hover { box-shadow: var(--shadow-sm); } .monaco-workbench .monaco-button:active { box-shadow: var(--shadow-button-active); } /* Todo List Widget - remove shadows from buttons */ .monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button, .monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:hover, .monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:active, .monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button, .monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover, .monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:active { box-shadow: none; } /* Link buttons and tool call buttons - remove shadows */ .monaco-workbench .monaco-button.link-button, .monaco-workbench .monaco-button.link-button:hover, .monaco-workbench .monaco-button.link-button:active, .monaco-workbench .chat-confirmation-widget-title.monaco-button, .monaco-workbench .chat-confirmation-widget-title.monaco-button:hover, .monaco-workbench .chat-confirmation-widget-title.monaco-button:active, .monaco-workbench .chat-used-context-label .monaco-button, .monaco-workbench .chat-used-context-label .monaco-button:hover, .monaco-workbench .chat-used-context-label .monaco-button:active { box-shadow: none; } /* Dropdowns */ .monaco-workbench .monaco-dropdown .dropdown-menu { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-lg); } /* Terminal */ .monaco-workbench.vs .pane-body.integrated-terminal { box-shadow: var(--shadow-inset-white); } /* SCM */ .monaco-workbench .scm-view .scm-provider { box-shadow: var(--shadow-sm); border-radius: var(--radius-md); } /* Debug Toolbar */ .monaco-workbench .debug-toolbar { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-lg); backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; } .monaco-workbench .debug-hover-widget { box-shadow: var(--shadow-hover); border-radius: var(--radius-lg); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); color: var(--vscode-editor-foreground) !important; } .monaco-editor .debug-hover-widget .debug-hover-tree .monaco-list-rows .monaco-list-row:hover:not(.highlighted):not(.selected):not(.focused) { background-color: var(--vscode-list-hoverBackground); } /* Action Widget */ .monaco-workbench .action-widget { box-shadow: var(--shadow-lg) !important; border-radius: var(--radius-lg); } /* Parameter Hints */ .monaco-workbench .monaco-editor .parameter-hints-widget { box-shadow: var(--shadow-hover); border: none; border-radius: var(--radius-xl); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench.vs-dark .monaco-editor .parameter-hints-widget, .monaco-workbench.vs .monaco-editor .parameter-hints-widget { background: color-mix(in srgb, var(--vscode-editorWidget-background) 60%, transparent) !important; } /* Minimap */ .monaco-workbench .monaco-editor .minimap { backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; } .monaco-workbench .monaco-editor .minimap canvas { opacity: 0.85; } .monaco-workbench.vs-dark .monaco-editor .minimap, .monaco-workbench .monaco-editor .minimap-shadow-visible { box-shadow: var(--shadow-md); opacity: 0.85; background-color: var(--vscode-editor-background); left: 0; } /* Sticky Scroll */ .monaco-workbench .monaco-editor .sticky-widget { box-shadow: var(--shadow-md) !important; border-bottom: none !important; background: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; } .monaco-workbench.vs-dark .monaco-editor .sticky-widget { border-bottom: none !important; } .monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines { background-color: transparent !important; background: transparent !important; } .monaco-workbench.vs-dark .monaco-editor .sticky-widget, .monaco-workbench .monaco-editor .sticky-widget-focus-preview, .monaco-workbench .monaco-editor .sticky-scroll-focus-line, .monaco-workbench .monaco-editor .focused .sticky-widget, .monaco-workbench .monaco-editor:has(.sticky-widget:focus-within) .sticky-widget { background: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent) !important; backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; box-shadow: var(--shadow-hover) !important; } .monaco-editor .sticky-widget .sticky-line-content, .monaco-workbench .monaco-editor .sticky-widget .sticky-line-number { backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; background-color: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent); } .monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-content, .monaco-workbench.vs-dark .monaco-editor .sticky-widget .sticky-line-number { background-color: color-mix(in srgb, var(--vscode-editor-background) 30%, transparent); } .monaco-editor .rename-box.preview { backdrop-filter: var(--backdrop-blur-lg) !important; -webkit-backdrop-filter: var(--backdrop-blur-lg) !important; box-shadow: var(--shadow-hover) !important; border: 1px solid var(--vscode-editorWidget-border); } /* Notebook */ .monaco-workbench .notebookOverlay.notebook-editor { z-index: 35 !important; } .monaco-workbench .notebookOverlay .monaco-list-row .cell-editor-part:before { box-shadow: inset var(--shadow-sm); border-radius: var(--radius-md); } .notebookOverlay .monaco-list-row .cell-title-toolbar { background-color: var(--vscode-editorWidget-background) !important; backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .notebookOverlay .cell-bottom-toolbar-container .action-item { border-radius: var(--radius-sm); } /* Inline Chat */ .monaco-workbench .monaco-editor .inline-chat { box-shadow: var(--shadow-lg); border: none; border-radius: var(--radius-xl); } /* Command Center */ .monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center { box-shadow: inset var(--shadow-sm) !important; border-radius: var(--radius-lg) !important; background: color-mix(in srgb, var(--vscode-commandCenter-background) 60%, transparent) !important; -webkit-backdrop-filter: var(--backdrop-blur-md); backdrop-filter: var(--backdrop-blur-md); } .monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:hover { box-shadow: inset var(--shadow-sm) !important; background: color-mix(in srgb, var(--vscode-commandCenter-activeBackground) 60%, transparent) !important; } .monaco-workbench .part.titlebar .command-center .agent-status-pill { box-shadow: inset var(--shadow-sm); } .monaco-dialog-modal-block .dialog-shadow { border-radius: var(--radius-xl); } .monaco-workbench .unified-quick-access-tabs { background: transparent; } .monaco-workbench .quick-input-list .quick-input-list-entry.quick-input-list-separator-border { border-top-width: 0; } /* Quick Input List - use descriptionForeground color for descriptions */ .monaco-workbench .quick-input-list .monaco-icon-label .label-description { opacity: 1; color: var(--vscode-descriptionForeground); }