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