flexlayout-react 0.8.3 → 0.8.4

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