@interopio/groups-ui-react 4.5.0 → 4.5.1

package/dist/styles/groups.css

@@ -129,6 +129,8 @@ input {
     right: var(--spacing-4);
     display: flex;
     background-color: var(--t42-html-buttons-bar-background);
+    -webkit-app-region: no-drag;
+    z-index: 10;
 }
 
 .t42-html-buttons-container ul:first-of-type {
@@ -247,11 +249,9 @@ input {
     border-radius: var(--t42-progress-bar-border-radius);
     transform: translateY(var(--t42-progress-bar-top-offset));
     background-color: var(--t42-progress-bar-background-color);
-    background-image: linear-gradient(
-        to right,
-        var(--t42-progress-bar-current-color),
-        var(--t42-progress-bar-current-color)
-    );
+    background-image: linear-gradient(to right,
+            var(--t42-progress-bar-current-color),
+            var(--t42-progress-bar-current-color));
     background-size: calc(var(--progress) * 1%) 100%;
     background-repeat: no-repeat;
     background-position: left top;
@@ -716,7 +716,7 @@ input {
 }
 
 .t42-selected-tab::before,
-.t42-selected-tab + .t42-tab::before {
+.t42-selected-tab+.t42-tab::before {
     opacity: var(--t42-tab-bar-tab-selected-separator-opacity);
 }
 
@@ -850,6 +850,7 @@ input {
 }
 
 @keyframes clipMe {
+
     0%,
     100% {
         clip: rect(0, 25vh, 2px, 0);
@@ -967,29 +968,28 @@ input {
     overflow: auto;
 }
 
+.t42-tabs-overflow[data-overlayscrollbars-viewport~="overflowXScroll"].t42-tabs {
+    -webkit-app-region: no-drag;
+}
+
 .t42-tabs-overflow.t42-tabs-fade-right {
-    -webkit-mask-image: linear-gradient(
-        -90deg,
+    -webkit-mask-image: linear-gradient(-90deg,
             rgba(0, 0, 0, 0) 0,
             rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
             rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
-        rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size)
-    );
+            rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size));
 }
 
 .t42-tabs-overflow.t42-tabs-fade-left {
-    -webkit-mask-image: linear-gradient(
-        90deg,
+    -webkit-mask-image: linear-gradient(90deg,
             rgba(0, 0, 0, 0) 0,
             rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
             rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
-        rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size)
-    );
+            rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size));
 }
 
 .t42-tabs-overflow.t42-tabs-fade-both {
-    -webkit-mask-image: linear-gradient(
-        90deg,
+    -webkit-mask-image: linear-gradient(90deg,
             rgba(0, 0, 0, 0) 0%,
             rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
             rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
@@ -997,8 +997,7 @@ input {
             rgba(0, 0, 0, 1) calc(100% - var(--t42-tab-bar-fade-size)),
             rgba(0, 0, 0, 0.8) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 80)),
             rgba(0, 0, 0, 0.3) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 30)),
-        rgba(0, 0, 0, 0) 100%
-    );
+            rgba(0, 0, 0, 0) 100%);
 }
 
 .t42-page-popup {
@@ -1084,7 +1083,7 @@ input {
     width: var(--t42-wg-pin-tab-width);
 }
 
-.t42-tabs-pinned  .t42-tab-caption {
+.t42-tabs-pinned .t42-tab-caption {
     mask-image: none;
 }
 
@@ -1114,37 +1113,31 @@ input {
 }
 
 .t42-multi-channel-selector-2 {
-    background-image: conic-gradient(
-        var(--t42-multi-channel-selector-2-color-1) 0deg,
+    background-image: conic-gradient(var(--t42-multi-channel-selector-2-color-1) 0deg,
             var(--t42-multi-channel-selector-2-color-1) 180deg,
             var(--t42-multi-channel-selector-2-color-2) 180deg,
-        var(--t42-multi-channel-selector-2-color-2) 0deg
-    );
+            var(--t42-multi-channel-selector-2-color-2) 0deg);
     mask-image: var(--t42-multi-channel-selector-2-mask);
 }
 
 .t42-multi-channel-selector-3 {
-    background-image: conic-gradient(
-        var(--t42-multi-channel-selector-3-color-1) 0deg,
+    background-image: conic-gradient(var(--t42-multi-channel-selector-3-color-1) 0deg,
             var(--t42-multi-channel-selector-3-color-1) 120deg,
             var(--t42-multi-channel-selector-3-color-2) 120deg,
             var(--t42-multi-channel-selector-3-color-2) 240deg,
             var(--t42-multi-channel-selector-3-color-3) 240deg,
-        var(--t42-multi-channel-selector-3-color-3) 0deg
-    );
+            var(--t42-multi-channel-selector-3-color-3) 0deg);
     mask-image: var(--t42-multi-channel-selector-3-mask);
 }
 
 .t42-multi-channel-selector-4 {
-    background-image: conic-gradient(
-        var(--t42-multi-channel-selector-4-color-1) 0deg,
+    background-image: conic-gradient(var(--t42-multi-channel-selector-4-color-1) 0deg,
             var(--t42-multi-channel-selector-4-color-1) 90deg,
             var(--t42-multi-channel-selector-4-color-2) 90deg,
             var(--t42-multi-channel-selector-4-color-2) 180deg,
             var(--t42-multi-channel-selector-4-color-3) 180deg,
             var(--t42-multi-channel-selector-4-color-3) 270deg,
             var(--t42-multi-channel-selector-4-color-4) 270deg,
-        var(--t42-multi-channel-selector-4-color-4) 0deg
-    );
+            var(--t42-multi-channel-selector-4-color-4) 0deg);
     mask-image: var(--t42-multi-channel-selector-4-mask);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@interopio/groups-ui-react",
-    "version": "4.5.0",
+    "version": "4.5.1",
     "description": "React library for building a Web Group App for io.Connect Desktop.",
     "keywords": [
         "interop",