stream/discord_streamkit の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• stream/discord_streamkit へ行く。
• stream/discord_streamkit の差分を削除

#author("2026-07-14T20:26:03+09:00","default:nemusg.pad","nemusg.pad")
#author("2026-07-14T20:27:09+09:00","default:nemusg.pad","nemusg.pad")
** VC参加者のアイコンを表示する [#c4a3b99a]

- [[Discord StreamKit Overlay:https://streamkit.discord.com/overlay]] を開き > Install for OBS をクリック
- VOICE WIDGET タブを選択 > Server と Voice Channel を選択
- 発行された browser source をコピーして OBSのソース追加 > ブラウザ でURLをペースト

参考 : [[OBSにDiscordをオーバーレイ表示する方法 | Raison Detre:https://volx.jp/discord-overlay]]&br;
参考 : [[Discordウィジェットを凸待ち用にしてくれるカスタムCSS:https://nekosogi.org/calling]]

** 最近使ってるカスタムCSS [#ac07951f]

いままでずっとDiscordアイコン表示のテキストがズレてたんですが、全体のサイズを 80x80 → 90x90 にしてOBS側で縮小したら多分いい感じになりました。

&ref(./icon_before.png,100%);
&ref(./icon_after.png,100%);
&ref(./icon_before.png,80%);
&ref(./icon_after.png,80%);

#code_x{{
ul[class*="States"] {
  display: flex;
} 
li[class*="State"] {
  display: flex; 
  flex-direction: column; 
  height: 90px;
} 
img[class*="avatar"] {
  filter: brightness(70%); 
  border-radius: 8px; 
  width: 90px; 
  height: 90px;

} 
img[class*="Speaking"] {
  position: relative; 
  animation: 300ms infinite alternate ease-in-out speak-light; 
  filter: brightness(100%); 
  border-color: rgba(255,255,255,.75); 
  animation-duration: 300ms;
} 
span[class*="name"] {
  max-width: 90px; 
  box-sizing: border-box; 
  text-overflow: clip; 
  white-space: nowrap; 
  overflow: hidden; 
  display: block; 
  text-align: center; 
  top: -10px; 
  left: 2px;
  position: relative;
  font-size: 40px;
}
@keyframes speak-light {
  0% {
    box-shadow: 0 0 4px blue;
  }
  50% {
    box-shadow: 0 0 16px blue;
  }
  100% {
    box-shadow: 0 0 4px blue;
  }
}

}}