/* Discord Streamkit Overlay用縦並び（アイコンサイズ固定タイプ）CSS
 * (c)2021-2024 Yu Akatsuki @akatsuki_yu
 * Last update : 2024.04.10
 * Released under the MIT license -- https://opensource.org/licenses/mit-license.php
 *
 */
@charset "UTF-8";

:root {
	--usernum:10;		/* プレイヤー人数初期値。計算に使う */
	--marginnum:0.6em;	/* アイコン同士の隙間の定義。計算に使う */

	/* Discordのアイコン（アバタ―）のサイズを算出するところ */
	--avatarsize:calc((100vh - var(--marginnum) * (var(--usernum) + 3) ) / var(--usernum));

}

@keyframes pyonpyon {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -0.6em); }	/* ぴょんぴょんの高さを変える場合、0.5em→1emにする */
	100% { transform: translate(0, 0); }
}

body {
	overflow: hidden;
}

div[class*="_voiceContainer_"] {
	margin:0;
	padding:0;
}

ul[class*="_voiceStates_"] {
	padding-left:0;
	
	overflow: hidden;
	width:100%;
	margin:0;
	position:absolute;
	top:calc(var(--marginnum) * 2);
	left:calc(var(--marginnum) / 2);
	padding:0;
}

li[class*="_voiceState_"] {
	height:var(--avatarsize);
    margin-bottom: var(--marginnum);		/* 次のアイコンとの距離 */
	list-style-type: none;
	position:relative;
}


img[class*="_avatar_"] {
    border:0 solid transparent;
    border-radius: 0;
    float: none;
    margin-right: 0px;
    width: var(--avatarsize);
	height: var(--avatarsize);
	
	position:absolute;
	bottom:0;
	left:0;
	border-color:transparent !important;
	filter: brightness(40%);
}

img[class*="_avatarSpeaking_"] {
	filter: brightness(100%) !important;
	animation: pyonpyon 0.5s infinite ease;
	/* box-shadow: 0 0 10px yellow; */
}

div[class*="_user_"] {
	padding-top:0;

	display:block;
	position:absolute;
	left:0;
	bottom:0;
	text-align:left;
	white-space:nowrap;
	word-break:break-all;
	transform-origin: left bottom;
	width:var(--avatarsize);
	height:var(--avatarsize);
}

span[class*="_name_"] {
	display:block;
	border:0;
	margin:0;
	border-radius:0;
	/* background-color:transparent !important; */
	position:absolute;
	bottom:0;
	left:0;

	max-width:var(--avatarsize);
	overflow-x:hidden;
}