/* 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; }
Comments
0 B
|👍
/👎
0 B
|0 👍
/0 👎
0 B
|0 👍
/0 👎