bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

@import "/imports/ui/stylesheets/mixins/_indicators";

/* Variables
 * ==========
 */
:root {
  --user-avatar-border: var(--color-gray-light);
  --user-avatar-text: var(--color-white);
  --user-indicator-voice-bg: var(--color-success);
  --user-indicator-muted-bg: var(--color-danger);
  --user-color: currentColor; //picks the current color reference in the class
}

.avatar {
  position: relative;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 50%;
  text-align: center;
  font-size: .85rem;
  border: 2px solid transparent;

  :global(.animationsEnabled) & {
    transition: .3s ease-in-out;
  }

  &:after,
  &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    padding-top: .5rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    color: inherit;
    top: auto;
    left: auto;
    bottom: var(--user-indicators-offset);
    right: var(--user-indicators-offset);
    border: 1.5px solid var(--user-list-bg);
    border-radius: 50%;
    background-color: var(--user-indicator-voice-bg);
    color: var(--user-avatar-text);
    opacity: 0;
    font-family: 'bbb-icons';
    font-size: .65rem;
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    letter-spacing: -.65rem;
    z-index: 1;

    [dir="rtl"] & {
      left: var(--user-indicators-offset);
      right: auto;
      padding-right: .65rem;
      padding-left: 0;
    }

    :global(.animationsEnabled) & {
        transition: .3s ease-in-out;
    }
  }
}

.talking {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--user-color);
  border-radius: inherit;

  :global(.animationsEnabled) & {
    animation: pulse 1s infinite ease-in;
  }

  &::before {
    :global(.animationsDisabled) & {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--user-color);
      border-radius: inherit;
      box-shadow: 0 0 0 4px var(--user-color);
      opacity: .5;
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.moderator {
  border-radius: 5px;
}

.presenter {
  &:before {
    content: "\00a0\e90b\00a0";
    padding: var(--md-padding-y);
  }
  @include presenterIndicator();
}

.voice {
  &:after {
    content: "\00a0\e931\00a0";
    background-color: var(--user-indicator-voice-bg);
    top: 1.375rem;
    left: 1.375rem;
    right: auto;

    [dir="rtl"] & {
      left: auto;
      right: 1.375rem;
    }
  }
}

.noVoice {
  &:after {
    content: "";
    background-color: var(--color-off-white);
    top: 1.375rem;
    left: 1.375rem;
    right: auto;

    [dir="rtl"] & {
      left: auto;
      right: 1.375rem;
    }
  }
}

.muted {
  &:after {
    content: "\00a0\e932\00a0";
    background-color: var(--user-indicator-muted-bg);
  }
}

.listenOnly {
  &:after {
    content: "\00a0\e90c\00a0";
  }
}

.listenOnly,
.muted,
.voice,
.noVoice {
  @include indicatorStyles();
}

.image {
  display: flex;
  height: 2rem;
  width: 2rem;

  .img {
    object-fit: cover;
    overflow: hidden;
  }

  .circle {
    border-radius: 50%;
  }

  .square {
    border-radius: 3px;
  }
}

.content {
  color: var(--user-avatar-text);
  top: 50%;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 110%;
  text-transform: capitalize;

  &,
  & > * {
    line-height: 0; // to keep centralized vertically
  }
}