flexlayout-react 0.8.19 → 0.9.1

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 (78) hide show
  1. package/README.md +146 -208
  2. package/dist/index.js +6523 -6395
  3. package/package.json +25 -27
  4. package/style/_base.scss +115 -35
  5. package/style/_themes.scss +719 -49
  6. package/style/alpha_dark.css +865 -0
  7. package/style/alpha_dark.css.map +1 -0
  8. package/style/alpha_dark.scss +6 -0
  9. package/style/alpha_light.css +859 -0
  10. package/style/alpha_light.css.map +1 -0
  11. package/style/alpha_light.scss +6 -0
  12. package/style/alpha_rounded.css +813 -0
  13. package/style/alpha_rounded.css.map +1 -0
  14. package/style/alpha_rounded.scss +6 -0
  15. package/style/combined.css +573 -47
  16. package/style/combined.css.map +1 -1
  17. package/style/combined.scss +25 -1
  18. package/style/dark.css +100 -25
  19. package/style/dark.css.map +1 -1
  20. package/style/gray.css +101 -26
  21. package/style/gray.css.map +1 -1
  22. package/style/light.css +101 -23
  23. package/style/light.css.map +1 -1
  24. package/style/rounded.css +112 -28
  25. package/style/rounded.css.map +1 -1
  26. package/style/underline.css +104 -25
  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 +72 -50
  36. package/types/model/Layout.d.ts +41 -0
  37. package/types/model/Model.d.ts +30 -25
  38. package/types/model/Node.d.ts +18 -10
  39. package/types/{Rect.d.ts → model/Rect.d.ts} +6 -4
  40. package/types/model/RowNode.d.ts +15 -14
  41. package/types/model/TabNode.d.ts +17 -25
  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} +11 -3
  47. package/types/view/DragTabButton.d.ts +11 -0
  48. package/types/view/FloatWindow.d.ts +12 -0
  49. package/types/{I18nLabel.d.ts → view/I18nLabel.d.ts} +2 -1
  50. package/types/view/Icons.d.ts +1 -0
  51. package/types/view/Layout.d.ts +21 -197
  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 +15 -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 +147 -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/DragContainer.d.ts +0 -9
  76. package/types/view/SizeTracker.d.ts +0 -13
  77. /package/types/{DockLocation.d.ts → model/DockLocation.d.ts} +0 -0
  78. /package/types/{Orientation.d.ts → model/Orientation.d.ts} +0 -0
@@ -0,0 +1,865 @@
1
+ .flexlayout__layout {
2
+ --color-text: white;
3
+ --color-background: black;
4
+ --color-base: #121212;
5
+ --color-1: #1c1c1c;
6
+ --color-2: #383838;
7
+ --color-3: #404040;
8
+ --color-4: #525252;
9
+ --color-5: #737373;
10
+ --color-6: #a3a3a3;
11
+ --color-drag1: #93c5fd;
12
+ --color-drag2: #6ee7b7;
13
+ --color-drag1-background: rgba(147, 197, 253, 0.15);
14
+ --color-drag2-background: rgba(110, 231, 183, 0.1);
15
+ --font-size: medium;
16
+ --font-family: system-ui, -apple-system, Arial, sans-serif;
17
+ --font-weight: 500;
18
+ --splitter-size: 8px;
19
+ --splitter-active-size: 8px;
20
+ --splitter-handle-visibility: hidden;
21
+ --color-overflow: gray;
22
+ --color-icon: gray;
23
+ --color-tabset-background: var(--color-1);
24
+ --color-tabset-background-selected: var(--color-1);
25
+ --color-tabset-background-maximized: var(--color-1);
26
+ --color-tabset-divider-line: var(--color-2);
27
+ --color-border-tab-content: var(--color-1);
28
+ --color-border-background: var(--color-1);
29
+ --color-border-divider-line: var(--color-2);
30
+ --color-tab-content: var(--color-background);
31
+ --color-tab-selected: #e5e7eb;
32
+ --color-tab-selected-background: var(--color-background);
33
+ --color-tab-unselected: var(--color-5);
34
+ --color-tab-unselected-background: transparent;
35
+ --color-tab-textbox: var(--color-text);
36
+ --color-tab-textbox-background: var(--color-background);
37
+ --color-border-tab-selected: #e5e7eb;
38
+ --color-border-tab-selected-background: var(--color-background);
39
+ --color-border-tab-unselected: var(--color-5);
40
+ --color-border-tab-unselected-background: var(--color-1);
41
+ --color-splitter: var(--color-1);
42
+ --color-splitter-hover: var(--color-3);
43
+ --color-splitter-drag: var(--color-4);
44
+ --color-splitter-handle: var(--color-3);
45
+ --color-drag-rect-border: var(--color-3);
46
+ --color-drag-rect-background: var(--color-background);
47
+ --color-drag-rect: var(--color-text);
48
+ --color-popup-border: var(--color-2);
49
+ --color-popup-unselected: var(--color-text);
50
+ --color-popup-unselected-background: var(--color-background);
51
+ --color-popup-selected: #f9fafb;
52
+ --color-popup-selected-background: var(--color-1);
53
+ --color-edge-marker: var(--color-3);
54
+ --color-edge-icon: gray;
55
+ --color-mini-scroll-indicator: rgba(255, 255, 255, 0.1);
56
+ --color-mini-scroll-indicator-hovered: rgba(255, 255, 255, 0.3);
57
+ --size-mini-scroll-indicator: 4px;
58
+ --color-toolbar-button-hover: var(--color-2);
59
+ --tab-button-radius: 10px;
60
+ --border-button-radius: 5px;
61
+ --color-float-window-header-background: var(--color-tabset-background);
62
+ }
63
+
64
+ /*
65
+ base classes
66
+ */
67
+ .flexlayout__layout {
68
+ left: 0;
69
+ top: 0;
70
+ right: 0;
71
+ bottom: 0;
72
+ position: absolute;
73
+ display: flex;
74
+ background-color: var(--color-background);
75
+ }
76
+ .flexlayout__layout_metrics {
77
+ position: absolute;
78
+ top: -30000px;
79
+ }
80
+ .flexlayout__layout_overlay {
81
+ left: 0;
82
+ top: 0;
83
+ right: 0;
84
+ bottom: 0;
85
+ position: absolute;
86
+ z-index: 1000;
87
+ }
88
+ .flexlayout__layout_tab_stamps {
89
+ position: absolute;
90
+ top: -10000px;
91
+ z-index: 100;
92
+ display: flex;
93
+ flex-direction: column;
94
+ align-items: flex-start;
95
+ }
96
+ .flexlayout__layout_moveables_home {
97
+ visibility: hidden;
98
+ position: absolute;
99
+ width: 100px;
100
+ height: 100px;
101
+ top: -20000px;
102
+ }
103
+ .flexlayout__layout_main {
104
+ display: flex;
105
+ flex-basis: 0px;
106
+ min-width: 0;
107
+ min-height: 0;
108
+ flex-grow: 1;
109
+ position: relative;
110
+ }
111
+ .flexlayout__layout_border_container {
112
+ display: flex;
113
+ flex-basis: 0px;
114
+ min-width: 0;
115
+ min-height: 0;
116
+ flex-grow: 1;
117
+ }
118
+ .flexlayout__layout_border_container_inner {
119
+ display: flex;
120
+ flex-basis: 0px;
121
+ min-width: 0;
122
+ min-height: 0;
123
+ flex-grow: 1;
124
+ }
125
+ .flexlayout__splitter {
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ background-color: var(--color-splitter);
130
+ touch-action: none;
131
+ z-index: 10;
132
+ position: relative;
133
+ }
134
+ .flexlayout__splitter_horz {
135
+ width: var(--splitter-size);
136
+ min-width: var(--splitter-size);
137
+ }
138
+ .flexlayout__splitter_horz::before {
139
+ content: "";
140
+ position: absolute;
141
+ top: 0;
142
+ bottom: 0;
143
+ /* Center the hit area over the thin line */
144
+ left: 50%;
145
+ width: var(--splitter-active-size);
146
+ transform: translateX(-50%);
147
+ z-index: 1;
148
+ }
149
+ .flexlayout__splitter_vert {
150
+ height: var(--splitter-size);
151
+ min-height: var(--splitter-size);
152
+ }
153
+ .flexlayout__splitter_vert::before {
154
+ content: "";
155
+ position: absolute;
156
+ left: 0;
157
+ right: 0;
158
+ /* Center the hit area over the thin line */
159
+ top: 50%;
160
+ height: var(--splitter-active-size);
161
+ transform: translateY(-50%);
162
+ z-index: 1;
163
+ }
164
+ @media (hover: hover) {
165
+ .flexlayout__splitter:hover {
166
+ background-color: var(--color-splitter-hover);
167
+ transition: background-color ease-in 0.1s;
168
+ transition-delay: 0.05s;
169
+ border-radius: 5px;
170
+ }
171
+ }
172
+ .flexlayout__splitter_drag {
173
+ position: absolute;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ z-index: 1000;
178
+ border-radius: 5px;
179
+ background-color: var(--color-splitter-drag);
180
+ }
181
+ .flexlayout__splitter_handle {
182
+ background-color: var(--color-splitter-handle);
183
+ border-radius: 3px;
184
+ visibility: var(--splitter-handle-visibility);
185
+ }
186
+ .flexlayout__splitter_handle_horz {
187
+ width: 3px;
188
+ height: 30px;
189
+ }
190
+ .flexlayout__splitter_handle_vert {
191
+ width: 30px;
192
+ height: 3px;
193
+ }
194
+ .flexlayout__splitter_extra {
195
+ touch-action: none;
196
+ background-color: transparent;
197
+ }
198
+ .flexlayout__outline_rect {
199
+ position: absolute;
200
+ pointer-events: none;
201
+ box-sizing: border-box;
202
+ border: 2px solid var(--color-drag1);
203
+ background: var(--color-drag1-background);
204
+ border-radius: 5px;
205
+ z-index: 1000;
206
+ }
207
+ .flexlayout__outline_rect_edge {
208
+ pointer-events: none;
209
+ border: 2px solid var(--color-drag2);
210
+ background: var(--color-drag2-background);
211
+ border-radius: 5px;
212
+ z-index: 1000;
213
+ box-sizing: border-box;
214
+ }
215
+ .flexlayout__edge_rect {
216
+ position: absolute;
217
+ z-index: 1000;
218
+ background-color: var(--color-edge-marker);
219
+ pointer-events: none;
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: center;
223
+ }
224
+ .flexlayout__drag_rect {
225
+ color: var(--color-drag-rect);
226
+ background-color: var(--color-drag-rect-background);
227
+ border: 2px solid var(--color-drag-rect-border);
228
+ border-radius: 5px;
229
+ box-sizing: border-box;
230
+ display: flex;
231
+ justify-content: center;
232
+ flex-direction: column;
233
+ overflow: hidden;
234
+ padding: 0.3em 0.8em;
235
+ word-wrap: break-word;
236
+ font-size: var(--font-size);
237
+ font-family: var(--font-family);
238
+ }
239
+ .flexlayout__row {
240
+ display: flex;
241
+ flex-basis: 0px;
242
+ min-width: 0;
243
+ min-height: 0;
244
+ position: relative;
245
+ box-sizing: border-box;
246
+ overflow: hidden;
247
+ }
248
+ .flexlayout__tabset {
249
+ display: flex;
250
+ flex-direction: column;
251
+ position: relative;
252
+ background-color: var(--color-tabset-background);
253
+ box-sizing: border-box;
254
+ font-family: var(--font-family);
255
+ overflow: hidden;
256
+ flex-grow: 1;
257
+ }
258
+ .flexlayout__tabset_container {
259
+ display: flex;
260
+ flex-basis: 0px;
261
+ min-width: 0;
262
+ min-height: 0;
263
+ flex-direction: column;
264
+ overflow: hidden;
265
+ flex-grow: 1;
266
+ }
267
+ .flexlayout__tabset_tab_divider {
268
+ width: 4px;
269
+ }
270
+ .flexlayout__tabset_content {
271
+ display: flex;
272
+ flex-basis: 0px;
273
+ min-width: 0;
274
+ min-height: 0;
275
+ flex-grow: 1;
276
+ box-sizing: border-box;
277
+ position: relative;
278
+ }
279
+ .flexlayout__tabset_leading {
280
+ display: flex;
281
+ }
282
+ .flexlayout__tabset_tabbar_outer {
283
+ box-sizing: border-box;
284
+ background-color: var(--color-tabset-background);
285
+ overflow: hidden;
286
+ display: flex;
287
+ align-items: center;
288
+ min-height: 1.5em;
289
+ font-size: var(--font-size);
290
+ font-weight: var(--font-weight);
291
+ }
292
+ .flexlayout__tabset_tabbar_outer_top {
293
+ padding: 0px 2px 0px 2px;
294
+ border-bottom: 1px solid var(--color-tabset-divider-line);
295
+ }
296
+ .flexlayout__tabset_tabbar_outer_bottom {
297
+ padding: 0px 2px 0px 2px;
298
+ border-top: 1px solid var(--color-tabset-divider-line);
299
+ }
300
+ .flexlayout__tabset_tabbar_inner {
301
+ position: relative;
302
+ box-sizing: border-box;
303
+ display: flex;
304
+ flex-grow: 1;
305
+ scrollbar-width: none;
306
+ }
307
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
308
+ display: none;
309
+ }
310
+ .flexlayout__tabset_tabbar_inner_tab_container {
311
+ position: relative;
312
+ display: flex;
313
+ padding-left: 4px;
314
+ padding-right: 4px;
315
+ box-sizing: border-box;
316
+ white-space: nowrap;
317
+ align-items: center;
318
+ }
319
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
320
+ border-top: 2px solid transparent;
321
+ }
322
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
323
+ border-bottom: 2px solid transparent;
324
+ }
325
+ .flexlayout__tabset-selected {
326
+ background-color: var(--color-tabset-background-selected);
327
+ }
328
+ .flexlayout__tabset-maximized {
329
+ background-color: var(--color-tabset-background-maximized);
330
+ }
331
+ .flexlayout__tab_button_stamp {
332
+ display: inline-flex;
333
+ align-items: center;
334
+ gap: 0.3em;
335
+ white-space: nowrap;
336
+ box-sizing: border-box;
337
+ }
338
+ .flexlayout__tab {
339
+ overflow: hidden;
340
+ box-sizing: border-box;
341
+ background-color: var(--color-tab-content);
342
+ color: var(--color-text);
343
+ position: relative;
344
+ }
345
+ .flexlayout__tab_moveable {
346
+ position: relative;
347
+ height: 100%;
348
+ min-width: 1px;
349
+ min-height: 1px;
350
+ overflow: auto;
351
+ box-sizing: border-box;
352
+ }
353
+ .flexlayout__tab_overlay {
354
+ z-index: 20;
355
+ position: absolute;
356
+ top: 0;
357
+ left: 0;
358
+ right: 0;
359
+ bottom: 0;
360
+ background-color: rgba(0, 0, 0, 0.2392156863);
361
+ }
362
+ .flexlayout__tab_layout_container {
363
+ position: relative;
364
+ height: 100%;
365
+ box-sizing: border-box;
366
+ }
367
+ .flexlayout__tab_layout_container_user {
368
+ position: relative;
369
+ flex-grow: 1;
370
+ box-sizing: border-box;
371
+ }
372
+ .flexlayout__tab_button {
373
+ display: flex;
374
+ gap: 0.3em;
375
+ align-items: center;
376
+ box-sizing: border-box;
377
+ padding: 3px 0.5em;
378
+ font-weight: var(--font-weight);
379
+ cursor: pointer;
380
+ }
381
+ .flexlayout__tab_button_stretch {
382
+ background-color: transparent;
383
+ color: var(--color-tab-selected);
384
+ width: 100%;
385
+ padding: 3px 0em;
386
+ text-wrap: nowrap;
387
+ display: flex;
388
+ gap: 0.3em;
389
+ align-items: center;
390
+ box-sizing: border-box;
391
+ cursor: pointer;
392
+ }
393
+ @media (hover: hover) {
394
+ .flexlayout__tab_button_stretch:hover {
395
+ color: var(--color-tab-selected);
396
+ }
397
+ }
398
+ .flexlayout__tab_button--selected {
399
+ background-color: var(--color-tab-selected-background);
400
+ color: var(--color-tab-selected);
401
+ }
402
+ @media (hover: hover) {
403
+ .flexlayout__tab_button:hover {
404
+ color: var(--color-tab-selected);
405
+ }
406
+ }
407
+ .flexlayout__tab_button--unselected {
408
+ background-color: var(--color-tab-unselected-background);
409
+ color: var(--color-tab-unselected);
410
+ }
411
+ .flexlayout__tab_button_leading {
412
+ display: flex;
413
+ }
414
+ .flexlayout__tab_button_content {
415
+ display: flex;
416
+ text-wrap: nowrap;
417
+ }
418
+ .flexlayout__tab_button_textbox {
419
+ border: none;
420
+ font-family: var(--font-family);
421
+ font-size: var(--font-size);
422
+ font-weight: var(--font-weight);
423
+ color: var(--color-tab-textbox);
424
+ background-color: var(--color-tab-textbox-background);
425
+ border: 1px inset var(--color-1);
426
+ border-radius: 3px;
427
+ width: 10em;
428
+ }
429
+ .flexlayout__tab_button_textbox:focus {
430
+ outline: none;
431
+ }
432
+ .flexlayout__tab_button_trailing {
433
+ display: flex;
434
+ visibility: hidden;
435
+ border-radius: 4px;
436
+ }
437
+ .flexlayout__tab_button_trailing:hover {
438
+ background-color: var(--color-toolbar-button-hover);
439
+ }
440
+ @media (hover: hover) {
441
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
442
+ visibility: visible;
443
+ }
444
+ }
445
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
446
+ visibility: visible;
447
+ }
448
+ .flexlayout__tab_button_overflow {
449
+ display: flex;
450
+ align-items: center;
451
+ border: none;
452
+ color: var(--color-overflow);
453
+ font-size: inherit;
454
+ background-color: transparent;
455
+ width: 2em;
456
+ overflow: hidden;
457
+ }
458
+ .flexlayout__tab_toolbar {
459
+ display: flex;
460
+ align-items: center;
461
+ gap: 0.3em;
462
+ padding-left: 0.5em;
463
+ padding-right: 0.3em;
464
+ }
465
+ .flexlayout__tab_toolbar_icon {
466
+ border: none;
467
+ outline: none;
468
+ font-size: inherit;
469
+ margin: 0px;
470
+ background-color: transparent;
471
+ padding: 1px;
472
+ }
473
+ .flexlayout__tab_toolbar_button {
474
+ border: none;
475
+ outline: none;
476
+ font-size: inherit;
477
+ margin: 0px;
478
+ background-color: transparent;
479
+ border-radius: 4px;
480
+ padding: 1px;
481
+ }
482
+ @media (hover: hover) {
483
+ .flexlayout__tab_toolbar_button:hover {
484
+ background-color: var(--color-toolbar-button-hover);
485
+ }
486
+ }
487
+ .flexlayout__tab_toolbar_sticky_buttons_container {
488
+ display: flex;
489
+ gap: 0.3em;
490
+ padding-left: 5px;
491
+ align-items: center;
492
+ }
493
+ .flexlayout__border {
494
+ box-sizing: border-box;
495
+ overflow: hidden;
496
+ display: flex;
497
+ font-family: var(--font-family);
498
+ font-size: var(--font-size);
499
+ font-weight: var(--font-weight);
500
+ color: var(--color-border);
501
+ background-color: var(--color-border-background);
502
+ }
503
+ .flexlayout__border_tab_contents {
504
+ box-sizing: border-box;
505
+ overflow: hidden;
506
+ background-color: var(--color-border-tab-content);
507
+ }
508
+ .flexlayout__border_leading {
509
+ display: flex;
510
+ }
511
+ .flexlayout__border_top {
512
+ border-bottom: 1px solid var(--color-border-divider-line);
513
+ align-items: center;
514
+ }
515
+ .flexlayout__border_bottom {
516
+ border-top: 1px solid var(--color-border-divider-line);
517
+ align-items: center;
518
+ }
519
+ .flexlayout__border_left {
520
+ border-right: 1px solid var(--color-border-divider-line);
521
+ align-content: center;
522
+ flex-direction: column;
523
+ }
524
+ .flexlayout__border_right {
525
+ border-left: 1px solid var(--color-border-divider-line);
526
+ align-content: center;
527
+ flex-direction: column;
528
+ }
529
+ .flexlayout__border_inner {
530
+ position: relative;
531
+ box-sizing: border-box;
532
+ align-items: center;
533
+ display: flex;
534
+ flex-grow: 1;
535
+ scrollbar-width: none;
536
+ }
537
+ .flexlayout__border_inner::-webkit-scrollbar {
538
+ display: none;
539
+ }
540
+ .flexlayout__border_inner_tab_container {
541
+ white-space: nowrap;
542
+ display: flex;
543
+ align-items: center;
544
+ padding-left: 2px;
545
+ padding-right: 2px;
546
+ box-sizing: border-box;
547
+ position: absolute;
548
+ }
549
+ .flexlayout__border_inner_tab_container_right {
550
+ transform-origin: top left;
551
+ transform: rotate(90deg);
552
+ }
553
+ .flexlayout__border_inner_tab_container_left {
554
+ flex-direction: row-reverse;
555
+ transform-origin: top right;
556
+ transform: rotate(-90deg);
557
+ }
558
+ .flexlayout__border_tab_divider {
559
+ width: 4px;
560
+ }
561
+ .flexlayout__border_button {
562
+ display: flex;
563
+ gap: 0.3em;
564
+ align-items: center;
565
+ cursor: pointer;
566
+ padding: 3px 0.5em;
567
+ margin: 2px 0px;
568
+ box-sizing: border-box;
569
+ white-space: nowrap;
570
+ font-weight: var(--font-weight);
571
+ }
572
+ .flexlayout__border_button--selected {
573
+ background-color: var(--color-border-tab-selected-background);
574
+ color: var(--color-border-tab-selected);
575
+ }
576
+ @media (hover: hover) {
577
+ .flexlayout__border_button:hover {
578
+ color: var(--color-border-tab-selected);
579
+ }
580
+ }
581
+ .flexlayout__border_button--unselected {
582
+ background-color: var(--color-border-tab-unselected-background);
583
+ color: var(--color-border-tab-unselected);
584
+ }
585
+ .flexlayout__border_button_leading {
586
+ display: flex;
587
+ }
588
+ .flexlayout__border_button_content {
589
+ display: flex;
590
+ }
591
+ .flexlayout__border_button_trailing {
592
+ display: flex;
593
+ border-radius: 4px;
594
+ visibility: hidden;
595
+ }
596
+ @media (hover: hover) {
597
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
598
+ visibility: visible;
599
+ }
600
+ }
601
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
602
+ visibility: visible;
603
+ }
604
+ .flexlayout__border_toolbar {
605
+ display: flex;
606
+ gap: 0.3em;
607
+ align-items: center;
608
+ }
609
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
610
+ flex-direction: column;
611
+ padding-top: 0.5em;
612
+ padding-bottom: 0.3em;
613
+ }
614
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
615
+ padding-left: 0.5em;
616
+ padding-right: 0.3em;
617
+ }
618
+ .flexlayout__border_toolbar_button {
619
+ border: none;
620
+ outline: none;
621
+ font-size: inherit;
622
+ background-color: transparent;
623
+ border-radius: 4px;
624
+ padding: 1px;
625
+ }
626
+ @media (hover: hover) {
627
+ .flexlayout__border_toolbar_button:hover {
628
+ background-color: var(--color-toolbar-button-hover);
629
+ }
630
+ }
631
+ .flexlayout__border_toolbar_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: 1.5em;
639
+ }
640
+ .flexlayout__popup_menu {
641
+ font-size: var(--font-size);
642
+ font-family: var(--font-family);
643
+ font-weight: var(--font-weight);
644
+ }
645
+ .flexlayout__popup_menu_item {
646
+ padding: 2px 0.5em;
647
+ white-space: nowrap;
648
+ cursor: pointer;
649
+ border-radius: 2px;
650
+ }
651
+ .flexlayout__popup_menu_item--selected {
652
+ font-weight: 500;
653
+ background-color: var(--color-tab-selected-background);
654
+ color: var(--color-tab-selected);
655
+ }
656
+ @media (hover: hover) {
657
+ .flexlayout__popup_menu_item:hover {
658
+ background-color: var(--color-6);
659
+ }
660
+ }
661
+ .flexlayout__popup_menu_container {
662
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
663
+ border: 1px solid var(--color-popup-border);
664
+ color: var(--color-popup-unselected);
665
+ background: var(--color-popup-unselected-background);
666
+ border-radius: 3px;
667
+ position: absolute;
668
+ z-index: 3000;
669
+ max-height: 50%;
670
+ min-width: 100px;
671
+ overflow: auto;
672
+ padding: 2px;
673
+ }
674
+ .flexlayout__float_window {
675
+ box-sizing: border-box;
676
+ background-color: var(--color-tabset-background);
677
+ border-radius: 5px;
678
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
679
+ display: flex;
680
+ flex-direction: column;
681
+ overflow: hidden;
682
+ z-index: 2000;
683
+ }
684
+ .flexlayout__float_window_header {
685
+ display: flex;
686
+ align-items: center;
687
+ padding: 2px 8px;
688
+ background-color: var(--color-float-window-header-background);
689
+ border-bottom: 1px solid var(--color-tabset-divider-line);
690
+ cursor: move;
691
+ user-select: none;
692
+ font-family: var(--font-family);
693
+ font-size: 0.8em;
694
+ min-height: 15px;
695
+ }
696
+ .flexlayout__float_window_content {
697
+ position: relative;
698
+ overflow: auto;
699
+ flex-grow: 1;
700
+ display: flex;
701
+ flex-direction: column;
702
+ min-height: 0;
703
+ min-width: 0;
704
+ margin: 5px;
705
+ }
706
+ .flexlayout__floating_window _body {
707
+ height: 100%;
708
+ }
709
+ .flexlayout__floating_window_content {
710
+ left: 0;
711
+ top: 0;
712
+ right: 0;
713
+ bottom: 0;
714
+ position: absolute;
715
+ }
716
+ .flexlayout__error_boundary_container {
717
+ left: 0;
718
+ top: 0;
719
+ right: 0;
720
+ bottom: 0;
721
+ position: absolute;
722
+ display: flex;
723
+ justify-content: center;
724
+ }
725
+ .flexlayout__error_boundary_content {
726
+ display: flex;
727
+ align-items: center;
728
+ }
729
+ .flexlayout__border_sizer {
730
+ position: absolute;
731
+ padding-top: 6px;
732
+ padding-bottom: 5px;
733
+ font-size: var(--font-size);
734
+ font-family: var(--font-family);
735
+ font-weight: var(--font-weight);
736
+ }
737
+ .flexlayout__mini_scrollbar {
738
+ position: absolute;
739
+ background-color: var(--color-mini-scroll-indicator);
740
+ border-radius: 5px;
741
+ width: var(--size-mini-scroll-indicator);
742
+ height: var(--size-mini-scroll-indicator);
743
+ visibility: hidden;
744
+ opacity: 0;
745
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
746
+ }
747
+ .flexlayout__mini_scrollbar:hover {
748
+ background-color: var(--color-mini-scroll-indicator-hovered);
749
+ transition: background-color 0.3s ease-in-out;
750
+ }
751
+ .flexlayout__mini_scrollbar_container {
752
+ position: relative;
753
+ display: flex;
754
+ flex-grow: 1;
755
+ overflow: hidden;
756
+ }
757
+ @media (hover: hover) {
758
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
759
+ opacity: 1;
760
+ visibility: visible;
761
+ }
762
+ }
763
+
764
+ /* ======================== End of Base Classes =========================== */
765
+ .flexlayout__tab {
766
+ border: 5px solid var(--color-background);
767
+ border-radius: 5px;
768
+ }
769
+ .flexlayout__splitter_border .flexlayout__splitter_handle {
770
+ visibility: visible;
771
+ }
772
+ .flexlayout__tabset_tabbar_outer_top {
773
+ border-bottom: unset;
774
+ }
775
+ .flexlayout__tabset_tabbar_outer_bottom {
776
+ border-top: unset;
777
+ }
778
+ .flexlayout__tab_button {
779
+ border-bottom: 2px solid transparent;
780
+ padding: 4px 12px;
781
+ }
782
+ .flexlayout__tab_button--selected:hover {
783
+ background-color: var(--color-background);
784
+ }
785
+ .flexlayout__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
786
+ border-top-left-radius: var(--tab-button-radius);
787
+ border-top-right-radius: var(--tab-button-radius);
788
+ }
789
+ .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
790
+ border-bottom-left-radius: var(--tab-button-radius);
791
+ border-bottom-right-radius: var(--tab-button-radius);
792
+ }
793
+ .flexlayout__tabset_tab_spacer {
794
+ width: 12px;
795
+ }
796
+ .flexlayout__tabset_tab_divider, .flexlayout__border_tab_divider {
797
+ width: 2px;
798
+ border-radius: 2px;
799
+ height: 0.8em;
800
+ margin: 0px 5px 0px 5px;
801
+ background-color: #333;
802
+ }
803
+ .flexlayout__tabset_tab_divider_selected_before, .flexlayout__tabset_tab_divider_selected_after {
804
+ width: 12px;
805
+ height: 100%;
806
+ margin: unset;
807
+ border-radius: unset;
808
+ background-color: var(--color-tab-selected-background);
809
+ }
810
+ .flexlayout__tabset_tab_divider_inner {
811
+ height: 100%;
812
+ }
813
+ .flexlayout__tabset-selected {
814
+ --tab-divider-bg: var(--color-tabset-background-selected);
815
+ }
816
+ .flexlayout__tabset-maximized {
817
+ --tab-divider-bg: var(--color-tabset-background-maximized);
818
+ }
819
+ .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
820
+ border-bottom-right-radius: var(--tab-button-radius);
821
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
822
+ }
823
+ .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
824
+ border-bottom-left-radius: var(--tab-button-radius);
825
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
826
+ }
827
+ .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
828
+ border-top-right-radius: var(--tab-button-radius);
829
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
830
+ }
831
+ .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
832
+ border-top-left-radius: var(--tab-button-radius);
833
+ background-color: var(--tab-divider-bg, var(--color-tabset-background));
834
+ }
835
+ .flexlayout__splitter {
836
+ transition: background-color 0.2s;
837
+ }
838
+ .flexlayout__splitter:hover {
839
+ border-radius: 0;
840
+ }
841
+ .flexlayout__border_button {
842
+ border-radius: var(--border-button-radius);
843
+ margin: 3px;
844
+ padding: 3px 8px;
845
+ }
846
+ .flexlayout__border_button--selected {
847
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
848
+ }
849
+ .flexlayout__border_sizer {
850
+ padding-bottom: 8px;
851
+ }
852
+ .flexlayout__popup_menu_container {
853
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
854
+ border: 1px solid var(--color-2);
855
+ padding: 4px;
856
+ }
857
+ .flexlayout__popup_menu_item {
858
+ border-radius: 4px;
859
+ padding: 6px 8px;
860
+ }
861
+ .flexlayout__popup_menu_item:hover {
862
+ background-color: var(--color-1);
863
+ }
864
+
865
+ /*# sourceMappingURL=alpha_dark.css.map */