flexlayout-react 0.7.14 → 0.8.0

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