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