Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
microsoft
GitHub Repository: microsoft/vscode
 Path: blob/main/src/vs/workbench/contrib/notebook/browser/diff/notebookDiff.css
3296 views
1
/*---------------------------------------------------------------------------------------------

2
 *  Copyright (c) Microsoft Corporation. All rights reserved.

3
 *  Licensed under the MIT License. See License.txt in the project root for license information.

4
 *--------------------------------------------------------------------------------------------*/

5


6
/* .notebook-diff-editor {

7
	display: flex;

8
	flex-direction: row;

9
	height: 100%;

10
	width: 100%;

11
}

12
.notebook-diff-editor-modified,

13
.notebook-diff-editor-original {

14
	display: flex;

15
	height: 100%;

16
	width: 50%;

17
} */

18


19
.notebook-text-diff-editor {

20
	position: relative;

21
}

22


23
.notebook-text-diff-editor .cell-body {

24
	display: flex;

25
	flex-direction: row;

26
}

27


28
.notebook-text-diff-editor .cell-placeholder-body {

29
	display: flex;

30
	flex-direction: row;

31
}

32


33
.notebook-text-diff-editor .webview-cover {

34
	user-select: initial;

35
	-webkit-user-select: initial;

36
}

37


38
.notebook-text-diff-editor .cell-body .border-container {

39
	position: absolute;

40
	width: calc(100% - 32px);

41
}

42


43
.notebook-text-diff-editor .cell-body .border-container .top-border,

44
.notebook-text-diff-editor .cell-body .border-container .bottom-border {

45
	position: absolute;

46
	width: 100%;

47
}

48


49
.notebook-text-diff-editor .cell-body .border-container .left-border,

50
.notebook-text-diff-editor .cell-body .border-container .right-border {

51
	position: absolute;

52
}

53


54
.notebook-text-diff-editor .cell-body .border-container .right-border {

55
	left: 100%;

56
}

57


58
.notebook-text-diff-editor .cell-body.right {

59
	flex-direction: row-reverse;

60
}

61


62
.notebook-text-diff-editor .cell-body .diagonal-fill {

63
	display: none;

64
	width: 50%;

65
}

66


67
.notebook-text-diff-editor .cell-body .cell-diff-editor-container {

68
	width: 100%;

69
	/* why we overflow hidden at the beginning?*/

70
	/* overflow: hidden; */

71
}

72


73
.notebook-text-diff-editor > .notebook-diff-list-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row {

74
	cursor: default;

75
}

76


77
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .metadata-editor-container.diff,

78
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .output-editor-container.diff,

79
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .editor-container.diff {

80
	/** 100% + diffOverviewWidth */

81
	width: calc(100%);

82
}

83


84
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .metadata-editor-container .monaco-diff-editor .diffOverview,

85
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .editor-container.diff .monaco-diff-editor .diffOverview,

86
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .output-editor-container.diff .monaco-diff-editor .diffOverview {

87
	display: none;

88
}

89


90
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .metadata-editor-container,

91
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .editor-container {

92
	box-sizing: border-box;

93
}

94


95
.notebook-text-diff-editor .cell-body.left .cell-diff-editor-container,

96
.notebook-text-diff-editor .cell-body.right .cell-diff-editor-container {

97
	display: inline-block;

98
	width: 50%;

99
}

100


101
.notebook-text-diff-editor .cell-body.left .diagonal-fill,

102
.notebook-text-diff-editor .cell-body.right .diagonal-fill {

103
	display: inline-block;

104
	width: 50%;

105
}

106


107
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container,

108
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container,

109
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container {

110
	display: flex;

111
	height: 24px;

112
	align-items: center;

113
	cursor: default;

114
}

115


116
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container .property-folding-indicator .codicon,

117
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container .property-folding-indicator .codicon,

118
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container .property-folding-indicator .codicon {

119
	visibility: visible;

120
	padding: 4px 0 0 6px;

121
	cursor: pointer;

122
}

123


124
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container,

125
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container,

126
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container {

127
	display: flex;

128
	flex-direction: row;

129
	align-items: center;

130
}

131


132
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container,

133
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container,

134
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container {

135
	cursor: pointer;

136
}

137


138
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container .property-toolbar,

139
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container .property-toolbar,

140
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container .property-toolbar {

141
	margin-left: auto;

142
}

143


144
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container .property-status,

145
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container .property-status,

146
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container .property-status {

147
	font-size: 12px;

148
}

149


150
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container .property-status span,

151
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container .property-status span,

152
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container .property-status span {

153
	margin: 0 0 0 5px;

154
	line-height: 21px;

155
}

156


157
.notebook-text-diff-editor .cell-diff-editor-container .input-header-container .property-status span.property-description,

158
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container .property-status span.property-description,

159
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container .property-status span.property-description {

160
	font-style: italic;

161
}

162


163
.notebook-text-diff-editor {

164
	overflow: hidden;

165
}

166


167
.monaco-workbench .notebook-text-diff-editor > .notebook-diff-list-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row {

168
	overflow: visible !important;

169
}

170


171
.monaco-workbench .notebook-text-diff-editor > .notebook-diff-list-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row,

172
.monaco-workbench .notebook-text-diff-editor > .notebook-diff-list-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover,

173
.monaco-workbench .notebook-text-diff-editor > .notebook-diff-list-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused {

174
	outline: none !important;

175
	background-color: transparent !important;

176
}

177


178
.notebook-text-diff-editor .cell-diff-editor-container .editor-input-toolbar-container {

179
	position: absolute;

180
	right: 16px;

181
	top: 16px;

182
	margin: 1px 2px;

183
}

184


185
.monaco-workbench .notebook-text-diff-editor .cell-body {

186
	height: 0;

187
}

188


189
.monaco-workbench .notebook-text-diff-editor .cell-body .output-view-container {

190
	user-select: text;

191
	-webkit-user-select: text;

192
	white-space: initial;

193
	cursor: auto;

194
	position: relative;

195
}

196


197
.monaco-workbench .notebook-text-diff-editor .cell-body.left .output-view-container .output-inner-container,

198
.monaco-workbench .notebook-text-diff-editor .cell-body.right .output-view-container .output-inner-container {

199
	width: 100%;

200
	padding: 0px 8px;

201
	box-sizing: border-box;

202
	overflow-x: hidden;

203
}

204


205
.monaco-workbench .notebook-text-diff-editor .cell-body.left .output-view-container .output-inner-container {

206
	padding: 0px 8px 0px 32px;

207
}

208


209
.monaco-workbench .notebook-text-diff-editor .cell-body.right .output-view-container .output-inner-container {

210
	padding: 0px 8px 0px 32px;

211
}

212


213
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-view-container .output-inner-container {

214
	width: 100%;

215
	padding: 4px 8px 4px 32px;

216
	box-sizing: border-box;

217
	overflow: hidden;

218
}

219


220
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-left {

221
	top: 0;

222
	position: absolute;

223
	left: 0;

224
}

225


226
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-right {

227
	position: absolute;

228
	top: 0;

229
	left: 50%;

230
}

231


232
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-left,

233
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-right {

234
	width: 50%;

235
	display: inline-block;

236
}

237


238
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-left div.foreground,

239
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-right div.foreground {

240
	width: 100%;

241
}

242


243
.monaco-workbench .notebook-text-diff-editor .output-view-container > div.foreground {

244
	width: 100%;

245
	min-height: 24px;

246
	box-sizing: border-box;

247
}

248


249
.monaco-workbench .notebook-text-diff-editor .output-view-container .error_message {

250
	color: red;

251
}

252


253
.monaco-workbench .notebook-text-diff-editor .output-view-container .error > div {

254
	white-space: normal;

255
}

256


257
.monaco-workbench .notebook-text-diff-editor .output-view-container .error pre.traceback {

258
	box-sizing: border-box;

259
	padding: 8px 0;

260
	margin: 0px;

261
}

262


263
.monaco-workbench .notebook-text-diff-editor .output-view-container .error .traceback > span {

264
	display: block;

265
}

266


267
.monaco-workbench .notebook-text-diff-editor .output-view-container .display img {

268
	max-width: 100%;

269
}

270


271
.monaco-workbench .notebook-text-diff-editor .output-view-container .multi-mimetype-output {

272
	position: absolute;

273
	top: 4px;

274
	left: 8px;

275
	width: 16px;

276
	height: 16px;

277
	cursor: pointer;

278
	padding: 2px 4px 4px 2px;

279
}

280


281
.monaco-workbench .notebook-text-diff-editor .output-view-container .output-empty-view span {

282
	opacity: 0.7;

283
}

284


285
.monaco-workbench .notebook-text-diff-editor .output-view-container .output-empty-view {

286
	font-style: italic;

287
	height: 24px;

288
	margin: auto;

289
	padding-left: 12px;

290
}

291


292
.monaco-workbench .notebook-text-diff-editor .output-view-container pre {

293
	margin: 4px 0;

294
}

295


296
.monaco-workbench .notebook-text-diff-edito .monaco-list:focus-within .monaco-list-row.focused .codicon,

297
.monaco-workbench .notebook-text-diff-editor .monaco-list:focus-within .monaco-list-row.selected .codicon {

298
	color: inherit;

299
}

300


301
.monaco-workbench .notebook-text-diff-editor .output-view-container .output-view-container-metadata {

302
	position: relative;

303
}

304


305
/* Diff decorations */

306


307
.notebook-text-diff-editor .cell-body .codicon-diff-remove,

308
.notebook-text-diff-editor .cell-body .codicon-diff-insert {

309
	left: 4px !important;

310
	width: 15px !important;

311
}

312


313
.monaco-workbench .notebook-text-diff-editor > .monaco-list > .monaco-scrollable-element > .scrollbar.visible {

314
	z-index: var(--z-index-notebook-scrollbar);

315
	cursor: default;

316
}

317


318
.notebook-text-diff-editor .notebook-overview-ruler-container {

319
	position: absolute;

320
	top: 0;

321
	right: 0;

322
}

323


324
.notebook-text-diff-editor .notebook-overview-ruler-container .diffViewport {

325
	z-index: var(--notebook-diff-view-viewport-slider);

326
}

327


328
.notebook-text-diff-editor .diffViewport {

329
	background: var(--vscode-scrollbarSlider-background);

330
}

331


332
.notebook-text-diff-editor .diffViewport:hover {

333
	background: var(--vscode-scrollbarSlider-hoverBackground);

334
}

335


336
.notebook-text-diff-editor .diffViewport:active {

337
	background: var(--vscode-scrollbarSlider-activeBackground);

338
}

339


340
/** Diff cell borders */

341
.notebook-text-diff-editor .cell-body .border-container .top-border,

342
.notebook-text-diff-editor .cell-body .border-container .bottom-border,

343
.notebook-text-diff-editor .cell-diff-editor-container .output-header-container,

344
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container {

345
	border-top: 1px solid var(--vscode-notebook-cellBorderColor);

346
}

347


348
.notebook-text-diff-editor .cell-body .border-container .left-border {

349
	border-left: 1px solid var(--vscode-notebook-cellBorderColor);

350
}

351


352
.notebook-text-diff-editor .cell-body .border-container .right-border {

353
	border-right: 1px solid var(--vscode-notebook-cellBorderColor);

354
}

355


356
/** Diff cell active borders */

357
.notebook-text-diff-editor .monaco-list-row.focused .cell-body .border-container .top-border,

358
.notebook-text-diff-editor .monaco-list-row.focused .cell-body .border-container .bottom-border {

359
	border-top: 1px solid var(--vscode-notebook-focusedEditorBorder);

360
}

361


362
.notebook-text-diff-editor .monaco-list-row.focused .cell-body .border-container .left-border {

363
	border-left: 1px solid var(--vscode-notebook-focusedEditorBorder);

364
}

365


366
.notebook-text-diff-editor .monaco-list-row.focused .cell-body .border-container .right-border {

367
	border-right: 1px solid var(--vscode-notebook-focusedEditorBorder);

368
}

369


370
/** Diff cell diff background */

371


372
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-right div.foreground,

373
.monaco-workbench .notebook-text-diff-editor .cell-body.right .output-info-container .output-view-container div.foreground,

374
.monaco-workbench .notebook-text-diff-editor .cell-body.right .output-info-container .output-view-container div.output-empty-view,

375
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .source-container,

376
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .source-container .monaco-editor .margin,

377
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .source-container .monaco-editor .monaco-editor-background,

378
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .input-header-container,

379
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .metadata-editor-container,

380
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .metadata-editor-container .monaco-editor .margin,

381
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .metadata-editor-container .monaco-editor .monaco-editor-background,

382
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .output-editor-container,

383
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .output-editor-container .monaco-editor .margin,

384
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .output-editor-container .monaco-editor .monaco-editor-background,

385
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .metadata-header-container,

386
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.inserted .output-header-container {

387
	background-color: var(--vscode-diffEditor-insertedTextBackground);

388
}

389


390
.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-left div.foreground,

391
.monaco-workbench .notebook-text-diff-editor .cell-body.left .output-info-container .output-view-container div.foreground,

392
.monaco-workbench .notebook-text-diff-editor .cell-body.left .output-info-container .output-view-container div.output-empty-view,

393
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .source-container,

394
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .source-container .monaco-editor .margin,

395
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .source-container .monaco-editor .monaco-editor-background,

396
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .input-header-container,

397
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .metadata-editor-container,

398
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .metadata-editor-container .monaco-editor .margin,

399
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .metadata-editor-container .monaco-editor .monaco-editor-background,

400
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .output-editor-container,

401
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .output-editor-container .monaco-editor .margin,

402
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .output-editor-container .monaco-editor .monaco-editor-background,

403
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .metadata-header-container,

404
.notebook-text-diff-editor .cell-body .cell-diff-editor-container.removed .output-header-container {

405
	background-color: var(--vscode-diffEditor-removedTextBackground);

406
}

407


408
/** Diff cell editor background */

409
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .source-container .monaco-editor .margin,

410
.notebook-text-diff-editor .cell-body .cell-diff-editor-container .source-container .monaco-editor .monaco-editor-background {

411
	background: var(--vscode-notebook-cellEditorBackground, var(--vscode-editor-background));

412
}

413


414
/** Overlay to hide the unchanged cells */

415
.notebook-text-diff-editor .cell-body.full div.diff-hidden-cells {

416
	position: absolute;

417
	left: 0;

418


419
	font-size: 13px;

420
	line-height: 14px;

421
}

422


423
.notebook-text-diff-editor .cell-body.full div.diff-hidden-cells .center {

424
	color: var(--vscode-diffEditor-unchangedRegionForeground);

425
	overflow: hidden;

426
	display: block;

427
	white-space: nowrap;

428


429
	height: 24px;

430
}

431


432
.notebook-text-diff-editor .cell-body.full div.diff-hidden-cells .center span.codicon {

433
	vertical-align: middle;

434
}

435


436
.notebook-text-diff-editor .cell-body.full div.diff-hidden-cells .center a:hover .codicon {

437
	cursor: pointer;

438
}

439


440
/** Overlay to unhide the unchanged cells */

441
.notebook-text-diff-editor .cell-placeholder-body {

442
	background: var(--vscode-diffEditor-unchangedRegionBackground);

443
	color: var(--vscode-diffEditor-unchangedRegionForeground);

444
	min-height: 24px;

445
}

446


447
.notebook-text-diff-editor .cell-placeholder-body div.diff-hidden-cells .center {

448
	overflow: hidden;

449
	display: block;

450
	text-overflow: ellipsis;

451
	white-space: nowrap;

452


453
	height: 24px;

454
}

455


456
.notebook-text-diff-editor .cell-placeholder-body .text {

457
	/** Add a gap between text and the unfold icon */

458
	padding-left: 2px;

459
}

460


461
.notebook-text-diff-editor .cell-placeholder-body div.diff-hidden-cells .center span.codicon,

462
.notebook-text-diff-editor .cell-placeholder-body .text {

463
	vertical-align: middle;

464
}

465


466
.notebook-text-diff-editor .cell-placeholder-body div.diff-hidden-cells .center a:hover .codicon {

467
	cursor: pointer;

468
	color: var(--vscode-editorLink-activeForeground) !important;

469
}

470


471