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