Streamlabs benutzerdefinierte CSS zu Twitch Chat Animate Name und Nachrichten separatisch ⇐ HTML

[Anonymous]

Ich möchte mein Twitch -Chat -Overlay aus Streamlabs anpassen, damit der Benutzername der Person von links animiert, während die tatsächliche Nachricht, die sie von rechts animieren, animiert. Unten habe ich das CSS eingefügt, was ich nur brauche, da Stream-Labs den Rest erledigen. Das Hauptbit, das die Animation des Textes steuert, beginnt in der 19. Zeile mit #log> div {< /code>
sorry den langen Code, aber Sie brauchen alles. < /P>

Code: Select all

h@import url(https://fonts.googleapis.com/css?family=Roboto:700);
* {
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: $background_color;
font-family: 'Roboto';
font-weight: 700;
font-size: $font_size;
line-height: 1.5em;
color: $text_color;
}

#log>div {
animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
}

.colon {
display: none;
}

#log {
display: table;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
table-layout: fixed;
}

#log>div {
display: table-row;
}

#log>div.deleted {
visibility: hidden;
}

#log .emote {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0.4em 0.2em;
position: relative;
}

#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
}

#log .message,#log .meta {
vertical-align: top;
display: table-cell;
padding-bottom: 0.1em;
}

#log .meta {
width: 35%;
text-align: right;
padding-right: 0.5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

#log .message {
word-wrap: break-word;
width: 65%;
}

.badge {
display: inline-block;
margin-right: 0.2em;
position: relative;
height: 1em;
vertical-align: middle;
top: -0.1em;
}

.name {
margin-left: 0.2em;
}