flexlayout-react 0.8.18 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +144 -206
  2. package/dist/index.js +6451 -6398
  3. package/package.json +31 -34
  4. package/style/_base.scss +109 -33
  5. package/style/_themes.scss +720 -49
  6. package/style/alpha_dark.css +862 -0
  7. package/style/alpha_dark.css.map +1 -0
  8. package/style/alpha_dark.scss +6 -0
  9. package/style/alpha_light.css +856 -0
  10. package/style/alpha_light.css.map +1 -0
  11. package/style/alpha_light.scss +6 -0
  12. package/style/alpha_rounded.css +811 -0
  13. package/style/alpha_rounded.css.map +1 -0
  14. package/style/alpha_rounded.scss +6 -0
  15. package/style/combined.css +569 -44
  16. package/style/combined.css.map +1 -1
  17. package/style/combined.scss +25 -1
  18. package/style/dark.css +95 -22
  19. package/style/dark.css.map +1 -1
  20. package/style/gray.css +96 -23
  21. package/style/gray.css.map +1 -1
  22. package/style/light.css +96 -20
  23. package/style/light.css.map +1 -1
  24. package/style/rounded.css +107 -25
  25. package/style/rounded.css.map +1 -1
  26. package/style/underline.css +99 -22
  27. package/style/underline.css.map +1 -1
  28. package/types/index.d.ts +14 -14
  29. package/types/model/Actions.d.ts +62 -31
  30. package/types/model/Attributes.d.ts +42 -0
  31. package/types/model/BorderNode.d.ts +11 -11
  32. package/types/model/BorderSet.d.ts +2 -2
  33. package/types/{DropInfo.d.ts → model/DropInfo.d.ts} +2 -2
  34. package/types/model/IDropTarget.d.ts +2 -2
  35. package/types/model/IJsonModel.d.ts +70 -48
  36. package/types/model/Layout.d.ts +41 -0
  37. package/types/model/Model.d.ts +31 -26
  38. package/types/model/Node.d.ts +18 -10
  39. package/types/{Rect.d.ts → model/Rect.d.ts} +6 -3
  40. package/types/model/RowNode.d.ts +15 -14
  41. package/types/model/TabNode.d.ts +15 -21
  42. package/types/model/TabSetNode.d.ts +15 -21
  43. package/types/view/BorderButton.d.ts +4 -3
  44. package/types/view/BorderTab.d.ts +3 -3
  45. package/types/view/BorderTabSet.d.ts +3 -3
  46. package/types/{Types.d.ts → view/CSSClassNames.d.ts} +9 -2
  47. package/types/view/DragContainer.d.ts +6 -4
  48. package/types/view/FloatWindow.d.ts +11 -0
  49. package/types/{I18nLabel.d.ts → view/I18nLabel.d.ts} +1 -0
  50. package/types/view/Icons.d.ts +1 -0
  51. package/types/view/Layout.d.ts +34 -212
  52. package/types/view/Overlay.d.ts +2 -2
  53. package/types/view/PopoutWindow.d.ts +6 -6
  54. package/types/view/PopupMenu.d.ts +2 -2
  55. package/types/view/Row.d.ts +3 -3
  56. package/types/view/Splitter.d.ts +2 -4
  57. package/types/view/Tab.d.ts +3 -4
  58. package/types/view/TabButton.d.ts +3 -3
  59. package/types/view/TabButtonStamp.d.ts +3 -3
  60. package/types/view/TabContentRenderer.d.ts +14 -0
  61. package/types/view/TabLayout.d.ts +12 -0
  62. package/types/view/TabOverflowHook.d.ts +3 -3
  63. package/types/view/TabSet.d.ts +3 -3
  64. package/types/view/Utils.d.ts +7 -4
  65. package/types/view/layout/BorderContainer.d.ts +7 -0
  66. package/types/view/layout/DragDropManager.d.ts +48 -0
  67. package/types/view/layout/EdgeIndicators.d.ts +5 -0
  68. package/types/view/layout/FloatingWindowContainer.d.ts +5 -0
  69. package/types/view/layout/LayoutInternal.d.ts +151 -0
  70. package/types/view/layout/LayoutTypes.d.ts +51 -0
  71. package/types/Attribute.d.ts +0 -25
  72. package/types/AttributeDefinitions.d.ts +0 -18
  73. package/types/model/Action.d.ts +0 -5
  74. package/types/model/LayoutWindow.d.ts +0 -44
  75. package/types/view/SizeTracker.d.ts +0 -13
  76. /package/types/{DockLocation.d.ts → model/DockLocation.d.ts} +0 -0
  77. /package/types/{Orientation.d.ts → model/Orientation.d.ts} +0 -0
@@ -14,14 +14,16 @@
14
14
  --color-drag2-background: rgba(119, 166, 119, 0.075);
15
15
  --font-size: medium;
16
16
  --font-family: Roboto, Arial, sans-serif;
17
+ --font-weight: normal;
18
+ --splitter-size: 8px;
19
+ --splitter-active-size: 8px;
20
+ --splitter-handle-visibility: hidden;
17
21
  --color-overflow: gray;
18
22
  --color-icon: gray;
19
23
  --color-tabset-background: var(--color-background);
20
24
  --color-tabset-background-selected: var(--color-1);
21
25
  --color-tabset-background-maximized: var(--color-2);
22
26
  --color-tabset-divider-line: var(--color-4);
23
- --color-tabset-header-background: var(--color-background);
24
- --color-tabset-header: var(--color-text);
25
27
  --color-border-tab-content: var(--color-background);
26
28
  --color-border-background: var(--color-background);
27
29
  --color-border-divider-line: var(--color-4);
@@ -39,12 +41,13 @@
39
41
  --color-splitter: var(--color-1);
40
42
  --color-splitter-hover: var(--color-4);
41
43
  --color-splitter-drag: var(--color-4);
44
+ --color-splitter-handle: var(--color-3);
42
45
  --color-drag-rect-border: #ccc;
43
46
  --color-drag-rect-background: var(--color-5);
44
47
  --color-drag-rect: var(--color-text);
45
48
  --color-popup-border: var(--color-6);
46
49
  --color-popup-unselected: var(--color-text);
47
- --color-popup-unselected-background: white;
50
+ --color-popup-unselected-background: var(--color-background);
48
51
  --color-popup-selected: var(--color-text);
49
52
  --color-popup-selected-background: var(--color-3);
50
53
  --color-edge-marker: #aaa;
@@ -53,6 +56,7 @@
53
56
  --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
54
57
  --size-mini-scroll-indicator: 3px;
55
58
  --color-toolbar-button-hover: var(--color-3);
59
+ --color-float-window-header-background: var(--color-tabset-background);
56
60
  }
57
61
 
58
62
  .flexlayout__theme_dark .flexlayout__layout {
@@ -71,14 +75,16 @@
71
75
  --color-drag2-background: rgba(128, 128, 128, 0.15);
72
76
  --font-size: medium;
73
77
  --font-family: Roboto, Arial, sans-serif;
78
+ --font-weight: normal;
79
+ --splitter-size: 8px;
80
+ --splitter-active-size: 8px;
81
+ --splitter-handle-visibility: hidden;
74
82
  --color-overflow: gray;
75
83
  --color-icon: gray;
76
84
  --color-tabset-background: var(--color-1);
77
85
  --color-tabset-background-selected: var(--color-1);
78
86
  --color-tabset-background-maximized: var(--color-6);
79
87
  --color-tabset-divider-line: var(--color-4);
80
- --color-tabset-header-background: var(--color-1);
81
- --color-tabset-header: var(--color-text);
82
88
  --color-border-tab-content: var(--color-background);
83
89
  --color-border-background: var(--color-1);
84
90
  --color-border-divider-line: var(--color-4);
@@ -96,6 +102,7 @@
96
102
  --color-splitter: var(--color-2);
97
103
  --color-splitter-hover: var(--color-4);
98
104
  --color-splitter-drag: var(--color-5);
105
+ --color-splitter-handle: var(--color-3);
99
106
  --color-drag-rect-border: var(--color-4);
100
107
  --color-drag-rect-background: var(--color-1);
101
108
  --color-drag-rect: var(--color-text);
@@ -110,6 +117,7 @@
110
117
  --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);
111
118
  --size-mini-scroll-indicator: 3px;
112
119
  --color-toolbar-button-hover: var(--color-4);
120
+ --color-float-window-header-background: var(--color-tabset-background);
113
121
  }
114
122
 
115
123
  .flexlayout__theme_gray .flexlayout__layout {
@@ -128,14 +136,16 @@
128
136
  --color-drag2-background: rgba(119, 166, 119, 0.075);
129
137
  --font-size: medium;
130
138
  --font-family: Roboto, Arial, sans-serif;
139
+ --font-weight: normal;
140
+ --splitter-size: 8px;
141
+ --splitter-active-size: 8px;
142
+ --splitter-handle-visibility: hidden;
131
143
  --color-overflow: gray;
132
144
  --color-icon: gray;
133
145
  --color-tabset-background: var(--color-1);
134
146
  --color-tabset-background-selected: var(--color-1);
135
147
  --color-tabset-background-maximized: var(--color-6);
136
148
  --color-tabset-divider-line: var(--color-3);
137
- --color-tabset-header-background: var(--color-1);
138
- --color-tabset-header: var(--color-text);
139
149
  --color-border-tab-content: var(--color-background);
140
150
  --color-border-background: var(--color-1);
141
151
  --color-border-divider-line: var(--color-3);
@@ -153,12 +163,13 @@
153
163
  --color-splitter: var(--color-2);
154
164
  --color-splitter-hover: var(--color-4);
155
165
  --color-splitter-drag: var(--color-5);
166
+ --color-splitter-handle: var(--color-3);
156
167
  --color-drag-rect-border: var(--color-4);
157
168
  --color-drag-rect-background: var(--color-3);
158
169
  --color-drag-rect: var(--color-text);
159
170
  --color-popup-border: var(--color-6);
160
171
  --color-popup-unselected: var(--color-text);
161
- --color-popup-unselected-background: white;
172
+ --color-popup-unselected-background: var(--color-background);
162
173
  --color-popup-selected: var(--color-text);
163
174
  --color-popup-selected-background: var(--color-3);
164
175
  --color-edge-marker: #aaa;
@@ -167,6 +178,7 @@
167
178
  --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
168
179
  --size-mini-scroll-indicator: 3px;
169
180
  --color-toolbar-button-hover: var(--color-4);
181
+ --color-float-window-header-background: var(--color-tabset-background);
170
182
  }
171
183
 
172
184
  .flexlayout__theme_underline .flexlayout__layout {
@@ -185,14 +197,16 @@
185
197
  --color-drag2-background: rgba(119, 166, 119, 0.075);
186
198
  --font-size: medium;
187
199
  --font-family: Roboto, Arial, sans-serif;
200
+ --font-weight: normal;
201
+ --splitter-size: 8px;
202
+ --splitter-active-size: 8px;
203
+ --splitter-handle-visibility: hidden;
188
204
  --color-overflow: gray;
189
205
  --color-icon: gray;
190
206
  --color-tabset-background: var(--color-background);
191
207
  --color-tabset-background-selected: var(--color-1);
192
208
  --color-tabset-background-maximized: var(--color-6);
193
209
  --color-tabset-divider-line: var(--color-3);
194
- --color-tabset-header-background: var(--color-background);
195
- --color-tabset-header: var(--color-text);
196
210
  --color-border-tab-content: var(--color-background);
197
211
  --color-border-background: var(--color-background);
198
212
  --color-border-divider-line: var(--color-3);
@@ -210,12 +224,13 @@
210
224
  --color-splitter: var(--color-1);
211
225
  --color-splitter-hover: var(--color-4);
212
226
  --color-splitter-drag: var(--color-4);
227
+ --color-splitter-handle: var(--color-3);
213
228
  --color-drag-rect-border: var(--color-6);
214
229
  --color-drag-rect-background: var(--color-4);
215
230
  --color-drag-rect: var(--color-text);
216
231
  --color-popup-border: var(--color-6);
217
232
  --color-popup-unselected: var(--color-text);
218
- --color-popup-unselected-background: white;
233
+ --color-popup-unselected-background: var(--color-background);
219
234
  --color-popup-selected: var(--color-text);
220
235
  --color-popup-selected-background: var(--color-3);
221
236
  --color-edge-marker: #aaa;
@@ -227,11 +242,12 @@
227
242
  --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
228
243
  --size-mini-scroll-indicator: 4px;
229
244
  --color-toolbar-button-hover: var(--color-3);
245
+ --color-float-window-header-background: var(--color-tabset-background);
230
246
  }
231
247
 
232
248
  .flexlayout__theme_rounded .flexlayout__layout {
233
249
  --color-text: black;
234
- --color-background: #f2f6fb;
250
+ --color-background: #e9eef6;
235
251
  --color-base: #f2f6fb;
236
252
  --color-1: rgb(230.3, 237.9, 247.4);
237
253
  --color-2: rgb(218.6, 229.8, 243.8);
@@ -240,19 +256,21 @@
240
256
  --color-5: rgb(183.5, 205.5, 233);
241
257
  --color-6: rgb(171.8, 197.4, 229.4);
242
258
  --color-drag1: rgb(95, 134, 196);
243
- --color-drag2: rgb(95, 134, 196);
259
+ --color-drag2: var(--color-drag1);
244
260
  --color-drag1-background: rgba(95, 134, 196, 0.1);
245
- --color-drag2-background: rgba(95, 134, 196, 0.1);
261
+ --color-drag2-background: var(--color-drag1-background);
246
262
  --font-size: medium;
247
263
  --font-family: Roboto, Arial, sans-serif;
264
+ --font-weight: normal;
265
+ --splitter-size: 8px;
266
+ --splitter-active-size: 8px;
267
+ --splitter-handle-visibility: hidden;
248
268
  --color-overflow: #999db2;
249
269
  --color-icon: #999db2;
250
270
  --color-tabset-background: white;
251
271
  --color-tabset-background-selected: white;
252
272
  --color-tabset-background-maximized: white;
253
273
  --color-tabset-divider-line: white;
254
- --color-tabset-header-background: var(--color-background);
255
- --color-tabset-header: var(--color-text);
256
274
  --color-border-tab-content: white;
257
275
  --color-border-background: var(--color-background);
258
276
  --color-border-divider-line: var(--color-background);
@@ -270,12 +288,13 @@
270
288
  --color-splitter: var(--color-background);
271
289
  --color-splitter-hover: var(--color-2);
272
290
  --color-splitter-drag: var(--color-2);
291
+ --color-splitter-handle: var(--color-3);
273
292
  --color-drag-rect-border: #ccc;
274
293
  --color-drag-rect-background: var(--color-5);
275
294
  --color-drag-rect: var(--color-text);
276
295
  --color-popup-border: var(--color-6);
277
296
  --color-popup-unselected: var(--color-text);
278
- --color-popup-unselected-background: #f2f6fb;
297
+ --color-popup-unselected-background: var(--color-background);
279
298
  --color-popup-selected: var(--color-text);
280
299
  --color-popup-selected-background: var(--color-3);
281
300
  --color-edge-marker: #a6bbdf;
@@ -284,6 +303,199 @@
284
303
  --color-mini-scroll-indicator-hovered: rgba(180, 200, 230, 0.7);
285
304
  --size-mini-scroll-indicator: 4px;
286
305
  --color-toolbar-button-hover: var(--color-2);
306
+ --tab-button-radius: 10px;
307
+ --border-button-radius: 10px;
308
+ --color-float-window-header-background: var(--color-tabset-background);
309
+ }
310
+
311
+ .flexlayout__theme_alpha_light .flexlayout__layout {
312
+ --color-text: black;
313
+ --color-background: #ffffff;
314
+ --color-base: #f9fafb;
315
+ --color-1: #ededee;
316
+ --color-2: #e5e7eb;
317
+ --color-3: #d1d5db;
318
+ --color-4: #9ca3af;
319
+ --color-5: #6b7280;
320
+ --color-6: #4b5563;
321
+ --color-drag1: rgb(95, 134, 196);
322
+ --color-drag2: rgb(119, 166, 119);
323
+ --color-drag1-background: rgba(59, 130, 246, 0.1);
324
+ --color-drag2-background: rgba(16, 185, 129, 0.075);
325
+ --font-size: medium;
326
+ --font-family: system-ui, -apple-system, Arial, sans-serif;
327
+ --font-weight: 500;
328
+ --splitter-size: 8px;
329
+ --splitter-active-size: 8px;
330
+ --splitter-handle-visibility: hidden;
331
+ --color-overflow: var(--color-5);
332
+ --color-icon: var(--color-5);
333
+ --color-tabset-background: var(--color-1);
334
+ --color-tabset-background-selected: var(--color-1);
335
+ --color-tabset-background-maximized: var(--color-1);
336
+ --color-tabset-divider-line: var(--color-2);
337
+ --color-border-tab-content: var(--color-1);
338
+ --color-border-background: var(--color-1);
339
+ --color-border-divider-line: var(--color-2);
340
+ --color-tab-content: var(--color-background);
341
+ --color-tab-selected: #3b7de7;
342
+ --color-tab-selected-background: var(--color-background);
343
+ --color-tab-unselected: var(--color-5);
344
+ --color-tab-unselected-background: transparent;
345
+ --color-tab-textbox: var(--color-text);
346
+ --color-tab-textbox-background: var(--color-background);
347
+ --color-border-tab-selected: #3b7de7;
348
+ --color-border-tab-selected-background: var(--color-background);
349
+ --color-border-tab-unselected: var(--color-5);
350
+ --color-border-tab-unselected-background: var(--color-1);
351
+ --color-splitter: var(--color-1);
352
+ --color-splitter-hover: var(--color-4);
353
+ --color-splitter-drag: var(--color-4);
354
+ --color-splitter-handle: var(--color-3);
355
+ --color-drag-rect-border: var(--color-3);
356
+ --color-drag-rect-background: var(--color-background);
357
+ --color-drag-rect: var(--color-text);
358
+ --color-popup-border: var(--color-2);
359
+ --color-popup-unselected: var(--color-text);
360
+ --color-popup-unselected-background: var(--color-background);
361
+ --color-popup-selected: var(--color-drag1);
362
+ --color-popup-selected-background: var(--color-1);
363
+ --color-edge-marker: var(--color-3);
364
+ --color-edge-icon: var(--color-6);
365
+ --color-mini-scroll-indicator: rgba(0, 0, 0, 0.1);
366
+ --color-mini-scroll-indicator-hovered: rgba(0, 0, 0, 0.3);
367
+ --size-mini-scroll-indicator: 4px;
368
+ --color-toolbar-button-hover: var(--color-2);
369
+ --tab-button-radius: 10px;
370
+ --border-button-radius: 5px;
371
+ --color-float-window-header-background: var(--color-tabset-background);
372
+ }
373
+
374
+ .flexlayout__theme_alpha_dark .flexlayout__layout {
375
+ --color-text: white;
376
+ --color-background: black;
377
+ --color-base: #121212;
378
+ --color-1: #1c1c1c;
379
+ --color-2: #383838;
380
+ --color-3: #404040;
381
+ --color-4: #525252;
382
+ --color-5: #737373;
383
+ --color-6: #a3a3a3;
384
+ --color-drag1: #93c5fd;
385
+ --color-drag2: #6ee7b7;
386
+ --color-drag1-background: rgba(147, 197, 253, 0.15);
387
+ --color-drag2-background: rgba(110, 231, 183, 0.1);
388
+ --font-size: medium;
389
+ --font-family: system-ui, -apple-system, Arial, sans-serif;
390
+ --font-weight: 500;
391
+ --splitter-size: 8px;
392
+ --splitter-active-size: 8px;
393
+ --splitter-handle-visibility: hidden;
394
+ --color-overflow: gray;
395
+ --color-icon: gray;
396
+ --color-tabset-background: var(--color-1);
397
+ --color-tabset-background-selected: var(--color-1);
398
+ --color-tabset-background-maximized: var(--color-1);
399
+ --color-tabset-divider-line: var(--color-2);
400
+ --color-border-tab-content: var(--color-1);
401
+ --color-border-background: var(--color-1);
402
+ --color-border-divider-line: var(--color-2);
403
+ --color-tab-content: var(--color-background);
404
+ --color-tab-selected: #e5e7eb;
405
+ --color-tab-selected-background: var(--color-background);
406
+ --color-tab-unselected: var(--color-5);
407
+ --color-tab-unselected-background: transparent;
408
+ --color-tab-textbox: var(--color-text);
409
+ --color-tab-textbox-background: var(--color-background);
410
+ --color-border-tab-selected: #e5e7eb;
411
+ --color-border-tab-selected-background: var(--color-background);
412
+ --color-border-tab-unselected: var(--color-5);
413
+ --color-border-tab-unselected-background: var(--color-1);
414
+ --color-splitter: var(--color-1);
415
+ --color-splitter-hover: var(--color-3);
416
+ --color-splitter-drag: var(--color-4);
417
+ --color-splitter-handle: var(--color-3);
418
+ --color-drag-rect-border: var(--color-3);
419
+ --color-drag-rect-background: var(--color-background);
420
+ --color-drag-rect: var(--color-text);
421
+ --color-popup-border: var(--color-2);
422
+ --color-popup-unselected: var(--color-text);
423
+ --color-popup-unselected-background: var(--color-background);
424
+ --color-popup-selected: #f9fafb;
425
+ --color-popup-selected-background: var(--color-1);
426
+ --color-edge-marker: var(--color-3);
427
+ --color-edge-icon: gray;
428
+ --color-mini-scroll-indicator: rgba(255, 255, 255, 0.1);
429
+ --color-mini-scroll-indicator-hovered: rgba(255, 255, 255, 0.3);
430
+ --size-mini-scroll-indicator: 4px;
431
+ --color-toolbar-button-hover: var(--color-2);
432
+ --tab-button-radius: 10px;
433
+ --border-button-radius: 5px;
434
+ --color-float-window-header-background: var(--color-tabset-background);
435
+ }
436
+
437
+ .flexlayout__theme_alpha_rounded .flexlayout__layout {
438
+ --color-text: black;
439
+ --color-background: #e9eef6;
440
+ --color-base: #ffffff;
441
+ --color-1: #f1f5f9;
442
+ --color-2: #e2e8f0;
443
+ --color-3: #cbd5e1;
444
+ --color-4: #94a3b8;
445
+ --color-5: #64748b;
446
+ --color-6: #475569;
447
+ --color-drag1: rgb(95, 134, 196);
448
+ --color-drag2: rgb(119, 166, 119);
449
+ --color-drag1-background: rgba(59, 130, 246, 0.1);
450
+ --color-drag2-background: rgba(16, 185, 129, 0.075);
451
+ --font-size: medium;
452
+ --font-family: system-ui, -apple-system, Arial, sans-serif;
453
+ --font-weight: 500;
454
+ --splitter-size: 8px;
455
+ --splitter-active-size: 8px;
456
+ --splitter-handle-visibility: hidden;
457
+ --color-overflow: var(--color-4);
458
+ --color-icon: var(--color-4);
459
+ --color-tabset-background: white;
460
+ --color-tabset-background-selected: white;
461
+ --color-tabset-background-maximized: white;
462
+ --color-tabset-divider-line: white;
463
+ --color-border-tab-content: white;
464
+ --color-border-background: var(--color-background);
465
+ --color-border-divider-line: var(--color-background);
466
+ --color-tab-content: white;
467
+ --color-tab-selected: #3b7de7;
468
+ --color-tab-selected-background: var(--color-2);
469
+ --color-tab-unselected: var(--color-4);
470
+ --color-tab-unselected-background: var(--color-1);
471
+ --color-tab-textbox: var(--color-text);
472
+ --color-tab-textbox-background: var(--color-3);
473
+ --color-border-tab-selected: #3b7de7;
474
+ --color-border-tab-selected-background: var(--color-2);
475
+ --color-border-tab-unselected: var(--color-4);
476
+ --color-border-tab-unselected-background: var(--color-1);
477
+ --color-splitter: var(--color-background);
478
+ --color-splitter-hover: var(--color-3);
479
+ --color-splitter-drag: var(--color-3);
480
+ --color-splitter-handle: var(--color-3);
481
+ --color-drag-rect-border: var(--color-3);
482
+ --color-drag-rect-background: var(--color-base);
483
+ --color-drag-rect: var(--color-text);
484
+ --color-popup-border: var(--color-2);
485
+ --color-popup-unselected: var(--color-text);
486
+ --color-popup-unselected-background: var(--color-base);
487
+ --color-popup-selected: var(--color-drag1);
488
+ --color-popup-selected-background: var(--color-1);
489
+ --color-edge-marker: var(--color-3);
490
+ --color-edge-icon: var(--color-6);
491
+ --color-mini-scroll-indicator: rgba(0, 0, 0, 0.1);
492
+ --color-mini-scroll-indicator-hovered: rgba(0, 0, 0, 0.2);
493
+ --size-mini-scroll-indicator: 4px;
494
+ --color-toolbar-button-hover: var(--color-1);
495
+ --color-float-window-header-background: var(--color-tabset-background);
496
+ --tab-button-radius: 16px;
497
+ --border-button-radius: 16px;
498
+ --color-float-window-header-background: var(--color-tabset-background);
287
499
  }
288
500
 
289
501
  /*
@@ -296,6 +508,7 @@
296
508
  bottom: 0;
297
509
  position: absolute;
298
510
  display: flex;
511
+ overflow: hidden;
299
512
  background-color: var(--color-background);
300
513
  }
301
514
  .flexlayout__layout_overlay {
@@ -312,7 +525,7 @@
312
525
  z-index: 100;
313
526
  display: flex;
314
527
  flex-direction: column;
315
- align-items: start;
528
+ align-items: flex-start;
316
529
  }
317
530
  .flexlayout__layout_moveables {
318
531
  visibility: hidden;
@@ -350,6 +563,37 @@
350
563
  background-color: var(--color-splitter);
351
564
  touch-action: none;
352
565
  z-index: 10;
566
+ position: relative;
567
+ }
568
+ .flexlayout__splitter_horz {
569
+ width: var(--splitter-size);
570
+ min-width: var(--splitter-size);
571
+ }
572
+ .flexlayout__splitter_horz::before {
573
+ content: "";
574
+ position: absolute;
575
+ top: 0;
576
+ bottom: 0;
577
+ /* Center the hit area over the thin line */
578
+ left: 50%;
579
+ width: var(--splitter-active-size);
580
+ transform: translateX(-50%);
581
+ z-index: 1;
582
+ }
583
+ .flexlayout__splitter_vert {
584
+ height: var(--splitter-size);
585
+ min-height: var(--splitter-size);
586
+ }
587
+ .flexlayout__splitter_vert::before {
588
+ content: "";
589
+ position: absolute;
590
+ left: 0;
591
+ right: 0;
592
+ /* Center the hit area over the thin line */
593
+ top: 50%;
594
+ height: var(--splitter-active-size);
595
+ transform: translateY(-50%);
596
+ z-index: 1;
353
597
  }
354
598
  @media (hover: hover) {
355
599
  .flexlayout__splitter:hover {
@@ -369,8 +613,9 @@
369
613
  background-color: var(--color-splitter-drag);
370
614
  }
371
615
  .flexlayout__splitter_handle {
372
- background-color: #ccc;
616
+ background-color: var(--color-splitter-handle);
373
617
  border-radius: 3px;
618
+ visibility: var(--splitter-handle-visibility);
374
619
  }
375
620
  .flexlayout__splitter_handle_horz {
376
621
  width: 3px;
@@ -468,25 +713,15 @@
468
713
  .flexlayout__tabset_leading {
469
714
  display: flex;
470
715
  }
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
716
  .flexlayout__tabset_tabbar_outer {
485
717
  box-sizing: border-box;
486
718
  background-color: var(--color-tabset-background);
487
719
  overflow: hidden;
488
720
  display: flex;
721
+ align-items: center;
722
+ min-height: 1.5em;
489
723
  font-size: var(--font-size);
724
+ font-weight: var(--font-weight);
490
725
  }
491
726
  .flexlayout__tabset_tabbar_outer_top {
492
727
  padding: 0px 2px 0px 2px;
@@ -513,6 +748,7 @@
513
748
  padding-right: 4px;
514
749
  box-sizing: border-box;
515
750
  white-space: nowrap;
751
+ align-items: center;
516
752
  }
517
753
  .flexlayout__tabset_tabbar_inner_tab_container_top {
518
754
  border-top: 2px solid transparent;
@@ -557,12 +793,23 @@
557
793
  bottom: 0;
558
794
  background-color: rgba(0, 0, 0, 0.2392156863);
559
795
  }
796
+ .flexlayout__tab_layout_container {
797
+ position: relative;
798
+ height: 100%;
799
+ box-sizing: border-box;
800
+ }
801
+ .flexlayout__tab_layout_container_user {
802
+ position: relative;
803
+ flex-grow: 1;
804
+ box-sizing: border-box;
805
+ }
560
806
  .flexlayout__tab_button {
561
807
  display: flex;
562
808
  gap: 0.3em;
563
809
  align-items: center;
564
810
  box-sizing: border-box;
565
811
  padding: 3px 0.5em;
812
+ font-weight: var(--font-weight);
566
813
  cursor: pointer;
567
814
  }
568
815
  .flexlayout__tab_button_stretch {
@@ -606,6 +853,7 @@
606
853
  border: none;
607
854
  font-family: var(--font-family);
608
855
  font-size: var(--font-size);
856
+ font-weight: var(--font-weight);
609
857
  color: var(--color-tab-textbox);
610
858
  background-color: var(--color-tab-textbox-background);
611
859
  border: 1px inset var(--color-1);
@@ -680,8 +928,9 @@
680
928
  box-sizing: border-box;
681
929
  overflow: hidden;
682
930
  display: flex;
683
- font-size: var(--font-size);
684
931
  font-family: var(--font-family);
932
+ font-size: var(--font-size);
933
+ font-weight: var(--font-weight);
685
934
  color: var(--color-border);
686
935
  background-color: var(--color-border-background);
687
936
  }
@@ -725,6 +974,7 @@
725
974
  .flexlayout__border_inner_tab_container {
726
975
  white-space: nowrap;
727
976
  display: flex;
977
+ align-items: center;
728
978
  padding-left: 2px;
729
979
  padding-right: 2px;
730
980
  box-sizing: border-box;
@@ -751,6 +1001,7 @@
751
1001
  margin: 2px 0px;
752
1002
  box-sizing: border-box;
753
1003
  white-space: nowrap;
1004
+ font-weight: var(--font-weight);
754
1005
  }
755
1006
  .flexlayout__border_button--selected {
756
1007
  background-color: var(--color-border-tab-selected-background);
@@ -823,6 +1074,7 @@
823
1074
  .flexlayout__popup_menu {
824
1075
  font-size: var(--font-size);
825
1076
  font-family: var(--font-family);
1077
+ font-weight: var(--font-weight);
826
1078
  }
827
1079
  .flexlayout__popup_menu_item {
828
1080
  padding: 2px 0.5em;
@@ -847,12 +1099,43 @@
847
1099
  background: var(--color-popup-unselected-background);
848
1100
  border-radius: 3px;
849
1101
  position: absolute;
850
- z-index: 1000;
1102
+ z-index: 3000;
851
1103
  max-height: 50%;
852
1104
  min-width: 100px;
853
1105
  overflow: auto;
854
1106
  padding: 2px;
855
1107
  }
1108
+ .flexlayout__float_window {
1109
+ box-sizing: border-box;
1110
+ background-color: var(--color-tabset-background);
1111
+ border-radius: 5px;
1112
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1113
+ display: flex;
1114
+ flex-direction: column;
1115
+ overflow: hidden;
1116
+ z-index: 2000;
1117
+ }
1118
+ .flexlayout__float_window_header {
1119
+ display: flex;
1120
+ align-items: center;
1121
+ padding: 2px 8px;
1122
+ background-color: var(--color-float-window-header-background);
1123
+ border-bottom: 1px solid var(--color-tabset-divider-line);
1124
+ cursor: move;
1125
+ user-select: none;
1126
+ font-family: var(--font-family);
1127
+ font-size: 0.8em;
1128
+ min-height: 15px;
1129
+ }
1130
+ .flexlayout__float_window_content {
1131
+ position: relative;
1132
+ flex-grow: 1;
1133
+ display: flex;
1134
+ flex-direction: column;
1135
+ min-height: 0;
1136
+ min-width: 0;
1137
+ margin: 5px;
1138
+ }
856
1139
  .flexlayout__floating_window _body {
857
1140
  height: 100%;
858
1141
  }
@@ -883,6 +1166,7 @@
883
1166
  padding-bottom: 5px;
884
1167
  font-size: var(--font-size);
885
1168
  font-family: var(--font-family);
1169
+ font-weight: var(--font-weight);
886
1170
  }
887
1171
  .flexlayout__mini_scrollbar {
888
1172
  position: absolute;
@@ -923,9 +1207,6 @@
923
1207
  dark theme overrides
924
1208
  */
925
1209
  }
926
- .flexlayout__theme_dark .flexlayout__tabset_header {
927
- box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
928
- }
929
1210
  .flexlayout__theme_dark .flexlayout__tabset-selected {
930
1211
  background-image: linear-gradient(var(--color-background), var(--color-4));
931
1212
  }
@@ -955,9 +1236,6 @@
955
1236
  .flexlayout__theme_gray .flexlayout__tabset-selected {
956
1237
  background-image: linear-gradient(var(--color-background), var(--color-4));
957
1238
  }
958
- .flexlayout__theme_gray .flexlayout__tabset_header {
959
- box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
960
- }
961
1239
  .flexlayout__theme_gray .flexlayout__tabset-selected {
962
1240
  background-image: linear-gradient(var(--color-background), var(--color-3));
963
1241
  }
@@ -1004,8 +1282,9 @@
1004
1282
  }
1005
1283
  .flexlayout__theme_underline .flexlayout__tabset_tab_divider, .flexlayout__theme_underline .flexlayout__border_tab_divider {
1006
1284
  width: 1px;
1007
- margin: 4px 6px 4px 6px;
1008
- border-left: 1px solid #ddd;
1285
+ height: 0.8em;
1286
+ margin: 0px 6px 0px 6px;
1287
+ background-color: #ddd;
1009
1288
  }
1010
1289
  .flexlayout__theme_underline .flexlayout__tab_button_textbox {
1011
1290
  border: none;
@@ -1032,8 +1311,12 @@
1032
1311
  .flexlayout__theme_rounded .flexlayout__border_tab_contents {
1033
1312
  border-radius: 10px;
1034
1313
  }
1035
- .flexlayout__theme_rounded .flexlayout__tab_button, .flexlayout__theme_rounded .flexlayout__border_button {
1036
- border-radius: 10px;
1314
+ .flexlayout__theme_rounded .flexlayout__tab_button {
1315
+ border-radius: var(--tab-button-radius);
1316
+ padding: 2px 0.8em;
1317
+ }
1318
+ .flexlayout__theme_rounded .flexlayout__border_button {
1319
+ border-radius: var(--border-button-radius);
1037
1320
  padding: 2px 0.8em;
1038
1321
  }
1039
1322
  .flexlayout__theme_rounded .flexlayout__tabset_tabbar_outer_top {
@@ -1056,4 +1339,246 @@
1056
1339
  background-color: var(--color-3);
1057
1340
  }
1058
1341
 
1342
+ .flexlayout__theme_alpha_light .flexlayout__tab {
1343
+ border: 5px solid var(--color-background);
1344
+ border-radius: 5px;
1345
+ }
1346
+ .flexlayout__theme_alpha_light .flexlayout__splitter_border .flexlayout__splitter_handle {
1347
+ visibility: visible;
1348
+ }
1349
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top {
1350
+ border-bottom: unset;
1351
+ }
1352
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom {
1353
+ border-top: unset;
1354
+ }
1355
+ .flexlayout__theme_alpha_light .flexlayout__tab_button {
1356
+ border-bottom: 2px solid transparent;
1357
+ padding: 4px 12px;
1358
+ }
1359
+ .flexlayout__theme_alpha_light .flexlayout__tab_button--selected:hover {
1360
+ background-color: var(--color-background);
1361
+ }
1362
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
1363
+ border-top-left-radius: var(--tab-button-radius);
1364
+ border-top-right-radius: var(--tab-button-radius);
1365
+ }
1366
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
1367
+ border-bottom-left-radius: var(--tab-button-radius);
1368
+ border-bottom-right-radius: var(--tab-button-radius);
1369
+ }
1370
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tab_spacer {
1371
+ width: 12px;
1372
+ }
1373
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider, .flexlayout__theme_alpha_light .flexlayout__border_tab_divider {
1374
+ width: 2px;
1375
+ border-radius: 2px;
1376
+ height: 0.8em;
1377
+ margin: 0px 5px 0px 5px;
1378
+ background-color: #ddd;
1379
+ }
1380
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider_selected_before, .flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider_selected_after {
1381
+ width: 12px;
1382
+ height: 100%;
1383
+ margin: unset;
1384
+ border-radius: unset;
1385
+ background-color: var(--color-tab-selected-background);
1386
+ }
1387
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider_inner {
1388
+ height: 100%;
1389
+ }
1390
+ .flexlayout__theme_alpha_light .flexlayout__tabset-selected {
1391
+ --tab-divider-bg: var(--color-tabset-background-selected);
1392
+ }
1393
+ .flexlayout__theme_alpha_light .flexlayout__tabset-maximized {
1394
+ --tab-divider-bg: var(--color-tabset-background-maximized);
1395
+ }
1396
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
1397
+ border-bottom-right-radius: var(--tab-button-radius);
1398
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1399
+ }
1400
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
1401
+ border-bottom-left-radius: var(--tab-button-radius);
1402
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1403
+ }
1404
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
1405
+ border-top-right-radius: var(--tab-button-radius);
1406
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1407
+ }
1408
+ .flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
1409
+ border-top-left-radius: var(--tab-button-radius);
1410
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1411
+ }
1412
+ .flexlayout__theme_alpha_light .flexlayout__border_button {
1413
+ border-radius: var(--border-button-radius);
1414
+ margin: 3px;
1415
+ padding: 3px 8px;
1416
+ }
1417
+ .flexlayout__theme_alpha_light .flexlayout__border_button--selected {
1418
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
1419
+ }
1420
+ .flexlayout__theme_alpha_light .flexlayout__border_sizer {
1421
+ padding-bottom: 8px;
1422
+ }
1423
+ .flexlayout__theme_alpha_light .flexlayout__popup_menu_container {
1424
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1425
+ border: 1px solid var(--color-2);
1426
+ padding: 4px;
1427
+ }
1428
+ .flexlayout__theme_alpha_light .flexlayout__popup_menu_item {
1429
+ border-radius: 4px;
1430
+ padding: 6px 8px;
1431
+ }
1432
+ .flexlayout__theme_alpha_light .flexlayout__popup_menu_item:hover {
1433
+ background-color: var(--color-1);
1434
+ }
1435
+
1436
+ .flexlayout__theme_alpha_dark .flexlayout__tab {
1437
+ border: 5px solid var(--color-background);
1438
+ border-radius: 5px;
1439
+ }
1440
+ .flexlayout__theme_alpha_dark .flexlayout__splitter_border .flexlayout__splitter_handle {
1441
+ visibility: visible;
1442
+ }
1443
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top {
1444
+ border-bottom: unset;
1445
+ }
1446
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom {
1447
+ border-top: unset;
1448
+ }
1449
+ .flexlayout__theme_alpha_dark .flexlayout__tab_button {
1450
+ border-bottom: 2px solid transparent;
1451
+ padding: 4px 12px;
1452
+ }
1453
+ .flexlayout__theme_alpha_dark .flexlayout__tab_button--selected:hover {
1454
+ background-color: var(--color-background);
1455
+ }
1456
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
1457
+ border-top-left-radius: var(--tab-button-radius);
1458
+ border-top-right-radius: var(--tab-button-radius);
1459
+ }
1460
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
1461
+ border-bottom-left-radius: var(--tab-button-radius);
1462
+ border-bottom-right-radius: var(--tab-button-radius);
1463
+ }
1464
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tab_spacer {
1465
+ width: 12px;
1466
+ }
1467
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider, .flexlayout__theme_alpha_dark .flexlayout__border_tab_divider {
1468
+ width: 2px;
1469
+ border-radius: 2px;
1470
+ height: 0.8em;
1471
+ margin: 0px 5px 0px 5px;
1472
+ background-color: #333;
1473
+ }
1474
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider_selected_before, .flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider_selected_after {
1475
+ width: 12px;
1476
+ height: 100%;
1477
+ margin: unset;
1478
+ border-radius: unset;
1479
+ background-color: var(--color-tab-selected-background);
1480
+ }
1481
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider_inner {
1482
+ height: 100%;
1483
+ }
1484
+ .flexlayout__theme_alpha_dark .flexlayout__tabset-selected {
1485
+ --tab-divider-bg: var(--color-tabset-background-selected);
1486
+ }
1487
+ .flexlayout__theme_alpha_dark .flexlayout__tabset-maximized {
1488
+ --tab-divider-bg: var(--color-tabset-background-maximized);
1489
+ }
1490
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
1491
+ border-bottom-right-radius: var(--tab-button-radius);
1492
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1493
+ }
1494
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
1495
+ border-bottom-left-radius: var(--tab-button-radius);
1496
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1497
+ }
1498
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
1499
+ border-top-right-radius: var(--tab-button-radius);
1500
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1501
+ }
1502
+ .flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
1503
+ border-top-left-radius: var(--tab-button-radius);
1504
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
1505
+ }
1506
+ .flexlayout__theme_alpha_dark .flexlayout__splitter {
1507
+ transition: background-color 0.2s;
1508
+ }
1509
+ .flexlayout__theme_alpha_dark .flexlayout__splitter:hover {
1510
+ border-radius: 0;
1511
+ }
1512
+ .flexlayout__theme_alpha_dark .flexlayout__border_button {
1513
+ border-radius: var(--border-button-radius);
1514
+ margin: 3px;
1515
+ padding: 3px 8px;
1516
+ }
1517
+ .flexlayout__theme_alpha_dark .flexlayout__border_button--selected {
1518
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1519
+ }
1520
+ .flexlayout__theme_alpha_dark .flexlayout__border_sizer {
1521
+ padding-bottom: 8px;
1522
+ }
1523
+ .flexlayout__theme_alpha_dark .flexlayout__popup_menu_container {
1524
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
1525
+ border: 1px solid var(--color-2);
1526
+ padding: 4px;
1527
+ }
1528
+ .flexlayout__theme_alpha_dark .flexlayout__popup_menu_item {
1529
+ border-radius: 4px;
1530
+ padding: 6px 8px;
1531
+ }
1532
+ .flexlayout__theme_alpha_dark .flexlayout__popup_menu_item:hover {
1533
+ background-color: var(--color-1);
1534
+ }
1535
+
1536
+ .flexlayout__theme_alpha_rounded .flexlayout__tabset {
1537
+ padding: 2px;
1538
+ border-radius: 12px;
1539
+ }
1540
+ .flexlayout__theme_alpha_rounded .flexlayout__splitter_border .flexlayout__splitter_handle {
1541
+ visibility: visible;
1542
+ }
1543
+ .flexlayout__theme_alpha_rounded .flexlayout__float_window {
1544
+ background-color: var(--color-2);
1545
+ }
1546
+ .flexlayout__theme_alpha_rounded .flexlayout__float_window_header {
1547
+ background-color: var(--color-2);
1548
+ border-bottom: none;
1549
+ }
1550
+ .flexlayout__theme_alpha_rounded .flexlayout__tab_border {
1551
+ border-radius: 12px;
1552
+ background-color: var(--color-background);
1553
+ }
1554
+ .flexlayout__theme_alpha_rounded .flexlayout__border_tab_contents {
1555
+ border-radius: var(--tab-button-radius);
1556
+ }
1557
+ .flexlayout__theme_alpha_rounded .flexlayout__tab_button {
1558
+ border-radius: var(--tab-button-radius);
1559
+ padding: 4px 12px;
1560
+ margin: 2px;
1561
+ }
1562
+ .flexlayout__theme_alpha_rounded .flexlayout__border_button {
1563
+ border-radius: var(--border-button-radius);
1564
+ padding: 4px 12px;
1565
+ margin: 2px;
1566
+ }
1567
+ .flexlayout__theme_alpha_rounded .flexlayout__border_sizer {
1568
+ padding-bottom: 10px;
1569
+ }
1570
+ .flexlayout__theme_alpha_rounded .flexlayout__popup_menu_container {
1571
+ border-radius: 8px;
1572
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1573
+ border: 1px solid var(--color-2);
1574
+ padding: 6px;
1575
+ }
1576
+ .flexlayout__theme_alpha_rounded .flexlayout__popup_menu_item {
1577
+ border-radius: 6px;
1578
+ padding: 8px 12px;
1579
+ }
1580
+ .flexlayout__theme_alpha_rounded .flexlayout__popup_menu_item:hover {
1581
+ background-color: var(--color-1);
1582
+ }
1583
+
1059
1584
  /*# sourceMappingURL=combined.css.map */