flexlayout-react 0.8.4 → 0.8.6

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.
Files changed (56) hide show
  1. package/ChangeLog.txt +9 -0
  2. package/README.md +29 -2
  3. package/declarations/Types.d.ts +2 -6
  4. package/declarations/view/Layout.d.ts +3 -1
  5. package/dist/flexlayout.js +7 -7
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/Types.js +2 -6
  8. package/lib/Types.js.map +1 -1
  9. package/lib/model/TabSetNode.js +9 -4
  10. package/lib/model/TabSetNode.js.map +1 -1
  11. package/lib/view/BorderTabSet.js +11 -5
  12. package/lib/view/BorderTabSet.js.map +1 -1
  13. package/lib/view/Layout.js +3 -2
  14. package/lib/view/Layout.js.map +1 -1
  15. package/lib/view/PopupMenu.js +11 -5
  16. package/lib/view/PopupMenu.js.map +1 -1
  17. package/lib/view/TabOverflowHook.js +104 -21
  18. package/lib/view/TabOverflowHook.js.map +1 -1
  19. package/lib/view/TabSet.js +11 -5
  20. package/lib/view/TabSet.js.map +1 -1
  21. package/package.json +2 -2
  22. package/src/Types.ts +3 -8
  23. package/src/model/TabSetNode.ts +8 -4
  24. package/src/view/BorderTabSet.tsx +38 -24
  25. package/src/view/Layout.tsx +9 -5
  26. package/src/view/PopupMenu.tsx +31 -19
  27. package/src/view/TabOverflowHook.tsx +112 -21
  28. package/src/view/TabSet.tsx +36 -22
  29. package/style/_base.scss +569 -595
  30. package/style/_themes.scss +649 -0
  31. package/style/combined.css +1055 -0
  32. package/style/combined.css.map +1 -0
  33. package/style/combined.scss +46 -0
  34. package/style/dark.css +704 -701
  35. package/style/dark.css.map +1 -1
  36. package/style/dark.scss +5 -181
  37. package/style/gray.css +707 -684
  38. package/style/gray.css.map +1 -1
  39. package/style/gray.scss +5 -180
  40. package/style/light.css +681 -685
  41. package/style/light.css.map +1 -1
  42. package/style/light.scss +5 -163
  43. package/style/rounded.css +723 -730
  44. package/style/rounded.css.map +1 -1
  45. package/style/rounded.scss +5 -210
  46. package/style/underline.css +710 -705
  47. package/style/underline.css.map +1 -1
  48. package/style/underline.scss +5 -186
  49. package/.editorconfig +0 -8
  50. package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -104
  51. package/.github/ISSUE_TEMPLATE/config.yml +0 -5
  52. package/.prettierrc.json +0 -3
  53. package/Screenshot_light.png +0 -0
  54. package/Screenshot_rounded.png +0 -0
  55. package/dist/bundles/demo.js +0 -232052
  56. package/dist/bundles/demo.js.map +0 -1
@@ -0,0 +1,1055 @@
1
+ .flexlayout__theme_light .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: rgb(247.35, 247.35, 247.35);
6
+ --color-2: rgb(239.7, 239.7, 239.7);
7
+ --color-3: rgb(232.05, 232.05, 232.05);
8
+ --color-4: rgb(224.4, 224.4, 224.4);
9
+ --color-5: rgb(216.75, 216.75, 216.75);
10
+ --color-6: rgb(209.1, 209.1, 209.1);
11
+ --color-drag1: rgb(95, 134, 196);
12
+ --color-drag2: rgb(119, 166, 119);
13
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
14
+ --color-drag2-background: rgba(119, 166, 119, 0.075);
15
+ --font-size: medium;
16
+ --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: gray;
18
+ --color-icon: gray;
19
+ --color-tabset-background: var(--color-background);
20
+ --color-tabset-background-selected: var(--color-1);
21
+ --color-tabset-background-maximized: var(--color-2);
22
+ --color-tabset-divider-line: var(--color-4);
23
+ --color-tabset-header-background: var(--color-background);
24
+ --color-tabset-header: var(--color-text);
25
+ --color-border-tab-content: var(--color-background);
26
+ --color-border-background: var(--color-background);
27
+ --color-border-divider-line: var(--color-4);
28
+ --color-tab-content: var(--color-background);
29
+ --color-tab-selected: var(--color-text);
30
+ --color-tab-selected-background: var(--color-4);
31
+ --color-tab-unselected: gray;
32
+ --color-tab-unselected-background: transparent;
33
+ --color-tab-textbox: var(--color-text);
34
+ --color-tab-textbox-background: var(--color-3);
35
+ --color-border-tab-selected: var(--color-text);
36
+ --color-border-tab-selected-background: var(--color-4);
37
+ --color-border-tab-unselected: gray;
38
+ --color-border-tab-unselected-background: var(--color-2);
39
+ --color-splitter: var(--color-1);
40
+ --color-splitter-hover: var(--color-4);
41
+ --color-splitter-drag: var(--color-4);
42
+ --color-drag-rect-border: #ccc;
43
+ --color-drag-rect-background: var(--color-5);
44
+ --color-drag-rect: var(--color-text);
45
+ --color-popup-border: var(--color-6);
46
+ --color-popup-unselected: var(--color-text);
47
+ --color-popup-unselected-background: white;
48
+ --color-popup-selected: var(--color-text);
49
+ --color-popup-selected-background: var(--color-3);
50
+ --color-edge-marker: #aaa;
51
+ --color-edge-icon: #555;
52
+ --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
53
+ --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
54
+ --size-mini-scroll-indicator: 3px;
55
+ --color-toolbar-button-hover: var(--color-3);
56
+ }
57
+
58
+ .flexlayout__theme_dark .flexlayout__layout {
59
+ --color-text: #eeeeee;
60
+ --color-background: black;
61
+ --color-base: black;
62
+ --color-1: rgb(17.85, 17.85, 17.85);
63
+ --color-2: rgb(25.5, 25.5, 25.5);
64
+ --color-3: rgb(38.25, 38.25, 38.25);
65
+ --color-4: #333333;
66
+ --color-5: rgb(63.75, 63.75, 63.75);
67
+ --color-6: rgb(76.5, 76.5, 76.5);
68
+ --color-drag1: rgb(207, 232, 255);
69
+ --color-drag2: rgb(183, 209, 181);
70
+ --color-drag1-background: rgba(128, 128, 128, 0.15);
71
+ --color-drag2-background: rgba(128, 128, 128, 0.15);
72
+ --font-size: medium;
73
+ --font-family: Roboto, Arial, sans-serif;
74
+ --color-overflow: gray;
75
+ --color-icon: gray;
76
+ --color-tabset-background: var(--color-1);
77
+ --color-tabset-background-selected: var(--color-1);
78
+ --color-tabset-background-maximized: var(--color-6);
79
+ --color-tabset-divider-line: var(--color-4);
80
+ --color-tabset-header-background: var(--color-1);
81
+ --color-tabset-header: var(--color-text);
82
+ --color-border-tab-content: var(--color-background);
83
+ --color-border-background: var(--color-1);
84
+ --color-border-divider-line: var(--color-4);
85
+ --color-tab-content: var(--color-background);
86
+ --color-tab-selected: var(--color-text);
87
+ --color-tab-selected-background: var(--color-4);
88
+ --color-tab-unselected: gray;
89
+ --color-tab-unselected-background: transparent;
90
+ --color-tab-textbox: var(--color-text);
91
+ --color-tab-textbox-background: var(--color-3);
92
+ --color-border-tab-selected: var(--color-text);
93
+ --color-border-tab-selected-background: var(--color-4);
94
+ --color-border-tab-unselected: gray;
95
+ --color-border-tab-unselected-background: var(--color-2);
96
+ --color-splitter: var(--color-2);
97
+ --color-splitter-hover: var(--color-4);
98
+ --color-splitter-drag: var(--color-5);
99
+ --color-drag-rect-border: var(--color-4);
100
+ --color-drag-rect-background: var(--color-1);
101
+ --color-drag-rect: var(--color-text);
102
+ --color-popup-border: var(--color-6);
103
+ --color-popup-unselected: var(--color-text);
104
+ --color-popup-unselected-background: var(--color-background);
105
+ --color-popup-selected: var(--color-text);
106
+ --color-popup-selected-background: var(--color-4);
107
+ --color-edge-marker: gray;
108
+ --color-edge-icon: #eee;
109
+ --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
110
+ --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);
111
+ --size-mini-scroll-indicator: 3px;
112
+ --color-toolbar-button-hover: var(--color-4);
113
+ }
114
+
115
+ .flexlayout__theme_gray .flexlayout__layout {
116
+ --color-text: black;
117
+ --color-background: white;
118
+ --color-base: white;
119
+ --color-1: rgb(247.35, 247.35, 247.35);
120
+ --color-2: rgb(229.5, 229.5, 229.5);
121
+ --color-3: rgb(216.75, 216.75, 216.75);
122
+ --color-4: #cccccc;
123
+ --color-5: rgb(191.25, 191.25, 191.25);
124
+ --color-6: rgb(178.5, 178.5, 178.5);
125
+ --color-drag1: rgb(95, 134, 196);
126
+ --color-drag2: rgb(119, 166, 119);
127
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
128
+ --color-drag2-background: rgba(119, 166, 119, 0.075);
129
+ --font-size: medium;
130
+ --font-family: Roboto, Arial, sans-serif;
131
+ --color-overflow: gray;
132
+ --color-icon: gray;
133
+ --color-tabset-background: var(--color-1);
134
+ --color-tabset-background-selected: var(--color-1);
135
+ --color-tabset-background-maximized: var(--color-6);
136
+ --color-tabset-divider-line: var(--color-3);
137
+ --color-tabset-header-background: var(--color-1);
138
+ --color-tabset-header: var(--color-text);
139
+ --color-border-tab-content: var(--color-background);
140
+ --color-border-background: var(--color-1);
141
+ --color-border-divider-line: var(--color-3);
142
+ --color-tab-content: var(--color-background);
143
+ --color-tab-selected: var(--color-text);
144
+ --color-tab-selected-background: var(--color-3);
145
+ --color-tab-unselected: gray;
146
+ --color-tab-unselected-background: transparent;
147
+ --color-tab-textbox: var(--color-text);
148
+ --color-tab-textbox-background: var(--color-3);
149
+ --color-border-tab-selected: var(--color-text);
150
+ --color-border-tab-selected-background: var(--color-3);
151
+ --color-border-tab-unselected: gray;
152
+ --color-border-tab-unselected-background: var(--color-2);
153
+ --color-splitter: var(--color-2);
154
+ --color-splitter-hover: var(--color-4);
155
+ --color-splitter-drag: var(--color-5);
156
+ --color-drag-rect-border: var(--color-4);
157
+ --color-drag-rect-background: var(--color-3);
158
+ --color-drag-rect: var(--color-text);
159
+ --color-popup-border: var(--color-6);
160
+ --color-popup-unselected: var(--color-text);
161
+ --color-popup-unselected-background: white;
162
+ --color-popup-selected: var(--color-text);
163
+ --color-popup-selected-background: var(--color-3);
164
+ --color-edge-marker: #aaa;
165
+ --color-edge-icon: #555;
166
+ --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
167
+ --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
168
+ --size-mini-scroll-indicator: 3px;
169
+ --color-toolbar-button-hover: var(--color-4);
170
+ }
171
+
172
+ .flexlayout__theme_underline .flexlayout__layout {
173
+ --color-text: black;
174
+ --color-background: white;
175
+ --color-base: white;
176
+ --color-1: rgb(249.9, 249.9, 249.9);
177
+ --color-2: rgb(244.8, 244.8, 244.8);
178
+ --color-3: rgb(237.15, 237.15, 237.15);
179
+ --color-4: rgb(229.5, 229.5, 229.5);
180
+ --color-5: rgb(221.85, 221.85, 221.85);
181
+ --color-6: rgb(214.2, 214.2, 214.2);
182
+ --color-drag1: rgb(95, 134, 196);
183
+ --color-drag2: rgb(119, 166, 119);
184
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
185
+ --color-drag2-background: rgba(119, 166, 119, 0.075);
186
+ --font-size: medium;
187
+ --font-family: Roboto, Arial, sans-serif;
188
+ --color-overflow: gray;
189
+ --color-icon: gray;
190
+ --color-tabset-background: var(--color-background);
191
+ --color-tabset-background-selected: var(--color-1);
192
+ --color-tabset-background-maximized: var(--color-6);
193
+ --color-tabset-divider-line: var(--color-3);
194
+ --color-tabset-header-background: var(--color-background);
195
+ --color-tabset-header: var(--color-text);
196
+ --color-border-tab-content: var(--color-background);
197
+ --color-border-background: var(--color-background);
198
+ --color-border-divider-line: var(--color-3);
199
+ --color-tab-content: var(--color-background);
200
+ --color-tab-selected: var(--color-text);
201
+ --color-tab-selected-background: transparent;
202
+ --color-tab-unselected: gray;
203
+ --color-tab-unselected-background: transparent;
204
+ --color-tab-textbox: var(--color-text);
205
+ --color-tab-textbox-background: var(--color-3);
206
+ --color-border-tab-selected: var(--color-text);
207
+ --color-border-tab-selected-background: transparent;
208
+ --color-border-tab-unselected: gray;
209
+ --color-border-tab-unselected-background: transparent;
210
+ --color-splitter: var(--color-1);
211
+ --color-splitter-hover: var(--color-4);
212
+ --color-splitter-drag: var(--color-4);
213
+ --color-drag-rect-border: var(--color-6);
214
+ --color-drag-rect-background: var(--color-4);
215
+ --color-drag-rect: var(--color-text);
216
+ --color-popup-border: var(--color-6);
217
+ --color-popup-unselected: var(--color-text);
218
+ --color-popup-unselected-background: white;
219
+ --color-popup-selected: var(--color-text);
220
+ --color-popup-selected-background: var(--color-3);
221
+ --color-edge-marker: #aaa;
222
+ --color-edge-icon: #555;
223
+ --color-underline: rgb(65, 105, 225);
224
+ --color-underline-hover: #aaa;
225
+ --underline_height: 3px;
226
+ --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
227
+ --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
228
+ --size-mini-scroll-indicator: 4px;
229
+ --color-toolbar-button-hover: var(--color-3);
230
+ }
231
+
232
+ .flexlayout__theme_rounded .flexlayout__layout {
233
+ --color-text: black;
234
+ --color-background: #f2f6fb;
235
+ --color-base: #f2f6fb;
236
+ --color-1: rgb(230.3, 237.9, 247.4);
237
+ --color-2: rgb(218.6, 229.8, 243.8);
238
+ --color-3: rgb(206.9, 221.7, 240.2);
239
+ --color-4: rgb(195.2, 213.6, 236.6);
240
+ --color-5: rgb(183.5, 205.5, 233);
241
+ --color-6: rgb(171.8, 197.4, 229.4);
242
+ --color-drag1: rgb(95, 134, 196);
243
+ --color-drag2: rgb(95, 134, 196);
244
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
245
+ --color-drag2-background: rgba(95, 134, 196, 0.1);
246
+ --font-size: medium;
247
+ --font-family: Roboto, Arial, sans-serif;
248
+ --color-overflow: #999db2;
249
+ --color-icon: #999db2;
250
+ --color-tabset-background: white;
251
+ --color-tabset-background-selected: white;
252
+ --color-tabset-background-maximized: white;
253
+ --color-tabset-divider-line: white;
254
+ --color-tabset-header-background: var(--color-background);
255
+ --color-tabset-header: var(--color-text);
256
+ --color-border-tab-content: white;
257
+ --color-border-background: var(--color-background);
258
+ --color-border-divider-line: var(--color-background);
259
+ --color-tab-content: white;
260
+ --color-tab-selected: var(--color-text);
261
+ --color-tab-selected-background: var(--color-2);
262
+ --color-tab-unselected: gray;
263
+ --color-tab-unselected-background: #d3d4e745;
264
+ --color-tab-textbox: var(--color-text);
265
+ --color-tab-textbox-background: var(--color-3);
266
+ --color-border-tab-selected: var(--color-text);
267
+ --color-border-tab-selected-background: var(--color-2);
268
+ --color-border-tab-unselected: gray;
269
+ --color-border-tab-unselected-background: #d3d4e745;
270
+ --color-splitter: #f2f6fb;
271
+ --color-splitter-hover: var(--color-4);
272
+ --color-splitter-drag: var(--color-4);
273
+ --color-drag-rect-border: #ccc;
274
+ --color-drag-rect-background: var(--color-5);
275
+ --color-drag-rect: var(--color-text);
276
+ --color-popup-border: var(--color-6);
277
+ --color-popup-unselected: var(--color-text);
278
+ --color-popup-unselected-background: #f2f6fb;
279
+ --color-popup-selected: var(--color-text);
280
+ --color-popup-selected-background: var(--color-3);
281
+ --color-edge-marker: #a6bbdf;
282
+ --color-edge-icon: #555;
283
+ --color-mini-scroll-indicator: rgba(180, 200, 230, 0.5);
284
+ --color-mini-scroll-indicator-hovered: rgba(180, 200, 230, 0.7);
285
+ --size-mini-scroll-indicator: 4px;
286
+ --color-toolbar-button-hover: var(--color-2);
287
+ }
288
+
289
+ /*
290
+ base classes
291
+ */
292
+ .flexlayout__layout {
293
+ left: 0;
294
+ top: 0;
295
+ right: 0;
296
+ bottom: 0;
297
+ position: absolute;
298
+ display: flex;
299
+ background-color: var(--color-background);
300
+ }
301
+ .flexlayout__layout_overlay {
302
+ left: 0;
303
+ top: 0;
304
+ right: 0;
305
+ bottom: 0;
306
+ position: absolute;
307
+ z-index: 1000;
308
+ }
309
+ .flexlayout__layout_tab_stamps {
310
+ position: absolute;
311
+ top: -10000px;
312
+ z-index: 100;
313
+ display: flex;
314
+ flex-direction: column;
315
+ align-items: start;
316
+ }
317
+ .flexlayout__layout_moveables {
318
+ visibility: hidden;
319
+ position: absolute;
320
+ width: 100px;
321
+ height: 100px;
322
+ top: -20000px;
323
+ }
324
+ .flexlayout__layout_main {
325
+ display: flex;
326
+ flex-basis: 0px;
327
+ min-width: 0;
328
+ min-height: 0;
329
+ flex-grow: 1;
330
+ position: relative;
331
+ }
332
+ .flexlayout__layout_border_container {
333
+ display: flex;
334
+ flex-basis: 0px;
335
+ min-width: 0;
336
+ min-height: 0;
337
+ flex-grow: 1;
338
+ }
339
+ .flexlayout__layout_border_container_inner {
340
+ display: flex;
341
+ flex-basis: 0px;
342
+ min-width: 0;
343
+ min-height: 0;
344
+ flex-grow: 1;
345
+ }
346
+ .flexlayout__splitter {
347
+ display: flex;
348
+ align-items: center;
349
+ justify-content: center;
350
+ background-color: var(--color-splitter);
351
+ touch-action: none;
352
+ z-index: 10;
353
+ }
354
+ @media (hover: hover) {
355
+ .flexlayout__splitter:hover {
356
+ background-color: var(--color-splitter-hover);
357
+ transition: background-color ease-in 0.1s;
358
+ transition-delay: 0.05s;
359
+ }
360
+ }
361
+ .flexlayout__splitter_drag {
362
+ position: absolute;
363
+ display: flex;
364
+ align-items: center;
365
+ justify-content: center;
366
+ z-index: 1000;
367
+ border-radius: 5px;
368
+ background-color: var(--color-splitter-drag);
369
+ }
370
+ .flexlayout__splitter_handle {
371
+ background-color: #ccc;
372
+ border-radius: 3px;
373
+ }
374
+ .flexlayout__splitter_handle_horz {
375
+ width: 3px;
376
+ height: 30px;
377
+ }
378
+ .flexlayout__splitter_handle_vert {
379
+ width: 30px;
380
+ height: 3px;
381
+ }
382
+ .flexlayout__splitter_extra {
383
+ touch-action: none;
384
+ background-color: transparent;
385
+ }
386
+ .flexlayout__outline_rect {
387
+ position: absolute;
388
+ pointer-events: none;
389
+ box-sizing: border-box;
390
+ border: 2px solid var(--color-drag1);
391
+ background: var(--color-drag1-background);
392
+ border-radius: 5px;
393
+ z-index: 1000;
394
+ }
395
+ .flexlayout__outline_rect_edge {
396
+ pointer-events: none;
397
+ border: 2px solid var(--color-drag2);
398
+ background: var(--color-drag2-background);
399
+ border-radius: 5px;
400
+ z-index: 1000;
401
+ box-sizing: border-box;
402
+ }
403
+ .flexlayout__edge_rect {
404
+ position: absolute;
405
+ z-index: 1000;
406
+ background-color: var(--color-edge-marker);
407
+ pointer-events: none;
408
+ display: flex;
409
+ align-items: center;
410
+ justify-content: center;
411
+ }
412
+ .flexlayout__drag_rect {
413
+ color: var(--color-drag-rect);
414
+ background-color: var(--color-drag-rect-background);
415
+ border: 2px solid var(--color-drag-rect-border);
416
+ border-radius: 5px;
417
+ box-sizing: border-box;
418
+ display: flex;
419
+ justify-content: center;
420
+ flex-direction: column;
421
+ overflow: hidden;
422
+ padding: 0.3em 0.8em;
423
+ word-wrap: break-word;
424
+ font-size: var(--font-size);
425
+ font-family: var(--font-family);
426
+ }
427
+ .flexlayout__row {
428
+ display: flex;
429
+ flex-basis: 0px;
430
+ min-width: 0;
431
+ min-height: 0;
432
+ position: relative;
433
+ box-sizing: border-box;
434
+ overflow: hidden;
435
+ }
436
+ .flexlayout__tabset {
437
+ display: flex;
438
+ flex-direction: column;
439
+ position: relative;
440
+ background-color: var(--color-tabset-background);
441
+ box-sizing: border-box;
442
+ font-family: var(--font-family);
443
+ overflow: hidden;
444
+ flex-grow: 1;
445
+ }
446
+ .flexlayout__tabset_container {
447
+ display: flex;
448
+ flex-basis: 0px;
449
+ min-width: 0;
450
+ min-height: 0;
451
+ flex-direction: column;
452
+ overflow: hidden;
453
+ flex-grow: 1;
454
+ }
455
+ .flexlayout__tabset_tab_divider {
456
+ width: 4px;
457
+ }
458
+ .flexlayout__tabset_content {
459
+ display: flex;
460
+ flex-basis: 0px;
461
+ min-width: 0;
462
+ min-height: 0;
463
+ flex-grow: 1;
464
+ box-sizing: border-box;
465
+ position: relative;
466
+ }
467
+ .flexlayout__tabset_header {
468
+ display: flex;
469
+ align-items: center;
470
+ padding: 3px 3px 3px 5px;
471
+ box-sizing: border-box;
472
+ border-bottom: 1px solid var(--color-tabset-divider-line);
473
+ color: var(--color-tabset-header);
474
+ background-color: var(--color-tabset-header-background);
475
+ font-size: var(--font-size);
476
+ }
477
+ .flexlayout__tabset_header_content {
478
+ flex-grow: 1;
479
+ }
480
+ .flexlayout__tabset_tabbar_outer {
481
+ box-sizing: border-box;
482
+ background-color: var(--color-tabset-background);
483
+ overflow: hidden;
484
+ display: flex;
485
+ font-size: var(--font-size);
486
+ }
487
+ .flexlayout__tabset_tabbar_outer_top {
488
+ padding: 0px 2px 0px 2px;
489
+ border-bottom: 1px solid var(--color-tabset-divider-line);
490
+ }
491
+ .flexlayout__tabset_tabbar_outer_bottom {
492
+ padding: 0px 2px 0px 2px;
493
+ border-top: 1px solid var(--color-tabset-divider-line);
494
+ }
495
+ .flexlayout__tabset_tabbar_inner {
496
+ position: relative;
497
+ box-sizing: border-box;
498
+ display: flex;
499
+ flex-grow: 1;
500
+ scrollbar-width: none;
501
+ }
502
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
503
+ display: none;
504
+ }
505
+ .flexlayout__tabset_tabbar_inner_tab_container {
506
+ position: relative;
507
+ display: flex;
508
+ padding-left: 4px;
509
+ padding-right: 4px;
510
+ box-sizing: border-box;
511
+ white-space: nowrap;
512
+ }
513
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
514
+ border-top: 2px solid transparent;
515
+ }
516
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
517
+ border-bottom: 2px solid transparent;
518
+ }
519
+ .flexlayout__tabset-selected {
520
+ background-color: var(--color-tabset-background-selected);
521
+ }
522
+ .flexlayout__tabset-maximized {
523
+ background-color: var(--color-tabset-background-maximized);
524
+ }
525
+ .flexlayout__tab_button_stamp {
526
+ display: inline-flex;
527
+ align-items: center;
528
+ gap: 0.3em;
529
+ white-space: nowrap;
530
+ box-sizing: border-box;
531
+ }
532
+ .flexlayout__tab {
533
+ overflow: hidden;
534
+ box-sizing: border-box;
535
+ background-color: var(--color-tab-content);
536
+ color: var(--color-text);
537
+ position: relative;
538
+ }
539
+ .flexlayout__tab_moveable {
540
+ position: relative;
541
+ height: 100%;
542
+ min-width: 1px;
543
+ min-height: 1px;
544
+ overflow: auto;
545
+ box-sizing: border-box;
546
+ }
547
+ .flexlayout__tab_overlay {
548
+ z-index: 20;
549
+ position: absolute;
550
+ top: 0;
551
+ left: 0;
552
+ right: 0;
553
+ bottom: 0;
554
+ background-color: rgba(0, 0, 0, 0.2392156863);
555
+ }
556
+ .flexlayout__tab_button {
557
+ display: flex;
558
+ gap: 0.3em;
559
+ align-items: center;
560
+ box-sizing: border-box;
561
+ padding: 3px 0.5em;
562
+ cursor: pointer;
563
+ }
564
+ .flexlayout__tab_button_stretch {
565
+ background-color: transparent;
566
+ color: var(--color-tab-selected);
567
+ width: 100%;
568
+ padding: 3px 0em;
569
+ text-wrap: nowrap;
570
+ display: flex;
571
+ gap: 0.3em;
572
+ align-items: center;
573
+ box-sizing: border-box;
574
+ cursor: pointer;
575
+ }
576
+ @media (hover: hover) {
577
+ .flexlayout__tab_button_stretch:hover {
578
+ color: var(--color-tab-selected);
579
+ }
580
+ }
581
+ .flexlayout__tab_button--selected {
582
+ background-color: var(--color-tab-selected-background);
583
+ color: var(--color-tab-selected);
584
+ }
585
+ @media (hover: hover) {
586
+ .flexlayout__tab_button:hover {
587
+ color: var(--color-tab-selected);
588
+ }
589
+ }
590
+ .flexlayout__tab_button--unselected {
591
+ background-color: var(--color-tab-unselected-background);
592
+ color: var(--color-tab-unselected);
593
+ }
594
+ .flexlayout__tab_button_leading {
595
+ display: flex;
596
+ }
597
+ .flexlayout__tab_button_content {
598
+ display: flex;
599
+ text-wrap: nowrap;
600
+ }
601
+ .flexlayout__tab_button_textbox {
602
+ border: none;
603
+ font-family: var(--font-family);
604
+ font-size: var(--font-size);
605
+ color: var(--color-tab-textbox);
606
+ background-color: var(--color-tab-textbox-background);
607
+ border: 1px inset var(--color-1);
608
+ border-radius: 3px;
609
+ width: 10em;
610
+ }
611
+ .flexlayout__tab_button_textbox:focus {
612
+ outline: none;
613
+ }
614
+ .flexlayout__tab_button_trailing {
615
+ display: flex;
616
+ visibility: hidden;
617
+ border-radius: 4px;
618
+ }
619
+ .flexlayout__tab_button_trailing:hover {
620
+ background-color: var(--color-toolbar-button-hover);
621
+ }
622
+ @media (hover: hover) {
623
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
624
+ visibility: visible;
625
+ }
626
+ }
627
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
628
+ visibility: visible;
629
+ }
630
+ .flexlayout__tab_button_overflow {
631
+ display: flex;
632
+ align-items: center;
633
+ border: none;
634
+ color: var(--color-overflow);
635
+ font-size: inherit;
636
+ background-color: transparent;
637
+ width: 2em;
638
+ overflow: hidden;
639
+ }
640
+ .flexlayout__tab_toolbar {
641
+ display: flex;
642
+ align-items: center;
643
+ gap: 0.3em;
644
+ padding-left: 0.5em;
645
+ padding-right: 0.3em;
646
+ }
647
+ .flexlayout__tab_toolbar_icon {
648
+ border: none;
649
+ outline: none;
650
+ font-size: inherit;
651
+ margin: 0px;
652
+ background-color: transparent;
653
+ padding: 1px;
654
+ }
655
+ .flexlayout__tab_toolbar_button {
656
+ border: none;
657
+ outline: none;
658
+ font-size: inherit;
659
+ margin: 0px;
660
+ background-color: transparent;
661
+ border-radius: 4px;
662
+ padding: 1px;
663
+ }
664
+ @media (hover: hover) {
665
+ .flexlayout__tab_toolbar_button:hover {
666
+ background-color: var(--color-toolbar-button-hover);
667
+ }
668
+ }
669
+ .flexlayout__tab_toolbar_sticky_buttons_container {
670
+ display: flex;
671
+ gap: 0.3em;
672
+ padding-left: 5px;
673
+ align-items: center;
674
+ }
675
+ .flexlayout__border {
676
+ box-sizing: border-box;
677
+ overflow: hidden;
678
+ display: flex;
679
+ font-size: var(--font-size);
680
+ font-family: var(--font-family);
681
+ color: var(--color-border);
682
+ background-color: var(--color-border-background);
683
+ }
684
+ .flexlayout__border_tab_contents {
685
+ box-sizing: border-box;
686
+ overflow: hidden;
687
+ background-color: var(--color-border-tab-content);
688
+ }
689
+ .flexlayout__border_top {
690
+ border-bottom: 1px solid var(--color-border-divider-line);
691
+ align-items: center;
692
+ }
693
+ .flexlayout__border_bottom {
694
+ border-top: 1px solid var(--color-border-divider-line);
695
+ align-items: center;
696
+ }
697
+ .flexlayout__border_left {
698
+ border-right: 1px solid var(--color-border-divider-line);
699
+ align-content: center;
700
+ flex-direction: column;
701
+ }
702
+ .flexlayout__border_right {
703
+ border-left: 1px solid var(--color-border-divider-line);
704
+ align-content: center;
705
+ flex-direction: column;
706
+ }
707
+ .flexlayout__border_inner {
708
+ position: relative;
709
+ box-sizing: border-box;
710
+ align-items: center;
711
+ display: flex;
712
+ flex-grow: 1;
713
+ scrollbar-width: none;
714
+ }
715
+ .flexlayout__border_inner::-webkit-scrollbar {
716
+ display: none;
717
+ }
718
+ .flexlayout__border_inner_tab_container {
719
+ white-space: nowrap;
720
+ display: flex;
721
+ padding-left: 2px;
722
+ padding-right: 2px;
723
+ box-sizing: border-box;
724
+ position: absolute;
725
+ }
726
+ .flexlayout__border_inner_tab_container_right {
727
+ transform-origin: top left;
728
+ transform: rotate(90deg);
729
+ }
730
+ .flexlayout__border_inner_tab_container_left {
731
+ flex-direction: row-reverse;
732
+ transform-origin: top right;
733
+ transform: rotate(-90deg);
734
+ }
735
+ .flexlayout__border_tab_divider {
736
+ width: 4px;
737
+ }
738
+ .flexlayout__border_button {
739
+ display: flex;
740
+ gap: 0.3em;
741
+ align-items: center;
742
+ cursor: pointer;
743
+ padding: 3px 0.5em;
744
+ margin: 2px 0px;
745
+ box-sizing: border-box;
746
+ white-space: nowrap;
747
+ }
748
+ .flexlayout__border_button--selected {
749
+ background-color: var(--color-border-tab-selected-background);
750
+ color: var(--color-border-tab-selected);
751
+ }
752
+ @media (hover: hover) {
753
+ .flexlayout__border_button:hover {
754
+ color: var(--color-border-tab-selected);
755
+ }
756
+ }
757
+ .flexlayout__border_button--unselected {
758
+ background-color: var(--color-border-tab-unselected-background);
759
+ color: var(--color-border-tab-unselected);
760
+ }
761
+ .flexlayout__border_button_leading {
762
+ display: flex;
763
+ }
764
+ .flexlayout__border_button_content {
765
+ display: flex;
766
+ }
767
+ .flexlayout__border_button_trailing {
768
+ display: flex;
769
+ border-radius: 4px;
770
+ visibility: hidden;
771
+ }
772
+ @media (hover: hover) {
773
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
774
+ visibility: visible;
775
+ }
776
+ }
777
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
778
+ visibility: visible;
779
+ }
780
+ .flexlayout__border_toolbar {
781
+ display: flex;
782
+ gap: 0.3em;
783
+ align-items: center;
784
+ }
785
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
786
+ flex-direction: column;
787
+ padding-top: 0.5em;
788
+ padding-bottom: 0.3em;
789
+ }
790
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
791
+ padding-left: 0.5em;
792
+ padding-right: 0.3em;
793
+ }
794
+ .flexlayout__border_toolbar_button {
795
+ border: none;
796
+ outline: none;
797
+ font-size: inherit;
798
+ background-color: transparent;
799
+ border-radius: 4px;
800
+ padding: 1px;
801
+ }
802
+ @media (hover: hover) {
803
+ .flexlayout__border_toolbar_button:hover {
804
+ background-color: var(--color-toolbar-button-hover);
805
+ }
806
+ }
807
+ .flexlayout__border_toolbar_button_overflow {
808
+ display: flex;
809
+ align-items: center;
810
+ border: none;
811
+ color: var(--color-overflow);
812
+ font-size: inherit;
813
+ background-color: transparent;
814
+ width: 1.5em;
815
+ }
816
+ .flexlayout__popup_menu {
817
+ font-size: var(--font-size);
818
+ font-family: var(--font-family);
819
+ }
820
+ .flexlayout__popup_menu_item {
821
+ padding: 2px 0.5em;
822
+ white-space: nowrap;
823
+ cursor: pointer;
824
+ border-radius: 2px;
825
+ }
826
+ .flexlayout__popup_menu_item--selected {
827
+ font-weight: 500;
828
+ background-color: var(--color-tab-selected-background);
829
+ color: var(--color-tab-selected);
830
+ }
831
+ @media (hover: hover) {
832
+ .flexlayout__popup_menu_item:hover {
833
+ background-color: var(--color-6);
834
+ }
835
+ }
836
+ .flexlayout__popup_menu_container {
837
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
838
+ border: 1px solid var(--color-popup-border);
839
+ color: var(--color-popup-unselected);
840
+ background: var(--color-popup-unselected-background);
841
+ border-radius: 3px;
842
+ position: absolute;
843
+ z-index: 1000;
844
+ max-height: 50%;
845
+ min-width: 100px;
846
+ overflow: auto;
847
+ padding: 2px;
848
+ }
849
+ .flexlayout__floating_window _body {
850
+ height: 100%;
851
+ }
852
+ .flexlayout__floating_window_content {
853
+ left: 0;
854
+ top: 0;
855
+ right: 0;
856
+ bottom: 0;
857
+ position: absolute;
858
+ }
859
+ .flexlayout__error_boundary_container {
860
+ left: 0;
861
+ top: 0;
862
+ right: 0;
863
+ bottom: 0;
864
+ position: absolute;
865
+ display: flex;
866
+ justify-content: center;
867
+ }
868
+ .flexlayout__error_boundary_content {
869
+ display: flex;
870
+ align-items: center;
871
+ }
872
+ .flexlayout__border_sizer {
873
+ position: absolute;
874
+ top: -30000px;
875
+ padding-top: 6px;
876
+ padding-bottom: 5px;
877
+ font-size: var(--font-size);
878
+ font-family: var(--font-family);
879
+ }
880
+ .flexlayout__mini_scrollbar {
881
+ position: absolute;
882
+ background-color: var(--color-mini-scroll-indicator);
883
+ border-radius: 5px;
884
+ width: var(--size-mini-scroll-indicator);
885
+ height: var(--size-mini-scroll-indicator);
886
+ visibility: hidden;
887
+ opacity: 0;
888
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
889
+ }
890
+ .flexlayout__mini_scrollbar:hover {
891
+ background-color: var(--color-mini-scroll-indicator-hovered);
892
+ transition: background-color 0.3s ease-in-out;
893
+ }
894
+ .flexlayout__mini_scrollbar_container {
895
+ position: relative;
896
+ display: flex;
897
+ flex-grow: 1;
898
+ overflow: hidden;
899
+ }
900
+ @media (hover: hover) {
901
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
902
+ opacity: 1;
903
+ visibility: visible;
904
+ }
905
+ }
906
+
907
+ /* ======================== End of Base Classes =========================== */
908
+ .flexlayout__theme_light {
909
+ /*
910
+ light theme overrides
911
+ */
912
+ }
913
+
914
+ .flexlayout__theme_dark {
915
+ /*
916
+ dark theme overrides
917
+ */
918
+ }
919
+ .flexlayout__theme_dark .flexlayout__tabset_header {
920
+ box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
921
+ }
922
+ .flexlayout__theme_dark .flexlayout__tabset-selected {
923
+ background-image: linear-gradient(var(--color-background), var(--color-4));
924
+ }
925
+ .flexlayout__theme_dark .flexlayout__tabset-maximized {
926
+ background-image: linear-gradient(var(--color-6), var(--color-2));
927
+ }
928
+ .flexlayout__theme_dark .flexlayout__tab_top {
929
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
930
+ border-top-left-radius: 3px;
931
+ border-top-right-radius: 3px;
932
+ }
933
+ .flexlayout__theme_dark .flexlayout__tab_bottom {
934
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
935
+ border-bottom-left-radius: 3px;
936
+ border-bottom-right-radius: 3px;
937
+ }
938
+ .flexlayout__theme_dark .flexlayout__border_button {
939
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
940
+ border-radius: 3px;
941
+ }
942
+
943
+ .flexlayout__theme_gray {
944
+ /*
945
+ gray theme overrides
946
+ */
947
+ }
948
+ .flexlayout__theme_gray .flexlayout__tabset-selected {
949
+ background-image: linear-gradient(var(--color-background), var(--color-4));
950
+ }
951
+ .flexlayout__theme_gray .flexlayout__tabset_header {
952
+ box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
953
+ }
954
+ .flexlayout__theme_gray .flexlayout__tabset-selected {
955
+ background-image: linear-gradient(var(--color-background), var(--color-3));
956
+ }
957
+ .flexlayout__theme_gray .flexlayout__tabset-maximized {
958
+ background-image: linear-gradient(var(--color-3), var(--color-1));
959
+ }
960
+ .flexlayout__theme_gray .flexlayout__tab_button_top {
961
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
962
+ border-top-left-radius: 3px;
963
+ border-top-right-radius: 3px;
964
+ }
965
+ .flexlayout__theme_gray .flexlayout__tab_button_bottom {
966
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
967
+ border-bottom-left-radius: 3px;
968
+ border-bottom-right-radius: 3px;
969
+ }
970
+ .flexlayout__theme_gray .flexlayout__border_button {
971
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
972
+ border-radius: 3px;
973
+ }
974
+
975
+ .flexlayout__theme_underline {
976
+ /*
977
+ underline theme overrides
978
+ */
979
+ }
980
+ .flexlayout__theme_underline .flexlayout__tab_button {
981
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
982
+ }
983
+ .flexlayout__theme_underline .flexlayout__tab_button--selected {
984
+ border-bottom: var(--underline_height) solid var(--color-underline);
985
+ }
986
+ .flexlayout__theme_underline .flexlayout__tab_button--unselected {
987
+ border-bottom: var(--underline_height) solid transparent;
988
+ }
989
+ .flexlayout__theme_underline .flexlayout__border_button {
990
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
991
+ }
992
+ .flexlayout__theme_underline .flexlayout__border_button--selected {
993
+ border-bottom: var(--underline_height) solid var(--color-underline);
994
+ }
995
+ .flexlayout__theme_underline .flexlayout__border_button--unselected {
996
+ border-bottom: var(--underline_height) solid transparent;
997
+ }
998
+ .flexlayout__theme_underline .flexlayout__tabset_tab_divider, .flexlayout__theme_underline .flexlayout__border_tab_divider {
999
+ width: 1px;
1000
+ margin: 4px 6px 4px 6px;
1001
+ border-left: 1px solid #ddd;
1002
+ }
1003
+ .flexlayout__theme_underline .flexlayout__tab_button_textbox {
1004
+ border: none;
1005
+ }
1006
+
1007
+ .flexlayout__theme_rounded {
1008
+ /*
1009
+ rounded theme overrides
1010
+ */
1011
+ }
1012
+ .flexlayout__theme_rounded .flexlayout__tabset {
1013
+ padding: 3px;
1014
+ border-radius: 10px;
1015
+ }
1016
+ .flexlayout__theme_rounded .flexlayout__tabset_content {
1017
+ padding: 1px 3px 3px 3px;
1018
+ border-bottom-left-radius: 10px;
1019
+ border-bottom-right-radius: 10px;
1020
+ }
1021
+ .flexlayout__theme_rounded .flexlayout__tab_border {
1022
+ border-radius: 10px;
1023
+ padding: 5px;
1024
+ }
1025
+ .flexlayout__theme_rounded .flexlayout__border_tab_contents {
1026
+ border-radius: 10px;
1027
+ }
1028
+ .flexlayout__theme_rounded .flexlayout__tab_button, .flexlayout__theme_rounded .flexlayout__border_button {
1029
+ border-radius: 10px;
1030
+ padding: 2px 0.8em;
1031
+ }
1032
+ .flexlayout__theme_rounded .flexlayout__tabset_tabbar_outer_top {
1033
+ border-bottom: unset;
1034
+ padding-bottom: 1px;
1035
+ }
1036
+ .flexlayout__theme_rounded .flexlayout__tabset_tabbar_inner_tab_container_top {
1037
+ border-bottom: 2px solid transparent;
1038
+ }
1039
+ .flexlayout__theme_rounded .flexlayout__border_bottom {
1040
+ border-top: 2px solid var(--color-border-divider-line);
1041
+ }
1042
+ .flexlayout__theme_rounded .flexlayout__border_sizer {
1043
+ padding-bottom: 6px;
1044
+ }
1045
+ .flexlayout__theme_rounded .flexlayout__tab_button_trailing:hover {
1046
+ background-color: var(--color-3);
1047
+ }
1048
+ .flexlayout__theme_rounded .flexlayout__border_button_trailing:hover {
1049
+ background-color: var(--color-3);
1050
+ }
1051
+ .flexlayout__theme_rounded .flexlayout__splitter {
1052
+ background-color: transparent;
1053
+ }
1054
+
1055
+ /*# sourceMappingURL=combined.css.map */