Code/Examples/TwitchChatExample/TwitchChatExample.razor.scss
TwitchChatExample
{
position: absolute;
justify-content: flex-end;
align-items: flex-start;
flex-direction: column-reverse;
color: white;
TwitchChatEntry
{
position: relative;
flex-shrink: 0;
width: 100%;
align-items: flex-start;
left: 0px;
transition: all 0.2s ease-out;
&:intro
{
left: -16px;
opacity: 0;
}
gap: 4px;
.username
{
align-items: center;
flex-shrink: 0;
.badges
{
.badge
{
width: 18px;
height: 18px;
background-color: white;
margin-right: 3px;
border-radius: 2px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
&.moderator
{
background-color: #00AD03;
background-image: url("badges/moderator.png");
}
&.subscriber
{
background-color: #6441A4;
background-image: url("badges/subscriber.png");
}
&.vip
{
background-color: #E005B9;
background-image: url("badges/vip.png");
}
&.broadcaster
{
background-color: #e91916;
background-image: url("badges/broadcaster.png");
}
&.premium
{
background-color: #00a0d6;
background-image: url("badges/premium.png");
}
&.staff
{
background-color: black;
background-image: url("badges/staff.png");
}
&.turbo
{
background-color: #59399A;
background-image: url("badges/turbo.png");
}
&.verified
{
background-image: url("badges/verified.png");
}
}
}
.avatar
{
width: 24px;
height: 24px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 50%;
margin-right: 4px;
}
.name
{
font-weight: 700;
}
}
.message
{
flex-wrap: wrap;
> *
{
margin-right: 4px;
flex-shrink: 0;
}
.emote
{
width: 24px;
height: 24px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}