@stream-io/video-styling 1.0.2

package/src/LoadingIndicator/LoadingIndicator-theme.scss

@@ -0,0 +1,20 @@
+@use '../utils';
+
+.str-video__loading-indicator__icon.spinner {
+  @include utils.apply-mask-image(
+    var(--str-video__icon--loading),
+    var(--str-video__text-color2)
+  );
+  animation: rotation 1s linear infinite;
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/LoadingIndicator/index.scss

@@ -0,0 +1,2 @@
+@import "LoadingIndicator-layout";
+@import "LoadingIndicator-theme";

package/src/Menu/GenericMenu-layout.scss

@@ -0,0 +1,62 @@
+.str-video__generic-menu {
+  list-style: none;
+  margin: unset;
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-md);
+
+  border-radius: var(--str-video__border-radius-lg);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+
+  .str-video__generic-menu--item {
+    align-items: center;
+
+    margin-top: 8px;
+    gap: 8px;
+
+    font-weight: 600;
+    font-size: var(--str-video__font-size-md);
+
+    display: flex;
+    button {
+      all: unset;
+      width: 100%;
+      font-size: 13px;
+      border-radius: var(--str-video__border-radius-lg);
+      background-color: var(--str-video__button-primary-base);
+      padding: 8px 16px;
+      gap: 10px;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .str-video__icon {
+        width: 1.1rem;
+        height: 1rem;
+      }
+
+      &:hover {
+        background-color: var(--str-video__button-default-hover);
+        cursor: pointer;
+      }
+
+      &--selected,
+      &--active {
+        background-color: var(--str-video__button-primary-hover);
+      }
+    }
+
+    // TODO: remove once "device selector" component becomes reusable
+    button[aria-selected] {
+      padding: 5px 10px 5px 26px;
+    }
+    button[aria-selected='true']::after {
+      content: '●';
+      font-size: 10px;
+      left: 10px;
+      position: absolute;
+    }
+  }
+}

package/src/Menu/Menu-layout.scss

@@ -0,0 +1,9 @@
+.str-video__menu-container {
+  z-index: 2;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/src/Menu/Menu-theme.scss

@@ -0,0 +1,4 @@
+.str-video__menu-container {
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-lg);
+}

package/src/Menu/Portal-layout.scss

@@ -0,0 +1,21 @@
+.str-video__portal {
+  position: fixed;
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--str-video__backdrop1);
+
+  left: 0;
+  top: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+.str-video__portal-content {
+  z-index: 2;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/Menu/index.scss

@@ -0,0 +1,5 @@
+@import 'Menu-layout';
+@import 'Portal-layout';
+@import 'Menu-theme';
+@import 'GenericMenu-layout';
+@import 'GenericMenu-theme';

package/src/Notification/Notification-layout.scss

@@ -0,0 +1,26 @@
+.str-video__notification {
+  padding: 0.625rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  .str-video__notification__icon {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .str-video__notification__message {
+    flex: 1;
+  }
+
+  .str-video__notification__close {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

package/src/Notification/Notification-theme.scss

@@ -0,0 +1,19 @@
+@use '../utils';
+
+.str-video__notification {
+  background-color: var(--str-video__background-color1);
+  border-radius: var(--str-video__border-radius-xs);
+  z-index: 100;
+
+  .str-video__notification__icon {
+    @include utils.apply-mask-image(
+      var(--str-video__icon--info-icon),
+      var(--str-video__text-color1),
+      1.5rem
+    );
+  }
+
+  .str-video__notification__message {
+    font-size: 0.75rem;
+  }
+}

package/src/Notification/index.scss

@@ -0,0 +1,2 @@
+@import "Notification-layout";
+@import "Notification-theme";

package/src/ParticipantView/ParticipantView-layout.scss

@@ -0,0 +1,213 @@
+$scope-name: 'str-video__participant-view';
+
+.str-video__participant-view {
+  position: relative;
+  width: 100%;
+  max-width: 1280px;
+  max-height: 100%;
+  min-height: 0;
+  aspect-ratio: 4/3;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--str-video__border-radius-sm);
+
+  &--speaking {
+    outline: 2px solid var(--str-video__primary-color);
+  }
+
+  .str-video__call-controls__button {
+    transition: opacity 200ms ease-out;
+    opacity: 0.3;
+    color: var(--str-video__text-color1);
+  }
+
+  &:hover {
+    .str-video__call-controls__button {
+      opacity: 1;
+    }
+  }
+
+  & > .str-video__call-controls__button {
+    position: absolute;
+    top: 0.875rem;
+    left: 0.875rem;
+    padding: 0.3rem;
+  }
+
+  .str-video__participant-details {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--str-video__spacing-sm);
+    border-radius: 0 var(--str-video__border-radius-xs) 0
+      var(--str-video__border-radius-sm);
+    background-color: var(--str-video__background-color4);
+
+    .str-video__participant-details__name {
+      display: flex;
+      align-items: center;
+      gap: var(--str-video__spacing-sm);
+      padding: 4px 6px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--str-video__font-size-sm);
+
+      @mixin icon {
+        $icon-size: 1rem;
+        width: $icon-size;
+        height: $icon-size;
+        mask-size: $icon-size;
+        -webkit-mask-size: $icon-size;
+        background-color: var(--str-video__text-color1);
+      }
+
+      .str-video__participant-details__name--audio-muted {
+        @include icon();
+        mask-image: var(--str-video__icon--mic-off);
+        -webkit-mask-image: var(--str-video__icon--mic-off);
+      }
+
+      .str-video__participant-details__name--video-muted {
+        @include icon();
+        mask-image: var(--str-video__icon--camera-off);
+        -webkit-mask-image: var(--str-video__icon--camera-off);
+      }
+
+      .str-video__participant-details__name--pinned {
+        cursor: pointer;
+        @include icon();
+        width: 0.8rem;
+        -webkit-mask-size: 0.8rem;
+        height: 1rem;
+        mask-size: 0.8rem;
+        mask-repeat: no-repeat;
+        -webkit-mask-repeat: no-repeat;
+        mask-position: center;
+        -webkit-mask-position: center;
+        mask-image: var(--str-video__icon--pin);
+        -webkit-mask-image: var(--str-video__icon--pin);
+      }
+
+      .str-video__participant-details__name--network-stats {
+        @include icon();
+        background-image: var(--str-video__icon--network-quality);
+        cursor: pointer;
+        margin-right: 0.625rem;
+      }
+    }
+  }
+
+  .str-video__participant-details__connection-quality {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    border-radius: var(--str-video__border-radius-sm) 0
+      var(--str-video__border-radius-sm) 0;
+
+    width: 24px;
+    height: 24px;
+    display: block;
+    background-size: cover;
+    background-color: var(--str-video__background-color4);
+
+    &--poor {
+      background-image: var(--str-video__icon--connection-quality-poor);
+    }
+    &--good {
+      background-image: var(--str-video__icon--connection-quality-good);
+    }
+    &--excellent {
+      background-image: var(--str-video__icon--connection-quality-excellent);
+    }
+  }
+}
+
+.str-video__speech-indicator {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1px;
+  height: 16px;
+
+  .str-video__speech-indicator__bar {
+    width: 3px;
+    height: 20%;
+    background-color: var(--str-video__primary-color);
+    border-radius: 2px;
+    animation-duration: 0.4s;
+    animation-iteration-count: 1;
+    animation-name: speech-indicator-silence;
+    animation-timing-function: ease-in-out;
+  }
+
+  &.str-video__speech-indicator--dominant {
+    .str-video__speech-indicator__bar {
+      background-color: var(--str-video__primary-color);
+    }
+  }
+
+  &.str-video__speech-indicator--speaking {
+    .str-video__speech-indicator__bar {
+      height: 100%;
+      animation-iteration-count: infinite;
+
+      &:nth-child(1) {
+        height: 70%;
+        animation-duration: 0.8s;
+        animation-name: speech-indicator-quiet;
+      }
+      &:nth-child(2) {
+        height: 80%;
+        animation-duration: 1s;
+        animation-name: speech-indicator-loud;
+      }
+      &:nth-child(3) {
+        height: 60%;
+        animation-duration: 0.9s;
+        animation-name: speech-indicator-quiet;
+      }
+    }
+  }
+
+  @keyframes speech-indicator-silence {
+    25% {
+      transform: scaleY(2);
+    }
+    50% {
+      transform: scaleY(2.5);
+    }
+    75% {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes speech-indicator-quiet {
+    25% {
+      transform: scaleY(0.5);
+    }
+    50% {
+      transform: scaleY(0.3);
+    }
+    75% {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @keyframes speech-indicator-loud {
+    25% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(0.45);
+    }
+    75% {
+      transform: scaleY(1.1);
+    }
+  }
+}

package/src/ParticipantView/index.scss

@@ -0,0 +1 @@
+@import './ParticipantView-layout';

package/src/Permissions/Permissions-layout.scss

@@ -0,0 +1,55 @@
+.str-video__permission-requests {
+  background-color: var(--str-video__background-color1);
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+
+  .str-video__permission-requests__notification,
+  .str-video__permission-request {
+    display: flex;
+    gap: 10px;
+    padding: 10px 0;
+    align-items: center;
+  }
+
+  .str-video__permission-requests__notification__message,
+  .str-video__permission-request__message {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .str-video__permission-request__button {
+    background-color: transparent;
+    border: 1px solid var(--str-video__text-color1);
+    border-radius: 4px;
+    color: var(--str-video__color1);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px;
+    min-width: 120px;
+  }
+
+  .str-video__permission-request__button--allow {
+    background-color: var(--str-video__primary-color);
+    border: 1px solid var(--str-video__primary-color);
+  }
+
+  .str-video__permission-requests-list {
+    background-color: var(--str-video__background-color1);
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    padding: 10px;
+    width: 100%;
+    z-index: 1;
+    opacity: 0.9;
+    overflow-x: scroll;
+    overflow-y: hidden;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

package/src/Permissions/index.scss

@@ -0,0 +1 @@
+@import './Permissions-layout';

package/src/Reaction/Reaction-layout.scss

@@ -0,0 +1,11 @@
+.str-video__reaction {
+  position: absolute;
+  right: 0.875rem;
+  top: 0.875rem;
+
+  .str-video__reaction__emoji {
+    display: flex;
+    line-height: 1;
+    font-size: 2.5rem;
+  }
+}

package/src/Reaction/index.scss

@@ -0,0 +1 @@
+@import "Reaction-layout";

package/src/RingingCall/RingingCall-layout.scss

@@ -0,0 +1,43 @@
+.str-video__call-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 400px;
+  height: 300px;
+  padding: 1rem 1rem 0.5rem;
+  gap: 1rem;
+}
+
+.str-video__call-panel--ringing {
+  .str-video__call-panel__members-list {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    .str-video__call-panel__member-box {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+
+      .str-video__avatar {
+        width: 80px;
+        height: 80px;
+      }
+
+      .str-video__member_details {
+        position: absolute;
+        bottom: 10%;
+        padding: 0.125rem 0.375rem;
+      }
+    }
+  }
+
+  .str-video__pending-call-controls {
+    display: flex;
+    gap: 0.675rem;
+  }
+}

package/src/RingingCall/RingingCall-theme.scss

@@ -0,0 +1,39 @@
+.str-video__call-panel {
+  background: var(--str-video__background-color3);
+  border: 2px solid rgba(200,200,200,0.6);
+  border-radius: 10px;
+}
+
+.str-video__call-panel--ringing {
+  .str-video__call-panel__members-list {
+
+    .str-video__call-panel__member-box {
+      border-radius: var(--str-video__border-radius-circle);
+      background: var(--str-video__background-color6);
+
+      &:before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: var(--str-video__border-radius-circle);
+        padding: 4px;
+        background:linear-gradient(
+            180deg,var(--str-video__primary-color),var(--str-video__info-color)
+        );
+        -webkit-mask:
+          linear-gradient(#fff 0 0) content-box,
+          linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+      }
+
+      .str-video__member_details {
+        background-color: var(--str-video__background-color4);
+        color: var(--str-video__text-color1);
+        border-radius: 4px;
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+  }
+}

package/src/RingingCall/index.scss

@@ -0,0 +1,2 @@
+@import "RingingCall-layout";
+@import "RingingCall-theme";

package/src/ScreenShareOverlay/ScreenShareOverlay-layout.scss

@@ -0,0 +1,28 @@
+.str-video__screen-share-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  gap: 1.8rem;
+
+  & > .str-video__icon {
+    width: 4rem;
+    height: 4rem;
+  }
+
+  .str-video__screen-share-overlay__button {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    padding-inline: 1.6rem;
+    padding-block: 0.8rem;
+
+    .str-video__icon {
+      width: 0.7rem;
+      height: 0.7rem;
+    }
+  }
+}

package/src/ScreenShareOverlay/ScreenShareOverlay-theme.scss

@@ -0,0 +1,19 @@
+.str-video__screen-share-overlay {
+  background: var(--str-video__overlay-color);
+  backdrop-filter: blur(3px);
+  border-radius: inherit;
+
+  .str-video__screen-share-overlay__title {
+    font-size: 1.3rem;
+  }
+
+  .str-video__screen-share-overlay__button {
+    color: white;
+    background: var(--str-video__danger-color);
+    border-radius: var(--str-video__border-radius-xs);
+
+    &:hover {
+      background-color: var(--str-video__danger-color--accent);
+    }
+  }
+}

package/src/ScreenShareOverlay/index.scss

@@ -0,0 +1,2 @@
+@import 'ScreenShareOverlay-layout';
+@import 'ScreenShareOverlay-theme';

package/src/Search/SearchInput-layout.scss

@@ -0,0 +1,29 @@
+.str-video__search-input__container {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  margin-inline: -0.25rem;
+
+  input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .str-video__search-input__clear-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .str-video__search-input__icon {
+    padding: 0.25rem;
+  }
+
+  .str-video__search-input__icon--active,
+  .str-video__search-input__icon {
+    display: inline-block;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}