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/underline.css CHANGED
@@ -1,565 +1,565 @@
1
- .flexlayout__layout {
2
- --color-text: black;
3
- --color-background: white;
4
- --color-base: white;
5
- --color-1: #fafafa;
6
- --color-2: whitesmoke;
7
- --color-3: #eeeeee;
8
- --color-4: #e6e6e6;
9
- --color-5: #e0e0e0;
10
- --color-6: #d9d9d9;
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-3);
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-3);
27
- --color-tab-selected: var(--color-text);
28
- --color-tab-selected-background: transparent;
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: transparent;
35
- --color-border-tab-unselected: gray;
36
- --color-border-tab-unselected-background: transparent;
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
- --color-underline: rgb(65, 105, 225);
50
- --color-underline-hover: #aaa;
51
- --underline_height: 3px;
52
- }
53
-
54
- .flexlayout__layout {
55
- left: 0;
56
- top: 0;
57
- right: 0;
58
- bottom: 0;
59
- position: absolute;
60
- overflow: hidden;
61
- }
62
- .flexlayout__splitter {
63
- background-color: var(--color-splitter);
64
- }
65
- @media (hover: hover) {
66
- .flexlayout__splitter:hover {
67
- background-color: var(--color-splitter-hover);
68
- transition: background-color ease-in 0.1s;
69
- transition-delay: 0.05s;
70
- }
71
- }
72
- .flexlayout__splitter_border {
73
- z-index: 10;
74
- }
75
- .flexlayout__splitter_drag {
76
- z-index: 1000;
77
- background-color: var(--color-splitter-drag);
78
- }
79
- .flexlayout__splitter_extra {
80
- background-color: transparent;
81
- }
82
- .flexlayout__outline_rect {
83
- position: absolute;
84
- pointer-events: none;
85
- box-sizing: border-box;
86
- border: 2px solid var(--color-drag1);
87
- background: var(--color-drag1-background);
88
- border-radius: 5px;
89
- z-index: 1000;
90
- }
91
- .flexlayout__outline_rect_edge {
92
- pointer-events: none;
93
- border: 2px solid var(--color-drag2);
94
- background: var(--color-drag2-background);
95
- border-radius: 5px;
96
- z-index: 1000;
97
- box-sizing: border-box;
98
- }
99
- .flexlayout__edge_rect {
100
- position: absolute;
101
- z-index: 1000;
102
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
103
- background-color: var(--color-edge-marker);
104
- pointer-events: none;
105
- }
106
- .flexlayout__drag_rect {
107
- position: absolute;
108
- cursor: move;
109
- color: var(--color-drag-rect);
110
- background-color: var(--color-drag-rect-background);
111
- border: 2px solid var(--color-drag-rect-border);
112
- border-radius: 5px;
113
- z-index: 1000;
114
- box-sizing: border-box;
115
- opacity: 0.9;
116
- text-align: center;
117
- display: flex;
118
- justify-content: center;
119
- flex-direction: column;
120
- overflow: hidden;
121
- padding: 0.3em 1em;
122
- word-wrap: break-word;
123
- font-size: var(--font-size);
124
- font-family: var(--font-family);
125
- }
126
- .flexlayout__tabset {
127
- display: flex;
128
- flex-direction: column;
129
- overflow: hidden;
130
- background-color: var(--color-tabset-background);
131
- box-sizing: border-box;
132
- font-size: var(--font-size);
133
- font-family: var(--font-family);
134
- }
135
- .flexlayout__tabset_tab_divider {
136
- width: 4px;
137
- width: 1px;
138
- margin: 4px 6px 4px 6px;
139
- border-left: 1px solid #ddd;
140
- }
141
- .flexlayout__tabset_content {
142
- display: flex;
143
- flex-grow: 1;
144
- align-items: center;
145
- justify-content: center;
146
- }
147
- .flexlayout__tabset_header {
148
- display: flex;
149
- align-items: center;
150
- padding: 3px 3px 3px 5px;
151
- box-sizing: border-box;
152
- border-bottom: 1px solid var(--color-tabset-divider-line);
153
- color: var(--color-tabset-header);
154
- background-color: var(--color-tabset-header-background);
155
- }
156
- .flexlayout__tabset_header_content {
157
- flex-grow: 1;
158
- }
159
- .flexlayout__tabset_tabbar_outer {
160
- box-sizing: border-box;
161
- background-color: var(--color-tabset-background);
162
- overflow: hidden;
163
- display: flex;
164
- }
165
- .flexlayout__tabset_tabbar_outer_top {
166
- border-bottom: 1px solid var(--color-tabset-divider-line);
167
- }
168
- .flexlayout__tabset_tabbar_outer_bottom {
169
- border-top: 1px solid var(--color-tabset-divider-line);
170
- }
171
- .flexlayout__tabset_tabbar_inner {
172
- position: relative;
173
- box-sizing: border-box;
174
- display: flex;
175
- flex-grow: 1;
176
- overflow: hidden;
177
- }
178
- .flexlayout__tabset_tabbar_inner_tab_container {
179
- display: flex;
180
- padding-left: 4px;
181
- padding-right: 4px;
182
- box-sizing: border-box;
183
- position: absolute;
184
- top: 0;
185
- bottom: 0;
186
- width: 10000px;
187
- }
188
- .flexlayout__tabset_tabbar_inner_tab_container_top {
189
- border-top: 2px solid transparent;
190
- }
191
- .flexlayout__tabset_tabbar_inner_tab_container_bottom {
192
- border-bottom: 2px solid transparent;
193
- }
194
- .flexlayout__tabset-selected {
195
- background-color: var(--color-tabset-background-selected);
196
- }
197
- .flexlayout__tabset-maximized {
198
- background-color: var(--color-tabset-background-maximized);
199
- }
200
- .flexlayout__tab_button_stamp {
201
- display: inline-flex;
202
- align-items: center;
203
- gap: 0.3em;
204
- white-space: nowrap;
205
- box-sizing: border-box;
206
- }
207
- .flexlayout__tab {
208
- overflow: auto;
209
- position: absolute;
210
- box-sizing: border-box;
211
- background-color: var(--color-background);
212
- color: var(--color-text);
213
- }
214
- .flexlayout__tab_button {
215
- display: flex;
216
- gap: 0.3em;
217
- align-items: center;
218
- box-sizing: border-box;
219
- padding: 3px 0.5em;
220
- cursor: pointer;
221
- padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
222
- }
223
- .flexlayout__tab_button--selected {
224
- background-color: var(--color-tab-selected-background);
225
- color: var(--color-tab-selected);
226
- border-bottom: var(--underline_height) solid var(--color-underline);
227
- }
228
- @media (hover: hover) {
229
- .flexlayout__tab_button:hover {
230
- background-color: var(--color-tab-selected-background);
231
- color: var(--color-tab-selected);
232
- border-bottom: var(--underline_height) solid var(--color-underline-hover);
233
- }
234
- }
235
- .flexlayout__tab_button--unselected {
236
- background-color: var(--color-tab-unselected-background);
237
- color: var(--color-tab-unselected);
238
- color: gray;
239
- border-bottom: var(--underline_height) solid transparent;
240
- }
241
- .flexlayout__tab_button_leading {
242
- display: flex;
243
- }
244
- .flexlayout__tab_button_content {
245
- display: flex;
246
- }
247
- .flexlayout__tab_button_textbox {
248
- border: none;
249
- font-family: var(--font-family);
250
- font-size: var(--font-size);
251
- color: var(--color-tab-textbox);
252
- background-color: var(--color-tab-textbox-background);
253
- border: 1px inset var(--color-1);
254
- border-radius: 3px;
255
- width: 10em;
256
- }
257
- .flexlayout__tab_button_textbox:focus {
258
- outline: none;
259
- }
260
- .flexlayout__tab_button_trailing {
261
- display: flex;
262
- visibility: hidden;
263
- border-radius: 4px;
264
- }
265
- .flexlayout__tab_button_trailing:hover {
266
- background-color: var(--color-3);
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
- @media (hover: hover) {
301
- .flexlayout__tab_toolbar_button:hover {
302
- background-color: var(--color-2);
303
- }
304
- }
305
- .flexlayout__tab_toolbar_sticky_buttons_container {
306
- display: flex;
307
- gap: 0.3em;
308
- padding-left: 5px;
309
- align-items: center;
310
- }
311
- .flexlayout__tab_floating {
312
- overflow: auto;
313
- position: absolute;
314
- box-sizing: border-box;
315
- color: var(--color-text);
316
- background-color: var(--color-background);
317
- display: flex;
318
- justify-content: center;
319
- align-items: center;
320
- }
321
- .flexlayout__tab_floating_inner {
322
- overflow: auto;
323
- display: flex;
324
- flex-direction: column;
325
- justify-content: center;
326
- align-items: center;
327
- }
328
- .flexlayout__tab_floating_inner div {
329
- margin-bottom: 5px;
330
- text-align: center;
331
- }
332
- .flexlayout__tab_floating_inner div a {
333
- color: royalblue;
334
- }
335
- .flexlayout__border {
336
- box-sizing: border-box;
337
- overflow: hidden;
338
- display: flex;
339
- font-size: var(--font-size);
340
- font-family: var(--font-family);
341
- color: var(--color-border);
342
- background-color: var(--color-border-background);
343
- }
344
- .flexlayout__border_top {
345
- border-bottom: 1px solid var(--color-border-divider-line);
346
- align-items: center;
347
- }
348
- .flexlayout__border_bottom {
349
- border-top: 1px solid var(--color-border-divider-line);
350
- align-items: center;
351
- }
352
- .flexlayout__border_left {
353
- border-right: 1px solid var(--color-border-divider-line);
354
- align-content: center;
355
- flex-direction: column;
356
- }
357
- .flexlayout__border_right {
358
- border-left: 1px solid var(--color-border-divider-line);
359
- align-content: center;
360
- flex-direction: column;
361
- }
362
- .flexlayout__border_inner {
363
- position: relative;
364
- box-sizing: border-box;
365
- display: flex;
366
- overflow: hidden;
367
- flex-grow: 1;
368
- }
369
- .flexlayout__border_inner_tab_container {
370
- white-space: nowrap;
371
- display: flex;
372
- padding-left: 2px;
373
- padding-right: 2px;
374
- box-sizing: border-box;
375
- position: absolute;
376
- top: 0;
377
- bottom: 0;
378
- width: 10000px;
379
- }
380
- .flexlayout__border_inner_tab_container_right {
381
- transform-origin: top left;
382
- transform: rotate(90deg);
383
- }
384
- .flexlayout__border_inner_tab_container_left {
385
- flex-direction: row-reverse;
386
- transform-origin: top right;
387
- transform: rotate(-90deg);
388
- }
389
- .flexlayout__border_tab_divider {
390
- width: 4px;
391
- width: 1px;
392
- margin: 4px 6px 4px 6px;
393
- border-left: 1px solid #ddd;
394
- }
395
- .flexlayout__border_button {
396
- display: flex;
397
- gap: 0.3em;
398
- align-items: center;
399
- cursor: pointer;
400
- padding: 3px 0.5em;
401
- margin: 2px 0px;
402
- box-sizing: border-box;
403
- white-space: nowrap;
404
- padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
405
- }
406
- .flexlayout__border_button--selected {
407
- background-color: var(--color-border-tab-selected-background);
408
- color: var(--color-border-tab-selected);
409
- border-bottom: var(--underline_height) solid var(--color-underline);
410
- }
411
- @media (hover: hover) {
412
- .flexlayout__border_button:hover {
413
- background-color: var(--color-border-tab-selected-background);
414
- color: var(--color-border-tab-selected);
415
- border-bottom: var(--underline_height) solid var(--color-underline-hover);
416
- }
417
- }
418
- .flexlayout__border_button--unselected {
419
- background-color: var(--color-border-tab-unselected-background);
420
- color: var(--color-border-tab-unselected);
421
- border-bottom: var(--underline_height) solid transparent;
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
- .flexlayout__tab_button_textbox {
562
- border: none;
563
- }
564
-
565
- /*# sourceMappingURL=underline.css.map */
1
+ .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: #fafafa;
6
+ --color-2: whitesmoke;
7
+ --color-3: #eeeeee;
8
+ --color-4: #e6e6e6;
9
+ --color-5: #e0e0e0;
10
+ --color-6: #d9d9d9;
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-3);
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-3);
27
+ --color-tab-selected: var(--color-text);
28
+ --color-tab-selected-background: transparent;
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: transparent;
35
+ --color-border-tab-unselected: gray;
36
+ --color-border-tab-unselected-background: transparent;
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
+ --color-underline: rgb(65, 105, 225);
50
+ --color-underline-hover: #aaa;
51
+ --underline_height: 3px;
52
+ }
53
+
54
+ .flexlayout__layout {
55
+ left: 0;
56
+ top: 0;
57
+ right: 0;
58
+ bottom: 0;
59
+ position: absolute;
60
+ overflow: hidden;
61
+ }
62
+ .flexlayout__splitter {
63
+ background-color: var(--color-splitter);
64
+ }
65
+ @media (hover: hover) {
66
+ .flexlayout__splitter:hover {
67
+ background-color: var(--color-splitter-hover);
68
+ transition: background-color ease-in 0.1s;
69
+ transition-delay: 0.05s;
70
+ }
71
+ }
72
+ .flexlayout__splitter_border {
73
+ z-index: 10;
74
+ }
75
+ .flexlayout__splitter_drag {
76
+ z-index: 1000;
77
+ background-color: var(--color-splitter-drag);
78
+ }
79
+ .flexlayout__splitter_extra {
80
+ background-color: transparent;
81
+ }
82
+ .flexlayout__outline_rect {
83
+ position: absolute;
84
+ pointer-events: none;
85
+ box-sizing: border-box;
86
+ border: 2px solid var(--color-drag1);
87
+ background: var(--color-drag1-background);
88
+ border-radius: 5px;
89
+ z-index: 1000;
90
+ }
91
+ .flexlayout__outline_rect_edge {
92
+ pointer-events: none;
93
+ border: 2px solid var(--color-drag2);
94
+ background: var(--color-drag2-background);
95
+ border-radius: 5px;
96
+ z-index: 1000;
97
+ box-sizing: border-box;
98
+ }
99
+ .flexlayout__edge_rect {
100
+ position: absolute;
101
+ z-index: 1000;
102
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
103
+ background-color: var(--color-edge-marker);
104
+ pointer-events: none;
105
+ }
106
+ .flexlayout__drag_rect {
107
+ position: absolute;
108
+ cursor: move;
109
+ color: var(--color-drag-rect);
110
+ background-color: var(--color-drag-rect-background);
111
+ border: 2px solid var(--color-drag-rect-border);
112
+ border-radius: 5px;
113
+ z-index: 1000;
114
+ box-sizing: border-box;
115
+ opacity: 0.9;
116
+ text-align: center;
117
+ display: flex;
118
+ justify-content: center;
119
+ flex-direction: column;
120
+ overflow: hidden;
121
+ padding: 0.3em 1em;
122
+ word-wrap: break-word;
123
+ font-size: var(--font-size);
124
+ font-family: var(--font-family);
125
+ }
126
+ .flexlayout__tabset {
127
+ display: flex;
128
+ flex-direction: column;
129
+ overflow: hidden;
130
+ background-color: var(--color-tabset-background);
131
+ box-sizing: border-box;
132
+ font-size: var(--font-size);
133
+ font-family: var(--font-family);
134
+ }
135
+ .flexlayout__tabset_tab_divider {
136
+ width: 4px;
137
+ width: 1px;
138
+ margin: 4px 6px 4px 6px;
139
+ border-left: 1px solid #ddd;
140
+ }
141
+ .flexlayout__tabset_content {
142
+ display: flex;
143
+ flex-grow: 1;
144
+ align-items: center;
145
+ justify-content: center;
146
+ }
147
+ .flexlayout__tabset_header {
148
+ display: flex;
149
+ align-items: center;
150
+ padding: 3px 3px 3px 5px;
151
+ box-sizing: border-box;
152
+ border-bottom: 1px solid var(--color-tabset-divider-line);
153
+ color: var(--color-tabset-header);
154
+ background-color: var(--color-tabset-header-background);
155
+ }
156
+ .flexlayout__tabset_header_content {
157
+ flex-grow: 1;
158
+ }
159
+ .flexlayout__tabset_tabbar_outer {
160
+ box-sizing: border-box;
161
+ background-color: var(--color-tabset-background);
162
+ overflow: hidden;
163
+ display: flex;
164
+ }
165
+ .flexlayout__tabset_tabbar_outer_top {
166
+ border-bottom: 1px solid var(--color-tabset-divider-line);
167
+ }
168
+ .flexlayout__tabset_tabbar_outer_bottom {
169
+ border-top: 1px solid var(--color-tabset-divider-line);
170
+ }
171
+ .flexlayout__tabset_tabbar_inner {
172
+ position: relative;
173
+ box-sizing: border-box;
174
+ display: flex;
175
+ flex-grow: 1;
176
+ overflow: hidden;
177
+ }
178
+ .flexlayout__tabset_tabbar_inner_tab_container {
179
+ display: flex;
180
+ padding-left: 4px;
181
+ padding-right: 4px;
182
+ box-sizing: border-box;
183
+ position: absolute;
184
+ top: 0;
185
+ bottom: 0;
186
+ width: 10000px;
187
+ }
188
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
189
+ border-top: 2px solid transparent;
190
+ }
191
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
192
+ border-bottom: 2px solid transparent;
193
+ }
194
+ .flexlayout__tabset-selected {
195
+ background-color: var(--color-tabset-background-selected);
196
+ }
197
+ .flexlayout__tabset-maximized {
198
+ background-color: var(--color-tabset-background-maximized);
199
+ }
200
+ .flexlayout__tab_button_stamp {
201
+ display: inline-flex;
202
+ align-items: center;
203
+ gap: 0.3em;
204
+ white-space: nowrap;
205
+ box-sizing: border-box;
206
+ }
207
+ .flexlayout__tab {
208
+ overflow: auto;
209
+ position: absolute;
210
+ box-sizing: border-box;
211
+ background-color: var(--color-background);
212
+ color: var(--color-text);
213
+ }
214
+ .flexlayout__tab_button {
215
+ display: flex;
216
+ gap: 0.3em;
217
+ align-items: center;
218
+ box-sizing: border-box;
219
+ padding: 3px 0.5em;
220
+ cursor: pointer;
221
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
222
+ }
223
+ .flexlayout__tab_button--selected {
224
+ background-color: var(--color-tab-selected-background);
225
+ color: var(--color-tab-selected);
226
+ border-bottom: var(--underline_height) solid var(--color-underline);
227
+ }
228
+ @media (hover: hover) {
229
+ .flexlayout__tab_button:hover {
230
+ background-color: var(--color-tab-selected-background);
231
+ color: var(--color-tab-selected);
232
+ border-bottom: var(--underline_height) solid var(--color-underline-hover);
233
+ }
234
+ }
235
+ .flexlayout__tab_button--unselected {
236
+ background-color: var(--color-tab-unselected-background);
237
+ color: var(--color-tab-unselected);
238
+ color: gray;
239
+ border-bottom: var(--underline_height) solid transparent;
240
+ }
241
+ .flexlayout__tab_button_leading {
242
+ display: flex;
243
+ }
244
+ .flexlayout__tab_button_content {
245
+ display: flex;
246
+ }
247
+ .flexlayout__tab_button_textbox {
248
+ border: none;
249
+ font-family: var(--font-family);
250
+ font-size: var(--font-size);
251
+ color: var(--color-tab-textbox);
252
+ background-color: var(--color-tab-textbox-background);
253
+ border: 1px inset var(--color-1);
254
+ border-radius: 3px;
255
+ width: 10em;
256
+ }
257
+ .flexlayout__tab_button_textbox:focus {
258
+ outline: none;
259
+ }
260
+ .flexlayout__tab_button_trailing {
261
+ display: flex;
262
+ visibility: hidden;
263
+ border-radius: 4px;
264
+ }
265
+ .flexlayout__tab_button_trailing:hover {
266
+ background-color: var(--color-3);
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
+ @media (hover: hover) {
301
+ .flexlayout__tab_toolbar_button:hover {
302
+ background-color: var(--color-2);
303
+ }
304
+ }
305
+ .flexlayout__tab_toolbar_sticky_buttons_container {
306
+ display: flex;
307
+ gap: 0.3em;
308
+ padding-left: 5px;
309
+ align-items: center;
310
+ }
311
+ .flexlayout__tab_floating {
312
+ overflow: auto;
313
+ position: absolute;
314
+ box-sizing: border-box;
315
+ color: var(--color-text);
316
+ background-color: var(--color-background);
317
+ display: flex;
318
+ justify-content: center;
319
+ align-items: center;
320
+ }
321
+ .flexlayout__tab_floating_inner {
322
+ overflow: auto;
323
+ display: flex;
324
+ flex-direction: column;
325
+ justify-content: center;
326
+ align-items: center;
327
+ }
328
+ .flexlayout__tab_floating_inner div {
329
+ margin-bottom: 5px;
330
+ text-align: center;
331
+ }
332
+ .flexlayout__tab_floating_inner div a {
333
+ color: royalblue;
334
+ }
335
+ .flexlayout__border {
336
+ box-sizing: border-box;
337
+ overflow: hidden;
338
+ display: flex;
339
+ font-size: var(--font-size);
340
+ font-family: var(--font-family);
341
+ color: var(--color-border);
342
+ background-color: var(--color-border-background);
343
+ }
344
+ .flexlayout__border_top {
345
+ border-bottom: 1px solid var(--color-border-divider-line);
346
+ align-items: center;
347
+ }
348
+ .flexlayout__border_bottom {
349
+ border-top: 1px solid var(--color-border-divider-line);
350
+ align-items: center;
351
+ }
352
+ .flexlayout__border_left {
353
+ border-right: 1px solid var(--color-border-divider-line);
354
+ align-content: center;
355
+ flex-direction: column;
356
+ }
357
+ .flexlayout__border_right {
358
+ border-left: 1px solid var(--color-border-divider-line);
359
+ align-content: center;
360
+ flex-direction: column;
361
+ }
362
+ .flexlayout__border_inner {
363
+ position: relative;
364
+ box-sizing: border-box;
365
+ display: flex;
366
+ overflow: hidden;
367
+ flex-grow: 1;
368
+ }
369
+ .flexlayout__border_inner_tab_container {
370
+ white-space: nowrap;
371
+ display: flex;
372
+ padding-left: 2px;
373
+ padding-right: 2px;
374
+ box-sizing: border-box;
375
+ position: absolute;
376
+ top: 0;
377
+ bottom: 0;
378
+ width: 10000px;
379
+ }
380
+ .flexlayout__border_inner_tab_container_right {
381
+ transform-origin: top left;
382
+ transform: rotate(90deg);
383
+ }
384
+ .flexlayout__border_inner_tab_container_left {
385
+ flex-direction: row-reverse;
386
+ transform-origin: top right;
387
+ transform: rotate(-90deg);
388
+ }
389
+ .flexlayout__border_tab_divider {
390
+ width: 4px;
391
+ width: 1px;
392
+ margin: 4px 6px 4px 6px;
393
+ border-left: 1px solid #ddd;
394
+ }
395
+ .flexlayout__border_button {
396
+ display: flex;
397
+ gap: 0.3em;
398
+ align-items: center;
399
+ cursor: pointer;
400
+ padding: 3px 0.5em;
401
+ margin: 2px 0px;
402
+ box-sizing: border-box;
403
+ white-space: nowrap;
404
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
405
+ }
406
+ .flexlayout__border_button--selected {
407
+ background-color: var(--color-border-tab-selected-background);
408
+ color: var(--color-border-tab-selected);
409
+ border-bottom: var(--underline_height) solid var(--color-underline);
410
+ }
411
+ @media (hover: hover) {
412
+ .flexlayout__border_button:hover {
413
+ background-color: var(--color-border-tab-selected-background);
414
+ color: var(--color-border-tab-selected);
415
+ border-bottom: var(--underline_height) solid var(--color-underline-hover);
416
+ }
417
+ }
418
+ .flexlayout__border_button--unselected {
419
+ background-color: var(--color-border-tab-unselected-background);
420
+ color: var(--color-border-tab-unselected);
421
+ border-bottom: var(--underline_height) solid transparent;
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
+ .flexlayout__tab_button_textbox {
562
+ border: none;
563
+ }
564
+
565
+ /*# sourceMappingURL=underline.css.map */