flexlayout-react 0.6.5 → 0.6.8

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 (38) hide show
  1. package/ChangeLog.txt +9 -0
  2. package/README.md +1 -0
  3. package/declarations/Types.d.ts +3 -0
  4. package/declarations/view/Layout.d.ts +3 -0
  5. package/dist/flexlayout.js +6 -6
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/AttributeDefinitions.js +6 -1
  8. package/lib/AttributeDefinitions.js.map +1 -1
  9. package/lib/Types.js +3 -0
  10. package/lib/Types.js.map +1 -1
  11. package/lib/view/BorderTabSet.js +1 -0
  12. package/lib/view/BorderTabSet.js.map +1 -1
  13. package/lib/view/Layout.js +4 -0
  14. package/lib/view/Layout.js.map +1 -1
  15. package/lib/view/TabFloating.js +6 -0
  16. package/lib/view/TabFloating.js.map +1 -1
  17. package/lib/view/TabSet.js +23 -10
  18. package/lib/view/TabSet.js.map +1 -1
  19. package/package.json +3 -3
  20. package/src/AttributeDefinitions.ts +5 -1
  21. package/src/Types.ts +3 -0
  22. package/src/view/BorderTabSet.tsx +4 -0
  23. package/src/view/Layout.tsx +9 -0
  24. package/src/view/TabFloating.tsx +9 -0
  25. package/src/view/TabSet.tsx +24 -10
  26. package/style/_base.scss +63 -49
  27. package/style/dark.css +91 -49
  28. package/style/dark.css.map +1 -1
  29. package/style/dark.scss +66 -21
  30. package/style/gray.css +91 -66
  31. package/style/gray.css.map +1 -1
  32. package/style/gray.scss +70 -24
  33. package/style/light.css +91 -51
  34. package/style/light.css.map +1 -1
  35. package/style/light.scss +68 -19
  36. package/style/underline.css +559 -0
  37. package/style/underline.css.map +1 -0
  38. package/style/underline.scss +172 -0
package/src/view/TabSet.tsx CHANGED
@@ -141,8 +141,10 @@ export const TabSet = (props: ITabSetProps) => {
141
141
  iconFactory={iconFactory}
142
142
  titleFactory={titleFactory}
143
143
  icons={icons}
144
- />
145
- );
144
+ />);
145
+ tabs.push(
146
+ <div key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER)}></div>
147
+ );
146
148
  }
147
149
  }
148
150
 
@@ -327,12 +329,6 @@ export const TabSet = (props: ITabSetProps) => {
327
329
  }
328
330
 
329
331
  const tabStripStyle: { [key: string]: string } = { height: node.getTabStripHeight() + "px" };
330
- if (node.getTabLocation() === "top") {
331
- const top = showHeader ? node.getHeaderHeight() + "px" : "0px";
332
- tabStripStyle["top"] = top;
333
- } else {
334
- tabStripStyle["bottom"] = "0px";
335
- }
336
332
  tabStrip = (
337
333
  <div className={tabStripClasses} style={tabStripStyle}
338
334
  data-layout-path={path + "/tabstrip"}
@@ -355,6 +351,25 @@ export const TabSet = (props: ITabSetProps) => {
355
351
 
356
352
  style = layout.styleFont(style);
357
353
 
354
+ var placeHolder: React.ReactNode = undefined;
355
+ if (node.getChildren().length === 0) {
356
+ const placeHolderCallback = layout.getTabSetPlaceHolderCallback();
357
+ if (placeHolderCallback) {
358
+ placeHolder = placeHolderCallback(node);
359
+ }
360
+ }
361
+
362
+ const center = <div className={cm(CLASSES.FLEXLAYOUT__TABSET_CONTENT)}>
363
+ {placeHolder}
364
+ </div>
365
+
366
+ var content;
367
+ if (node.getTabLocation() === "top") {
368
+ content = <>{header}{tabStrip}{center}</>;
369
+ } else {
370
+ content = <>{header}{center}{tabStrip}</>;
371
+ }
372
+
358
373
  return (
359
374
  <div ref={selfRef}
360
375
  dir="ltr"
@@ -362,8 +377,7 @@ export const TabSet = (props: ITabSetProps) => {
362
377
  style={style}
363
378
  className={cm(CLASSES.FLEXLAYOUT__TABSET)}
364
379
  onWheel={onMouseWheel}>
365
- {header}
366
- {tabStrip}
380
+ {content}
367
381
  </div>
368
382
  );
369
383
  };
package/style/_base.scss CHANGED
@@ -8,32 +8,17 @@
8
8
 
9
9
  .flexlayout {
10
10
  &__layout {
11
- --color-text: #{$color_text};
12
- --color-background: #{$color_background};
13
- --color-base: #{$color_base};
14
- --color-1: #{$color_1};
15
- --color-2: #{$color_2};
16
- --color-3: #{$color_3};
17
- --color-4: #{$color_4};
18
- --color-5: #{$color_5};
19
- --color-6: #{$color_6};
20
- --color-drag1: #{$color_drag1};
21
- --color-drag2: #{$color_drag2};
22
- --color-drag1-background: #{$color_drag1_background};
23
- --color-drag2-background: #{$color_drag2_background};
24
-
25
- --font-size: #{$font-size};
26
- --font-family: #{$font-family};
27
-
28
11
  @include absoluteFill;
29
12
  overflow: hidden;
30
13
  }
31
14
 
32
15
  &__splitter {
16
+ background-color: var(--color-splitter);
33
17
  @include splitter_mixin;
34
18
 
35
19
  @media (hover: hover) {
36
20
  &:hover {
21
+ background-color: var(--color-splitter-hover);
37
22
  transition: background-color ease-in .1s;
38
23
  transition-delay: 0.05s;
39
24
  @include splitter_hover_mixin;
@@ -45,6 +30,7 @@
45
30
  }
46
31
  &_drag {
47
32
  z-index: 1000;
33
+ background-color: var(--color-splitter-drag);
48
34
  @include splitter_drag_mixin;
49
35
  }
50
36
  &_extra {
@@ -75,17 +61,17 @@
75
61
  position: absolute;
76
62
  z-index: 1000;
77
63
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
78
- background-color: gray;
64
+ background-color: var(--color-edge-marker);
79
65
  pointer-events: none;
80
66
  }
81
67
 
82
68
  &__drag_rect {
83
69
  position: absolute;
84
70
  cursor: move;
85
- color: var(--color-text);
86
- background-color: var(--color-1);
87
- border: 2px solid var(--color-4);
88
- box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
71
+ color: var(--color-drag-rect);
72
+ background-color: var(--color-drag-rect-background);
73
+ border: 2px solid var(--color-drag-rect-border);
74
+ // box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
89
75
  border-radius: 5px;
90
76
  z-index: 1000;
91
77
  box-sizing: border-box;
@@ -96,31 +82,43 @@
96
82
  justify-content: center;
97
83
  flex-direction: column;
98
84
  overflow: hidden;
99
- padding: 0.5em 1em;
85
+ padding: 0.3em 1em;
100
86
  word-wrap: break-word;
101
87
  font-size: var(--font-size);
102
88
  font-family: var(--font-family);
103
89
  }
104
90
 
105
91
  &__tabset {
92
+ display: flex;
93
+ flex-direction: column;
106
94
  overflow: hidden;
107
- background-color: var(--color-1);
95
+ background-color: var(--color-tabset-background);
108
96
  box-sizing: border-box;
109
97
  font-size: var(--font-size);
110
98
  font-family: var(--font-family);
111
99
  @include tabset_mixin;
112
100
 
101
+ &_tab_divider {
102
+ width: 4px;
103
+ @include tabset_tab_divider_mixin;
104
+ }
105
+
106
+ &_content {
107
+ display: flex;
108
+ flex-grow: 1;
109
+ align-items: center;
110
+ justify-content: center;
111
+ }
112
+
113
113
  &_header {
114
114
  // tabset header bar
115
- position: absolute;
116
115
  display: flex;
117
116
  align-items: center;
118
- left: 0;
119
- right: 0;
120
117
  padding: 3px 3px 3px 5px;
121
118
  box-sizing: border-box;
122
- border-bottom: 1px solid var(--color-3);
123
- color: var(--color-text);
119
+ border-bottom: 1px solid var(--color-tabset-divider-line);
120
+ color: var(--color-tabset-header);
121
+ background-color: var(--color-tabset-header-background);
124
122
  @include tabset_header_mixin;
125
123
 
126
124
  &_content {
@@ -132,21 +130,18 @@
132
130
  &_outer {
133
131
  // tabset tabbar outer
134
132
  box-sizing: border-box;
135
- background-color: var(--color-1);
136
- position: absolute;
137
- left: 0;
138
- right: 0;
133
+ background-color: var(--color-tabset-background);
139
134
  overflow: hidden;
140
135
  display: flex;
141
136
  @include tabset_tabbar_mixin;
142
137
  }
143
138
 
144
139
  &_outer_top {
145
- border-bottom: 1px solid var(--color-3);
140
+ border-bottom: 1px solid var(--color-tabset-divider-line);
146
141
  }
147
142
 
148
143
  &_outer_bottom {
149
- border-top: 1px solid var(--color-3);
144
+ border-top: 1px solid var(--color-tabset-divider-line);
150
145
  }
151
146
 
152
147
  &_inner {
@@ -159,7 +154,6 @@
159
154
 
160
155
  &_tab_container {
161
156
  display: flex;
162
- gap: 4px;
163
157
  padding-left: 4px;
164
158
  padding-right: 4px;
165
159
  box-sizing: border-box;
@@ -179,10 +173,12 @@
179
173
  }
180
174
 
181
175
  &-selected {
176
+ background-color: var(--color-tabset-background-selected);
182
177
  @include tabset_selected_mixin;
183
178
  }
184
179
 
185
180
  &-maximized {
181
+ background-color: var(--color-tabset-background-maximized);
186
182
  @include tabset_maximized_mixin;
187
183
  }
188
184
  }
@@ -199,8 +195,8 @@
199
195
  overflow: auto;
200
196
  position: absolute;
201
197
  box-sizing: border-box;
202
- color: var(--color-text);
203
198
  background-color: var(--color-background);
199
+ color: var(--color-text);
204
200
 
205
201
  &_button {
206
202
  display: flex;
@@ -213,15 +209,21 @@
213
209
  @include tab_button_mixin;
214
210
 
215
211
  &--selected {
212
+ background-color:var(--color-tab-selected-background);
213
+ color:var(--color-tab-selected);
216
214
  @include tab_button_selected_mixin;
217
215
  }
218
216
  @media (hover: hover) {
219
217
  &:hover {
218
+ background-color:var(--color-tab-selected-background);
219
+ color:var(--color-tab-selected);
220
220
  @include tab_button_hovered_mixin;
221
221
  }
222
222
  }
223
223
 
224
224
  &--unselected {
225
+ background-color:var(--color-tab-unselected-background);
226
+ color:var(--color-tab-unselected);
225
227
  @include tab_button_unselected_mixin;
226
228
  }
227
229
 
@@ -245,8 +247,8 @@
245
247
  border: none;
246
248
  font-family: var(--font-family);
247
249
  font-size: var(--font-size);
248
- color: var(--color-text);
249
- background-color: var(--color-5);
250
+ color: var(--color-tab-textbox);
251
+ background-color: var(--color-tab-textbox-background);
250
252
  border: 1px inset var(--color-1);
251
253
  border-radius: 3px;
252
254
  width: 10em;
@@ -282,7 +284,7 @@
282
284
  display: flex;
283
285
  align-items: center;
284
286
  border: none;
285
- color: gray;
287
+ color: var(--color-overflow);
286
288
  font-size: inherit;
287
289
  background-color: transparent;
288
290
  }
@@ -365,26 +367,28 @@
365
367
  display: flex;
366
368
  font-size: var(--font-size);
367
369
  font-family: var(--font-family);
370
+ color: var(--color-border);
371
+ background-color: var(--color-border-background);
368
372
  @include border_mixin;
369
373
 
370
374
  &_top {
371
- border-bottom: 1px solid var(--color-3);
375
+ border-bottom: 1px solid var(--color-border-divider-line);
372
376
  align-items: center;
373
377
  }
374
378
 
375
379
  &_bottom {
376
- border-top: 1px solid var(--color-3);
380
+ border-top: 1px solid var(--color-border-divider-line);
377
381
  align-items: center;
378
382
  }
379
383
 
380
384
  &_left {
381
- border-right: 1px solid var(--color-3);
385
+ border-right: 1px solid var(--color-border-divider-line);
382
386
  align-content: center;
383
387
  flex-direction: column;
384
388
  }
385
389
 
386
390
  &_right {
387
- border-left: 1px solid var(--color-3);
391
+ border-left: 1px solid var(--color-border-divider-line);
388
392
  align-content: center;
389
393
  flex-direction: column;
390
394
  }
@@ -399,7 +403,6 @@
399
403
  &_tab_container {
400
404
  white-space: nowrap;
401
405
  display: flex;
402
- gap: 4px;
403
406
  padding-left: 2px;
404
407
  padding-right: 2px;
405
408
  box-sizing: border-box;
@@ -420,6 +423,11 @@
420
423
  }
421
424
  }
422
425
 
426
+ &_tab_divider {
427
+ width: 4px;
428
+ @include border_tab_divider_mixin;
429
+ }
430
+
423
431
  &_button {
424
432
  display: flex;
425
433
  gap: 0.3em;
@@ -432,15 +440,21 @@
432
440
  @include border_button_mixin;
433
441
 
434
442
  &--selected {
443
+ background-color: var(--color-border-tab-selected-background);
444
+ color: var(--color-border-tab-selected);
435
445
  @include border_button_selected_mixin;
436
446
  }
437
447
  @media (hover: hover) {
438
448
  &:hover {
449
+ background-color: var(--color-border-tab-selected-background);
450
+ color: var(--color-border-tab-selected);
439
451
  @include border_button_hovered_mixin;
440
452
  }
441
453
  }
442
454
 
443
455
  &--unselected {
456
+ background-color: var(--color-border-tab-unselected-background);
457
+ color: var(--color-border-tab-unselected);
444
458
  @include border_button_unselected_mixin;
445
459
  }
446
460
 
@@ -513,7 +527,7 @@
513
527
  display: flex;
514
528
  align-items: center;
515
529
  border: none;
516
- color: gray;
530
+ color: var(--color-overflow);
517
531
  font-size: inherit;
518
532
  background-color: transparent;
519
533
  }
@@ -548,9 +562,9 @@
548
562
 
549
563
  &_container {
550
564
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
551
- border: 1px solid var(--color-6);
552
- color: var(--color-text);
553
- background: var(--color-background);
565
+ border: 1px solid var(--color-popup-border);
566
+ color: var(--color-popup-unselected);
567
+ background: var(--color-popup-unselected-background);
554
568
  border-radius: 3px;
555
569
  position: absolute;
556
570
  z-index: 1000;
package/style/dark.css CHANGED
@@ -14,6 +14,40 @@
14
14
  --color-drag2-background: rgba(128, 128, 128, 0.15);
15
15
  --font-size: medium;
16
16
  --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: gray;
18
+ --color-tabset-background: var(--color-1);
19
+ --color-tabset-background-selected: var(--color-1);
20
+ --color-tabset-background-maximized: var(--color-6);
21
+ --color-tabset-divider-line: var(--color-4);
22
+ --color-tabset-header-background: var(--color-1);
23
+ --color-tabset-header: var(--color-text);
24
+ --color-border-background: var(--color-1);
25
+ --color-border-divider-line: var(--color-4);
26
+ --color-tab-selected: var(--color-text);
27
+ --color-tab-selected-background: var(--color-4);
28
+ --color-tab-unselected: gray;
29
+ --color-tab-unselected-background: transparent;
30
+ --color-tab-textbox: var(--color-text);
31
+ --color-tab-textbox-background: var(--color-3);
32
+ --color-border-tab-selected: var(--color-text);
33
+ --color-border-tab-selected-background: var(--color-4);
34
+ --color-border-tab-unselected: gray;
35
+ --color-border-tab-unselected-background: var(--color-2);
36
+ --color-splitter: var(--color-2);
37
+ --color-splitter-hover: var(--color-4);
38
+ --color-splitter-drag: var(--color-5);
39
+ --color-drag-rect-border: var(--color-4);
40
+ --color-drag-rect-background: var(--color-1);
41
+ --color-drag-rect: var(--color-text);
42
+ --color-popup-border: var(--color-6);
43
+ --color-popup-unselected: var(--color-text);
44
+ --color-popup-unselected-background: black;
45
+ --color-popup-selected: var(--color-text);
46
+ --color-popup-selected-background: var(--color-4);
47
+ --color-edge-marker: gray;
48
+ }
49
+
50
+ .flexlayout__layout {
17
51
  left: 0;
18
52
  top: 0;
19
53
  right: 0;
@@ -22,13 +56,13 @@
22
56
  overflow: hidden;
23
57
  }
24
58
  .flexlayout__splitter {
25
- background-color: var(--color-2);
59
+ background-color: var(--color-splitter);
26
60
  }
27
61
  @media (hover: hover) {
28
62
  .flexlayout__splitter:hover {
63
+ background-color: var(--color-splitter-hover);
29
64
  transition: background-color ease-in 0.1s;
30
65
  transition-delay: 0.05s;
31
- background-color: var(--color-4);
32
66
  }
33
67
  }
34
68
  .flexlayout__splitter_border {
@@ -36,8 +70,8 @@
36
70
  }
37
71
  .flexlayout__splitter_drag {
38
72
  z-index: 1000;
73
+ background-color: var(--color-splitter-drag);
39
74
  border-radius: 5px;
40
- background-color: var(--color-5);
41
75
  }
42
76
  .flexlayout__splitter_extra {
43
77
  background-color: transparent;
@@ -63,16 +97,15 @@
63
97
  position: absolute;
64
98
  z-index: 1000;
65
99
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
66
- background-color: gray;
100
+ background-color: var(--color-edge-marker);
67
101
  pointer-events: none;
68
102
  }
69
103
  .flexlayout__drag_rect {
70
104
  position: absolute;
71
105
  cursor: move;
72
- color: var(--color-text);
73
- background-color: var(--color-1);
74
- border: 2px solid var(--color-4);
75
- box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
106
+ color: var(--color-drag-rect);
107
+ background-color: var(--color-drag-rect-background);
108
+ border: 2px solid var(--color-drag-rect-border);
76
109
  border-radius: 5px;
77
110
  z-index: 1000;
78
111
  box-sizing: border-box;
@@ -82,30 +115,37 @@
82
115
  justify-content: center;
83
116
  flex-direction: column;
84
117
  overflow: hidden;
85
- padding: 0.5em 1em;
118
+ padding: 0.3em 1em;
86
119
  word-wrap: break-word;
87
120
  font-size: var(--font-size);
88
121
  font-family: var(--font-family);
89
122
  }
90
123
  .flexlayout__tabset {
124
+ display: flex;
125
+ flex-direction: column;
91
126
  overflow: hidden;
92
- background-color: var(--color-1);
127
+ background-color: var(--color-tabset-background);
93
128
  box-sizing: border-box;
94
129
  font-size: var(--font-size);
95
130
  font-family: var(--font-family);
96
- background-color: var(--color-1);
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;
97
140
  }
98
141
  .flexlayout__tabset_header {
99
- position: absolute;
100
142
  display: flex;
101
143
  align-items: center;
102
- left: 0;
103
- right: 0;
104
144
  padding: 3px 3px 3px 5px;
105
145
  box-sizing: border-box;
106
- border-bottom: 1px solid var(--color-3);
107
- color: var(--color-text);
108
- background-color: var(--color-1);
146
+ border-bottom: 1px solid var(--color-tabset-divider-line);
147
+ color: var(--color-tabset-header);
148
+ background-color: var(--color-tabset-header-background);
109
149
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
110
150
  }
111
151
  .flexlayout__tabset_header_content {
@@ -113,19 +153,15 @@
113
153
  }
114
154
  .flexlayout__tabset_tabbar_outer {
115
155
  box-sizing: border-box;
116
- background-color: var(--color-1);
117
- position: absolute;
118
- left: 0;
119
- right: 0;
156
+ background-color: var(--color-tabset-background);
120
157
  overflow: hidden;
121
158
  display: flex;
122
- background-color: var(--color-1);
123
159
  }
124
160
  .flexlayout__tabset_tabbar_outer_top {
125
- border-bottom: 1px solid var(--color-3);
161
+ border-bottom: 1px solid var(--color-tabset-divider-line);
126
162
  }
127
163
  .flexlayout__tabset_tabbar_outer_bottom {
128
- border-top: 1px solid var(--color-3);
164
+ border-top: 1px solid var(--color-tabset-divider-line);
129
165
  }
130
166
  .flexlayout__tabset_tabbar_inner {
131
167
  position: relative;
@@ -136,7 +172,6 @@
136
172
  }
137
173
  .flexlayout__tabset_tabbar_inner_tab_container {
138
174
  display: flex;
139
- gap: 4px;
140
175
  padding-left: 4px;
141
176
  padding-right: 4px;
142
177
  box-sizing: border-box;
@@ -152,9 +187,11 @@
152
187
  border-bottom: 2px solid transparent;
153
188
  }
154
189
  .flexlayout__tabset-selected {
190
+ background-color: var(--color-tabset-background-selected);
155
191
  background-image: linear-gradient(var(--color-background), var(--color-4));
156
192
  }
157
193
  .flexlayout__tabset-maximized {
194
+ background-color: var(--color-tabset-background-maximized);
158
195
  background-image: linear-gradient(var(--color-6), var(--color-2));
159
196
  }
160
197
  .flexlayout__tab_button_stamp {
@@ -168,8 +205,8 @@
168
205
  overflow: auto;
169
206
  position: absolute;
170
207
  box-sizing: border-box;
171
- color: var(--color-text);
172
208
  background-color: var(--color-background);
209
+ color: var(--color-text);
173
210
  }
174
211
  .flexlayout__tab_button {
175
212
  display: flex;
@@ -180,17 +217,18 @@
180
217
  cursor: pointer;
181
218
  }
182
219
  .flexlayout__tab_button--selected {
183
- background-color: var(--color-4);
184
- color: var(--color-text);
220
+ background-color: var(--color-tab-selected-background);
221
+ color: var(--color-tab-selected);
185
222
  }
186
223
  @media (hover: hover) {
187
224
  .flexlayout__tab_button:hover {
188
- background-color: var(--color-4);
189
- color: var(--color-text);
225
+ background-color: var(--color-tab-selected-background);
226
+ color: var(--color-tab-selected);
190
227
  }
191
228
  }
192
229
  .flexlayout__tab_button--unselected {
193
- color: gray;
230
+ background-color: var(--color-tab-unselected-background);
231
+ color: var(--color-tab-unselected);
194
232
  }
195
233
  .flexlayout__tab_button_top {
196
234
  box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
@@ -212,8 +250,8 @@
212
250
  border: none;
213
251
  font-family: var(--font-family);
214
252
  font-size: var(--font-size);
215
- color: var(--color-text);
216
- background-color: var(--color-5);
253
+ color: var(--color-tab-textbox);
254
+ background-color: var(--color-tab-textbox-background);
217
255
  border: 1px inset var(--color-1);
218
256
  border-radius: 3px;
219
257
  width: 10em;
@@ -241,7 +279,7 @@
241
279
  display: flex;
242
280
  align-items: center;
243
281
  border: none;
244
- color: gray;
282
+ color: var(--color-overflow);
245
283
  font-size: inherit;
246
284
  background-color: transparent;
247
285
  }
@@ -302,23 +340,24 @@
302
340
  display: flex;
303
341
  font-size: var(--font-size);
304
342
  font-family: var(--font-family);
305
- background-color: var(--color-1);
343
+ color: var(--color-border);
344
+ background-color: var(--color-border-background);
306
345
  }
307
346
  .flexlayout__border_top {
308
- border-bottom: 1px solid var(--color-3);
347
+ border-bottom: 1px solid var(--color-border-divider-line);
309
348
  align-items: center;
310
349
  }
311
350
  .flexlayout__border_bottom {
312
- border-top: 1px solid var(--color-3);
351
+ border-top: 1px solid var(--color-border-divider-line);
313
352
  align-items: center;
314
353
  }
315
354
  .flexlayout__border_left {
316
- border-right: 1px solid var(--color-3);
355
+ border-right: 1px solid var(--color-border-divider-line);
317
356
  align-content: center;
318
357
  flex-direction: column;
319
358
  }
320
359
  .flexlayout__border_right {
321
- border-left: 1px solid var(--color-3);
360
+ border-left: 1px solid var(--color-border-divider-line);
322
361
  align-content: center;
323
362
  flex-direction: column;
324
363
  }
@@ -332,7 +371,6 @@
332
371
  .flexlayout__border_inner_tab_container {
333
372
  white-space: nowrap;
334
373
  display: flex;
335
- gap: 4px;
336
374
  padding-left: 2px;
337
375
  padding-right: 2px;
338
376
  box-sizing: border-box;
@@ -350,6 +388,9 @@
350
388
  transform-origin: top right;
351
389
  transform: rotate(-90deg);
352
390
  }
391
+ .flexlayout__border_tab_divider {
392
+ width: 4px;
393
+ }
353
394
  .flexlayout__border_button {
354
395
  display: flex;
355
396
  gap: 0.3em;
@@ -361,20 +402,21 @@
361
402
  white-space: nowrap;
362
403
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
363
404
  border-radius: 3px;
364
- background-color: var(--color-2);
365
405
  }
366
406
  .flexlayout__border_button--selected {
367
- background-color: var(--color-4);
368
- color: var(--color-text);
407
+ background-color: var(--color-border-tab-selected-background);
408
+ color: var(--color-border-tab-selected);
369
409
  }
370
410
  @media (hover: hover) {
371
411
  .flexlayout__border_button:hover {
412
+ background-color: var(--color-border-tab-selected-background);
413
+ color: var(--color-border-tab-selected);
372
414
  background-color: var(--color-4);
373
- color: var(--color-text);
374
415
  }
375
416
  }
376
417
  .flexlayout__border_button--unselected {
377
- color: gray;
418
+ background-color: var(--color-border-tab-unselected-background);
419
+ color: var(--color-border-tab-unselected);
378
420
  }
379
421
  .flexlayout__border_button_leading {
380
422
  display: flex;
@@ -429,7 +471,7 @@
429
471
  display: flex;
430
472
  align-items: center;
431
473
  border: none;
432
- color: gray;
474
+ color: var(--color-overflow);
433
475
  font-size: inherit;
434
476
  background-color: transparent;
435
477
  }
@@ -450,9 +492,9 @@
450
492
  }
451
493
  .flexlayout__popup_menu_container {
452
494
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
453
- border: 1px solid var(--color-6);
454
- color: var(--color-text);
455
- background: var(--color-background);
495
+ border: 1px solid var(--color-popup-border);
496
+ color: var(--color-popup-unselected);
497
+ background: var(--color-popup-unselected-background);
456
498
  border-radius: 3px;
457
499
  position: absolute;
458
500
  z-index: 1000;