dockview-react 1.17.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- .dockview-svg {
1
+ .dv-svg {
2
2
  display: inline-block;
3
3
  fill: currentcolor;
4
4
  line-height: 1;
@@ -6,7 +6,6 @@
6
6
  stroke-width: 0;
7
7
  }
8
8
  .dockview-theme-dark {
9
- --dv-background-color: black;
10
9
  --dv-paneview-active-outline-color: dodgerblue;
11
10
  --dv-tabs-and-actions-container-font-size: 13px;
12
11
  --dv-tabs-and-actions-container-height: 35px;
@@ -15,6 +14,7 @@
15
14
  --dv-tabs-container-scrollbar-color: #888;
16
15
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
17
16
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
17
+ --dv-overlay-z-index: 999;
18
18
  --dv-group-view-background-color: #1e1e1e;
19
19
  --dv-tabs-and-actions-container-background-color: #252526;
20
20
  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
@@ -31,7 +31,6 @@
31
31
  }
32
32
 
33
33
  .dockview-theme-light {
34
- --dv-background-color: black;
35
34
  --dv-paneview-active-outline-color: dodgerblue;
36
35
  --dv-tabs-and-actions-container-font-size: 13px;
37
36
  --dv-tabs-and-actions-container-height: 35px;
@@ -40,6 +39,7 @@
40
39
  --dv-tabs-container-scrollbar-color: #888;
41
40
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
42
41
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
42
+ --dv-overlay-z-index: 999;
43
43
  --dv-group-view-background-color: white;
44
44
  --dv-tabs-and-actions-container-background-color: #f3f3f3;
45
45
  --dv-activegroup-visiblepanel-tab-background-color: white;
@@ -56,7 +56,6 @@
56
56
  }
57
57
 
58
58
  .dockview-theme-vs {
59
- --dv-background-color: black;
60
59
  --dv-paneview-active-outline-color: dodgerblue;
61
60
  --dv-tabs-and-actions-container-font-size: 13px;
62
61
  --dv-tabs-and-actions-container-height: 35px;
@@ -65,6 +64,7 @@
65
64
  --dv-tabs-container-scrollbar-color: #888;
66
65
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
67
66
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
67
+ --dv-overlay-z-index: 999;
68
68
  --dv-group-view-background-color: #1e1e1e;
69
69
  --dv-tabs-and-actions-container-background-color: #252526;
70
70
  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
@@ -88,29 +88,28 @@
88
88
  --dv-inactivegroup-visiblepanel-tab-color: white;
89
89
  --dv-inactivegroup-hiddenpanel-tab-color: white;
90
90
  }
91
- .dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {
91
+ .dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {
92
92
  box-sizing: content-box;
93
93
  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
94
94
  }
95
- .dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {
95
+ .dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
96
96
  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
97
97
  }
98
- .dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {
98
+ .dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {
99
99
  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);
100
100
  }
101
- .dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {
101
+ .dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {
102
102
  box-sizing: content-box;
103
103
  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
104
104
  }
105
- .dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {
105
+ .dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
106
106
  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
107
107
  }
108
- .dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {
108
+ .dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {
109
109
  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);
110
110
  }
111
111
 
112
112
  .dockview-theme-abyss {
113
- --dv-background-color: black;
114
113
  --dv-paneview-active-outline-color: dodgerblue;
115
114
  --dv-tabs-and-actions-container-font-size: 13px;
116
115
  --dv-tabs-and-actions-container-height: 35px;
@@ -119,6 +118,7 @@
119
118
  --dv-tabs-container-scrollbar-color: #888;
120
119
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
121
120
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
121
+ --dv-overlay-z-index: 999;
122
122
  --dv-group-view-background-color: #000c18;
123
123
  --dv-tabs-and-actions-container-background-color: #1c1c2a;
124
124
  --dv-activegroup-visiblepanel-tab-background-color: #000c18;
@@ -136,7 +136,6 @@
136
136
  }
137
137
 
138
138
  .dockview-theme-dracula {
139
- --dv-background-color: black;
140
139
  --dv-paneview-active-outline-color: dodgerblue;
141
140
  --dv-tabs-and-actions-container-font-size: 13px;
142
141
  --dv-tabs-and-actions-container-height: 35px;
@@ -145,6 +144,7 @@
145
144
  --dv-tabs-container-scrollbar-color: #888;
146
145
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
147
146
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
147
+ --dv-overlay-z-index: 999;
148
148
  --dv-group-view-background-color: #282a36;
149
149
  --dv-tabs-and-actions-container-background-color: #191a21;
150
150
  --dv-activegroup-visiblepanel-tab-background-color: #282a36;
@@ -160,10 +160,10 @@
160
160
  --dv-paneview-header-border-color: #bd93f9;
161
161
  --dv-paneview-active-outline-color: #6272a4;
162
162
  }
163
- .dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
163
+ .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
164
164
  position: relative;
165
165
  }
166
- .dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {
166
+ .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
167
167
  position: absolute;
168
168
  left: 0px;
169
169
  top: 0px;
@@ -173,10 +173,10 @@
173
173
  background-color: #94527e;
174
174
  z-index: 999;
175
175
  }
176
- .dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
176
+ .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
177
177
  position: relative;
178
178
  }
179
- .dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {
179
+ .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
180
180
  position: absolute;
181
181
  left: 0px;
182
182
  bottom: 0px;
@@ -188,7 +188,6 @@
188
188
  }
189
189
 
190
190
  .dockview-theme-replit {
191
- --dv-background-color: black;
192
191
  --dv-paneview-active-outline-color: dodgerblue;
193
192
  --dv-tabs-and-actions-container-font-size: 13px;
194
193
  --dv-tabs-and-actions-container-height: 35px;
@@ -197,6 +196,7 @@
197
196
  --dv-tabs-container-scrollbar-color: #888;
198
197
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
199
198
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
199
+ --dv-overlay-z-index: 999;
200
200
  --dv-group-view-background-color: #ebeced;
201
201
  --dv-tabs-and-actions-container-background-color: #fcfcfc;
202
202
  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
@@ -210,38 +210,37 @@
210
210
  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
211
211
  --dv-separator-border: transparent;
212
212
  --dv-paneview-header-border-color: rgb(51, 51, 51);
213
- --dv-background-color: #ebeced;
214
213
  --dv-separator-handle-background-color: #cfd1d3;
215
214
  --dv-separator-handle-hover-background-color: #babbbb;
216
215
  }
217
- .dockview-theme-replit .dv-resize-container:has(> .groupview) {
216
+ .dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {
218
217
  border-radius: 8px;
219
218
  }
220
- .dockview-theme-replit .groupview {
219
+ .dockview-theme-replit .dv-groupview {
221
220
  overflow: hidden;
222
221
  border-radius: 10px;
223
222
  }
224
- .dockview-theme-replit .groupview .tabs-and-actions-container {
223
+ .dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {
225
224
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
226
225
  }
227
- .dockview-theme-replit .groupview .tabs-and-actions-container .tab {
226
+ .dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {
228
227
  margin: 4px;
229
228
  border-radius: 8px;
230
229
  }
231
- .dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {
230
+ .dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {
232
231
  height: 8px;
233
232
  width: 8px;
234
233
  }
235
- .dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {
234
+ .dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {
236
235
  background-color: #e4e5e6 !important;
237
236
  }
238
- .dockview-theme-replit .groupview .content-container {
237
+ .dockview-theme-replit .dv-groupview .dv-content-container {
239
238
  background-color: #fcfcfc;
240
239
  }
241
- .dockview-theme-replit .groupview.active-group {
240
+ .dockview-theme-replit .dv-groupview.dv-active-group {
242
241
  border: 1px solid rgba(128, 128, 128, 0.35);
243
242
  }
244
- .dockview-theme-replit .groupview.inactive-group {
243
+ .dockview-theme-replit .dv-groupview.dv-inactive-group {
245
244
  border: 1px solid transparent;
246
245
  }
247
246
  .dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {
@@ -258,7 +257,7 @@
258
257
  .dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {
259
258
  background-color: var(--dv-separator-handle-hover-background-color);
260
259
  }
261
- .dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::after {
260
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {
262
261
  content: "";
263
262
  height: 40px;
264
263
  width: 4px;
@@ -269,13 +268,13 @@
269
268
  background-color: var(--dv-separator-handle-background-color);
270
269
  position: absolute;
271
270
  }
272
- .dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled):hover::after {
271
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
273
272
  background-color: var(--dv-separator-handle-hover-background-color);
274
273
  }
275
- .drop-target {
274
+ .dv-drop-target {
276
275
  position: relative;
277
276
  }
278
- .drop-target > .drop-target-dropzone {
277
+ .dv-drop-target > .dv-drop-target-dropzone {
279
278
  position: absolute;
280
279
  left: 0px;
281
280
  top: 0px;
@@ -284,7 +283,7 @@
284
283
  z-index: 1000;
285
284
  pointer-events: none;
286
285
  }
287
- .drop-target > .drop-target-dropzone > .drop-target-selection {
286
+ .dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {
288
287
  position: relative;
289
288
  box-sizing: border-box;
290
289
  height: 100%;
@@ -294,16 +293,16 @@
294
293
  will-change: transform;
295
294
  pointer-events: none;
296
295
  }
297
- .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
296
+ .dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
298
297
  border-top: 1px solid var(--dv-drag-over-border-color);
299
298
  }
300
- .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
299
+ .dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
301
300
  border-bottom: 1px solid var(--dv-drag-over-border-color);
302
301
  }
303
- .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
302
+ .dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
304
303
  border-left: 1px solid var(--dv-drag-over-border-color);
305
304
  }
306
- .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
305
+ .dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
307
306
  border-right: 1px solid var(--dv-drag-over-border-color);
308
307
  }
309
308
  .dv-dockview {
@@ -322,19 +321,19 @@
322
321
  position: relative;
323
322
  }
324
323
 
325
- .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
324
+ .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
326
325
  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
327
326
  color: var(--dv-activegroup-visiblepanel-tab-color);
328
327
  }
329
- .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
328
+ .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
330
329
  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
331
330
  color: var(--dv-activegroup-hiddenpanel-tab-color);
332
331
  }
333
- .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
332
+ .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
334
333
  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
335
334
  color: var(--dv-inactivegroup-visiblepanel-tab-color);
336
335
  }
337
- .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
336
+ .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
338
337
  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
339
338
  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
340
339
  }
@@ -343,24 +342,24 @@
343
342
  * when a tab is dragged we lose the above stylings because they are conditional on parent elements
344
343
  * therefore we also set some stylings for the dragging event
345
344
  **/
346
- .tab.dv-tab-dragging {
345
+ .dv-tab.dv-tab-dragging {
347
346
  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
348
347
  color: var(--dv-activegroup-visiblepanel-tab-color);
349
348
  }
350
- .groupview {
349
+ .dv-groupview {
351
350
  display: flex;
352
351
  flex-direction: column;
353
352
  height: 100%;
354
353
  background-color: var(--dv-group-view-background-color);
355
354
  overflow: hidden;
356
355
  }
357
- .groupview:focus {
356
+ .dv-groupview:focus {
358
357
  outline: none;
359
358
  }
360
- .groupview.empty > .tabs-and-actions-container {
359
+ .dv-groupview.dv-empty > .dv-tabs-and-actions-container {
361
360
  display: none;
362
361
  }
363
- .groupview > .content-container {
362
+ .dv-groupview > .dv-content-container {
364
363
  flex-grow: 1;
365
364
  min-height: 0;
366
365
  outline: none;
@@ -369,8 +368,8 @@
369
368
  height: 100%;
370
369
  width: 100%;
371
370
  }
372
- .grid-view,
373
- .branch-node {
371
+ .dv-grid-view,
372
+ .dv-branch-node {
374
373
  height: 100%;
375
374
  width: 100%;
376
375
  }
@@ -394,8 +393,9 @@
394
393
  }
395
394
 
396
395
  .dv-resize-container {
396
+ --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
397
397
  position: absolute;
398
- z-index: 997;
398
+ z-index: calc(var(--dv-overlay-z-index) - 2);
399
399
  border: 1px solid var(--dv-tab-divider-color);
400
400
  box-shadow: var(--dv-floating-box-shadow);
401
401
  }
@@ -407,7 +407,7 @@
407
407
  width: calc(100% - 8px);
408
408
  left: 4px;
409
409
  top: -2px;
410
- z-index: 999;
410
+ z-index: var(--dv-overlay-z-index);
411
411
  position: absolute;
412
412
  cursor: ns-resize;
413
413
  }
@@ -416,7 +416,7 @@
416
416
  width: calc(100% - 8px);
417
417
  left: 4px;
418
418
  bottom: -2px;
419
- z-index: 999;
419
+ z-index: var(--dv-overlay-z-index);
420
420
  position: absolute;
421
421
  cursor: ns-resize;
422
422
  }
@@ -425,7 +425,7 @@
425
425
  width: 4px;
426
426
  left: -2px;
427
427
  top: 4px;
428
- z-index: 999;
428
+ z-index: var(--dv-overlay-z-index);
429
429
  position: absolute;
430
430
  cursor: ew-resize;
431
431
  }
@@ -434,7 +434,7 @@
434
434
  width: 4px;
435
435
  right: -2px;
436
436
  top: 4px;
437
- z-index: 999;
437
+ z-index: var(--dv-overlay-z-index);
438
438
  position: absolute;
439
439
  cursor: ew-resize;
440
440
  }
@@ -443,7 +443,7 @@
443
443
  width: 4px;
444
444
  top: -2px;
445
445
  left: -2px;
446
- z-index: 999;
446
+ z-index: var(--dv-overlay-z-index);
447
447
  position: absolute;
448
448
  cursor: nw-resize;
449
449
  }
@@ -452,7 +452,7 @@
452
452
  width: 4px;
453
453
  right: -2px;
454
454
  top: -2px;
455
- z-index: 999;
455
+ z-index: var(--dv-overlay-z-index);
456
456
  position: absolute;
457
457
  cursor: ne-resize;
458
458
  }
@@ -461,7 +461,7 @@
461
461
  width: 4px;
462
462
  left: -2px;
463
463
  bottom: -2px;
464
- z-index: 999;
464
+ z-index: var(--dv-overlay-z-index);
465
465
  position: absolute;
466
466
  cursor: sw-resize;
467
467
  }
@@ -470,77 +470,79 @@
470
470
  width: 4px;
471
471
  right: -2px;
472
472
  bottom: -2px;
473
- z-index: 999;
473
+ z-index: var(--dv-overlay-z-index);
474
474
  position: absolute;
475
475
  cursor: se-resize;
476
476
  }
477
477
  .dv-render-overlay {
478
+ --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
478
479
  position: absolute;
479
480
  z-index: 1;
480
481
  height: 100%;
481
482
  }
482
483
  .dv-render-overlay.dv-render-overlay-float {
483
- z-index: 998;
484
+ z-index: calc(var(--dv-overlay-z-index) - 1);
484
485
  }
486
+
485
487
  .dv-debug .dv-render-overlay {
486
488
  outline: 1px solid red;
487
489
  outline-offset: -1;
488
490
  }
489
- .pane-container {
491
+ .dv-pane-container {
490
492
  height: 100%;
491
493
  width: 100%;
492
494
  }
493
- .pane-container.animated .view {
495
+ .dv-pane-container.dv-animated .dv-view {
494
496
  transition-duration: 0.15s;
495
497
  transition-timing-function: ease-out;
496
498
  }
497
- .pane-container .view {
499
+ .dv-pane-container .dv-view {
498
500
  overflow: hidden;
499
501
  display: flex;
500
502
  flex-direction: column;
501
503
  padding: 0px !important;
502
504
  }
503
- .pane-container .view:not(:first-child)::before {
505
+ .dv-pane-container .dv-view:not(:first-child)::before {
504
506
  background-color: transparent !important;
505
507
  }
506
- .pane-container .view:not(:first-child) .pane > .pane-header {
508
+ .dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {
507
509
  border-top: 1px solid var(--dv-paneview-header-border-color);
508
510
  }
509
- .pane-container .view .default-header {
511
+ .dv-pane-container .dv-view .dv-default-header {
510
512
  background-color: var(--dv-group-view-background-color);
511
513
  color: var(--dv-activegroup-visiblepanel-tab-color);
512
514
  display: flex;
513
515
  padding: 0px 8px;
514
516
  cursor: pointer;
515
517
  }
516
- .pane-container .view .default-header .dockview-pane-header-icon {
518
+ .dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {
517
519
  display: flex;
518
520
  justify-content: center;
519
521
  align-items: center;
520
522
  }
521
- .pane-container .view .default-header > span {
523
+ .dv-pane-container .dv-view .dv-default-header > span {
522
524
  padding-left: 8px;
523
525
  flex-grow: 1;
524
526
  }
525
- .pane-container:first-of-type > .pane > .pane-header {
527
+ .dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {
526
528
  border-top: none !important;
527
529
  }
528
- .pane-container .pane {
530
+ .dv-pane-container .dv-pane {
529
531
  display: flex;
530
532
  flex-direction: column;
531
533
  overflow: hidden;
532
534
  height: 100%;
533
535
  }
534
- .pane-container .pane .pane-header {
536
+ .dv-pane-container .dv-pane .dv-pane-header {
535
537
  box-sizing: border-box;
536
538
  user-select: none;
537
539
  position: relative;
538
540
  outline: none;
539
541
  }
540
- .pane-container .pane .pane-header.pane-draggable {
542
+ .dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {
541
543
  cursor: pointer;
542
544
  }
543
- .pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {
545
+ .dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {
544
546
  position: absolute;
545
547
  top: 0;
546
548
  left: 0;
@@ -555,14 +557,14 @@
555
557
  outline-offset: -1px;
556
558
  outline-color: var(--dv-paneview-active-outline-color);
557
559
  }
558
- .pane-container .pane .pane-body {
560
+ .dv-pane-container .dv-pane .dv-pane-body {
559
561
  overflow-y: auto;
560
562
  overflow-x: hidden;
561
563
  flex-grow: 1;
562
564
  position: relative;
563
565
  outline: none;
564
566
  }
565
- .pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {
567
+ .dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {
566
568
  position: absolute;
567
569
  top: 0;
568
570
  left: 0;
@@ -577,88 +579,88 @@
577
579
  outline-offset: -1px;
578
580
  outline-color: var(--dv-paneview-active-outline-color);
579
581
  }
580
- .dv-debug .split-view-container .sash-container .sash.enabled {
582
+ .dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {
581
583
  background-color: black;
582
584
  }
583
- .dv-debug .split-view-container .sash-container .sash.disabled {
585
+ .dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {
584
586
  background-color: orange;
585
587
  }
586
- .dv-debug .split-view-container .sash-container .sash.maximum {
588
+ .dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {
587
589
  background-color: green;
588
590
  }
589
- .dv-debug .split-view-container .sash-container .sash.minimum {
591
+ .dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {
590
592
  background-color: red;
591
593
  }
592
594
 
593
- .split-view-container {
595
+ .dv-split-view-container {
594
596
  position: relative;
595
597
  overflow: hidden;
596
598
  height: 100%;
597
599
  width: 100%;
598
600
  }
599
- .split-view-container.dv-splitview-disabled > .sash-container > .sash {
601
+ .dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {
600
602
  pointer-events: none;
601
603
  }
602
- .split-view-container.animation .view,
603
- .split-view-container.animation .sash {
604
+ .dv-split-view-container.dv-animation .dv-view,
605
+ .dv-split-view-container.dv-animation .dv-sash {
604
606
  transition-duration: 0.15s;
605
607
  transition-timing-function: ease-out;
606
608
  }
607
- .split-view-container.horizontal {
609
+ .dv-split-view-container.dv-horizontal {
608
610
  height: 100%;
609
611
  }
610
- .split-view-container.horizontal > .sash-container > .sash {
612
+ .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {
611
613
  height: 100%;
612
614
  width: 4px;
613
615
  }
614
- .split-view-container.horizontal > .sash-container > .sash.enabled {
616
+ .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {
615
617
  cursor: ew-resize;
616
618
  }
617
- .split-view-container.horizontal > .sash-container > .sash.disabled {
619
+ .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {
618
620
  cursor: default;
619
621
  }
620
- .split-view-container.horizontal > .sash-container > .sash.maximum {
622
+ .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {
621
623
  cursor: w-resize;
622
624
  }
623
- .split-view-container.horizontal > .sash-container > .sash.minimum {
625
+ .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {
624
626
  cursor: e-resize;
625
627
  }
626
- .split-view-container.horizontal > .view-container > .view:not(:first-child)::before {
628
+ .dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {
627
629
  height: 100%;
628
630
  width: 1px;
629
631
  }
630
- .split-view-container.vertical {
632
+ .dv-split-view-container.dv-vertical {
631
633
  width: 100%;
632
634
  }
633
- .split-view-container.vertical > .sash-container > .sash {
635
+ .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {
634
636
  width: 100%;
635
637
  height: 4px;
636
638
  }
637
- .split-view-container.vertical > .sash-container > .sash.enabled {
639
+ .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {
638
640
  cursor: ns-resize;
639
641
  }
640
- .split-view-container.vertical > .sash-container > .sash.disabled {
642
+ .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {
641
643
  cursor: default;
642
644
  }
643
- .split-view-container.vertical > .sash-container > .sash.maximum {
645
+ .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {
644
646
  cursor: n-resize;
645
647
  }
646
- .split-view-container.vertical > .sash-container > .sash.minimum {
648
+ .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {
647
649
  cursor: s-resize;
648
650
  }
649
- .split-view-container.vertical > .view-container > .view {
651
+ .dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {
650
652
  width: 100%;
651
653
  }
652
- .split-view-container.vertical > .view-container > .view:not(:first-child)::before {
654
+ .dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {
653
655
  height: 1px;
654
656
  width: 100%;
655
657
  }
656
- .split-view-container .sash-container {
658
+ .dv-split-view-container .dv-sash-container {
657
659
  height: 100%;
658
660
  width: 100%;
659
661
  position: absolute;
660
662
  }
661
- .split-view-container .sash-container .sash {
663
+ .dv-split-view-container .dv-sash-container .dv-sash {
662
664
  position: absolute;
663
665
  z-index: 99;
664
666
  outline: none;
@@ -668,28 +670,27 @@
668
670
  -ms-user-select: none;
669
671
  touch-action: none;
670
672
  }
671
- .split-view-container .sash-container .sash:not(.disabled):active {
673
+ .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active {
672
674
  transition: background-color 0.1s ease-in-out;
673
675
  background-color: var(--dv-active-sash-color, transparent);
674
676
  }
675
- .split-view-container .sash-container .sash:not(.disabled):hover {
677
+ .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {
676
678
  background-color: var(--dv-active-sash-color, transparent);
677
679
  transition: background-color 0.1s ease-in-out;
678
680
  transition-delay: 0.5s;
679
681
  }
680
- .split-view-container .view-container {
682
+ .dv-split-view-container .dv-view-container {
681
683
  position: relative;
682
684
  height: 100%;
683
685
  width: 100%;
684
- background-color: var(--dv-background-color);
685
686
  }
686
- .split-view-container .view-container .view {
687
+ .dv-split-view-container .dv-view-container .dv-view {
687
688
  height: 100%;
688
689
  box-sizing: border-box;
689
690
  overflow: auto;
690
691
  position: absolute;
691
692
  }
692
- .split-view-container.separator-border .view:not(:first-child)::before {
693
+ .dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {
693
694
  content: " ";
694
695
  position: absolute;
695
696
  top: 0;
@@ -702,13 +703,13 @@
702
703
  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
703
704
  }
704
705
 
705
- .tab {
706
+ .dv-tab {
706
707
  flex-shrink: 0;
707
708
  }
708
- .tab:focus-within, .tab:focus {
709
+ .dv-tab:focus-within, .dv-tab:focus {
709
710
  position: relative;
710
711
  }
711
- .tab:focus-within::after, .tab:focus::after {
712
+ .dv-tab:focus-within::after, .dv-tab:focus::after {
712
713
  position: absolute;
713
714
  content: "";
714
715
  height: 100%;
@@ -720,19 +721,19 @@
720
721
  outline-offset: -1px;
721
722
  z-index: 5;
722
723
  }
723
- .tab.dv-tab-dragging .dv-default-tab-action {
724
+ .dv-tab.dv-tab-dragging .dv-default-tab-action {
724
725
  background-color: var(--dv-activegroup-visiblepanel-tab-color);
725
726
  }
726
- .tab.active-tab .dv-default-tab .dv-default-tab-action {
727
+ .dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {
727
728
  visibility: visible;
728
729
  }
729
- .tab.inactive-tab .dv-default-tab .dv-default-tab-action {
730
+ .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
730
731
  visibility: hidden;
731
732
  }
732
- .tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {
733
+ .dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
733
734
  visibility: visible;
734
735
  }
735
- .tab .dv-default-tab {
736
+ .dv-tab .dv-default-tab {
736
737
  position: relative;
737
738
  height: 100%;
738
739
  display: flex;
@@ -742,22 +743,22 @@
742
743
  white-space: nowrap;
743
744
  text-overflow: ellipsis;
744
745
  }
745
- .tab .dv-default-tab .dv-default-tab-content {
746
+ .dv-tab .dv-default-tab .dv-default-tab-content {
746
747
  padding: 0px 8px;
747
748
  flex-grow: 1;
748
749
  }
749
- .tab .dv-default-tab .dv-default-tab-action {
750
+ .dv-tab .dv-default-tab .dv-default-tab-action {
750
751
  padding: 4px;
751
752
  display: flex;
752
753
  align-items: center;
753
754
  justify-content: center;
754
755
  box-sizing: border-box;
755
756
  }
756
- .tab .dv-default-tab .dv-default-tab-action:hover {
757
+ .dv-tab .dv-default-tab .dv-default-tab-action:hover {
757
758
  border-radius: 2px;
758
759
  background-color: var(--dv-icon-hover-background-color);
759
760
  }
760
- .tabs-and-actions-container {
761
+ .dv-tabs-and-actions-container {
761
762
  display: flex;
762
763
  background-color: var(--dv-tabs-and-actions-container-background-color);
763
764
  flex-shrink: 0;
@@ -765,24 +766,21 @@
765
766
  height: var(--dv-tabs-and-actions-container-height);
766
767
  font-size: var(--dv-tabs-and-actions-container-font-size);
767
768
  }
768
- .tabs-and-actions-container.hidden {
769
- display: none;
770
- }
771
- .tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {
769
+ .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {
772
770
  flex-grow: 1;
773
771
  }
774
- .tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {
772
+ .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {
775
773
  flex-grow: 1;
776
774
  }
777
- .tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {
775
+ .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {
778
776
  flex-grow: 0;
779
777
  }
780
- .tabs-and-actions-container .void-container {
778
+ .dv-tabs-and-actions-container .dv-void-container {
781
779
  display: flex;
782
780
  flex-grow: 1;
783
781
  cursor: grab;
784
782
  }
785
- .tabs-and-actions-container .tabs-container {
783
+ .dv-tabs-and-actions-container .dv-tabs-container {
786
784
  display: flex;
787
785
  overflow-x: overlay;
788
786
  overflow-y: hidden;
@@ -790,16 +788,16 @@
790
788
  /* Track */
791
789
  /* Handle */
792
790
  }
793
- .tabs-and-actions-container .tabs-container::-webkit-scrollbar {
791
+ .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {
794
792
  height: 3px;
795
793
  }
796
- .tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {
794
+ .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {
797
795
  background: transparent;
798
796
  }
799
- .tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {
797
+ .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {
800
798
  background: var(--dv-tabs-container-scrollbar-color);
801
799
  }
802
- .tabs-and-actions-container .tabs-container .tab {
800
+ .dv-tabs-and-actions-container .dv-tabs-container .dv-tab {
803
801
  -webkit-user-drag: element;
804
802
  outline: none;
805
803
  min-width: 75px;
@@ -807,7 +805,7 @@
807
805
  position: relative;
808
806
  box-sizing: border-box;
809
807
  }
810
- .tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {
808
+ .dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {
811
809
  content: " ";
812
810
  position: absolute;
813
811
  top: 0;
@@ -818,27 +816,27 @@
818
816
  width: 1px;
819
817
  height: 100%;
820
818
  }
821
- .watermark {
819
+ .dv-watermark {
822
820
  display: flex;
823
821
  width: 100%;
824
822
  }
825
- .watermark.has-actions .watermark-title .actions-container {
823
+ .dv-watermark.dv-has-actions .dv-watermark-title .dv-actions-container {
826
824
  display: none;
827
825
  }
828
- .watermark .watermark-title {
826
+ .dv-watermark .dv-watermark-title {
829
827
  height: 35px;
830
828
  width: 100%;
831
829
  display: flex;
832
830
  }
833
- .watermark .watermark-content {
831
+ .dv-watermark .dv-watermark-content {
834
832
  flex-grow: 1;
835
833
  }
836
- .watermark .actions-container {
834
+ .dv-watermark .dv-actions-container {
837
835
  display: flex;
838
836
  align-items: center;
839
837
  padding: 0px 8px;
840
838
  }
841
- .watermark .actions-container .close-action {
839
+ .dv-watermark .dv-actions-container .dv-close-action {
842
840
  padding: 4px;
843
841
  display: flex;
844
842
  align-items: center;
@@ -847,7 +845,7 @@
847
845
  cursor: pointer;
848
846
  color: var(--dv-activegroup-hiddenpanel-tab-color);
849
847
  }
850
- .watermark .actions-container .close-action:hover {
848
+ .dv-watermark .dv-actions-container .dv-close-action:hover {
851
849
  border-radius: 2px;
852
850
  background-color: var(--dv-icon-hover-background-color);
853
851
  }