@interopio/groups-ui-react 2.7.1 → 3.0.1
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.
- package/dist/cjs/defaultComponents/buttons/StandardButton.d.ts +4 -0
- package/dist/cjs/defaultComponents/hooks/useExternalWindowPopup.d.ts +2 -0
- package/dist/cjs/defaultComponents/hooks/useExternalWindowPopupClosed.d.ts +1 -0
- package/dist/cjs/defaultComponents/hooks/useExternalWindowPopupHidden.d.ts +1 -0
- package/dist/cjs/defaultComponents/hooks/useMoveResizeWindow.d.ts +2 -0
- package/dist/cjs/defaultComponents/hooks/useShowPopupWindow.d.ts +2 -0
- package/dist/cjs/defaultComponents/utils/common.d.ts +3 -0
- package/dist/cjs/defaultComponents/utils/useDragMove.d.ts +6 -0
- package/dist/cjs/index.d.ts +3 -1
- package/dist/cjs/index.js +494 -622
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/api.d.ts +38 -1
- package/dist/cjs/types/defaultComponents.d.ts +10 -1
- package/dist/cjs/types/internal.d.ts +39 -45
- package/dist/cjs/webGroupsManager.d.ts +4 -1
- package/dist/cjs/webGroupsStore.d.ts +3 -0
- package/dist/esm/defaultComponents/buttons/StandardButton.d.ts +4 -0
- package/dist/esm/defaultComponents/hooks/useExternalWindowPopup.d.ts +2 -0
- package/dist/esm/defaultComponents/hooks/useExternalWindowPopupClosed.d.ts +1 -0
- package/dist/esm/defaultComponents/hooks/useExternalWindowPopupHidden.d.ts +1 -0
- package/dist/esm/defaultComponents/hooks/useMoveResizeWindow.d.ts +2 -0
- package/dist/esm/defaultComponents/hooks/useShowPopupWindow.d.ts +2 -0
- package/dist/esm/defaultComponents/utils/common.d.ts +3 -0
- package/dist/esm/defaultComponents/utils/useDragMove.d.ts +6 -0
- package/dist/esm/index.d.ts +3 -1
- package/dist/esm/index.js +618 -765
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/api.d.ts +38 -1
- package/dist/esm/types/defaultComponents.d.ts +10 -1
- package/dist/esm/types/internal.d.ts +39 -45
- package/dist/esm/webGroupsManager.d.ts +4 -1
- package/dist/esm/webGroupsStore.d.ts +3 -0
- package/dist/styles/groups.css +195 -101
- package/dist/styles/vars.css +865 -78
- package/package.json +6 -5
package/dist/styles/groups.css
CHANGED
|
@@ -5,7 +5,13 @@
|
|
|
5
5
|
box-sizing: border-box;
|
|
6
6
|
transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
|
|
7
7
|
transition-duration: 240ms;
|
|
8
|
-
transition-property: background-color
|
|
8
|
+
transition-property: background-color;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
*::before,
|
|
12
|
+
*::after {
|
|
13
|
+
transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
|
|
14
|
+
transition-duration: 240ms;
|
|
9
15
|
}
|
|
10
16
|
|
|
11
17
|
body {
|
|
@@ -50,22 +56,10 @@ input {
|
|
|
50
56
|
overflow: hidden;
|
|
51
57
|
}
|
|
52
58
|
|
|
53
|
-
.t42-internal-caption-bar {
|
|
54
|
-
flex-direction: row;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
59
|
.t42-react-caption-bar {
|
|
58
60
|
display: flex;
|
|
59
61
|
flex-grow: 1;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
.t42-caption-bar::after {
|
|
63
|
-
position: absolute;
|
|
64
|
-
z-index: 1;
|
|
65
|
-
display: block;
|
|
66
|
-
width: 100%;
|
|
67
|
-
background-color: var(--t42-caption-separator-color);
|
|
68
|
-
content: "";
|
|
62
|
+
height: 100%;
|
|
69
63
|
}
|
|
70
64
|
|
|
71
65
|
.t42-caption {
|
|
@@ -76,19 +70,20 @@ input {
|
|
|
76
70
|
white-space: nowrap;
|
|
77
71
|
text-align: left;
|
|
78
72
|
user-select: none;
|
|
73
|
+
transition-property: color;
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
.t42-caption-editor {
|
|
82
77
|
display: inline-block;
|
|
83
|
-
min-width:
|
|
78
|
+
min-width: var(--t42-caption-editor-min-width);
|
|
84
79
|
height: var(--t42-caption-editor-height);
|
|
85
80
|
margin: var(--t42-caption-editor-margin);
|
|
86
|
-
padding:
|
|
81
|
+
padding: var(--t42-caption-editor-padding);
|
|
87
82
|
border: var(--t42-caption-editor-border);
|
|
88
|
-
border-radius: var(--
|
|
83
|
+
border-radius: var(--t42-caption-editor-border-radius);
|
|
89
84
|
overflow-x: hidden;
|
|
90
85
|
color: var(--t42-caption-editor-color);
|
|
91
|
-
font-size: var(--
|
|
86
|
+
font-size: var(--t42-caption-editor-font-size);
|
|
92
87
|
white-space: nowrap;
|
|
93
88
|
outline: 0;
|
|
94
89
|
}
|
|
@@ -97,6 +92,7 @@ input {
|
|
|
97
92
|
.t42-caption-editor.t42-frame-caption-bar-element {
|
|
98
93
|
margin: var(--t42-title-margin);
|
|
99
94
|
outline: 0;
|
|
95
|
+
--webkit-app-region: no-drag;
|
|
100
96
|
}
|
|
101
97
|
|
|
102
98
|
.t42-title {
|
|
@@ -109,7 +105,9 @@ input {
|
|
|
109
105
|
display: flex;
|
|
110
106
|
flex-grow: 1;
|
|
111
107
|
align-items: center;
|
|
108
|
+
height: 100%;
|
|
112
109
|
min-width: var(--t42-move-area-min-width);
|
|
110
|
+
-webkit-app-region: drag;
|
|
113
111
|
}
|
|
114
112
|
|
|
115
113
|
.t42-buttons-container {
|
|
@@ -117,6 +115,14 @@ input {
|
|
|
117
115
|
flex-direction: row;
|
|
118
116
|
}
|
|
119
117
|
|
|
118
|
+
.t42-external-buttons-container {
|
|
119
|
+
display: flex;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.t42-tab-bar-header-frame .t42-buttons-container {
|
|
123
|
+
padding: var(--t42-tab-buttons-container-padding);
|
|
124
|
+
}
|
|
125
|
+
|
|
120
126
|
.t42-html-buttons-container {
|
|
121
127
|
position: absolute;
|
|
122
128
|
top: var(--spacing-4);
|
|
@@ -173,6 +179,10 @@ input {
|
|
|
173
179
|
content: "";
|
|
174
180
|
}
|
|
175
181
|
|
|
182
|
+
.t42-standard-button-frame {
|
|
183
|
+
position: relative;
|
|
184
|
+
}
|
|
185
|
+
|
|
176
186
|
.t42-standard-button-image {
|
|
177
187
|
fill: var(--t42-standard-button-color);
|
|
178
188
|
}
|
|
@@ -180,15 +190,28 @@ input {
|
|
|
180
190
|
.t42-caption-bar-button-lock,
|
|
181
191
|
.t42-caption-bar-button-unlock,
|
|
182
192
|
.t42-caption-bar-button-feedback,
|
|
193
|
+
.t42-caption-bar-button-clone,
|
|
183
194
|
.t42-caption-bar-button-sticky,
|
|
184
|
-
.t42-caption-bar-button-extract
|
|
195
|
+
.t42-caption-bar-button-extract,
|
|
196
|
+
.t42-caption-bar-button-overflow,
|
|
197
|
+
.t42-caption-bar-button-collapse,
|
|
198
|
+
.t42-caption-bar-button-expand,
|
|
199
|
+
.t42-caption-bar-button-frame-minimize,
|
|
200
|
+
.t42-caption-bar-button-frame-maximize,
|
|
201
|
+
.t42-caption-bar-button-frame-restore,
|
|
202
|
+
.t42-caption-bar-button-frame-close {
|
|
185
203
|
margin: var(--t42-tab-bar-button-margin);
|
|
186
204
|
border-radius: var(--t42-tab-bar-button-radius);
|
|
187
205
|
}
|
|
188
206
|
|
|
189
207
|
.t42-caption-bar-button-lock .t42-standard-button::before,
|
|
190
208
|
.t42-caption-bar-button-unlock .t42-standard-button::before,
|
|
191
|
-
.t42-caption-bar-button-feedback .t42-standard-button::before
|
|
209
|
+
.t42-caption-bar-button-feedback .t42-standard-button::before,
|
|
210
|
+
.t42-caption-bar-button-clone .t42-standard-button::before,
|
|
211
|
+
.t42-caption-bar-button-frame-minimize .t42-standard-button::before,
|
|
212
|
+
.t42-caption-bar-button-frame-maximize .t42-standard-button::before,
|
|
213
|
+
.t42-caption-bar-button-frame-restore .t42-standard-button::before,
|
|
214
|
+
.t42-caption-bar-button-frame-close .t42-standard-button::before {
|
|
192
215
|
font-size: var(--spacing-14);
|
|
193
216
|
}
|
|
194
217
|
|
|
@@ -196,14 +219,30 @@ input {
|
|
|
196
219
|
color: var(--t42-caption-bar-button-close-hover-text);
|
|
197
220
|
}
|
|
198
221
|
|
|
222
|
+
.t42-standard-button-collapse::before {
|
|
223
|
+
content: "\e918";
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.t42-standard-button-expand::before {
|
|
227
|
+
content: "\e90e";
|
|
228
|
+
}
|
|
229
|
+
|
|
199
230
|
.t42-standard-button-minimize::before {
|
|
200
231
|
content: "\e904";
|
|
201
232
|
}
|
|
202
233
|
|
|
234
|
+
.t42-standard-button-frame-minimize::before {
|
|
235
|
+
content: "\e965";
|
|
236
|
+
}
|
|
237
|
+
|
|
203
238
|
.t42-standard-button-maximize::before {
|
|
204
239
|
content: "\e906";
|
|
205
240
|
}
|
|
206
241
|
|
|
242
|
+
.t42-standard-button-frame-maximize::before {
|
|
243
|
+
content: "\e92a";
|
|
244
|
+
}
|
|
245
|
+
|
|
207
246
|
.t42-standard-button-close::before {
|
|
208
247
|
content: "\e908";
|
|
209
248
|
}
|
|
@@ -222,6 +261,10 @@ input {
|
|
|
222
261
|
content: "\e912";
|
|
223
262
|
}
|
|
224
263
|
|
|
264
|
+
.t42-standard-button-frame-restore::before {
|
|
265
|
+
content: "\e928";
|
|
266
|
+
}
|
|
267
|
+
|
|
225
268
|
.t42-standard-button-extract::before {
|
|
226
269
|
content: "\e924";
|
|
227
270
|
}
|
|
@@ -261,7 +304,7 @@ input {
|
|
|
261
304
|
.t42-caption-bar-button.active .t42-standard-button-sticky::before {
|
|
262
305
|
width: var(--spacing-16);
|
|
263
306
|
height: var(--spacing-16);
|
|
264
|
-
line-height: var(--
|
|
307
|
+
line-height: var(--spacing-16);
|
|
265
308
|
content: var(--sticky-icon-on);
|
|
266
309
|
}
|
|
267
310
|
|
|
@@ -275,8 +318,34 @@ input {
|
|
|
275
318
|
content: "\e902";
|
|
276
319
|
}
|
|
277
320
|
|
|
321
|
+
.t42-caption-bar-container {
|
|
322
|
+
position: relative;
|
|
323
|
+
display: flex;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.t42-caption-bar-container::after {
|
|
327
|
+
position: absolute;
|
|
328
|
+
z-index: 1;
|
|
329
|
+
display: block;
|
|
330
|
+
bottom: 0;
|
|
331
|
+
width: 100%;
|
|
332
|
+
background-color: var(--t42-caption-separator-color);
|
|
333
|
+
content: "";
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.t42-group-caption-bar-container::after {
|
|
337
|
+
height: var(--t42-group-caption-separator-size);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.t42-frame-caption-bar-container::after {
|
|
341
|
+
height: var(--t42-frame-caption-separator-size);
|
|
342
|
+
}
|
|
343
|
+
|
|
278
344
|
.t42-group-caption-bar {
|
|
279
|
-
|
|
345
|
+
flex-direction: row;
|
|
346
|
+
align-items: center;
|
|
347
|
+
width: 100%;
|
|
348
|
+
height: var(--t42-group-caption-height);
|
|
280
349
|
}
|
|
281
350
|
|
|
282
351
|
.t42-group-caption-bar-element {
|
|
@@ -287,14 +356,10 @@ input {
|
|
|
287
356
|
outline: 0;
|
|
288
357
|
}
|
|
289
358
|
|
|
290
|
-
.t42-group-caption-bar::after {
|
|
291
|
-
bottom: 0;
|
|
292
|
-
height: var(--t42-group-caption-separator-size);
|
|
293
|
-
}
|
|
294
359
|
|
|
295
360
|
.t42-group-caption-bar-button {
|
|
296
|
-
width: var(--t42-group-caption-
|
|
297
|
-
height: var(--t42-group-caption-height);
|
|
361
|
+
width: var(--t42-group-caption-button-width);
|
|
362
|
+
height: var(--t42-group-caption-button-height);
|
|
298
363
|
}
|
|
299
364
|
|
|
300
365
|
.t42-frame {
|
|
@@ -320,12 +385,14 @@ input {
|
|
|
320
385
|
}
|
|
321
386
|
|
|
322
387
|
.t42-frame-caption-bar {
|
|
323
|
-
|
|
388
|
+
flex-direction: row;
|
|
389
|
+
align-items: center;
|
|
390
|
+
width: 100%;
|
|
391
|
+
height: var(--t42-frame-caption-bar-height);
|
|
324
392
|
}
|
|
325
393
|
|
|
326
|
-
.t42-frame-caption-bar
|
|
327
|
-
|
|
328
|
-
height: var(--t42-frame-caption-separator-size);
|
|
394
|
+
.t42-frame-caption-bar-frame .t42-buttons-container {
|
|
395
|
+
padding: var(--t42-flat-buttons-container-padding);
|
|
329
396
|
}
|
|
330
397
|
|
|
331
398
|
.t42-frame-caption-bar-element {
|
|
@@ -398,6 +465,8 @@ input {
|
|
|
398
465
|
}
|
|
399
466
|
|
|
400
467
|
.t42-tab-bar-header {
|
|
468
|
+
--t42-caption-bar-button-height: var(--t42-tab-bar-height);
|
|
469
|
+
|
|
401
470
|
position: relative;
|
|
402
471
|
display: flex;
|
|
403
472
|
flex-direction: row;
|
|
@@ -424,6 +493,7 @@ input {
|
|
|
424
493
|
}
|
|
425
494
|
|
|
426
495
|
.t42-caption-bar-button:hover {
|
|
496
|
+
color: var(--t42-standard-button-hover-color);
|
|
427
497
|
background-color: var(--t42-caption-bar-button-hover-background);
|
|
428
498
|
}
|
|
429
499
|
|
|
@@ -434,14 +504,27 @@ input {
|
|
|
434
504
|
.t42-caption-bar-button-maximize,
|
|
435
505
|
.t42-caption-bar-button-minimize,
|
|
436
506
|
.t42-caption-bar-button-restore,
|
|
437
|
-
.t42-caption-bar-button-clone,
|
|
438
507
|
.t42-caption-bar-button-close {
|
|
439
508
|
width: var(--t42-caption-bar-button-width);
|
|
440
|
-
height: var(--t42-
|
|
509
|
+
height: var(--t42-caption-bar-button-height);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.t42-caption-bar-button-frame-maximize,
|
|
513
|
+
.t42-caption-bar-button-frame-minimize,
|
|
514
|
+
.t42-caption-bar-button-frame-restore,
|
|
515
|
+
.t42-caption-bar-button-frame-close {
|
|
516
|
+
--t42-caption-bar-button-close-hover-background: var(--t42-caption-bar-button-hover-background);
|
|
517
|
+
--t42-caption-bar-button-close-hover-text: var(--text-states-active);
|
|
518
|
+
width: var(--t42-tab-bar-button-size);
|
|
519
|
+
height: var(--t42-tab-bar-button-size);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.t42-caption-bar-button-frame {
|
|
523
|
+
position: relative;
|
|
441
524
|
}
|
|
442
525
|
|
|
443
526
|
.t42-tabs,
|
|
444
|
-
.t42-tabs-pinned {
|
|
527
|
+
.t42-tabs-pinned:not(:empty) {
|
|
445
528
|
position: relative;
|
|
446
529
|
display: flex;
|
|
447
530
|
flex-direction: row;
|
|
@@ -473,9 +556,7 @@ input {
|
|
|
473
556
|
height: var(--t42-tab-bar-tab-height);
|
|
474
557
|
margin: var(--t42-tab-bar-tab-margin);
|
|
475
558
|
padding: var(--t42-tab-bar-tab-padding);
|
|
476
|
-
border-radius: var(--
|
|
477
|
-
border-top-left-radius: var(--spacing-4);
|
|
478
|
-
border-top-right-radius: var(--spacing-4);
|
|
559
|
+
border-radius: var(--t42-tab-bar-tab-border-radius);
|
|
479
560
|
background-color: var(--t42-tab-bar-tab-background);
|
|
480
561
|
container-type: size;
|
|
481
562
|
container-name: normal-tabs;
|
|
@@ -503,14 +584,10 @@ input {
|
|
|
503
584
|
content: none;
|
|
504
585
|
}
|
|
505
586
|
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
} */
|
|
511
|
-
|
|
512
|
-
.t42-tab:hover .t42-tab-caption {
|
|
513
|
-
color: var(--t42-caption-text-hover-color);
|
|
587
|
+
.t42-tab:hover {
|
|
588
|
+
--t42-tab-bar-background: var(--t42-tab-bar-tab-background-hover);
|
|
589
|
+
--t42-tab-bar-tab-text: var(--t42-caption-text-hover-color);
|
|
590
|
+
background-color: var(--t42-tab-bar-tab-background-hover);
|
|
514
591
|
}
|
|
515
592
|
|
|
516
593
|
.t42-tab-channel-selector {
|
|
@@ -526,13 +603,12 @@ input {
|
|
|
526
603
|
.t42-tab-caption {
|
|
527
604
|
flex-grow: 1;
|
|
528
605
|
color: var(--t42-tab-bar-tab-text);
|
|
529
|
-
mask-image:
|
|
606
|
+
mask-image: var(--t42-caption-text-fade-effect);
|
|
530
607
|
}
|
|
531
608
|
|
|
532
609
|
.t42-tab-caption-editor {
|
|
533
610
|
min-width: unset;
|
|
534
611
|
mask-image: none;
|
|
535
|
-
height: var(--spacing-12);
|
|
536
612
|
}
|
|
537
613
|
|
|
538
614
|
.t42-tab-caption-editor:focus-visible {
|
|
@@ -548,12 +624,12 @@ input {
|
|
|
548
624
|
display: flex;
|
|
549
625
|
align-items: center;
|
|
550
626
|
justify-content: center;
|
|
551
|
-
width:
|
|
552
|
-
height:
|
|
553
|
-
border-radius:
|
|
627
|
+
width: var(--t42-tab-bar-tab-close-button-content-width);
|
|
628
|
+
height: var(--t42-tab-bar-tab-close-button-content-height);
|
|
629
|
+
border-radius: var(--t42-tab-bar-tab-close-button-content-border-radius);
|
|
554
630
|
background-color: var(--t42-tab-bar-tab-close-button-background);
|
|
555
|
-
transition-duration:
|
|
556
|
-
transition-property:
|
|
631
|
+
transition-duration: var(--t42-tab-bar-tab-close-button-transition-duration);
|
|
632
|
+
transition-property: all;
|
|
557
633
|
}
|
|
558
634
|
|
|
559
635
|
.t42-tab-close-button-content svg {
|
|
@@ -570,6 +646,10 @@ input {
|
|
|
570
646
|
background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
|
|
571
647
|
}
|
|
572
648
|
|
|
649
|
+
.t42-tab-close-button-content:hover::before {
|
|
650
|
+
color: var(--t42-tab-bar-tab-text-hover);
|
|
651
|
+
}
|
|
652
|
+
|
|
573
653
|
.t42-tab-close-button-content:hover .t42-standard-button-image {
|
|
574
654
|
fill: var(--t42-tab-bar-tab-text-hover);
|
|
575
655
|
}
|
|
@@ -578,21 +658,19 @@ input {
|
|
|
578
658
|
background-color: var(--t42-tab-bar-selected-tab-background);
|
|
579
659
|
}
|
|
580
660
|
|
|
661
|
+
.t42-selected-tab:hover {
|
|
662
|
+
--t42-tab-bar-background: var(--t42-tab-bar-selected-tab-background);
|
|
663
|
+
--t42-tab-bar-tab-text: var(--t42-tab-bar-selected-tab-text);
|
|
664
|
+
--t42-tab-bar-tab-background-hover: var(--t42-tab-bar-selected-tab-background);
|
|
665
|
+
}
|
|
666
|
+
|
|
581
667
|
.t42-selected-tab::before,
|
|
582
668
|
.t42-selected-tab + .t42-tab::before {
|
|
583
|
-
opacity:
|
|
669
|
+
opacity: var(--t42-tab-bar-tab-selected-separator-opacity);
|
|
584
670
|
}
|
|
585
671
|
|
|
586
|
-
.t42-selected-tab
|
|
587
|
-
position: absolute;
|
|
588
|
-
bottom: 0;
|
|
589
|
-
left: 0;
|
|
590
|
-
z-index: 10;
|
|
591
|
-
display: block;
|
|
592
|
-
width: calc(100% - var(--t42-tab-bar-tab-separator-size));
|
|
593
|
-
height: var(--t42-tab-bar-tab-selected-separator-size);
|
|
672
|
+
.t42-selected-tab::before {
|
|
594
673
|
background-color: var(--t42-tab-bar-tab-selected-separator-color);
|
|
595
|
-
content: "";
|
|
596
674
|
}
|
|
597
675
|
|
|
598
676
|
.t42-selected-tab-caption {
|
|
@@ -619,13 +697,13 @@ input {
|
|
|
619
697
|
.t42-channel-selector-content-light,
|
|
620
698
|
.t42-channel-selector-content-light::before,
|
|
621
699
|
.t42-channel-selector-content-light i::before {
|
|
622
|
-
color:
|
|
700
|
+
color: var(--t42-frame-channel-icon-color-white);
|
|
623
701
|
}
|
|
624
702
|
|
|
625
703
|
.t42-channel-selector-content-dark,
|
|
626
704
|
.t42-channel-selector-content-dark::before,
|
|
627
705
|
.t42-channel-selector-content-dark i::before {
|
|
628
|
-
color:
|
|
706
|
+
color: var(--t42-frame-channel-icon-color-black);
|
|
629
707
|
}
|
|
630
708
|
|
|
631
709
|
@keyframes approaching-edge-animation {
|
|
@@ -683,6 +761,7 @@ input {
|
|
|
683
761
|
|
|
684
762
|
.t42-sizing-border-group:hover {
|
|
685
763
|
background-color: var(--t42-hover-sizing-border-group-color);
|
|
764
|
+
z-index: 150;
|
|
686
765
|
}
|
|
687
766
|
|
|
688
767
|
.t42-active-sizing-border-group {
|
|
@@ -738,6 +817,11 @@ input {
|
|
|
738
817
|
}
|
|
739
818
|
}
|
|
740
819
|
|
|
820
|
+
.loader-container {
|
|
821
|
+
display: flex;
|
|
822
|
+
flex-grow: 1;
|
|
823
|
+
}
|
|
824
|
+
|
|
741
825
|
.loader-wrapper {
|
|
742
826
|
display: flex;
|
|
743
827
|
flex-direction: column;
|
|
@@ -803,8 +887,6 @@ input {
|
|
|
803
887
|
|
|
804
888
|
@container normal-tabs (max-width: 50px) {
|
|
805
889
|
.t42-tab-channel-selector {
|
|
806
|
-
--t42-tab-bar-tab-channels-height:0;
|
|
807
|
-
--t42-tab-bar-tab-channels-width: 0;
|
|
808
890
|
--t42-tab-bar-tab-channels-margin: 0;
|
|
809
891
|
}
|
|
810
892
|
}
|
|
@@ -827,7 +909,7 @@ input {
|
|
|
827
909
|
}
|
|
828
910
|
|
|
829
911
|
.t42-tabs-overflow .t42-tab {
|
|
830
|
-
min-width: var(--t42-tab-bar-tab-overflowable-min-width);
|
|
912
|
+
min-width: var(--t42-tab-bar-tab-overflowable-min-width);
|
|
831
913
|
}
|
|
832
914
|
|
|
833
915
|
.t42-tabs-overflow .t42-tabs {
|
|
@@ -837,9 +919,9 @@ input {
|
|
|
837
919
|
.t42-tabs-overflow.t42-tabs-fade-right {
|
|
838
920
|
-webkit-mask-image: linear-gradient(
|
|
839
921
|
-90deg,
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
922
|
+
rgba(0, 0, 0, 0) 0,
|
|
923
|
+
rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
|
|
924
|
+
rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
|
|
843
925
|
rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size)
|
|
844
926
|
);
|
|
845
927
|
}
|
|
@@ -847,9 +929,9 @@ input {
|
|
|
847
929
|
.t42-tabs-overflow.t42-tabs-fade-left {
|
|
848
930
|
-webkit-mask-image: linear-gradient(
|
|
849
931
|
90deg,
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
932
|
+
rgba(0, 0, 0, 0) 0,
|
|
933
|
+
rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
|
|
934
|
+
rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
|
|
853
935
|
rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size)
|
|
854
936
|
);
|
|
855
937
|
}
|
|
@@ -857,13 +939,13 @@ input {
|
|
|
857
939
|
.t42-tabs-overflow.t42-tabs-fade-both {
|
|
858
940
|
-webkit-mask-image: linear-gradient(
|
|
859
941
|
90deg,
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
942
|
+
rgba(0, 0, 0, 0) 0%,
|
|
943
|
+
rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
|
|
944
|
+
rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
|
|
945
|
+
rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size),
|
|
946
|
+
rgba(0, 0, 0, 1) calc(100% - var(--t42-tab-bar-fade-size)),
|
|
947
|
+
rgba(0, 0, 0, 0.8) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 80)),
|
|
948
|
+
rgba(0, 0, 0, 0.3) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 30)),
|
|
867
949
|
rgba(0, 0, 0, 0) 100%
|
|
868
950
|
);
|
|
869
951
|
}
|
|
@@ -874,21 +956,35 @@ input {
|
|
|
874
956
|
margin-top: var(--t42-wg-tab-over-top-offset);
|
|
875
957
|
}
|
|
876
958
|
|
|
877
|
-
.t42-
|
|
878
|
-
|
|
959
|
+
.t42-external-page-popup {
|
|
960
|
+
position: absolute;
|
|
961
|
+
z-index: 999;
|
|
962
|
+
background-color: transparent;
|
|
963
|
+
height: fit-content;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
.t42-external-page-popup .t42-tab-overflow-popup {
|
|
967
|
+
--t42-wg-tab-over-max-height: none;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.t42-tab-overflow-popup {
|
|
879
971
|
display: flex;
|
|
880
972
|
flex-direction: column;
|
|
881
973
|
min-width: var(--t42-wg-tab-over-min-width);
|
|
882
974
|
max-width: var(--t42-wg-tab-over-max-width);
|
|
883
975
|
max-height: var(--t42-wg-tab-over-max-height);
|
|
884
976
|
padding: var(--t42-wg-tab-over-padding);
|
|
977
|
+
border: var(--t42-wg-tab-over-border);
|
|
885
978
|
border-radius: var(--t42-wg-tab-over-border-radius);
|
|
886
979
|
overflow: auto;
|
|
887
980
|
background-color: var(--t42-wg-tab-over-background);
|
|
888
981
|
}
|
|
889
982
|
|
|
890
|
-
.t42-tab-overflow-popup
|
|
891
|
-
|
|
983
|
+
.renderer-mode-keycolor .t42-tab-overflow-popup {
|
|
984
|
+
border-radius: 0px;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
.t42-tab-overflow-popup li {
|
|
892
988
|
display: flex;
|
|
893
989
|
gap: var(--t42-wg-tab-over-item-gap);
|
|
894
990
|
align-items: center;
|
|
@@ -898,16 +994,14 @@ input {
|
|
|
898
994
|
transition-property: background-color;
|
|
899
995
|
}
|
|
900
996
|
|
|
901
|
-
.t42-tab-overflow-popup li span
|
|
902
|
-
.t42-tab-context-menu li span {
|
|
997
|
+
.t42-tab-overflow-popup li span {
|
|
903
998
|
flex-grow: 1;
|
|
904
999
|
overflow: hidden;
|
|
905
1000
|
text-wrap: nowrap;
|
|
906
1001
|
text-overflow: clip;
|
|
907
1002
|
}
|
|
908
1003
|
|
|
909
|
-
.t42-tab-overflow-popup li:not(.title):hover
|
|
910
|
-
.t42-tab-context-menu li:not(.title):hover {
|
|
1004
|
+
.t42-tab-overflow-popup li:not(.title):hover {
|
|
911
1005
|
color: var(--t42-wg-tab-over-item-color-hover);
|
|
912
1006
|
background-color: var(--t42-wg-tab-over-item-background-hover);
|
|
913
1007
|
}
|
|
@@ -969,8 +1063,8 @@ input {
|
|
|
969
1063
|
.t42-multi-channel-selector-2 {
|
|
970
1064
|
background-image: conic-gradient(
|
|
971
1065
|
var(--t42-multi-channel-selector-2-color-1) 0deg,
|
|
972
|
-
|
|
973
|
-
|
|
1066
|
+
var(--t42-multi-channel-selector-2-color-1) 180deg,
|
|
1067
|
+
var(--t42-multi-channel-selector-2-color-2) 180deg,
|
|
974
1068
|
var(--t42-multi-channel-selector-2-color-2) 0deg
|
|
975
1069
|
);
|
|
976
1070
|
mask-image: var(--t42-multi-channel-selector-2-mask);
|
|
@@ -979,10 +1073,10 @@ input {
|
|
|
979
1073
|
.t42-multi-channel-selector-3 {
|
|
980
1074
|
background-image: conic-gradient(
|
|
981
1075
|
var(--t42-multi-channel-selector-3-color-1) 0deg,
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
1076
|
+
var(--t42-multi-channel-selector-3-color-1) 120deg,
|
|
1077
|
+
var(--t42-multi-channel-selector-3-color-2) 120deg,
|
|
1078
|
+
var(--t42-multi-channel-selector-3-color-2) 240deg,
|
|
1079
|
+
var(--t42-multi-channel-selector-3-color-3) 240deg,
|
|
986
1080
|
var(--t42-multi-channel-selector-3-color-3) 0deg
|
|
987
1081
|
);
|
|
988
1082
|
mask-image: var(--t42-multi-channel-selector-3-mask);
|
|
@@ -991,12 +1085,12 @@ input {
|
|
|
991
1085
|
.t42-multi-channel-selector-4 {
|
|
992
1086
|
background-image: conic-gradient(
|
|
993
1087
|
var(--t42-multi-channel-selector-4-color-1) 0deg,
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1088
|
+
var(--t42-multi-channel-selector-4-color-1) 90deg,
|
|
1089
|
+
var(--t42-multi-channel-selector-4-color-2) 90deg,
|
|
1090
|
+
var(--t42-multi-channel-selector-4-color-2) 180deg,
|
|
1091
|
+
var(--t42-multi-channel-selector-4-color-3) 180deg,
|
|
1092
|
+
var(--t42-multi-channel-selector-4-color-3) 270deg,
|
|
1093
|
+
var(--t42-multi-channel-selector-4-color-4) 270deg,
|
|
1000
1094
|
var(--t42-multi-channel-selector-4-color-4) 0deg
|
|
1001
1095
|
);
|
|
1002
1096
|
mask-image: var(--t42-multi-channel-selector-4-mask);
|