lila/ui/analyse/css/study/_members.scss

.study__members {
  @extend %study-list;

  button {
    width: 100%;
    text-align: start;
  }

  .left {
    @extend %flex-center-nowrap;

    align-items: stretch;
    flex: 0 1 auto;
    overflow: hidden;
  }

  .user-link {
    @extend %ellipsis;

    margin: 0.5em 0;
  }

  .status {
    @extend %flex-center-center;

    width: 2.4em;
    margin-inline-end: 0.1em;
    transition: 2.5s;
  }

  i {
    font-size: 1.2em;
    opacity: 0.5;
    transition: 2.5s;
  }

  .contrib i {
    opacity: 0.7;
  }

  .online i {
    opacity: 0.8;
    color: $c-good;
  }

  .online.contrib i {
    opacity: 1;
  }

  .study-list > div:nth-child(4n-3) .status.active {
    background: #42a5f5;
  }

  .study-list > div:nth-child(4n-2) .status.active {
    background: #f44336;
  }

  .study-list > div:nth-child(4n-1) .status.active {
    background: #fdd835;
  }

  .study-list > div:nth-child(4n-0) .status.active {
    background: #4caf50;
  }

  .status.active {
    transition: none;

    i {
      transition: none;
      opacity: 1;
      color: #fff;
    }
  }

  .leave {
    color: $c-bad;
    opacity: 0.7;
  }

  .study-list > div:hover .leave:hover {
    background-color: $c-bad;
  }

  .add {
    @extend %roboto;

    &:hover i {
      color: $c-link;
      opacity: 1;
      transition: none;
    }
  }

  .admin {
    text-align: center;

    button {
      margin-bottom: 0.5em;
    }
  }

  m-config,
  .editing {
    background: $m-accent_bg--mix-10 !important;
  }

  m-config {
    @extend %flex-between;
    @include padding-direction(0.4em, 0.8em, 1em, 0.8em);
  }
}