diff --git a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css index bb681b3a86392..dd24df5df232c 100644 --- a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css +++ b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css @@ -3,11 +3,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-kb { - white-space: nowrap; +.monaco-keybinding { + display: flex; + align-items: center; + line-height: 10px; } -.monaco-kbkey { +.monaco-keybinding > .monaco-keybinding-key { display: inline-block; border: solid 1px rgba(204, 204, 204, 0.4); border-bottom-color: rgba(187, 187, 187, 0.4); @@ -16,16 +18,23 @@ background-color: rgba(221, 221, 221, 0.4); vertical-align: middle; color: #555; - line-height: 10px; font-size: 11px; padding: 3px 5px; } -.hc-black .monaco-kbkey, -.vs-dark .monaco-kbkey { +.hc-black .monaco-keybinding > .monaco-keybinding-key, +.vs-dark .monaco-keybinding > .monaco-keybinding-key { background-color: rgba(128, 128, 128, 0.17); color: #ccc; border: solid 1px rgba(51, 51, 51, 0.6); border-bottom-color: rgba(68, 68, 68, 0.6); box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6); +} + +.monaco-keybinding > .monaco-keybinding-key-separator { + display: inline-block; +} + +.monaco-keybinding > .monaco-keybinding-key-chord-separator { + width: 2px; } \ No newline at end of file diff --git a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts index f59b03858115b..459ca6e23279f 100644 --- a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts +++ b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts @@ -35,7 +35,7 @@ export class KeybindingLabel implements IDisposable { private didEverRender: boolean; constructor(container: HTMLElement, private os: OperatingSystem) { - this.domNode = dom.append(container, $('.htmlkb')); + this.domNode = dom.append(container, $('.monaco-keybinding')); this.didEverRender = false; container.appendChild(this.domNode); } @@ -63,7 +63,7 @@ export class KeybindingLabel implements IDisposable { this.renderPart(this.domNode, firstPart, this.matches ? this.matches.firstPart : null); } if (chordPart) { - dom.append(this.domNode, $('span', null, ' ')); + dom.append(this.domNode, $('span.monaco-keybinding-key-chord-separator', null, ' ')); this.renderPart(this.domNode, chordPart, this.matches ? this.matches.chordPart : null); } this.domNode.title = this.keybinding.getAriaLabel(); @@ -93,9 +93,9 @@ export class KeybindingLabel implements IDisposable { } private renderKey(parent: HTMLElement, label: string, highlight: boolean, separator: string): void { - dom.append(parent, $('span.monaco-kbkey' + (highlight ? '.highlight' : ''), null, label)); + dom.append(parent, $('span.monaco-keybinding-key' + (highlight ? '.highlight' : ''), null, label)); if (separator) { - dom.append(parent, $('span', null, separator)); + dom.append(parent, $('span.monaco-keybinding-key-separator', null, separator)); } } diff --git a/src/vs/base/parts/quickopen/browser/quickopen.css b/src/vs/base/parts/quickopen/browser/quickopen.css index 8de3e4c960e9e..1164de450e6f8 100644 --- a/src/vs/base/parts/quickopen/browser/quickopen.css +++ b/src/vs/base/parts/quickopen/browser/quickopen.css @@ -52,6 +52,7 @@ text-overflow: ellipsis; display: flex; flex-direction: column; + height: 100%; } .quick-open-widget .quick-open-tree .quick-open-entry > .quick-open-row { @@ -91,7 +92,7 @@ margin-right: 8px; } -.quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-kbkey { +.quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-keybinding-key { vertical-align: text-bottom; } diff --git a/src/vs/workbench/parts/preferences/browser/media/keybindings.css b/src/vs/workbench/parts/preferences/browser/media/keybindings.css index 4bdbe2a8bc674..9e70ed793fb49 100644 --- a/src/vs/workbench/parts/preferences/browser/media/keybindings.css +++ b/src/vs/workbench/parts/preferences/browser/media/keybindings.css @@ -30,7 +30,7 @@ justify-content: center; } -.defineKeybindingWidget .output .htmlkb { +.defineKeybindingWidget .output .monaco-keybinding { margin: 0px 4px; }