/* Browser Source URL: https://streamkit.discordapp.com/overlay/voice/<SERVER ID HERE>/<VOICE CHANNEL ID HERE> */

@keyframes speaking {
	0% { margin-bottom: 0px; }
	50% { margin-bottom: var(--padding); }
	100% { margin-bottom: 0px; }
}

* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	
	--position-horizontal: start;
	--position-vertical: end;
	
	--padding: 10px;
	--size: 70px;
	--radius: calc(var(--padding) * 1);
	
	--font: 'Roboto Mono';
	--avatar-border: #A060F0;
	--avatar-back: #A060F040;
}

body {
	padding: var(--padding);
	display: flex;
	justify-content: var(--position-horizontal);
	align-items: var(--position-vertical);
}

.voice_states {
	display: flex;
	flex-direction: row;
	align-items: end;
	margin: 0;
	padding: 0;
}

.voice_state {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	height: calc(var(--size) - (var(--padding) / 2));
	background-color: #FFF4;
	border-radius: var(--radius);
	transition: 0.25s all ease-in-out;
}

.voice_state:not(:first-child) {
	margin-left: var(--padding);
}

.voice_avatar {
	margin: 0;
	padding: 0;
	width: calc(var(--size) - (var(--padding) / 2));
	height: calc(var(--size) - (var(--padding) / 2));
	border-color: transparent;
	border-radius: var(--radius);
	filter: grayscale(1);
	transition: 0.25s all ease-in-out;
}

.voice_username {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 var(--padding);
	height: 100%;
}

.voice_username > span {
	padding: 0;
	font-family: var(--font), sans-serif;
	font-size: 20px!important;
	line-height: initial;
	background: transparent!important;
	text-shadow: 1px 1px 0 #000;
}

.wrapper_speaking.voice_state {
	background-color: var(--avatar-back);
}
.wrapper_speaking.voice_state .voice_avatar {
	margin-bottom: var(--padding);
	border-color: var(--avatar-border);
	filter: grayscale(0);
	/*animation: speaking infinite 0.5s;*/
}

/*
If you want to give a specific user a specific color instead of the default
copy the two rules here and put in their unique ID and set the colors.

.wrapper_speaking.voice_state[data-userid="<ID HERE>"] { background-color: #0008; }
.wrapper_speaking.voice_state[data-userid="<ID HERE>"] .voice_avatar { border-color: #000; }
*/

/* Jimmie1717 */
.wrapper_speaking.voice_state[data-userid="82698809678757888"] { background-color: #20609080; }
.wrapper_speaking.voice_state[data-userid="82698809678757888"] .voice_avatar { border-color: #206090; }

/* ttto */
.wrapper_speaking.voice_state[data-userid="460219501271580673"] { background-color: #00000080; }
.wrapper_speaking.voice_state[data-userid="460219501271580673"] .voice_avatar { border-color: #000000; }