mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 13:00:58 +00:00
Update custom menu styles (#149187)
* Initial updates * Add border radius * Address PR feedback * Fix typo * Update shadow blur * Update LR padding and use description foreground for shortcuts * Typo * Fix separator padding/margin * fix jumpy items in hc themes * Fix shadow and border radius * Use opacity for keybinding for better color blend * Update min width and container padding T/B * Revert actionbar margin and remove unnecessary menu css file * Ensure menus respect 0 horizontal margin rule * set bg/fg color on menu container * better fix for jumpy menu items * use outline instead of border * clean up dead css in style.css fix opacity for separators in menus * bring back vertical action bar margins * Remove old CSS import Co-authored-by: SteVen Batten <sbatten@microsoft.com>
This commit is contained in:
parent
c2b064538b
commit
5f3e9c120a
|
@ -12,7 +12,7 @@
|
|||
"activityBarBadge.background": "#007ACC",
|
||||
"sideBarTitle.foreground": "#BBBBBB",
|
||||
"input.placeholderForeground": "#A6A6A6",
|
||||
"menu.background": "#252526",
|
||||
"menu.background": "#303031",
|
||||
"menu.foreground": "#CCCCCC",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
|
|
|
@ -287,11 +287,13 @@ export class Menu extends ActionBar {
|
|||
const fgColor = style.foregroundColor ? `${style.foregroundColor}` : '';
|
||||
const bgColor = style.backgroundColor ? `${style.backgroundColor}` : '';
|
||||
const border = style.borderColor ? `1px solid ${style.borderColor}` : '';
|
||||
const shadow = style.shadowColor ? `0 2px 4px ${style.shadowColor}` : '';
|
||||
const borderRadius = '5px';
|
||||
const shadow = style.shadowColor ? `0 2px 8px ${style.shadowColor}` : '';
|
||||
|
||||
container.style.border = border;
|
||||
this.domNode.style.color = fgColor;
|
||||
this.domNode.style.backgroundColor = bgColor;
|
||||
container.style.outline = border;
|
||||
container.style.borderRadius = borderRadius;
|
||||
container.style.color = fgColor;
|
||||
container.style.backgroundColor = bgColor;
|
||||
container.style.boxShadow = shadow;
|
||||
|
||||
if (this.viewItems) {
|
||||
|
@ -691,20 +693,19 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
|
|||
const isSelected = this.element && this.element.classList.contains('focused');
|
||||
const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
|
||||
const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : undefined;
|
||||
const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : '';
|
||||
const outline = isSelected && this.menuStyle.selectionBorderColor ? `1px solid ${this.menuStyle.selectionBorderColor}` : '';
|
||||
const outlineOffset = isSelected && this.menuStyle.selectionBorderColor ? `-1px` : '';
|
||||
|
||||
if (this.item) {
|
||||
this.item.style.color = fgColor ? fgColor.toString() : '';
|
||||
this.item.style.backgroundColor = bgColor ? bgColor.toString() : '';
|
||||
this.item.style.outline = outline;
|
||||
this.item.style.outlineOffset = outlineOffset;
|
||||
}
|
||||
|
||||
if (this.check) {
|
||||
this.check.style.color = fgColor ? fgColor.toString() : '';
|
||||
}
|
||||
|
||||
if (this.container) {
|
||||
this.container.style.border = border;
|
||||
}
|
||||
}
|
||||
|
||||
style(style: IMenuStyles): void {
|
||||
|
@ -1012,7 +1013,8 @@ function getMenuWidgetCSS(style: IMenuStyles, isForShadowDom: boolean): string {
|
|||
let result = /* css */`
|
||||
.monaco-menu {
|
||||
font-size: 13px;
|
||||
|
||||
border-radius: 5px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
${formatRule(Codicon.menuSelection)}
|
||||
|
@ -1087,10 +1089,9 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-label.separator {
|
||||
display: block;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-bottom: 1px solid var(--vscode-menu-separatorBackground);
|
||||
padding-top: 1px;
|
||||
margin-left: .8em;
|
||||
margin-right: .8em;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.monaco-menu .secondary-actions .monaco-action-bar .action-label {
|
||||
|
@ -1136,6 +1137,11 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .keybinding,
|
||||
.monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .keybinding {
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-label {
|
||||
flex: 1 1 auto;
|
||||
text-decoration: none;
|
||||
|
@ -1191,12 +1197,9 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-label.separator {
|
||||
padding: 0.5em 0 0 0;
|
||||
margin-bottom: 0.5em;
|
||||
width: 100%;
|
||||
height: 0px !important;
|
||||
margin-left: .8em !important;
|
||||
margin-right: .8em !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-label.separator.text {
|
||||
|
@ -1238,17 +1241,15 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-item {
|
||||
border: thin solid transparent; /* prevents jumping behaviour on hover or focus */
|
||||
}
|
||||
|
||||
|
||||
/* High Contrast Theming */
|
||||
.hc-black .context-view.monaco-menu-container,
|
||||
.hc-light .context-view.monaco-menu-container,
|
||||
:host-context(.hc-black) .context-view.monaco-menu-container,
|
||||
:host-context(.hc-light) .context-view.monaco-menu-container {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused,
|
||||
.hc-light .monaco-menu .monaco-action-bar.vertical .action-item.focused,
|
||||
:host-context(.hc-black) .monaco-menu .monaco-action-bar.vertical .action-item.focused,
|
||||
:host-context(.hc-light) .monaco-menu .monaco-action-bar.vertical .action-item.focused {
|
||||
background: none;
|
||||
|
@ -1257,11 +1258,11 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
/* Vertical Action Bar Styles */
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical {
|
||||
padding: .5em 0;
|
||||
padding: .6em 0;
|
||||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-menu-item {
|
||||
height: 1.8em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
|
||||
|
@ -1277,10 +1278,12 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
|
||||
.monaco-menu .monaco-action-bar.vertical .action-label.separator {
|
||||
font-size: inherit;
|
||||
padding: 0.2em 0 0 0;
|
||||
margin-bottom: 0.2em;
|
||||
margin: 5px 0 !important;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.linux .monaco-menu .monaco-action-bar.vertical .action-label.separator,
|
||||
:host-context(.linux) .monaco-menu .monaco-action-bar.vertical .action-label.separator {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
@ -1291,6 +1294,7 @@ ${formatRule(Codicon.menuSubmenu)}
|
|||
padding: 0 1.8em;
|
||||
}
|
||||
|
||||
.linux .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
|
||||
:host-context(.linux) .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
|
||||
height: 100%;
|
||||
mask-size: 10px 10px;
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.context-view .monaco-menu {
|
||||
min-width: 130px;
|
||||
}
|
||||
|
|
@ -10,7 +10,6 @@ import { Menu } from 'vs/base/browser/ui/menu/menu';
|
|||
import { ActionRunner, IRunEvent, WorkbenchActionExecutedClassification, WorkbenchActionExecutedEvent } from 'vs/base/common/actions';
|
||||
import { isCancellationError } from 'vs/base/common/errors';
|
||||
import { combinedDisposable, DisposableStore } from 'vs/base/common/lifecycle';
|
||||
import 'vs/css!./contextMenuHandler';
|
||||
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { INotificationService } from 'vs/platform/notification/common/notification';
|
||||
|
|
|
@ -470,7 +470,7 @@ export const menuBackground = registerColor('menu.background', { dark: selectBac
|
|||
export const menuSelectionForeground = registerColor('menu.selectionForeground', { dark: listActiveSelectionForeground, light: listActiveSelectionForeground, hcDark: listActiveSelectionForeground, hcLight: listActiveSelectionForeground }, nls.localize('menuSelectionForeground', "Foreground color of the selected menu item in menus."));
|
||||
export const menuSelectionBackground = registerColor('menu.selectionBackground', { dark: listActiveSelectionBackground, light: listActiveSelectionBackground, hcDark: listActiveSelectionBackground, hcLight: listActiveSelectionBackground }, nls.localize('menuSelectionBackground', "Background color of the selected menu item in menus."));
|
||||
export const menuSelectionBorder = registerColor('menu.selectionBorder', { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('menuSelectionBorder', "Border color of the selected menu item in menus."));
|
||||
export const menuSeparatorBackground = registerColor('menu.separatorBackground', { dark: '#BBBBBB', light: '#888888', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('menuSeparatorBackground', "Color of a separator menu item in menus."));
|
||||
export const menuSeparatorBackground = registerColor('menu.separatorBackground', { dark: '#606060', light: '#D4D4D4', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('menuSeparatorBackground', "Color of a separator menu item in menus."));
|
||||
|
||||
/**
|
||||
* Toolbar colors
|
||||
|
|
|
@ -135,50 +135,6 @@ body.web {
|
|||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical {
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .action-menu-item {
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .keybinding {
|
||||
font-size: inherit;
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .menu-item-check {
|
||||
font-size: inherit;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .action-label.separator {
|
||||
font-size: inherit;
|
||||
padding: 0.2em 0 0 0;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.monaco-workbench.linux .monaco-menu .monaco-action-bar.vertical .action-label.separator {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
|
||||
font-size: 60%;
|
||||
padding: 0 1.8em;
|
||||
}
|
||||
|
||||
.monaco-workbench.linux .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
|
||||
height: 100%;
|
||||
mask-size: 10px 10px;
|
||||
-webkit-mask-size: 10px 10px;
|
||||
}
|
||||
|
||||
.monaco-workbench .monaco-menu .action-item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-workbench .codicon[class*='codicon-'] {
|
||||
font-size: 16px; /* sets font-size for codicons in workbench (https://github.com/microsoft/vscode/issues/98495) */
|
||||
|
|
Loading…
Reference in a new issue