카테고리
Twip 스킨

LINE 채팅 스킨

아마 Twip에 Kakao 라는 스킨을 보셨을 겁니다! 물론 Kakao 스킨은 제가 만든 것이 아니기 때문에! 제가 이번에 LINE 메신저를 참고해서 LINE 스킨을 만들었습니당 Kakao 스킨처럼 스트리머 (Broadcaster)와 매니저 (Moderator)만 오른쪽으로 표시되게 해 두었고, 반대로도 설정 가능하게 해 두었어요

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)만 오른쪽으로 표시되게 해 두었고, 반대로도 설정 가능하게 해 두었어요

아무튼 잘 쓰시기 바래요!

하루 제작

하루 입니다!
Twitch 스트리머이며 사진 보정과 영상 보정 도와드리고 있어요

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중