flexlayout-react 0.7.7 → 0.7.9

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