stream/discord_streamkit をテンプレートにして作成

開始行:
** VC参加者のアイコンを表示する [#c4a3b99a] - [[Discord StreamKit Overlay:https://streamkit.discord.c... - VOICE WIDGET タブを選択 > Server と Voice Channel を選択 - 発行された browser source をコピーして OBSのソース追加 ... 参考 : [[OBSにDiscordをオーバーレイ表示する方法 | Raison ... 参考 : [[Discordウィジェットを凸待ち用にしてくれるカスタ... ** 最近使ってるカスタムCSS [#ac07951f] いままでずっとDiscordアイコン表示のテキストがズレてたんで... &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-l... 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; } } }}

終了行:
** VC参加者のアイコンを表示する [#c4a3b99a] - [[Discord StreamKit Overlay:https://streamkit.discord.c... - VOICE WIDGET タブを選択 > Server と Voice Channel を選択 - 発行された browser source をコピーして OBSのソース追加 ... 参考 : [[OBSにDiscordをオーバーレイ表示する方法 | Raison ... 参考 : [[Discordウィジェットを凸待ち用にしてくれるカスタ... ** 最近使ってるカスタムCSS [#ac07951f] いままでずっとDiscordアイコン表示のテキストがズレてたんで... &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-l... 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; } } }}

ページ名: