리본 채팅 스킨 (미완성)

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20% )
}

body,
html {
  font: $font_sizepx 'NanumSquare', serif;
  background-color: $background_color;
  height: 100%;
  overflow: hidden
}

#log {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0.5em 0.1em;
  width: 100%;
  box-sizing: border-box
}

#log > div {
  background-color: #fff;
  padding: 0.2em 0.5em;
  margin: 0em 0.3em 0.7em 1em;
  box-shadow: 0 0.3em 0.4em rgba(0, 0, 0, 0.25);
  animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
  -webkit-animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

.meta {
  display: block;
  margin: 0 0 0.1em -0.7em;
  padding: 0.3em 0.5em;
}

.name {
  color: #fff !important;
  background-color: #EF6D86;
  margin: 0 0 0.3em -1em;
  padding: 0.3em 1.3em 0.3em 0.5em;
  font-weight: 700
}

.name:after, .name:before {
  content: '';
  position: absolute;
  border-style: solid
}

.name:after {
  margin: -0.3em 0 0 0.4em;
  border-width: 0.9em 0.45em;
  border-color: transparent #fff transparent transparent
}

.name:before {
  margin: 1.4em 0 0 -0.5em;
  border-width: 0.35em;
  border-color: #BA4258 #BA4258 transparent transparent
}

.message {
  color: $text_color !important;
  word-wrap: break-word;
  line-height: 1.5em;
  margin-top: 0.9em;
  font-weight: 400
}

.deleted {
  visibility: hidden
}

.badge,
.colon,
.name,
.message {
  vertical-align: middle
}

.badge {
  display: none;
}

.colon {
  display: none;
}

.message > img {
  height: 1em
}

.emote_wrap {
  position: relative
}

.emoticon {
  height: 1em;
  vertical-align: middle;
  margin: -0.1em 0;
  image-rendering: optimizespeed;
  -webkit-image-rendering: pixelated
}

가장 많은 분들이 요청한 리본 스킨 입니다

본 스킨은 디자인적으로 오류가 있지만 실사용에는 큰 문제가 없기 때문에 공개를 합니다!