Skip to content

Commit

Permalink
Merge Editor: update background and border colors (#158825)
Browse files Browse the repository at this point in the history 
* Update initial dark+ colors

* Update hc colors

* Fix diffword

* More updates
  • Loading branch information
@daviddossett
daviddossett committed Aug 22, 2022
1 parent 0f5c8d5 commit 4fd2216
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 29 deletions.
31 changes: 24 additions & 7 deletions src/vs/workbench/contrib/mergeEditor/browser/view/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,58 @@ import { registerColor } from 'vs/platform/theme/common/colorRegistry';

export const diff = registerColor(
'mergeEditor.change.background',
{ dark: '#9bb95533', light: '#9bb95533', hcDark: '#9bb95533', hcLight: '#9bb95533', },
{ dark: '#40A6FF33', light: '#40A6FF33', hcDark: '#40A6FF33', hcLight: '#40A6FF33', },
localize('mergeEditor.change.background', 'The background color for changes.')
);

export const diffWord = registerColor(
'mergeEditor.change.word.background',
{ dark: '#9bb9551e', light: '#9bb9551e', hcDark: '#9bb9551e', hcLight: '#9bb9551e', },
{ dark: '#9bb9551e', light: '#9bb9551e', hcDark: null, hcLight: null, },
localize('mergeEditor.change.word.background', 'The background color for word changes.')
);

export const conflictBorderUnhandledUnfocused = registerColor(
'mergeEditor.conflict.unhandledUnfocused.border',
{ dark: '#ffa6007a', light: '#ffa6007a', hcDark: '#ffa6007a', hcLight: '#ffa6007a', },
{ dark: '#ffa6007a', light: '#ffa6007a', hcDark: '#ffa60080', hcLight: '#ffa60080', },
localize('mergeEditor.conflict.unhandledUnfocused.border', 'The border color of unhandled unfocused conflicts.')
);

export const conflictBackgroundUnhandledUnfocused = registerColor(
'mergeEditor.conflict.unhandledUnfocused.background',
{ dark: '#ffa60026', light: '#ffa60080', hcDark: '#ffa60026', hcLight: '#ffa6007a', },
localize('mergeEditor.conflict.unhandledUnfocused.background', 'The background color of unhandled unfocused conflicts.')
);

export const conflictBorderUnhandledFocused = registerColor(
'mergeEditor.conflict.unhandledFocused.border',
{ dark: '#ffa600', light: '#ffa600', hcDark: '#ffa600', hcLight: '#ffa600', },
{ dark: '#ffa600BF', light: '#ffa600', hcDark: '#ffa600', hcLight: '#ffa600', },
localize('mergeEditor.conflict.unhandledFocused.border', 'The border color of unhandled focused conflicts.')
);

export const conflictBorderHandledUnfocused = registerColor(
'mergeEditor.conflict.handledUnfocused.border',
{ dark: '#86868649', light: '#86868649', hcDark: '#86868649', hcLight: '#86868649', },
{ dark: '#40C8AE49', light: '#40C8AE49', hcDark: '#40C8AE', hcLight: '#40C8AE', },
localize('mergeEditor.conflict.handledUnfocused.border', 'The border color of handled unfocused conflicts.')
);

export const conflictBackgroundHandledUnfocused = registerColor(
'mergeEditor.conflict.handledUnfocused.background',
{ dark: '#40C8AE33', light: '#40C8AE33', hcDark: '#40C8AE33', hcLight: '#40C8AE33', },
localize('mergeEditor.conflict.handledUnfocused.background', 'The background color of handled unfocused conflicts.')
);

export const conflictBackgroundHandledFocused = registerColor(
'mergeEditor.conflict.handledFocused.background',
{ dark: '#40C8AE33', light: '#40C8AE33', hcDark: '#40C8AE33', hcLight: '#40C8AE33', },
localize('mergeEditor.conflict.handledFocused.background', 'The background color of handled focused conflicts.')
);

export const conflictBorderHandledFocused = registerColor(
'mergeEditor.conflict.handledFocused.border',
{ dark: '#c1c1c1cc', light: '#c1c1c1cc', hcDark: '#c1c1c1cc', hcLight: '#c1c1c1cc', },
{ dark: '#40C8AEBF', light: '#40C8AEBF', hcDark: '#40C8AE', hcLight: '#40C8AE', },
localize('mergeEditor.conflict.handledFocused.border', 'The border color of handled focused conflicts.')
);


export const handledConflictMinimapOverViewRulerColor = registerColor(
'mergeEditor.conflict.handled.minimapOverViewRuler',
{ dark: '#adaca8ee', light: '#adaca8ee', hcDark: '#adaca8ee', hcLight: '#adaca8ee', },
Expand Down
37 changes: 15 additions & 22 deletions src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,58 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.monaco-workbench .merge-editor .code-view > .title {
.monaco-workbench .merge-editor .code-view>.title {
padding: 0 10px;
height: 30px;
display: flex;
align-content: center;
}

.monaco-workbench .merge-editor .code-view > .title>SPAN {
.monaco-workbench .merge-editor .code-view>.title>SPAN {
align-self: center;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 6px;
white-space: nowrap;
}

.monaco-workbench .merge-editor .code-view > .title>SPAN.title {
.monaco-workbench .merge-editor .code-view>.title>SPAN.title {
flex-shrink: 0;
}

.monaco-workbench .merge-editor .code-view > .title>SPAN.description {
.monaco-workbench .merge-editor .code-view>.title>SPAN.description {
opacity: 0.7;
font-size: 90%;
}

.monaco-workbench .merge-editor .code-view > .title>SPAN.detail {
.monaco-workbench .merge-editor .code-view>.title>SPAN.detail {
margin-left: auto;
flex-shrink: 0;
}

.monaco-workbench .merge-editor .code-view > .title>SPAN.detail .codicon {
.monaco-workbench .merge-editor .code-view>.title>SPAN.detail .codicon {
font-size: 13px;
}

.monaco-workbench .merge-editor .code-view > .container {
.monaco-workbench .merge-editor .code-view>.container {
display: flex;
flex-direction: row;
}

.monaco-workbench .merge-editor .code-view > .container > .gutter {
.monaco-workbench .merge-editor .code-view>.container>.gutter {
width: 24px;
position: relative;
overflow: hidden;

flex-shrink: 0;
flex-grow: 0;
}

.merge-editor-diff {
background-color: var(--vscode-mergeEditor-change-background);
}

.merge-editor-diff-word {
background-color: var(--vscode-mergeEditor-change-word-background);
}

.merge-editor-block {
background-color: var(--vscode-mergeEditor-conflict-unhandledUnfocused-background);
border: 1px dashed var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);
}

Expand All @@ -68,14 +64,15 @@

.merge-editor-block.handled {
border: 1px solid var(--vscode-mergeEditor-conflict-handledUnfocused-border);

background-color: var(--vscode-mergeEditor-conflict-handledUnfocused-background);
}

.merge-editor-block.handled.focused {
border: 1px solid var(--vscode-mergeEditor-conflict-handledFocused-border);
background-color: var(--vscode-mergeEditor-conflict-handledFocused-background);
}

.gutter.monaco-editor > div {
.gutter.monaco-editor>div {
position: absolute;
}

Expand All @@ -90,8 +87,6 @@
position: absolute;
}



.merge-accept-gutter-marker.multi-line.focused .background {
border: 1px dashed var(--vscode-mergeEditor-conflict-unhandledFocused-border);
border-right: 0;
Expand Down Expand Up @@ -129,8 +124,6 @@
border: 1px solid var(--vscode-checkbox-border);
}



.merge-accept-gutter-marker.multi-line .background {
left: 8px;
width: 10px;
Expand Down Expand Up @@ -160,7 +153,7 @@

.conflict-zone-root {
border: 1px dashed var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);
background-color: var(--vscode-mergeEditor-change-background);
background-color: var(--vscode-mergeEditor-conflict-unhandledUnfocused-background);

height: 90%;
display: flex;
Expand All @@ -179,10 +172,10 @@

.conflict-zone-root .text {
margin-left: auto;
padding: 0 12px;
padding: 0 8px;
display: flex;
align-items: center;
background: var(--vscode-mergeEditor-conflictingLines-background);
/* background: var(--vscode-mergeEditor-conflict-unhandledUnfocused-background); */
height: 100%;
white-space: nowrap;
overflow: hidden;
Expand Down

0 comments on commit 4fd2216

Please sign in to comment.