구름 채팅 스킨

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 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	box-sizing: border-box
}

#log>div {
    text-shadow: 0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,0 0 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,
    0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000,0.05em 0.05em 0.05em #000;
    animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

.meta {
	margin-right: -0.5em;
	font-weight: 700
}

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

.deleted {
	visibility: hidden
}

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

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

.colon {
	margin-right: 0.7em
}

.message>img {
	height: 1em
}

.emote_wrap {
	position: relative
}

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

/* 닉네임 가독성 해결 */

span.meta[style="color: #00FF00"] {
	color: #37B737 !important
}

span.meta[style="color: #0000FF"] {
	color: #2A74FF !important
}

span.meta[style="color: #5F9EA0"] {
	color: #56BFA8 !important
}

span.meta[style="color: #B22222"] {
	color: #FB6767 !important
}

span.meta[style="color: #2E8B57"] {
	color: #1CC24D !important
}

span.meta[style="color: #191970"] {
	color: #8383DE !important
}

span.meta[style="color: #008000"] {
	color: #49CC49 !important
}

span.meta[style="color: #D2691E"] {
	color: #DC8444 !important
}

span.meta[style="color: #FF0000"] {
	color: #FF4A4A !important
}

이번에 새로 만든 채팅 스킨 입니다!

뒷 배경이 보이면서 가독성이 좋은 스킨을 만들고자 하는 생각으로 만들게 되었어요! 스킨 이름은 “구름”이지만 아마 다른 이름으로 바뀔지도 모르겠네요 ㅎㅎ

아무튼 잘 쓰시기 바랄게요!