flexlayout-react 0.8.1 → 0.8.3

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 (35) hide show
  1. package/ChangeLog.txt +12 -0
  2. package/README.md +9 -9
  3. package/declarations/model/IJsonModel.d.ts +1 -1
  4. package/declarations/view/Utils.d.ts +0 -3
  5. package/dist/flexlayout.js +41 -11
  6. package/dist/flexlayout_min.js +2 -1
  7. package/dist/flexlayout_min.js.LICENSE.txt +19 -0
  8. package/lib/model/LayoutWindow.js +1 -3
  9. package/lib/model/LayoutWindow.js.map +1 -1
  10. package/lib/model/Model.js +0 -9
  11. package/lib/model/Model.js.map +1 -1
  12. package/lib/model/TabSetNode.js +1 -1
  13. package/lib/model/TabSetNode.js.map +1 -1
  14. package/lib/view/Layout.js +1 -1
  15. package/lib/view/Layout.js.map +1 -1
  16. package/lib/view/Tab.js +5 -0
  17. package/lib/view/Tab.js.map +1 -1
  18. package/lib/view/TabOverflowHook.js +2 -0
  19. package/lib/view/TabOverflowHook.js.map +1 -1
  20. package/lib/view/Utils.js +0 -17
  21. package/lib/view/Utils.js.map +1 -1
  22. package/package.json +29 -31
  23. package/src/model/IJsonModel.ts +1 -1
  24. package/src/model/LayoutWindow.ts +1 -3
  25. package/src/model/Model.ts +0 -9
  26. package/src/model/TabSetNode.ts +1 -1
  27. package/src/view/Layout.tsx +7 -7
  28. package/src/view/Tab.tsx +6 -0
  29. package/src/view/TabOverflowHook.tsx +1 -0
  30. package/src/view/Utils.tsx +0 -24
  31. package/style/dark.css +685 -685
  32. package/style/gray.css +668 -668
  33. package/style/light.css +669 -669
  34. package/style/rounded.css +697 -697
  35. package/style/underline.css +690 -690
package/style/rounded.css CHANGED
@@ -1,697 +1,697 @@
1
- .flexlayout__layout {
2
- --color-text: black;
3
- --color-background: transparent;
4
- --color-base: #f2f6fb;
5
- --color-1: #e7eef8;
6
- --color-2: #dce7f4;
7
- --color-3: #d1dff1;
8
- --color-4: #c7d8ee;
9
- --color-5: #bdd1eb;
10
- --color-6: #b3cae8;
11
- --color-drag1: rgb(95, 134, 196);
12
- --color-drag2: rgb(95, 134, 196);
13
- --color-drag1-background: rgba(95, 134, 196, 0.1);
14
- --color-drag2-background: rgba(95, 134, 196, 0.1);
15
- --font-size: medium;
16
- --font-family: Roboto, Arial, sans-serif;
17
- --color-overflow: #999db2;
18
- --color-icon: #999db2;
19
- --color-tabset-background: white;
20
- --color-tabset-background-selected: white;
21
- --color-tabset-background-maximized: var(--color-2);
22
- --color-tabset-divider-line: white;
23
- --color-tabset-header-background: var(--color-background);
24
- --color-tabset-header: var(--color-text);
25
- --color-border-tab-content: white;
26
- --color-border-background: var(--color-background);
27
- --color-border-divider-line: var(--color-background);
28
- --color-tab-content: white;
29
- --color-tab-selected: var(--color-text);
30
- --color-tab-selected-background: var(--color-2);
31
- --color-tab-unselected: gray;
32
- --color-tab-unselected-background: transparent;
33
- --color-tab-textbox: var(--color-text);
34
- --color-tab-textbox-background: var(--color-3);
35
- --color-border-tab-selected: var(--color-text);
36
- --color-border-tab-selected-background: var(--color-2);
37
- --color-border-tab-unselected: gray;
38
- --color-border-tab-unselected-background: var(--color-2);
39
- --color-splitter: #f2f6fb;
40
- --color-splitter-hover: var(--color-4);
41
- --color-splitter-drag: var(--color-4);
42
- --color-drag-rect-border: #ccc;
43
- --color-drag-rect-background: var(--color-5);
44
- --color-drag-rect: var(--color-text);
45
- --color-popup-border: var(--color-6);
46
- --color-popup-unselected: var(--color-text);
47
- --color-popup-unselected-background: #f2f6fb;
48
- --color-popup-selected: var(--color-text);
49
- --color-popup-selected-background: var(--color-3);
50
- --color-edge-marker: #a6bbdf;
51
- --color-edge-icon: #555;
52
- }
53
-
54
- .flexlayout__layout {
55
- left: 0;
56
- top: 0;
57
- right: 0;
58
- bottom: 0;
59
- position: absolute;
60
- display: flex;
61
- }
62
- .flexlayout__layout_overlay {
63
- left: 0;
64
- top: 0;
65
- right: 0;
66
- bottom: 0;
67
- position: absolute;
68
- z-index: 1000;
69
- }
70
- .flexlayout__layout_tab_stamps {
71
- position: absolute;
72
- top: -10000px;
73
- z-index: 100;
74
- display: flex;
75
- flex-direction: column;
76
- align-items: start;
77
- }
78
- .flexlayout__layout_moveables {
79
- visibility: hidden;
80
- position: absolute;
81
- width: 100px;
82
- height: 100px;
83
- top: -20000px;
84
- }
85
- .flexlayout__layout_main {
86
- display: flex;
87
- flex-basis: 0px;
88
- min-width: 0;
89
- min-height: 0;
90
- flex-grow: 1;
91
- position: relative;
92
- }
93
- .flexlayout__layout_border_container {
94
- display: flex;
95
- flex-basis: 0px;
96
- min-width: 0;
97
- min-height: 0;
98
- flex-grow: 1;
99
- }
100
- .flexlayout__layout_border_container_inner {
101
- display: flex;
102
- flex-basis: 0px;
103
- min-width: 0;
104
- min-height: 0;
105
- flex-grow: 1;
106
- }
107
- .flexlayout__splitter {
108
- display: flex;
109
- align-items: center;
110
- justify-content: center;
111
- background-color: var(--color-splitter);
112
- touch-action: none;
113
- z-index: 10;
114
- }
115
- @media (hover: hover) {
116
- .flexlayout__splitter:hover {
117
- background-color: var(--color-splitter-hover);
118
- transition: background-color ease-in 0.1s;
119
- transition-delay: 0.05s;
120
- }
121
- }
122
- .flexlayout__splitter_drag {
123
- position: absolute;
124
- display: flex;
125
- align-items: center;
126
- justify-content: center;
127
- z-index: 1000;
128
- background-color: var(--color-splitter-drag);
129
- }
130
- .flexlayout__splitter_handle {
131
- background-color: #ccc;
132
- border-radius: 3px;
133
- }
134
- .flexlayout__splitter_handle_horz {
135
- width: 3px;
136
- height: 30px;
137
- }
138
- .flexlayout__splitter_handle_vert {
139
- width: 30px;
140
- height: 3px;
141
- }
142
- .flexlayout__splitter_extra {
143
- touch-action: none;
144
- background-color: transparent;
145
- }
146
- .flexlayout__outline_rect {
147
- position: absolute;
148
- pointer-events: none;
149
- box-sizing: border-box;
150
- border: 2px solid var(--color-drag1);
151
- background: var(--color-drag1-background);
152
- border-radius: 5px;
153
- z-index: 1000;
154
- }
155
- .flexlayout__outline_rect_edge {
156
- pointer-events: none;
157
- border: 2px solid var(--color-drag2);
158
- background: var(--color-drag2-background);
159
- border-radius: 5px;
160
- z-index: 1000;
161
- box-sizing: border-box;
162
- }
163
- .flexlayout__edge_rect {
164
- position: absolute;
165
- z-index: 1000;
166
- background-color: var(--color-edge-marker);
167
- pointer-events: none;
168
- display: flex;
169
- align-items: center;
170
- justify-content: center;
171
- }
172
- .flexlayout__drag_rect {
173
- color: var(--color-drag-rect);
174
- background-color: var(--color-drag-rect-background);
175
- border: 2px solid var(--color-drag-rect-border);
176
- border-radius: 5px;
177
- box-sizing: border-box;
178
- display: flex;
179
- justify-content: center;
180
- flex-direction: column;
181
- overflow: hidden;
182
- padding: 0.3em 0.8em;
183
- word-wrap: break-word;
184
- font-size: var(--font-size);
185
- font-family: var(--font-family);
186
- }
187
- .flexlayout__row {
188
- display: flex;
189
- flex-basis: 0px;
190
- min-width: 0;
191
- min-height: 0;
192
- position: relative;
193
- box-sizing: border-box;
194
- overflow: hidden;
195
- }
196
- .flexlayout__tabset {
197
- display: flex;
198
- flex-direction: column;
199
- position: relative;
200
- background-color: var(--color-tabset-background);
201
- box-sizing: border-box;
202
- font-family: var(--font-family);
203
- overflow: hidden;
204
- flex-grow: 1;
205
- border-radius: 10px;
206
- }
207
- .flexlayout__tabset_container {
208
- display: flex;
209
- flex-basis: 0px;
210
- min-width: 0;
211
- min-height: 0;
212
- flex-direction: column;
213
- overflow: hidden;
214
- flex-grow: 1;
215
- }
216
- .flexlayout__tabset_tab_divider {
217
- width: 4px;
218
- }
219
- .flexlayout__tabset_content {
220
- display: flex;
221
- flex-basis: 0px;
222
- min-width: 0;
223
- min-height: 0;
224
- flex-grow: 1;
225
- box-sizing: border-box;
226
- position: relative;
227
- }
228
- .flexlayout__tabset_header {
229
- display: flex;
230
- align-items: center;
231
- padding: 3px 3px 3px 5px;
232
- box-sizing: border-box;
233
- border-bottom: 1px solid var(--color-tabset-divider-line);
234
- color: var(--color-tabset-header);
235
- background-color: var(--color-tabset-header-background);
236
- font-size: var(--font-size);
237
- }
238
- .flexlayout__tabset_header_content {
239
- flex-grow: 1;
240
- }
241
- .flexlayout__tabset_tabbar_outer {
242
- box-sizing: border-box;
243
- background-color: var(--color-tabset-background);
244
- overflow: hidden;
245
- display: flex;
246
- font-size: var(--font-size);
247
- }
248
- .flexlayout__tabset_tabbar_outer_top {
249
- padding: 0px 2px 0px 2px;
250
- border-bottom: 1px solid var(--color-tabset-divider-line);
251
- }
252
- .flexlayout__tabset_tabbar_outer_bottom {
253
- padding: 0px 2px 0px 2px;
254
- border-top: 1px solid var(--color-tabset-divider-line);
255
- }
256
- .flexlayout__tabset_tabbar_inner {
257
- position: relative;
258
- box-sizing: border-box;
259
- display: flex;
260
- flex-grow: 1;
261
- overflow: hidden;
262
- }
263
- .flexlayout__tabset_tabbar_inner_tab_container {
264
- position: relative;
265
- display: flex;
266
- padding-left: 4px;
267
- padding-right: 4px;
268
- box-sizing: border-box;
269
- white-space: nowrap;
270
- }
271
- .flexlayout__tabset_tabbar_inner_tab_container_top {
272
- border-top: 2px solid transparent;
273
- }
274
- .flexlayout__tabset_tabbar_inner_tab_container_bottom {
275
- border-bottom: 2px solid transparent;
276
- }
277
- .flexlayout__tabset-selected {
278
- background-color: var(--color-tabset-background-selected);
279
- }
280
- .flexlayout__tabset-maximized {
281
- background-color: var(--color-tabset-background-maximized);
282
- }
283
- .flexlayout__tab_button_stamp {
284
- display: inline-flex;
285
- align-items: center;
286
- gap: 0.3em;
287
- white-space: nowrap;
288
- box-sizing: border-box;
289
- }
290
- .flexlayout__tab {
291
- overflow: hidden;
292
- box-sizing: border-box;
293
- background-color: var(--color-tab-content);
294
- color: var(--color-text);
295
- position: relative;
296
- }
297
- .flexlayout__tab_moveable {
298
- position: relative;
299
- height: 100%;
300
- min-width: 1px;
301
- min-height: 1px;
302
- overflow: auto;
303
- box-sizing: border-box;
304
- }
305
- .flexlayout__tab_overlay {
306
- z-index: 20;
307
- position: absolute;
308
- top: 0;
309
- left: 0;
310
- right: 0;
311
- bottom: 0;
312
- background-color: rgba(0, 0, 0, 0.2392156863);
313
- }
314
- .flexlayout__tab_button {
315
- display: flex;
316
- gap: 0.3em;
317
- align-items: center;
318
- box-sizing: border-box;
319
- padding: 3px 0.5em;
320
- cursor: pointer;
321
- border-radius: 10px;
322
- padding: 2px 0.6em;
323
- }
324
- .flexlayout__tab_button_stretch {
325
- background-color: transparent;
326
- color: var(--color-tab-selected);
327
- width: 100%;
328
- padding: 3px 0em;
329
- text-wrap: nowrap;
330
- display: flex;
331
- gap: 0.3em;
332
- align-items: center;
333
- box-sizing: border-box;
334
- cursor: pointer;
335
- }
336
- @media (hover: hover) {
337
- .flexlayout__tab_button_stretch:hover {
338
- color: var(--color-tab-selected);
339
- }
340
- }
341
- .flexlayout__tab_button--selected {
342
- background-color: var(--color-tab-selected-background);
343
- color: var(--color-tab-selected);
344
- }
345
- @media (hover: hover) {
346
- .flexlayout__tab_button:hover {
347
- background-color: var(--color-tab-selected-background);
348
- color: var(--color-tab-selected);
349
- }
350
- }
351
- .flexlayout__tab_button--unselected {
352
- background-color: var(--color-tab-unselected-background);
353
- color: var(--color-tab-unselected);
354
- color: gray;
355
- }
356
- .flexlayout__tab_button_leading {
357
- display: flex;
358
- }
359
- .flexlayout__tab_button_content {
360
- display: flex;
361
- text-wrap: nowrap;
362
- }
363
- .flexlayout__tab_button_textbox {
364
- border: none;
365
- font-family: var(--font-family);
366
- font-size: var(--font-size);
367
- color: var(--color-tab-textbox);
368
- background-color: var(--color-tab-textbox-background);
369
- border: 1px inset var(--color-1);
370
- border-radius: 3px;
371
- width: 10em;
372
- }
373
- .flexlayout__tab_button_textbox:focus {
374
- outline: none;
375
- }
376
- .flexlayout__tab_button_trailing {
377
- display: flex;
378
- visibility: hidden;
379
- border-radius: 4px;
380
- }
381
- .flexlayout__tab_button_trailing:hover {
382
- background-color: var(--color-3);
383
- }
384
- @media (hover: hover) {
385
- .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
386
- visibility: visible;
387
- }
388
- }
389
- .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
390
- visibility: visible;
391
- }
392
- .flexlayout__tab_button_overflow {
393
- display: flex;
394
- align-items: center;
395
- border: none;
396
- color: var(--color-overflow);
397
- font-size: inherit;
398
- background-color: transparent;
399
- }
400
- .flexlayout__tab_toolbar {
401
- display: flex;
402
- align-items: center;
403
- gap: 0.3em;
404
- padding-left: 0.5em;
405
- padding-right: 0.3em;
406
- }
407
- .flexlayout__tab_toolbar_icon {
408
- border: none;
409
- outline: none;
410
- font-size: inherit;
411
- margin: 0px;
412
- background-color: transparent;
413
- padding: 1px;
414
- }
415
- .flexlayout__tab_toolbar_button {
416
- border: none;
417
- outline: none;
418
- font-size: inherit;
419
- margin: 0px;
420
- background-color: transparent;
421
- border-radius: 4px;
422
- padding: 1px;
423
- }
424
- @media (hover: hover) {
425
- .flexlayout__tab_toolbar_button:hover {
426
- background-color: var(--color-2);
427
- }
428
- }
429
- .flexlayout__tab_toolbar_sticky_buttons_container {
430
- display: flex;
431
- gap: 0.3em;
432
- padding-left: 5px;
433
- align-items: center;
434
- }
435
- .flexlayout__tab_floating {
436
- overflow: auto;
437
- position: absolute;
438
- box-sizing: border-box;
439
- color: var(--color-text);
440
- background-color: var(--color-background);
441
- display: flex;
442
- justify-content: center;
443
- align-items: center;
444
- }
445
- .flexlayout__tab_floating_inner {
446
- overflow: auto;
447
- display: flex;
448
- flex-direction: column;
449
- justify-content: center;
450
- align-items: center;
451
- }
452
- .flexlayout__tab_floating_inner div {
453
- margin-bottom: 5px;
454
- text-align: center;
455
- }
456
- .flexlayout__tab_floating_inner div a {
457
- color: royalblue;
458
- }
459
- .flexlayout__border {
460
- box-sizing: border-box;
461
- overflow: hidden;
462
- display: flex;
463
- font-size: var(--font-size);
464
- font-family: var(--font-family);
465
- color: var(--color-border);
466
- background-color: var(--color-border-background);
467
- }
468
- .flexlayout__border_tab_contents {
469
- box-sizing: border-box;
470
- overflow: hidden;
471
- background-color: var(--color-border-tab-content);
472
- }
473
- .flexlayout__border_top {
474
- border-bottom: 1px solid var(--color-border-divider-line);
475
- align-items: center;
476
- }
477
- .flexlayout__border_bottom {
478
- border-top: 1px solid var(--color-border-divider-line);
479
- align-items: center;
480
- }
481
- .flexlayout__border_left {
482
- border-right: 1px solid var(--color-border-divider-line);
483
- align-content: center;
484
- flex-direction: column;
485
- }
486
- .flexlayout__border_right {
487
- border-left: 1px solid var(--color-border-divider-line);
488
- align-content: center;
489
- flex-direction: column;
490
- }
491
- .flexlayout__border_inner {
492
- position: relative;
493
- box-sizing: border-box;
494
- display: flex;
495
- overflow: hidden;
496
- flex-grow: 1;
497
- }
498
- .flexlayout__border_inner_tab_container {
499
- white-space: nowrap;
500
- display: flex;
501
- padding-left: 2px;
502
- padding-right: 2px;
503
- box-sizing: border-box;
504
- position: absolute;
505
- width: 10000px;
506
- }
507
- .flexlayout__border_inner_tab_container_right {
508
- transform-origin: top left;
509
- transform: rotate(90deg);
510
- }
511
- .flexlayout__border_inner_tab_container_left {
512
- flex-direction: row-reverse;
513
- transform-origin: top right;
514
- transform: rotate(-90deg);
515
- }
516
- .flexlayout__border_tab_divider {
517
- width: 4px;
518
- }
519
- .flexlayout__border_button {
520
- display: flex;
521
- gap: 0.3em;
522
- align-items: center;
523
- cursor: pointer;
524
- padding: 3px 0.5em;
525
- margin: 2px 0px;
526
- box-sizing: border-box;
527
- white-space: nowrap;
528
- border-radius: 10px;
529
- padding: 2px 0.7em;
530
- }
531
- .flexlayout__border_button--selected {
532
- background-color: var(--color-border-tab-selected-background);
533
- color: var(--color-border-tab-selected);
534
- }
535
- @media (hover: hover) {
536
- .flexlayout__border_button:hover {
537
- background-color: var(--color-border-tab-selected-background);
538
- color: var(--color-border-tab-selected);
539
- }
540
- }
541
- .flexlayout__border_button--unselected {
542
- background-color: var(--color-border-tab-unselected-background);
543
- color: var(--color-border-tab-unselected);
544
- }
545
- .flexlayout__border_button_leading {
546
- display: flex;
547
- }
548
- .flexlayout__border_button_content {
549
- display: flex;
550
- }
551
- .flexlayout__border_button_trailing {
552
- display: flex;
553
- border-radius: 4px;
554
- visibility: hidden;
555
- }
556
- .flexlayout__border_button_trailing:hover {
557
- background-color: var(--color-3);
558
- }
559
- @media (hover: hover) {
560
- .flexlayout__border_button:hover .flexlayout__border_button_trailing {
561
- visibility: visible;
562
- }
563
- }
564
- .flexlayout__border_button--selected .flexlayout__border_button_trailing {
565
- visibility: visible;
566
- }
567
- .flexlayout__border_toolbar {
568
- display: flex;
569
- gap: 0.3em;
570
- align-items: center;
571
- }
572
- .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
573
- flex-direction: column;
574
- padding-top: 0.5em;
575
- padding-bottom: 0.3em;
576
- }
577
- .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
578
- padding-left: 0.5em;
579
- padding-right: 0.3em;
580
- }
581
- .flexlayout__border_toolbar_button {
582
- border: none;
583
- outline: none;
584
- font-size: inherit;
585
- background-color: transparent;
586
- border-radius: 4px;
587
- padding: 1px;
588
- }
589
- @media (hover: hover) {
590
- .flexlayout__border_toolbar_button:hover {
591
- background-color: var(--color-2);
592
- }
593
- }
594
- .flexlayout__border_toolbar_button_overflow {
595
- display: flex;
596
- align-items: center;
597
- border: none;
598
- color: var(--color-overflow);
599
- font-size: inherit;
600
- background-color: transparent;
601
- }
602
- .flexlayout__popup_menu {
603
- font-size: var(--font-size);
604
- font-family: var(--font-family);
605
- }
606
- .flexlayout__popup_menu_item {
607
- padding: 2px 0.5em;
608
- white-space: nowrap;
609
- cursor: pointer;
610
- border-radius: 2px;
611
- }
612
- @media (hover: hover) {
613
- .flexlayout__popup_menu_item:hover {
614
- background-color: var(--color-6);
615
- }
616
- }
617
- .flexlayout__popup_menu_container {
618
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
619
- border: 1px solid var(--color-popup-border);
620
- color: var(--color-popup-unselected);
621
- background: var(--color-popup-unselected-background);
622
- border-radius: 3px;
623
- position: absolute;
624
- z-index: 1000;
625
- max-height: 50%;
626
- min-width: 100px;
627
- overflow: auto;
628
- padding: 2px;
629
- }
630
- .flexlayout__floating_window _body {
631
- height: 100%;
632
- }
633
- .flexlayout__floating_window_content {
634
- left: 0;
635
- top: 0;
636
- right: 0;
637
- bottom: 0;
638
- position: absolute;
639
- }
640
- .flexlayout__error_boundary_container {
641
- left: 0;
642
- top: 0;
643
- right: 0;
644
- bottom: 0;
645
- position: absolute;
646
- display: flex;
647
- justify-content: center;
648
- }
649
- .flexlayout__error_boundary_content {
650
- display: flex;
651
- align-items: center;
652
- }
653
- .flexlayout__tabset_sizer {
654
- padding-top: 5px;
655
- padding-bottom: 3px;
656
- font-size: var(--font-size);
657
- font-family: var(--font-family);
658
- }
659
- .flexlayout__tabset_header_sizer {
660
- padding-top: 3px;
661
- padding-bottom: 3px;
662
- font-size: var(--font-size);
663
- font-family: var(--font-family);
664
- }
665
- .flexlayout__border_sizer {
666
- position: absolute;
667
- top: -30000px;
668
- padding-top: 6px;
669
- padding-bottom: 5px;
670
- font-size: var(--font-size);
671
- font-family: var(--font-family);
672
- }
673
-
674
- .flexlayout__tabset_content {
675
- padding: 1px 5px 5px 5px;
676
- border-bottom-left-radius: 10px;
677
- border-bottom-right-radius: 10px;
678
- }
679
-
680
- .flexlayout__tab_border {
681
- border-radius: 10px;
682
- padding: 3px;
683
- }
684
-
685
- .flexlayout__tabset_tabbar_outer_top {
686
- border-bottom: unset;
687
- }
688
-
689
- .flexlayout__border_tab_contents {
690
- background-color: white;
691
- }
692
-
693
- .flexlayout__border_tab_contents {
694
- border-radius: 10px;
695
- }
696
-
697
- /*# sourceMappingURL=rounded.css.map */
1
+ .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: transparent;
4
+ --color-base: #f2f6fb;
5
+ --color-1: rgb(230.69, 238.17, 247.52);
6
+ --color-2: rgb(219.7193, 230.5749, 244.1444);
7
+ --color-3: rgb(209.077721, 223.207653, 240.870068);
8
+ --color-4: rgb(198.75538937, 216.06142341, 237.69396596);
9
+ --color-5: rgb(188.7427276889, 209.1295807077, 234.6131469812);
10
+ --color-6: rgb(179.0304458582, 202.4056932865, 231.6247525718);
11
+ --color-drag1: rgb(95, 134, 196);
12
+ --color-drag2: rgb(95, 134, 196);
13
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
14
+ --color-drag2-background: rgba(95, 134, 196, 0.1);
15
+ --font-size: medium;
16
+ --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: #999db2;
18
+ --color-icon: #999db2;
19
+ --color-tabset-background: white;
20
+ --color-tabset-background-selected: white;
21
+ --color-tabset-background-maximized: var(--color-2);
22
+ --color-tabset-divider-line: white;
23
+ --color-tabset-header-background: var(--color-background);
24
+ --color-tabset-header: var(--color-text);
25
+ --color-border-tab-content: white;
26
+ --color-border-background: var(--color-background);
27
+ --color-border-divider-line: var(--color-background);
28
+ --color-tab-content: white;
29
+ --color-tab-selected: var(--color-text);
30
+ --color-tab-selected-background: var(--color-2);
31
+ --color-tab-unselected: gray;
32
+ --color-tab-unselected-background: transparent;
33
+ --color-tab-textbox: var(--color-text);
34
+ --color-tab-textbox-background: var(--color-3);
35
+ --color-border-tab-selected: var(--color-text);
36
+ --color-border-tab-selected-background: var(--color-2);
37
+ --color-border-tab-unselected: gray;
38
+ --color-border-tab-unselected-background: var(--color-2);
39
+ --color-splitter: #f2f6fb;
40
+ --color-splitter-hover: var(--color-4);
41
+ --color-splitter-drag: var(--color-4);
42
+ --color-drag-rect-border: #ccc;
43
+ --color-drag-rect-background: var(--color-5);
44
+ --color-drag-rect: var(--color-text);
45
+ --color-popup-border: var(--color-6);
46
+ --color-popup-unselected: var(--color-text);
47
+ --color-popup-unselected-background: #f2f6fb;
48
+ --color-popup-selected: var(--color-text);
49
+ --color-popup-selected-background: var(--color-3);
50
+ --color-edge-marker: #a6bbdf;
51
+ --color-edge-icon: #555;
52
+ }
53
+
54
+ .flexlayout__layout {
55
+ left: 0;
56
+ top: 0;
57
+ right: 0;
58
+ bottom: 0;
59
+ position: absolute;
60
+ display: flex;
61
+ }
62
+ .flexlayout__layout_overlay {
63
+ left: 0;
64
+ top: 0;
65
+ right: 0;
66
+ bottom: 0;
67
+ position: absolute;
68
+ z-index: 1000;
69
+ }
70
+ .flexlayout__layout_tab_stamps {
71
+ position: absolute;
72
+ top: -10000px;
73
+ z-index: 100;
74
+ display: flex;
75
+ flex-direction: column;
76
+ align-items: start;
77
+ }
78
+ .flexlayout__layout_moveables {
79
+ visibility: hidden;
80
+ position: absolute;
81
+ width: 100px;
82
+ height: 100px;
83
+ top: -20000px;
84
+ }
85
+ .flexlayout__layout_main {
86
+ display: flex;
87
+ flex-basis: 0px;
88
+ min-width: 0;
89
+ min-height: 0;
90
+ flex-grow: 1;
91
+ position: relative;
92
+ }
93
+ .flexlayout__layout_border_container {
94
+ display: flex;
95
+ flex-basis: 0px;
96
+ min-width: 0;
97
+ min-height: 0;
98
+ flex-grow: 1;
99
+ }
100
+ .flexlayout__layout_border_container_inner {
101
+ display: flex;
102
+ flex-basis: 0px;
103
+ min-width: 0;
104
+ min-height: 0;
105
+ flex-grow: 1;
106
+ }
107
+ .flexlayout__splitter {
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ background-color: var(--color-splitter);
112
+ touch-action: none;
113
+ z-index: 10;
114
+ }
115
+ @media (hover: hover) {
116
+ .flexlayout__splitter:hover {
117
+ background-color: var(--color-splitter-hover);
118
+ transition: background-color ease-in 0.1s;
119
+ transition-delay: 0.05s;
120
+ }
121
+ }
122
+ .flexlayout__splitter_drag {
123
+ position: absolute;
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ z-index: 1000;
128
+ background-color: var(--color-splitter-drag);
129
+ }
130
+ .flexlayout__splitter_handle {
131
+ background-color: #ccc;
132
+ border-radius: 3px;
133
+ }
134
+ .flexlayout__splitter_handle_horz {
135
+ width: 3px;
136
+ height: 30px;
137
+ }
138
+ .flexlayout__splitter_handle_vert {
139
+ width: 30px;
140
+ height: 3px;
141
+ }
142
+ .flexlayout__splitter_extra {
143
+ touch-action: none;
144
+ background-color: transparent;
145
+ }
146
+ .flexlayout__outline_rect {
147
+ position: absolute;
148
+ pointer-events: none;
149
+ box-sizing: border-box;
150
+ border: 2px solid var(--color-drag1);
151
+ background: var(--color-drag1-background);
152
+ border-radius: 5px;
153
+ z-index: 1000;
154
+ }
155
+ .flexlayout__outline_rect_edge {
156
+ pointer-events: none;
157
+ border: 2px solid var(--color-drag2);
158
+ background: var(--color-drag2-background);
159
+ border-radius: 5px;
160
+ z-index: 1000;
161
+ box-sizing: border-box;
162
+ }
163
+ .flexlayout__edge_rect {
164
+ position: absolute;
165
+ z-index: 1000;
166
+ background-color: var(--color-edge-marker);
167
+ pointer-events: none;
168
+ display: flex;
169
+ align-items: center;
170
+ justify-content: center;
171
+ }
172
+ .flexlayout__drag_rect {
173
+ color: var(--color-drag-rect);
174
+ background-color: var(--color-drag-rect-background);
175
+ border: 2px solid var(--color-drag-rect-border);
176
+ border-radius: 5px;
177
+ box-sizing: border-box;
178
+ display: flex;
179
+ justify-content: center;
180
+ flex-direction: column;
181
+ overflow: hidden;
182
+ padding: 0.3em 0.8em;
183
+ word-wrap: break-word;
184
+ font-size: var(--font-size);
185
+ font-family: var(--font-family);
186
+ }
187
+ .flexlayout__row {
188
+ display: flex;
189
+ flex-basis: 0px;
190
+ min-width: 0;
191
+ min-height: 0;
192
+ position: relative;
193
+ box-sizing: border-box;
194
+ overflow: hidden;
195
+ }
196
+ .flexlayout__tabset {
197
+ display: flex;
198
+ flex-direction: column;
199
+ position: relative;
200
+ background-color: var(--color-tabset-background);
201
+ box-sizing: border-box;
202
+ font-family: var(--font-family);
203
+ overflow: hidden;
204
+ flex-grow: 1;
205
+ border-radius: 10px;
206
+ }
207
+ .flexlayout__tabset_container {
208
+ display: flex;
209
+ flex-basis: 0px;
210
+ min-width: 0;
211
+ min-height: 0;
212
+ flex-direction: column;
213
+ overflow: hidden;
214
+ flex-grow: 1;
215
+ }
216
+ .flexlayout__tabset_tab_divider {
217
+ width: 4px;
218
+ }
219
+ .flexlayout__tabset_content {
220
+ display: flex;
221
+ flex-basis: 0px;
222
+ min-width: 0;
223
+ min-height: 0;
224
+ flex-grow: 1;
225
+ box-sizing: border-box;
226
+ position: relative;
227
+ }
228
+ .flexlayout__tabset_header {
229
+ display: flex;
230
+ align-items: center;
231
+ padding: 3px 3px 3px 5px;
232
+ box-sizing: border-box;
233
+ border-bottom: 1px solid var(--color-tabset-divider-line);
234
+ color: var(--color-tabset-header);
235
+ background-color: var(--color-tabset-header-background);
236
+ font-size: var(--font-size);
237
+ }
238
+ .flexlayout__tabset_header_content {
239
+ flex-grow: 1;
240
+ }
241
+ .flexlayout__tabset_tabbar_outer {
242
+ box-sizing: border-box;
243
+ background-color: var(--color-tabset-background);
244
+ overflow: hidden;
245
+ display: flex;
246
+ font-size: var(--font-size);
247
+ }
248
+ .flexlayout__tabset_tabbar_outer_top {
249
+ padding: 0px 2px 0px 2px;
250
+ border-bottom: 1px solid var(--color-tabset-divider-line);
251
+ }
252
+ .flexlayout__tabset_tabbar_outer_bottom {
253
+ padding: 0px 2px 0px 2px;
254
+ border-top: 1px solid var(--color-tabset-divider-line);
255
+ }
256
+ .flexlayout__tabset_tabbar_inner {
257
+ position: relative;
258
+ box-sizing: border-box;
259
+ display: flex;
260
+ flex-grow: 1;
261
+ overflow: hidden;
262
+ }
263
+ .flexlayout__tabset_tabbar_inner_tab_container {
264
+ position: relative;
265
+ display: flex;
266
+ padding-left: 4px;
267
+ padding-right: 4px;
268
+ box-sizing: border-box;
269
+ white-space: nowrap;
270
+ }
271
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
272
+ border-top: 2px solid transparent;
273
+ }
274
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
275
+ border-bottom: 2px solid transparent;
276
+ }
277
+ .flexlayout__tabset-selected {
278
+ background-color: var(--color-tabset-background-selected);
279
+ }
280
+ .flexlayout__tabset-maximized {
281
+ background-color: var(--color-tabset-background-maximized);
282
+ }
283
+ .flexlayout__tab_button_stamp {
284
+ display: inline-flex;
285
+ align-items: center;
286
+ gap: 0.3em;
287
+ white-space: nowrap;
288
+ box-sizing: border-box;
289
+ }
290
+ .flexlayout__tab {
291
+ overflow: hidden;
292
+ box-sizing: border-box;
293
+ background-color: var(--color-tab-content);
294
+ color: var(--color-text);
295
+ position: relative;
296
+ }
297
+ .flexlayout__tab_moveable {
298
+ position: relative;
299
+ height: 100%;
300
+ min-width: 1px;
301
+ min-height: 1px;
302
+ overflow: auto;
303
+ box-sizing: border-box;
304
+ }
305
+ .flexlayout__tab_overlay {
306
+ z-index: 20;
307
+ position: absolute;
308
+ top: 0;
309
+ left: 0;
310
+ right: 0;
311
+ bottom: 0;
312
+ background-color: rgba(0, 0, 0, 0.2392156863);
313
+ }
314
+ .flexlayout__tab_button {
315
+ display: flex;
316
+ gap: 0.3em;
317
+ align-items: center;
318
+ box-sizing: border-box;
319
+ padding: 3px 0.5em;
320
+ cursor: pointer;
321
+ border-radius: 10px;
322
+ padding: 2px 0.6em;
323
+ }
324
+ .flexlayout__tab_button_stretch {
325
+ background-color: transparent;
326
+ color: var(--color-tab-selected);
327
+ width: 100%;
328
+ padding: 3px 0em;
329
+ text-wrap: nowrap;
330
+ display: flex;
331
+ gap: 0.3em;
332
+ align-items: center;
333
+ box-sizing: border-box;
334
+ cursor: pointer;
335
+ }
336
+ @media (hover: hover) {
337
+ .flexlayout__tab_button_stretch:hover {
338
+ color: var(--color-tab-selected);
339
+ }
340
+ }
341
+ .flexlayout__tab_button--selected {
342
+ background-color: var(--color-tab-selected-background);
343
+ color: var(--color-tab-selected);
344
+ }
345
+ @media (hover: hover) {
346
+ .flexlayout__tab_button:hover {
347
+ background-color: var(--color-tab-selected-background);
348
+ color: var(--color-tab-selected);
349
+ }
350
+ }
351
+ .flexlayout__tab_button--unselected {
352
+ background-color: var(--color-tab-unselected-background);
353
+ color: var(--color-tab-unselected);
354
+ color: gray;
355
+ }
356
+ .flexlayout__tab_button_leading {
357
+ display: flex;
358
+ }
359
+ .flexlayout__tab_button_content {
360
+ display: flex;
361
+ text-wrap: nowrap;
362
+ }
363
+ .flexlayout__tab_button_textbox {
364
+ border: none;
365
+ font-family: var(--font-family);
366
+ font-size: var(--font-size);
367
+ color: var(--color-tab-textbox);
368
+ background-color: var(--color-tab-textbox-background);
369
+ border: 1px inset var(--color-1);
370
+ border-radius: 3px;
371
+ width: 10em;
372
+ }
373
+ .flexlayout__tab_button_textbox:focus {
374
+ outline: none;
375
+ }
376
+ .flexlayout__tab_button_trailing {
377
+ display: flex;
378
+ visibility: hidden;
379
+ border-radius: 4px;
380
+ }
381
+ .flexlayout__tab_button_trailing:hover {
382
+ background-color: var(--color-3);
383
+ }
384
+ @media (hover: hover) {
385
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
386
+ visibility: visible;
387
+ }
388
+ }
389
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
390
+ visibility: visible;
391
+ }
392
+ .flexlayout__tab_button_overflow {
393
+ display: flex;
394
+ align-items: center;
395
+ border: none;
396
+ color: var(--color-overflow);
397
+ font-size: inherit;
398
+ background-color: transparent;
399
+ }
400
+ .flexlayout__tab_toolbar {
401
+ display: flex;
402
+ align-items: center;
403
+ gap: 0.3em;
404
+ padding-left: 0.5em;
405
+ padding-right: 0.3em;
406
+ }
407
+ .flexlayout__tab_toolbar_icon {
408
+ border: none;
409
+ outline: none;
410
+ font-size: inherit;
411
+ margin: 0px;
412
+ background-color: transparent;
413
+ padding: 1px;
414
+ }
415
+ .flexlayout__tab_toolbar_button {
416
+ border: none;
417
+ outline: none;
418
+ font-size: inherit;
419
+ margin: 0px;
420
+ background-color: transparent;
421
+ border-radius: 4px;
422
+ padding: 1px;
423
+ }
424
+ @media (hover: hover) {
425
+ .flexlayout__tab_toolbar_button:hover {
426
+ background-color: var(--color-2);
427
+ }
428
+ }
429
+ .flexlayout__tab_toolbar_sticky_buttons_container {
430
+ display: flex;
431
+ gap: 0.3em;
432
+ padding-left: 5px;
433
+ align-items: center;
434
+ }
435
+ .flexlayout__tab_floating {
436
+ overflow: auto;
437
+ position: absolute;
438
+ box-sizing: border-box;
439
+ color: var(--color-text);
440
+ background-color: var(--color-background);
441
+ display: flex;
442
+ justify-content: center;
443
+ align-items: center;
444
+ }
445
+ .flexlayout__tab_floating_inner {
446
+ overflow: auto;
447
+ display: flex;
448
+ flex-direction: column;
449
+ justify-content: center;
450
+ align-items: center;
451
+ }
452
+ .flexlayout__tab_floating_inner div {
453
+ margin-bottom: 5px;
454
+ text-align: center;
455
+ }
456
+ .flexlayout__tab_floating_inner div a {
457
+ color: royalblue;
458
+ }
459
+ .flexlayout__border {
460
+ box-sizing: border-box;
461
+ overflow: hidden;
462
+ display: flex;
463
+ font-size: var(--font-size);
464
+ font-family: var(--font-family);
465
+ color: var(--color-border);
466
+ background-color: var(--color-border-background);
467
+ }
468
+ .flexlayout__border_tab_contents {
469
+ box-sizing: border-box;
470
+ overflow: hidden;
471
+ background-color: var(--color-border-tab-content);
472
+ }
473
+ .flexlayout__border_top {
474
+ border-bottom: 1px solid var(--color-border-divider-line);
475
+ align-items: center;
476
+ }
477
+ .flexlayout__border_bottom {
478
+ border-top: 1px solid var(--color-border-divider-line);
479
+ align-items: center;
480
+ }
481
+ .flexlayout__border_left {
482
+ border-right: 1px solid var(--color-border-divider-line);
483
+ align-content: center;
484
+ flex-direction: column;
485
+ }
486
+ .flexlayout__border_right {
487
+ border-left: 1px solid var(--color-border-divider-line);
488
+ align-content: center;
489
+ flex-direction: column;
490
+ }
491
+ .flexlayout__border_inner {
492
+ position: relative;
493
+ box-sizing: border-box;
494
+ display: flex;
495
+ overflow: hidden;
496
+ flex-grow: 1;
497
+ }
498
+ .flexlayout__border_inner_tab_container {
499
+ white-space: nowrap;
500
+ display: flex;
501
+ padding-left: 2px;
502
+ padding-right: 2px;
503
+ box-sizing: border-box;
504
+ position: absolute;
505
+ width: 10000px;
506
+ }
507
+ .flexlayout__border_inner_tab_container_right {
508
+ transform-origin: top left;
509
+ transform: rotate(90deg);
510
+ }
511
+ .flexlayout__border_inner_tab_container_left {
512
+ flex-direction: row-reverse;
513
+ transform-origin: top right;
514
+ transform: rotate(-90deg);
515
+ }
516
+ .flexlayout__border_tab_divider {
517
+ width: 4px;
518
+ }
519
+ .flexlayout__border_button {
520
+ display: flex;
521
+ gap: 0.3em;
522
+ align-items: center;
523
+ cursor: pointer;
524
+ padding: 3px 0.5em;
525
+ margin: 2px 0px;
526
+ box-sizing: border-box;
527
+ white-space: nowrap;
528
+ border-radius: 10px;
529
+ padding: 2px 0.7em;
530
+ }
531
+ .flexlayout__border_button--selected {
532
+ background-color: var(--color-border-tab-selected-background);
533
+ color: var(--color-border-tab-selected);
534
+ }
535
+ @media (hover: hover) {
536
+ .flexlayout__border_button:hover {
537
+ background-color: var(--color-border-tab-selected-background);
538
+ color: var(--color-border-tab-selected);
539
+ }
540
+ }
541
+ .flexlayout__border_button--unselected {
542
+ background-color: var(--color-border-tab-unselected-background);
543
+ color: var(--color-border-tab-unselected);
544
+ }
545
+ .flexlayout__border_button_leading {
546
+ display: flex;
547
+ }
548
+ .flexlayout__border_button_content {
549
+ display: flex;
550
+ }
551
+ .flexlayout__border_button_trailing {
552
+ display: flex;
553
+ border-radius: 4px;
554
+ visibility: hidden;
555
+ }
556
+ .flexlayout__border_button_trailing:hover {
557
+ background-color: var(--color-3);
558
+ }
559
+ @media (hover: hover) {
560
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
561
+ visibility: visible;
562
+ }
563
+ }
564
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
565
+ visibility: visible;
566
+ }
567
+ .flexlayout__border_toolbar {
568
+ display: flex;
569
+ gap: 0.3em;
570
+ align-items: center;
571
+ }
572
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
573
+ flex-direction: column;
574
+ padding-top: 0.5em;
575
+ padding-bottom: 0.3em;
576
+ }
577
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
578
+ padding-left: 0.5em;
579
+ padding-right: 0.3em;
580
+ }
581
+ .flexlayout__border_toolbar_button {
582
+ border: none;
583
+ outline: none;
584
+ font-size: inherit;
585
+ background-color: transparent;
586
+ border-radius: 4px;
587
+ padding: 1px;
588
+ }
589
+ @media (hover: hover) {
590
+ .flexlayout__border_toolbar_button:hover {
591
+ background-color: var(--color-2);
592
+ }
593
+ }
594
+ .flexlayout__border_toolbar_button_overflow {
595
+ display: flex;
596
+ align-items: center;
597
+ border: none;
598
+ color: var(--color-overflow);
599
+ font-size: inherit;
600
+ background-color: transparent;
601
+ }
602
+ .flexlayout__popup_menu {
603
+ font-size: var(--font-size);
604
+ font-family: var(--font-family);
605
+ }
606
+ .flexlayout__popup_menu_item {
607
+ padding: 2px 0.5em;
608
+ white-space: nowrap;
609
+ cursor: pointer;
610
+ border-radius: 2px;
611
+ }
612
+ @media (hover: hover) {
613
+ .flexlayout__popup_menu_item:hover {
614
+ background-color: var(--color-6);
615
+ }
616
+ }
617
+ .flexlayout__popup_menu_container {
618
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
619
+ border: 1px solid var(--color-popup-border);
620
+ color: var(--color-popup-unselected);
621
+ background: var(--color-popup-unselected-background);
622
+ border-radius: 3px;
623
+ position: absolute;
624
+ z-index: 1000;
625
+ max-height: 50%;
626
+ min-width: 100px;
627
+ overflow: auto;
628
+ padding: 2px;
629
+ }
630
+ .flexlayout__floating_window _body {
631
+ height: 100%;
632
+ }
633
+ .flexlayout__floating_window_content {
634
+ left: 0;
635
+ top: 0;
636
+ right: 0;
637
+ bottom: 0;
638
+ position: absolute;
639
+ }
640
+ .flexlayout__error_boundary_container {
641
+ left: 0;
642
+ top: 0;
643
+ right: 0;
644
+ bottom: 0;
645
+ position: absolute;
646
+ display: flex;
647
+ justify-content: center;
648
+ }
649
+ .flexlayout__error_boundary_content {
650
+ display: flex;
651
+ align-items: center;
652
+ }
653
+ .flexlayout__tabset_sizer {
654
+ padding-top: 5px;
655
+ padding-bottom: 3px;
656
+ font-size: var(--font-size);
657
+ font-family: var(--font-family);
658
+ }
659
+ .flexlayout__tabset_header_sizer {
660
+ padding-top: 3px;
661
+ padding-bottom: 3px;
662
+ font-size: var(--font-size);
663
+ font-family: var(--font-family);
664
+ }
665
+ .flexlayout__border_sizer {
666
+ position: absolute;
667
+ top: -30000px;
668
+ padding-top: 6px;
669
+ padding-bottom: 5px;
670
+ font-size: var(--font-size);
671
+ font-family: var(--font-family);
672
+ }
673
+
674
+ .flexlayout__tabset_content {
675
+ padding: 1px 5px 5px 5px;
676
+ border-bottom-left-radius: 10px;
677
+ border-bottom-right-radius: 10px;
678
+ }
679
+
680
+ .flexlayout__tab_border {
681
+ border-radius: 10px;
682
+ padding: 3px;
683
+ }
684
+
685
+ .flexlayout__tabset_tabbar_outer_top {
686
+ border-bottom: unset;
687
+ }
688
+
689
+ .flexlayout__border_tab_contents {
690
+ background-color: white;
691
+ }
692
+
693
+ .flexlayout__border_tab_contents {
694
+ border-radius: 10px;
695
+ }
696
+
697
+ /*# sourceMappingURL=rounded.css.map */