Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Align border-radius with vscode #12252

Merged
merged 2 commits into from
Jun 28, 2023
Merged

Align border-radius with vscode #12252

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f69b799
Align border-radius with vscode
msujew Feb 28, 2023
ebbbdc2
Adjust border radius of select and alerts
msujew Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core/src/browser/common-frontend-contribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
},
{
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/browser/dialogs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export abstract class AbstractDialog<T> extends BaseWidget {
titleContentNode.appendChild(this.titleNode);

this.closeCrossNode = this.node.ownerDocument.createElement('i');
this.closeCrossNode.classList.add(...codiconArray('close'));
this.closeCrossNode.classList.add(...codiconArray('close', true));
this.closeCrossNode.classList.add('closeButton');
titleContentNode.appendChild(this.closeCrossNode);

Expand Down
3 changes: 3 additions & 0 deletions packages/core/src/browser/style/dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,12 @@
display: flex;
flex-direction: column;
min-width: 400px;
min-height: 150px;
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 {
Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/browser/style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ blockquote {
font-size: var(--theia-ui-font-size1);
line-height: var(--theia-content-line-height);
padding-left: 5px;
border-radius: 2px;
}

.theia-input[type="text"] {
Expand Down Expand Up @@ -263,6 +264,7 @@ blockquote {
cursor: pointer;
padding: 4px 9px;
margin-left: calc(var(--theia-ui-padding) * 2);
border-radius: 2px;
}

.theia-button:focus {
Expand Down
42 changes: 35 additions & 7 deletions packages/core/src/browser/style/menus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
|----------------------------------------------------------------------------*/

.p-Widget.p-MenuBar {
display: flex;
align-items: center;
padding-left: 5px;
font-size: var(--theia-ui-font-size1);
}
Expand All @@ -37,9 +39,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 {
Expand Down Expand Up @@ -96,12 +104,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 {
Expand All @@ -113,16 +122,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);
}
Expand Down Expand Up @@ -165,12 +193,12 @@
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,
Expand Down
4 changes: 2 additions & 2 deletions packages/keymaps/src/browser/keybindings-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget {
return <a title='Edit Keybinding' href='#' onClick={e => {
e.preventDefault();
this.editKeybinding(item);
}}><i className={`${codicon('edit')} kb-action-item`}></i></a>;
}}><i className={`${codicon('edit', true)} kb-action-item`}></i></a>;
}

/**
Expand All @@ -412,7 +412,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget {
? <a title='Reset Keybinding' href='#' onClick={e => {
e.preventDefault();
this.resetKeybinding(item);
}}><i className={`${codicon('discard')} kb-action-item`}></i></a> : '';
}}><i className={`${codicon('discard', true)} kb-action-item`}></i></a> : '';
}

/**
Expand Down
12 changes: 8 additions & 4 deletions packages/messages/src/browser/style/notifications.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,24 @@

/* Toasts */

.theia-notifications-container.theia-notification-toasts
.theia-notification-list-item-container {
.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 {
.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 */

.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);
}

Expand Down Expand Up @@ -85,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 {
Expand Down
1 change: 1 addition & 0 deletions packages/monaco/data/monaco-themes/vscode/dark_vs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/search-in-workspace/src/browser/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down