bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss

@import "../../../stylesheets/variables/_all";
@import "../../../stylesheets/variables/typography";
@import "../../../stylesheets/mixins/_indicators";

:root {
  --spoke-opacity: .5;
  --talker-margin-sm: .5rem;
  --talker-max-width: 10rem;
  --talker-font-weight: 400;
  --talker-border-radius: 2rem;
  --max-speaker-height: 1.5rem;
  --icon-offset: 1.1rem;
}

.hidden {
  display: none;
}

.isTalkingWrapper,
.speaking,
.talker,
.spoke {
  display: flex;
  flex-direction: row;
}

.isTalkingWrapper {
  position: relative;
  margin-top: var(--talker-margin-sm);
  overflow: hidden;
}

.speaking {
  flex-wrap: wrap;
  max-height: var(--max-speaker-height);
}

.talker {
  @include highContrastOutline();
  color: white;
  font-weight: var(--talker-font-weight);
  border-radius: var(--talker-border-radius) var(--talker-border-radius);
  font-size: var(--font-size-base);
  padding-left: var(--border-radius);
  padding-right: var(--border-radius);
  margin-left: var(--border-radius);
  margin-right: var(--border-radius);

  > span {
    max-width: var(--talker-max-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  i {
    position: relative;
    top: var(--border-size-large);
    font-size: var(--font-size-small);
  }
}

.spoke {
  opacity: var(--spoke-opacity);
  padding-right: var(--icon-offset);

  [dir="rtl"]  & {
    padding-left: var(--icon-offset);
    padding-right: var(--border-radius);
  }
 }

.unmuted {
  cursor: pointer;
}

.muted {
  cursor: default;
}