LINE 채팅 스킨

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

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

#log {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	word-wrap: break-word;
	box-sizing: border-box
}

#log>div {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	color: $text_color !important;
	margin: -0.3em 0.3em 0.7em 0.3em;
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards
}

.reverse #log>div {
	align-items: flex-end
}

.meta {
	color: $text_color !important;
	margin: 0.25em 0;
	font-weight: 800
}

.message {
	justify-content: flex-start;
	background-color: #fff;
	border-radius: 1.25em;
	padding: 0.5em 0.7em;
	word-wrap: break-word;
	line-height: 1.5em;
	font-weight: 400
}

.moderator,
.broadcaster {
	align-items: flex-end !important
}

.reverse #log>div.moderator,
.reverse #log>div.broadcaster {
	align-items: flex-start !important
}

.moderator .message,
.broadcaster .message {
	background-color: #b1eb6b !important
}

.deleted {
	visibility: hidden
}

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

.badge {
	margin-right: 0.3em;
	height: 1em
}

.colon {
	display: none
}

.message>img {
	height: 1em
}

.emote_wrap {
	position: relative
}

.emoticon {
	height: $font_sizepx;
	vertical-align: middle;
	margin: -0.1em 0;
	image-rendering: pixelated
}

아마 Twip에 Kakao 라는 스킨을 보셨을 겁니다! 물론 Kakao 스킨은 제가 만든 것이 아니기 때문에! 제가 이번에 LINE 메신저를 참고해서 LINE 스킨을 만들었습니당

Kakao 스킨처럼 스트리머 (Broadcaster)와 매니저 (Moderator)만 오른쪽으로 표시되게 해 두었고, 반대로도 설정 가능하게 해 두었어요

아무튼 잘 쓰시기 바래요!