Adding light contrast theme (#22028)

* Adding light contrast theme

* fixing oe icons

* Fixing more files

* Converting ep files to support hc light

* Revert "Copy Headers for Selected Columns (#21622)"

This reverts commit f74d6f6d9b.

* Adding more css rules

* Fixing modal

* Fixing azure icons
This commit is contained in:
Aasim Khan
2023-03-06 17:31:27 -08:00
committed by GitHub
parent 29c1f5edd0
commit d3f4f0daa4
61 changed files with 912 additions and 267 deletions

View File

@@ -24,6 +24,8 @@
.modal.callout-dialog .modal-content .row {
margin-bottom: 16px;
}
.hc-light .modal.callout-dialog .modal-dialog,
.hc-black .modal.callout-dialog .modal-dialog {
box-shadow: none;
}
@@ -55,9 +57,12 @@
width: 26px;
}
.hc-light .callout-arrow:before,
.hc-black .callout-arrow:before {
box-shadow: none;
}
.hc-light .callout-arrow.from-left:before,
.hc-black .callout-arrow.from-left:before {
box-shadow: none;
}

View File

@@ -219,16 +219,16 @@
margin: 3px 10px 3px 3px;
}
.modal.flyout-dialog .dialog-message.info .dialog-message-button > a:focus,
.modal.flyout-dialog .dialog-message.error .dialog-message-button > a:focus {
.modal.flyout-dialog .dialog-message.info .dialog-message-button>a:focus,
.modal.flyout-dialog .dialog-message.error .dialog-message-button>a:focus {
outline-color: #FFFFFF;
}
.modal.flyout-dialog .dialog-message.warning .dialog-message-button > a:focus {
.modal.flyout-dialog .dialog-message.warning .dialog-message-button>a:focus {
outline-color: #000000;
}
.modal.flyout-dialog .dialog-message-button > a {
.modal.flyout-dialog .dialog-message-button>a {
background-position-x: 2px !important;
background-color: inherit !important;
color: inherit !important;
@@ -298,11 +298,32 @@
background: url('error_notification_inverse.svg') center center no-repeat;
}
.hc-light .dialog-message.info .dialog-message-icon {
background: url('info_notification.svg') center center no-repeat !important;
}
.hc-light .dialog-message.error .dialog-message-icon {
background: url('error_notification.svg') center center no-repeat !important;
}
.hc-light .dialog-message.warning .dialog-message-icon {
background: url('warning_notification.svg') center center no-repeat !important;
}
.hc-light .copy-message-icon {
background: url('copy.svg') center center no-repeat !important;
}
.hc-light .close-message-icon {
background: url('close.svg') center center no-repeat !important;
}
.codicon.masked-icon.browse-local {
display: inline-block;
height: 25px;
width: 25px;
}
.codicon.masked-icon.browse-local:before {
height: 25px;
width: 25px;

View File

@@ -47,7 +47,8 @@
align-items: center;
}
.backButtonIcon {
.backButtonIcon,
.hc-light .backButtonIcon {
content: url('back.svg');
width: 20px;
margin-right: 10px;
@@ -73,7 +74,8 @@
background-size: 16px;
}
.vs .optionsDialog-options .optionsDialog-description .modal-title {
.vs .optionsDialog-options .optionsDialog-description .modal-title,
.hc-light .optionsDialog-options .optionsDialog-description .modal-title {
background-image: url('info_notification.svg')
}

View File

@@ -754,6 +754,8 @@ export abstract class Modal extends Disposable implements IThemable {
box-shadow: 0px 3.2px 7.2px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.132),
0px 0.6px 1.8px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.108);
}
.hc-light .modal.callout-dialog .modal-dialog,
.hc-black .modal.callout-dialog .modal-dialog {
border-color: rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1);
}
@@ -764,6 +766,8 @@ export abstract class Modal extends Disposable implements IThemable {
background-color: ${this._dialogBodyBackground};
border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5);
}
.hc-light .callout-arrow:before,
.hc-black .callout-arrow:before {
border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1);
}

View File

@@ -25,7 +25,7 @@ export function createIconCssClass(iconPath: IconPath, className?: string): stri
removeCSSRulesContainingSelector(iconClass);
const icon = getLightIconUri(iconPath);
const iconDark = getDarkIconUri(iconPath) || icon;
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(icon)}`);
createCSSRule(`.icon.${iconClass}, .hc-light .icon.${iconClass}`, `background-image: ${asCSSUrl(icon)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(iconDark)}`);
return iconClass;
}

View File

@@ -24,6 +24,10 @@ modelview-diff-editor-component {
font-size: 11px
}
.hc-light .modelview-diff-editor-title-background {
background-color: #6fc3df;
}
.vs-dark .modelview-diff-editor-title-background {
background-color: #434343;
}
@@ -34,4 +38,4 @@ modelview-diff-editor-component {
.modelview-diff-editor-title-background {
background-color: #d5d5d5;
}
}

View File

@@ -27,7 +27,8 @@
cursor: pointer;
}
.vs .modelview-group-header-collapsible.expanded {
.vs .modelview-group-header-collapsible.expanded,
.hc-light .modelview-group-header-collapsible.expanded {
background-image: url("expanded.svg");
}
@@ -36,7 +37,8 @@
background-image: url("expanded_inverse.svg");
}
.vs .modelview-group-header-collapsible.collapsed {
.vs .modelview-group-header-collapsible.collapsed,
.hc-light .modelview-group-header-collapsible.collapsed {
background-image: url("collapsed.svg");
}

View File

@@ -14,7 +14,8 @@
margin-left: 5px;
}
.vs .modelview-loadingComponent-spinner {
.vs .modelview-loadingComponent-spinner,
.hc-light .modelview-loadingComponent-spinner {
content: url("loading.svg");
}

View File

@@ -56,15 +56,18 @@ modelview-dom-component .showEditorSelection li.code-line:hover:before {
left: -30px;
}
modelview-dom-component .showEditorSelection .code-active-line:before {
modelview-dom-component .showEditorSelection .code-active-line:before,
.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
modelview-dom-component .showEditorSelection .code-line:hover:before {
modelview-dom-component .showEditorSelection .code-line:hover:before,
.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
modelview-dom-component .showEditorSelection .code-line .code-line:hover:before {
modelview-dom-component .showEditorSelection .code-line .code-line:hover:before,
.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
@@ -91,6 +94,14 @@ modelview-dom-component .showEditorSelection .code-line .code-line:hover:before
border-left: 3px solid rgba(255, 160, 0, 1);
}
.hc-light modelview-dom-component .showEditorSelection .code-active-line:before {
border-left: 3px solid #6fc3df;
}
.hc-light modelview-dom-component .showEditorSelection .code-line:hover:before {
border-left: 3px solid #6fc3df;
}
modelview-dom-component .showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
@@ -205,6 +216,14 @@ modelview-dom-component pre {
background-color: rgba(220, 220, 220, 0.4);
}
.monaco-workbench.hc-light modelview-dom-component pre {
background-color: rgba(255, 255, 255);
}
.monaco-workbench.hc-light modelview-dom-component h1 {
border-color: rgba(255, 255, 255);
}
.monaco-workbench.vs-dark modelview-dom-component pre {
background-color: rgba(10, 10, 10, 0.4);
}

View File

@@ -17,7 +17,7 @@ modelview-text div#textContainer {
margin-left: 5px;
}
.vs .modelview-text-tooltip {
.vs .modelview-text-tooltip, .hc-light .modelview-text-tooltip {
background-image: url('info.svg')
}
@@ -36,7 +36,7 @@ modelview-text div#textContainer {
margin-left: 14px;
}
.vs .modelview-text-tooltip .modelview-text-tooltip-content {
.vs .modelview-text-tooltip .modelview-text-tooltip-content, .hc-light .modelview-text-tooltip .modelview-text-tooltip-content {
background-color: #f5f5f5;
}