flexlayout-react 0.8.13 → 0.8.15

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