Merge pull request #290358 from microsoft/mrleemurray/rich-sapphire-warbler

Update editor widget background opacity and enhance tab shadow effects
This commit is contained in:
Lee Murray
2026-01-26 11:12:00 +00:00
committed by GitHub
4 changed files with 38 additions and 17 deletions

View File

@@ -124,7 +124,7 @@
"editorCodeLens.foreground": "#888888",
"editorBracketMatch.background": "#3994BC55",
"editorBracketMatch.border": "#2A2B2CFF",
"editorWidget.background": "#20212266",
"editorWidget.background": "#20212280",
"editorWidget.border": "#2A2B2CFF",
"editorWidget.foreground": "#bfbfbf",
"editorSuggestWidget.background": "#202122",

View File

@@ -124,7 +124,7 @@
"editorCodeLens.foreground": "#666666",
"editorBracketMatch.background": "#005FB855",
"editorBracketMatch.border": "#ECEDEEFF",
"editorWidget.background": "#FFFFFF",
"editorWidget.background": "#FFFFFF99",
"editorWidget.border": "#ECEDEEFF",
"editorWidget.foreground": "#202020",
"editorSuggestWidget.background": "#FFFFFF",

View File

@@ -19,6 +19,7 @@
--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%);
@@ -70,7 +71,12 @@
/* 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: var(--shadow-md); position: relative; z-index: 5; border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-top: none !important; }
.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: var(--radius-sm) var(--radius-sm) 0 0; */
border-top: none !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 */
@@ -171,9 +177,18 @@
.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); overflow: hidden; backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); }
.monaco-workbench.vs-dark .monaco-editor .suggest-widget,
.monaco-workbench.hc-black .monaco-editor .suggest-widget { background: color-mix(in srgb, var(--vscode-editorWidget-background) 20%, transparent) !important; }
.monaco-workbench .monaco-editor .suggest-widget {
box-shadow: var(--shadow-lg);
border: none;
border-radius: var(--radius-xl);
overflow: hidden;
backdrop-filter: var(--backdrop-blur-md);
-webkit-backdrop-filter: var(--backdrop-blur-md);
}
.monaco-workbench.vs-dark .monaco-editor .suggest-widget {
background: color-mix(in srgb, var(--vscode-editorWidget-background) 40%, transparent) !important;
border: 1px solid var(--vscode-editorWidget-border);
}
/* Find Widget */
.monaco-workbench .monaco-editor .find-widget {
@@ -183,7 +198,16 @@
}
/* Dialog */
.monaco-workbench .monaco-dialog-box { box-shadow: var(--shadow-2xl); border: none; border-radius: var(--radius-xl); overflow: hidden; }
.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);
}
.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: var(--vscode-editor-background) !important; backdrop-filter: var(--backdrop-blur-sm); -webkit-backdrop-filter: var(--backdrop-blur-sm); overflow: hidden; }
@@ -306,6 +330,13 @@
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 .monaco-list .cell-focus-indicator { box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }

View File

@@ -839,16 +839,6 @@
"node": ">= 0.4"
}
},
"node_modules/hono": {
"version": "4.11.5",
"resolved": "https://registry.npmjs.org/hono/-/hono-4.11.5.tgz",
"integrity": "sha512-WemPi9/WfyMwZs+ZUXdiwcCh9Y+m7L+8vki9MzDw3jJ+W9Lc+12HGsd368Qc1vZi1xwW8BWMMsnK5efYKPdt4g==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=16.9.0"
}
},
"node_modules/http-errors": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",