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