폴가이즈 채팅 스킨

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', sans-serif;
	background-color: $background_color;
	height: 100%;
	overflow: hidden;
	margin: 0
}

* {
	box-sizing: border-box
}

#log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 .5rem .75rem;
	width: 100%;
	box-sizing: border-box
}

#log>div {
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards
}

.message {
	color: $text_color !important;
	line-height: 1.5rem
}

.deleted {
	visibility: hidden
}

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

.badge {
	margin-right: .3rem;
	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
}

/* Fall Guys Theme by Reiketsu Haru */
.meta, .message {
	display: block
}

#log>div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: .5rem 0 0;
	padding-right: 1rem
}

.meta {
	color: #fff !important;
	position: relative;
	top: .25rem;
	padding: .25rem .75rem .25rem .5rem;
	border-radius: 3rem 10rem 10rem 3rem;
	box-shadow: .15rem .15rem 0 rgba(0,0,0,.2);
	text-shadow: .15rem .15rem 0 rgba(0,0,0,.2);
	z-index: 2
}

.message {
	position: relative;
	background: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-rule='nonzero' opacity='.25' transform='matrix(.1 0 0 -.1 0 300)'%3E%3Cpath d='m2135 2950c38.89-95.72 154-248 178-265 40-28 98-11 117 35 10 24 7 38-19 101-17 41-45 98-61 127l-27 52h-64.52s26.52-52 57.52-105c66-113 77-168 34-173-26-3-33 6-152 205-33 56-36 73-36 73h-45s11.33-33.59 18-50z'/%3E%3Cpath d='m1206 2668c-32-45-16-97 34-118 28-11 34-11 58 7 65 49 45 125-36 131-32 2-43-1-56-20zm78-41c8-13 7-20-4-27-8-5-19-10-23-10-12 0-20 28-13 46 7 19 25 15 40-9z'/%3E%3Cpath d='m207 2568c-14-18-35-53-47-78-13-25-54-91-91-148-62-93-69-107-69-107v-99c2 0 27 36 50 75 49 80 41 79 165 30 39-16 104-34 145-40 41-7 94-17 118-23 37-9 45-8 63 8 14 13 18 25 14 42-15 60-276 372-312 372-6 0-23-15-36-32zm236-262c27-43 46-80 43-83-2-3-78 21-169 51-91 31-172 56-182 56-14 0-13 5 7 38 13 20 43 65 67 99l44 61 71-71c40-40 93-107 119-151z'/%3E%3Cpath d='m2946 2150c-46-76-53-110-23-110 29.94 0 56.64 42.84 77 95.77v99.14z'/%3E%3Cpath d='m1985 2182c-147-78-189-117-167-152 20-33 15-87-10-104-49-31-71-29-108 9-18 19-40 35-48 35s-59-29-113-65c-55-36-104-65-110-65-35 0-7-74 56-147 48-56 159-111 240-119 110-11 259 44 344 128 120 119 133 309 31 468-18 27-35 50-39 50-3 0-37-17-76-38zm109-108c44-111 46-167 12-239-42-87-153-182-241-206-96-27-216-4-298 55-29 21-97 114-97 132 0 9 70 49 74 42 2-2 13-19 26-38 30-44 43-54 105-87 96-50 194-27 277 65 70 77 86 183 43 277-10 22-19 43-19 47-1 11 68 56 75 49 4-3 23-47 43-97zm-154-11c27-46 37-128 21-176-28-84-140-147-234-132-32 6-52 18-85 54-65 69-66 74-25 96 33 18 35 18 44 2 14-25 63-47 103-47 27 0 45 9 77 39 39 38 41 42 37 88-3 26-8 55-11 63-5 10 2 20 20 32 16 9 29 17 30 17 0 1 11-16 23-36z'/%3E%3Cpath d='m628 1550c-98-80-198-204-198-247 0-34 37-73 70-73s109 62 186 151c124 144 130 156 93 203-33 42-66 35-151-34zm120-13c4-20-56-95-154-194-64-65-105-81-118-47-11 29 65 128 162 211 66 56 103 66 110 30z'/%3E%3Cpath d='m1404 1022c-20-12-94-106-94-118 0-7 29-17 68-23 37-6 106-18 154-28l86-16 52-131c29-72 58-137 65-144 10-11 22-3 64 44 28 32 51 66 51 75 0 19-105 278-119 292-4 4-75 19-157 33-168 27-155 26-170 16zm190-61c68-13 104-25 113-36 7-10 33-67 58-126 49-115 49-124 6-163-21-19-21-19-36 20-49 120-81 186-100 204s-99 39-207 55c-53 7-55 10-32 43 19 28 61 28 198 3z'/%3E%3Cpath d='m2455 978c-28-16-35-28-35-63 0-36 22-70 48-77 32-9 78 17 91 51 12 26 11 34-3 56-10 14-28 30-42 35-31 12-34 12-59-2zm62-54c3-8-2-23-11-32-15-15-17-15-32 0-21 21-11 48 16 48 11 0 23-7 27-16z'/%3E%3Cpath d='m1160 749c-29-35-47-66-42-71 4-4 37-13 73-19 35-5 102-17 148-26 81-16 84-18 98-52 8-20 23-54 33-76s28-68 40-103c13-34 28-66 33-69 11-7 117 104 117 122 0 10-32 92-92 233-17 39-31 72-32 72 0 0-68 11-151 25-82 14-155 25-162 25-6 0-34-28-63-61zm233-8c58-11 110-22 116-25 10-7 101-230 101-250 0-7-9-25-21-40-17-21-24-24-35-15-8 6-14 16-14 22 0 26-85 200-104 212-19 13-99 32-208 50-41 6-47 19-21 47 21 23 53 23 186-1z'/%3E%3Cpath d='m105 651c-16-4-47-16-68-25-30-15-37-18.84-37-18.84v-57.16l37 19c234 119 480 19 538-219 10-39 16-72 14-74s-25-7-51-10l-48-7v33c-1 70-80 187-147 215-73 30-212 4-275-51-58-52-68-91.999-68-91.999v-221.001l58 9c87 13 102 22 102 62 0 79 40 115 105 94 32-11 40-19 48-48 15-63 17-63 178-39 79 12 147 26 150 31 11 17-13 134-38 188-37 77-126 162-200 190-62 24-239 37-298 21zm215-191c55-15 87-52 110-127 23-74 19-83-37-83-26 0-33 4-33 20 0 11-15 37-34 58-29 31-40 37-73 36-78-2-143-62-143-131 0-18-4-33-9-33s-23-3-40-6l-31-6v63c0 95 39 164 115 203 34 18 122 21 175 6z'/%3E%3Cpath d='m2948 568c-21.99-25.333-59-69-80-113-31-67-33-75-33-187 0-73 4-121 11-128 8-8 35-9 83-4l71 7v221s-8.16-16.291-11-24c-6-14-11-55-11-92 0-58-3-68-18-68-10 0-32-3-50-7l-33-6 5 119c5 134 15 163 80 230 30 32 38 34 38 34v57s-37.81-22.654-52-39z'/%3E%3Cpath d='m2132 97c-14-15-22-36-22-60 0-33 6.72-37.333 6.72-37.333l45.2.333s-6.18 10.22-7.92 15c-12 30 5 65 31 65 17 0 33.83-26.635 46-40 10.86-11.934 27-40.188 27-40.188l65 .188-24 28c-74 84-83 92-114 92-20 0-40-9-53-23z'/%3E%3C/g%3E%3C/svg%3E") repeat center/7rem;
	background-color: #0ea5e9;
	margin: 0 .5rem;
	padding: .5rem;
	border-radius: .5rem;
	outline: .2rem solid #fff;
	text-shadow: .15rem .15rem 0 rgba(0,0,0,.2);
	word-wrap: break-word;
	width: 100%
}

.message:after {
	position: absolute;
	content: "";
	left: .2rem;
	top: .2rem;
	background: #000;
	border-radius: .5rem;
	outline: .2rem solid #000;
	opacity: .2;
	width: 100%;
	height: 100%;
	z-index: -1
}

#log>div:nth-last-child(10n-9) .meta {
	background-color: #f43f5e
}

#log>div:nth-last-child(10n-8) .meta {
	background-color: #fb923c
}

#log>div:nth-last-child(10n-7) .meta {
	background-color: #facc15
}

#log>div:nth-last-child(10n-6) .meta {
	background-color: #4ade80
}

#log>div:nth-last-child(10n-5) .meta {
	background-color: #2dd4bf
}

#log>div:nth-last-child(10n-4) .meta {
	background-color: #38bdf8
}

#log>div:nth-last-child(10n-3) .meta {
	background-color: #818cf8
}

#log>div:nth-last-child(10n-2) .meta {
	background-color: #a78bfa
}

#log>div:nth-last-child(10n-1) .meta {
	background-color: #e879f9
}

#log>div:nth-last-child(10n) .meta {
	background-color: #ec4899
}

.reverse #log > div {
	align-items: flex-end;
	padding-right: 0;
	padding-left: 1rem
}

.reverse .message {
	text-align: right;
	width: 100%
}

.reverse .meta {
	border-radius: 10rem 3rem 3rem 10rem;
	padding: .25rem .5rem .25rem .75rem
}

이번에 새로 만든 스킨인 폴가이즈 채팅 스킨입니다!

폴가이즈가 최근에 무료화 했기 때문에 이에 맞춰 스트리머분들도 폴가이즈 할 때 채팅 스킨과 어울리게 하기 위해서 직접 디자인 했습니다

참고로 사진에 있는 글꼴은 산돌에서 만든 호요요체입니다. 그나마 잘 어울리는 글꼴은 Twip에서 적용 가능한 어그로체도 괜찮지만 만약 호요요체가 있다면 다음 코드를 추가해 주시기 바랍니다

html, body {
	font: $font_sizepx 'Sandoll Hoyoyo', sans-serif;
}

호요요체 대신 쿠키런체를 쓴다면 다음 코드를 추가해 주시기 바랍니다

html, body {
	font: $font_sizepx 'CookieRunOTF Bold', sans-serif;
}

아무튼 잘 쓰시기 바랍니다! 즐거운 폴가이즈와 방송 되시기 바라겠습니다

하루 제작

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

댓글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: