From 134272552d42362ad98f85fd0460daff86b1aed4 Mon Sep 17 00:00:00 2001 From: rebornix Date: Wed, 2 Nov 2022 16:59:26 -0700 Subject: [PATCH] Move notebook editor widget theme to css variables --- .../interactive/browser/interactiveEditor.ts | 12 +- .../notebook/browser/media/notebook.css | 170 +++++++++++- .../browser/media/notebookFocusIndicator.css | 6 +- .../browser/media/notebookToolbar.css | 2 +- .../notebook/browser/notebookEditorWidget.ts | 245 +----------------- 5 files changed, 181 insertions(+), 254 deletions(-) diff --git a/src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts b/src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts index 10a6c6a0a473e..c2476414c5bbe 100644 --- a/src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts +++ b/src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts @@ -222,24 +222,24 @@ export class InteractiveEditor extends EditorPane { if (focusIndicator === 'gutter') { styleSheets.push(` .interactive-editor .input-cell-container:focus-within .input-focus-indicator::before { - border-color: var(--notebook-focused-cell-border-color) !important; + border-color: var(--vscode-notebook-focusedCellBorder) !important; } .interactive-editor .input-focus-indicator::before { - border-color: var(--notebook-inactive-focused-cell-border-color) !important; + border-color: var(--vscode-notebook-inactiveFocusedCellBorder) !important; } .interactive-editor .input-cell-container .input-focus-indicator { display: block; top: ${INPUT_CELL_VERTICAL_PADDING}px; } .interactive-editor .input-cell-container { - border-top: 1px solid var(--notebook-inactive-focused-cell-border-color); + border-top: 1px solid var(--vscode-notebook-inactiveFocusedCellBorder); } `); } else { // border styleSheets.push(` .interactive-editor .input-cell-container { - border-top: 1px solid var(--notebook-inactive-focused-cell-border-color); + border-top: 1px solid var(--vscode-notebook-inactiveFocusedCellBorder); } .interactive-editor .input-cell-container .input-focus-indicator { display: none; @@ -687,10 +687,10 @@ export class InteractiveEditor extends EditorPane { registerThemingParticipant((theme, collector) => { collector.addRule(` .interactive-editor .input-cell-container:focus-within .input-editor-container .monaco-editor { - outline: solid 1px var(--notebook-focused-cell-border-color); + outline: solid 1px var(--vscode-notebook-focusedCellBorder); } .interactive-editor .input-cell-container .input-editor-container .monaco-editor { - outline: solid 1px var(--notebook-inactive-focused-cell-border-color); + outline: solid 1px var(--vscode-notebook-inactiveFocusedCellBorder); } .interactive-editor .input-cell-container .input-focus-indicator { top: ${INPUT_CELL_VERTICAL_PADDING}px; diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index 0a0c0c97b22d8..00f2ef7f36382 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -252,11 +252,11 @@ } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container .collapsed-execution-icon .codicon-notebook-state-success { - color: var(--notebook-cell-status-icon-success); + color: var(--vscode-notebookStatusSuccessIcon-foreground); } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container .collapsed-execution-icon .codicon-notebook-state-error { - color: var(--notebook-cell-status-icon-error); + color: var(--vscode-notebookStatusErrorIcon-foreground); } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container .cell-collapse-preview { @@ -569,3 +569,169 @@ .cell-comment-container.review-widget { background-color: var(--vscode-peekViewResult-background); } + +/** Cell output show more*/ +.notebookOverlay .output-show-more-container a, +.notebookOverlay div.output-show-more a { + color: var(--vscode-textLink-foreground); +} + +.notebookOverlay .output-show-more-container a:active, +.notebookOverlay .output-show-more a:active { + color: var(--vscode-textLink-activeForeground); +} + +/** Notebook cell output background */ +.notebookOverlay .output, +.notebookOverlay .output-element, +.notebookOverlay .output-show-more-container { + background-color: var(--vscode-notebook-outputContainerBackgroundColor); +} + +.notebookOverlay .output-element { + border-top: none !important; border: 1px solid transparent; border-color: var(--vscode-notebook-outputContainerBorderColor) !important; +} + +/** Notebook editor background */ +.notebookOverlay .cell-drag-image .cell-editor-container > div { + background: var(--vscode-editor-background) !important; +} +.notebookOverlay .monaco-list-row .cell-title-toolbar, +.notebookOverlay .monaco-list-row.cell-drag-image, +.notebookOverlay .cell-bottom-toolbar-container .action-item, +.notebookOverlay .cell-list-top-cell-toolbar-container .action-item { + background-color: var(--vscode-editor-background); +} + +.monaco-workbench .notebookOverlay.notebook-editor { + background-color: var(--vscode-notebook-editorBackground); +} + +.notebookOverlay .cell .monaco-editor-background, +.notebookOverlay .cell .margin-view-overlays, +.notebookOverlay .cell .cell-statusbar-container { + background: var(--vscode-notebook-cellEditorBackground, var(--vscode-editor-background)); +} + +/** Cell toolbar separator */ + +.notebookOverlay .monaco-list-row .cell-title-toolbar, +.notebookOverlay .cell-bottom-toolbar-container .action-item, +.notebookOverlay .cell-list-top-cell-toolbar-container .action-item { + border: solid 1px var(--vscode-notebook-cellToolbarSeparator); +} +.notebookOverlay .monaco-action-bar .action-item.verticalSeparator { + background-color: var(--vscode-notebook-cellToolbarSeparator); +} +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container { + border-bottom: solid 1px var(--vscode-notebook-cellToolbarSeparator); +} + +/** Focused cell background */ + +.notebookOverlay .code-cell-row.focused .cell-focus-indicator, +.notebookOverlay .markdown-cell-row.focused, +.notebookOverlay .code-cell-row.focused .input-collapse-container { + background-color: var(--vscode-notebook-focusedCellBackground) !important; +} + +/** Selected cell background */ +.notebookOverlay .monaco-list.selection-multiple .markdown-cell-row.selected, +.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-top, +.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-left, +.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-right, +.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-bottom { + background-color: var(--vscode-notebook-selectedCellBackground, inherit) !important; +} + +.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-focus-indicator-top:before, +.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-focus-indicator-bottom:before, +.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before, +.notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before { + border-color: var(--vscode-notebook-inactiveSelectedCellBorder, transparent) !important; +} + +/** Cell hover background */ +.notebookOverlay .code-cell-row:not(.focused):hover .cell-focus-indicator, +.notebookOverlay .code-cell-row:not(.focused).cell-output-hover .cell-focus-indicator, +.notebookOverlay .markdown-cell-row:not(.focused):hover { + background-color: var(--vscode-notebook-cellHoverBackground) !important; +} + +.notebookOverlay .code-cell-row:not(.focused):hover .input-collapse-container, +.notebookOverlay .code-cell-row:not(.focused).cell-output-hover .input-collapse-container { + background-color: var(--vscode-notebook-cellHoverBackground); +} + +/** Cell symbol higlight */ +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-symbolHighlight .cell-focus-indicator, +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-symbolHighlight { + background-color: var(--vscode-notebook-symbolHighlightBackground) !important; +} + +/** Cell focused editor border */ +.notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-editor-part:before { + outline: solid 1px var(--vscode-notebook-focusedEditorBorder); +} + +/** Cell border color */ +.notebookOverlay .cell.markdown h1 { border-color: var(--vscode-notebook-cellBorderColor); } +.notebookOverlay .monaco-list-row .cell-editor-part:before { outline: solid 1px var(--vscode-notebook-cellBorderColor); } + +/** Cell status bar */ +.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-language-picker:hover, +.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item.cell-status-item-has-command:hover { + background-color: var(--vscode-notebook-cellStatusBarItemHoverBackground); +} + +/** Insert toolbar */ +.notebookOverlay > .cell-list-container > .cell-list-insertion-indicator { + background-color: var(--vscode-notebook-cellInsertionIndicator); +} + +/** Scrollbar */ +.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider { + background: var(--vscode-notebookScrollbarSlider-background); +} + +.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider:hover { + background: var(--vscode-notebookScrollbarSlider-hoverBackground); +} + +.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider.active { + background: var(--vscode-notebookScrollbarSlider-activeBackground); +} + +/** Cell expand */ +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandInputIcon:hover, +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandOutputIcon:hover, +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-expand-part-button:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +/** Cell insertion/deletion */ +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-modified .cell-focus-indicator { + background-color: var(--vscode-editorGutter-modifiedBackground) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-modified { + background-color: var(--vscode-editorGutter-modifiedBackground) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-added .cell-focus-indicator { + background-color: var(--vscode-diffEditor-insertedTextBackground) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-added { + background-color: var(--vscode-diffEditor-insertedTextBackground) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-deleted .cell-focus-indicator { + background-color: var(--vscode-diffEditor-removedTextBackground) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-deleted { + background-color: var(--vscode-diffEditor-removedTextBackground) !important; +} + +.monaco-workbench .notebookOverlay .codicon-debug-continue { color: var(--vscode-icon-foreground) !important; } diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebookFocusIndicator.css b/src/vs/workbench/contrib/notebook/browser/media/notebookFocusIndicator.css index a8cf0c9b7522c..58e071ad4c97a 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebookFocusIndicator.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebookFocusIndicator.css @@ -54,19 +54,19 @@ .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-top:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-bottom:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container.cell-editor-focus:before { - border-color: var(notebook-selected-cell-border-color) !important; + border-color: var(--vscode-notebook-selectedCellBorder) !important; } .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-top:before, .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-bottom:before { - border-color: var(--notebook-inactive-focused-cell-border-color) !important; + border-color: var(--vscode-notebook-inactiveFocusedCellBorder) !important; } .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-top:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-bottom:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before { - border-color: var(--notebook-focused-cell-border-color) !important; + border-color: var(--vscode-notebook-focusedCellBorder) !important; } .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-left .codeOutput-focus-indicator-container { diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebookToolbar.css b/src/vs/workbench/contrib/notebook/browser/media/notebookToolbar.css index 5413489266c9d..5350552725927 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebookToolbar.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebookToolbar.css @@ -82,5 +82,5 @@ } .monaco-workbench .notebookOverlay .notebook-toolbar-container .monaco-action-bar .action-item .codicon-notebook-state-error { - color: var(--notebook-cell-status-icon-error); + color: var(--vscode-notebookStatusErrorIcon-foreground); } diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts index bb855ef74559b..a7e5197230922 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts @@ -42,8 +42,7 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { registerZIndex, ZIndex } from 'vs/platform/layout/browser/zIndexRegistry'; import { IEditorProgressService, IProgressRunner } from 'vs/platform/progress/common/progress'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { contrastBorder, diffInserted, diffRemoved, editorBackground, errorForeground, focusBorder, foreground, iconForeground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, toolbarHoverBackground, transparent } from 'vs/platform/theme/common/colorRegistry'; -import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { contrastBorder, errorForeground, focusBorder, foreground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, transparent } from 'vs/platform/theme/common/colorRegistry'; import { EDITOR_PANE_BACKGROUND, PANEL_BORDER, SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { debugIconStartForeground } from 'vs/workbench/contrib/debug/browser/debugColors'; import { CellEditState, CellFindMatchWithIndex, CellFocusMode, CellLayoutContext, CellRevealType, IActiveNotebookEditorDelegate, IBaseCellEditorOptions, ICellOutputViewModel, ICellViewModel, ICommonCellInfo, IDisplayOutputLayoutUpdateRequest, IFocusNotebookCellOptions, IInsetRenderOutput, IModelDecorationsChangeAccessor, INotebookDeltaDecoration, INotebookEditor, INotebookEditorContribution, INotebookEditorContributionDescription, INotebookEditorCreationOptions, INotebookEditorDelegate, INotebookEditorMouseEvent, INotebookEditorOptions, INotebookEditorViewState, INotebookViewCellsUpdateEvent, INotebookWebviewMessage, RenderOutputType } from 'vs/workbench/contrib/notebook/browser/notebookBrowser'; @@ -77,7 +76,6 @@ import { NotebookOptions, OutputInnerContainerTopPadding } from 'vs/workbench/co import { ICellRange } from 'vs/workbench/contrib/notebook/common/notebookRange'; import { INotebookRendererMessagingService } from 'vs/workbench/contrib/notebook/common/notebookRendererMessagingService'; import { INotebookService } from 'vs/workbench/contrib/notebook/common/notebookService'; -import { editorGutterModifiedBackground } from 'vs/workbench/contrib/scm/browser/dirtydiffDecorator'; import { IWebviewElement } from 'vs/workbench/contrib/webview/browser/webview'; import { EditorExtensionsRegistry } from 'vs/editor/browser/editorExtensions'; import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService'; @@ -645,7 +643,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD border-radius: 4px; width: 0px; margin-left: ${focusIndicatorLeftMargin}px; - border-color: var(--notebook-inactive-focused-cell-border-color) !important; + border-color: var(--vscode-notebook-inactiveFocusedCellBorder) !important; } .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-left .codeOutput-focus-indicator-container, @@ -664,7 +662,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD styleSheets.push(` .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-inner-container.cell-output-focus .cell-focus-indicator-left .codeOutput-focus-indicator, .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container .cell-focus-indicator-left .codeOutput-focus-indicator { - border-color: var(--notebook-focused-cell-border-color) !important; + border-color: var(--vscode-notebook-focusedCellBorder) !important; } .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-inner-container .cell-focus-indicator-left .output-focus-indicator { @@ -3110,240 +3108,3 @@ const notebookEditorBackground = registerColor('notebook.editorBackground', { hcDark: null, hcLight: null }, nls.localize('notebook.editorBackground', "Notebook background color.")); - -registerThemingParticipant((theme, collector) => { - // add css variable rules - - const focusedCellBorderColor = theme.getColor(focusedCellBorder); - const inactiveFocusedBorderColor = theme.getColor(inactiveFocusedCellBorder); - const selectedCellBorderColor = theme.getColor(selectedCellBorder); - collector.addRule(` - :root { - --notebook-focused-cell-border-color: ${focusedCellBorderColor}; - --notebook-inactive-focused-cell-border-color: ${inactiveFocusedBorderColor}; - --notebook-selected-cell-border-color: ${selectedCellBorderColor}; - } - `); - - const cellStatusIconSuccessColor = theme.getColor(cellStatusIconSuccess); - const cellStatusIconErrorColor = theme.getColor(cellStatusIconError); - const cellStatusIconRunningColor = theme.getColor(cellStatusIconRunning); - collector.addRule(` - :root { - --notebook-cell-status-icon-success: ${cellStatusIconSuccessColor}; - --notebook-cell-status-icon-error: ${cellStatusIconErrorColor}; - --notebook-cell-status-icon-running: ${cellStatusIconRunningColor}; - } - `); - - const link = theme.getColor(textLinkForeground); - if (link) { - collector.addRule(`.notebookOverlay .cell.markdown a, - .notebookOverlay .output-show-more-container a, - .notebookOverlay div.output-show-more a - { color: ${link};} `); - } - const activeLink = theme.getColor(textLinkActiveForeground); - if (activeLink) { - collector.addRule(`.notebookOverlay .output-show-more-container a:active, - .notebookOverlay .output-show-more a:active - { color: ${activeLink}; }`); - } - const shortcut = theme.getColor(textPreformatForeground); - if (shortcut) { - collector.addRule(`.notebookOverlay code, - .notebookOverlay .shortcut { color: ${shortcut}; }`); - } - const border = theme.getColor(contrastBorder); - if (border) { - collector.addRule(`.notebookOverlay .monaco-editor { border-color: ${border}; }`); - } - const quoteBackground = theme.getColor(textBlockQuoteBackground); - if (quoteBackground) { - collector.addRule(`.notebookOverlay blockquote { background: ${quoteBackground}; }`); - } - const quoteBorder = theme.getColor(textBlockQuoteBorder); - if (quoteBorder) { - collector.addRule(`.notebookOverlay blockquote { border-color: ${quoteBorder}; }`); - } - - const containerBackground = theme.getColor(notebookOutputContainerColor); - if (containerBackground) { - collector.addRule(`.notebookOverlay .output { background-color: ${containerBackground}; }`); - collector.addRule(`.notebookOverlay .output-element { background-color: ${containerBackground}; }`); - collector.addRule(`.notebookOverlay .output-show-more-container { background-color: ${containerBackground}; }`); - } - - const containerBorder = theme.getColor(notebookOutputContainerBorderColor); - if (containerBorder) { - collector.addRule(`.notebookOverlay .output-element { border-top: none !important; border: 1px solid transparent; border-color: ${containerBorder} !important; }`); - } - - const notebookBackground = theme.getColor(editorBackground); - if (notebookBackground) { - collector.addRule(`.notebookOverlay .cell-drag-image .cell-editor-container > div { background: ${notebookBackground} !important; }`); - collector.addRule(`.notebookOverlay .monaco-list-row .cell-title-toolbar { background-color: ${notebookBackground}; }`); - collector.addRule(`.notebookOverlay .monaco-list-row.cell-drag-image { background-color: ${notebookBackground}; }`); - collector.addRule(`.notebookOverlay .cell-bottom-toolbar-container .action-item { background-color: ${notebookBackground} }`); - collector.addRule(`.notebookOverlay .cell-list-top-cell-toolbar-container .action-item { background-color: ${notebookBackground} }`); - } - - const notebookBackgroundColor = theme.getColor(notebookEditorBackground); - - if (notebookBackgroundColor) { - collector.addRule(`.monaco-workbench .notebookOverlay.notebook-editor { background-color: ${notebookBackgroundColor}; }`); - } - - const editorBackgroundColor = theme.getColor(cellEditorBackground) ?? theme.getColor(editorBackground); - if (editorBackgroundColor) { - collector.addRule(`.notebookOverlay .cell .monaco-editor-background, - .notebookOverlay .cell .margin-view-overlays, - .notebookOverlay .cell .cell-statusbar-container { background: ${editorBackgroundColor}; }`); - } - - const cellToolbarSeperator = theme.getColor(CELL_TOOLBAR_SEPERATOR); - if (cellToolbarSeperator) { - collector.addRule(`.notebookOverlay .monaco-list-row .cell-title-toolbar { border: solid 1px ${cellToolbarSeperator}; }`); - collector.addRule(`.notebookOverlay .cell-bottom-toolbar-container .action-item { border: solid 1px ${cellToolbarSeperator} }`); - collector.addRule(`.notebookOverlay .cell-list-top-cell-toolbar-container .action-item { border: solid 1px ${cellToolbarSeperator} }`); - collector.addRule(`.notebookOverlay .monaco-action-bar .action-item.verticalSeparator { background-color: ${cellToolbarSeperator} }`); - collector.addRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapse-container { border-bottom: solid 1px ${cellToolbarSeperator} }`); - } - - const focusedCellBackgroundColor = theme.getColor(focusedCellBackground); - if (focusedCellBackgroundColor) { - collector.addRule(`.notebookOverlay .code-cell-row.focused .cell-focus-indicator { background-color: ${focusedCellBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .markdown-cell-row.focused { background-color: ${focusedCellBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .code-cell-row.focused .input-collapse-container { background-color: ${focusedCellBackgroundColor} !important; }`); - } - - const selectedCellBackgroundColor = theme.getColor(selectedCellBackground); - if (selectedCellBackground) { - collector.addRule(`.notebookOverlay .monaco-list.selection-multiple .markdown-cell-row.selected { background-color: ${selectedCellBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-top { background-color: ${selectedCellBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-left { background-color: ${selectedCellBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-right { background-color: ${selectedCellBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .monaco-list.selection-multiple .code-cell-row.selected .cell-focus-indicator-bottom { background-color: ${selectedCellBackgroundColor} !important; }`); - } - - const inactiveSelectedCellBorderColor = theme.getColor(inactiveSelectedCellBorder); - collector.addRule(` - .notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-focus-indicator-top:before, - .notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-focus-indicator-bottom:before, - .notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before, - .notebookOverlay .monaco-list.selection-multiple:focus-within .monaco-list-row.selected .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before { - border-color: ${inactiveSelectedCellBorderColor} !important; - } - `); - - const cellHoverBackgroundColor = theme.getColor(cellHoverBackground); - if (cellHoverBackgroundColor) { - collector.addRule(`.notebookOverlay .code-cell-row:not(.focused):hover .cell-focus-indicator, - .notebookOverlay .code-cell-row:not(.focused).cell-output-hover .cell-focus-indicator, - .notebookOverlay .markdown-cell-row:not(.focused):hover { background-color: ${cellHoverBackgroundColor} !important; }`); - collector.addRule(`.notebookOverlay .code-cell-row:not(.focused):hover .input-collapse-container, - .notebookOverlay .code-cell-row:not(.focused).cell-output-hover .input-collapse-container { background-color: ${cellHoverBackgroundColor}; }`); - } - - const cellSymbolHighlightColor = theme.getColor(cellSymbolHighlight); - if (cellSymbolHighlightColor) { - collector.addRule(`.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-symbolHighlight .cell-focus-indicator, - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-symbolHighlight { - background-color: ${cellSymbolHighlightColor} !important; - }`); - } - - const focusedEditorBorderColorColor = theme.getColor(focusedEditorBorderColor); - if (focusedEditorBorderColorColor) { - collector.addRule(`.notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-editor-part:before { outline: solid 1px ${focusedEditorBorderColorColor}; }`); - } - - const cellBorderColor = theme.getColor(notebookCellBorder); - if (cellBorderColor) { - collector.addRule(`.notebookOverlay .cell.markdown h1 { border-color: ${cellBorderColor}; }`); - collector.addRule(`.notebookOverlay .monaco-list-row .cell-editor-part:before { outline: solid 1px ${cellBorderColor}; }`); - } - - const cellStatusBarHoverBg = theme.getColor(cellStatusBarItemHover); - if (cellStatusBarHoverBg) { - collector.addRule(`.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-language-picker:hover, - .monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item.cell-status-item-has-command:hover { background-color: ${cellStatusBarHoverBg}; }`); - } - - const cellInsertionIndicatorColor = theme.getColor(cellInsertionIndicator); - if (cellInsertionIndicatorColor) { - collector.addRule(`.notebookOverlay > .cell-list-container > .cell-list-insertion-indicator { background-color: ${cellInsertionIndicatorColor}; }`); - } - - const scrollbarSliderBackgroundColor = theme.getColor(listScrollbarSliderBackground); - if (scrollbarSliderBackgroundColor) { - collector.addRule(` .notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider { background: ${scrollbarSliderBackgroundColor}; } `); - } - - const scrollbarSliderHoverBackgroundColor = theme.getColor(listScrollbarSliderHoverBackground); - if (scrollbarSliderHoverBackgroundColor) { - collector.addRule(` .notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider:hover { background: ${scrollbarSliderHoverBackgroundColor}; } `); - } - - const scrollbarSliderActiveBackgroundColor = theme.getColor(listScrollbarSliderActiveBackground); - if (scrollbarSliderActiveBackgroundColor) { - collector.addRule(` .notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .scrollbar > .slider.active { background: ${scrollbarSliderActiveBackgroundColor}; } `); - } - - const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground); - if (toolbarHoverBackgroundColor) { - collector.addRule(` - .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandInputIcon:hover, - .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandOutputIcon:hover, - .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-expand-part-button:hover { - background-color: ${toolbarHoverBackgroundColor}; - } - `); - } - - - // case ChangeType.Modify: return theme.getColor(editorGutterModifiedBackground); - // case ChangeType.Add: return theme.getColor(editorGutterAddedBackground); - // case ChangeType.Delete: return theme.getColor(editorGutterDeletedBackground); - // diff - - const modifiedBackground = theme.getColor(editorGutterModifiedBackground); - if (modifiedBackground) { - collector.addRule(` - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-modified .cell-focus-indicator { - background-color: ${modifiedBackground} !important; - } - - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-modified { - background-color: ${modifiedBackground} !important; - }`); - } - - const addedBackground = theme.getColor(diffInserted); - if (addedBackground) { - collector.addRule(` - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-added .cell-focus-indicator { - background-color: ${addedBackground} !important; - } - - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-added { - background-color: ${addedBackground} !important; - }`); - } - const deletedBackground = theme.getColor(diffRemoved); - if (deletedBackground) { - collector.addRule(` - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-deleted .cell-focus-indicator { - background-color: ${deletedBackground} !important; - } - - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-deleted { - background-color: ${deletedBackground} !important; - }`); - } - - const iconForegroundColor = theme.getColor(iconForeground); - if (iconForegroundColor) { - collector.addRule(`.monaco-workbench .notebookOverlay .codicon-debug-continue { color: ${iconForegroundColor} !important; }`); - } -});