@interopio/groups-ui-react 2.2.3 → 2.2.4

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 (13) hide show
  1. package/dist/cjs/index.js +21 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/api.d.ts +2 -0
  4. package/dist/cjs/types/internal.d.ts +2 -0
  5. package/dist/cjs/webGroupsManager.d.ts +2 -0
  6. package/dist/esm/index.js +21 -1
  7. package/dist/esm/index.js.map +1 -1
  8. package/dist/esm/types/api.d.ts +2 -0
  9. package/dist/esm/types/internal.d.ts +2 -0
  10. package/dist/esm/webGroupsManager.d.ts +2 -0
  11. package/dist/styles/groups.css +125 -110
  12. package/dist/styles/vars.css +55 -40
  13. package/package.json +1 -1
package/dist/esm/types/api.d.ts CHANGED
@@ -100,6 +100,8 @@ export interface TabElementProps {
100
100
  channels: ChannelProps;
101
101
  notifyCaptionBoundsChanged: (bounds: Bounds) => void;
102
102
  captionEditor: CaptionEditorProps;
103
+ addContainerClass: (className: string) => void;
104
+ removeContainerClass: (className: string) => void;
103
105
  }
104
106
  export interface AfterTabsProps {
105
107
  frameId: string;
package/dist/esm/types/internal.d.ts CHANGED
@@ -285,6 +285,8 @@ export interface ExternalLibraryFactory {
285
285
  onCaptionEditorBoundsChanged(targetType: TargetType, targetId: string, bounds: Bounds): void;
286
286
  commitCaptionEditing(targetType: TargetType, targetId: string, text: string): void;
287
287
  selectTab(windowId: string): void;
288
+ addTabContainerClass(windowId: string, className: string): void;
289
+ removeTabContainerClass(windowId: string, className: string): void;
288
290
  }
289
291
  export interface WebGroupsManager {
290
292
  init: (factory?: any) => void;
package/dist/esm/webGroupsManager.d.ts CHANGED
@@ -36,6 +36,8 @@ declare class WebGroupsManagerDecorator {
36
36
  onCommitCaptionEditingRequested(targetType: TargetType, targetId: string, callback: () => void): () => void;
37
37
  requestCommitCaptionEditing(targetType: TargetType, targetId: string): void;
38
38
  selectTab(windowId: string): void;
39
+ addTabContainerClass(windowId: string, className: string): void;
40
+ removeTabContainerClass(windowId: string, className: string): void;
39
41
  }
40
42
  declare const _default: WebGroupsManagerDecorator;
41
43
  export default _default;
package/dist/styles/groups.css CHANGED
@@ -1,10 +1,10 @@
1
- @import "vars.css";
2
1
  @import "overlayscrollbars/styles/overlayscrollbars.css";
2
+ @import "vars.css";
3
3
 
4
4
  * {
5
5
  box-sizing: border-box;
6
6
  transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
7
- transition-duration: 250ms;
7
+ transition-duration: 240ms;
8
8
  transition-property: background-color, color;
9
9
  }
10
10
 
@@ -12,43 +12,42 @@ body {
12
12
  max-width: none;
13
13
  max-height: none;
14
14
  overflow: hidden;
15
- background-color: var(--t42-background);
16
15
  color: var(--t42-body-color);
16
+ background-color: var(--t42-background);
17
17
  }
18
18
 
19
19
  input {
20
- font-family: var(--t42-font-family);
21
- font-size: var(--t42-font-size);
20
+ font-family: var(--io-font-family);
22
21
  }
23
22
 
24
23
  #t42-group-container {
25
24
  display: flex;
26
25
  flex-direction: column;
27
- overflow: hidden;
28
26
  width: 100%;
29
- height: 100%;
30
27
  max-width: none;
28
+ height: 100%;
31
29
  max-height: none;
32
- background-color: transparent;
33
30
  border-width: 0;
31
+ overflow: hidden;
32
+ background-color: transparent;
34
33
  /* DONT TOUCH THIS */
35
34
  }
36
35
 
37
36
  #t42-frames-container {
37
+ position: relative;
38
38
  display: flex;
39
39
  flex-grow: 1;
40
- position: relative;
41
40
  height: 100%;
42
41
  background-color: transparent;
43
42
  }
44
43
 
45
44
  .t42-caption-bar {
45
+ position: relative;
46
46
  display: flex;
47
47
  flex-direction: column;
48
48
  flex-grow: 0;
49
49
  flex-shrink: 0;
50
50
  overflow: hidden;
51
- position: relative;
52
51
  }
53
52
 
54
53
  .t42-internal-caption-bar {
@@ -60,51 +59,56 @@ input {
60
59
  flex-grow: 1;
61
60
  }
62
61
 
63
- .t42-caption-bar:after {
64
- width: 100%;
62
+ .t42-caption-bar::after {
63
+ position: absolute;
64
+ z-index: 1;
65
65
  display: block;
66
+ width: 100%;
66
67
  background-color: var(--t42-caption-separator-color);
67
68
  content: "";
68
- position: absolute;
69
- z-index: 1;
70
69
  }
71
70
 
72
71
  .t42-caption {
73
- overflow: hidden;
74
72
  align-items: center;
73
+ overflow: hidden;
74
+ font-size: var(--io-font-size);
75
+ line-height: var(--t42-line-height);
75
76
  white-space: nowrap;
76
77
  text-align: left;
77
78
  user-select: none;
78
- font-size: var(--io-font-size);
79
79
  }
80
80
 
81
81
  .t42-caption-editor {
82
82
  display: inline-block;
83
- color: var(--t42-caption-editor-color);
84
- margin: var(--t42-caption-editor-margin);
85
- border: var(--spacing-1) solid hsl(var(--io-interactive-primary));
86
- border-radius: var(--border-radius-4);
87
- outline: none;
88
83
  min-width: 150px;
84
+ height: var(--t42-caption-editor-height);
85
+ margin: var(--t42-caption-editor-margin);
89
86
  padding: 0 var(--spacing-2) 0 var(--spacing-2);
90
- white-space: nowrap;
87
+ border: var(--t42-caption-editor-border);
88
+ border-radius: var(--base-radius-default);
91
89
  overflow-x: hidden;
90
+ color: var(--t42-caption-editor-color);
91
+ font-size: var(--io-font-size);
92
+ white-space: nowrap;
93
+ outline: 0;
92
94
  }
93
95
 
94
96
  .t42-caption-editor.t42-group-caption-bar-element,
95
97
  .t42-caption-editor.t42-frame-caption-bar-element {
96
98
  margin: var(--t42-title-margin);
99
+ outline: 0;
97
100
  }
98
101
 
99
102
  .t42-title {
100
- color: var(--t42-title-color);
101
103
  margin: var(--t42-title-margin);
104
+ color: var(--t42-title-color);
105
+ line-height: var(--t42-line-height);
102
106
  }
103
107
 
104
108
  .t42-move-area {
105
- align-items: center;
106
109
  display: flex;
107
110
  flex-grow: 1;
111
+ align-items: center;
108
112
  min-width: var(--t42-move-area-min-width);
109
113
  }
110
114
 
@@ -114,10 +118,10 @@ input {
114
118
  }
115
119
 
116
120
  .t42-html-buttons-container {
117
- display: flex;
118
121
  position: absolute;
119
- right: var(--spacing-4);
120
122
  top: var(--spacing-4);
123
+ right: var(--spacing-4);
124
+ display: flex;
121
125
  background-color: var(--t42-html-buttons-bar-background);
122
126
  }
123
127
 
@@ -126,16 +130,16 @@ input {
126
130
  }
127
131
 
128
132
  .t42-html-buttons-bar-element {
129
- background-color: var(--t42-html-buttons-bar-background);
133
+ background-color: var(--t42-html-buttons-bar-background);
130
134
  }
131
135
 
132
136
  .t42-buttons {
133
137
  display: flex;
134
138
  flex-shrink: 0;
135
139
  align-items: center;
140
+ margin: 0;
141
+ padding: 0;
136
142
  overflow: hidden;
137
- margin: 0px;
138
- padding: 0px;
139
143
  list-style-type: none;
140
144
  }
141
145
 
@@ -150,21 +154,22 @@ input {
150
154
  }
151
155
 
152
156
  .t42-custom-button {
153
- height: var(--t42-custom-button-size);
157
+ position: relative;
154
158
  width: var(--t42-custom-button-size);
159
+ height: var(--t42-custom-button-size);
155
160
  background-size: cover;
156
- position: relative;
157
161
  }
158
162
 
159
163
  .t42-standard-button::before,
160
164
  .t42-tab-channel-selector-content::before,
161
165
  .t42-frame-channel-selector-content::before,
162
166
  .t42-tab-close-button-content::before {
163
- align-items: center;
164
167
  display: flex;
165
- font-family: "io-icons";
166
- font-size: var(--spacing-16);
168
+ align-items: center;
167
169
  justify-content: center;
170
+ font-size: var(--spacing-16);
171
+ font-family: "io-icons";
172
+ transition-property: color;
168
173
  content: "";
169
174
  }
170
175
 
@@ -177,8 +182,8 @@ input {
177
182
  .t42-caption-bar-button-feedback,
178
183
  .t42-caption-bar-button-sticky,
179
184
  .t42-caption-bar-button-extract {
180
- margin: var(--spacing-2) var(--spacing-2) 0 0;
181
- border-radius: var(--border-radius-4);
185
+ margin: var(--t42-tab-bar-button-margin);
186
+ border-radius: var(--t42-tab-bar-button-radius);
182
187
  }
183
188
 
184
189
  .t42-caption-bar-button-lock .t42-standard-button::before,
@@ -187,7 +192,7 @@ input {
187
192
  font-size: var(--spacing-14);
188
193
  }
189
194
 
190
- .t42-caption-bar-button:hover .t42-standard-button-close:before {
195
+ .t42-caption-bar-button:hover .t42-standard-button-close::before {
191
196
  color: var(--t42-caption-bar-button-close-hover-text);
192
197
  }
193
198
 
@@ -208,8 +213,9 @@ input {
208
213
  }
209
214
 
210
215
  .t42-tab-close-button-content::before {
211
- height: var(--t42-tab-bar-tab-close-button-size);
212
216
  width: var(--t42-tab-bar-tab-close-button-size);
217
+ height: var(--t42-tab-bar-tab-close-button-size);
218
+ font-size: var(--t42-tab-bar-tab-close-button-size);
213
219
  }
214
220
 
215
221
  .t42-standard-button-restore::before {
@@ -241,11 +247,11 @@ input {
241
247
  }
242
248
 
243
249
  .t42-standard-button-sticky::before {
244
- content: var(--sticky-icon-off);
245
250
  display: block;
246
- height: var(--spacing-14);
247
251
  width: var(--spacing-14);
252
+ height: var(--spacing-14);
248
253
  line-height: var(--spacing-14);
254
+ content: var(--sticky-icon-off);
249
255
  }
250
256
 
251
257
  .t42-caption-bar-button:hover .t42-standard-button-sticky::before {
@@ -253,10 +259,10 @@ input {
253
259
  }
254
260
 
255
261
  .t42-caption-bar-button.active .t42-standard-button-sticky::before {
256
- content: var(--sticky-icon-on);
257
- height: var(--spacing-16);
258
262
  width: var(--spacing-16);
259
- line-height: var(--spacing-16);
263
+ height: var(--spacing-16);
264
+ line-height: var(--t42-line-height);
265
+ content: var(--sticky-icon-on);
260
266
  }
261
267
 
262
268
  .t42-caption-bar-button.active:hover .t42-standard-button-sticky::before {
@@ -265,8 +271,8 @@ input {
265
271
 
266
272
  .t42-tab-channel-selector-content::before,
267
273
  .t42-frame-channel-selector-content::before {
274
+ font-size: var(--spacing-14);
268
275
  content: "\e902";
269
- font-size: var(--spacing-16);
270
276
  }
271
277
 
272
278
  .t42-group-caption-bar {
@@ -277,6 +283,10 @@ input {
277
283
  background-color: var(--t42-group-caption-background);
278
284
  }
279
285
 
286
+ .t42-group-caption-bar-element:focus-visible {
287
+ outline: 0;
288
+ }
289
+
280
290
  .t42-group-caption-bar::after {
281
291
  bottom: 0;
282
292
  height: var(--t42-group-caption-separator-size);
@@ -288,21 +298,21 @@ input {
288
298
  }
289
299
 
290
300
  .t42-frame {
301
+ position: absolute;
291
302
  display: flex;
292
303
  flex-direction: column;
293
304
  flex-grow: 0;
294
305
  flex-shrink: 0;
295
- position: absolute;
296
- overflow: hidden;
297
- background-color: transparent;
298
- border-style: solid;
299
306
  border-color: var(--t42-frame-border-color);
307
+ border-style: solid;
300
308
  border-width: var(--t42-frame-border-size);
309
+ overflow: hidden;
310
+ background-color: transparent;
301
311
  }
302
312
 
303
313
  .t42-frame-html {
304
314
  /* Don't touch this! We don't have borders for 'html' mode frames */
305
- border-width: 0px;
315
+ border-width: 0;
306
316
  }
307
317
 
308
318
  .t42-focused-frame {
@@ -324,11 +334,11 @@ input {
324
334
 
325
335
  .t42-frame-channel-selector {
326
336
  align-self: center;
327
- border-radius: var(--t42-frame-channel-selector-border-radius);
337
+ justify-content: center;
328
338
  width: var(--t42-frame-channel-selector-size);
329
339
  height: var(--t42-frame-channel-selector-size);
330
340
  margin: var(--t42-frame-channel-selector-margin);
331
- justify-content: center;
341
+ border-radius: var(--t42-frame-channel-selector-border-radius);
332
342
  }
333
343
 
334
344
  .t42-frame-channel-selector-content {
@@ -347,8 +357,8 @@ input {
347
357
 
348
358
  .t42-frame-window-container {
349
359
  display: flex;
350
- flex-grow: 1;
351
360
  flex-direction: column;
361
+ flex-grow: 1;
352
362
  }
353
363
 
354
364
  .t42-frame-window {
@@ -365,40 +375,41 @@ input {
365
375
 
366
376
  .t42-frame-window-footer {
367
377
  display: flex;
368
- flex-grow: 0;
369
378
  flex-direction: column;
379
+ flex-grow: 0;
370
380
  background-color: var(--t42-background);
371
381
  }
372
382
 
373
383
  .t42-tab-bar {
384
+ position: relative;
374
385
  display: flex;
375
386
  flex-direction: column;
376
- position: relative;
377
387
  }
378
388
 
379
389
  .t42-tab-bar::after {
380
- display: block;
381
- content: "";
382
390
  position: absolute;
383
- z-index: 1;
384
- background-color: var(--t42-caption-separator-color);
385
391
  bottom: 0;
386
- height: var(--t42-tab-bar-separator-size);
392
+ z-index: 1;
393
+ display: block;
387
394
  width: 100%;
395
+ height: var(--t42-tab-bar-separator-size);
396
+ background-color: var(--t42-caption-separator-color);
397
+ content: "";
388
398
  }
389
399
 
390
400
  .t42-tab-bar-header {
401
+ position: relative;
391
402
  display: flex;
392
403
  flex-direction: row;
393
404
  flex-grow: 0;
394
405
  flex-shrink: 0;
395
- overflow: hidden;
396
- position: relative;
397
406
  height: var(--t42-tab-bar-height);
407
+ overflow: hidden;
398
408
  }
399
409
 
400
410
  .t42-tab-bar-element {
401
411
  background-color: var(--t42-tab-bar-background);
412
+ transition-property: background-color;
402
413
  }
403
414
 
404
415
  .t42-tab-bar-button {
@@ -406,11 +417,10 @@ input {
406
417
  height: var(--t42-tab-bar-button-size);
407
418
  }
408
419
 
409
-
410
420
  .t42-caption-bar-button {
411
421
  position: relative;
412
- background-color: var(--t42-caption-bar-button-background);
413
422
  color: var(--t42-standard-button-color);
423
+ background-color: var(--t42-caption-bar-button-background);
414
424
  }
415
425
 
416
426
  .t42-caption-bar-button:hover {
@@ -431,16 +441,15 @@ input {
431
441
  }
432
442
 
433
443
  .t42-tabs {
444
+ position: relative;
434
445
  display: flex;
435
446
  flex-direction: row;
436
447
  flex-grow: 0;
437
448
  flex-shrink: 1;
449
+ align-items: center;
450
+ padding: var(--t42-tab-bar-padding);
438
451
  overflow: hidden;
439
452
  list-style-type: none;
440
- position: relative;
441
- padding: 0px;
442
- margin: 0px;
443
- border-top-right-radius: var(--border-radius-4);
444
453
  -webkit-app-region: drag;
445
454
  }
446
455
 
@@ -451,38 +460,38 @@ input {
451
460
  }
452
461
 
453
462
  .t42-tab {
463
+ position: relative;
454
464
  display: flex;
455
465
  flex-direction: row;
456
466
  flex-grow: 0;
457
467
  flex-shrink: 1;
458
468
  align-items: center;
459
- position: relative;
460
- padding: 0px var(--spacing-8);
461
- margin-right: var(--spacing-2);
462
- margin-top: var(--spacing-4);
463
469
  width: 150px;
464
470
  min-width: var(--t42-tab-bar-tab-min-width);
465
471
  max-width: var(--t42-tab-bar-tab-width);
466
- background-color: var(--t42-tab-bar-tab-background);
467
- border-top-right-radius: var(--spacing-4);
472
+ height: var(--t42-tab-bar-tab-height);
473
+ margin: var(--t42-tab-bar-tab-margin);
474
+ padding: var(--t42-tab-bar-tab-padding);
475
+ border-radius: var(--tabs-radius);
468
476
  border-top-left-radius: var(--spacing-4);
469
- transition-property: padding;
477
+ border-top-right-radius: var(--spacing-4);
478
+ background-color: var(--t42-tab-bar-tab-background);
470
479
  container-type: size;
471
480
  -webkit-app-region: no-drag;
472
481
  }
473
482
 
474
483
  .t42-tab::before {
475
- width: var(--t42-tab-bar-tab-separator-size);
476
- height: var(--spacing-8);
477
484
  position: absolute;
478
485
  left: calc(var(--spacing-2) * -1);
486
+ z-index: 10;
479
487
  display: block;
480
- transition: 0.3s;
488
+ width: var(--t42-tab-bar-tab-separator-size);
489
+ height: var(--t42-tab-bar-tab-separator-height);
481
490
  background-color: var(--t42-tab-bar-tab-separator-color);
482
- content: "";
483
- z-index: 10;
484
491
  opacity: 1;
492
+ transition: 0.3s;
485
493
  transition-property: opacity;
494
+ content: "";
486
495
  }
487
496
 
488
497
  .t42-tab:first-of-type::before {
@@ -518,23 +527,28 @@ input {
518
527
  .t42-tab-caption-editor {
519
528
  min-width: unset;
520
529
  -webkit-mask-image: none;
530
+ height: var(--spacing-12);
531
+ }
532
+
533
+ .t42-tab-caption-editor:focus-visible {
534
+ outline: 0;
521
535
  }
522
536
 
523
537
  .t42-tab-close-button {
524
538
  margin: var(--t42-tab-bar-tab-close-button-margin);
525
- transition-property: margin;
539
+ transition-property: margin, background-color;
526
540
  }
527
541
 
528
542
  .t42-tab-close-button-content {
529
543
  display: flex;
544
+ align-items: center;
545
+ justify-content: center;
530
546
  width: calc(var(--t42-tab-bar-tab-close-button-size) + var(--t42-tab-bar-tab-close-button-padding) * 2);
531
547
  height: calc(var(--t42-tab-bar-tab-close-button-size) + var(--t42-tab-bar-tab-close-button-padding) * 2);
532
548
  border-radius: 50%;
533
- background-color: transparent;
534
- transition-property: background-color, fill;
535
- justify-content: center;
536
- align-items: center;
537
- font-size: var(--spacing-14);
549
+ background-color: var(--t42-tab-bar-tab-close-button-background);
550
+ transition-duration: 80ms;
551
+ transition-property: background-color, fill, color;
538
552
  }
539
553
 
540
554
  .t42-tab-close-button-content svg {
@@ -547,9 +561,8 @@ input {
547
561
  }
548
562
 
549
563
  .t42-tab-close-button-content:hover {
564
+ color: var(--t42-tab-bar-tab-text-hover);
550
565
  background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
551
- color: Hsl(var(--io-label-primary));
552
-
553
566
  }
554
567
 
555
568
  .t42-tab-close-button-content:hover .t42-standard-button-image {
@@ -561,20 +574,20 @@ input {
561
574
  }
562
575
 
563
576
  .t42-selected-tab::before,
564
- .t42-selected-tab+.t42-tab::before {
577
+ .t42-selected-tab + .t42-tab::before {
565
578
  opacity: 0;
566
579
  }
567
580
 
568
581
  .t42-selected-tab:hover::before {
569
- width: calc(100% - var(--t42-tab-bar-tab-separator-size));
570
- height: var(--t42-tab-bar-tab-selected-separator-size);
571
582
  position: absolute;
572
- left: 0px;
573
- bottom: 0px;
583
+ bottom: 0;
584
+ left: 0;
585
+ z-index: 10;
574
586
  display: block;
587
+ width: calc(100% - var(--t42-tab-bar-tab-separator-size));
588
+ height: var(--t42-tab-bar-tab-selected-separator-size);
575
589
  background-color: var(--t42-tab-bar-tab-selected-separator-color);
576
590
  content: "";
577
- z-index: 10;
578
591
  }
579
592
 
580
593
  .t42-selected-tab-caption {
@@ -607,9 +620,9 @@ input {
607
620
  }
608
621
 
609
622
  .t42-approaching-edge {
610
- display: block;
611
623
  position: absolute;
612
624
  z-index: 100;
625
+ display: block;
613
626
  background-color: var(--t42-approaching-edge-start-color);
614
627
  animation: approaching-edge-animation;
615
628
  animation-duration: var(--t42-approaching-edge-animation-duration);
@@ -626,17 +639,17 @@ input {
626
639
  }
627
640
 
628
641
  .t42-sizing-border-group {
629
- pointer-events: none;
630
- list-style-type: none;
642
+ position: absolute;
643
+ z-index: 100;
631
644
  display: flex;
632
- margin: 0px;
633
- padding: 0px;
634
645
  flex-grow: 0;
635
646
  flex-shrink: 0;
636
- position: absolute;
647
+ margin: 0;
648
+ padding: 0;
637
649
  overflow: hidden;
638
- z-index: 100;
650
+ list-style-type: none;
639
651
  background-color: var(--t42-sizing-border-group-color);
652
+ pointer-events: none;
640
653
  }
641
654
 
642
655
  .t42-vertical-sizing-border-group {
@@ -663,10 +676,10 @@ input {
663
676
  }
664
677
 
665
678
  .t42-sizing-border {
666
- pointer-events: auto;
667
- margin: 0px;
668
- padding: 0px;
669
679
  flex-shrink: 0;
680
+ margin: 0;
681
+ padding: 0;
682
+ pointer-events: auto;
670
683
  }
671
684
 
672
685
  .t42-frame-sizing-border {
@@ -708,21 +721,22 @@ input {
708
721
 
709
722
  .loader-wrapper {
710
723
  display: flex;
711
- align-items: center;
712
- justify-content: center;
713
724
  flex-direction: column;
714
725
  flex-grow: 1;
715
726
  gap: 1rem;
727
+ align-items: center;
728
+ justify-content: center;
716
729
  background: var(--t42-background);
717
-
718
730
  }
719
731
 
720
732
  .loader-wrapper .loader {
721
733
  width: 2rem;
722
734
  height: 2rem;
723
735
  border-radius: 50%;
724
- background: radial-gradient(farthest-side, #999d9e 94%, rgba(0, 0, 0, 0)) center top / 4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 15%, #999d9e);
725
- -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0px);
736
+ background:
737
+ radial-gradient(farthest-side, #999d9e 94%, rgba(0, 0, 0, 0)) center top / 4px 4px no-repeat,
738
+ conic-gradient(rgba(0, 0, 0, 0) 15%, #999d9e);
739
+ -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000000 0);
726
740
  }
727
741
 
728
742
  .loader-wrapper .loader-text {
@@ -764,8 +778,8 @@ input {
764
778
 
765
779
  .t42-tab-flashing .t42-tab-bar-element,
766
780
  .t42-tab-flashing .t42-tab-caption {
781
+ color: var(--t42-tab-bar-tab-flashing-color);
767
782
  background-color: transparent;
768
- color: var(--white);
769
783
  }
770
784
 
771
785
  @container (max-width: 50px) {
@@ -773,7 +787,6 @@ input {
773
787
  width: 0;
774
788
  margin: 0;
775
789
  }
776
-
777
790
  }
778
791
 
779
792
  @container (max-width: 40px) {
@@ -825,6 +838,8 @@ input {
825
838
  align-items: center;
826
839
  height: var(--t42-wg-tab-over-item-height);
827
840
  padding: var(--t42-wg-tab-over-item-padding);
841
+ transition-property: background-color;
842
+ transition-duration: 80ms;
828
843
  }
829
844
 
830
845
  .t42-tab-overflow-popup li span {