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