flexlayout-react 0.7.12 → 0.7.14

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 (67) hide show
  1. package/ChangeLog.txt +12 -0
  2. package/README.md +74 -71
  3. package/declarations/Rect.d.ts +1 -1
  4. package/declarations/Types.d.ts +1 -0
  5. package/declarations/model/IJsonModel.d.ts +3 -0
  6. package/declarations/model/TabNode.d.ts +1 -0
  7. package/declarations/model/TabSetNode.d.ts +1 -0
  8. package/declarations/view/Layout.d.ts +4 -2
  9. package/dist/flexlayout.js +14 -14
  10. package/dist/flexlayout_min.js +1 -1
  11. package/lib/DragDrop.js +1 -1
  12. package/lib/DragDrop.js.map +1 -1
  13. package/lib/PopupMenu.js +9 -4
  14. package/lib/PopupMenu.js.map +1 -1
  15. package/lib/Rect.js +1 -6
  16. package/lib/Rect.js.map +1 -1
  17. package/lib/Types.js +1 -0
  18. package/lib/Types.js.map +1 -1
  19. package/lib/model/Model.js +1 -0
  20. package/lib/model/Model.js.map +1 -1
  21. package/lib/model/TabNode.js +4 -0
  22. package/lib/model/TabNode.js.map +1 -1
  23. package/lib/model/TabSetNode.js +4 -0
  24. package/lib/model/TabSetNode.js.map +1 -1
  25. package/lib/view/BorderButton.js +7 -5
  26. package/lib/view/BorderButton.js.map +1 -1
  27. package/lib/view/FloatingWindow.js +3 -2
  28. package/lib/view/FloatingWindow.js.map +1 -1
  29. package/lib/view/Layout.js +117 -57
  30. package/lib/view/Layout.js.map +1 -1
  31. package/lib/view/Splitter.js +18 -6
  32. package/lib/view/Splitter.js.map +1 -1
  33. package/lib/view/TabButton.js +17 -12
  34. package/lib/view/TabButton.js.map +1 -1
  35. package/lib/view/TabOverflowHook.js +7 -4
  36. package/lib/view/TabOverflowHook.js.map +1 -1
  37. package/lib/view/TabSet.js +17 -5
  38. package/lib/view/TabSet.js.map +1 -1
  39. package/package.json +8 -3
  40. package/src/DragDrop.ts +2 -2
  41. package/src/PopupMenu.tsx +8 -4
  42. package/src/Rect.ts +2 -6
  43. package/src/Types.ts +1 -0
  44. package/src/model/IJsonModel.ts +5 -2
  45. package/src/model/Model.ts +1 -0
  46. package/src/model/TabNode.ts +5 -0
  47. package/src/model/TabSetNode.ts +6 -0
  48. package/src/view/BorderButton.tsx +13 -5
  49. package/src/view/FloatingWindow.tsx +3 -3
  50. package/src/view/Layout.tsx +145 -69
  51. package/src/view/Splitter.tsx +36 -7
  52. package/src/view/TabButton.tsx +22 -11
  53. package/src/view/TabOverflowHook.tsx +8 -5
  54. package/src/view/TabSet.tsx +20 -5
  55. package/style/_base.scss +21 -0
  56. package/style/dark.css +17 -0
  57. package/style/dark.css.map +1 -1
  58. package/style/dark.scss +6 -0
  59. package/style/gray.css +17 -0
  60. package/style/gray.css.map +1 -1
  61. package/style/gray.scss +6 -0
  62. package/style/light.css +561 -544
  63. package/style/light.css.map +1 -1
  64. package/style/light.scss +6 -0
  65. package/style/underline.css +17 -0
  66. package/style/underline.css.map +1 -1
  67. package/style/underline.scss +6 -0
package/style/light.css CHANGED
@@ -1,544 +1,561 @@
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_stretch {
217
+ background-color: transparent;
218
+ color: var(--color-tab-selected);
219
+ width: 100%;
220
+ padding: 3px 0em;
221
+ text-wrap: nowrap;
222
+ display: flex;
223
+ gap: 0.3em;
224
+ align-items: center;
225
+ box-sizing: border-box;
226
+ cursor: pointer;
227
+ }
228
+ @media (hover: hover) {
229
+ .flexlayout__tab_button_stretch:hover {
230
+ color: var(--color-tab-selected);
231
+ }
232
+ }
233
+ .flexlayout__tab_button--selected {
234
+ background-color: var(--color-tab-selected-background);
235
+ color: var(--color-tab-selected);
236
+ }
237
+ @media (hover: hover) {
238
+ .flexlayout__tab_button:hover {
239
+ background-color: var(--color-tab-selected-background);
240
+ color: var(--color-tab-selected);
241
+ }
242
+ }
243
+ .flexlayout__tab_button--unselected {
244
+ background-color: var(--color-tab-unselected-background);
245
+ color: var(--color-tab-unselected);
246
+ color: gray;
247
+ }
248
+ .flexlayout__tab_button_leading {
249
+ display: flex;
250
+ }
251
+ .flexlayout__tab_button_content {
252
+ display: flex;
253
+ }
254
+ .flexlayout__tab_button_textbox {
255
+ border: none;
256
+ font-family: var(--font-family);
257
+ font-size: var(--font-size);
258
+ color: var(--color-tab-textbox);
259
+ background-color: var(--color-tab-textbox-background);
260
+ border: 1px inset var(--color-1);
261
+ border-radius: 3px;
262
+ width: 10em;
263
+ }
264
+ .flexlayout__tab_button_textbox:focus {
265
+ outline: none;
266
+ }
267
+ .flexlayout__tab_button_trailing {
268
+ display: flex;
269
+ visibility: hidden;
270
+ border-radius: 4px;
271
+ }
272
+ .flexlayout__tab_button_trailing:hover {
273
+ background-color: var(--color-3);
274
+ }
275
+ @media (hover: hover) {
276
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
277
+ visibility: visible;
278
+ }
279
+ }
280
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
281
+ visibility: visible;
282
+ }
283
+ .flexlayout__tab_button_overflow {
284
+ display: flex;
285
+ align-items: center;
286
+ border: none;
287
+ color: var(--color-overflow);
288
+ font-size: inherit;
289
+ background-color: transparent;
290
+ }
291
+ .flexlayout__tab_toolbar {
292
+ display: flex;
293
+ align-items: center;
294
+ gap: 0.3em;
295
+ padding-left: 0.5em;
296
+ padding-right: 0.3em;
297
+ }
298
+ .flexlayout__tab_toolbar_button {
299
+ border: none;
300
+ outline: none;
301
+ font-size: inherit;
302
+ margin: 0px;
303
+ background-color: transparent;
304
+ border-radius: 4px;
305
+ padding: 1px;
306
+ }
307
+ @media (hover: hover) {
308
+ .flexlayout__tab_toolbar_button:hover {
309
+ background-color: var(--color-2);
310
+ }
311
+ }
312
+ .flexlayout__tab_toolbar_sticky_buttons_container {
313
+ display: flex;
314
+ gap: 0.3em;
315
+ padding-left: 5px;
316
+ align-items: center;
317
+ }
318
+ .flexlayout__tab_floating {
319
+ overflow: auto;
320
+ position: absolute;
321
+ box-sizing: border-box;
322
+ color: var(--color-text);
323
+ background-color: var(--color-background);
324
+ display: flex;
325
+ justify-content: center;
326
+ align-items: center;
327
+ }
328
+ .flexlayout__tab_floating_inner {
329
+ overflow: auto;
330
+ display: flex;
331
+ flex-direction: column;
332
+ justify-content: center;
333
+ align-items: center;
334
+ }
335
+ .flexlayout__tab_floating_inner div {
336
+ margin-bottom: 5px;
337
+ text-align: center;
338
+ }
339
+ .flexlayout__tab_floating_inner div a {
340
+ color: royalblue;
341
+ }
342
+ .flexlayout__border {
343
+ box-sizing: border-box;
344
+ overflow: hidden;
345
+ display: flex;
346
+ font-size: var(--font-size);
347
+ font-family: var(--font-family);
348
+ color: var(--color-border);
349
+ background-color: var(--color-border-background);
350
+ }
351
+ .flexlayout__border_top {
352
+ border-bottom: 1px solid var(--color-border-divider-line);
353
+ align-items: center;
354
+ }
355
+ .flexlayout__border_bottom {
356
+ border-top: 1px solid var(--color-border-divider-line);
357
+ align-items: center;
358
+ }
359
+ .flexlayout__border_left {
360
+ border-right: 1px solid var(--color-border-divider-line);
361
+ align-content: center;
362
+ flex-direction: column;
363
+ }
364
+ .flexlayout__border_right {
365
+ border-left: 1px solid var(--color-border-divider-line);
366
+ align-content: center;
367
+ flex-direction: column;
368
+ }
369
+ .flexlayout__border_inner {
370
+ position: relative;
371
+ box-sizing: border-box;
372
+ display: flex;
373
+ overflow: hidden;
374
+ flex-grow: 1;
375
+ }
376
+ .flexlayout__border_inner_tab_container {
377
+ white-space: nowrap;
378
+ display: flex;
379
+ padding-left: 2px;
380
+ padding-right: 2px;
381
+ box-sizing: border-box;
382
+ position: absolute;
383
+ top: 0;
384
+ bottom: 0;
385
+ width: 10000px;
386
+ }
387
+ .flexlayout__border_inner_tab_container_right {
388
+ transform-origin: top left;
389
+ transform: rotate(90deg);
390
+ }
391
+ .flexlayout__border_inner_tab_container_left {
392
+ flex-direction: row-reverse;
393
+ transform-origin: top right;
394
+ transform: rotate(-90deg);
395
+ }
396
+ .flexlayout__border_tab_divider {
397
+ width: 4px;
398
+ }
399
+ .flexlayout__border_button {
400
+ display: flex;
401
+ gap: 0.3em;
402
+ align-items: center;
403
+ cursor: pointer;
404
+ padding: 3px 0.5em;
405
+ margin: 2px 0px;
406
+ box-sizing: border-box;
407
+ white-space: nowrap;
408
+ }
409
+ .flexlayout__border_button--selected {
410
+ background-color: var(--color-border-tab-selected-background);
411
+ color: var(--color-border-tab-selected);
412
+ }
413
+ @media (hover: hover) {
414
+ .flexlayout__border_button:hover {
415
+ background-color: var(--color-border-tab-selected-background);
416
+ color: var(--color-border-tab-selected);
417
+ }
418
+ }
419
+ .flexlayout__border_button--unselected {
420
+ background-color: var(--color-border-tab-unselected-background);
421
+ color: var(--color-border-tab-unselected);
422
+ }
423
+ .flexlayout__border_button_leading {
424
+ display: flex;
425
+ }
426
+ .flexlayout__border_button_content {
427
+ display: flex;
428
+ }
429
+ .flexlayout__border_button_trailing {
430
+ display: flex;
431
+ border-radius: 4px;
432
+ visibility: hidden;
433
+ }
434
+ .flexlayout__border_button_trailing:hover {
435
+ background-color: var(--color-3);
436
+ }
437
+ @media (hover: hover) {
438
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
439
+ visibility: visible;
440
+ }
441
+ }
442
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
443
+ visibility: visible;
444
+ }
445
+ .flexlayout__border_toolbar {
446
+ display: flex;
447
+ gap: 0.3em;
448
+ align-items: center;
449
+ }
450
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
451
+ flex-direction: column;
452
+ padding-top: 0.5em;
453
+ padding-bottom: 0.3em;
454
+ }
455
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
456
+ padding-left: 0.5em;
457
+ padding-right: 0.3em;
458
+ }
459
+ .flexlayout__border_toolbar_button {
460
+ border: none;
461
+ outline: none;
462
+ font-size: inherit;
463
+ background-color: transparent;
464
+ border-radius: 4px;
465
+ padding: 1px;
466
+ }
467
+ @media (hover: hover) {
468
+ .flexlayout__border_toolbar_button:hover {
469
+ background-color: var(--color-2);
470
+ }
471
+ }
472
+ .flexlayout__border_toolbar_button_overflow {
473
+ display: flex;
474
+ align-items: center;
475
+ border: none;
476
+ color: var(--color-overflow);
477
+ font-size: inherit;
478
+ background-color: transparent;
479
+ }
480
+ .flexlayout__popup_menu {
481
+ font-size: var(--font-size);
482
+ font-family: var(--font-family);
483
+ }
484
+ .flexlayout__popup_menu_item {
485
+ padding: 2px 0.5em;
486
+ white-space: nowrap;
487
+ cursor: pointer;
488
+ border-radius: 2px;
489
+ }
490
+ @media (hover: hover) {
491
+ .flexlayout__popup_menu_item:hover {
492
+ background-color: var(--color-6);
493
+ }
494
+ }
495
+ .flexlayout__popup_menu_container {
496
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
497
+ border: 1px solid var(--color-popup-border);
498
+ color: var(--color-popup-unselected);
499
+ background: var(--color-popup-unselected-background);
500
+ border-radius: 3px;
501
+ position: absolute;
502
+ z-index: 1000;
503
+ max-height: 50%;
504
+ min-width: 100px;
505
+ overflow: auto;
506
+ padding: 2px;
507
+ }
508
+ .flexlayout__floating_window _body {
509
+ height: 100%;
510
+ }
511
+ .flexlayout__floating_window_content {
512
+ left: 0;
513
+ top: 0;
514
+ right: 0;
515
+ bottom: 0;
516
+ position: absolute;
517
+ }
518
+ .flexlayout__floating_window_tab {
519
+ overflow: auto;
520
+ left: 0;
521
+ top: 0;
522
+ right: 0;
523
+ bottom: 0;
524
+ position: absolute;
525
+ box-sizing: border-box;
526
+ background-color: var(--color-background);
527
+ color: var(--color-text);
528
+ }
529
+ .flexlayout__error_boundary_container {
530
+ left: 0;
531
+ top: 0;
532
+ right: 0;
533
+ bottom: 0;
534
+ position: absolute;
535
+ display: flex;
536
+ justify-content: center;
537
+ }
538
+ .flexlayout__error_boundary_content {
539
+ display: flex;
540
+ align-items: center;
541
+ }
542
+ .flexlayout__tabset_sizer {
543
+ padding-top: 5px;
544
+ padding-bottom: 3px;
545
+ font-size: var(--font-size);
546
+ font-family: var(--font-family);
547
+ }
548
+ .flexlayout__tabset_header_sizer {
549
+ padding-top: 3px;
550
+ padding-bottom: 3px;
551
+ font-size: var(--font-size);
552
+ font-family: var(--font-family);
553
+ }
554
+ .flexlayout__border_sizer {
555
+ padding-top: 6px;
556
+ padding-bottom: 5px;
557
+ font-size: var(--font-size);
558
+ font-family: var(--font-family);
559
+ }
560
+
561
+ /*# sourceMappingURL=light.css.map */