flexlayout-react 0.8.4 → 0.8.6

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