dockview-react 3.2.0 → 4.0.1

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