@interopio/groups-ui-react 2.0.0

package/dist/styles/groups.css

@@ -0,0 +1,672 @@
+@import "vars.css";
+
+* {
+    box-sizing: border-box;
+    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
+    transition-duration: 250ms;
+    transition-property: background-color, color;
+}
+
+body {
+    max-width: none;
+    max-height: none;
+    overflow: hidden;
+    background-color: var(--t42-background);
+    color: var(--t42-body-color);
+}
+
+input {
+    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-width: 0;
+    /* DONT TOUCH THIS */
+}
+
+#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;
+    user-select: none;
+    font-size: var(--g42-font-size);
+}
+
+.t42-caption-editor {
+    display: inline-block;
+    color: var(--t42-caption-editor-color);
+    margin: var(--t42-caption-editor-margin);
+    border: var(--spacing-1) solid hsl(var(--g42-interactive-primary));
+    border-radius: var(--border-radius-4);
+    outline: none;
+    min-width: 150px;
+    padding: 0 var(--spacing-2) 0 var(--spacing-2);
+    white-space: nowrap;
+    overflow-x: hidden;
+}
+
+.t42-caption-editor.t42-group-caption-bar-element,
+.t42-caption-editor.t42-frame-caption-bar-element {
+    margin: var(--t42-title-margin);
+}
+
+.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 {
+    position: relative;
+}
+
+.t42-custom-button {
+    height: var(--t42-custom-button-size);
+    width: var(--t42-custom-button-size);
+    background-size: cover;
+    position: relative;
+}
+
+.t42-custom-button {
+    height: var(--t42-custom-button-size);
+    width: var(--t42-custom-button-size);
+    background-size: cover;
+    position: relative;
+}
+
+.t42-standard-button::before,
+.t42-tab-channel-selector-content::before,
+.t42-frame-channel-selector-content::before,
+.t42-tab-close-button-content::before {
+    align-items: center;
+    display: flex;
+    font-family: "io-icons";
+    font-size: var(--spacing-16);
+    justify-content: center;
+    content: "";
+}
+
+.t42-standard-button-image {
+    fill: var(--t42-standard-button-color);
+}
+
+
+.t42-caption-bar-button-lock,
+.t42-caption-bar-button-unlock,
+.t42-caption-bar-button-feedback,
+.t42-caption-bar-button-sticky,
+.t42-caption-bar-button-extract {
+    margin: var(--spacing-2) var(--spacing-2) 0 0;
+    border-radius: var(--border-radius-4);
+}
+
+.t42-caption-bar-button-lock .t42-standard-button::before,
+.t42-caption-bar-button-unlock .t42-standard-button::before,
+.t42-caption-bar-button-feedback .t42-standard-button::before {
+    font-size: var(--spacing-14);
+}
+
+.t42-caption-bar-button:hover .t42-standard-button-close:before {
+    color: var(--t42-caption-bar-button-close-hover-text);
+}
+
+.t42-standard-button-minimize::before {
+    content: "\e904";
+}
+
+.t42-standard-button-maximize::before {
+    content: "\e906";
+}
+
+.t42-standard-button-close::before {
+    content: "\e908";
+}
+
+.t42-tab-close-button-content::before {
+    content: "\e916";
+}
+
+.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 {
+    content: "\e912";
+}
+
+.t42-standard-button-extract::before {
+    content: "\e924";
+}
+
+.t42-standard-button-lock::before {
+    content: "\e90f";
+}
+
+.t42-standard-button-unlock::before {
+    content: "\e901";
+}
+
+.t42-standard-button-feedback::before {
+    content: "\e91c";
+}
+
+.t42-standard-button-sticky::before {
+    content: var(--sticky-icon-off);
+    display: block;
+    height: var(--spacing-14);
+    width: var(--spacing-14);
+    line-height: var(--spacing-14);
+}
+
+
+.t42-caption-bar-button:hover .t42-standard-button-sticky::before {
+    content: var(--sticky-icon-off-hover);
+}
+
+.t42-caption-bar-button.active .t42-standard-button-sticky::before {
+    content: var(--sticky-icon-on);
+    height: var(--spacing-16);
+    width: var(--spacing-16);
+    line-height: var(--spacing-16);
+}
+
+.t42-caption-bar-button.active:hover .t42-standard-button-sticky::before {
+    content: var(--sticky-icon-on-hover);
+}
+
+.t42-tab-channel-selector-content::before,
+.t42-frame-channel-selector-content::before {
+    content: "\e902";
+    font-size: var(--spacing-16);
+}
+
+.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-html {
+    /* Don't touch this! We don't have borders for 'html' mode frames */
+    border-width: 0px;
+}
+
+.t42-focused-frame {
+    border-color: var(--t42-focused-frame-border-color);
+}
+
+.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-header {
+    display: flex;
+    flex-grow: 0;
+    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-button-size);
+    height: var(--t42-tab-bar-button-size);
+}
+
+
+.t42-caption-bar-button {
+    position: relative;
+    background-color: var(--t42-caption-bar-button-background);
+    color: var(--t42-standard-button-color);
+}
+
+.t42-caption-bar-button:hover {
+    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-maximize,
+.t42-caption-bar-button-minimize,
+.t42-caption-bar-button-restore,
+.t42-caption-bar-button-close {
+    width: var(--t42-caption-bar-button-width);
+    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);
+    border-top-right-radius: var(--border-radius-4);
+}
+
+.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 var(--spacing-8);
+    margin-right: var(--spacing-2);
+    width: 150px;
+    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);
+    border-top-right-radius: var(--spacing-4);
+    border-top-left-radius: var(--spacing-4);
+    transition-property: padding;
+
+    container-type: size;
+    
+}
+
+.t42-tab::before {
+    width: var(--t42-tab-bar-tab-separator-size);
+    height: var(--spacing-8);
+    position: absolute;
+    left: calc(var(--spacing-2) * -1);
+    display: block;
+    transition: 0.3s;
+    background-color: var(--t42-tab-bar-tab-separator-color);
+    content: "";
+    z-index: 10;
+    opacity: 1;
+    transition-property: opacity;
+}
+
+.t42-tab:first-of-type::before {
+    content: none;
+}
+
+/* .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);
+    border-radius: var(--t42-tab-bar-tab-channels-border-radius);
+    background-color: transparent;
+    transition-property: width, marign;
+}
+
+.t42-tab-caption {
+    flex-grow: 1;
+    color: var(--t42-tab-bar-tab-text);
+    -webkit-mask-image: linear-gradient(90deg, Hsl(var(--g42-bg-00)) 75%, transparent);
+}
+
+.t42-tab-caption-editor {
+    min-width: unset;
+    -webkit-mask-image: none;
+}
+
+.t42-tab-close-button {
+    margin: var(--t42-tab-bar-tab-close-button-margin);
+    transition-property: 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;
+    font-size: var(--spacing-14);
+}
+
+.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);
+    color: Hsl(var(--g42-label-primary));
+
+}
+
+.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,
+.t42-selected-tab+.t42-tab::before {
+    opacity: 0;
+}
+
+.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);
+    transition-property: width, flex-grow;
+}
+
+.t42-selected-tab-close-button-content .t42-standard-button-image {
+    fill: var(--t42-tab-bar-selected-tab-text);
+}
+
+.t42-channel-selector-content-light::before {
+    color: hsl(var(--g42-white));
+    transition-property: color;
+}
+
+.t42-channel-selector-content-dark::before {
+    color: hsl(var(--g42-black));
+    transition-property: color;
+}
+
+@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;
+}
+
+.loader.active {
+    animation: s3 1.5s infinite linear;
+}
+
+.loader-wrapper {
+    background-color: var(--t42-background);
+    flex-grow: 1;
+}
+
+@keyframes s3 {
+    to {
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes flash {
+    0% {
+        background-color: transparent;
+    }
+
+    50% {
+        background-color: var(--t42-tab-bar-tab-flashing-background);
+    }
+
+    100% {
+        background-color: transparent;
+    }
+}
+
+.t42-tab-flashing {
+    animation: flash 500ms linear infinite;
+}
+
+.t42-tab-flashing .t42-tab-bar-element,
+.t42-tab-flashing .t42-tab-caption {
+    background-color: transparent;
+    color: var(--white);
+}
+
+@container (max-width: 50px) {
+    .t42-tab-channel-selector {
+        width: 0;
+        margin: 0;
+    }
+
+}
+
+@container (max-width: 40px) {
+    .t42-tab-close-button {
+        margin: auto;
+    }
+}
+
+@container (max-width: 30px) {
+    .t42-selected-tab-caption {
+        flex-grow: 0;
+        width: 0;
+    }
+}