dockview-react 3.2.0 → 4.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,3 +1,22 @@
1
+ .dv-scrollable {
2
+ position: relative;
3
+ overflow: hidden;
4
+ }
5
+ .dv-scrollable .dv-scrollbar-horizontal {
6
+ position: absolute;
7
+ bottom: 0px;
8
+ left: 0px;
9
+ height: 4px;
10
+ border-radius: 2px;
11
+ background-color: transparent;
12
+ transition-property: background-color;
13
+ transition-timing-function: ease-in-out;
14
+ transition-duration: 1s;
15
+ transition-delay: 0s;
16
+ }
17
+ .dv-scrollable:hover .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {
18
+ background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));
19
+ }
1
20
  .dv-svg {
2
21
  display: inline-block;
3
22
  fill: currentcolor;
@@ -10,11 +29,16 @@
10
29
  --dv-tabs-and-actions-container-font-size: 13px;
11
30
  --dv-tabs-and-actions-container-height: 35px;
12
31
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
13
- --dv-drag-over-border-color: white;
32
+ --dv-drag-over-border-color: transparent;
14
33
  --dv-tabs-container-scrollbar-color: #888;
15
34
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
16
35
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
17
36
  --dv-overlay-z-index: 999;
37
+ --dv-tab-font-size: inherit;
38
+ --dv-border-radius: 0px;
39
+ --dv-tab-margin: 0;
40
+ --dv-sash-color: transparent;
41
+ --dv-active-sash-color: transparent;
18
42
  --dv-active-sash-transition-duration: 0.1s;
19
43
  --dv-active-sash-transition-delay: 0.5s;
20
44
  --dv-group-view-background-color: #1e1e1e;
@@ -31,17 +55,26 @@
31
55
  --dv-separator-border: rgb(68, 68, 68);
32
56
  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
33
57
  }
58
+ .dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
59
+ opacity: 0;
60
+ transition: none;
61
+ }
34
62
 
35
63
  .dockview-theme-light {
36
64
  --dv-paneview-active-outline-color: dodgerblue;
37
65
  --dv-tabs-and-actions-container-font-size: 13px;
38
66
  --dv-tabs-and-actions-container-height: 35px;
39
67
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
40
- --dv-drag-over-border-color: white;
68
+ --dv-drag-over-border-color: transparent;
41
69
  --dv-tabs-container-scrollbar-color: #888;
42
70
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
43
71
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
44
72
  --dv-overlay-z-index: 999;
73
+ --dv-tab-font-size: inherit;
74
+ --dv-border-radius: 0px;
75
+ --dv-tab-margin: 0;
76
+ --dv-sash-color: transparent;
77
+ --dv-active-sash-color: transparent;
45
78
  --dv-active-sash-transition-duration: 0.1s;
46
79
  --dv-active-sash-transition-delay: 0.5s;
47
80
  --dv-group-view-background-color: white;
@@ -57,6 +90,11 @@
57
90
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);
58
91
  --dv-separator-border: rgba(128, 128, 128, 0.35);
59
92
  --dv-paneview-header-border-color: rgb(51, 51, 51);
93
+ --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);
94
+ }
95
+ .dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
96
+ opacity: 0;
97
+ transition: none;
60
98
  }
61
99
 
62
100
  .dockview-theme-vs {
@@ -64,11 +102,16 @@
64
102
  --dv-tabs-and-actions-container-font-size: 13px;
65
103
  --dv-tabs-and-actions-container-height: 35px;
66
104
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
67
- --dv-drag-over-border-color: white;
105
+ --dv-drag-over-border-color: transparent;
68
106
  --dv-tabs-container-scrollbar-color: #888;
69
107
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
70
108
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
71
109
  --dv-overlay-z-index: 999;
110
+ --dv-tab-font-size: inherit;
111
+ --dv-border-radius: 0px;
112
+ --dv-tab-margin: 0;
113
+ --dv-sash-color: transparent;
114
+ --dv-active-sash-color: transparent;
72
115
  --dv-active-sash-transition-duration: 0.1s;
73
116
  --dv-active-sash-transition-delay: 0.5s;
74
117
  --dv-group-view-background-color: #1e1e1e;
@@ -94,6 +137,10 @@
94
137
  --dv-inactivegroup-visiblepanel-tab-color: white;
95
138
  --dv-inactivegroup-hiddenpanel-tab-color: white;
96
139
  }
140
+ .dockview-theme-vs .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
141
+ opacity: 0;
142
+ transition: none;
143
+ }
97
144
  .dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {
98
145
  box-sizing: content-box;
99
146
  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
@@ -120,39 +167,66 @@
120
167
  --dv-tabs-and-actions-container-font-size: 13px;
121
168
  --dv-tabs-and-actions-container-height: 35px;
122
169
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
123
- --dv-drag-over-border-color: white;
170
+ --dv-drag-over-border-color: transparent;
124
171
  --dv-tabs-container-scrollbar-color: #888;
125
172
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
126
173
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
127
174
  --dv-overlay-z-index: 999;
175
+ --dv-tab-font-size: inherit;
176
+ --dv-border-radius: 0px;
177
+ --dv-tab-margin: 0;
178
+ --dv-sash-color: transparent;
179
+ --dv-active-sash-color: transparent;
128
180
  --dv-active-sash-transition-duration: 0.1s;
129
181
  --dv-active-sash-transition-delay: 0.5s;
130
- --dv-group-view-background-color: #000c18;
131
- --dv-tabs-and-actions-container-background-color: #1c1c2a;
132
- --dv-activegroup-visiblepanel-tab-background-color: #000c18;
133
- --dv-activegroup-hiddenpanel-tab-background-color: #10192c;
134
- --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;
135
- --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;
136
- --dv-tab-divider-color: #2b2b4a;
182
+ --dv-color-abyss-dark: #000c18;
183
+ --dv-color-abyss: #10192c;
184
+ --dv-color-abyss-light: #1c1c2a;
185
+ --dv-color-abyss-lighter: #2b2b4a;
186
+ --dv-color-abyss-accent: rgb(91, 30, 207);
187
+ --dv-color-abyss-primary-text: white;
188
+ --dv-color-abyss-secondary-text: rgb(148, 151, 169);
189
+ --dv-group-view-background-color: var(--dv-color-abyss-dark);
190
+ --dv-tabs-and-actions-container-background-color: var(
191
+ --dv-color-abyss-light
192
+ );
193
+ --dv-activegroup-visiblepanel-tab-background-color: var(
194
+ --dv-color-abyss-dark
195
+ );
196
+ --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);
197
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(
198
+ --dv-color-abyss-dark
199
+ );
200
+ --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);
201
+ --dv-tab-divider-color: var(--dv-color-abyss-lighter);
137
202
  --dv-activegroup-visiblepanel-tab-color: white;
138
203
  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);
139
204
  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);
140
205
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);
141
- --dv-separator-border: #2b2b4a;
142
- --dv-paneview-header-border-color: #2b2b4a;
206
+ --dv-separator-border: var(--dv-color-abyss-lighter);
207
+ --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);
143
208
  --dv-paneview-active-outline-color: #596f99;
144
209
  }
210
+ .dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
211
+ opacity: 0;
212
+ transition: none;
213
+ }
145
214
 
146
215
  .dockview-theme-dracula {
147
216
  --dv-paneview-active-outline-color: dodgerblue;
148
217
  --dv-tabs-and-actions-container-font-size: 13px;
149
218
  --dv-tabs-and-actions-container-height: 35px;
150
219
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
151
- --dv-drag-over-border-color: white;
220
+ --dv-drag-over-border-color: transparent;
152
221
  --dv-tabs-container-scrollbar-color: #888;
153
222
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
154
223
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
155
224
  --dv-overlay-z-index: 999;
225
+ --dv-tab-font-size: inherit;
226
+ --dv-border-radius: 0px;
227
+ --dv-tab-margin: 0;
228
+ --dv-sash-color: transparent;
229
+ --dv-active-sash-color: transparent;
156
230
  --dv-active-sash-transition-duration: 0.1s;
157
231
  --dv-active-sash-transition-delay: 0.5s;
158
232
  --dv-group-view-background-color: #282a36;
@@ -170,10 +244,14 @@
170
244
  --dv-paneview-header-border-color: #bd93f9;
171
245
  --dv-paneview-active-outline-color: #6272a4;
172
246
  }
173
- .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
247
+ .dockview-theme-dracula .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
248
+ opacity: 0;
249
+ transition: none;
250
+ }
251
+ .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
174
252
  position: relative;
175
253
  }
176
- .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
254
+ .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
177
255
  position: absolute;
178
256
  left: 0px;
179
257
  top: 0px;
@@ -183,10 +261,10 @@
183
261
  background-color: #94527e;
184
262
  z-index: 999;
185
263
  }
186
- .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
264
+ .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
187
265
  position: relative;
188
266
  }
189
- .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
267
+ .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
190
268
  position: absolute;
191
269
  left: 0px;
192
270
  bottom: 0px;
@@ -202,13 +280,20 @@
202
280
  --dv-tabs-and-actions-container-font-size: 13px;
203
281
  --dv-tabs-and-actions-container-height: 35px;
204
282
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
205
- --dv-drag-over-border-color: white;
283
+ --dv-drag-over-border-color: transparent;
206
284
  --dv-tabs-container-scrollbar-color: #888;
207
285
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
208
286
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
209
287
  --dv-overlay-z-index: 999;
288
+ --dv-tab-font-size: inherit;
289
+ --dv-border-radius: 0px;
290
+ --dv-tab-margin: 0;
291
+ --dv-sash-color: transparent;
292
+ --dv-active-sash-color: transparent;
210
293
  --dv-active-sash-transition-duration: 0.1s;
211
294
  --dv-active-sash-transition-delay: 0.5s;
295
+ padding: 10px;
296
+ background-color: #ebeced;
212
297
  --dv-group-view-background-color: #ebeced;
213
298
  --dv-tabs-and-actions-container-background-color: #fcfcfc;
214
299
  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
@@ -222,12 +307,20 @@
222
307
  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
223
308
  --dv-separator-border: transparent;
224
309
  --dv-paneview-header-border-color: rgb(51, 51, 51);
225
- --dv-separator-handle-background-color: #cfd1d3;
226
- --dv-separator-handle-hover-background-color: #babbbb;
310
+ --dv-sash-color: #cfd1d3;
311
+ --dv-active-sash-color: #babbbb;
312
+ }
313
+ .dockview-theme-replit .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
314
+ opacity: 0;
315
+ transition: none;
227
316
  }
228
317
  .dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {
229
318
  border-radius: 8px;
230
319
  }
320
+ .dockview-theme-replit .dv-resize-container {
321
+ border-radius: 10px !important;
322
+ border: none;
323
+ }
231
324
  .dockview-theme-replit .dv-groupview {
232
325
  overflow: hidden;
233
326
  border-radius: 10px;
@@ -255,6 +348,9 @@
255
348
  .dockview-theme-replit .dv-groupview.dv-inactive-group {
256
349
  border: 1px solid transparent;
257
350
  }
351
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash {
352
+ background-color: transparent;
353
+ }
258
354
  .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {
259
355
  content: "";
260
356
  height: 4px;
@@ -263,11 +359,17 @@
263
359
  top: 50%;
264
360
  left: 50%;
265
361
  transform: translate(-50%, -50%);
266
- background-color: var(--dv-separator-handle-background-color);
362
+ background-color: var(--dv-sash-color);
267
363
  position: absolute;
268
364
  }
269
- .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
270
- background-color: var(--dv-separator-handle-hover-background-color);
365
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active {
366
+ background-color: transparent;
367
+ }
368
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active::after {
369
+ background-color: var(--dv-active-sash-color);
370
+ }
371
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash {
372
+ background-color: transparent;
271
373
  }
272
374
  .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {
273
375
  content: "";
@@ -277,14 +379,224 @@
277
379
  top: 50%;
278
380
  left: 50%;
279
381
  transform: translate(-50%, -50%);
280
- background-color: var(--dv-separator-handle-background-color);
382
+ background-color: var(--dv-sash-color);
281
383
  position: absolute;
282
384
  }
283
- .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
284
- background-color: var(--dv-separator-handle-hover-background-color);
385
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active {
386
+ background-color: transparent;
387
+ }
388
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active::after {
389
+ background-color: var(--dv-active-sash-color);
390
+ }
391
+
392
+ .dockview-theme-abyss-spaced {
393
+ --dv-paneview-active-outline-color: dodgerblue;
394
+ --dv-tabs-and-actions-container-font-size: 13px;
395
+ --dv-tabs-and-actions-container-height: 35px;
396
+ --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
397
+ --dv-drag-over-border-color: transparent;
398
+ --dv-tabs-container-scrollbar-color: #888;
399
+ --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
400
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
401
+ --dv-overlay-z-index: 999;
402
+ --dv-tab-font-size: inherit;
403
+ --dv-border-radius: 0px;
404
+ --dv-tab-margin: 0;
405
+ --dv-sash-color: transparent;
406
+ --dv-active-sash-color: transparent;
407
+ --dv-active-sash-transition-duration: 0.1s;
408
+ --dv-active-sash-transition-delay: 0.5s;
409
+ --dv-tab-font-size: 12px;
410
+ --dv-border-radius: 20px;
411
+ --dv-tab-margin: 0.5rem 0.25rem;
412
+ --dv-tabs-and-actions-container-height: 44px;
413
+ --dv-border-radius: 20px;
414
+ --dv-color-abyss-dark: rgb(11, 6, 17);
415
+ --dv-color-abyss: #16121f;
416
+ --dv-color-abyss-light: #201d2b;
417
+ --dv-color-abyss-lighter: #2a2837;
418
+ --dv-color-abyss-accent: rgb(91, 30, 207);
419
+ --dv-color-abyss-primary-text: white;
420
+ --dv-color-abyss-secondary-text: rgb(148, 151, 169);
421
+ --dv-drag-over-border: 2px solid var(--dv-color-abyss-accent);
422
+ --dv-drag-over-background-color: "";
423
+ --dv-group-view-background-color: var(--dv-color-abyss-dark);
424
+ --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);
425
+ --dv-activegroup-visiblepanel-tab-background-color: var(
426
+ --dv-color-abyss-lighter
427
+ );
428
+ --dv-activegroup-hiddenpanel-tab-background-color: var(
429
+ --dv-color-abyss-light
430
+ );
431
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(
432
+ --dv-color-abyss-lighter
433
+ );
434
+ --dv-inactivegroup-hiddenpanel-tab-background-color: var(
435
+ --dv-color-abyss-light
436
+ );
437
+ --dv-tab-divider-color: transparent;
438
+ --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);
439
+ --dv-activegroup-hiddenpanel-tab-color: var(
440
+ --dv-color-abyss-secondary-text
441
+ );
442
+ --dv-inactivegroup-visiblepanel-tab-color: var(
443
+ --dv-color-abyss-primary-text
444
+ );
445
+ --dv-inactivegroup-hiddenpanel-tab-color: var(
446
+ --dv-color-abyss-secondary-text
447
+ );
448
+ --dv-separator-border: transparent;
449
+ --dv-paneview-header-border-color: rgb(51, 51, 51);
450
+ --dv-active-sash-color: var(--dv-color-abyss-accent);
451
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.5);
452
+ padding: 10px;
453
+ background-color: var(--dv-color-abyss-dark);
454
+ }
455
+ .dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {
456
+ border-radius: 8px;
457
+ }
458
+ .dockview-theme-abyss-spaced .dv-sash {
459
+ border-radius: 4px;
460
+ }
461
+ .dockview-theme-abyss-spaced .dv-drop-target-anchor {
462
+ border-radius: calc(var(--dv-border-radius) / 4);
463
+ }
464
+ .dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {
465
+ border-radius: var(--dv-border-radius);
466
+ }
467
+ .dockview-theme-abyss-spaced .dv-resize-container {
468
+ border-radius: var(--dv-border-radius) !important;
469
+ border: none;
470
+ }
471
+ .dockview-theme-abyss-spaced .dv-tabs-overflow-container,
472
+ .dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {
473
+ border-radius: 8px;
474
+ height: unset !important;
475
+ }
476
+ .dockview-theme-abyss-spaced .dv-tab {
477
+ border-radius: 8px;
478
+ }
479
+ .dockview-theme-abyss-spaced .dv-tab .dv-svg {
480
+ height: 8px;
481
+ width: 8px;
482
+ }
483
+ .dockview-theme-abyss-spaced .dv-groupview {
484
+ border-radius: var(--dv-border-radius);
485
+ }
486
+ .dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {
487
+ padding: 0px calc(var(--dv-border-radius) / 2);
488
+ }
489
+ .dockview-theme-abyss-spaced .dv-groupview .dv-content-container {
490
+ background-color: var(--dv-tabs-and-actions-container-background-color);
491
+ }
492
+ .dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {
493
+ border: 2px solid var(--dv-color-abyss-dark);
494
+ }
495
+
496
+ .dockview-theme-light-spaced {
497
+ --dv-paneview-active-outline-color: dodgerblue;
498
+ --dv-tabs-and-actions-container-font-size: 13px;
499
+ --dv-tabs-and-actions-container-height: 35px;
500
+ --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
501
+ --dv-drag-over-border-color: transparent;
502
+ --dv-tabs-container-scrollbar-color: #888;
503
+ --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
504
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
505
+ --dv-overlay-z-index: 999;
506
+ --dv-tab-font-size: inherit;
507
+ --dv-border-radius: 0px;
508
+ --dv-tab-margin: 0;
509
+ --dv-sash-color: transparent;
510
+ --dv-active-sash-color: transparent;
511
+ --dv-active-sash-transition-duration: 0.1s;
512
+ --dv-active-sash-transition-delay: 0.5s;
513
+ --dv-tab-font-size: 12px;
514
+ --dv-border-radius: 20px;
515
+ --dv-tab-margin: 0.5rem 0.25rem;
516
+ --dv-tabs-and-actions-container-height: 44px;
517
+ --dv-border-radius: 20px;
518
+ --dv-drag-over-border: 2px solid rgb(91, 30, 207);
519
+ --dv-drag-over-background-color: "";
520
+ --dv-group-view-background-color: #f6f5f9;
521
+ --dv-tabs-and-actions-container-background-color: white;
522
+ --dv-activegroup-visiblepanel-tab-background-color: #ededf0;
523
+ --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;
524
+ --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;
525
+ --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;
526
+ --dv-tab-divider-color: transparent;
527
+ --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);
528
+ --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);
529
+ --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);
530
+ --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);
531
+ --dv-separator-border: transparent;
532
+ --dv-paneview-header-border-color: rgb(51, 51, 51);
533
+ --dv-active-sash-color: rgb(91, 30, 207);
534
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.1);
535
+ padding: 10px;
536
+ background-color: #f6f5f9;
537
+ --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);
538
+ }
539
+ .dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {
540
+ border-radius: 8px;
541
+ }
542
+ .dockview-theme-light-spaced .dv-sash {
543
+ border-radius: 4px;
544
+ }
545
+ .dockview-theme-light-spaced .dv-drop-target-anchor {
546
+ border-radius: calc(var(--dv-border-radius) / 4);
547
+ }
548
+ .dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {
549
+ border-radius: var(--dv-border-radius);
550
+ }
551
+ .dockview-theme-light-spaced .dv-resize-container {
552
+ border-radius: var(--dv-border-radius) !important;
553
+ border: none;
554
+ }
555
+ .dockview-theme-light-spaced .dv-tabs-overflow-container,
556
+ .dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {
557
+ border-radius: 8px;
558
+ height: unset !important;
559
+ }
560
+ .dockview-theme-light-spaced .dv-tab {
561
+ border-radius: 8px;
562
+ }
563
+ .dockview-theme-light-spaced .dv-tab .dv-svg {
564
+ height: 8px;
565
+ width: 8px;
566
+ }
567
+ .dockview-theme-light-spaced .dv-groupview {
568
+ border-radius: var(--dv-border-radius);
569
+ }
570
+ .dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {
571
+ padding: 0px calc(var(--dv-border-radius) / 2);
572
+ }
573
+ .dockview-theme-light-spaced .dv-groupview .dv-content-container {
574
+ background-color: var(--dv-tabs-and-actions-container-background-color);
575
+ }
576
+ .dockview-theme-light-spaced .dv-resize-container .dv-groupview {
577
+ border: 2px solid rgba(255, 255, 255, 0.1);
578
+ }
579
+ .dv-drop-target-container {
580
+ position: absolute;
581
+ z-index: 9999;
582
+ top: 0px;
583
+ left: 0px;
584
+ height: 100%;
585
+ width: 100%;
586
+ pointer-events: none;
587
+ overflow: hidden;
588
+ --dv-transition-duration: 300ms;
589
+ }
590
+ .dv-drop-target-container .dv-drop-target-anchor {
591
+ position: relative;
592
+ border: var(--dv-drag-over-border);
593
+ transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;
594
+ background-color: var(--dv-drag-over-background-color);
595
+ opacity: 1;
285
596
  }
286
597
  .dv-drop-target {
287
598
  position: relative;
599
+ --dv-transition-duration: 70ms;
288
600
  }
289
601
  .dv-drop-target > .dv-drop-target-dropzone {
290
602
  position: absolute;
@@ -300,8 +612,9 @@
300
612
  box-sizing: border-box;
301
613
  height: 100%;
302
614
  width: 100%;
615
+ border: var(--dv-drag-over-border);
303
616
  background-color: var(--dv-drag-over-background-color);
304
- transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;
617
+ transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;
305
618
  will-change: transform;
306
619
  pointer-events: none;
307
620
  }
@@ -333,19 +646,19 @@
333
646
  position: relative;
334
647
  }
335
648
 
336
- .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
649
+ .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
337
650
  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
338
651
  color: var(--dv-activegroup-visiblepanel-tab-color);
339
652
  }
340
- .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
653
+ .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
341
654
  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
342
655
  color: var(--dv-activegroup-hiddenpanel-tab-color);
343
656
  }
344
- .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
657
+ .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
345
658
  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
346
659
  color: var(--dv-inactivegroup-visiblepanel-tab-color);
347
660
  }
348
- .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
661
+ .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
349
662
  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
350
663
  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
351
664
  }
@@ -681,6 +994,7 @@
681
994
  -moz-user-select: none;
682
995
  -ms-user-select: none;
683
996
  touch-action: none;
997
+ background-color: var(--dv-sash-color, transparent);
684
998
  }
685
999
  .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {
686
1000
  background-color: var(--dv-active-sash-color, transparent);
@@ -747,15 +1061,13 @@
747
1061
  position: relative;
748
1062
  height: 100%;
749
1063
  display: flex;
750
- min-width: 80px;
751
1064
  align-items: center;
752
- padding: 0px 8px;
753
1065
  white-space: nowrap;
754
1066
  text-overflow: ellipsis;
755
1067
  }
756
1068
  .dv-tab .dv-default-tab .dv-default-tab-content {
757
- padding: 0px 8px;
758
1069
  flex-grow: 1;
1070
+ margin-right: 4px;
759
1071
  }
760
1072
  .dv-tab .dv-default-tab .dv-default-tab-action {
761
1073
  padding: 4px;
@@ -768,6 +1080,85 @@
768
1080
  border-radius: 2px;
769
1081
  background-color: var(--dv-icon-hover-background-color);
770
1082
  }
1083
+ .dv-tabs-overflow-dropdown-default {
1084
+ height: 100%;
1085
+ color: var(--dv-activegroup-hiddenpanel-tab-color);
1086
+ margin: var(--dv-tab-margin);
1087
+ display: flex;
1088
+ align-items: center;
1089
+ flex-shrink: 0;
1090
+ padding: 0.25rem 0.5rem;
1091
+ cursor: pointer;
1092
+ }
1093
+ .dv-tabs-overflow-dropdown-default > span {
1094
+ padding-left: 0.25rem;
1095
+ }
1096
+ .dv-tabs-overflow-dropdown-default > svg {
1097
+ transform: rotate(90deg);
1098
+ }
1099
+ .dv-tabs-container {
1100
+ display: flex;
1101
+ height: 100%;
1102
+ overflow: hidden;
1103
+ scrollbar-width: thin;
1104
+ /* Track */
1105
+ /* Handle */
1106
+ }
1107
+ .dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:last-child {
1108
+ margin-right: 0;
1109
+ }
1110
+ .dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:not(:nth-last-child(1)) {
1111
+ margin-left: 0;
1112
+ }
1113
+ .dv-tabs-container.dv-horizontal .dv-tabs-container .dv-tab:not(:first-child)::before {
1114
+ content: " ";
1115
+ position: absolute;
1116
+ top: 0;
1117
+ left: 0;
1118
+ z-index: 5;
1119
+ pointer-events: none;
1120
+ background-color: var(--dv-tab-divider-color);
1121
+ width: 1px;
1122
+ height: 100%;
1123
+ }
1124
+ .dv-tabs-container::-webkit-scrollbar {
1125
+ height: 3px;
1126
+ }
1127
+ .dv-tabs-container::-webkit-scrollbar-track {
1128
+ background: transparent;
1129
+ }
1130
+ .dv-tabs-container::-webkit-scrollbar-thumb {
1131
+ background: var(--dv-tabs-container-scrollbar-color);
1132
+ }
1133
+
1134
+ .dv-tab {
1135
+ -webkit-user-drag: element;
1136
+ outline: none;
1137
+ padding: 0.25rem 0.5rem;
1138
+ cursor: pointer;
1139
+ position: relative;
1140
+ box-sizing: border-box;
1141
+ font-size: var(--dv-tab-font-size);
1142
+ margin: var(--dv-tab-margin);
1143
+ }
1144
+
1145
+ .dv-tabs-overflow-container {
1146
+ flex-direction: column;
1147
+ height: unset;
1148
+ border: 1px solid var(--dv-tab-divider-color);
1149
+ background-color: var(--dv-group-view-background-color);
1150
+ }
1151
+ .dv-tabs-overflow-container .dv-tab:not(:last-child) {
1152
+ border-bottom: 1px solid var(--dv-tab-divider-color);
1153
+ }
1154
+ .dv-tabs-overflow-container .dv-active-tab {
1155
+ background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
1156
+ color: var(--dv-activegroup-visiblepanel-tab-color);
1157
+ }
1158
+ .dv-tabs-overflow-container .dv-inactive-tab {
1159
+ background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
1160
+ color: var(--dv-activegroup-hiddenpanel-tab-color);
1161
+ }
771
1162
  .dv-tabs-and-actions-container {
772
1163
  display: flex;
773
1164
  background-color: var(--dv-tabs-and-actions-container-background-color);
@@ -790,41 +1181,8 @@
790
1181
  flex-grow: 1;
791
1182
  cursor: grab;
792
1183
  }
793
- .dv-tabs-and-actions-container .dv-tabs-container {
1184
+ .dv-tabs-and-actions-container .dv-right-actions-container {
794
1185
  display: flex;
795
- overflow-x: overlay;
796
- overflow-y: hidden;
797
- scrollbar-width: thin;
798
- /* Track */
799
- /* Handle */
800
- }
801
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {
802
- height: 3px;
803
- }
804
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {
805
- background: transparent;
806
- }
807
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {
808
- background: var(--dv-tabs-container-scrollbar-color);
809
- }
810
- .dv-tabs-and-actions-container .dv-tabs-container .dv-tab {
811
- -webkit-user-drag: element;
812
- outline: none;
813
- min-width: 75px;
814
- cursor: pointer;
815
- position: relative;
816
- box-sizing: border-box;
817
- }
818
- .dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {
819
- content: " ";
820
- position: absolute;
821
- top: 0;
822
- left: 0;
823
- z-index: 5;
824
- pointer-events: none;
825
- background-color: var(--dv-tab-divider-color);
826
- width: 1px;
827
- height: 100%;
828
1186
  }
829
1187
  .dv-watermark {
830
1188
  display: flex;