diff --git a/src/vs/base/parts/quickinput/browser/quickInput.ts b/src/vs/base/parts/quickinput/browser/quickInput.ts index 0a4c9f1ba53274add2db05e344ef2305bec3d6d1..4781ca585f5fdd5d8761dee93a8ef0dc36a8c3d2 100644 --- a/src/vs/base/parts/quickinput/browser/quickInput.ts +++ b/src/vs/base/parts/quickinput/browser/quickInput.ts @@ -1696,7 +1696,7 @@ export class QuickInputController extends Disposable { this.ui.container.style.backgroundColor = quickInputBackground ? quickInputBackground.toString() : ''; this.ui.container.style.color = quickInputForeground ? quickInputForeground.toString() : ''; this.ui.container.style.border = contrastBorder ? `1px solid ${contrastBorder}` : ''; - this.ui.container.style.boxShadow = widgetShadow ? `0 5px 8px ${widgetShadow}` : ''; + this.ui.container.style.boxShadow = widgetShadow ? `0 0 12px 4px ${widgetShadow}` : ''; this.ui.inputBox.style(this.styles.inputBox); this.ui.count.style(this.styles.countBadge); this.ui.ok.style(this.styles.button); diff --git a/src/vs/editor/contrib/find/findOptionsWidget.ts b/src/vs/editor/contrib/find/findOptionsWidget.ts index d541e0d06086e44c2877fcff0c49e81e2b8b8bcc..cf247f8827778816a03fe637df4f88499d9dcea9 100644 --- a/src/vs/editor/contrib/find/findOptionsWidget.ts +++ b/src/vs/editor/contrib/find/findOptionsWidget.ts @@ -213,7 +213,7 @@ registerThemingParticipant((theme, collector) => { const widgetShadowColor = theme.getColor(widgetShadow); if (widgetShadowColor) { - collector.addRule(`.monaco-editor .findOptionsWidget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); + collector.addRule(`.monaco-editor .findOptionsWidget { box-shadow: 0 0 12px 4px ${widgetShadowColor}; }`); } const hcBorder = theme.getColor(contrastBorder); diff --git a/src/vs/editor/contrib/find/findWidget.ts b/src/vs/editor/contrib/find/findWidget.ts index dc0e30a88fd228161bbb88e8e5789d7922d3c38b..87742a51277148832118ca953a9e779ea343e246 100644 --- a/src/vs/editor/contrib/find/findWidget.ts +++ b/src/vs/editor/contrib/find/findWidget.ts @@ -1342,7 +1342,7 @@ registerThemingParticipant((theme, collector) => { const widgetShadowColor = theme.getColor(widgetShadow); if (widgetShadowColor) { - collector.addRule(`.monaco-editor .find-widget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); + collector.addRule(`.monaco-editor .find-widget { box-shadow: 0 0 12px 4px ${widgetShadowColor}; }`); } const findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder); diff --git a/src/vs/editor/contrib/rename/renameInputField.ts b/src/vs/editor/contrib/rename/renameInputField.ts index c794e4ccc4a2a3f28a0ff559aa5bbb102efa2e9d..d80d3cd7b6b711d6f3c67489761cb30537bcc545 100644 --- a/src/vs/editor/contrib/rename/renameInputField.ts +++ b/src/vs/editor/contrib/rename/renameInputField.ts @@ -100,7 +100,7 @@ export class RenameInputField implements IContentWidget { const widgetShadowColor = theme.getColor(widgetShadow); this._domNode.style.backgroundColor = String(theme.getColor(editorWidgetBackground) ?? ''); - this._domNode.style.boxShadow = widgetShadowColor ? ` 0 2px 8px ${widgetShadowColor}` : ''; + this._domNode.style.boxShadow = widgetShadowColor ? ` 0 0 12px 4px ${widgetShadowColor}` : ''; this._domNode.style.color = String(theme.getColor(inputForeground) ?? ''); this._input.style.backgroundColor = String(theme.getColor(inputBackground) ?? ''); diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index e682f79b8e4b8558c9c64291513d14e4aca722e5..aa674d59b32d68c8ab0d564a6302599952c7ed1a 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -196,7 +196,7 @@ export const textBlockQuoteBorder = registerColor('textBlockQuote.border', { lig export const textCodeBlockBackground = registerColor('textCodeBlock.background', { light: '#dcdcdc66', dark: '#0a0a0a66', hc: Color.black }, nls.localize('textCodeBlockBackground', "Background color for code blocks in text.")); // ----- widgets -export const widgetShadow = registerColor('widget.shadow', { dark: '#000000', light: '#A8A8A8', hc: null }, nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.')); +export const widgetShadow = registerColor('widget.shadow', { dark: '#00000040', light: '#A8A8A840', hc: null }, nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.')); export const inputBackground = registerColor('input.background', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBoxBackground', "Input box background.")); export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputBoxForeground', "Input box foreground.")); diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts index 622971be0408d45c1754626f7264b94b33d20fd6..07ac6141b4e39ac1ce08958b991a817ac9627524 100644 --- a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts +++ b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts @@ -99,7 +99,7 @@ export abstract class BreadcrumbsPicker { this._treeContainer = document.createElement('div'); this._treeContainer.style.background = color ? color.toString() : ''; this._treeContainer.style.paddingTop = '2px'; - this._treeContainer.style.boxShadow = `0px 5px 8px ${this._themeService.getColorTheme().getColor(widgetShadow)}`; + this._treeContainer.style.boxShadow = `0 0 12px 4px ${this._themeService.getColorTheme().getColor(widgetShadow)}`; this._domNode.appendChild(this._treeContainer); this._layoutInfo = { maxHeight, width, arrowSize, arrowOffset, inputHeight: 0 }; diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts index 6e8b4e940f1b89011998597e3b0f57db6e156eef..40ec93695c3c2d5d50053df08d653017b2350a24 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts @@ -251,7 +251,7 @@ export class NotificationsCenter extends Themable implements INotificationsCente protected updateStyles(): void { if (this.notificationsCenterContainer && this.notificationsCenterHeader) { const widgetShadowColor = this.getColor(widgetShadow); - this.notificationsCenterContainer.style.boxShadow = widgetShadowColor ? `0 0px 8px ${widgetShadowColor}` : ''; + this.notificationsCenterContainer.style.boxShadow = widgetShadowColor ? `0 0 12px 4px ${widgetShadowColor}` : ''; const borderColor = this.getColor(NOTIFICATIONS_CENTER_BORDER); this.notificationsCenterContainer.style.border = borderColor ? `1px solid ${borderColor}` : ''; diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts index 22f9152317a469734d9a94119d3810b29b9c9191..3b895bdcef42af0ec272eb3c19ce72ab1fab4f80 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts @@ -482,7 +482,7 @@ export class NotificationsToasts extends Themable implements INotificationsToast toast.style.background = backgroundColor ? backgroundColor : ''; const widgetShadowColor = this.getColor(widgetShadow); - toast.style.boxShadow = widgetShadowColor ? `0 0px 8px ${widgetShadowColor}` : ''; + toast.style.boxShadow = widgetShadowColor ? `0 0 12px 4px ${widgetShadowColor}` : ''; const borderColor = this.getColor(NOTIFICATIONS_TOAST_BORDER); toast.style.border = borderColor ? `1px solid ${borderColor}` : ''; diff --git a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts index 9b8cf7a37b9e9a39f9d45919be0cf6f1f1bab968..47aae294575b360e641d99cde9b180be23afe9aa 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts @@ -452,6 +452,6 @@ registerThemingParticipant((theme, collector) => { const widgetShadowColor = theme.getColor(widgetShadow); if (widgetShadowColor) { - collector.addRule(`.monaco-workbench .simple-fr-find-part-wrapper { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); + collector.addRule(`.monaco-workbench .simple-fr-find-part-wrapper { box-shadow: 0 0 12px 4px ${widgetShadowColor}; }`); } }); diff --git a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts index e15e3ee78faad5db15bd82d9eded1a4c95e6c4fe..5d9ade1ad16638202ddd4500b8f807f940f5d206 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts @@ -285,6 +285,6 @@ registerThemingParticipant((theme, collector) => { const widgetShadowColor = theme.getColor(widgetShadow); if (widgetShadowColor) { - collector.addRule(`.monaco-workbench .simple-find-part { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); + collector.addRule(`.monaco-workbench .simple-find-part { box-shadow: 0 0 12px 4px ${widgetShadowColor}; }`); } }); diff --git a/src/vs/workbench/contrib/debug/browser/debugToolBar.ts b/src/vs/workbench/contrib/debug/browser/debugToolBar.ts index d762180ebf2b2bd58951125d34a03891ce8d4797..db4ffaa2236335d8d68f9181c2a8cbfcdf7977a7 100644 --- a/src/vs/workbench/contrib/debug/browser/debugToolBar.ts +++ b/src/vs/workbench/contrib/debug/browser/debugToolBar.ts @@ -180,7 +180,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { this.$el.style.backgroundColor = this.getColor(debugToolBarBackground) || ''; const widgetShadowColor = this.getColor(widgetShadow); - this.$el.style.boxShadow = widgetShadowColor ? `0 5px 8px ${widgetShadowColor}` : ''; + this.$el.style.boxShadow = widgetShadowColor ? `0 0 12px 8px ${widgetShadowColor}` : ''; const contrastBorderColor = this.getColor(contrastBorder); const borderColor = this.getColor(debugToolBarBorder); diff --git a/src/vs/workbench/contrib/feedback/browser/feedback.ts b/src/vs/workbench/contrib/feedback/browser/feedback.ts index 4a013f414744bbdb2e835cd084078328e2631ac1..e7c8b48d395a1b2b6d8fbaf213b480d821de9c44 100644 --- a/src/vs/workbench/contrib/feedback/browser/feedback.ts +++ b/src/vs/workbench/contrib/feedback/browser/feedback.ts @@ -288,7 +288,7 @@ export class FeedbackDropdown extends Dropdown { if (this.feedbackForm) { this.feedbackForm.style.backgroundColor = colors.editorWidgetBackground ? colors.editorWidgetBackground.toString() : ''; this.feedbackForm.style.color = colors.editorWidgetForeground ? colors.editorWidgetForeground.toString() : ''; - this.feedbackForm.style.boxShadow = colors.widgetShadow ? `0 0 8px ${colors.widgetShadow}` : ''; + this.feedbackForm.style.boxShadow = colors.widgetShadow ? `0 0 12px 4px ${colors.widgetShadow}` : ''; } if (this.feedbackDescriptionInput) { this.feedbackDescriptionInput.style.backgroundColor = colors.inputBackground ? colors.inputBackground.toString() : '';