Discord - Voice widget custom css

discord-voice-widget-horizontal.css

/**
 * 幅: 364 (3人分表示する場合)
 * 幅: 488 (4人分表示する場合)
 * 高さ: 145 （横一列の場合）
 *
 * アバターを左から順に並べたい場合は、voice-states クラスの justify-content プラパティを削除
 * アバターを右から順に並べたい場合は、voice-states クラスに justify-content プラパティを追加して flex-end を指定
 **/
:root {
  --avatar-count: 3;
  --avatar-size: 124px;
  --avatar-gutter: 8px;
  --avatar-direction: row;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  padding-left: 0;
  overflow: hidden;
}
.voice-container {
  width: calc((var(--avatar-size) * var(--avatar-count)) - var(--avatar-gutter));
}
.voice-states {
  width: calc(var(--avatar-size) * var(--avatar-count));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-direction: var(--avatar-direction);
  align-items: center;
  align-content: center;
  margin: 0 0 0 calc(-0px - var(--avatar-gutter)) !important;
  padding: 0 !important;
}
.voice-state {
  width: var(--avatar-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 0 0 var(--avatar-gutter);
}
.avatar {
  width: 100% !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  border: none !important;
  filter: brightness(60%);
}
.avatar.speaking {
  animation-name: speak;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  filter: brightness(100%);
  position: relative;
}
.user,
.name {
  width: 100% !important;
}
.user {
  padding-top: 0 !important;
  margin-top: -8px !important;
  z-index: 0;
}
.name {
  display: inline-block;
  font-size: 16px !important;
  text-align: center;
  z-index: 1;
}

@keyframes speak {
  0% {bottom:0px;}
  15% {bottom:10px;}
  60% {bottom:0px;}
}