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/light.css CHANGED
@@ -1,669 +1,685 @@
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(239.9295, 239.9295, 239.9295);
7
- --color-3: rgb(232.731615, 232.731615, 232.731615);
8
- --color-4: rgb(225.74966655, 225.74966655, 225.74966655);
9
- --color-5: rgb(218.9771765535, 218.9771765535, 218.9771765535);
10
- --color-6: rgb(212.4078612569, 212.4078612569, 212.4078612569);
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-background);
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-background);
24
- --color-tabset-header: var(--color-text);
25
- --color-border-tab-content: var(--color-background);
26
- --color-border-background: var(--color-background);
27
- --color-border-divider-line: var(--color-4);
28
- --color-tab-content: var(--color-background);
29
- --color-tab-selected: var(--color-text);
30
- --color-tab-selected-background: var(--color-4);
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-4);
37
- --color-border-tab-unselected: gray;
38
- --color-border-tab-unselected-background: var(--color-2);
39
- --color-splitter: var(--color-1);
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: 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
- }
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
- }
206
- .flexlayout__tabset_container {
207
- display: flex;
208
- flex-basis: 0px;
209
- min-width: 0;
210
- min-height: 0;
211
- flex-direction: column;
212
- overflow: hidden;
213
- flex-grow: 1;
214
- }
215
- .flexlayout__tabset_tab_divider {
216
- width: 4px;
217
- }
218
- .flexlayout__tabset_content {
219
- display: flex;
220
- flex-basis: 0px;
221
- min-width: 0;
222
- min-height: 0;
223
- flex-grow: 1;
224
- box-sizing: border-box;
225
- position: relative;
226
- }
227
- .flexlayout__tabset_header {
228
- display: flex;
229
- align-items: center;
230
- padding: 3px 3px 3px 5px;
231
- box-sizing: border-box;
232
- border-bottom: 1px solid var(--color-tabset-divider-line);
233
- color: var(--color-tabset-header);
234
- background-color: var(--color-tabset-header-background);
235
- font-size: var(--font-size);
236
- }
237
- .flexlayout__tabset_header_content {
238
- flex-grow: 1;
239
- }
240
- .flexlayout__tabset_tabbar_outer {
241
- box-sizing: border-box;
242
- background-color: var(--color-tabset-background);
243
- overflow: hidden;
244
- display: flex;
245
- font-size: var(--font-size);
246
- }
247
- .flexlayout__tabset_tabbar_outer_top {
248
- padding: 0px 2px 0px 2px;
249
- border-bottom: 1px solid var(--color-tabset-divider-line);
250
- }
251
- .flexlayout__tabset_tabbar_outer_bottom {
252
- padding: 0px 2px 0px 2px;
253
- border-top: 1px solid var(--color-tabset-divider-line);
254
- }
255
- .flexlayout__tabset_tabbar_inner {
256
- position: relative;
257
- box-sizing: border-box;
258
- display: flex;
259
- flex-grow: 1;
260
- overflow: hidden;
261
- }
262
- .flexlayout__tabset_tabbar_inner_tab_container {
263
- position: relative;
264
- display: flex;
265
- padding-left: 4px;
266
- padding-right: 4px;
267
- box-sizing: border-box;
268
- white-space: nowrap;
269
- }
270
- .flexlayout__tabset_tabbar_inner_tab_container_top {
271
- border-top: 2px solid transparent;
272
- }
273
- .flexlayout__tabset_tabbar_inner_tab_container_bottom {
274
- border-bottom: 2px solid transparent;
275
- }
276
- .flexlayout__tabset-selected {
277
- background-color: var(--color-tabset-background-selected);
278
- }
279
- .flexlayout__tabset-maximized {
280
- background-color: var(--color-tabset-background-maximized);
281
- }
282
- .flexlayout__tab_button_stamp {
283
- display: inline-flex;
284
- align-items: center;
285
- gap: 0.3em;
286
- white-space: nowrap;
287
- box-sizing: border-box;
288
- }
289
- .flexlayout__tab {
290
- overflow: hidden;
291
- box-sizing: border-box;
292
- background-color: var(--color-tab-content);
293
- color: var(--color-text);
294
- position: relative;
295
- }
296
- .flexlayout__tab_moveable {
297
- position: relative;
298
- height: 100%;
299
- min-width: 1px;
300
- min-height: 1px;
301
- overflow: auto;
302
- box-sizing: border-box;
303
- }
304
- .flexlayout__tab_overlay {
305
- z-index: 20;
306
- position: absolute;
307
- top: 0;
308
- left: 0;
309
- right: 0;
310
- bottom: 0;
311
- background-color: rgba(0, 0, 0, 0.2392156863);
312
- }
313
- .flexlayout__tab_button {
314
- display: flex;
315
- gap: 0.3em;
316
- align-items: center;
317
- box-sizing: border-box;
318
- padding: 3px 0.5em;
319
- cursor: pointer;
320
- }
321
- .flexlayout__tab_button_stretch {
322
- background-color: transparent;
323
- color: var(--color-tab-selected);
324
- width: 100%;
325
- padding: 3px 0em;
326
- text-wrap: nowrap;
327
- display: flex;
328
- gap: 0.3em;
329
- align-items: center;
330
- box-sizing: border-box;
331
- cursor: pointer;
332
- }
333
- @media (hover: hover) {
334
- .flexlayout__tab_button_stretch:hover {
335
- color: var(--color-tab-selected);
336
- }
337
- }
338
- .flexlayout__tab_button--selected {
339
- background-color: var(--color-tab-selected-background);
340
- color: var(--color-tab-selected);
341
- }
342
- @media (hover: hover) {
343
- .flexlayout__tab_button:hover {
344
- background-color: var(--color-tab-selected-background);
345
- color: var(--color-tab-selected);
346
- }
347
- }
348
- .flexlayout__tab_button--unselected {
349
- background-color: var(--color-tab-unselected-background);
350
- color: var(--color-tab-unselected);
351
- color: gray;
352
- }
353
- .flexlayout__tab_button_leading {
354
- display: flex;
355
- }
356
- .flexlayout__tab_button_content {
357
- display: flex;
358
- text-wrap: nowrap;
359
- }
360
- .flexlayout__tab_button_textbox {
361
- border: none;
362
- font-family: var(--font-family);
363
- font-size: var(--font-size);
364
- color: var(--color-tab-textbox);
365
- background-color: var(--color-tab-textbox-background);
366
- border: 1px inset var(--color-1);
367
- border-radius: 3px;
368
- width: 10em;
369
- }
370
- .flexlayout__tab_button_textbox:focus {
371
- outline: none;
372
- }
373
- .flexlayout__tab_button_trailing {
374
- display: flex;
375
- visibility: hidden;
376
- border-radius: 4px;
377
- }
378
- .flexlayout__tab_button_trailing:hover {
379
- background-color: var(--color-3);
380
- }
381
- @media (hover: hover) {
382
- .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
383
- visibility: visible;
384
- }
385
- }
386
- .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
387
- visibility: visible;
388
- }
389
- .flexlayout__tab_button_overflow {
390
- display: flex;
391
- align-items: center;
392
- border: none;
393
- color: var(--color-overflow);
394
- font-size: inherit;
395
- background-color: transparent;
396
- }
397
- .flexlayout__tab_toolbar {
398
- display: flex;
399
- align-items: center;
400
- gap: 0.3em;
401
- padding-left: 0.5em;
402
- padding-right: 0.3em;
403
- }
404
- .flexlayout__tab_toolbar_icon {
405
- border: none;
406
- outline: none;
407
- font-size: inherit;
408
- margin: 0px;
409
- background-color: transparent;
410
- padding: 1px;
411
- }
412
- .flexlayout__tab_toolbar_button {
413
- border: none;
414
- outline: none;
415
- font-size: inherit;
416
- margin: 0px;
417
- background-color: transparent;
418
- border-radius: 4px;
419
- padding: 1px;
420
- }
421
- @media (hover: hover) {
422
- .flexlayout__tab_toolbar_button:hover {
423
- background-color: var(--color-2);
424
- }
425
- }
426
- .flexlayout__tab_toolbar_sticky_buttons_container {
427
- display: flex;
428
- gap: 0.3em;
429
- padding-left: 5px;
430
- align-items: center;
431
- }
432
- .flexlayout__tab_floating {
433
- overflow: auto;
434
- position: absolute;
435
- box-sizing: border-box;
436
- color: var(--color-text);
437
- background-color: var(--color-background);
438
- display: flex;
439
- justify-content: center;
440
- align-items: center;
441
- }
442
- .flexlayout__tab_floating_inner {
443
- overflow: auto;
444
- display: flex;
445
- flex-direction: column;
446
- justify-content: center;
447
- align-items: center;
448
- }
449
- .flexlayout__tab_floating_inner div {
450
- margin-bottom: 5px;
451
- text-align: center;
452
- }
453
- .flexlayout__tab_floating_inner div a {
454
- color: royalblue;
455
- }
456
- .flexlayout__border {
457
- box-sizing: border-box;
458
- overflow: hidden;
459
- display: flex;
460
- font-size: var(--font-size);
461
- font-family: var(--font-family);
462
- color: var(--color-border);
463
- background-color: var(--color-border-background);
464
- }
465
- .flexlayout__border_tab_contents {
466
- box-sizing: border-box;
467
- overflow: hidden;
468
- background-color: var(--color-border-tab-content);
469
- }
470
- .flexlayout__border_top {
471
- border-bottom: 1px solid var(--color-border-divider-line);
472
- align-items: center;
473
- }
474
- .flexlayout__border_bottom {
475
- border-top: 1px solid var(--color-border-divider-line);
476
- align-items: center;
477
- }
478
- .flexlayout__border_left {
479
- border-right: 1px solid var(--color-border-divider-line);
480
- align-content: center;
481
- flex-direction: column;
482
- }
483
- .flexlayout__border_right {
484
- border-left: 1px solid var(--color-border-divider-line);
485
- align-content: center;
486
- flex-direction: column;
487
- }
488
- .flexlayout__border_inner {
489
- position: relative;
490
- box-sizing: border-box;
491
- display: flex;
492
- overflow: hidden;
493
- flex-grow: 1;
494
- }
495
- .flexlayout__border_inner_tab_container {
496
- white-space: nowrap;
497
- display: flex;
498
- padding-left: 2px;
499
- padding-right: 2px;
500
- box-sizing: border-box;
501
- position: absolute;
502
- width: 10000px;
503
- }
504
- .flexlayout__border_inner_tab_container_right {
505
- transform-origin: top left;
506
- transform: rotate(90deg);
507
- }
508
- .flexlayout__border_inner_tab_container_left {
509
- flex-direction: row-reverse;
510
- transform-origin: top right;
511
- transform: rotate(-90deg);
512
- }
513
- .flexlayout__border_tab_divider {
514
- width: 4px;
515
- }
516
- .flexlayout__border_button {
517
- display: flex;
518
- gap: 0.3em;
519
- align-items: center;
520
- cursor: pointer;
521
- padding: 3px 0.5em;
522
- margin: 2px 0px;
523
- box-sizing: border-box;
524
- white-space: nowrap;
525
- }
526
- .flexlayout__border_button--selected {
527
- background-color: var(--color-border-tab-selected-background);
528
- color: var(--color-border-tab-selected);
529
- }
530
- @media (hover: hover) {
531
- .flexlayout__border_button:hover {
532
- background-color: var(--color-border-tab-selected-background);
533
- color: var(--color-border-tab-selected);
534
- }
535
- }
536
- .flexlayout__border_button--unselected {
537
- background-color: var(--color-border-tab-unselected-background);
538
- color: var(--color-border-tab-unselected);
539
- }
540
- .flexlayout__border_button_leading {
541
- display: flex;
542
- }
543
- .flexlayout__border_button_content {
544
- display: flex;
545
- }
546
- .flexlayout__border_button_trailing {
547
- display: flex;
548
- border-radius: 4px;
549
- visibility: hidden;
550
- }
551
- .flexlayout__border_button_trailing:hover {
552
- background-color: var(--color-3);
553
- }
554
- @media (hover: hover) {
555
- .flexlayout__border_button:hover .flexlayout__border_button_trailing {
556
- visibility: visible;
557
- }
558
- }
559
- .flexlayout__border_button--selected .flexlayout__border_button_trailing {
560
- visibility: visible;
561
- }
562
- .flexlayout__border_toolbar {
563
- display: flex;
564
- gap: 0.3em;
565
- align-items: center;
566
- }
567
- .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
568
- flex-direction: column;
569
- padding-top: 0.5em;
570
- padding-bottom: 0.3em;
571
- }
572
- .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
573
- padding-left: 0.5em;
574
- padding-right: 0.3em;
575
- }
576
- .flexlayout__border_toolbar_button {
577
- border: none;
578
- outline: none;
579
- font-size: inherit;
580
- background-color: transparent;
581
- border-radius: 4px;
582
- padding: 1px;
583
- }
584
- @media (hover: hover) {
585
- .flexlayout__border_toolbar_button:hover {
586
- background-color: var(--color-2);
587
- }
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
- }
597
- .flexlayout__popup_menu {
598
- font-size: var(--font-size);
599
- font-family: var(--font-family);
600
- }
601
- .flexlayout__popup_menu_item {
602
- padding: 2px 0.5em;
603
- white-space: nowrap;
604
- cursor: pointer;
605
- border-radius: 2px;
606
- }
607
- @media (hover: hover) {
608
- .flexlayout__popup_menu_item:hover {
609
- background-color: var(--color-6);
610
- }
611
- }
612
- .flexlayout__popup_menu_container {
613
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
614
- border: 1px solid var(--color-popup-border);
615
- color: var(--color-popup-unselected);
616
- background: var(--color-popup-unselected-background);
617
- border-radius: 3px;
618
- position: absolute;
619
- z-index: 1000;
620
- max-height: 50%;
621
- min-width: 100px;
622
- overflow: auto;
623
- padding: 2px;
624
- }
625
- .flexlayout__floating_window _body {
626
- height: 100%;
627
- }
628
- .flexlayout__floating_window_content {
629
- left: 0;
630
- top: 0;
631
- right: 0;
632
- bottom: 0;
633
- position: absolute;
634
- }
635
- .flexlayout__error_boundary_container {
636
- left: 0;
637
- top: 0;
638
- right: 0;
639
- bottom: 0;
640
- position: absolute;
641
- display: flex;
642
- justify-content: center;
643
- }
644
- .flexlayout__error_boundary_content {
645
- display: flex;
646
- align-items: center;
647
- }
648
- .flexlayout__tabset_sizer {
649
- padding-top: 5px;
650
- padding-bottom: 3px;
651
- font-size: var(--font-size);
652
- font-family: var(--font-family);
653
- }
654
- .flexlayout__tabset_header_sizer {
655
- padding-top: 3px;
656
- padding-bottom: 3px;
657
- font-size: var(--font-size);
658
- font-family: var(--font-family);
659
- }
660
- .flexlayout__border_sizer {
661
- position: absolute;
662
- top: -30000px;
663
- padding-top: 6px;
664
- padding-bottom: 5px;
665
- font-size: var(--font-size);
666
- font-family: var(--font-family);
667
- }
668
-
669
- /*# sourceMappingURL=light.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(239.9295, 239.9295, 239.9295);
7
+ --color-3: rgb(232.731615, 232.731615, 232.731615);
8
+ --color-4: rgb(225.74966655, 225.74966655, 225.74966655);
9
+ --color-5: rgb(218.9771765535, 218.9771765535, 218.9771765535);
10
+ --color-6: rgb(212.4078612569, 212.4078612569, 212.4078612569);
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-background);
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-background);
24
+ --color-tabset-header: var(--color-text);
25
+ --color-border-tab-content: var(--color-background);
26
+ --color-border-background: var(--color-background);
27
+ --color-border-divider-line: var(--color-4);
28
+ --color-tab-content: var(--color-background);
29
+ --color-tab-selected: var(--color-text);
30
+ --color-tab-selected-background: var(--color-4);
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-4);
37
+ --color-border-tab-unselected: gray;
38
+ --color-border-tab-unselected-background: var(--color-2);
39
+ --color-splitter: var(--color-1);
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: 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
+ }
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
+ }
206
+ .flexlayout__tabset_container {
207
+ display: flex;
208
+ flex-basis: 0px;
209
+ min-width: 0;
210
+ min-height: 0;
211
+ flex-direction: column;
212
+ overflow: hidden;
213
+ flex-grow: 1;
214
+ }
215
+ .flexlayout__tabset_tab_divider {
216
+ width: 4px;
217
+ }
218
+ .flexlayout__tabset_content {
219
+ display: flex;
220
+ flex-basis: 0px;
221
+ min-width: 0;
222
+ min-height: 0;
223
+ flex-grow: 1;
224
+ box-sizing: border-box;
225
+ position: relative;
226
+ }
227
+ .flexlayout__tabset_header {
228
+ display: flex;
229
+ align-items: center;
230
+ padding: 3px 3px 3px 5px;
231
+ box-sizing: border-box;
232
+ border-bottom: 1px solid var(--color-tabset-divider-line);
233
+ color: var(--color-tabset-header);
234
+ background-color: var(--color-tabset-header-background);
235
+ font-size: var(--font-size);
236
+ }
237
+ .flexlayout__tabset_header_content {
238
+ flex-grow: 1;
239
+ }
240
+ .flexlayout__tabset_tabbar_outer {
241
+ box-sizing: border-box;
242
+ background-color: var(--color-tabset-background);
243
+ overflow: hidden;
244
+ display: flex;
245
+ font-size: var(--font-size);
246
+ }
247
+ .flexlayout__tabset_tabbar_outer_top {
248
+ padding: 0px 2px 0px 2px;
249
+ border-bottom: 1px solid var(--color-tabset-divider-line);
250
+ }
251
+ .flexlayout__tabset_tabbar_outer_bottom {
252
+ padding: 0px 2px 0px 2px;
253
+ border-top: 1px solid var(--color-tabset-divider-line);
254
+ }
255
+ .flexlayout__tabset_tabbar_inner {
256
+ position: relative;
257
+ box-sizing: border-box;
258
+ display: flex;
259
+ flex-grow: 1;
260
+ overflow: hidden;
261
+ }
262
+ .flexlayout__tabset_tabbar_inner_tab_container {
263
+ position: relative;
264
+ display: flex;
265
+ padding-left: 4px;
266
+ padding-right: 4px;
267
+ box-sizing: border-box;
268
+ white-space: nowrap;
269
+ }
270
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
271
+ border-top: 2px solid transparent;
272
+ }
273
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
274
+ border-bottom: 2px solid transparent;
275
+ }
276
+ .flexlayout__tabset-selected {
277
+ background-color: var(--color-tabset-background-selected);
278
+ }
279
+ .flexlayout__tabset-maximized {
280
+ background-color: var(--color-tabset-background-maximized);
281
+ }
282
+ .flexlayout__tab_button_stamp {
283
+ display: inline-flex;
284
+ align-items: center;
285
+ gap: 0.3em;
286
+ white-space: nowrap;
287
+ box-sizing: border-box;
288
+ }
289
+ .flexlayout__tab {
290
+ overflow: hidden;
291
+ box-sizing: border-box;
292
+ background-color: var(--color-tab-content);
293
+ color: var(--color-text);
294
+ position: relative;
295
+ }
296
+ .flexlayout__tab_moveable {
297
+ position: relative;
298
+ height: 100%;
299
+ min-width: 1px;
300
+ min-height: 1px;
301
+ overflow: auto;
302
+ box-sizing: border-box;
303
+ }
304
+ .flexlayout__tab_overlay {
305
+ z-index: 20;
306
+ position: absolute;
307
+ top: 0;
308
+ left: 0;
309
+ right: 0;
310
+ bottom: 0;
311
+ background-color: rgba(0, 0, 0, 0.2392156863);
312
+ }
313
+ .flexlayout__tab_button {
314
+ display: flex;
315
+ gap: 0.3em;
316
+ align-items: center;
317
+ box-sizing: border-box;
318
+ padding: 3px 0.5em;
319
+ cursor: pointer;
320
+ }
321
+ .flexlayout__tab_button_stretch {
322
+ background-color: transparent;
323
+ color: var(--color-tab-selected);
324
+ width: 100%;
325
+ padding: 3px 0em;
326
+ text-wrap: nowrap;
327
+ display: flex;
328
+ gap: 0.3em;
329
+ align-items: center;
330
+ box-sizing: border-box;
331
+ cursor: pointer;
332
+ }
333
+ @media (hover: hover) {
334
+ .flexlayout__tab_button_stretch:hover {
335
+ color: var(--color-tab-selected);
336
+ }
337
+ }
338
+ .flexlayout__tab_button--selected {
339
+ background-color: var(--color-tab-selected-background);
340
+ color: var(--color-tab-selected);
341
+ }
342
+ @media (hover: hover) {
343
+ .flexlayout__tab_button:hover {
344
+ color: var(--color-tab-selected);
345
+ }
346
+ }
347
+ .flexlayout__tab_button--unselected {
348
+ background-color: var(--color-tab-unselected-background);
349
+ color: var(--color-tab-unselected);
350
+ color: gray;
351
+ }
352
+ .flexlayout__tab_button_leading {
353
+ display: flex;
354
+ }
355
+ .flexlayout__tab_button_content {
356
+ display: flex;
357
+ text-wrap: nowrap;
358
+ }
359
+ .flexlayout__tab_button_textbox {
360
+ border: none;
361
+ font-family: var(--font-family);
362
+ font-size: var(--font-size);
363
+ color: var(--color-tab-textbox);
364
+ background-color: var(--color-tab-textbox-background);
365
+ border: 1px inset var(--color-1);
366
+ border-radius: 3px;
367
+ width: 10em;
368
+ }
369
+ .flexlayout__tab_button_textbox:focus {
370
+ outline: none;
371
+ }
372
+ .flexlayout__tab_button_trailing {
373
+ display: flex;
374
+ visibility: hidden;
375
+ border-radius: 4px;
376
+ }
377
+ .flexlayout__tab_button_trailing:hover {
378
+ background-color: var(--color-3);
379
+ }
380
+ @media (hover: hover) {
381
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
382
+ visibility: visible;
383
+ }
384
+ }
385
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
386
+ visibility: visible;
387
+ }
388
+ .flexlayout__tab_button_overflow {
389
+ display: flex;
390
+ align-items: center;
391
+ border: none;
392
+ color: var(--color-overflow);
393
+ font-size: inherit;
394
+ background-color: transparent;
395
+ width: 2em;
396
+ overflow: hidden;
397
+ }
398
+ .flexlayout__tab_toolbar {
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 0.3em;
402
+ padding-left: 0.5em;
403
+ padding-right: 0.3em;
404
+ }
405
+ .flexlayout__tab_toolbar_icon {
406
+ border: none;
407
+ outline: none;
408
+ font-size: inherit;
409
+ margin: 0px;
410
+ background-color: transparent;
411
+ padding: 1px;
412
+ }
413
+ .flexlayout__tab_toolbar_button {
414
+ border: none;
415
+ outline: none;
416
+ font-size: inherit;
417
+ margin: 0px;
418
+ background-color: transparent;
419
+ border-radius: 4px;
420
+ padding: 1px;
421
+ }
422
+ @media (hover: hover) {
423
+ .flexlayout__tab_toolbar_button:hover {
424
+ background-color: var(--color-2);
425
+ }
426
+ }
427
+ .flexlayout__tab_toolbar_sticky_buttons_container {
428
+ display: flex;
429
+ gap: 0.3em;
430
+ padding-left: 5px;
431
+ align-items: center;
432
+ }
433
+ .flexlayout__tab_floating {
434
+ overflow: auto;
435
+ position: absolute;
436
+ box-sizing: border-box;
437
+ color: var(--color-text);
438
+ background-color: var(--color-background);
439
+ display: flex;
440
+ justify-content: center;
441
+ align-items: center;
442
+ }
443
+ .flexlayout__tab_floating_inner {
444
+ overflow: auto;
445
+ display: flex;
446
+ flex-direction: column;
447
+ justify-content: center;
448
+ align-items: center;
449
+ }
450
+ .flexlayout__tab_floating_inner div {
451
+ margin-bottom: 5px;
452
+ text-align: center;
453
+ }
454
+ .flexlayout__tab_floating_inner div a {
455
+ color: royalblue;
456
+ }
457
+ .flexlayout__border {
458
+ box-sizing: border-box;
459
+ overflow: hidden;
460
+ display: flex;
461
+ font-size: var(--font-size);
462
+ font-family: var(--font-family);
463
+ color: var(--color-border);
464
+ background-color: var(--color-border-background);
465
+ }
466
+ .flexlayout__border_tab_contents {
467
+ box-sizing: border-box;
468
+ overflow: hidden;
469
+ background-color: var(--color-border-tab-content);
470
+ }
471
+ .flexlayout__border_top {
472
+ border-bottom: 1px solid var(--color-border-divider-line);
473
+ align-items: center;
474
+ }
475
+ .flexlayout__border_bottom {
476
+ border-top: 1px solid var(--color-border-divider-line);
477
+ align-items: center;
478
+ }
479
+ .flexlayout__border_left {
480
+ border-right: 1px solid var(--color-border-divider-line);
481
+ align-content: center;
482
+ flex-direction: column;
483
+ }
484
+ .flexlayout__border_right {
485
+ border-left: 1px solid var(--color-border-divider-line);
486
+ align-content: center;
487
+ flex-direction: column;
488
+ }
489
+ .flexlayout__border_inner {
490
+ position: relative;
491
+ box-sizing: border-box;
492
+ align-items: center;
493
+ display: flex;
494
+ overflow: hidden;
495
+ flex-grow: 1;
496
+ }
497
+ .flexlayout__border_inner_tab_container {
498
+ white-space: nowrap;
499
+ display: flex;
500
+ padding-left: 2px;
501
+ padding-right: 2px;
502
+ box-sizing: border-box;
503
+ position: absolute;
504
+ }
505
+ .flexlayout__border_inner_tab_container_right {
506
+ transform-origin: top left;
507
+ transform: rotate(90deg);
508
+ }
509
+ .flexlayout__border_inner_tab_container_left {
510
+ flex-direction: row-reverse;
511
+ transform-origin: top right;
512
+ transform: rotate(-90deg);
513
+ }
514
+ .flexlayout__border_tab_divider {
515
+ width: 4px;
516
+ }
517
+ .flexlayout__border_button {
518
+ display: flex;
519
+ gap: 0.3em;
520
+ align-items: center;
521
+ cursor: pointer;
522
+ padding: 3px 0.5em;
523
+ margin: 2px 0px;
524
+ box-sizing: border-box;
525
+ white-space: nowrap;
526
+ }
527
+ .flexlayout__border_button--selected {
528
+ background-color: var(--color-border-tab-selected-background);
529
+ color: var(--color-border-tab-selected);
530
+ }
531
+ @media (hover: hover) {
532
+ .flexlayout__border_button:hover {
533
+ background-color: var(--color-border-tab-selected-background);
534
+ color: var(--color-border-tab-selected);
535
+ }
536
+ }
537
+ .flexlayout__border_button--unselected {
538
+ background-color: var(--color-border-tab-unselected-background);
539
+ color: var(--color-border-tab-unselected);
540
+ }
541
+ .flexlayout__border_button_leading {
542
+ display: flex;
543
+ }
544
+ .flexlayout__border_button_content {
545
+ display: flex;
546
+ }
547
+ .flexlayout__border_button_trailing {
548
+ display: flex;
549
+ border-radius: 4px;
550
+ visibility: hidden;
551
+ }
552
+ .flexlayout__border_button_trailing:hover {
553
+ background-color: var(--color-3);
554
+ }
555
+ @media (hover: hover) {
556
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
557
+ visibility: visible;
558
+ }
559
+ }
560
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
561
+ visibility: visible;
562
+ }
563
+ .flexlayout__border_toolbar {
564
+ display: flex;
565
+ gap: 0.3em;
566
+ align-items: center;
567
+ }
568
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
569
+ flex-direction: column;
570
+ padding-top: 0.5em;
571
+ padding-bottom: 0.3em;
572
+ }
573
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
574
+ padding-left: 0.5em;
575
+ padding-right: 0.3em;
576
+ }
577
+ .flexlayout__border_toolbar_button {
578
+ border: none;
579
+ outline: none;
580
+ font-size: inherit;
581
+ background-color: transparent;
582
+ border-radius: 4px;
583
+ padding: 1px;
584
+ }
585
+ @media (hover: hover) {
586
+ .flexlayout__border_toolbar_button:hover {
587
+ background-color: var(--color-2);
588
+ }
589
+ }
590
+ .flexlayout__border_toolbar_button_overflow {
591
+ display: flex;
592
+ align-items: center;
593
+ border: none;
594
+ color: var(--color-overflow);
595
+ font-size: inherit;
596
+ background-color: transparent;
597
+ width: 2em;
598
+ }
599
+ .flexlayout__popup_menu {
600
+ font-size: var(--font-size);
601
+ font-family: var(--font-family);
602
+ }
603
+ .flexlayout__popup_menu_item {
604
+ padding: 2px 0.5em;
605
+ white-space: nowrap;
606
+ cursor: pointer;
607
+ border-radius: 2px;
608
+ }
609
+ @media (hover: hover) {
610
+ .flexlayout__popup_menu_item:hover {
611
+ background-color: var(--color-6);
612
+ }
613
+ }
614
+ .flexlayout__popup_menu_container {
615
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
616
+ border: 1px solid var(--color-popup-border);
617
+ color: var(--color-popup-unselected);
618
+ background: var(--color-popup-unselected-background);
619
+ border-radius: 3px;
620
+ position: absolute;
621
+ z-index: 1000;
622
+ max-height: 50%;
623
+ min-width: 100px;
624
+ overflow: auto;
625
+ padding: 2px;
626
+ }
627
+ .flexlayout__floating_window _body {
628
+ height: 100%;
629
+ }
630
+ .flexlayout__floating_window_content {
631
+ left: 0;
632
+ top: 0;
633
+ right: 0;
634
+ bottom: 0;
635
+ position: absolute;
636
+ }
637
+ .flexlayout__error_boundary_container {
638
+ left: 0;
639
+ top: 0;
640
+ right: 0;
641
+ bottom: 0;
642
+ position: absolute;
643
+ display: flex;
644
+ justify-content: center;
645
+ }
646
+ .flexlayout__error_boundary_content {
647
+ display: flex;
648
+ align-items: center;
649
+ }
650
+ .flexlayout__tabset_sizer {
651
+ padding-top: 5px;
652
+ padding-bottom: 3px;
653
+ font-size: var(--font-size);
654
+ font-family: var(--font-family);
655
+ }
656
+ .flexlayout__tabset_header_sizer {
657
+ padding-top: 3px;
658
+ padding-bottom: 3px;
659
+ font-size: var(--font-size);
660
+ font-family: var(--font-family);
661
+ }
662
+ .flexlayout__border_sizer {
663
+ position: absolute;
664
+ top: -30000px;
665
+ padding-top: 6px;
666
+ padding-bottom: 5px;
667
+ font-size: var(--font-size);
668
+ font-family: var(--font-family);
669
+ }
670
+ .flexlayout__mini_scrollbar::-webkit-scrollbar {
671
+ width: 3px;
672
+ height: 3px;
673
+ }
674
+ .flexlayout__mini_scrollbar_hidden::-webkit-scrollbar {
675
+ display: none;
676
+ }
677
+ .flexlayout__mini_scrollbar::-webkit-scrollbar-button {
678
+ display: none;
679
+ }
680
+ .flexlayout__mini_scrollbar::-webkit-scrollbar-thumb {
681
+ background: #aaa;
682
+ border-radius: 10px;
683
+ }
684
+
685
+ /*# sourceMappingURL=light.css.map */