dockview-react 3.1.1 → 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,18 @@
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;
42
+ --dv-active-sash-transition-duration: 0.1s;
43
+ --dv-active-sash-transition-delay: 0.5s;
18
44
  --dv-group-view-background-color: #1e1e1e;
19
45
  --dv-tabs-and-actions-container-background-color: #252526;
20
46
  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
@@ -29,17 +55,28 @@
29
55
  --dv-separator-border: rgb(68, 68, 68);
30
56
  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
31
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
+ }
32
62
 
33
63
  .dockview-theme-light {
34
64
  --dv-paneview-active-outline-color: dodgerblue;
35
65
  --dv-tabs-and-actions-container-font-size: 13px;
36
66
  --dv-tabs-and-actions-container-height: 35px;
37
67
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
38
- --dv-drag-over-border-color: white;
68
+ --dv-drag-over-border-color: transparent;
39
69
  --dv-tabs-container-scrollbar-color: #888;
40
70
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
41
71
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
42
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;
78
+ --dv-active-sash-transition-duration: 0.1s;
79
+ --dv-active-sash-transition-delay: 0.5s;
43
80
  --dv-group-view-background-color: white;
44
81
  --dv-tabs-and-actions-container-background-color: #f3f3f3;
45
82
  --dv-activegroup-visiblepanel-tab-background-color: white;
@@ -53,6 +90,11 @@
53
90
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);
54
91
  --dv-separator-border: rgba(128, 128, 128, 0.35);
55
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;
56
98
  }
57
99
 
58
100
  .dockview-theme-vs {
@@ -60,11 +102,18 @@
60
102
  --dv-tabs-and-actions-container-font-size: 13px;
61
103
  --dv-tabs-and-actions-container-height: 35px;
62
104
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
63
- --dv-drag-over-border-color: white;
105
+ --dv-drag-over-border-color: transparent;
64
106
  --dv-tabs-container-scrollbar-color: #888;
65
107
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
66
108
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
67
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;
115
+ --dv-active-sash-transition-duration: 0.1s;
116
+ --dv-active-sash-transition-delay: 0.5s;
68
117
  --dv-group-view-background-color: #1e1e1e;
69
118
  --dv-tabs-and-actions-container-background-color: #252526;
70
119
  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
@@ -88,6 +137,10 @@
88
137
  --dv-inactivegroup-visiblepanel-tab-color: white;
89
138
  --dv-inactivegroup-hiddenpanel-tab-color: white;
90
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
+ }
91
144
  .dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {
92
145
  box-sizing: content-box;
93
146
  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
@@ -114,37 +167,68 @@
114
167
  --dv-tabs-and-actions-container-font-size: 13px;
115
168
  --dv-tabs-and-actions-container-height: 35px;
116
169
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
117
- --dv-drag-over-border-color: white;
170
+ --dv-drag-over-border-color: transparent;
118
171
  --dv-tabs-container-scrollbar-color: #888;
119
172
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
120
173
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
121
174
  --dv-overlay-z-index: 999;
122
- --dv-group-view-background-color: #000c18;
123
- --dv-tabs-and-actions-container-background-color: #1c1c2a;
124
- --dv-activegroup-visiblepanel-tab-background-color: #000c18;
125
- --dv-activegroup-hiddenpanel-tab-background-color: #10192c;
126
- --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;
127
- --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;
128
- --dv-tab-divider-color: #2b2b4a;
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;
180
+ --dv-active-sash-transition-duration: 0.1s;
181
+ --dv-active-sash-transition-delay: 0.5s;
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);
129
202
  --dv-activegroup-visiblepanel-tab-color: white;
130
203
  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);
131
204
  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);
132
205
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);
133
- --dv-separator-border: #2b2b4a;
134
- --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);
135
208
  --dv-paneview-active-outline-color: #596f99;
136
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
+ }
137
214
 
138
215
  .dockview-theme-dracula {
139
216
  --dv-paneview-active-outline-color: dodgerblue;
140
217
  --dv-tabs-and-actions-container-font-size: 13px;
141
218
  --dv-tabs-and-actions-container-height: 35px;
142
219
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
143
- --dv-drag-over-border-color: white;
220
+ --dv-drag-over-border-color: transparent;
144
221
  --dv-tabs-container-scrollbar-color: #888;
145
222
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
146
223
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
147
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;
230
+ --dv-active-sash-transition-duration: 0.1s;
231
+ --dv-active-sash-transition-delay: 0.5s;
148
232
  --dv-group-view-background-color: #282a36;
149
233
  --dv-tabs-and-actions-container-background-color: #191a21;
150
234
  --dv-activegroup-visiblepanel-tab-background-color: #282a36;
@@ -160,10 +244,14 @@
160
244
  --dv-paneview-header-border-color: #bd93f9;
161
245
  --dv-paneview-active-outline-color: #6272a4;
162
246
  }
163
- .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 {
164
252
  position: relative;
165
253
  }
166
- .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 {
167
255
  position: absolute;
168
256
  left: 0px;
169
257
  top: 0px;
@@ -173,10 +261,10 @@
173
261
  background-color: #94527e;
174
262
  z-index: 999;
175
263
  }
176
- .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 {
177
265
  position: relative;
178
266
  }
179
- .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 {
180
268
  position: absolute;
181
269
  left: 0px;
182
270
  bottom: 0px;
@@ -192,11 +280,20 @@
192
280
  --dv-tabs-and-actions-container-font-size: 13px;
193
281
  --dv-tabs-and-actions-container-height: 35px;
194
282
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
195
- --dv-drag-over-border-color: white;
283
+ --dv-drag-over-border-color: transparent;
196
284
  --dv-tabs-container-scrollbar-color: #888;
197
285
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
198
286
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
199
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;
293
+ --dv-active-sash-transition-duration: 0.1s;
294
+ --dv-active-sash-transition-delay: 0.5s;
295
+ padding: 10px;
296
+ background-color: #ebeced;
200
297
  --dv-group-view-background-color: #ebeced;
201
298
  --dv-tabs-and-actions-container-background-color: #fcfcfc;
202
299
  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
@@ -210,12 +307,20 @@
210
307
  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
211
308
  --dv-separator-border: transparent;
212
309
  --dv-paneview-header-border-color: rgb(51, 51, 51);
213
- --dv-separator-handle-background-color: #cfd1d3;
214
- --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;
215
316
  }
216
317
  .dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {
217
318
  border-radius: 8px;
218
319
  }
320
+ .dockview-theme-replit .dv-resize-container {
321
+ border-radius: 10px !important;
322
+ border: none;
323
+ }
219
324
  .dockview-theme-replit .dv-groupview {
220
325
  overflow: hidden;
221
326
  border-radius: 10px;
@@ -243,6 +348,9 @@
243
348
  .dockview-theme-replit .dv-groupview.dv-inactive-group {
244
349
  border: 1px solid transparent;
245
350
  }
351
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash {
352
+ background-color: transparent;
353
+ }
246
354
  .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {
247
355
  content: "";
248
356
  height: 4px;
@@ -251,11 +359,17 @@
251
359
  top: 50%;
252
360
  left: 50%;
253
361
  transform: translate(-50%, -50%);
254
- background-color: var(--dv-separator-handle-background-color);
362
+ background-color: var(--dv-sash-color);
255
363
  position: absolute;
256
364
  }
257
- .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
258
- 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;
259
373
  }
260
374
  .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {
261
375
  content: "";
@@ -265,14 +379,224 @@
265
379
  top: 50%;
266
380
  left: 50%;
267
381
  transform: translate(-50%, -50%);
268
- background-color: var(--dv-separator-handle-background-color);
382
+ background-color: var(--dv-sash-color);
269
383
  position: absolute;
270
384
  }
271
- .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
272
- 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;
273
596
  }
274
597
  .dv-drop-target {
275
598
  position: relative;
599
+ --dv-transition-duration: 70ms;
276
600
  }
277
601
  .dv-drop-target > .dv-drop-target-dropzone {
278
602
  position: absolute;
@@ -288,8 +612,9 @@
288
612
  box-sizing: border-box;
289
613
  height: 100%;
290
614
  width: 100%;
615
+ border: var(--dv-drag-over-border);
291
616
  background-color: var(--dv-drag-over-background-color);
292
- 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;
293
618
  will-change: transform;
294
619
  pointer-events: none;
295
620
  }
@@ -321,19 +646,19 @@
321
646
  position: relative;
322
647
  }
323
648
 
324
- .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 {
325
650
  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
326
651
  color: var(--dv-activegroup-visiblepanel-tab-color);
327
652
  }
328
- .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 {
329
654
  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
330
655
  color: var(--dv-activegroup-hiddenpanel-tab-color);
331
656
  }
332
- .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 {
333
658
  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
334
659
  color: var(--dv-inactivegroup-visiblepanel-tab-color);
335
660
  }
336
- .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 {
337
662
  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
338
663
  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
339
664
  }
@@ -669,15 +994,14 @@
669
994
  -moz-user-select: none;
670
995
  -ms-user-select: none;
671
996
  touch-action: none;
997
+ background-color: var(--dv-sash-color, transparent);
672
998
  }
673
- .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active {
674
- transition: background-color 0.1s ease-in-out;
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 {
675
1000
  background-color: var(--dv-active-sash-color, transparent);
676
- }
677
- .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {
678
- background-color: var(--dv-active-sash-color, transparent);
679
- transition: background-color 0.1s ease-in-out;
680
- transition-delay: 0.5s;
1001
+ transition-property: background-color;
1002
+ transition-timing-function: ease-in-out;
1003
+ transition-duration: var(--dv-active-sash-transition-duration, 0.1s);
1004
+ transition-delay: var(--dv-active-sash-transition-delay, 0.5s);
681
1005
  }
682
1006
  .dv-split-view-container .dv-view-container {
683
1007
  position: relative;
@@ -737,15 +1061,13 @@
737
1061
  position: relative;
738
1062
  height: 100%;
739
1063
  display: flex;
740
- min-width: 80px;
741
1064
  align-items: center;
742
- padding: 0px 8px;
743
1065
  white-space: nowrap;
744
1066
  text-overflow: ellipsis;
745
1067
  }
746
1068
  .dv-tab .dv-default-tab .dv-default-tab-content {
747
- padding: 0px 8px;
748
1069
  flex-grow: 1;
1070
+ margin-right: 4px;
749
1071
  }
750
1072
  .dv-tab .dv-default-tab .dv-default-tab-action {
751
1073
  padding: 4px;
@@ -758,6 +1080,85 @@
758
1080
  border-radius: 2px;
759
1081
  background-color: var(--dv-icon-hover-background-color);
760
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
+ }
761
1162
  .dv-tabs-and-actions-container {
762
1163
  display: flex;
763
1164
  background-color: var(--dv-tabs-and-actions-container-background-color);
@@ -780,41 +1181,8 @@
780
1181
  flex-grow: 1;
781
1182
  cursor: grab;
782
1183
  }
783
- .dv-tabs-and-actions-container .dv-tabs-container {
1184
+ .dv-tabs-and-actions-container .dv-right-actions-container {
784
1185
  display: flex;
785
- overflow-x: overlay;
786
- overflow-y: hidden;
787
- scrollbar-width: thin;
788
- /* Track */
789
- /* Handle */
790
- }
791
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {
792
- height: 3px;
793
- }
794
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {
795
- background: transparent;
796
- }
797
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {
798
- background: var(--dv-tabs-container-scrollbar-color);
799
- }
800
- .dv-tabs-and-actions-container .dv-tabs-container .dv-tab {
801
- -webkit-user-drag: element;
802
- outline: none;
803
- min-width: 75px;
804
- cursor: pointer;
805
- position: relative;
806
- box-sizing: border-box;
807
- }
808
- .dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {
809
- content: " ";
810
- position: absolute;
811
- top: 0;
812
- left: 0;
813
- z-index: 5;
814
- pointer-events: none;
815
- background-color: var(--dv-tab-divider-color);
816
- width: 1px;
817
- height: 100%;
818
1186
  }
819
1187
  .dv-watermark {
820
1188
  display: flex;