Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 17:19:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix #125338.

Browse Source
This commit is contained in:
rebornix
2021-06-02 17:16:36 -07:00
parent 66917f4179
commit 6cc80fea81
2 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/contrib/notebook/browser/media/notebook.css
+21 -1
View File
@@ -357,7 +357,7 @@
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .notebook-folding-indicator.mouseover .codicon {
opacity: 0;
transition: opacity 0.1s;
transition: opacity 0.s;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .notebook-folding-indicator.mouseover:hover .codicon {
@@ -605,6 +605,26 @@
right: 0px;
}
/** cell border colors */
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-top:before,
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .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;
}
.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;
}
.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;
}
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-drag-handle {
position: absolute;
top: 0px;
src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
+21 -24
View File
@@ -635,6 +635,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
top: -${cellTopMargin}px; height: calc(100% + ${cellTopMargin + cellBottomMargin}px)
}`);
} else {
// gutter
styleSheets.push(`
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-left:before,
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-right:before {
@@ -662,6 +663,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
border-radius: 2px;
margin-left: ${focusIndicatorLeftMargin}px;
}`);
// boder should always show
styleSheets.push(`
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container .cell-focus-indicator-left:before {
border-color: var(--notebook-focused-cell-border-color) !important;
}`);
}
// between cell insert toolbar
@@ -2710,6 +2717,20 @@ export const cellEditorBackground = registerColor('notebook.cellEditorBackground
}, nls.localize('notebook.cellEditorBackground', "Cell editor 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 link = theme.getColor(textLinkForeground);
if (link) {
collector.addRule(`.notebookOverlay .cell.markdown a,
@@ -2807,30 +2828,6 @@ registerThemingParticipant((theme, collector) => {
.notebookOverlay .code-cell-row:not(.focused).cell-output-hover .cell-collapsed-part { background-color: ${cellHoverBackgroundColor}; }`);
}
const focusedCellBorderColor = theme.getColor(focusedCellBorder);
collector.addRule(`
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-top:before,
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .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: ${focusedCellBorderColor} !important;
}`);
const inactiveFocusedBorderColor = theme.getColor(inactiveFocusedCellBorder);
collector.addRule(`
.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: ${inactiveFocusedBorderColor} !important;
}`);
const selectedCellBorderColor = theme.getColor(selectedCellBorder);
collector.addRule(`
.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: ${selectedCellBorderColor} !important;
}`);
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,