flexlayout-react 0.8.5 → 0.8.7

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 (54) hide show
  1. package/ChangeLog.txt +10 -0
  2. package/README.md +78 -2
  3. package/declarations/Rect.d.ts +2 -0
  4. package/declarations/Types.d.ts +0 -5
  5. package/declarations/view/Layout.d.ts +3 -1
  6. package/dist/flexlayout.js +6 -6
  7. package/dist/flexlayout_min.js +1 -1
  8. package/lib/Rect.js +6 -0
  9. package/lib/Rect.js.map +1 -1
  10. package/lib/Types.js +0 -5
  11. package/lib/Types.js.map +1 -1
  12. package/lib/model/TabSetNode.js +9 -4
  13. package/lib/model/TabSetNode.js.map +1 -1
  14. package/lib/view/BorderTabSet.js +1 -2
  15. package/lib/view/BorderTabSet.js.map +1 -1
  16. package/lib/view/Layout.js +3 -2
  17. package/lib/view/Layout.js.map +1 -1
  18. package/lib/view/TabOverflowHook.js +40 -43
  19. package/lib/view/TabOverflowHook.js.map +1 -1
  20. package/package.json +2 -2
  21. package/src/Rect.ts +8 -0
  22. package/src/Types.ts +0 -6
  23. package/src/model/TabSetNode.ts +8 -4
  24. package/src/view/BorderTabSet.tsx +1 -2
  25. package/src/view/Layout.tsx +9 -5
  26. package/src/view/TabOverflowHook.tsx +46 -51
  27. package/style/_base.scss +564 -614
  28. package/style/_themes.scss +646 -0
  29. package/style/combined.css +1053 -0
  30. package/style/combined.css.map +1 -0
  31. package/style/combined.scss +46 -0
  32. package/style/dark.css +41 -63
  33. package/style/dark.css.map +1 -1
  34. package/style/dark.scss +5 -185
  35. package/style/gray.css +54 -56
  36. package/style/gray.css.map +1 -1
  37. package/style/gray.scss +5 -184
  38. package/style/light.css +23 -52
  39. package/style/light.css.map +1 -1
  40. package/style/light.scss +5 -167
  41. package/style/rounded.css +42 -77
  42. package/style/rounded.css.map +1 -1
  43. package/style/rounded.scss +5 -215
  44. package/style/underline.css +45 -65
  45. package/style/underline.css.map +1 -1
  46. package/style/underline.scss +5 -190
  47. package/.editorconfig +0 -8
  48. package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -104
  49. package/.github/ISSUE_TEMPLATE/config.yml +0 -5
  50. package/.prettierrc.json +0 -3
  51. package/Screenshot_light.png +0 -0
  52. package/Screenshot_rounded.png +0 -0
  53. package/dist/bundles/demo.js +0 -232052
  54. package/dist/bundles/demo.js.map +0 -1
@@ -0,0 +1,1053 @@
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-2);
272
+ --color-splitter-drag: var(--color-2);
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
+ border-radius: 5px;
360
+ }
361
+ }
362
+ .flexlayout__splitter_drag {
363
+ position: absolute;
364
+ display: flex;
365
+ align-items: center;
366
+ justify-content: center;
367
+ z-index: 1000;
368
+ border-radius: 5px;
369
+ background-color: var(--color-splitter-drag);
370
+ }
371
+ .flexlayout__splitter_handle {
372
+ background-color: #ccc;
373
+ border-radius: 3px;
374
+ }
375
+ .flexlayout__splitter_handle_horz {
376
+ width: 3px;
377
+ height: 30px;
378
+ }
379
+ .flexlayout__splitter_handle_vert {
380
+ width: 30px;
381
+ height: 3px;
382
+ }
383
+ .flexlayout__splitter_extra {
384
+ touch-action: none;
385
+ background-color: transparent;
386
+ }
387
+ .flexlayout__outline_rect {
388
+ position: absolute;
389
+ pointer-events: none;
390
+ box-sizing: border-box;
391
+ border: 2px solid var(--color-drag1);
392
+ background: var(--color-drag1-background);
393
+ border-radius: 5px;
394
+ z-index: 1000;
395
+ }
396
+ .flexlayout__outline_rect_edge {
397
+ pointer-events: none;
398
+ border: 2px solid var(--color-drag2);
399
+ background: var(--color-drag2-background);
400
+ border-radius: 5px;
401
+ z-index: 1000;
402
+ box-sizing: border-box;
403
+ }
404
+ .flexlayout__edge_rect {
405
+ position: absolute;
406
+ z-index: 1000;
407
+ background-color: var(--color-edge-marker);
408
+ pointer-events: none;
409
+ display: flex;
410
+ align-items: center;
411
+ justify-content: center;
412
+ }
413
+ .flexlayout__drag_rect {
414
+ color: var(--color-drag-rect);
415
+ background-color: var(--color-drag-rect-background);
416
+ border: 2px solid var(--color-drag-rect-border);
417
+ border-radius: 5px;
418
+ box-sizing: border-box;
419
+ display: flex;
420
+ justify-content: center;
421
+ flex-direction: column;
422
+ overflow: hidden;
423
+ padding: 0.3em 0.8em;
424
+ word-wrap: break-word;
425
+ font-size: var(--font-size);
426
+ font-family: var(--font-family);
427
+ }
428
+ .flexlayout__row {
429
+ display: flex;
430
+ flex-basis: 0px;
431
+ min-width: 0;
432
+ min-height: 0;
433
+ position: relative;
434
+ box-sizing: border-box;
435
+ overflow: hidden;
436
+ }
437
+ .flexlayout__tabset {
438
+ display: flex;
439
+ flex-direction: column;
440
+ position: relative;
441
+ background-color: var(--color-tabset-background);
442
+ box-sizing: border-box;
443
+ font-family: var(--font-family);
444
+ overflow: hidden;
445
+ flex-grow: 1;
446
+ }
447
+ .flexlayout__tabset_container {
448
+ display: flex;
449
+ flex-basis: 0px;
450
+ min-width: 0;
451
+ min-height: 0;
452
+ flex-direction: column;
453
+ overflow: hidden;
454
+ flex-grow: 1;
455
+ }
456
+ .flexlayout__tabset_tab_divider {
457
+ width: 4px;
458
+ }
459
+ .flexlayout__tabset_content {
460
+ display: flex;
461
+ flex-basis: 0px;
462
+ min-width: 0;
463
+ min-height: 0;
464
+ flex-grow: 1;
465
+ box-sizing: border-box;
466
+ position: relative;
467
+ }
468
+ .flexlayout__tabset_header {
469
+ display: flex;
470
+ align-items: center;
471
+ padding: 3px 3px 3px 5px;
472
+ box-sizing: border-box;
473
+ border-bottom: 1px solid var(--color-tabset-divider-line);
474
+ color: var(--color-tabset-header);
475
+ background-color: var(--color-tabset-header-background);
476
+ font-size: var(--font-size);
477
+ }
478
+ .flexlayout__tabset_header_content {
479
+ flex-grow: 1;
480
+ }
481
+ .flexlayout__tabset_tabbar_outer {
482
+ box-sizing: border-box;
483
+ background-color: var(--color-tabset-background);
484
+ overflow: hidden;
485
+ display: flex;
486
+ font-size: var(--font-size);
487
+ }
488
+ .flexlayout__tabset_tabbar_outer_top {
489
+ padding: 0px 2px 0px 2px;
490
+ border-bottom: 1px solid var(--color-tabset-divider-line);
491
+ }
492
+ .flexlayout__tabset_tabbar_outer_bottom {
493
+ padding: 0px 2px 0px 2px;
494
+ border-top: 1px solid var(--color-tabset-divider-line);
495
+ }
496
+ .flexlayout__tabset_tabbar_inner {
497
+ position: relative;
498
+ box-sizing: border-box;
499
+ display: flex;
500
+ flex-grow: 1;
501
+ scrollbar-width: none;
502
+ }
503
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
504
+ display: none;
505
+ }
506
+ .flexlayout__tabset_tabbar_inner_tab_container {
507
+ position: relative;
508
+ display: flex;
509
+ padding-left: 4px;
510
+ padding-right: 4px;
511
+ box-sizing: border-box;
512
+ white-space: nowrap;
513
+ }
514
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
515
+ border-top: 2px solid transparent;
516
+ }
517
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
518
+ border-bottom: 2px solid transparent;
519
+ }
520
+ .flexlayout__tabset-selected {
521
+ background-color: var(--color-tabset-background-selected);
522
+ }
523
+ .flexlayout__tabset-maximized {
524
+ background-color: var(--color-tabset-background-maximized);
525
+ }
526
+ .flexlayout__tab_button_stamp {
527
+ display: inline-flex;
528
+ align-items: center;
529
+ gap: 0.3em;
530
+ white-space: nowrap;
531
+ box-sizing: border-box;
532
+ }
533
+ .flexlayout__tab {
534
+ overflow: hidden;
535
+ box-sizing: border-box;
536
+ background-color: var(--color-tab-content);
537
+ color: var(--color-text);
538
+ position: relative;
539
+ }
540
+ .flexlayout__tab_moveable {
541
+ position: relative;
542
+ height: 100%;
543
+ min-width: 1px;
544
+ min-height: 1px;
545
+ overflow: auto;
546
+ box-sizing: border-box;
547
+ }
548
+ .flexlayout__tab_overlay {
549
+ z-index: 20;
550
+ position: absolute;
551
+ top: 0;
552
+ left: 0;
553
+ right: 0;
554
+ bottom: 0;
555
+ background-color: rgba(0, 0, 0, 0.2392156863);
556
+ }
557
+ .flexlayout__tab_button {
558
+ display: flex;
559
+ gap: 0.3em;
560
+ align-items: center;
561
+ box-sizing: border-box;
562
+ padding: 3px 0.5em;
563
+ cursor: pointer;
564
+ }
565
+ .flexlayout__tab_button_stretch {
566
+ background-color: transparent;
567
+ color: var(--color-tab-selected);
568
+ width: 100%;
569
+ padding: 3px 0em;
570
+ text-wrap: nowrap;
571
+ display: flex;
572
+ gap: 0.3em;
573
+ align-items: center;
574
+ box-sizing: border-box;
575
+ cursor: pointer;
576
+ }
577
+ @media (hover: hover) {
578
+ .flexlayout__tab_button_stretch:hover {
579
+ color: var(--color-tab-selected);
580
+ }
581
+ }
582
+ .flexlayout__tab_button--selected {
583
+ background-color: var(--color-tab-selected-background);
584
+ color: var(--color-tab-selected);
585
+ }
586
+ @media (hover: hover) {
587
+ .flexlayout__tab_button:hover {
588
+ color: var(--color-tab-selected);
589
+ }
590
+ }
591
+ .flexlayout__tab_button--unselected {
592
+ background-color: var(--color-tab-unselected-background);
593
+ color: var(--color-tab-unselected);
594
+ }
595
+ .flexlayout__tab_button_leading {
596
+ display: flex;
597
+ }
598
+ .flexlayout__tab_button_content {
599
+ display: flex;
600
+ text-wrap: nowrap;
601
+ }
602
+ .flexlayout__tab_button_textbox {
603
+ border: none;
604
+ font-family: var(--font-family);
605
+ font-size: var(--font-size);
606
+ color: var(--color-tab-textbox);
607
+ background-color: var(--color-tab-textbox-background);
608
+ border: 1px inset var(--color-1);
609
+ border-radius: 3px;
610
+ width: 10em;
611
+ }
612
+ .flexlayout__tab_button_textbox:focus {
613
+ outline: none;
614
+ }
615
+ .flexlayout__tab_button_trailing {
616
+ display: flex;
617
+ visibility: hidden;
618
+ border-radius: 4px;
619
+ }
620
+ .flexlayout__tab_button_trailing:hover {
621
+ background-color: var(--color-toolbar-button-hover);
622
+ }
623
+ @media (hover: hover) {
624
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
625
+ visibility: visible;
626
+ }
627
+ }
628
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
629
+ visibility: visible;
630
+ }
631
+ .flexlayout__tab_button_overflow {
632
+ display: flex;
633
+ align-items: center;
634
+ border: none;
635
+ color: var(--color-overflow);
636
+ font-size: inherit;
637
+ background-color: transparent;
638
+ width: 2em;
639
+ overflow: hidden;
640
+ }
641
+ .flexlayout__tab_toolbar {
642
+ display: flex;
643
+ align-items: center;
644
+ gap: 0.3em;
645
+ padding-left: 0.5em;
646
+ padding-right: 0.3em;
647
+ }
648
+ .flexlayout__tab_toolbar_icon {
649
+ border: none;
650
+ outline: none;
651
+ font-size: inherit;
652
+ margin: 0px;
653
+ background-color: transparent;
654
+ padding: 1px;
655
+ }
656
+ .flexlayout__tab_toolbar_button {
657
+ border: none;
658
+ outline: none;
659
+ font-size: inherit;
660
+ margin: 0px;
661
+ background-color: transparent;
662
+ border-radius: 4px;
663
+ padding: 1px;
664
+ }
665
+ @media (hover: hover) {
666
+ .flexlayout__tab_toolbar_button:hover {
667
+ background-color: var(--color-toolbar-button-hover);
668
+ }
669
+ }
670
+ .flexlayout__tab_toolbar_sticky_buttons_container {
671
+ display: flex;
672
+ gap: 0.3em;
673
+ padding-left: 5px;
674
+ align-items: center;
675
+ }
676
+ .flexlayout__border {
677
+ box-sizing: border-box;
678
+ overflow: hidden;
679
+ display: flex;
680
+ font-size: var(--font-size);
681
+ font-family: var(--font-family);
682
+ color: var(--color-border);
683
+ background-color: var(--color-border-background);
684
+ }
685
+ .flexlayout__border_tab_contents {
686
+ box-sizing: border-box;
687
+ overflow: hidden;
688
+ background-color: var(--color-border-tab-content);
689
+ }
690
+ .flexlayout__border_top {
691
+ border-bottom: 1px solid var(--color-border-divider-line);
692
+ align-items: center;
693
+ }
694
+ .flexlayout__border_bottom {
695
+ border-top: 1px solid var(--color-border-divider-line);
696
+ align-items: center;
697
+ }
698
+ .flexlayout__border_left {
699
+ border-right: 1px solid var(--color-border-divider-line);
700
+ align-content: center;
701
+ flex-direction: column;
702
+ }
703
+ .flexlayout__border_right {
704
+ border-left: 1px solid var(--color-border-divider-line);
705
+ align-content: center;
706
+ flex-direction: column;
707
+ }
708
+ .flexlayout__border_inner {
709
+ position: relative;
710
+ box-sizing: border-box;
711
+ align-items: center;
712
+ display: flex;
713
+ flex-grow: 1;
714
+ scrollbar-width: none;
715
+ }
716
+ .flexlayout__border_inner::-webkit-scrollbar {
717
+ display: none;
718
+ }
719
+ .flexlayout__border_inner_tab_container {
720
+ white-space: nowrap;
721
+ display: flex;
722
+ padding-left: 2px;
723
+ padding-right: 2px;
724
+ box-sizing: border-box;
725
+ position: absolute;
726
+ }
727
+ .flexlayout__border_inner_tab_container_right {
728
+ transform-origin: top left;
729
+ transform: rotate(90deg);
730
+ }
731
+ .flexlayout__border_inner_tab_container_left {
732
+ flex-direction: row-reverse;
733
+ transform-origin: top right;
734
+ transform: rotate(-90deg);
735
+ }
736
+ .flexlayout__border_tab_divider {
737
+ width: 4px;
738
+ }
739
+ .flexlayout__border_button {
740
+ display: flex;
741
+ gap: 0.3em;
742
+ align-items: center;
743
+ cursor: pointer;
744
+ padding: 3px 0.5em;
745
+ margin: 2px 0px;
746
+ box-sizing: border-box;
747
+ white-space: nowrap;
748
+ }
749
+ .flexlayout__border_button--selected {
750
+ background-color: var(--color-border-tab-selected-background);
751
+ color: var(--color-border-tab-selected);
752
+ }
753
+ @media (hover: hover) {
754
+ .flexlayout__border_button:hover {
755
+ color: var(--color-border-tab-selected);
756
+ }
757
+ }
758
+ .flexlayout__border_button--unselected {
759
+ background-color: var(--color-border-tab-unselected-background);
760
+ color: var(--color-border-tab-unselected);
761
+ }
762
+ .flexlayout__border_button_leading {
763
+ display: flex;
764
+ }
765
+ .flexlayout__border_button_content {
766
+ display: flex;
767
+ }
768
+ .flexlayout__border_button_trailing {
769
+ display: flex;
770
+ border-radius: 4px;
771
+ visibility: hidden;
772
+ }
773
+ @media (hover: hover) {
774
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
775
+ visibility: visible;
776
+ }
777
+ }
778
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
779
+ visibility: visible;
780
+ }
781
+ .flexlayout__border_toolbar {
782
+ display: flex;
783
+ gap: 0.3em;
784
+ align-items: center;
785
+ }
786
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
787
+ flex-direction: column;
788
+ padding-top: 0.5em;
789
+ padding-bottom: 0.3em;
790
+ }
791
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
792
+ padding-left: 0.5em;
793
+ padding-right: 0.3em;
794
+ }
795
+ .flexlayout__border_toolbar_button {
796
+ border: none;
797
+ outline: none;
798
+ font-size: inherit;
799
+ background-color: transparent;
800
+ border-radius: 4px;
801
+ padding: 1px;
802
+ }
803
+ @media (hover: hover) {
804
+ .flexlayout__border_toolbar_button:hover {
805
+ background-color: var(--color-toolbar-button-hover);
806
+ }
807
+ }
808
+ .flexlayout__border_toolbar_button_overflow {
809
+ display: flex;
810
+ align-items: center;
811
+ border: none;
812
+ color: var(--color-overflow);
813
+ font-size: inherit;
814
+ background-color: transparent;
815
+ width: 1.5em;
816
+ }
817
+ .flexlayout__popup_menu {
818
+ font-size: var(--font-size);
819
+ font-family: var(--font-family);
820
+ }
821
+ .flexlayout__popup_menu_item {
822
+ padding: 2px 0.5em;
823
+ white-space: nowrap;
824
+ cursor: pointer;
825
+ border-radius: 2px;
826
+ }
827
+ .flexlayout__popup_menu_item--selected {
828
+ font-weight: 500;
829
+ background-color: var(--color-tab-selected-background);
830
+ color: var(--color-tab-selected);
831
+ }
832
+ @media (hover: hover) {
833
+ .flexlayout__popup_menu_item:hover {
834
+ background-color: var(--color-6);
835
+ }
836
+ }
837
+ .flexlayout__popup_menu_container {
838
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
839
+ border: 1px solid var(--color-popup-border);
840
+ color: var(--color-popup-unselected);
841
+ background: var(--color-popup-unselected-background);
842
+ border-radius: 3px;
843
+ position: absolute;
844
+ z-index: 1000;
845
+ max-height: 50%;
846
+ min-width: 100px;
847
+ overflow: auto;
848
+ padding: 2px;
849
+ }
850
+ .flexlayout__floating_window _body {
851
+ height: 100%;
852
+ }
853
+ .flexlayout__floating_window_content {
854
+ left: 0;
855
+ top: 0;
856
+ right: 0;
857
+ bottom: 0;
858
+ position: absolute;
859
+ }
860
+ .flexlayout__error_boundary_container {
861
+ left: 0;
862
+ top: 0;
863
+ right: 0;
864
+ bottom: 0;
865
+ position: absolute;
866
+ display: flex;
867
+ justify-content: center;
868
+ }
869
+ .flexlayout__error_boundary_content {
870
+ display: flex;
871
+ align-items: center;
872
+ }
873
+ .flexlayout__border_sizer {
874
+ position: absolute;
875
+ top: -30000px;
876
+ padding-top: 6px;
877
+ padding-bottom: 5px;
878
+ font-size: var(--font-size);
879
+ font-family: var(--font-family);
880
+ }
881
+ .flexlayout__mini_scrollbar {
882
+ position: absolute;
883
+ background-color: var(--color-mini-scroll-indicator);
884
+ border-radius: 5px;
885
+ width: var(--size-mini-scroll-indicator);
886
+ height: var(--size-mini-scroll-indicator);
887
+ visibility: hidden;
888
+ opacity: 0;
889
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
890
+ }
891
+ .flexlayout__mini_scrollbar:hover {
892
+ background-color: var(--color-mini-scroll-indicator-hovered);
893
+ transition: background-color 0.3s ease-in-out;
894
+ }
895
+ .flexlayout__mini_scrollbar_container {
896
+ position: relative;
897
+ display: flex;
898
+ flex-grow: 1;
899
+ overflow: hidden;
900
+ }
901
+ @media (hover: hover) {
902
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
903
+ opacity: 1;
904
+ visibility: visible;
905
+ }
906
+ }
907
+
908
+ /* ======================== End of Base Classes =========================== */
909
+ .flexlayout__theme_light {
910
+ /*
911
+ light theme overrides
912
+ */
913
+ }
914
+
915
+ .flexlayout__theme_dark {
916
+ /*
917
+ dark theme overrides
918
+ */
919
+ }
920
+ .flexlayout__theme_dark .flexlayout__tabset_header {
921
+ box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
922
+ }
923
+ .flexlayout__theme_dark .flexlayout__tabset-selected {
924
+ background-image: linear-gradient(var(--color-background), var(--color-4));
925
+ }
926
+ .flexlayout__theme_dark .flexlayout__tabset-maximized {
927
+ background-image: linear-gradient(var(--color-6), var(--color-2));
928
+ }
929
+ .flexlayout__theme_dark .flexlayout__tab_top {
930
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
931
+ border-top-left-radius: 3px;
932
+ border-top-right-radius: 3px;
933
+ }
934
+ .flexlayout__theme_dark .flexlayout__tab_bottom {
935
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
936
+ border-bottom-left-radius: 3px;
937
+ border-bottom-right-radius: 3px;
938
+ }
939
+ .flexlayout__theme_dark .flexlayout__border_button {
940
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
941
+ border-radius: 3px;
942
+ }
943
+
944
+ .flexlayout__theme_gray {
945
+ /*
946
+ gray theme overrides
947
+ */
948
+ }
949
+ .flexlayout__theme_gray .flexlayout__tabset-selected {
950
+ background-image: linear-gradient(var(--color-background), var(--color-4));
951
+ }
952
+ .flexlayout__theme_gray .flexlayout__tabset_header {
953
+ box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
954
+ }
955
+ .flexlayout__theme_gray .flexlayout__tabset-selected {
956
+ background-image: linear-gradient(var(--color-background), var(--color-3));
957
+ }
958
+ .flexlayout__theme_gray .flexlayout__tabset-maximized {
959
+ background-image: linear-gradient(var(--color-3), var(--color-1));
960
+ }
961
+ .flexlayout__theme_gray .flexlayout__tab_button_top {
962
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
963
+ border-top-left-radius: 3px;
964
+ border-top-right-radius: 3px;
965
+ }
966
+ .flexlayout__theme_gray .flexlayout__tab_button_bottom {
967
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
968
+ border-bottom-left-radius: 3px;
969
+ border-bottom-right-radius: 3px;
970
+ }
971
+ .flexlayout__theme_gray .flexlayout__border_button {
972
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
973
+ border-radius: 3px;
974
+ }
975
+
976
+ .flexlayout__theme_underline {
977
+ /*
978
+ underline theme overrides
979
+ */
980
+ }
981
+ .flexlayout__theme_underline .flexlayout__tab_button {
982
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
983
+ }
984
+ .flexlayout__theme_underline .flexlayout__tab_button--selected {
985
+ border-bottom: var(--underline_height) solid var(--color-underline);
986
+ }
987
+ .flexlayout__theme_underline .flexlayout__tab_button--unselected {
988
+ border-bottom: var(--underline_height) solid transparent;
989
+ }
990
+ .flexlayout__theme_underline .flexlayout__border_button {
991
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
992
+ }
993
+ .flexlayout__theme_underline .flexlayout__border_button--selected {
994
+ border-bottom: var(--underline_height) solid var(--color-underline);
995
+ }
996
+ .flexlayout__theme_underline .flexlayout__border_button--unselected {
997
+ border-bottom: var(--underline_height) solid transparent;
998
+ }
999
+ .flexlayout__theme_underline .flexlayout__tabset_tab_divider, .flexlayout__theme_underline .flexlayout__border_tab_divider {
1000
+ width: 1px;
1001
+ margin: 4px 6px 4px 6px;
1002
+ border-left: 1px solid #ddd;
1003
+ }
1004
+ .flexlayout__theme_underline .flexlayout__tab_button_textbox {
1005
+ border: none;
1006
+ }
1007
+
1008
+ .flexlayout__theme_rounded {
1009
+ /*
1010
+ rounded theme overrides
1011
+ */
1012
+ }
1013
+ .flexlayout__theme_rounded .flexlayout__tabset {
1014
+ padding: 3px;
1015
+ border-radius: 10px;
1016
+ }
1017
+ .flexlayout__theme_rounded .flexlayout__tabset_content {
1018
+ padding: 1px 3px 3px 3px;
1019
+ border-bottom-left-radius: 10px;
1020
+ border-bottom-right-radius: 10px;
1021
+ }
1022
+ .flexlayout__theme_rounded .flexlayout__tab_border {
1023
+ border-radius: 10px;
1024
+ padding: 5px;
1025
+ }
1026
+ .flexlayout__theme_rounded .flexlayout__border_tab_contents {
1027
+ border-radius: 10px;
1028
+ }
1029
+ .flexlayout__theme_rounded .flexlayout__tab_button, .flexlayout__theme_rounded .flexlayout__border_button {
1030
+ border-radius: 10px;
1031
+ padding: 2px 0.8em;
1032
+ }
1033
+ .flexlayout__theme_rounded .flexlayout__tabset_tabbar_outer_top {
1034
+ border-bottom: unset;
1035
+ padding-bottom: 1px;
1036
+ }
1037
+ .flexlayout__theme_rounded .flexlayout__tabset_tabbar_inner_tab_container_top {
1038
+ border-bottom: 2px solid transparent;
1039
+ }
1040
+ .flexlayout__theme_rounded .flexlayout__border_bottom {
1041
+ border-top: 2px solid var(--color-border-divider-line);
1042
+ }
1043
+ .flexlayout__theme_rounded .flexlayout__border_sizer {
1044
+ padding-bottom: 6px;
1045
+ }
1046
+ .flexlayout__theme_rounded .flexlayout__tab_button_trailing:hover {
1047
+ background-color: var(--color-3);
1048
+ }
1049
+ .flexlayout__theme_rounded .flexlayout__border_button_trailing:hover {
1050
+ background-color: var(--color-3);
1051
+ }
1052
+
1053
+ /*# sourceMappingURL=combined.css.map */