타농이님 @keyframes fadeUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
*,::before,::after{box-sizing: border-box}
html, body {
margin: 0;
overflow: hidden;
height: 100%
}
body {
background: $background_color;
}
#log {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 10px 10px;
overflow: hidden;
font: 600 $font_sizepx '$font_face';
}
#log>div {
position: relative;
margin-top: 20px;
padding-left: 56px;
animation: fadeUp .5s ease;
}
#log>div.broadcaster {
padding: 0 56px 0 0;
text-align: right;
}
#log>div.deleted {
visibility: hidden
}
#log>div::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background: url(https://marshall-ku-tgd.github.io/tmpImages/cat.png) center no-repeat;
background-size: cover;
border-radius: 5px;
}
#log>div.broadcaster::before {
left: auto;
right: 0
}
#log>div .colon {
display:none
}
#log>div .meta {
display: block;
font-size: $font_sizepx;
line-height: 1.3;
}
#log>div.broadcaster .meta {
text-align: right;
}
#log>div .meta {
margin-bottom: 3px;
}
#log>div .meta>img{
display: inline-block;
height: $font_sizepx;
width: auto;
margin-right: 4.5px;
float:none!important
}
#log>div .message {
position: relative;
display:inline-block;
background: #fff;
color: #000;
border-radius: .4em;
padding: 10px
}
#log>div .message::after {
content: "";
box-sizing: content-box;
position: absolute;
width: 17.5px;
height: 25px;
border: 0 solid #fff;
border-width: 0 20px;
border-radius: 50%;
clip: rect(0,37px,15px,27px);
display: block;
z-index: 1;
left: -37.5px;
top: 5px;
}
#log>div.broadcaster .message::after {
left: auto;
right: -37.5px;
clip: rect(0,28px,10px,16px)
}
노란손 
22종