@stream-io/video-styling 1.0.2

package/src/CallStats.scss

@@ -0,0 +1,118 @@
+.str-video__call-stats {
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-md);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  h3 {
+    margin: unset;
+  }
+
+  .str-video__call-stats__header {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--str-video__spacing-md);
+  }
+
+  .str-video__call-stats__heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .str-video__call-stats__icon {
+    margin-right: var(--str-video__spacing-sm);
+    height: 18px;
+    width: 18px;
+  }
+
+  .str-video__call-stats__description {
+    font-size: var(--str-video__font-size-sm);
+    margin-bottom: var(--str-video__spacing-sm);
+    font-weight: 600;
+  }
+
+  .str-video__call-stats__card-container {
+    --gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: var(--gap);
+  }
+
+  .str-video__call-stats__card {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--str-video__background-color4);
+    border-radius: var(--str-video__border-radius-xs);
+    width: calc(50% - calc(var(--gap) / 2));
+    padding: 0.5rem 0.5rem;
+
+    .str-video__call-stats__card-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .str-video__call-stats__card-label {
+      display: flex;
+      color: var(--str-video__text-color2);
+      font-size: 0.5625rem;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    .str-video__call-stats__card-value {
+      font-size: 1.0625rem;
+      font-weight: 500;
+      line-height: 1.25rem;
+    }
+  }
+
+  .str-video__call-explanation__icon {
+    height: 12px;
+    width: 12px;
+    margin-left: var(--str-video__spacing-xs);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .str-video__call-explanation__description {
+    background-color: var(--str-video__base-color3);
+    padding: var(--str-video__spacing-xs);
+    font-size: var(--str-video__font-size-xs);
+    border-radius: var(--str-video__border-radius-xs);
+  }
+
+  .str-video__call-stats-line-chart-container {
+    position: relative;
+    margin: auto;
+    height: 170px;
+    width: 100%;
+  }
+
+  .str-video__call-stats__tag {
+    border-radius: var(--str-video__border-radius-sm);
+    padding: var(--str-video__spacing-xs);
+    font-size: var(--str-video__font-size-sm);
+    font-weight: 600;
+    height: 30px;
+
+    &--good {
+      color: var(--str-video__alert-success);
+      background-color: var(--str-video__alert-success-background);
+    }
+    &--ok {
+      color: var(--str-video__alert-caution);
+      background-color: var(--str-video__alert-caution-background);
+    }
+
+    &--bad {
+      color: var(--str-video__alert-warning);
+      background-color: var(--str-video__alert-warming-background);
+    }
+  }
+}

package/src/DeviceSettings/DeviceSettings-layout.scss

@@ -0,0 +1,113 @@
+.str-video__device-settings__button {
+  .str-video__call-controls__button--icon-device-settings {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+.str-video__device-settings {
+  padding: 0.625rem;
+  z-index: 1;
+  font-family: 'Inter';
+}
+
+.str-video__device-settings__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 33px;
+}
+
+.str-video__icon.str-video__device-settings__settings-icon {
+  height: 24px;
+  width: 24px;
+  color: var(--str-video__base-color1);
+}
+
+.str-video__device-settings__heading {
+  width: 100%;
+  justify-self: start;
+  margin: unset;
+  margin-left: 8px;
+  color: var(--str-video__base-color1);
+  font-size: 24;
+  font-weight: 500;
+  word-wrap: 'break-word';
+}
+
+.str-video__device-settings__close-button {
+  color: var(--str-video__base-color1);
+  background-color: transparent;
+}
+
+.str-video__device-settings__device-kind {
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-lg);
+  border-radius: var(--str-video__border-radius-lg);
+
+  .str-video__device-settings__device-selector-title {
+    font-size: var(--str-video__font-size-xs);
+    line-height: 1.25rem;
+
+    padding-bottom: 0.5rem;
+    font-size: 13px;
+    margin-bottom: 8px;
+  }
+
+  .str-video__option,
+  .str-video__device-settings__option {
+    display: flex;
+    align-items: center;
+    border-radius: var(--str-video__border-radius-lg);
+    background-color: var(--str-video__button-primary-base);
+    padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+
+    gap: 8px;
+
+    font-weight: 600;
+    font-size: var(--str-video__font-size-sm);
+
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    &__icon {
+      &--selected {
+        background-color: var(--str-video__brand-color1);
+      }
+    }
+
+    &:hover {
+      background-color: var(--str-video__button-default-hover);
+      cursor: pointer;
+    }
+
+    &--selected,
+    &--active {
+      background-color: var(--str-video__button-default-hover);
+    }
+
+    input[type='radio'] {
+      margin: 0;
+      height: 1rem;
+      width: 1rem;
+      display: grid;
+      place-content: center;
+
+      &::before {
+        content: '';
+        width: 0.5rem;
+        height: 0.5rem;
+        transform: scale(0);
+      }
+      &:checked::before {
+        transform: scale(1);
+      }
+
+      &:checked {
+        border-color: var(--str-video__primary-color);
+      }
+    }
+  }
+}

package/src/DeviceSettings/index.scss

@@ -0,0 +1 @@
+@import 'DeviceSettings-layout';

package/src/DropdownSelect/DropdownSelect.scss

@@ -0,0 +1,104 @@
+.str-video {
+  &__dropdown {
+    position: relative;
+    &-selected {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: var(--str-video__base-color4);
+      border-radius: var(--str-video__border-radius-lg);
+      border: 1px solid var(--str-video__base-color6);
+
+      &__label {
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        padding: var(--str-video__spacing-sm);
+        font-size: var(--str-video__font-size-xs);
+      }
+
+      &__icon {
+        margin-right: var(--str-video__spacing-sm);
+      }
+
+      &__chevron {
+        margin-right: var(--str-video__spacing-md);
+      }
+
+      & > *:hover,
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:hover {
+        border: 1px solid var(--str-video__brand-color1);
+      }
+    }
+
+    &-list {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      margin-top: var(--str-video__spacing-sm);
+      background-color: var(--str-video__base-color4);
+      border-radius: var(--str-video__border-radius-lg);
+      padding: var(--str-video__spacing-md);
+
+      box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.75);
+    }
+
+    &-option {
+      display: flex;
+      align-items: center;
+      border-radius: var(--str-video__border-radius-lg);
+
+      padding: 8px 16px;
+      margin-top: 8px;
+      gap: 8px;
+
+      font-weight: 600;
+      font-size: var(--str-video__font-size-sm);
+
+      &:hover {
+        background-color: var(--str-video__button-default-hover);
+        cursor: pointer;
+      }
+
+      &--selected {
+        background-color: var(--str-video__button-primary-active);
+        color: var(--str-video__text-color1);
+
+        &:hover {
+          background-color: var(--str-video__button-primary-hover);
+        }
+      }
+    }
+
+    &-icon {
+      background-color: var(--str-video__icon-default);
+
+      .str-video__dropdown__option:hover & {
+        background-color: var(--str-video__icon-hover);
+      }
+
+      .str-video__dropdown-option--selected & {
+        background-color: var(--str-video__text-color1);
+      }
+    }
+
+    &-label {
+      font-size: var(--str-video__font-size-xs);
+      .str-video__dropdown__option:hover & {
+        color: var(--str-video__base-color1);
+      }
+    }
+  }
+}
+
+@media (min-width: 600px) {
+  .str-video__dropdown-selected__label {
+    font-size: var(--str-video__font-size-sm);
+  }
+}

package/src/DropdownSelect/index.scss

@@ -0,0 +1 @@
+@import 'DropdownSelect';

package/src/Icon/Icon-layout.scss

@@ -0,0 +1,11 @@
+.str-video__icon {
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  display: block;
+  width: 1.375rem;
+  height: 1.375rem;
+}

package/src/Icon/Icon-theme.scss

@@ -0,0 +1,348 @@
+.str-video__icon {
+  background-color: var(--str-video__base-color1);
+
+  &--chat {
+    mask-image: var(--str-video__icon--chat);
+    -webkit-mask-image: var(--str-video__icon--chat);
+  }
+
+  &--reactions {
+    -webkit-mask-image: var(--str-video__icon--reactions);
+    mask-image: var(--str-video__icon--reactions);
+  }
+
+  &--call-latency {
+    -webkit-mask-image: var(--str-video__icon--call-latency);
+    mask-image: var(--str-video__icon--call-latency);
+  }
+
+  &--network-quality {
+    -webkit-mask-image: var(--str-video__icon--network-quality);
+    mask-image: var(--str-video__icon--network-quality);
+  }
+
+  &--support-agent {
+    -webkit-mask-image: var(--str-video__icon--support-agent);
+    mask-image: var(--str-video__icon--support-agent);
+  }
+
+  &--recording-on {
+    mask-image: var(--str-video__icon--recording-on);
+    -webkit-mask-image: var(--str-video__icon--recording-on);
+  }
+
+  &--mediation {
+    mask-image: var(--str-video__icon--mediation);
+    -webkit-mask-image: var(--str-video__icon--mediation);
+  }
+
+  &--copy {
+    mask-image: var(--str-video__icon--copy);
+    -webkit-mask-image: var(--str-video__icon--copy);
+  }
+
+  &--caret-up {
+    mask-image: var(--str-video__icon--caret-up);
+    -webkit-mask-image: var(--str-video__icon--caret-up);
+  }
+
+  &--download {
+    mask-image: var(--str-video__icon--download);
+    -webkit-mask-image: var(--str-video__icon--download);
+  }
+
+  &--caret-down {
+    mask-image: var(--str-video__icon--caret-down);
+    -webkit-mask-image: var(--str-video__icon--caret-down);
+    transform: rotate(180deg);
+  }
+
+  &--layout-speaker-bottom {
+    mask-image: var(--str-video__icon--layout-speaker-bottom);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-bottom);
+  }
+
+  &--layout-speaker-top {
+    mask-image: var(--str-video__icon--layout-speaker-top);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-top);
+  }
+
+  &--layout-speaker-left {
+    mask-image: var(--str-video__icon--layout-speaker-left);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-left);
+  }
+
+  &--layout-speaker-one-on-one {
+    mask-image: var(--str-video__icon--layout-speaker-one-on-one);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-one-on-one);
+  }
+
+  &--layout-speaker-live-stream {
+    mask-image: var(--str-video__icon--layout-speaker-live-stream);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-live-stream);
+  }
+
+  &--layout-speaker-right {
+    mask-image: var(--str-video__icon--layout-speaker-right);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-right);
+  }
+
+  &--layout {
+    mask-image: var(--str-video__icon--layout);
+    -webkit-mask-image: var(--str-video__icon--layout);
+  }
+
+  &--folder {
+    mask-image: var(--str-video__icon--folder);
+    -webkit-mask-image: var(--str-video__icon--folder);
+  }
+
+  &--paperclip {
+    mask-image: var(--str-video__icon--paperclip);
+    -webkit-mask-image: var(--str-video__icon--paperclip);
+  }
+
+  &--chevron-right {
+    mask-image: var(--str-video__icon--chevron-right);
+    -webkit-mask-image: var(--str-video__icon--chevron-right);
+  }
+
+  &--recording-off {
+    mask-image: var(--str-video__icon--recording-off);
+    -webkit-mask-image: var(--str-video__icon--recording-off);
+  }
+
+  &--camera-add {
+    mask-image: var(--str-video__icon--camera-add);
+    -webkit-mask-image: var(--str-video__icon--camera-add);
+  }
+
+  &--person-add {
+    mask-image: var(--str-video__icon--person-add);
+    -webkit-mask-image: var(--str-video__icon--person-add);
+  }
+
+  &--qr-code {
+    mask-image: var(--str-video__icon--qr-code);
+    -webkit-mask-image: var(--str-video__icon--qr-code);
+  }
+
+  &--loading {
+    mask-image: var(--str-video__icon--loading);
+    -webkit-mask-image: var(--str-video__icon--loading);
+
+    transform: rotate(360deg);
+    transition-duration: 1s;
+    transition-delay: now;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  &--login {
+    mask-image: var(--str-video__icon--login);
+    -webkit-mask-image: var(--str-video__icon--login);
+  }
+
+  &--logout {
+    mask-image: var(--str-video__icon--logout);
+    -webkit-mask-image: var(--str-video__icon--logout);
+  }
+
+  &--provider-google {
+    mask-image: var(--str-video__icon--provider-google);
+    -webkit-mask-image: var(--str-video__icon--provider-google);
+  }
+
+  &--person-off {
+    mask-image: var(--str-video__icon--person-off);
+    -webkit-mask-image: var(--str-video__icon--person-off);
+  }
+
+  &--verified {
+    mask-image: var(--str-video__icon--verified);
+    -webkit-mask-image: var(--str-video__icon--verified);
+  }
+
+  &--chevron-up {
+    mask-image: var(--str-video__icon--chevron-up);
+    -webkit-mask-image: var(--str-video__icon--chevron-up);
+  }
+
+  &--chevron-down {
+    mask-image: var(--str-video__icon--chevron-down);
+    -webkit-mask-image: var(--str-video__icon--chevron-down);
+  }
+
+  &--developer {
+    mask-image: var(--str-video__icon--developer);
+    -webkit-mask-image: var(--str-video__icon--developer);
+  }
+
+  &--screen-share-on {
+    mask-image: var(--str-video__icon--screen-share-on);
+    -webkit-mask-image: var(--str-video__icon--screen-share-on);
+  }
+
+  &--screen-share-off {
+    mask-image: var(--str-video__icon--screen-share-off);
+    -webkit-mask-image: var(--str-video__icon--screen-share-off);
+  }
+
+  &--caret-down {
+    transform: rotate(180deg);
+    mask-image: var(--str-video__icon--caret);
+    -webkit-mask-image: var(--str-video__icon--caret);
+  }
+
+  &--caret-up {
+    mask-image: var(--str-video__icon--caret);
+    -webkit-mask-image: var(--str-video__icon--caret);
+  }
+
+  &--caret-right {
+    transform: rotate(90deg);
+    mask-image: var(--str-video__icon--caret);
+    -webkit-mask-image: var(--str-video__icon--caret);
+  }
+
+  &--caret-left {
+    transform: rotate(-90deg);
+    mask-image: var(--str-video__icon--caret);
+    -webkit-mask-image: var(--str-video__icon--caret);
+  }
+
+  &--star {
+    mask-image: var(--str-video__icon--star);
+    -webkit-mask-image: var(--str-video__icon--star);
+  }
+
+  &--close {
+    mask-image: var(--str-video__icon--close);
+    -webkit-mask-image: var(--str-video__icon--close);
+  }
+
+  &--mic {
+    mask-image: var(--str-video__icon--mic);
+    -webkit-mask-image: var(--str-video__icon--mic);
+  }
+
+  &--mic-off {
+    mask-image: var(--str-video__icon--mic-off);
+    -webkit-mask-image: var(--str-video__icon--mic-off);
+  }
+
+  &--more {
+    mask-image: var(--str-video__icon--more);
+    -webkit-mask-image: var(--str-video__icon--more);
+  }
+
+  &--camera {
+    mask-image: var(--str-video__icon--camera);
+    -webkit-mask-image: var(--str-video__icon--camera);
+  }
+
+  &--camera-off {
+    mask-image: var(--str-video__icon--camera-off);
+    -webkit-mask-image: var(--str-video__icon--camera-off);
+  }
+
+  &--camera-off-outline {
+    mask-image: var(--str-video__icon--camera-off-outline);
+    -webkit-mask-image: var(--str-video__icon--camera-off-outline);
+  }
+
+  &--call-end {
+    mask-image: var(--str-video__icon--call-end);
+    -webkit-mask-image: var(--str-video__icon--call-end);
+  }
+
+  &--call-accept {
+    mask-image: var(--str-video__icon--call-accept);
+    -webkit-mask-image: var(--str-video__icon--call-accept);
+  }
+
+  &--info {
+    -webkit-mask-image: var(--str-video__icon--info-icon);
+    mask-image: var(--str-video__icon--info-icon);
+  }
+
+  &--feedback {
+    -webkit-mask-image: var(--str-video__icon--feedback);
+    mask-image: var(--str-video__icon--feedback);
+  }
+
+  &--info-document {
+    -webkit-mask-image: var(--str-video__icon--info-document);
+    mask-image: var(--str-video__icon--info-document);
+  }
+
+  &--stats {
+    -webkit-mask-image: var(--str-video__icon--stats);
+    mask-image: var(--str-video__icon--stats);
+  }
+
+  &--participants {
+    mask-image: var(--str-video__icon--participants);
+    -webkit-mask-image: var(--str-video__icon--participants);
+  }
+
+  &--user-plus {
+    mask-image: var(--str-video__icon--user-plus);
+    -webkit-mask-image: var(--str-video__icon--user-plus);
+  }
+
+  &--speaker {
+    mask-image: var(--str-video__icon--speaker);
+    -webkit-mask-image: var(--str-video__icon--speaker);
+  }
+
+  &--language {
+    mask-image: var(--str-video__icon--language);
+    -webkit-mask-image: var(--str-video__icon--language);
+  }
+
+  &--ellipsis {
+    mask-image: var(--str-video__icon--ellipsis);
+    -webkit-mask-image: var(--str-video__icon--ellipsis);
+  }
+
+  &--grid {
+    mask-image: var(--str-video__icon--grid);
+    -webkit-mask-image: var(--str-video__icon--grid);
+  }
+
+  &--pin {
+    mask-image: var(--str-video__icon--pin);
+    -webkit-mask-image: var(--str-video__icon--pin);
+  }
+
+  &--no-audio {
+    mask-image: var(--str-video__icon--no-audio);
+    -webkit-mask-image: var(--str-video__icon--no-audio);
+  }
+
+  &--not-allowed {
+    mask-image: var(--str-video__icon--not-allowed);
+    -webkit-mask-image: var(--str-video__icon--not-allowed);
+  }
+
+  &--film-roll {
+    mask-image: var(--str-video__icon--film-roll);
+    -webkit-mask-image: var(--str-video__icon--film-roll);
+  }
+
+  &--device-settings {
+    mask-image: var(--str-video__icon--settings);
+    -webkit-mask-image: var(--str-video__icon--settings);
+  }
+
+  &--filter {
+    mask-image: var(--str-video__icon--filter);
+    -webkit-mask-image: var(--str-video__icon--filter);
+  }
+
+  &--refresh {
+    mask-image: var(--str-video__icon--refresh);
+    -webkit-mask-image: var(--str-video__icon--refresh);
+  }
+}

package/src/Icon/index.scss

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

package/src/LoadingIndicator/LoadingIndicator-layout.scss

@@ -0,0 +1,5 @@
+.str-video__loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}