【2022改訂版】Among Usで15人横に並べるCSS書いてみた(アモングアス)

だいぶニッチなネタではありますが、最近流行のAmongUs。
これを配信にて

OBSというツールを用い
Discordで通話を行い
Discord StreamKit Overlayで通話画面を構成したい

という人に向けたものになっています。
AmongUsが16日より最大15人対応になるということもあり、簡単にですが15人対応用のCSSを書いてみました。
※2022.5.20改定しました。
・横並びをGridへ変更。幅によって自動で人数がかわるように。

INDEX

AmongUsで15人並べるCSS
使い方
- Discord StreamKit Overlayの設定
  - TEXT SETTEINGS
  - BACKGROUND SETTINGS
- OBSの設定
まとめ

AmongUsで15人並べるCSS

まず御託はいいからCSSだけくれという人のためにCSSのみ先に記載します。
使い方は後ほど

@charset "UTF-8";
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background-color: transparent;
}

.voice-container .voice-states {
 display: grid;
 flex-wrap: wrap;
 grid-template-columns: repeat(auto-fill, 240px);
 gap: 50px 40px;
}

.voice-container .voice-states .voice-state {
 display: inline-block;
 height: auto;
 aspect-ratio: 1/1;
 text-align: center;
}

.voice-container .voice-states .voice-state .avatar {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 10px;
 border: none;
 filter: brightness(0.55);
 float: none;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.voice-container .voice-states .voice-state .avatar.speaking {
 filter: brightness(1);
 border: none;
}

.voice-container .voice-states .voice-state .user {
 text-align: center;
 padding-top: 20px;
}

.voice-container .voice-states .voice-state .user .name {
 line-height: 1.4;
}

※旧コード


@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: transparent;
}

.voice-container .voice-states {
  display: flex;
  flex-wrap: wrap;
  width: 3620px;
}

.voice-container .voice-states .voice-state {
  width: 240px;
  display: inline-block;
  height: auto;
  text-align: center;
  margin-bottom: 38px;
}

.voice-container .voice-states .voice-state .avatar {
  width: 200px;
  height: 200px;
  border-radius: 0;
  border: none;
  filter: brightness(0.55);
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.voice-container .voice-states .voice-state .avatar.speaking {
  filter: brightness(1);
  border: none;
}

.voice-container .voice-states .voice-state .user {
  text-align: center;
  padding-top: 20px;
}

.voice-container .voice-states .voice-state .user .name {
  line-height: 1.4;
}