From 8c0bbf75b8af31949810849c5a9a2de9d3c5a00d Mon Sep 17 00:00:00 2001 From: Mark Sujew Date: Tue, 28 Feb 2023 15:44:00 +0000 Subject: [PATCH] Align border-radius with vscode --- .../browser/common-frontend-contribution.ts | 4 +- packages/core/src/browser/dialogs.ts | 2 +- packages/core/src/browser/style/dialog.css | 2 + packages/core/src/browser/style/index.css | 2 + packages/core/src/browser/style/menus.css | 40 +++++++++++++++---- .../src/browser/keybindings-widget.tsx | 4 +- .../src/browser/style/notifications.css | 6 +++ .../data/monaco-themes/vscode/dark_vs.json | 1 + .../src/browser/styles/index.css | 1 + 9 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts index 0253b43852b0b..ea21be9d743a3 100644 --- a/packages/core/src/browser/common-frontend-contribution.ts +++ b/packages/core/src/browser/common-frontend-contribution.ts @@ -1826,8 +1826,8 @@ export class CommonFrontendContribution implements FrontendApplicationContributi }, { id: 'menubar.selectionBackground', defaults: { - dark: Color.transparent('#ffffff', 0.1), - light: Color.transparent('#000000', 0.1) + dark: 'toolbar.hoverBackground', + light: 'toolbar.hoverBackground' }, description: 'Background color of the selected menu item in the menubar.' }, { diff --git a/packages/core/src/browser/dialogs.ts b/packages/core/src/browser/dialogs.ts index 8bee63e1f88b0..2b74e9a8ca2b8 100644 --- a/packages/core/src/browser/dialogs.ts +++ b/packages/core/src/browser/dialogs.ts @@ -175,7 +175,7 @@ export abstract class AbstractDialog extends BaseWidget { titleContentNode.appendChild(this.titleNode); this.closeCrossNode = document.createElement('i'); - this.closeCrossNode.classList.add(...codiconArray('close')); + this.closeCrossNode.classList.add(...codiconArray('close', true)); this.closeCrossNode.classList.add('closeButton'); titleContentNode.appendChild(this.closeCrossNode); diff --git a/packages/core/src/browser/style/dialog.css b/packages/core/src/browser/style/dialog.css index 53d51e851776f..a85d6b786f409 100644 --- a/packages/core/src/browser/style/dialog.css +++ b/packages/core/src/browser/style/dialog.css @@ -37,6 +37,8 @@ color: var(--theia-editorWidget-foreground); background-color: var(--theia-editorWidget-background); border: 1px solid var(--theia-contrastBorder); + border-radius: 4px; + overflow: hidden; box-shadow: 0 0px 8px var(--theia-widget-shadow); } .p-Widget.dialogOverlay .dialogTitle { diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css index dcd45cea71c50..f55103ea9133d 100644 --- a/packages/core/src/browser/style/index.css +++ b/packages/core/src/browser/style/index.css @@ -108,6 +108,7 @@ blockquote { background: var(--theia-input-background); color: var(--theia-input-foreground); border: var(--theia-border-width) solid var(--theia-input-border); + border-radius: 2px; font-family: var(--theia-ui-font-family); font-size: var(--theia-ui-font-size1); line-height: var(--theia-content-line-height); @@ -248,6 +249,7 @@ blockquote { cursor: pointer; padding: 4px 9px; margin-left: calc(var(--theia-ui-padding)*2); + border-radius: 2px; } .theia-button:focus { diff --git a/packages/core/src/browser/style/menus.css b/packages/core/src/browser/style/menus.css index d1d45d3a36fce..782758bd3232d 100644 --- a/packages/core/src/browser/style/menus.css +++ b/packages/core/src/browser/style/menus.css @@ -32,6 +32,8 @@ .p-Widget.p-MenuBar { + display: flex; + align-items: center; padding-left: 5px; font-size: var(--theia-ui-font-size1); } @@ -41,10 +43,15 @@ transform: translateY(calc(-2*var(--theia-border-width))); } +.p-MenuBar-content { + display: flex; + align-items: center; +} .p-MenuBar-item { padding: 0px 8px; - line-height: var(--theia-private-menubar-height); + line-height: var(--theia-content-line-height); + border-radius: 4px; } .p-MenuBar-item .p-MenuBar-itemLabel { @@ -105,12 +112,13 @@ .p-Menu { z-index: var(--theia-menu-z-index); - padding: 4px 0px; + padding: 4px; background: var(--theia-menu-background); color: var(--theia-menu-foreground); font-size: var(--theia-ui-font-size1); box-shadow: 0px 1px 6px var(--theia-widget-shadow); border: 1px solid var(--theia-menu-border); + border-radius: 5px; } .p-Menu:focus { @@ -122,17 +130,35 @@ max-height: var(--theia-private-menu-item-height); padding: 0px; line-height: var(--theia-private-menu-item-height); + overflow: hidden; } .p-Menu-item.p-mod-active { - background: var(--theia-menu-selectionBackground); color: var(--theia-menu-selectionForeground); border: thin solid var(--theia-menu-selectionBorder); opacity: 1; cursor: pointer; } +/** + * We cannot apply border-radius on items with `display: table-row` + * So we apply it to its first and last child + */ + +.p-Menu-item.p-mod-active > div { + background: var(--theia-menu-selectionBackground); +} + +.p-Menu-item.p-mod-active > div:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-Menu-item.p-mod-active > div:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} .p-Menu-item.p-mod-disabled { opacity: var(--theia-mod-disabled-opacity); @@ -182,12 +208,12 @@ border-top: var(--theia-border-width) solid var(--theia-menu-separatorBackground); } -.p-Menu-item[data-type='separator'] > div.p-Menu-itemIcon::after { - margin-left: 12px; +.p-Menu-item[data-type='separator'] > div:first-child:after { + margin-left: -4px; } -.p-Menu-item[data-type='separator'] > div.p-Menu-itemSubmenuIcon::after { - margin-right: 12px; +.p-Menu-item[data-type='separator'] > div:last-child::after { + margin-right: -4px; } .p-Menu-itemIcon::before, diff --git a/packages/keymaps/src/browser/keybindings-widget.tsx b/packages/keymaps/src/browser/keybindings-widget.tsx index 84767e4923776..5c5a30a42f646 100644 --- a/packages/keymaps/src/browser/keybindings-widget.tsx +++ b/packages/keymaps/src/browser/keybindings-widget.tsx @@ -398,7 +398,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget { return { e.preventDefault(); this.editKeybinding(item); - }}>; + }}>; } /** @@ -411,7 +411,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget { ? { e.preventDefault(); this.resetKeybinding(item); - }}> : ''; + }}> : ''; } /** diff --git a/packages/messages/src/browser/style/notifications.css b/packages/messages/src/browser/style/notifications.css index 4fe991346cb4a..c0f9014c263e4 100644 --- a/packages/messages/src/browser/style/notifications.css +++ b/packages/messages/src/browser/style/notifications.css @@ -38,12 +38,14 @@ /* Toasts */ .theia-notifications-container.theia-notification-toasts .theia-notification-list-item-container { + border-radius: 4px; margin-top: 6px; } .theia-notifications-container.theia-notification-toasts .theia-notification-list-item { box-shadow: 0px 0px 4px 0px var(--theia-widget-shadow); border: 1px solid var(--theia-notificationToast-border); + border-radius: 4px; } /* Center */ @@ -51,6 +53,8 @@ .theia-notifications-container.theia-notification-center { background-color: var(--theia-notifications-background); border: 1px solid var(--theia-notificationCenter-border); + border-radius: 4px; + overflow: hidden; box-shadow: 0px 0px 6px 0px var(--theia-widget-shadow); } @@ -83,6 +87,8 @@ .theia-notification-list-scroll-container { max-height: 300px; overflow: auto; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } .theia-notification-list { diff --git a/packages/monaco/data/monaco-themes/vscode/dark_vs.json b/packages/monaco/data/monaco-themes/vscode/dark_vs.json index ad08abf1f716a..ba0656d7ae9e9 100644 --- a/packages/monaco/data/monaco-themes/vscode/dark_vs.json +++ b/packages/monaco/data/monaco-themes/vscode/dark_vs.json @@ -14,6 +14,7 @@ "input.placeholderForeground": "#A6A6A6", "menu.background": "#252526", "menu.foreground": "#CCCCCC", + "menu.border": "#454545", "statusBarItem.remoteForeground": "#FFF", "statusBarItem.remoteBackground": "#16825D", "ports.iconRunningProcessForeground": "#369432", diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css index bd22a6ec99443..526216eefd5f5 100644 --- a/packages/search-in-workspace/src/browser/styles/index.css +++ b/packages/search-in-workspace/src/browser/styles/index.css @@ -66,6 +66,7 @@ border-style: solid; border-width: var(--theia-border-width); border-color: var(--theia-input-background); + border-radius: 2px; } .t-siw-search-container .searchHeader .search-field-container.focused {