UNPKG

27.9 kBCSSView Raw
1.dv-svg {
2 display: inline-block;
3 fill: currentcolor;
4 line-height: 1;
5 stroke: currentcolor;
6 stroke-width: 0;
7}
8.dockview-theme-dark {
9 --dv-paneview-active-outline-color: dodgerblue;
10 --dv-tabs-and-actions-container-font-size: 13px;
11 --dv-tabs-and-actions-container-height: 35px;
12 --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
13 --dv-drag-over-border-color: white;
14 --dv-tabs-container-scrollbar-color: #888;
15 --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
16 --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
17 --dv-overlay-z-index: 999;
18 --dv-active-sash-transition-duration: 0.1s;
19 --dv-active-sash-transition-delay: 0.5s;
20 --dv-group-view-background-color: #1e1e1e;
21 --dv-tabs-and-actions-container-background-color: #252526;
22 --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
23 --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;
24 --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;
25 --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;
26 --dv-tab-divider-color: #1e1e1e;
27 --dv-activegroup-visiblepanel-tab-color: white;
28 --dv-activegroup-hiddenpanel-tab-color: #969696;
29 --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;
30 --dv-inactivegroup-hiddenpanel-tab-color: #626262;
31 --dv-separator-border: rgb(68, 68, 68);
32 --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
33}
34
35.dockview-theme-light {
36 --dv-paneview-active-outline-color: dodgerblue;
37 --dv-tabs-and-actions-container-font-size: 13px;
38 --dv-tabs-and-actions-container-height: 35px;
39 --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
40 --dv-drag-over-border-color: white;
41 --dv-tabs-container-scrollbar-color: #888;
42 --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
43 --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
44 --dv-overlay-z-index: 999;
45 --dv-active-sash-transition-duration: 0.1s;
46 --dv-active-sash-transition-delay: 0.5s;
47 --dv-group-view-background-color: white;
48 --dv-tabs-and-actions-container-background-color: #f3f3f3;
49 --dv-activegroup-visiblepanel-tab-background-color: white;
50 --dv-activegroup-hiddenpanel-tab-background-color: #ececec;
51 --dv-inactivegroup-visiblepanel-tab-background-color: white;
52 --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;
53 --dv-tab-divider-color: white;
54 --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);
55 --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);
56 --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);
57 --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);
58 --dv-separator-border: rgba(128, 128, 128, 0.35);
59 --dv-paneview-header-border-color: rgb(51, 51, 51);
60}
61
62.dockview-theme-vs {
63 --dv-paneview-active-outline-color: dodgerblue;
64 --dv-tabs-and-actions-container-font-size: 13px;
65 --dv-tabs-and-actions-container-height: 35px;
66 --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
67 --dv-drag-over-border-color: white;
68 --dv-tabs-container-scrollbar-color: #888;
69 --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
70 --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
71 --dv-overlay-z-index: 999;
72 --dv-active-sash-transition-duration: 0.1s;
73 --dv-active-sash-transition-delay: 0.5s;
74 --dv-group-view-background-color: #1e1e1e;
75 --dv-tabs-and-actions-container-background-color: #252526;
76 --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
77 --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;
78 --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;
79 --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;
80 --dv-tab-divider-color: #1e1e1e;
81 --dv-activegroup-visiblepanel-tab-color: white;
82 --dv-activegroup-hiddenpanel-tab-color: #969696;
83 --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;
84 --dv-inactivegroup-hiddenpanel-tab-color: #626262;
85 --dv-separator-border: rgb(68, 68, 68);
86 --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
87 --dv-tabs-and-actions-container-background-color: #2d2d30;
88 --dv-tabs-and-actions-container-height: 20px;
89 --dv-tabs-and-actions-container-font-size: 11px;
90 --dv-activegroup-visiblepanel-tab-background-color: #007acc;
91 --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;
92 --dv-activegroup-visiblepanel-tab-color: white;
93 --dv-activegroup-hiddenpanel-tab-color: white;
94 --dv-inactivegroup-visiblepanel-tab-color: white;
95 --dv-inactivegroup-hiddenpanel-tab-color: white;
96}
97.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {
98 box-sizing: content-box;
99 border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
100}
101.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
102 border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
103}
104.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {
105 border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);
106}
107.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {
108 box-sizing: content-box;
109 border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
110}
111.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
112 border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
113}
114.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {
115 border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);
116}
117
118.dockview-theme-abyss {
119 --dv-paneview-active-outline-color: dodgerblue;
120 --dv-tabs-and-actions-container-font-size: 13px;
121 --dv-tabs-and-actions-container-height: 35px;
122 --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
123 --dv-drag-over-border-color: white;
124 --dv-tabs-container-scrollbar-color: #888;
125 --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
126 --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
127 --dv-overlay-z-index: 999;
128 --dv-active-sash-transition-duration: 0.1s;
129 --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;
137 --dv-activegroup-visiblepanel-tab-color: white;
138 --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);
139 --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);
140 --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);
141 --dv-separator-border: #2b2b4a;
142 --dv-paneview-header-border-color: #2b2b4a;
143 --dv-paneview-active-outline-color: #596f99;
144}
145
146.dockview-theme-dracula {
147 --dv-paneview-active-outline-color: dodgerblue;
148 --dv-tabs-and-actions-container-font-size: 13px;
149 --dv-tabs-and-actions-container-height: 35px;
150 --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
151 --dv-drag-over-border-color: white;
152 --dv-tabs-container-scrollbar-color: #888;
153 --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
154 --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
155 --dv-overlay-z-index: 999;
156 --dv-active-sash-transition-duration: 0.1s;
157 --dv-active-sash-transition-delay: 0.5s;
158 --dv-group-view-background-color: #282a36;
159 --dv-tabs-and-actions-container-background-color: #191a21;
160 --dv-activegroup-visiblepanel-tab-background-color: #282a36;
161 --dv-activegroup-hiddenpanel-tab-background-color: #21222c;
162 --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;
163 --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;
164 --dv-tab-divider-color: #191a21;
165 --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);
166 --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);
167 --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);
168 --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);
169 --dv-separator-border: #bd93f9;
170 --dv-paneview-header-border-color: #bd93f9;
171 --dv-paneview-active-outline-color: #6272a4;
172}
173.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
174 position: relative;
175}
176.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
177 position: absolute;
178 left: 0px;
179 top: 0px;
180 content: "";
181 width: 100%;
182 height: 1px;
183 background-color: #94527e;
184 z-index: 999;
185}
186.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
187 position: relative;
188}
189.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
190 position: absolute;
191 left: 0px;
192 bottom: 0px;
193 content: "";
194 width: 100%;
195 height: 1px;
196 background-color: #5e3d5a;
197 z-index: 999;
198}
199
200.dockview-theme-replit {
201 --dv-paneview-active-outline-color: dodgerblue;
202 --dv-tabs-and-actions-container-font-size: 13px;
203 --dv-tabs-and-actions-container-height: 35px;
204 --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
205 --dv-drag-over-border-color: white;
206 --dv-tabs-container-scrollbar-color: #888;
207 --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
208 --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
209 --dv-overlay-z-index: 999;
210 --dv-active-sash-transition-duration: 0.1s;
211 --dv-active-sash-transition-delay: 0.5s;
212 --dv-group-view-background-color: #ebeced;
213 --dv-tabs-and-actions-container-background-color: #fcfcfc;
214 --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
215 --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;
216 --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;
217 --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;
218 --dv-tab-divider-color: transparent;
219 --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);
220 --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
221 --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);
222 --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
223 --dv-separator-border: transparent;
224 --dv-paneview-header-border-color: rgb(51, 51, 51);
225 --dv-separator-handle-background-color: #cfd1d3;
226 --dv-separator-handle-hover-background-color: #babbbb;
227}
228.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {
229 border-radius: 8px;
230}
231.dockview-theme-replit .dv-groupview {
232 overflow: hidden;
233 border-radius: 10px;
234}
235.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {
236 border-bottom: 1px solid rgba(128, 128, 128, 0.35);
237}
238.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {
239 margin: 4px;
240 border-radius: 8px;
241}
242.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {
243 height: 8px;
244 width: 8px;
245}
246.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {
247 background-color: #e4e5e6 !important;
248}
249.dockview-theme-replit .dv-groupview .dv-content-container {
250 background-color: #fcfcfc;
251}
252.dockview-theme-replit .dv-groupview.dv-active-group {
253 border: 1px solid rgba(128, 128, 128, 0.35);
254}
255.dockview-theme-replit .dv-groupview.dv-inactive-group {
256 border: 1px solid transparent;
257}
258.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {
259 content: "";
260 height: 4px;
261 width: 40px;
262 border-radius: 2px;
263 top: 50%;
264 left: 50%;
265 transform: translate(-50%, -50%);
266 background-color: var(--dv-separator-handle-background-color);
267 position: absolute;
268}
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);
271}
272.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {
273 content: "";
274 height: 40px;
275 width: 4px;
276 border-radius: 2px;
277 top: 50%;
278 left: 50%;
279 transform: translate(-50%, -50%);
280 background-color: var(--dv-separator-handle-background-color);
281 position: absolute;
282}
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);
285}
286.dv-drop-target {
287 position: relative;
288}
289.dv-drop-target > .dv-drop-target-dropzone {
290 position: absolute;
291 left: 0px;
292 top: 0px;
293 height: 100%;
294 width: 100%;
295 z-index: 1000;
296 pointer-events: none;
297}
298.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {
299 position: relative;
300 box-sizing: border-box;
301 height: 100%;
302 width: 100%;
303 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;
305 will-change: transform;
306 pointer-events: none;
307}
308.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
309 border-top: 1px solid var(--dv-drag-over-border-color);
310}
311.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
312 border-bottom: 1px solid var(--dv-drag-over-border-color);
313}
314.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
315 border-left: 1px solid var(--dv-drag-over-border-color);
316}
317.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
318 border-right: 1px solid var(--dv-drag-over-border-color);
319}
320.dv-dockview {
321 position: relative;
322 background-color: var(--dv-group-view-background-color);
323}
324.dv-dockview .dv-watermark-container {
325 position: absolute;
326 top: 0px;
327 left: 0px;
328 height: 100%;
329 width: 100%;
330 z-index: 1;
331}
332.dv-dockview .dv-overlay-render-container {
333 position: relative;
334}
335
336.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
337 background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
338 color: var(--dv-activegroup-visiblepanel-tab-color);
339}
340.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
341 background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
342 color: var(--dv-activegroup-hiddenpanel-tab-color);
343}
344.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
345 background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
346 color: var(--dv-inactivegroup-visiblepanel-tab-color);
347}
348.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
349 background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
350 color: var(--dv-inactivegroup-hiddenpanel-tab-color);
351}
352
353/**
354 * when a tab is dragged we lose the above stylings because they are conditional on parent elements
355 * therefore we also set some stylings for the dragging event
356 **/
357.dv-tab.dv-tab-dragging {
358 background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
359 color: var(--dv-activegroup-visiblepanel-tab-color);
360}
361.dv-groupview {
362 display: flex;
363 flex-direction: column;
364 height: 100%;
365 background-color: var(--dv-group-view-background-color);
366 overflow: hidden;
367}
368.dv-groupview:focus {
369 outline: none;
370}
371.dv-groupview > .dv-content-container {
372 flex-grow: 1;
373 min-height: 0;
374 outline: none;
375}
376.dv-root-wrapper {
377 height: 100%;
378 width: 100%;
379}
380.dv-grid-view,
381.dv-branch-node {
382 height: 100%;
383 width: 100%;
384}
385.dv-debug .dv-resize-container .dv-resize-handle-top {
386 background-color: red;
387}
388.dv-debug .dv-resize-container .dv-resize-handle-bottom {
389 background-color: green;
390}
391.dv-debug .dv-resize-container .dv-resize-handle-left {
392 background-color: yellow;
393}
394.dv-debug .dv-resize-container .dv-resize-handle-right {
395 background-color: blue;
396}
397.dv-debug .dv-resize-container .dv-resize-handle-topleft,
398.dv-debug .dv-resize-container .dv-resize-handle-topright,
399.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,
400.dv-debug .dv-resize-container .dv-resize-handle-bottomright {
401 background-color: cyan;
402}
403
404.dv-resize-container {
405 --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
406 position: absolute;
407 z-index: calc(var(--dv-overlay-z-index) - 2);
408 border: 1px solid var(--dv-tab-divider-color);
409 box-shadow: var(--dv-floating-box-shadow);
410}
411.dv-resize-container.dv-hidden {
412 display: none;
413}
414.dv-resize-container.dv-resize-container-dragging {
415 opacity: 0.5;
416}
417.dv-resize-container .dv-resize-handle-top {
418 height: 4px;
419 width: calc(100% - 8px);
420 left: 4px;
421 top: -2px;
422 z-index: var(--dv-overlay-z-index);
423 position: absolute;
424 cursor: ns-resize;
425}
426.dv-resize-container .dv-resize-handle-bottom {
427 height: 4px;
428 width: calc(100% - 8px);
429 left: 4px;
430 bottom: -2px;
431 z-index: var(--dv-overlay-z-index);
432 position: absolute;
433 cursor: ns-resize;
434}
435.dv-resize-container .dv-resize-handle-left {
436 height: calc(100% - 8px);
437 width: 4px;
438 left: -2px;
439 top: 4px;
440 z-index: var(--dv-overlay-z-index);
441 position: absolute;
442 cursor: ew-resize;
443}
444.dv-resize-container .dv-resize-handle-right {
445 height: calc(100% - 8px);
446 width: 4px;
447 right: -2px;
448 top: 4px;
449 z-index: var(--dv-overlay-z-index);
450 position: absolute;
451 cursor: ew-resize;
452}
453.dv-resize-container .dv-resize-handle-topleft {
454 height: 4px;
455 width: 4px;
456 top: -2px;
457 left: -2px;
458 z-index: var(--dv-overlay-z-index);
459 position: absolute;
460 cursor: nw-resize;
461}
462.dv-resize-container .dv-resize-handle-topright {
463 height: 4px;
464 width: 4px;
465 right: -2px;
466 top: -2px;
467 z-index: var(--dv-overlay-z-index);
468 position: absolute;
469 cursor: ne-resize;
470}
471.dv-resize-container .dv-resize-handle-bottomleft {
472 height: 4px;
473 width: 4px;
474 left: -2px;
475 bottom: -2px;
476 z-index: var(--dv-overlay-z-index);
477 position: absolute;
478 cursor: sw-resize;
479}
480.dv-resize-container .dv-resize-handle-bottomright {
481 height: 4px;
482 width: 4px;
483 right: -2px;
484 bottom: -2px;
485 z-index: var(--dv-overlay-z-index);
486 position: absolute;
487 cursor: se-resize;
488}
489.dv-render-overlay {
490 --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
491 position: absolute;
492 z-index: 1;
493 height: 100%;
494}
495.dv-render-overlay.dv-render-overlay-float {
496 z-index: calc(var(--dv-overlay-z-index) - 1);
497}
498
499.dv-debug .dv-render-overlay {
500 outline: 1px solid red;
501 outline-offset: -1;
502}
503.dv-pane-container {
504 height: 100%;
505 width: 100%;
506}
507.dv-pane-container.dv-animated .dv-view {
508 transition-duration: 0.15s;
509 transition-timing-function: ease-out;
510}
511.dv-pane-container .dv-view {
512 overflow: hidden;
513 display: flex;
514 flex-direction: column;
515 padding: 0px !important;
516}
517.dv-pane-container .dv-view:not(:first-child)::before {
518 background-color: transparent !important;
519}
520.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {
521 border-top: 1px solid var(--dv-paneview-header-border-color);
522}
523.dv-pane-container .dv-view .dv-default-header {
524 background-color: var(--dv-group-view-background-color);
525 color: var(--dv-activegroup-visiblepanel-tab-color);
526 display: flex;
527 padding: 0px 8px;
528 cursor: pointer;
529}
530.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {
531 display: flex;
532 justify-content: center;
533 align-items: center;
534}
535.dv-pane-container .dv-view .dv-default-header > span {
536 padding-left: 8px;
537 flex-grow: 1;
538}
539.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {
540 border-top: none !important;
541}
542.dv-pane-container .dv-pane {
543 display: flex;
544 flex-direction: column;
545 overflow: hidden;
546 height: 100%;
547}
548.dv-pane-container .dv-pane .dv-pane-header {
549 box-sizing: border-box;
550 user-select: none;
551 position: relative;
552 outline: none;
553}
554.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {
555 cursor: pointer;
556}
557.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {
558 position: absolute;
559 top: 0;
560 left: 0;
561 width: 100%;
562 height: 100%;
563 z-index: 5;
564 content: "";
565 pointer-events: none;
566 outline: 1px solid;
567 outline-width: -1px;
568 outline-style: solid;
569 outline-offset: -1px;
570 outline-color: var(--dv-paneview-active-outline-color);
571}
572.dv-pane-container .dv-pane .dv-pane-body {
573 overflow-y: auto;
574 overflow-x: hidden;
575 flex-grow: 1;
576 position: relative;
577 outline: none;
578}
579.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {
580 position: absolute;
581 top: 0;
582 left: 0;
583 width: 100%;
584 height: 100%;
585 z-index: 5;
586 content: "";
587 pointer-events: none;
588 outline: 1px solid;
589 outline-width: -1px;
590 outline-style: solid;
591 outline-offset: -1px;
592 outline-color: var(--dv-paneview-active-outline-color);
593}
594.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {
595 background-color: black;
596}
597.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {
598 background-color: orange;
599}
600.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {
601 background-color: green;
602}
603.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {
604 background-color: red;
605}
606
607.dv-split-view-container {
608 position: relative;
609 overflow: hidden;
610 height: 100%;
611 width: 100%;
612}
613.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {
614 pointer-events: none;
615}
616.dv-split-view-container.dv-animation .dv-view,
617.dv-split-view-container.dv-animation .dv-sash {
618 transition-duration: 0.15s;
619 transition-timing-function: ease-out;
620}
621.dv-split-view-container.dv-horizontal {
622 height: 100%;
623}
624.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {
625 height: 100%;
626 width: 4px;
627}
628.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {
629 cursor: ew-resize;
630}
631.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {
632 cursor: default;
633}
634.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {
635 cursor: w-resize;
636}
637.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {
638 cursor: e-resize;
639}
640.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {
641 height: 100%;
642 width: 1px;
643}
644.dv-split-view-container.dv-vertical {
645 width: 100%;
646}
647.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {
648 width: 100%;
649 height: 4px;
650}
651.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {
652 cursor: ns-resize;
653}
654.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {
655 cursor: default;
656}
657.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {
658 cursor: n-resize;
659}
660.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {
661 cursor: s-resize;
662}
663.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {
664 width: 100%;
665}
666.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {
667 height: 1px;
668 width: 100%;
669}
670.dv-split-view-container .dv-sash-container {
671 height: 100%;
672 width: 100%;
673 position: absolute;
674}
675.dv-split-view-container .dv-sash-container .dv-sash {
676 position: absolute;
677 z-index: 99;
678 outline: none;
679 user-select: none;
680 -webkit-user-select: none;
681 -moz-user-select: none;
682 -ms-user-select: none;
683 touch-action: none;
684}
685.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 background-color: var(--dv-active-sash-color, transparent);
687 transition-property: background-color;
688 transition-timing-function: ease-in-out;
689 transition-duration: var(--dv-active-sash-transition-duration, 0.1s);
690 transition-delay: var(--dv-active-sash-transition-delay, 0.5s);
691}
692.dv-split-view-container .dv-view-container {
693 position: relative;
694 height: 100%;
695 width: 100%;
696}
697.dv-split-view-container .dv-view-container .dv-view {
698 height: 100%;
699 box-sizing: border-box;
700 overflow: auto;
701 position: absolute;
702}
703.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {
704 content: " ";
705 position: absolute;
706 top: 0;
707 left: 0;
708 z-index: 5;
709 pointer-events: none;
710 background-color: var(--dv-separator-border);
711}
712.dv-dragged {
713 transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
714}
715
716.dv-tab {
717 flex-shrink: 0;
718}
719.dv-tab:focus-within, .dv-tab:focus {
720 position: relative;
721}
722.dv-tab:focus-within::after, .dv-tab:focus::after {
723 position: absolute;
724 content: "";
725 height: 100%;
726 width: 100%;
727 top: 0px;
728 left: 0px;
729 pointer-events: none;
730 outline: 1px solid var(--dv-tab-divider-color) !important;
731 outline-offset: -1px;
732 z-index: 5;
733}
734.dv-tab.dv-tab-dragging .dv-default-tab-action {
735 background-color: var(--dv-activegroup-visiblepanel-tab-color);
736}
737.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {
738 visibility: visible;
739}
740.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
741 visibility: hidden;
742}
743.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
744 visibility: visible;
745}
746.dv-tab .dv-default-tab {
747 position: relative;
748 height: 100%;
749 display: flex;
750 min-width: 80px;
751 align-items: center;
752 padding: 0px 8px;
753 white-space: nowrap;
754 text-overflow: ellipsis;
755}
756.dv-tab .dv-default-tab .dv-default-tab-content {
757 padding: 0px 8px;
758 flex-grow: 1;
759}
760.dv-tab .dv-default-tab .dv-default-tab-action {
761 padding: 4px;
762 display: flex;
763 align-items: center;
764 justify-content: center;
765 box-sizing: border-box;
766}
767.dv-tab .dv-default-tab .dv-default-tab-action:hover {
768 border-radius: 2px;
769 background-color: var(--dv-icon-hover-background-color);
770}
771.dv-tabs-and-actions-container {
772 display: flex;
773 background-color: var(--dv-tabs-and-actions-container-background-color);
774 flex-shrink: 0;
775 box-sizing: border-box;
776 height: var(--dv-tabs-and-actions-container-height);
777 font-size: var(--dv-tabs-and-actions-container-font-size);
778}
779.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {
780 flex-grow: 1;
781}
782.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {
783 flex-grow: 1;
784}
785.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {
786 flex-grow: 0;
787}
788.dv-tabs-and-actions-container .dv-void-container {
789 display: flex;
790 flex-grow: 1;
791 cursor: grab;
792}
793.dv-tabs-and-actions-container .dv-tabs-container {
794 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}
829.dv-watermark {
830 display: flex;
831 height: 100%;
832}
\No newline at end of file