flexlayout-react 0.8.4 → 0.8.5

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.
@@ -1,705 +1,731 @@
1
- .flexlayout__layout {
2
- --color-text: black;
3
- --color-background: white;
4
- --color-base: white;
5
- --color-1: rgb(249.9, 249.9, 249.9);
6
- --color-2: rgb(244.902, 244.902, 244.902);
7
- --color-3: rgb(237.55494, 237.55494, 237.55494);
8
- --color-4: rgb(230.4282918, 230.4282918, 230.4282918);
9
- --color-5: rgb(223.515443046, 223.515443046, 223.515443046);
10
- --color-6: rgb(216.8099797546, 216.8099797546, 216.8099797546);
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-tab-content: var(--color-background);
26
- --color-border-background: var(--color-background);
27
- --color-border-divider-line: var(--color-3);
28
- --color-tab-content: var(--color-background);
29
- --color-tab-selected: var(--color-text);
30
- --color-tab-selected-background: transparent;
31
- --color-tab-unselected: gray;
32
- --color-tab-unselected-background: transparent;
33
- --color-tab-textbox: var(--color-text);
34
- --color-tab-textbox-background: var(--color-3);
35
- --color-border-tab-selected: var(--color-text);
36
- --color-border-tab-selected-background: transparent;
37
- --color-border-tab-unselected: gray;
38
- --color-border-tab-unselected-background: transparent;
39
- --color-splitter: var(--color-1);
40
- --color-splitter-hover: var(--color-4);
41
- --color-splitter-drag: var(--color-4);
42
- --color-drag-rect-border: var(--color-6);
43
- --color-drag-rect-background: var(--color-4);
44
- --color-drag-rect: var(--color-text);
45
- --color-popup-border: var(--color-6);
46
- --color-popup-unselected: var(--color-text);
47
- --color-popup-unselected-background: white;
48
- --color-popup-selected: var(--color-text);
49
- --color-popup-selected-background: var(--color-3);
50
- --color-edge-marker: #aaa;
51
- --color-edge-icon: #555;
52
- --color-underline: rgb(65, 105, 225);
53
- --color-underline-hover: #aaa;
54
- --underline_height: 3px;
55
- }
56
-
57
- .flexlayout__layout {
58
- left: 0;
59
- top: 0;
60
- right: 0;
61
- bottom: 0;
62
- position: absolute;
63
- display: flex;
64
- }
65
- .flexlayout__layout_overlay {
66
- left: 0;
67
- top: 0;
68
- right: 0;
69
- bottom: 0;
70
- position: absolute;
71
- z-index: 1000;
72
- }
73
- .flexlayout__layout_tab_stamps {
74
- position: absolute;
75
- top: -10000px;
76
- z-index: 100;
77
- display: flex;
78
- flex-direction: column;
79
- align-items: start;
80
- }
81
- .flexlayout__layout_moveables {
82
- visibility: hidden;
83
- position: absolute;
84
- width: 100px;
85
- height: 100px;
86
- top: -20000px;
87
- }
88
- .flexlayout__layout_main {
89
- display: flex;
90
- flex-basis: 0px;
91
- min-width: 0;
92
- min-height: 0;
93
- flex-grow: 1;
94
- position: relative;
95
- }
96
- .flexlayout__layout_border_container {
97
- display: flex;
98
- flex-basis: 0px;
99
- min-width: 0;
100
- min-height: 0;
101
- flex-grow: 1;
102
- }
103
- .flexlayout__layout_border_container_inner {
104
- display: flex;
105
- flex-basis: 0px;
106
- min-width: 0;
107
- min-height: 0;
108
- flex-grow: 1;
109
- }
110
- .flexlayout__splitter {
111
- display: flex;
112
- align-items: center;
113
- justify-content: center;
114
- background-color: var(--color-splitter);
115
- touch-action: none;
116
- z-index: 10;
117
- }
118
- @media (hover: hover) {
119
- .flexlayout__splitter:hover {
120
- background-color: var(--color-splitter-hover);
121
- transition: background-color ease-in 0.1s;
122
- transition-delay: 0.05s;
123
- }
124
- }
125
- .flexlayout__splitter_drag {
126
- position: absolute;
127
- display: flex;
128
- align-items: center;
129
- justify-content: center;
130
- z-index: 1000;
131
- background-color: var(--color-splitter-drag);
132
- }
133
- .flexlayout__splitter_handle {
134
- background-color: #ccc;
135
- border-radius: 3px;
136
- }
137
- .flexlayout__splitter_handle_horz {
138
- width: 3px;
139
- height: 30px;
140
- }
141
- .flexlayout__splitter_handle_vert {
142
- width: 30px;
143
- height: 3px;
144
- }
145
- .flexlayout__splitter_extra {
146
- touch-action: none;
147
- background-color: transparent;
148
- }
149
- .flexlayout__outline_rect {
150
- position: absolute;
151
- pointer-events: none;
152
- box-sizing: border-box;
153
- border: 2px solid var(--color-drag1);
154
- background: var(--color-drag1-background);
155
- border-radius: 5px;
156
- z-index: 1000;
157
- }
158
- .flexlayout__outline_rect_edge {
159
- pointer-events: none;
160
- border: 2px solid var(--color-drag2);
161
- background: var(--color-drag2-background);
162
- border-radius: 5px;
163
- z-index: 1000;
164
- box-sizing: border-box;
165
- }
166
- .flexlayout__edge_rect {
167
- position: absolute;
168
- z-index: 1000;
169
- background-color: var(--color-edge-marker);
170
- pointer-events: none;
171
- display: flex;
172
- align-items: center;
173
- justify-content: center;
174
- }
175
- .flexlayout__drag_rect {
176
- color: var(--color-drag-rect);
177
- background-color: var(--color-drag-rect-background);
178
- border: 2px solid var(--color-drag-rect-border);
179
- border-radius: 5px;
180
- box-sizing: border-box;
181
- display: flex;
182
- justify-content: center;
183
- flex-direction: column;
184
- overflow: hidden;
185
- padding: 0.3em 0.8em;
186
- word-wrap: break-word;
187
- font-size: var(--font-size);
188
- font-family: var(--font-family);
189
- }
190
- .flexlayout__row {
191
- display: flex;
192
- flex-basis: 0px;
193
- min-width: 0;
194
- min-height: 0;
195
- position: relative;
196
- box-sizing: border-box;
197
- overflow: hidden;
198
- }
199
- .flexlayout__tabset {
200
- display: flex;
201
- flex-direction: column;
202
- position: relative;
203
- background-color: var(--color-tabset-background);
204
- box-sizing: border-box;
205
- font-family: var(--font-family);
206
- overflow: hidden;
207
- flex-grow: 1;
208
- }
209
- .flexlayout__tabset_container {
210
- display: flex;
211
- flex-basis: 0px;
212
- min-width: 0;
213
- min-height: 0;
214
- flex-direction: column;
215
- overflow: hidden;
216
- flex-grow: 1;
217
- }
218
- .flexlayout__tabset_tab_divider {
219
- width: 4px;
220
- width: 1px;
221
- margin: 4px 6px 4px 6px;
222
- border-left: 1px solid #ddd;
223
- }
224
- .flexlayout__tabset_content {
225
- display: flex;
226
- flex-basis: 0px;
227
- min-width: 0;
228
- min-height: 0;
229
- flex-grow: 1;
230
- box-sizing: border-box;
231
- position: relative;
232
- }
233
- .flexlayout__tabset_header {
234
- display: flex;
235
- align-items: center;
236
- padding: 3px 3px 3px 5px;
237
- box-sizing: border-box;
238
- border-bottom: 1px solid var(--color-tabset-divider-line);
239
- color: var(--color-tabset-header);
240
- background-color: var(--color-tabset-header-background);
241
- font-size: var(--font-size);
242
- }
243
- .flexlayout__tabset_header_content {
244
- flex-grow: 1;
245
- }
246
- .flexlayout__tabset_tabbar_outer {
247
- box-sizing: border-box;
248
- background-color: var(--color-tabset-background);
249
- overflow: hidden;
250
- display: flex;
251
- font-size: var(--font-size);
252
- }
253
- .flexlayout__tabset_tabbar_outer_top {
254
- padding: 0px 2px 0px 2px;
255
- border-bottom: 1px solid var(--color-tabset-divider-line);
256
- }
257
- .flexlayout__tabset_tabbar_outer_bottom {
258
- padding: 0px 2px 0px 2px;
259
- border-top: 1px solid var(--color-tabset-divider-line);
260
- }
261
- .flexlayout__tabset_tabbar_inner {
262
- position: relative;
263
- box-sizing: border-box;
264
- display: flex;
265
- flex-grow: 1;
266
- overflow: hidden;
267
- }
268
- .flexlayout__tabset_tabbar_inner_tab_container {
269
- position: relative;
270
- display: flex;
271
- padding-left: 4px;
272
- padding-right: 4px;
273
- box-sizing: border-box;
274
- white-space: nowrap;
275
- }
276
- .flexlayout__tabset_tabbar_inner_tab_container_top {
277
- border-top: 2px solid transparent;
278
- }
279
- .flexlayout__tabset_tabbar_inner_tab_container_bottom {
280
- border-bottom: 2px solid transparent;
281
- }
282
- .flexlayout__tabset-selected {
283
- background-color: var(--color-tabset-background-selected);
284
- }
285
- .flexlayout__tabset-maximized {
286
- background-color: var(--color-tabset-background-maximized);
287
- }
288
- .flexlayout__tab_button_stamp {
289
- display: inline-flex;
290
- align-items: center;
291
- gap: 0.3em;
292
- white-space: nowrap;
293
- box-sizing: border-box;
294
- }
295
- .flexlayout__tab {
296
- overflow: hidden;
297
- box-sizing: border-box;
298
- background-color: var(--color-tab-content);
299
- color: var(--color-text);
300
- position: relative;
301
- }
302
- .flexlayout__tab_moveable {
303
- position: relative;
304
- height: 100%;
305
- min-width: 1px;
306
- min-height: 1px;
307
- overflow: auto;
308
- box-sizing: border-box;
309
- }
310
- .flexlayout__tab_overlay {
311
- z-index: 20;
312
- position: absolute;
313
- top: 0;
314
- left: 0;
315
- right: 0;
316
- bottom: 0;
317
- background-color: rgba(0, 0, 0, 0.2392156863);
318
- }
319
- .flexlayout__tab_button {
320
- display: flex;
321
- gap: 0.3em;
322
- align-items: center;
323
- box-sizing: border-box;
324
- padding: 3px 0.5em;
325
- cursor: pointer;
326
- padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
327
- }
328
- .flexlayout__tab_button_stretch {
329
- background-color: transparent;
330
- color: var(--color-tab-selected);
331
- width: 100%;
332
- padding: 3px 0em;
333
- text-wrap: nowrap;
334
- display: flex;
335
- gap: 0.3em;
336
- align-items: center;
337
- box-sizing: border-box;
338
- cursor: pointer;
339
- }
340
- @media (hover: hover) {
341
- .flexlayout__tab_button_stretch:hover {
342
- color: var(--color-tab-selected);
343
- }
344
- }
345
- .flexlayout__tab_button--selected {
346
- background-color: var(--color-tab-selected-background);
347
- color: var(--color-tab-selected);
348
- border-bottom: var(--underline_height) solid var(--color-underline);
349
- }
350
- @media (hover: hover) {
351
- .flexlayout__tab_button:hover {
352
- color: var(--color-tab-selected);
353
- }
354
- }
355
- .flexlayout__tab_button--unselected {
356
- background-color: var(--color-tab-unselected-background);
357
- color: var(--color-tab-unselected);
358
- color: gray;
359
- border-bottom: var(--underline_height) solid transparent;
360
- }
361
- .flexlayout__tab_button_leading {
362
- display: flex;
363
- }
364
- .flexlayout__tab_button_content {
365
- display: flex;
366
- text-wrap: nowrap;
367
- }
368
- .flexlayout__tab_button_textbox {
369
- border: none;
370
- font-family: var(--font-family);
371
- font-size: var(--font-size);
372
- color: var(--color-tab-textbox);
373
- background-color: var(--color-tab-textbox-background);
374
- border: 1px inset var(--color-1);
375
- border-radius: 3px;
376
- width: 10em;
377
- }
378
- .flexlayout__tab_button_textbox:focus {
379
- outline: none;
380
- }
381
- .flexlayout__tab_button_trailing {
382
- display: flex;
383
- visibility: hidden;
384
- border-radius: 4px;
385
- }
386
- .flexlayout__tab_button_trailing:hover {
387
- background-color: var(--color-3);
388
- }
389
- @media (hover: hover) {
390
- .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
391
- visibility: visible;
392
- }
393
- }
394
- .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
395
- visibility: visible;
396
- }
397
- .flexlayout__tab_button_overflow {
398
- display: flex;
399
- align-items: center;
400
- border: none;
401
- color: var(--color-overflow);
402
- font-size: inherit;
403
- background-color: transparent;
404
- width: 2em;
405
- overflow: hidden;
406
- }
407
- .flexlayout__tab_toolbar {
408
- display: flex;
409
- align-items: center;
410
- gap: 0.3em;
411
- padding-left: 0.5em;
412
- padding-right: 0.3em;
413
- }
414
- .flexlayout__tab_toolbar_icon {
415
- border: none;
416
- outline: none;
417
- font-size: inherit;
418
- margin: 0px;
419
- background-color: transparent;
420
- padding: 1px;
421
- }
422
- .flexlayout__tab_toolbar_button {
423
- border: none;
424
- outline: none;
425
- font-size: inherit;
426
- margin: 0px;
427
- background-color: transparent;
428
- border-radius: 4px;
429
- padding: 1px;
430
- }
431
- @media (hover: hover) {
432
- .flexlayout__tab_toolbar_button:hover {
433
- background-color: var(--color-2);
434
- }
435
- }
436
- .flexlayout__tab_toolbar_sticky_buttons_container {
437
- display: flex;
438
- gap: 0.3em;
439
- padding-left: 5px;
440
- align-items: center;
441
- }
442
- .flexlayout__tab_floating {
443
- overflow: auto;
444
- position: absolute;
445
- box-sizing: border-box;
446
- color: var(--color-text);
447
- background-color: var(--color-background);
448
- display: flex;
449
- justify-content: center;
450
- align-items: center;
451
- }
452
- .flexlayout__tab_floating_inner {
453
- overflow: auto;
454
- display: flex;
455
- flex-direction: column;
456
- justify-content: center;
457
- align-items: center;
458
- }
459
- .flexlayout__tab_floating_inner div {
460
- margin-bottom: 5px;
461
- text-align: center;
462
- }
463
- .flexlayout__tab_floating_inner div a {
464
- color: royalblue;
465
- }
466
- .flexlayout__border {
467
- box-sizing: border-box;
468
- overflow: hidden;
469
- display: flex;
470
- font-size: var(--font-size);
471
- font-family: var(--font-family);
472
- color: var(--color-border);
473
- background-color: var(--color-border-background);
474
- }
475
- .flexlayout__border_tab_contents {
476
- box-sizing: border-box;
477
- overflow: hidden;
478
- background-color: var(--color-border-tab-content);
479
- }
480
- .flexlayout__border_top {
481
- border-bottom: 1px solid var(--color-border-divider-line);
482
- align-items: center;
483
- }
484
- .flexlayout__border_bottom {
485
- border-top: 1px solid var(--color-border-divider-line);
486
- align-items: center;
487
- }
488
- .flexlayout__border_left {
489
- border-right: 1px solid var(--color-border-divider-line);
490
- align-content: center;
491
- flex-direction: column;
492
- }
493
- .flexlayout__border_right {
494
- border-left: 1px solid var(--color-border-divider-line);
495
- align-content: center;
496
- flex-direction: column;
497
- }
498
- .flexlayout__border_inner {
499
- position: relative;
500
- box-sizing: border-box;
501
- align-items: center;
502
- display: flex;
503
- overflow: hidden;
504
- flex-grow: 1;
505
- }
506
- .flexlayout__border_inner_tab_container {
507
- white-space: nowrap;
508
- display: flex;
509
- padding-left: 2px;
510
- padding-right: 2px;
511
- box-sizing: border-box;
512
- position: absolute;
513
- }
514
- .flexlayout__border_inner_tab_container_right {
515
- transform-origin: top left;
516
- transform: rotate(90deg);
517
- }
518
- .flexlayout__border_inner_tab_container_left {
519
- flex-direction: row-reverse;
520
- transform-origin: top right;
521
- transform: rotate(-90deg);
522
- }
523
- .flexlayout__border_tab_divider {
524
- width: 4px;
525
- width: 1px;
526
- margin: 4px 6px 4px 6px;
527
- border-left: 1px solid #ddd;
528
- }
529
- .flexlayout__border_button {
530
- display: flex;
531
- gap: 0.3em;
532
- align-items: center;
533
- cursor: pointer;
534
- padding: 3px 0.5em;
535
- margin: 2px 0px;
536
- box-sizing: border-box;
537
- white-space: nowrap;
538
- padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
539
- }
540
- .flexlayout__border_button--selected {
541
- background-color: var(--color-border-tab-selected-background);
542
- color: var(--color-border-tab-selected);
543
- border-bottom: var(--underline_height) solid var(--color-underline);
544
- }
545
- @media (hover: hover) {
546
- .flexlayout__border_button:hover {
547
- background-color: var(--color-border-tab-selected-background);
548
- color: var(--color-border-tab-selected);
549
- border-bottom: var(--underline_height) solid var(--color-underline-hover);
550
- }
551
- }
552
- .flexlayout__border_button--unselected {
553
- background-color: var(--color-border-tab-unselected-background);
554
- color: var(--color-border-tab-unselected);
555
- border-bottom: var(--underline_height) solid transparent;
556
- }
557
- .flexlayout__border_button_leading {
558
- display: flex;
559
- }
560
- .flexlayout__border_button_content {
561
- display: flex;
562
- }
563
- .flexlayout__border_button_trailing {
564
- display: flex;
565
- border-radius: 4px;
566
- visibility: hidden;
567
- }
568
- .flexlayout__border_button_trailing:hover {
569
- background-color: var(--color-3);
570
- }
571
- @media (hover: hover) {
572
- .flexlayout__border_button:hover .flexlayout__border_button_trailing {
573
- visibility: visible;
574
- }
575
- }
576
- .flexlayout__border_button--selected .flexlayout__border_button_trailing {
577
- visibility: visible;
578
- }
579
- .flexlayout__border_toolbar {
580
- display: flex;
581
- gap: 0.3em;
582
- align-items: center;
583
- }
584
- .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
585
- flex-direction: column;
586
- padding-top: 0.5em;
587
- padding-bottom: 0.3em;
588
- }
589
- .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
590
- padding-left: 0.5em;
591
- padding-right: 0.3em;
592
- }
593
- .flexlayout__border_toolbar_button {
594
- border: none;
595
- outline: none;
596
- font-size: inherit;
597
- background-color: transparent;
598
- border-radius: 4px;
599
- padding: 1px;
600
- }
601
- @media (hover: hover) {
602
- .flexlayout__border_toolbar_button:hover {
603
- background-color: var(--color-2);
604
- }
605
- }
606
- .flexlayout__border_toolbar_button_overflow {
607
- display: flex;
608
- align-items: center;
609
- border: none;
610
- color: var(--color-overflow);
611
- font-size: inherit;
612
- background-color: transparent;
613
- width: 2em;
614
- }
615
- .flexlayout__popup_menu {
616
- font-size: var(--font-size);
617
- font-family: var(--font-family);
618
- }
619
- .flexlayout__popup_menu_item {
620
- padding: 2px 0.5em;
621
- white-space: nowrap;
622
- cursor: pointer;
623
- border-radius: 2px;
624
- }
625
- @media (hover: hover) {
626
- .flexlayout__popup_menu_item:hover {
627
- background-color: var(--color-6);
628
- }
629
- }
630
- .flexlayout__popup_menu_container {
631
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
632
- border: 1px solid var(--color-popup-border);
633
- color: var(--color-popup-unselected);
634
- background: var(--color-popup-unselected-background);
635
- border-radius: 3px;
636
- position: absolute;
637
- z-index: 1000;
638
- max-height: 50%;
639
- min-width: 100px;
640
- overflow: auto;
641
- padding: 2px;
642
- }
643
- .flexlayout__floating_window _body {
644
- height: 100%;
645
- }
646
- .flexlayout__floating_window_content {
647
- left: 0;
648
- top: 0;
649
- right: 0;
650
- bottom: 0;
651
- position: absolute;
652
- }
653
- .flexlayout__error_boundary_container {
654
- left: 0;
655
- top: 0;
656
- right: 0;
657
- bottom: 0;
658
- position: absolute;
659
- display: flex;
660
- justify-content: center;
661
- }
662
- .flexlayout__error_boundary_content {
663
- display: flex;
664
- align-items: center;
665
- }
666
- .flexlayout__tabset_sizer {
667
- padding-top: 5px;
668
- padding-bottom: 3px;
669
- font-size: var(--font-size);
670
- font-family: var(--font-family);
671
- }
672
- .flexlayout__tabset_header_sizer {
673
- padding-top: 3px;
674
- padding-bottom: 3px;
675
- font-size: var(--font-size);
676
- font-family: var(--font-family);
677
- }
678
- .flexlayout__border_sizer {
679
- position: absolute;
680
- top: -30000px;
681
- padding-top: 6px;
682
- padding-bottom: 5px;
683
- font-size: var(--font-size);
684
- font-family: var(--font-family);
685
- }
686
- .flexlayout__mini_scrollbar::-webkit-scrollbar {
687
- width: 3px;
688
- height: 3px;
689
- }
690
- .flexlayout__mini_scrollbar_hidden::-webkit-scrollbar {
691
- display: none;
692
- }
693
- .flexlayout__mini_scrollbar::-webkit-scrollbar-button {
694
- display: none;
695
- }
696
- .flexlayout__mini_scrollbar::-webkit-scrollbar-thumb {
697
- background: #aaa;
698
- border-radius: 10px;
699
- }
700
-
701
- .flexlayout__tab_button_textbox {
702
- border: none;
703
- }
704
-
705
- /*# sourceMappingURL=underline.css.map */
1
+ .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: rgb(249.9, 249.9, 249.9);
6
+ --color-2: rgb(244.902, 244.902, 244.902);
7
+ --color-3: rgb(237.55494, 237.55494, 237.55494);
8
+ --color-4: rgb(230.4282918, 230.4282918, 230.4282918);
9
+ --color-5: rgb(223.515443046, 223.515443046, 223.515443046);
10
+ --color-6: rgb(216.8099797546, 216.8099797546, 216.8099797546);
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-tab-content: var(--color-background);
26
+ --color-border-background: var(--color-background);
27
+ --color-border-divider-line: var(--color-3);
28
+ --color-tab-content: var(--color-background);
29
+ --color-tab-selected: var(--color-text);
30
+ --color-tab-selected-background: transparent;
31
+ --color-tab-unselected: gray;
32
+ --color-tab-unselected-background: transparent;
33
+ --color-tab-textbox: var(--color-text);
34
+ --color-tab-textbox-background: var(--color-3);
35
+ --color-border-tab-selected: var(--color-text);
36
+ --color-border-tab-selected-background: transparent;
37
+ --color-border-tab-unselected: gray;
38
+ --color-border-tab-unselected-background: transparent;
39
+ --color-splitter: var(--color-1);
40
+ --color-splitter-hover: var(--color-4);
41
+ --color-splitter-drag: var(--color-4);
42
+ --color-drag-rect-border: var(--color-6);
43
+ --color-drag-rect-background: var(--color-4);
44
+ --color-drag-rect: var(--color-text);
45
+ --color-popup-border: var(--color-6);
46
+ --color-popup-unselected: var(--color-text);
47
+ --color-popup-unselected-background: white;
48
+ --color-popup-selected: var(--color-text);
49
+ --color-popup-selected-background: var(--color-3);
50
+ --color-edge-marker: #aaa;
51
+ --color-edge-icon: #555;
52
+ --color-underline: rgb(65, 105, 225);
53
+ --color-underline-hover: #aaa;
54
+ --underline_height: 3px;
55
+ --color-mini-scroll-indicator:rgba(128, 128, 128, 0.5);
56
+ --color-mini-scroll-indicator-hovered:rgba(128, 128, 128, 0.7);
57
+ --size-mini-scroll-indicator:4px;
58
+ }
59
+
60
+ .flexlayout__layout {
61
+ left: 0;
62
+ top: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+ position: absolute;
66
+ display: flex;
67
+ }
68
+ .flexlayout__layout_overlay {
69
+ left: 0;
70
+ top: 0;
71
+ right: 0;
72
+ bottom: 0;
73
+ position: absolute;
74
+ z-index: 1000;
75
+ }
76
+ .flexlayout__layout_tab_stamps {
77
+ position: absolute;
78
+ top: -10000px;
79
+ z-index: 100;
80
+ display: flex;
81
+ flex-direction: column;
82
+ align-items: start;
83
+ }
84
+ .flexlayout__layout_moveables {
85
+ visibility: hidden;
86
+ position: absolute;
87
+ width: 100px;
88
+ height: 100px;
89
+ top: -20000px;
90
+ }
91
+ .flexlayout__layout_main {
92
+ display: flex;
93
+ flex-basis: 0px;
94
+ min-width: 0;
95
+ min-height: 0;
96
+ flex-grow: 1;
97
+ position: relative;
98
+ }
99
+ .flexlayout__layout_border_container {
100
+ display: flex;
101
+ flex-basis: 0px;
102
+ min-width: 0;
103
+ min-height: 0;
104
+ flex-grow: 1;
105
+ }
106
+ .flexlayout__layout_border_container_inner {
107
+ display: flex;
108
+ flex-basis: 0px;
109
+ min-width: 0;
110
+ min-height: 0;
111
+ flex-grow: 1;
112
+ }
113
+ .flexlayout__splitter {
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ background-color: var(--color-splitter);
118
+ touch-action: none;
119
+ z-index: 10;
120
+ }
121
+ @media (hover: hover) {
122
+ .flexlayout__splitter:hover {
123
+ background-color: var(--color-splitter-hover);
124
+ transition: background-color ease-in 0.1s;
125
+ transition-delay: 0.05s;
126
+ }
127
+ }
128
+ .flexlayout__splitter_drag {
129
+ position: absolute;
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ z-index: 1000;
134
+ background-color: var(--color-splitter-drag);
135
+ }
136
+ .flexlayout__splitter_handle {
137
+ background-color: #ccc;
138
+ border-radius: 3px;
139
+ }
140
+ .flexlayout__splitter_handle_horz {
141
+ width: 3px;
142
+ height: 30px;
143
+ }
144
+ .flexlayout__splitter_handle_vert {
145
+ width: 30px;
146
+ height: 3px;
147
+ }
148
+ .flexlayout__splitter_extra {
149
+ touch-action: none;
150
+ background-color: transparent;
151
+ }
152
+ .flexlayout__outline_rect {
153
+ position: absolute;
154
+ pointer-events: none;
155
+ box-sizing: border-box;
156
+ border: 2px solid var(--color-drag1);
157
+ background: var(--color-drag1-background);
158
+ border-radius: 5px;
159
+ z-index: 1000;
160
+ }
161
+ .flexlayout__outline_rect_edge {
162
+ pointer-events: none;
163
+ border: 2px solid var(--color-drag2);
164
+ background: var(--color-drag2-background);
165
+ border-radius: 5px;
166
+ z-index: 1000;
167
+ box-sizing: border-box;
168
+ }
169
+ .flexlayout__edge_rect {
170
+ position: absolute;
171
+ z-index: 1000;
172
+ background-color: var(--color-edge-marker);
173
+ pointer-events: none;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ }
178
+ .flexlayout__drag_rect {
179
+ color: var(--color-drag-rect);
180
+ background-color: var(--color-drag-rect-background);
181
+ border: 2px solid var(--color-drag-rect-border);
182
+ border-radius: 5px;
183
+ box-sizing: border-box;
184
+ display: flex;
185
+ justify-content: center;
186
+ flex-direction: column;
187
+ overflow: hidden;
188
+ padding: 0.3em 0.8em;
189
+ word-wrap: break-word;
190
+ font-size: var(--font-size);
191
+ font-family: var(--font-family);
192
+ }
193
+ .flexlayout__row {
194
+ display: flex;
195
+ flex-basis: 0px;
196
+ min-width: 0;
197
+ min-height: 0;
198
+ position: relative;
199
+ box-sizing: border-box;
200
+ overflow: hidden;
201
+ }
202
+ .flexlayout__tabset {
203
+ display: flex;
204
+ flex-direction: column;
205
+ position: relative;
206
+ background-color: var(--color-tabset-background);
207
+ box-sizing: border-box;
208
+ font-family: var(--font-family);
209
+ overflow: hidden;
210
+ flex-grow: 1;
211
+ }
212
+ .flexlayout__tabset_container {
213
+ display: flex;
214
+ flex-basis: 0px;
215
+ min-width: 0;
216
+ min-height: 0;
217
+ flex-direction: column;
218
+ overflow: hidden;
219
+ flex-grow: 1;
220
+ }
221
+ .flexlayout__tabset_tab_divider {
222
+ width: 4px;
223
+ width: 1px;
224
+ margin: 4px 6px 4px 6px;
225
+ border-left: 1px solid #ddd;
226
+ }
227
+ .flexlayout__tabset_content {
228
+ display: flex;
229
+ flex-basis: 0px;
230
+ min-width: 0;
231
+ min-height: 0;
232
+ flex-grow: 1;
233
+ box-sizing: border-box;
234
+ position: relative;
235
+ }
236
+ .flexlayout__tabset_header {
237
+ display: flex;
238
+ align-items: center;
239
+ padding: 3px 3px 3px 5px;
240
+ box-sizing: border-box;
241
+ border-bottom: 1px solid var(--color-tabset-divider-line);
242
+ color: var(--color-tabset-header);
243
+ background-color: var(--color-tabset-header-background);
244
+ font-size: var(--font-size);
245
+ }
246
+ .flexlayout__tabset_header_content {
247
+ flex-grow: 1;
248
+ }
249
+ .flexlayout__tabset_tabbar_outer {
250
+ box-sizing: border-box;
251
+ background-color: var(--color-tabset-background);
252
+ overflow: hidden;
253
+ display: flex;
254
+ font-size: var(--font-size);
255
+ }
256
+ .flexlayout__tabset_tabbar_outer_top {
257
+ padding: 0px 2px 0px 2px;
258
+ border-bottom: 1px solid var(--color-tabset-divider-line);
259
+ }
260
+ .flexlayout__tabset_tabbar_outer_bottom {
261
+ padding: 0px 2px 0px 2px;
262
+ border-top: 1px solid var(--color-tabset-divider-line);
263
+ }
264
+ .flexlayout__tabset_tabbar_inner {
265
+ position: relative;
266
+ box-sizing: border-box;
267
+ display: flex;
268
+ flex-grow: 1;
269
+ scrollbar-width: none;
270
+ }
271
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
272
+ display: none;
273
+ }
274
+ .flexlayout__tabset_tabbar_inner_tab_container {
275
+ position: relative;
276
+ display: flex;
277
+ padding-left: 4px;
278
+ padding-right: 4px;
279
+ box-sizing: border-box;
280
+ white-space: nowrap;
281
+ }
282
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
283
+ border-top: 2px solid transparent;
284
+ }
285
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
286
+ border-bottom: 2px solid transparent;
287
+ }
288
+ .flexlayout__tabset-selected {
289
+ background-color: var(--color-tabset-background-selected);
290
+ }
291
+ .flexlayout__tabset-maximized {
292
+ background-color: var(--color-tabset-background-maximized);
293
+ }
294
+ .flexlayout__tab_button_stamp {
295
+ display: inline-flex;
296
+ align-items: center;
297
+ gap: 0.3em;
298
+ white-space: nowrap;
299
+ box-sizing: border-box;
300
+ }
301
+ .flexlayout__tab {
302
+ overflow: hidden;
303
+ box-sizing: border-box;
304
+ background-color: var(--color-tab-content);
305
+ color: var(--color-text);
306
+ position: relative;
307
+ }
308
+ .flexlayout__tab_moveable {
309
+ position: relative;
310
+ height: 100%;
311
+ min-width: 1px;
312
+ min-height: 1px;
313
+ overflow: auto;
314
+ box-sizing: border-box;
315
+ }
316
+ .flexlayout__tab_overlay {
317
+ z-index: 20;
318
+ position: absolute;
319
+ top: 0;
320
+ left: 0;
321
+ right: 0;
322
+ bottom: 0;
323
+ background-color: rgba(0, 0, 0, 0.2392156863);
324
+ }
325
+ .flexlayout__tab_button {
326
+ display: flex;
327
+ gap: 0.3em;
328
+ align-items: center;
329
+ box-sizing: border-box;
330
+ padding: 3px 0.5em;
331
+ cursor: pointer;
332
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
333
+ }
334
+ .flexlayout__tab_button_stretch {
335
+ background-color: transparent;
336
+ color: var(--color-tab-selected);
337
+ width: 100%;
338
+ padding: 3px 0em;
339
+ text-wrap: nowrap;
340
+ display: flex;
341
+ gap: 0.3em;
342
+ align-items: center;
343
+ box-sizing: border-box;
344
+ cursor: pointer;
345
+ }
346
+ @media (hover: hover) {
347
+ .flexlayout__tab_button_stretch:hover {
348
+ color: var(--color-tab-selected);
349
+ }
350
+ }
351
+ .flexlayout__tab_button--selected {
352
+ background-color: var(--color-tab-selected-background);
353
+ color: var(--color-tab-selected);
354
+ border-bottom: var(--underline_height) solid var(--color-underline);
355
+ }
356
+ @media (hover: hover) {
357
+ .flexlayout__tab_button:hover {
358
+ color: var(--color-tab-selected);
359
+ }
360
+ }
361
+ .flexlayout__tab_button--unselected {
362
+ background-color: var(--color-tab-unselected-background);
363
+ color: var(--color-tab-unselected);
364
+ color: gray;
365
+ border-bottom: var(--underline_height) solid transparent;
366
+ }
367
+ .flexlayout__tab_button_leading {
368
+ display: flex;
369
+ }
370
+ .flexlayout__tab_button_content {
371
+ display: flex;
372
+ text-wrap: nowrap;
373
+ }
374
+ .flexlayout__tab_button_textbox {
375
+ border: none;
376
+ font-family: var(--font-family);
377
+ font-size: var(--font-size);
378
+ color: var(--color-tab-textbox);
379
+ background-color: var(--color-tab-textbox-background);
380
+ border: 1px inset var(--color-1);
381
+ border-radius: 3px;
382
+ width: 10em;
383
+ }
384
+ .flexlayout__tab_button_textbox:focus {
385
+ outline: none;
386
+ }
387
+ .flexlayout__tab_button_trailing {
388
+ display: flex;
389
+ visibility: hidden;
390
+ border-radius: 4px;
391
+ }
392
+ .flexlayout__tab_button_trailing:hover {
393
+ background-color: var(--color-3);
394
+ }
395
+ @media (hover: hover) {
396
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
397
+ visibility: visible;
398
+ }
399
+ }
400
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
401
+ visibility: visible;
402
+ }
403
+ .flexlayout__tab_button_overflow {
404
+ display: flex;
405
+ align-items: center;
406
+ border: none;
407
+ color: var(--color-overflow);
408
+ font-size: inherit;
409
+ background-color: transparent;
410
+ width: 2em;
411
+ overflow: hidden;
412
+ }
413
+ .flexlayout__tab_toolbar {
414
+ display: flex;
415
+ align-items: center;
416
+ gap: 0.3em;
417
+ padding-left: 0.5em;
418
+ padding-right: 0.3em;
419
+ }
420
+ .flexlayout__tab_toolbar_icon {
421
+ border: none;
422
+ outline: none;
423
+ font-size: inherit;
424
+ margin: 0px;
425
+ background-color: transparent;
426
+ padding: 1px;
427
+ }
428
+ .flexlayout__tab_toolbar_button {
429
+ border: none;
430
+ outline: none;
431
+ font-size: inherit;
432
+ margin: 0px;
433
+ background-color: transparent;
434
+ border-radius: 4px;
435
+ padding: 1px;
436
+ }
437
+ @media (hover: hover) {
438
+ .flexlayout__tab_toolbar_button:hover {
439
+ background-color: var(--color-2);
440
+ }
441
+ }
442
+ .flexlayout__tab_toolbar_sticky_buttons_container {
443
+ display: flex;
444
+ gap: 0.3em;
445
+ padding-left: 5px;
446
+ align-items: center;
447
+ }
448
+ .flexlayout__tab_floating {
449
+ overflow: auto;
450
+ position: absolute;
451
+ box-sizing: border-box;
452
+ color: var(--color-text);
453
+ background-color: var(--color-background);
454
+ display: flex;
455
+ justify-content: center;
456
+ align-items: center;
457
+ }
458
+ .flexlayout__tab_floating_inner {
459
+ overflow: auto;
460
+ display: flex;
461
+ flex-direction: column;
462
+ justify-content: center;
463
+ align-items: center;
464
+ }
465
+ .flexlayout__tab_floating_inner div {
466
+ margin-bottom: 5px;
467
+ text-align: center;
468
+ }
469
+ .flexlayout__tab_floating_inner div a {
470
+ color: royalblue;
471
+ }
472
+ .flexlayout__border {
473
+ box-sizing: border-box;
474
+ overflow: hidden;
475
+ display: flex;
476
+ font-size: var(--font-size);
477
+ font-family: var(--font-family);
478
+ color: var(--color-border);
479
+ background-color: var(--color-border-background);
480
+ }
481
+ .flexlayout__border_tab_contents {
482
+ box-sizing: border-box;
483
+ overflow: hidden;
484
+ background-color: var(--color-border-tab-content);
485
+ }
486
+ .flexlayout__border_top {
487
+ border-bottom: 1px solid var(--color-border-divider-line);
488
+ align-items: center;
489
+ }
490
+ .flexlayout__border_bottom {
491
+ border-top: 1px solid var(--color-border-divider-line);
492
+ align-items: center;
493
+ }
494
+ .flexlayout__border_left {
495
+ border-right: 1px solid var(--color-border-divider-line);
496
+ align-content: center;
497
+ flex-direction: column;
498
+ }
499
+ .flexlayout__border_right {
500
+ border-left: 1px solid var(--color-border-divider-line);
501
+ align-content: center;
502
+ flex-direction: column;
503
+ }
504
+ .flexlayout__border_inner {
505
+ position: relative;
506
+ box-sizing: border-box;
507
+ align-items: center;
508
+ display: flex;
509
+ flex-grow: 1;
510
+ scrollbar-width: none;
511
+ }
512
+ .flexlayout__border_inner::-webkit-scrollbar {
513
+ display: none;
514
+ }
515
+ .flexlayout__border_inner_tab_container {
516
+ white-space: nowrap;
517
+ display: flex;
518
+ padding-left: 2px;
519
+ padding-right: 2px;
520
+ box-sizing: border-box;
521
+ position: absolute;
522
+ }
523
+ .flexlayout__border_inner_tab_container_right {
524
+ transform-origin: top left;
525
+ transform: rotate(90deg);
526
+ }
527
+ .flexlayout__border_inner_tab_container_left {
528
+ flex-direction: row-reverse;
529
+ transform-origin: top right;
530
+ transform: rotate(-90deg);
531
+ }
532
+ .flexlayout__border_tab_divider {
533
+ width: 4px;
534
+ width: 1px;
535
+ margin: 4px 6px 4px 6px;
536
+ border-left: 1px solid #ddd;
537
+ }
538
+ .flexlayout__border_button {
539
+ display: flex;
540
+ gap: 0.3em;
541
+ align-items: center;
542
+ cursor: pointer;
543
+ padding: 3px 0.5em;
544
+ margin: 2px 0px;
545
+ box-sizing: border-box;
546
+ white-space: nowrap;
547
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
548
+ }
549
+ .flexlayout__border_button--selected {
550
+ background-color: var(--color-border-tab-selected-background);
551
+ color: var(--color-border-tab-selected);
552
+ border-bottom: var(--underline_height) solid var(--color-underline);
553
+ }
554
+ @media (hover: hover) {
555
+ .flexlayout__border_button:hover {
556
+ background-color: var(--color-border-tab-selected-background);
557
+ color: var(--color-border-tab-selected);
558
+ border-bottom: var(--underline_height) solid var(--color-underline-hover);
559
+ }
560
+ }
561
+ .flexlayout__border_button--unselected {
562
+ background-color: var(--color-border-tab-unselected-background);
563
+ color: var(--color-border-tab-unselected);
564
+ border-bottom: var(--underline_height) solid transparent;
565
+ }
566
+ .flexlayout__border_button_leading {
567
+ display: flex;
568
+ }
569
+ .flexlayout__border_button_content {
570
+ display: flex;
571
+ }
572
+ .flexlayout__border_button_trailing {
573
+ display: flex;
574
+ border-radius: 4px;
575
+ visibility: hidden;
576
+ }
577
+ .flexlayout__border_button_trailing:hover {
578
+ background-color: var(--color-3);
579
+ }
580
+ @media (hover: hover) {
581
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
582
+ visibility: visible;
583
+ }
584
+ }
585
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
586
+ visibility: visible;
587
+ }
588
+ .flexlayout__border_toolbar {
589
+ display: flex;
590
+ gap: 0.3em;
591
+ align-items: center;
592
+ }
593
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
594
+ flex-direction: column;
595
+ padding-top: 0.5em;
596
+ padding-bottom: 0.3em;
597
+ }
598
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
599
+ padding-left: 0.5em;
600
+ padding-right: 0.3em;
601
+ }
602
+ .flexlayout__border_toolbar_button {
603
+ border: none;
604
+ outline: none;
605
+ font-size: inherit;
606
+ background-color: transparent;
607
+ border-radius: 4px;
608
+ padding: 1px;
609
+ }
610
+ @media (hover: hover) {
611
+ .flexlayout__border_toolbar_button:hover {
612
+ background-color: var(--color-2);
613
+ }
614
+ }
615
+ .flexlayout__border_toolbar_button_overflow {
616
+ display: flex;
617
+ align-items: center;
618
+ border: none;
619
+ color: var(--color-overflow);
620
+ font-size: inherit;
621
+ background-color: transparent;
622
+ width: 1.5em;
623
+ }
624
+ .flexlayout__popup_menu {
625
+ font-size: var(--font-size);
626
+ font-family: var(--font-family);
627
+ }
628
+ .flexlayout__popup_menu_item {
629
+ padding: 2px 0.5em;
630
+ white-space: nowrap;
631
+ cursor: pointer;
632
+ border-radius: 2px;
633
+ }
634
+ .flexlayout__popup_menu_item--selected {
635
+ font-weight: 500;
636
+ background-color: var(--color-tab-selected-background);
637
+ color: var(--color-tab-selected);
638
+ }
639
+ @media (hover: hover) {
640
+ .flexlayout__popup_menu_item:hover {
641
+ background-color: var(--color-6);
642
+ }
643
+ }
644
+ .flexlayout__popup_menu_container {
645
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
646
+ border: 1px solid var(--color-popup-border);
647
+ color: var(--color-popup-unselected);
648
+ background: var(--color-popup-unselected-background);
649
+ border-radius: 3px;
650
+ position: absolute;
651
+ z-index: 1000;
652
+ max-height: 50%;
653
+ min-width: 100px;
654
+ overflow: auto;
655
+ padding: 2px;
656
+ }
657
+ .flexlayout__floating_window _body {
658
+ height: 100%;
659
+ }
660
+ .flexlayout__floating_window_content {
661
+ left: 0;
662
+ top: 0;
663
+ right: 0;
664
+ bottom: 0;
665
+ position: absolute;
666
+ }
667
+ .flexlayout__error_boundary_container {
668
+ left: 0;
669
+ top: 0;
670
+ right: 0;
671
+ bottom: 0;
672
+ position: absolute;
673
+ display: flex;
674
+ justify-content: center;
675
+ }
676
+ .flexlayout__error_boundary_content {
677
+ display: flex;
678
+ align-items: center;
679
+ }
680
+ .flexlayout__tabset_sizer {
681
+ padding-top: 5px;
682
+ padding-bottom: 3px;
683
+ font-size: var(--font-size);
684
+ font-family: var(--font-family);
685
+ }
686
+ .flexlayout__tabset_header_sizer {
687
+ padding-top: 3px;
688
+ padding-bottom: 3px;
689
+ font-size: var(--font-size);
690
+ font-family: var(--font-family);
691
+ }
692
+ .flexlayout__border_sizer {
693
+ position: absolute;
694
+ top: -30000px;
695
+ padding-top: 6px;
696
+ padding-bottom: 5px;
697
+ font-size: var(--font-size);
698
+ font-family: var(--font-family);
699
+ }
700
+ .flexlayout__mini_scrollbar {
701
+ position: absolute;
702
+ background-color: var(--color-mini-scroll-indicator);
703
+ border-radius: 5px;
704
+ width: var(--size-mini-scroll-indicator);
705
+ height: var(--size-mini-scroll-indicator);
706
+ visibility: hidden;
707
+ opacity: 0;
708
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
709
+ }
710
+ .flexlayout__mini_scrollbar:hover {
711
+ background-color: var(--color-mini-scroll-indicator-hovered);
712
+ transition: background-color 0.3s ease-in-out;
713
+ }
714
+ .flexlayout__mini_scrollbar_container {
715
+ position: relative;
716
+ display: flex;
717
+ flex-grow: 1;
718
+ overflow: hidden;
719
+ }
720
+ @media (hover: hover) {
721
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
722
+ opacity: 1;
723
+ visibility: visible;
724
+ }
725
+ }
726
+
727
+ .flexlayout__tab_button_textbox {
728
+ border: none;
729
+ }
730
+
731
+ /*# sourceMappingURL=underline.css.map */