@interopio/groups-ui-react 2.5.0 → 2.6.0

package/dist/styles/styles.css

@@ -1,574 +0,0 @@
-@import "vars.css";
-
-* {
-    box-sizing: border-box;
-    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
-    transition-duration: 250ms;
-    transition-property: color;
-}
-
-body {
-    max-width: none;
-    max-height: none;
-    overflow: hidden;
-    background-color: var(--t42-background);
-    font-weight: var(--bs-body-font-weight);
-    font-family: var(--t42-font-family);
-    font-size: var(--t42-font-size);
-}
-
-#t42-group-container {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    max-width: none;
-    max-height: none;
-    background-color: transparent;
-    border-style: solid;
-    border-color: var(--t42-group-border-color);
-    border-width: var(--t42-group-border-size);
-}
-
-#t42-frames-container {
-    display: flex;
-    flex-grow: 1;
-    position: relative;
-    height: 100%;
-    background-color: transparent;
-}
-
-.t42-caption-bar {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-}
-
-.t42-internal-caption-bar {
-    flex-direction: row;
-}
-
-.t42-react-caption-bar {
-    display: flex;
-    flex-grow: 1;
-}
-
-.t42-caption-bar:after {
-    width: 100%;
-    display: block;
-    background-color: var(--t42-caption-separator-color);
-    content: "";
-    position: absolute;
-    z-index: 1;
-}
-
-.t42-caption {
-    overflow: hidden;
-    align-items: center;
-    white-space: nowrap;
-    text-align: left;
-    text-overflow: ellipsis;
-    user-select: none;
-}
-
-.t42-title {
-    color: var(--t42-title-color);
-    margin: var(--t42-title-margin);
-}
-
-.t42-move-area {
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    min-width: var(--t42-move-area-min-width);
-}
-
-.t42-buttons-container {
-    display: flex;
-    flex-direction: row;
-}
-
-.t42-buttons {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    overflow: hidden;
-    margin: 0px;
-    padding: 0px;
-    list-style-type: none;
-}
-
-.t42-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.t42-standard-button {
-    height: var(--t42-standard-button-size);
-    width: var(--t42-standard-button-size);
-    position: relative;
-}
-
-.t42-standard-button::before,
-.t42-tab-channel-selector-content::before,
-.t42-frame-channel-selector-content::before,
-.t42-tab-close-button-content::before {
-    color: var(--t42-standard-button-color);
-    display: block;
-    content: "";
-    width: var(--t42-standard-button-size);
-    height: var(--t42-standard-button-size);
-    transition-property: background-color, color;
-    -webkit-mask-repeat: no-repeat;
-}
-
-.t42-standard-button-image {
-    fill: var(--t42-standard-button-color);
-}
-
-.t42-caption-bar-button {
-    position: relative;
-    transition-property: background-color, color;
-    background-color: var(--t42-caption-bar-button-background);
-}
-
-.t42-caption-bar-button:hover,
-.t42-caption-bar-button.active {
-    background-color: var(--t42-caption-bar-button-hover-background);
-}
-
-.t42-caption-bar-button-close:hover {
-    background-color: var(--t42-caption-bar-button-close-hover-background);
-}
-
-.t42-caption-bar-button:hover .t42-standard-button:before {
-    color: var(--t42-standard-button-hover-color);
-}
-
-.t42-caption-bar-button:hover .t42-standard-button-close:before {
-    background-color: var(--t42-caption-bar-button-close-hover-text);
-}
-
-.t42-caption-bar-button:hover .t42-standard-button-extract::before,
-.t42-caption-bar-button:hover .t42-standard-button-minimize::before,
-.t42-caption-bar-button:hover .t42-standard-button-lock::before,
-.t42-caption-bar-button:hover .t42-standard-button-unlock::before,
-.t42-caption-bar-button:hover .t42-standard-button-sticky::before {
-    background-color: var(--t42-standard-button-hover-color);
-}
-
-.t42-standard-button-minimize::before {
-    height: 1px;
-    position: relative;
-    top: calc(var(--t42-standard-button-size) / 2);
-    background-color: var(--t42-standard-button-color);
-}
-
-.t42-standard-button-maximize::before {
-    box-shadow: inset 0 0 0 1px;
-}
-
-.t42-standard-button-close::before,
-.t42-tab-close-button-content::before {
-    background-color: var(--t42-standard-button-color);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 16 16' xml:space='preserve'%3E%3Cpath d='M0 1 1 0 8 7 15 0 16 1 9 8 16 15 15 16 8 9 1 16 0 15 7 8 0 1z'/%3E%3C/svg%3E");
-}
-
-.t42-tab-close-button-content::before {
-    height: var(--t42-tab-bar-tab-close-button-size);
-    width: var(--t42-tab-bar-tab-close-button-size);
-}
-
-.t42-standard-button-restore::before {
-    box-shadow: inset 0 0 0 1px;
-    color: var(--t42-standard-button-color);
-    position: absolute;
-    width: calc(var(--t42-standard-button-size) - 2px);
-    height: calc(var(--t42-standard-button-size) - 2px);
-    top: 2px;
-}
-
-.t42-standard-button-restore::after {
-    width: calc(
-        var(--t42-standard-button-size) -
-            (var(--t42-caption-bar-button-correction) / 2)
-    );
-    height: calc(
-        var(--t42-standard-button-size) -
-            (var(--t42-caption-bar-button-correction) / 2)
-    );
-    top: 0;
-    border-top: 1px solid;
-    border-right: 1px solid;
-    position: absolute;
-    content: "";
-    border-color: var(--t42-standard-button-color);
-    right: 0;
-}
-
-.t42-standard-button-extract::before {
-    background-color: var(--t42-standard-button-color);
-    width: calc(
-        var(--t42-standard-button-size) +
-            var(--t42-caption-bar-button-correction)
-    );
-    height: calc(
-        var(--t42-standard-button-size) +
-            var(--t42-caption-bar-button-correction)
-    );
-    top: calc(var(--t42-caption-bar-button-correction) / 2 * -1);
-    position: absolute;
-    left: calc(var(--t42-caption-bar-button-correction) / 2 * -1);
-    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.8 3h-2.7l-.1.1v.2l.8.7.2.3-.2.2-5.1 5.1v.2l.5.5h.2l5.1-5.1.2-.2.3.2.7.8h.1c.1 0 .2 0 .2-.2V3.2c0-.1-.1-.2-.2-.2z'/%3E%3Cpath d='M11 12v.3H3.7V5H7v-.7H3.7c-.4 0-.7.3-.7.7v7.3c0 .4.3.7.7.7H11c.4 0 .7-.3.7-.7V9.7H11V12z'/%3E%3C/svg%3E");
-}
-
-.t42-standard-button-lock::before {
-    background-color: var(--t42-standard-button-color);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,7H13V5c0-2.8-1.8-5-5-5C4.9,0,3,2.2,3,5v2H1.7C0.8,7,0,7.7,0,8.5v6C0,15.3,0.8,16,1.7,16h12.6c0.9,0,1.7-0.7,1.7-1.5  v-6C16,7.7,15.6,7,14.7,7z M4,5c0-2.2,1.5-4,4-4s4,1.8,4,4v2H4V5z M14.3,15H1.7C1.4,15,1,14.8,1,14.5v-6C1,8.2,1.4,8,1.7,8h12.6  C14.6,8,15,8.2,15,8.5v6C15,14.8,14.6,15,14.3,15z'/%3E%3C/svg%3E");
-}
-
-.t42-standard-button-unlock::before {
-    background-color: var(--t42-standard-button-color);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,7H14h-1h-1h-2H4V5c0-2.2,1.5-4,4-4c0.8,0,1.4,0.2,2,0.5V0.3C9.4,0.1,8.7,0,8,0C4.9,0,3,2.2,3,5v2H1.7  C0.8,7,0,7.7,0,8.5v6C0,15.3,0.8,16,1.7,16h12.6c0.9,0,1.7-0.7,1.7-1.5v-6C16,7.7,15.6,7,14.7,7z M15,14.5c0,0.3-0.4,0.5-0.7,0.5  H1.7C1.4,15,1,14.8,1,14.5v-6C1,8.2,1.4,8,1.7,8h12.6C14.6,8,15,8.2,15,8.5V14.5z'/%3E%3C/svg%3E");
-}
-
-.t42-standard-button-unlock::before {
-    background-color: var(--t42-standard-button-color);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,7H14h-1h-1h-2H4V5c0-2.2,1.5-4,4-4c0.8,0,1.4,0.2,2,0.5V0.3C9.4,0.1,8.7,0,8,0C4.9,0,3,2.2,3,5v2H1.7  C0.8,7,0,7.7,0,8.5v6C0,15.3,0.8,16,1.7,16h12.6c0.9,0,1.7-0.7,1.7-1.5v-6C16,7.7,15.6,7,14.7,7z M15,14.5c0,0.3-0.4,0.5-0.7,0.5  H1.7C1.4,15,1,14.8,1,14.5v-6C1,8.2,1.4,8,1.7,8h12.6C14.6,8,15,8.2,15,8.5V14.5z'/%3E%3C/svg%3E");
-}
-
-.t42-standard-button-sticky::before {
-    background-color: var(--t42-standard-button-color);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2,4v8c0,2.7,1.3,4,4,4s4,0,4,0c2.7,0,4-1.3,4-4V4h-2v6c0,2.7-1.3,4-4,4l0,0c-2.7,0-4-1.3-4-4V4 M4,4H2 M2,0L2,0v2h2V0H2zM12,0h2v2h-2V0z'/%3E%3C/svg%3E");
-}
-
-.t42-tab-channel-selector-content::before,
-.t42-frame-channel-selector-content::before {
-    background-color: var(--t42-standard-button-color);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M301 395l-79 79c-51 51-133 51-184 0-51-51-51-133 0-184l79-79a133 133 0 014-3c8-7 20-2 20 8 0 5 1 10 1 14 1 4-1 7-3 10-17 17-75 75-75 75-37 37-37 96 0 133 37 37 96 37 133 0l79-79 0 0c36-37 36-96 0-133-8-8-18-15-28-19-5-2-7-7-7-12a62 62 0 013-15c2-7 10-10 16-7 15 6 29 16 41 28 51 51 51 133 0 184zm-90-94c12 12 26 22 41 28 6 3 14-1 16-7a62 62 0 003-15c0-5-3-10-7-12-10-5-19-11-28-19-37-37-37-96 0-133l0 0 79-79c37-37 96-37 133 0 37 37 37 96 0 133 0 0-59 59-75 75-3 3-4 6-3 10a163 163 0 011 14c0 10 13 15 20 8a131 131 0 004-3l79-79c51-51 51-133 0-184-51-51-133-51-184 0l-79 79c-51 51-51 133 0 184z'/%3E%3C/svg%3E");
-}
-
-.t42-group-caption-bar {
-    height: auto;
-}
-
-.t42-group-caption-bar-element {
-    background-color: var(--t42-group-caption-background);
-}
-
-.t42-group-caption-bar::after {
-    bottom: 0;
-    height: var(--t42-group-caption-separator-size);
-}
-
-.t42-group-caption-bar-button {
-    width: var(--t42-group-caption-height);
-    height: var(--t42-group-caption-height);
-}
-
-.t42-frame {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-    flex-shrink: 0;
-    position: absolute;
-    overflow: hidden;
-    background-color: transparent;
-    border-style: solid;
-    border-color: var(--t42-frame-border-color);
-    border-width: var(--t42-frame-border-size);
-}
-
-.t42-frame-caption-bar {
-    height: auto;
-}
-
-.t42-frame-caption-bar::after {
-    bottom: 0;
-    height: var(--t42-frame-caption-separator-size);
-}
-
-.t42-frame-caption-bar-element {
-    background-color: var(--t42-frame-caption-background);
-}
-
-.t42-frame-channel-selector {
-    align-self: center;
-    width: var(--t42-frame-channel-selector-size);
-    height: var(--t42-frame-channel-selector-size);
-    margin: var(--t42-frame-channel-selector-margin);
-    justify-content: center;
-}
-
-.t42-frame-channel-selector-content {
-    width: var(--t42-standard-button-size);
-    height: var(--t42-standard-button-size);
-}
-
-.t42-frame-channel-selector-content .t42-standard-button-image {
-    fill: var(--t42-channels-fill-color);
-}
-
-.t42-frame-caption-bar-button {
-    width: var(--t42-frame-caption-height);
-    height: var(--t42-frame-caption-height);
-}
-
-.t42-frame-window-container {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-}
-
-.t42-frame-window {
-    display: flex;
-    flex-grow: 1;
-    background-color: var(--t42-background);
-}
-
-.t42-frame-window-footer {
-    display: flex;
-    flex-grow: 0;
-    flex-direction: column;
-    background-color: var(--t42-background);
-}
-
-.t42-tab-bar {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.t42-tab-bar::after {
-    display: block;
-    content: "";
-    position: absolute;
-    z-index: 1;
-    background-color: var(--t42-caption-separator-color);
-    bottom: 0;
-    height: var(--t42-tab-bar-separator-size);
-    width: 100%;
-}
-
-.t42-tab-bar-header {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 0;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    height: var(--t42-tab-bar-height);
-}
-
-.t42-tab-bar-element {
-    background-color: var(--t42-tab-bar-background);
-}
-
-.t42-tab-bar-button {
-    width: var(--t42-tab-bar-height);
-    height: var(--t42-tab-bar-height);
-}
-
-.t42-tabs {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 0;
-    flex-shrink: 1;
-    overflow: hidden;
-    list-style-type: none;
-    position: relative;
-    padding: 0px;
-    margin: var(--t42-tab-bar-tabs-margin);
-}
-
-.t42-react-tab {
-    display: flex;
-    flex-grow: 1;
-    overflow: hidden;
-}
-
-.t42-tab {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 0;
-    flex-shrink: 1;
-    align-items: center;
-    position: relative;
-    padding: 0px;
-    width: var(--t42-tab-bar-tab-width);
-    min-width: var(--t42-tab-bar-tab-min-width);
-    max-width: var(--t42-tab-bar-tab-width);
-    background-color: var(--t42-tab-bar-tab-background);
-}
-
-.t42-tab::after {
-    width: var(--t42-tab-bar-tab-separator-size);
-    height: 100%;
-    position: absolute;
-    right: 0px;
-    display: block;
-    transition: 0.3s;
-    background-color: var(--t42-tab-bar-tab-separator-color);
-    content: "";
-    z-index: 10;
-}
-
-.t42-tab::before {
-    width: 0;
-    height: 0;
-    position: absolute;
-    left: 50%;
-    bottom: 0px;
-    display: block;
-    background-color: var(--t42-tab-bar-tab-separator-color);
-    content: "";
-    z-index: 10;
-    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
-    transition-duration: 250ms;
-    transition-property: width, left;
-}
-
-.t42-tab:hover::before {
-    width: calc(100% - var(--t42-tab-bar-tab-separator-size));
-    height: var(--t42-tab-bar-tab-hover-separator-size);
-    left: 0;
-}
-
-.t42-tab:hover .t42-tab-caption {
-    color: var(--t42-caption-text-hover-color);
-}
-
-.t42-tab-channel-selector {
-    justify-content: center;
-    width: var(--t42-tab-bar-tab-channels-size);
-    height: var(--t42-tab-bar-tab-channels-size);
-    margin: var(--t42-tab-bar-tab-channels-margin);
-}
-
-.t42-tab-caption {
-    flex-grow: 1;
-    color: var(--t42-tab-bar-tab-text);
-    margin: var(--t42-tab-bar-tab-caption-margin);
-}
-
-.t42-tab-close-button {
-    margin: var(--t42-tab-bar-tab-close-button-margin);
-}
-
-.t42-tab-close-button-content {
-    display: flex;
-    width: calc(
-        var(--t42-tab-bar-tab-close-button-size) +
-            var(--t42-tab-bar-tab-close-button-padding) * 2
-    );
-    height: calc(
-        var(--t42-tab-bar-tab-close-button-size) +
-            var(--t42-tab-bar-tab-close-button-padding) * 2
-    );
-    border-radius: 50%;
-    background-color: transparent;
-    transition-property: background-color, fill;
-    justify-content: center;
-    align-items: center;
-}
-
-.t42-tab-close-button-content svg {
-    padding: var(--t42-tab-bar-tab-close-button-padding);
-    transition-property: fill;
-}
-
-.t42-tab-close-button-content .t42-standard-button-image {
-    fill: var(--t42-tab-bar-tab-text);
-}
-
-.t42-tab-close-button-content:hover {
-    background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
-}
-
-.t42-tab-close-button-content:hover .t42-standard-button-image {
-    fill: var(--t42-tab-bar-tab-text-hover);
-}
-
-.t42-selected-tab-element {
-    background-color: var(--t42-tab-bar-selected-tab-background);
-}
-
-.t42-selected-tab::before {
-    width: calc(100% - var(--t42-tab-bar-tab-separator-size));
-    height: var(--t42-tab-bar-tab-selected-separator-size);
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    display: block;
-    background-color: var(--t42-tab-bar-tab-selected-separator-color);
-    content: "";
-    z-index: 10;
-    transition-property: height;
-}
-
-.t42-selected-tab:hover::before {
-    width: calc(100% - var(--t42-tab-bar-tab-separator-size));
-    height: var(--t42-tab-bar-tab-selected-separator-size);
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    display: block;
-    background-color: var(--t42-tab-bar-tab-selected-separator-color);
-    content: "";
-    z-index: 10;
-}
-
-.t42-selected-tab-caption {
-    color: var(--t42-tab-bar-selected-tab-text);
-}
-
-.t42-selected-tab-close-button-content .t42-standard-button-image {
-    fill: var(--t42-tab-bar-selected-tab-text);
-}
-
-.t42-channel-selector-content-light::before {
-    background-color: white;
-}
-
-.t42-channel-selector-content-dark::before {
-    background-color: black;
-}
-
-@keyframes approaching-edge-animation {
-    from {
-        background-color: var(--t42-approaching-edge-start-color);
-    }
-
-    to {
-        background-color: var(--t42-approaching-edge-end-color);
-    }
-}
-
-.t42-approaching-edge {
-    display: block;
-    position: absolute;
-    z-index: 100;
-    background-color: var(--t42-approaching-edge-start-color);
-    animation: approaching-edge-animation;
-    animation-duration: var(--t42-approaching-edge-animation-duration);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
-.t42-horizontal-approaching-edge {
-    height: var(--t42-approaching-edge-size);
-}
-
-.t42-vertical-approaching-edge {
-    width: var(--t42-approaching-edge-size);
-}
-
-.t42-skip-focus {
-    /* We used non-standard rule to have non-empty style */
-    -moz-user-focus: ignore;
-}