flexlayout-react 0.7.7 → 0.7.9

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 (39) hide show
  1. package/ChangeLog.txt +9 -0
  2. package/cypress.config.ts +16 -0
  3. package/declarations/model/IJsonModel.d.ts +3 -3
  4. package/declarations/view/Icons.d.ts +1 -0
  5. package/declarations/view/Layout.d.ts +8 -8
  6. package/dist/flexlayout.js +12 -12
  7. package/dist/flexlayout_min.js +1 -1
  8. package/lib/DockLocation.js +7 -7
  9. package/lib/DockLocation.js.map +1 -1
  10. package/lib/DragDrop.js +3 -3
  11. package/lib/DragDrop.js.map +1 -1
  12. package/lib/Orientation.js +4 -4
  13. package/lib/Orientation.js.map +1 -1
  14. package/lib/Rect.js +3 -3
  15. package/lib/Rect.js.map +1 -1
  16. package/lib/model/BorderNode.js +13 -13
  17. package/lib/model/BorderNode.js.map +1 -1
  18. package/lib/model/BorderSet.js +5 -5
  19. package/lib/model/BorderSet.js.map +1 -1
  20. package/lib/model/Model.js +13 -13
  21. package/lib/model/Model.js.map +1 -1
  22. package/lib/model/RowNode.js +10 -10
  23. package/lib/model/RowNode.js.map +1 -1
  24. package/lib/model/TabNode.js +9 -9
  25. package/lib/model/TabNode.js.map +1 -1
  26. package/lib/model/TabSetNode.js +8 -8
  27. package/lib/model/TabSetNode.js.map +1 -1
  28. package/lib/view/FloatingWindow.js +16 -12
  29. package/lib/view/FloatingWindow.js.map +1 -1
  30. package/lib/view/Layout.js +9 -1
  31. package/lib/view/Layout.js.map +1 -1
  32. package/package.json +10 -10
  33. package/src/DragDrop.ts +4 -4
  34. package/src/view/FloatingWindow.tsx +16 -12
  35. package/src/view/Layout.tsx +10 -1
  36. package/style/dark.css +560 -560
  37. package/style/gray.css +543 -543
  38. package/style/light.css +544 -544
  39. package/style/underline.css +565 -565
package/style/dark.css CHANGED
@@ -1,560 +1,560 @@
1
- .flexlayout__layout {
2
- --color-text: #eeeeee;
3
- --color-background: black;
4
- --color-base: black;
5
- --color-1: #121212;
6
- --color-2: #1a1a1a;
7
- --color-3: #262626;
8
- --color-4: #333333;
9
- --color-5: #404040;
10
- --color-6: #4d4d4d;
11
- --color-drag1: rgb(207, 232, 255);
12
- --color-drag2: rgb(183, 209, 181);
13
- --color-drag1-background: rgba(128, 128, 128, 0.15);
14
- --color-drag2-background: rgba(128, 128, 128, 0.15);
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-1);
20
- --color-tabset-background-selected: var(--color-1);
21
- --color-tabset-background-maximized: var(--color-6);
22
- --color-tabset-divider-line: var(--color-4);
23
- --color-tabset-header-background: var(--color-1);
24
- --color-tabset-header: var(--color-text);
25
- --color-border-background: var(--color-1);
26
- --color-border-divider-line: var(--color-4);
27
- --color-tab-selected: var(--color-text);
28
- --color-tab-selected-background: var(--color-4);
29
- --color-tab-unselected: gray;
30
- --color-tab-unselected-background: transparent;
31
- --color-tab-textbox: var(--color-text);
32
- --color-tab-textbox-background: var(--color-3);
33
- --color-border-tab-selected: var(--color-text);
34
- --color-border-tab-selected-background: var(--color-4);
35
- --color-border-tab-unselected: gray;
36
- --color-border-tab-unselected-background: var(--color-2);
37
- --color-splitter: var(--color-2);
38
- --color-splitter-hover: var(--color-4);
39
- --color-splitter-drag: var(--color-5);
40
- --color-drag-rect-border: var(--color-4);
41
- --color-drag-rect-background: var(--color-1);
42
- --color-drag-rect: var(--color-text);
43
- --color-popup-border: var(--color-6);
44
- --color-popup-unselected: var(--color-text);
45
- --color-popup-unselected-background: black;
46
- --color-popup-selected: var(--color-text);
47
- --color-popup-selected-background: var(--color-4);
48
- --color-edge-marker: gray;
49
- }
50
-
51
- .flexlayout__layout {
52
- left: 0;
53
- top: 0;
54
- right: 0;
55
- bottom: 0;
56
- position: absolute;
57
- overflow: hidden;
58
- }
59
- .flexlayout__splitter {
60
- background-color: var(--color-splitter);
61
- }
62
- @media (hover: hover) {
63
- .flexlayout__splitter:hover {
64
- background-color: var(--color-splitter-hover);
65
- transition: background-color ease-in 0.1s;
66
- transition-delay: 0.05s;
67
- }
68
- }
69
- .flexlayout__splitter_border {
70
- z-index: 10;
71
- }
72
- .flexlayout__splitter_drag {
73
- z-index: 1000;
74
- background-color: var(--color-splitter-drag);
75
- border-radius: 5px;
76
- }
77
- .flexlayout__splitter_extra {
78
- background-color: transparent;
79
- }
80
- .flexlayout__outline_rect {
81
- position: absolute;
82
- pointer-events: none;
83
- box-sizing: border-box;
84
- border: 2px solid var(--color-drag1);
85
- background: var(--color-drag1-background);
86
- border-radius: 5px;
87
- z-index: 1000;
88
- }
89
- .flexlayout__outline_rect_edge {
90
- pointer-events: none;
91
- border: 2px solid var(--color-drag2);
92
- background: var(--color-drag2-background);
93
- border-radius: 5px;
94
- z-index: 1000;
95
- box-sizing: border-box;
96
- }
97
- .flexlayout__edge_rect {
98
- position: absolute;
99
- z-index: 1000;
100
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
101
- background-color: var(--color-edge-marker);
102
- pointer-events: none;
103
- }
104
- .flexlayout__drag_rect {
105
- position: absolute;
106
- cursor: move;
107
- color: var(--color-drag-rect);
108
- background-color: var(--color-drag-rect-background);
109
- border: 2px solid var(--color-drag-rect-border);
110
- border-radius: 5px;
111
- z-index: 1000;
112
- box-sizing: border-box;
113
- opacity: 0.9;
114
- text-align: center;
115
- display: flex;
116
- justify-content: center;
117
- flex-direction: column;
118
- overflow: hidden;
119
- padding: 0.3em 1em;
120
- word-wrap: break-word;
121
- font-size: var(--font-size);
122
- font-family: var(--font-family);
123
- }
124
- .flexlayout__tabset {
125
- display: flex;
126
- flex-direction: column;
127
- overflow: hidden;
128
- background-color: var(--color-tabset-background);
129
- box-sizing: border-box;
130
- font-size: var(--font-size);
131
- font-family: var(--font-family);
132
- }
133
- .flexlayout__tabset_tab_divider {
134
- width: 4px;
135
- }
136
- .flexlayout__tabset_content {
137
- display: flex;
138
- flex-grow: 1;
139
- align-items: center;
140
- justify-content: center;
141
- }
142
- .flexlayout__tabset_header {
143
- display: flex;
144
- align-items: center;
145
- padding: 3px 3px 3px 5px;
146
- box-sizing: border-box;
147
- border-bottom: 1px solid var(--color-tabset-divider-line);
148
- color: var(--color-tabset-header);
149
- background-color: var(--color-tabset-header-background);
150
- box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
151
- }
152
- .flexlayout__tabset_header_content {
153
- flex-grow: 1;
154
- }
155
- .flexlayout__tabset_tabbar_outer {
156
- box-sizing: border-box;
157
- background-color: var(--color-tabset-background);
158
- overflow: hidden;
159
- display: flex;
160
- }
161
- .flexlayout__tabset_tabbar_outer_top {
162
- border-bottom: 1px solid var(--color-tabset-divider-line);
163
- }
164
- .flexlayout__tabset_tabbar_outer_bottom {
165
- border-top: 1px solid var(--color-tabset-divider-line);
166
- }
167
- .flexlayout__tabset_tabbar_inner {
168
- position: relative;
169
- box-sizing: border-box;
170
- display: flex;
171
- flex-grow: 1;
172
- overflow: hidden;
173
- }
174
- .flexlayout__tabset_tabbar_inner_tab_container {
175
- display: flex;
176
- padding-left: 4px;
177
- padding-right: 4px;
178
- box-sizing: border-box;
179
- position: absolute;
180
- top: 0;
181
- bottom: 0;
182
- width: 10000px;
183
- }
184
- .flexlayout__tabset_tabbar_inner_tab_container_top {
185
- border-top: 2px solid transparent;
186
- }
187
- .flexlayout__tabset_tabbar_inner_tab_container_bottom {
188
- border-bottom: 2px solid transparent;
189
- }
190
- .flexlayout__tabset-selected {
191
- background-color: var(--color-tabset-background-selected);
192
- background-image: linear-gradient(var(--color-background), var(--color-4));
193
- }
194
- .flexlayout__tabset-maximized {
195
- background-color: var(--color-tabset-background-maximized);
196
- background-image: linear-gradient(var(--color-6), var(--color-2));
197
- }
198
- .flexlayout__tab_button_stamp {
199
- display: inline-flex;
200
- align-items: center;
201
- gap: 0.3em;
202
- white-space: nowrap;
203
- box-sizing: border-box;
204
- }
205
- .flexlayout__tab {
206
- overflow: auto;
207
- position: absolute;
208
- box-sizing: border-box;
209
- background-color: var(--color-background);
210
- color: var(--color-text);
211
- }
212
- .flexlayout__tab_button {
213
- display: flex;
214
- gap: 0.3em;
215
- align-items: center;
216
- box-sizing: border-box;
217
- padding: 3px 0.5em;
218
- cursor: pointer;
219
- }
220
- .flexlayout__tab_button--selected {
221
- background-color: var(--color-tab-selected-background);
222
- color: var(--color-tab-selected);
223
- }
224
- @media (hover: hover) {
225
- .flexlayout__tab_button:hover {
226
- background-color: var(--color-tab-selected-background);
227
- color: var(--color-tab-selected);
228
- }
229
- }
230
- .flexlayout__tab_button--unselected {
231
- background-color: var(--color-tab-unselected-background);
232
- color: var(--color-tab-unselected);
233
- }
234
- .flexlayout__tab_button_top {
235
- box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
236
- border-top-left-radius: 3px;
237
- border-top-right-radius: 3px;
238
- }
239
- .flexlayout__tab_button_bottom {
240
- box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
241
- border-bottom-left-radius: 3px;
242
- border-bottom-right-radius: 3px;
243
- }
244
- .flexlayout__tab_button_leading {
245
- display: flex;
246
- }
247
- .flexlayout__tab_button_content {
248
- display: flex;
249
- }
250
- .flexlayout__tab_button_textbox {
251
- border: none;
252
- font-family: var(--font-family);
253
- font-size: var(--font-size);
254
- color: var(--color-tab-textbox);
255
- background-color: var(--color-tab-textbox-background);
256
- border: 1px inset var(--color-1);
257
- border-radius: 3px;
258
- width: 10em;
259
- }
260
- .flexlayout__tab_button_textbox:focus {
261
- outline: none;
262
- }
263
- .flexlayout__tab_button_trailing {
264
- display: flex;
265
- visibility: hidden;
266
- border-radius: 4px;
267
- }
268
- .flexlayout__tab_button_trailing:hover {
269
- background-color: var(--color-6);
270
- }
271
- @media (hover: hover) {
272
- .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
273
- visibility: visible;
274
- }
275
- }
276
- .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
277
- visibility: visible;
278
- }
279
- .flexlayout__tab_button_overflow {
280
- display: flex;
281
- align-items: center;
282
- border: none;
283
- color: var(--color-overflow);
284
- font-size: inherit;
285
- background-color: transparent;
286
- }
287
- .flexlayout__tab_toolbar {
288
- display: flex;
289
- align-items: center;
290
- gap: 0.3em;
291
- padding-left: 0.5em;
292
- padding-right: 0.3em;
293
- }
294
- .flexlayout__tab_toolbar_button {
295
- border: none;
296
- outline: none;
297
- font-size: inherit;
298
- margin: 0px;
299
- background-color: transparent;
300
- border-radius: 4px;
301
- padding: 1px;
302
- }
303
- @media (hover: hover) {
304
- .flexlayout__tab_toolbar_button:hover {
305
- background-color: var(--color-4);
306
- }
307
- }
308
- .flexlayout__tab_toolbar_sticky_buttons_container {
309
- display: flex;
310
- gap: 0.3em;
311
- padding-left: 5px;
312
- align-items: center;
313
- }
314
- .flexlayout__tab_floating {
315
- overflow: auto;
316
- position: absolute;
317
- box-sizing: border-box;
318
- color: var(--color-text);
319
- background-color: var(--color-background);
320
- display: flex;
321
- justify-content: center;
322
- align-items: center;
323
- }
324
- .flexlayout__tab_floating_inner {
325
- overflow: auto;
326
- display: flex;
327
- flex-direction: column;
328
- justify-content: center;
329
- align-items: center;
330
- }
331
- .flexlayout__tab_floating_inner div {
332
- margin-bottom: 5px;
333
- text-align: center;
334
- }
335
- .flexlayout__tab_floating_inner div a {
336
- color: royalblue;
337
- }
338
- .flexlayout__border {
339
- box-sizing: border-box;
340
- overflow: hidden;
341
- display: flex;
342
- font-size: var(--font-size);
343
- font-family: var(--font-family);
344
- color: var(--color-border);
345
- background-color: var(--color-border-background);
346
- }
347
- .flexlayout__border_top {
348
- border-bottom: 1px solid var(--color-border-divider-line);
349
- align-items: center;
350
- }
351
- .flexlayout__border_bottom {
352
- border-top: 1px solid var(--color-border-divider-line);
353
- align-items: center;
354
- }
355
- .flexlayout__border_left {
356
- border-right: 1px solid var(--color-border-divider-line);
357
- align-content: center;
358
- flex-direction: column;
359
- }
360
- .flexlayout__border_right {
361
- border-left: 1px solid var(--color-border-divider-line);
362
- align-content: center;
363
- flex-direction: column;
364
- }
365
- .flexlayout__border_inner {
366
- position: relative;
367
- box-sizing: border-box;
368
- display: flex;
369
- overflow: hidden;
370
- flex-grow: 1;
371
- }
372
- .flexlayout__border_inner_tab_container {
373
- white-space: nowrap;
374
- display: flex;
375
- padding-left: 2px;
376
- padding-right: 2px;
377
- box-sizing: border-box;
378
- position: absolute;
379
- top: 0;
380
- bottom: 0;
381
- width: 10000px;
382
- }
383
- .flexlayout__border_inner_tab_container_right {
384
- transform-origin: top left;
385
- transform: rotate(90deg);
386
- }
387
- .flexlayout__border_inner_tab_container_left {
388
- flex-direction: row-reverse;
389
- transform-origin: top right;
390
- transform: rotate(-90deg);
391
- }
392
- .flexlayout__border_tab_divider {
393
- width: 4px;
394
- }
395
- .flexlayout__border_button {
396
- display: flex;
397
- gap: 0.3em;
398
- align-items: center;
399
- cursor: pointer;
400
- padding: 3px 0.5em;
401
- margin: 2px 0px;
402
- box-sizing: border-box;
403
- white-space: nowrap;
404
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
405
- border-radius: 3px;
406
- }
407
- .flexlayout__border_button--selected {
408
- background-color: var(--color-border-tab-selected-background);
409
- color: var(--color-border-tab-selected);
410
- }
411
- @media (hover: hover) {
412
- .flexlayout__border_button:hover {
413
- background-color: var(--color-border-tab-selected-background);
414
- color: var(--color-border-tab-selected);
415
- background-color: var(--color-4);
416
- }
417
- }
418
- .flexlayout__border_button--unselected {
419
- background-color: var(--color-border-tab-unselected-background);
420
- color: var(--color-border-tab-unselected);
421
- }
422
- .flexlayout__border_button_leading {
423
- display: flex;
424
- }
425
- .flexlayout__border_button_content {
426
- display: flex;
427
- }
428
- .flexlayout__border_button_trailing {
429
- display: flex;
430
- border-radius: 4px;
431
- visibility: hidden;
432
- }
433
- .flexlayout__border_button_trailing:hover {
434
- background-color: var(--color-6);
435
- }
436
- @media (hover: hover) {
437
- .flexlayout__border_button:hover .flexlayout__border_button_trailing {
438
- visibility: visible;
439
- }
440
- }
441
- .flexlayout__border_button--selected .flexlayout__border_button_trailing {
442
- visibility: visible;
443
- }
444
- .flexlayout__border_toolbar {
445
- display: flex;
446
- gap: 0.3em;
447
- align-items: center;
448
- }
449
- .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
450
- flex-direction: column;
451
- padding-top: 0.5em;
452
- padding-bottom: 0.3em;
453
- }
454
- .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
455
- padding-left: 0.5em;
456
- padding-right: 0.3em;
457
- }
458
- .flexlayout__border_toolbar_button {
459
- border: none;
460
- outline: none;
461
- font-size: inherit;
462
- background-color: transparent;
463
- border-radius: 4px;
464
- padding: 1px;
465
- }
466
- @media (hover: hover) {
467
- .flexlayout__border_toolbar_button:hover {
468
- background-color: var(--color-4);
469
- }
470
- }
471
- .flexlayout__border_toolbar_button_overflow {
472
- display: flex;
473
- align-items: center;
474
- border: none;
475
- color: var(--color-overflow);
476
- font-size: inherit;
477
- background-color: transparent;
478
- }
479
- .flexlayout__popup_menu {
480
- font-size: var(--font-size);
481
- font-family: var(--font-family);
482
- }
483
- .flexlayout__popup_menu_item {
484
- padding: 2px 0.5em;
485
- white-space: nowrap;
486
- cursor: pointer;
487
- border-radius: 2px;
488
- }
489
- @media (hover: hover) {
490
- .flexlayout__popup_menu_item:hover {
491
- background-color: var(--color-6);
492
- }
493
- }
494
- .flexlayout__popup_menu_container {
495
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
496
- border: 1px solid var(--color-popup-border);
497
- color: var(--color-popup-unselected);
498
- background: var(--color-popup-unselected-background);
499
- border-radius: 3px;
500
- position: absolute;
501
- z-index: 1000;
502
- max-height: 50%;
503
- min-width: 100px;
504
- overflow: auto;
505
- padding: 2px;
506
- }
507
- .flexlayout__floating_window _body {
508
- height: 100%;
509
- }
510
- .flexlayout__floating_window_content {
511
- left: 0;
512
- top: 0;
513
- right: 0;
514
- bottom: 0;
515
- position: absolute;
516
- }
517
- .flexlayout__floating_window_tab {
518
- overflow: auto;
519
- left: 0;
520
- top: 0;
521
- right: 0;
522
- bottom: 0;
523
- position: absolute;
524
- box-sizing: border-box;
525
- background-color: var(--color-background);
526
- color: var(--color-text);
527
- }
528
- .flexlayout__error_boundary_container {
529
- left: 0;
530
- top: 0;
531
- right: 0;
532
- bottom: 0;
533
- position: absolute;
534
- display: flex;
535
- justify-content: center;
536
- }
537
- .flexlayout__error_boundary_content {
538
- display: flex;
539
- align-items: center;
540
- }
541
- .flexlayout__tabset_sizer {
542
- padding-top: 5px;
543
- padding-bottom: 3px;
544
- font-size: var(--font-size);
545
- font-family: var(--font-family);
546
- }
547
- .flexlayout__tabset_header_sizer {
548
- padding-top: 3px;
549
- padding-bottom: 3px;
550
- font-size: var(--font-size);
551
- font-family: var(--font-family);
552
- }
553
- .flexlayout__border_sizer {
554
- padding-top: 6px;
555
- padding-bottom: 5px;
556
- font-size: var(--font-size);
557
- font-family: var(--font-family);
558
- }
559
-
560
- /*# sourceMappingURL=dark.css.map */
1
+ .flexlayout__layout {
2
+ --color-text: #eeeeee;
3
+ --color-background: black;
4
+ --color-base: black;
5
+ --color-1: #121212;
6
+ --color-2: #1a1a1a;
7
+ --color-3: #262626;
8
+ --color-4: #333333;
9
+ --color-5: #404040;
10
+ --color-6: #4d4d4d;
11
+ --color-drag1: rgb(207, 232, 255);
12
+ --color-drag2: rgb(183, 209, 181);
13
+ --color-drag1-background: rgba(128, 128, 128, 0.15);
14
+ --color-drag2-background: rgba(128, 128, 128, 0.15);
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-1);
20
+ --color-tabset-background-selected: var(--color-1);
21
+ --color-tabset-background-maximized: var(--color-6);
22
+ --color-tabset-divider-line: var(--color-4);
23
+ --color-tabset-header-background: var(--color-1);
24
+ --color-tabset-header: var(--color-text);
25
+ --color-border-background: var(--color-1);
26
+ --color-border-divider-line: var(--color-4);
27
+ --color-tab-selected: var(--color-text);
28
+ --color-tab-selected-background: var(--color-4);
29
+ --color-tab-unselected: gray;
30
+ --color-tab-unselected-background: transparent;
31
+ --color-tab-textbox: var(--color-text);
32
+ --color-tab-textbox-background: var(--color-3);
33
+ --color-border-tab-selected: var(--color-text);
34
+ --color-border-tab-selected-background: var(--color-4);
35
+ --color-border-tab-unselected: gray;
36
+ --color-border-tab-unselected-background: var(--color-2);
37
+ --color-splitter: var(--color-2);
38
+ --color-splitter-hover: var(--color-4);
39
+ --color-splitter-drag: var(--color-5);
40
+ --color-drag-rect-border: var(--color-4);
41
+ --color-drag-rect-background: var(--color-1);
42
+ --color-drag-rect: var(--color-text);
43
+ --color-popup-border: var(--color-6);
44
+ --color-popup-unselected: var(--color-text);
45
+ --color-popup-unselected-background: black;
46
+ --color-popup-selected: var(--color-text);
47
+ --color-popup-selected-background: var(--color-4);
48
+ --color-edge-marker: gray;
49
+ }
50
+
51
+ .flexlayout__layout {
52
+ left: 0;
53
+ top: 0;
54
+ right: 0;
55
+ bottom: 0;
56
+ position: absolute;
57
+ overflow: hidden;
58
+ }
59
+ .flexlayout__splitter {
60
+ background-color: var(--color-splitter);
61
+ }
62
+ @media (hover: hover) {
63
+ .flexlayout__splitter:hover {
64
+ background-color: var(--color-splitter-hover);
65
+ transition: background-color ease-in 0.1s;
66
+ transition-delay: 0.05s;
67
+ }
68
+ }
69
+ .flexlayout__splitter_border {
70
+ z-index: 10;
71
+ }
72
+ .flexlayout__splitter_drag {
73
+ z-index: 1000;
74
+ background-color: var(--color-splitter-drag);
75
+ border-radius: 5px;
76
+ }
77
+ .flexlayout__splitter_extra {
78
+ background-color: transparent;
79
+ }
80
+ .flexlayout__outline_rect {
81
+ position: absolute;
82
+ pointer-events: none;
83
+ box-sizing: border-box;
84
+ border: 2px solid var(--color-drag1);
85
+ background: var(--color-drag1-background);
86
+ border-radius: 5px;
87
+ z-index: 1000;
88
+ }
89
+ .flexlayout__outline_rect_edge {
90
+ pointer-events: none;
91
+ border: 2px solid var(--color-drag2);
92
+ background: var(--color-drag2-background);
93
+ border-radius: 5px;
94
+ z-index: 1000;
95
+ box-sizing: border-box;
96
+ }
97
+ .flexlayout__edge_rect {
98
+ position: absolute;
99
+ z-index: 1000;
100
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
101
+ background-color: var(--color-edge-marker);
102
+ pointer-events: none;
103
+ }
104
+ .flexlayout__drag_rect {
105
+ position: absolute;
106
+ cursor: move;
107
+ color: var(--color-drag-rect);
108
+ background-color: var(--color-drag-rect-background);
109
+ border: 2px solid var(--color-drag-rect-border);
110
+ border-radius: 5px;
111
+ z-index: 1000;
112
+ box-sizing: border-box;
113
+ opacity: 0.9;
114
+ text-align: center;
115
+ display: flex;
116
+ justify-content: center;
117
+ flex-direction: column;
118
+ overflow: hidden;
119
+ padding: 0.3em 1em;
120
+ word-wrap: break-word;
121
+ font-size: var(--font-size);
122
+ font-family: var(--font-family);
123
+ }
124
+ .flexlayout__tabset {
125
+ display: flex;
126
+ flex-direction: column;
127
+ overflow: hidden;
128
+ background-color: var(--color-tabset-background);
129
+ box-sizing: border-box;
130
+ font-size: var(--font-size);
131
+ font-family: var(--font-family);
132
+ }
133
+ .flexlayout__tabset_tab_divider {
134
+ width: 4px;
135
+ }
136
+ .flexlayout__tabset_content {
137
+ display: flex;
138
+ flex-grow: 1;
139
+ align-items: center;
140
+ justify-content: center;
141
+ }
142
+ .flexlayout__tabset_header {
143
+ display: flex;
144
+ align-items: center;
145
+ padding: 3px 3px 3px 5px;
146
+ box-sizing: border-box;
147
+ border-bottom: 1px solid var(--color-tabset-divider-line);
148
+ color: var(--color-tabset-header);
149
+ background-color: var(--color-tabset-header-background);
150
+ box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
151
+ }
152
+ .flexlayout__tabset_header_content {
153
+ flex-grow: 1;
154
+ }
155
+ .flexlayout__tabset_tabbar_outer {
156
+ box-sizing: border-box;
157
+ background-color: var(--color-tabset-background);
158
+ overflow: hidden;
159
+ display: flex;
160
+ }
161
+ .flexlayout__tabset_tabbar_outer_top {
162
+ border-bottom: 1px solid var(--color-tabset-divider-line);
163
+ }
164
+ .flexlayout__tabset_tabbar_outer_bottom {
165
+ border-top: 1px solid var(--color-tabset-divider-line);
166
+ }
167
+ .flexlayout__tabset_tabbar_inner {
168
+ position: relative;
169
+ box-sizing: border-box;
170
+ display: flex;
171
+ flex-grow: 1;
172
+ overflow: hidden;
173
+ }
174
+ .flexlayout__tabset_tabbar_inner_tab_container {
175
+ display: flex;
176
+ padding-left: 4px;
177
+ padding-right: 4px;
178
+ box-sizing: border-box;
179
+ position: absolute;
180
+ top: 0;
181
+ bottom: 0;
182
+ width: 10000px;
183
+ }
184
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
185
+ border-top: 2px solid transparent;
186
+ }
187
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
188
+ border-bottom: 2px solid transparent;
189
+ }
190
+ .flexlayout__tabset-selected {
191
+ background-color: var(--color-tabset-background-selected);
192
+ background-image: linear-gradient(var(--color-background), var(--color-4));
193
+ }
194
+ .flexlayout__tabset-maximized {
195
+ background-color: var(--color-tabset-background-maximized);
196
+ background-image: linear-gradient(var(--color-6), var(--color-2));
197
+ }
198
+ .flexlayout__tab_button_stamp {
199
+ display: inline-flex;
200
+ align-items: center;
201
+ gap: 0.3em;
202
+ white-space: nowrap;
203
+ box-sizing: border-box;
204
+ }
205
+ .flexlayout__tab {
206
+ overflow: auto;
207
+ position: absolute;
208
+ box-sizing: border-box;
209
+ background-color: var(--color-background);
210
+ color: var(--color-text);
211
+ }
212
+ .flexlayout__tab_button {
213
+ display: flex;
214
+ gap: 0.3em;
215
+ align-items: center;
216
+ box-sizing: border-box;
217
+ padding: 3px 0.5em;
218
+ cursor: pointer;
219
+ }
220
+ .flexlayout__tab_button--selected {
221
+ background-color: var(--color-tab-selected-background);
222
+ color: var(--color-tab-selected);
223
+ }
224
+ @media (hover: hover) {
225
+ .flexlayout__tab_button:hover {
226
+ background-color: var(--color-tab-selected-background);
227
+ color: var(--color-tab-selected);
228
+ }
229
+ }
230
+ .flexlayout__tab_button--unselected {
231
+ background-color: var(--color-tab-unselected-background);
232
+ color: var(--color-tab-unselected);
233
+ }
234
+ .flexlayout__tab_button_top {
235
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
236
+ border-top-left-radius: 3px;
237
+ border-top-right-radius: 3px;
238
+ }
239
+ .flexlayout__tab_button_bottom {
240
+ box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
241
+ border-bottom-left-radius: 3px;
242
+ border-bottom-right-radius: 3px;
243
+ }
244
+ .flexlayout__tab_button_leading {
245
+ display: flex;
246
+ }
247
+ .flexlayout__tab_button_content {
248
+ display: flex;
249
+ }
250
+ .flexlayout__tab_button_textbox {
251
+ border: none;
252
+ font-family: var(--font-family);
253
+ font-size: var(--font-size);
254
+ color: var(--color-tab-textbox);
255
+ background-color: var(--color-tab-textbox-background);
256
+ border: 1px inset var(--color-1);
257
+ border-radius: 3px;
258
+ width: 10em;
259
+ }
260
+ .flexlayout__tab_button_textbox:focus {
261
+ outline: none;
262
+ }
263
+ .flexlayout__tab_button_trailing {
264
+ display: flex;
265
+ visibility: hidden;
266
+ border-radius: 4px;
267
+ }
268
+ .flexlayout__tab_button_trailing:hover {
269
+ background-color: var(--color-6);
270
+ }
271
+ @media (hover: hover) {
272
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
273
+ visibility: visible;
274
+ }
275
+ }
276
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
277
+ visibility: visible;
278
+ }
279
+ .flexlayout__tab_button_overflow {
280
+ display: flex;
281
+ align-items: center;
282
+ border: none;
283
+ color: var(--color-overflow);
284
+ font-size: inherit;
285
+ background-color: transparent;
286
+ }
287
+ .flexlayout__tab_toolbar {
288
+ display: flex;
289
+ align-items: center;
290
+ gap: 0.3em;
291
+ padding-left: 0.5em;
292
+ padding-right: 0.3em;
293
+ }
294
+ .flexlayout__tab_toolbar_button {
295
+ border: none;
296
+ outline: none;
297
+ font-size: inherit;
298
+ margin: 0px;
299
+ background-color: transparent;
300
+ border-radius: 4px;
301
+ padding: 1px;
302
+ }
303
+ @media (hover: hover) {
304
+ .flexlayout__tab_toolbar_button:hover {
305
+ background-color: var(--color-4);
306
+ }
307
+ }
308
+ .flexlayout__tab_toolbar_sticky_buttons_container {
309
+ display: flex;
310
+ gap: 0.3em;
311
+ padding-left: 5px;
312
+ align-items: center;
313
+ }
314
+ .flexlayout__tab_floating {
315
+ overflow: auto;
316
+ position: absolute;
317
+ box-sizing: border-box;
318
+ color: var(--color-text);
319
+ background-color: var(--color-background);
320
+ display: flex;
321
+ justify-content: center;
322
+ align-items: center;
323
+ }
324
+ .flexlayout__tab_floating_inner {
325
+ overflow: auto;
326
+ display: flex;
327
+ flex-direction: column;
328
+ justify-content: center;
329
+ align-items: center;
330
+ }
331
+ .flexlayout__tab_floating_inner div {
332
+ margin-bottom: 5px;
333
+ text-align: center;
334
+ }
335
+ .flexlayout__tab_floating_inner div a {
336
+ color: royalblue;
337
+ }
338
+ .flexlayout__border {
339
+ box-sizing: border-box;
340
+ overflow: hidden;
341
+ display: flex;
342
+ font-size: var(--font-size);
343
+ font-family: var(--font-family);
344
+ color: var(--color-border);
345
+ background-color: var(--color-border-background);
346
+ }
347
+ .flexlayout__border_top {
348
+ border-bottom: 1px solid var(--color-border-divider-line);
349
+ align-items: center;
350
+ }
351
+ .flexlayout__border_bottom {
352
+ border-top: 1px solid var(--color-border-divider-line);
353
+ align-items: center;
354
+ }
355
+ .flexlayout__border_left {
356
+ border-right: 1px solid var(--color-border-divider-line);
357
+ align-content: center;
358
+ flex-direction: column;
359
+ }
360
+ .flexlayout__border_right {
361
+ border-left: 1px solid var(--color-border-divider-line);
362
+ align-content: center;
363
+ flex-direction: column;
364
+ }
365
+ .flexlayout__border_inner {
366
+ position: relative;
367
+ box-sizing: border-box;
368
+ display: flex;
369
+ overflow: hidden;
370
+ flex-grow: 1;
371
+ }
372
+ .flexlayout__border_inner_tab_container {
373
+ white-space: nowrap;
374
+ display: flex;
375
+ padding-left: 2px;
376
+ padding-right: 2px;
377
+ box-sizing: border-box;
378
+ position: absolute;
379
+ top: 0;
380
+ bottom: 0;
381
+ width: 10000px;
382
+ }
383
+ .flexlayout__border_inner_tab_container_right {
384
+ transform-origin: top left;
385
+ transform: rotate(90deg);
386
+ }
387
+ .flexlayout__border_inner_tab_container_left {
388
+ flex-direction: row-reverse;
389
+ transform-origin: top right;
390
+ transform: rotate(-90deg);
391
+ }
392
+ .flexlayout__border_tab_divider {
393
+ width: 4px;
394
+ }
395
+ .flexlayout__border_button {
396
+ display: flex;
397
+ gap: 0.3em;
398
+ align-items: center;
399
+ cursor: pointer;
400
+ padding: 3px 0.5em;
401
+ margin: 2px 0px;
402
+ box-sizing: border-box;
403
+ white-space: nowrap;
404
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
405
+ border-radius: 3px;
406
+ }
407
+ .flexlayout__border_button--selected {
408
+ background-color: var(--color-border-tab-selected-background);
409
+ color: var(--color-border-tab-selected);
410
+ }
411
+ @media (hover: hover) {
412
+ .flexlayout__border_button:hover {
413
+ background-color: var(--color-border-tab-selected-background);
414
+ color: var(--color-border-tab-selected);
415
+ background-color: var(--color-4);
416
+ }
417
+ }
418
+ .flexlayout__border_button--unselected {
419
+ background-color: var(--color-border-tab-unselected-background);
420
+ color: var(--color-border-tab-unselected);
421
+ }
422
+ .flexlayout__border_button_leading {
423
+ display: flex;
424
+ }
425
+ .flexlayout__border_button_content {
426
+ display: flex;
427
+ }
428
+ .flexlayout__border_button_trailing {
429
+ display: flex;
430
+ border-radius: 4px;
431
+ visibility: hidden;
432
+ }
433
+ .flexlayout__border_button_trailing:hover {
434
+ background-color: var(--color-6);
435
+ }
436
+ @media (hover: hover) {
437
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
438
+ visibility: visible;
439
+ }
440
+ }
441
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
442
+ visibility: visible;
443
+ }
444
+ .flexlayout__border_toolbar {
445
+ display: flex;
446
+ gap: 0.3em;
447
+ align-items: center;
448
+ }
449
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
450
+ flex-direction: column;
451
+ padding-top: 0.5em;
452
+ padding-bottom: 0.3em;
453
+ }
454
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
455
+ padding-left: 0.5em;
456
+ padding-right: 0.3em;
457
+ }
458
+ .flexlayout__border_toolbar_button {
459
+ border: none;
460
+ outline: none;
461
+ font-size: inherit;
462
+ background-color: transparent;
463
+ border-radius: 4px;
464
+ padding: 1px;
465
+ }
466
+ @media (hover: hover) {
467
+ .flexlayout__border_toolbar_button:hover {
468
+ background-color: var(--color-4);
469
+ }
470
+ }
471
+ .flexlayout__border_toolbar_button_overflow {
472
+ display: flex;
473
+ align-items: center;
474
+ border: none;
475
+ color: var(--color-overflow);
476
+ font-size: inherit;
477
+ background-color: transparent;
478
+ }
479
+ .flexlayout__popup_menu {
480
+ font-size: var(--font-size);
481
+ font-family: var(--font-family);
482
+ }
483
+ .flexlayout__popup_menu_item {
484
+ padding: 2px 0.5em;
485
+ white-space: nowrap;
486
+ cursor: pointer;
487
+ border-radius: 2px;
488
+ }
489
+ @media (hover: hover) {
490
+ .flexlayout__popup_menu_item:hover {
491
+ background-color: var(--color-6);
492
+ }
493
+ }
494
+ .flexlayout__popup_menu_container {
495
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
496
+ border: 1px solid var(--color-popup-border);
497
+ color: var(--color-popup-unselected);
498
+ background: var(--color-popup-unselected-background);
499
+ border-radius: 3px;
500
+ position: absolute;
501
+ z-index: 1000;
502
+ max-height: 50%;
503
+ min-width: 100px;
504
+ overflow: auto;
505
+ padding: 2px;
506
+ }
507
+ .flexlayout__floating_window _body {
508
+ height: 100%;
509
+ }
510
+ .flexlayout__floating_window_content {
511
+ left: 0;
512
+ top: 0;
513
+ right: 0;
514
+ bottom: 0;
515
+ position: absolute;
516
+ }
517
+ .flexlayout__floating_window_tab {
518
+ overflow: auto;
519
+ left: 0;
520
+ top: 0;
521
+ right: 0;
522
+ bottom: 0;
523
+ position: absolute;
524
+ box-sizing: border-box;
525
+ background-color: var(--color-background);
526
+ color: var(--color-text);
527
+ }
528
+ .flexlayout__error_boundary_container {
529
+ left: 0;
530
+ top: 0;
531
+ right: 0;
532
+ bottom: 0;
533
+ position: absolute;
534
+ display: flex;
535
+ justify-content: center;
536
+ }
537
+ .flexlayout__error_boundary_content {
538
+ display: flex;
539
+ align-items: center;
540
+ }
541
+ .flexlayout__tabset_sizer {
542
+ padding-top: 5px;
543
+ padding-bottom: 3px;
544
+ font-size: var(--font-size);
545
+ font-family: var(--font-family);
546
+ }
547
+ .flexlayout__tabset_header_sizer {
548
+ padding-top: 3px;
549
+ padding-bottom: 3px;
550
+ font-size: var(--font-size);
551
+ font-family: var(--font-family);
552
+ }
553
+ .flexlayout__border_sizer {
554
+ padding-top: 6px;
555
+ padding-bottom: 5px;
556
+ font-size: var(--font-size);
557
+ font-family: var(--font-family);
558
+ }
559
+
560
+ /*# sourceMappingURL=dark.css.map */