카테고리
유용한 정보

Nightbot으로 도배봇 차단하는 방법

오랜만이에요 여러분! 하루 입니다!

요즘 트위치 채팅 관리 일을 하다 보니, 채팅 내용 중에 그림으로 된 문자로 도배하는 일이 자주 생겨서 Nightbot으로 할 수 있을까 찾아보다가 만들었습니당

도배봇이란?

도배봇은 채팅에서 반복된 단어 및 글자로 이루어진 긴 문장으로 시청자와 스트리머를 불쾌하게 만드는 악의적인 봇이에요. 대표젹으로 아스키 아트 또는 그림으로 된 도배봇이 있어요

이해를 돕기 위해 예제 사진을 보여드리겠습니다

대략 이런 모양의 도배가 있어요. 이런 유형을 차단하는 방법을 알려드리고자 이 글을 쓰게 되었어요! 그럼 어떻게 하면 Nightbot이 바로 차단 할 수 있는지 알아봅시당!

차단하는 방법

우선 Nightbot 공식 홈페이지에 접속해서 로그인 해 주신 다음에 왼쪽에 있는 Spam Protection 메뉴에 들어가주세요. 그런 다음 Blacklist Words/Phrases를 Enable (활성화) 시키고 Options (설정)에 들어갑니당

Options에 들어가면 차단할 문장 및 단어를 설정할 수 있는 창이 나오는데, 여기서 Blacklist 코드를 이렇게 입력해 주세요

Blacklist 코드

~/([\u2801-\u28ff])/g
~/([\u2580-\u259f])/g
~/(\u0bf5)/g

입력한 다음 Silent를 체크 해 주세요! 이것은 Nightbot이 차단하면 채팅을 입력하지 않고 바로 조용히 차단하게 해 주는 기능이에요

이제 설정을 저장하기 위해 Submit 버튼을 눌러주세요! 그러면 Nightbot이 앞으로 도배봇을 막아줄거예요!

아무튼 읽어주셔서 감사합니다! 🙂

카테고리
Twip 스킨

팝업 채팅 스킨

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
}

#log {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 0 1em;
    width: 100%;
    box-sizing: border-box
}

#log div {
    width: calc(100% - 20px);
    background: #fff;
    box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    margin: .5em 0 0;
    padding: 0.3em 0.4em;
    line-height: 1.2em;
    animation: InBox .5s ease, OutBox 1s ease $message_hide_delays forwards;
    -webkit-animation: InBox .5s ease, OutBox 1s ease $message_hide_delays forwards
}

.badge {
    padding: 0.05em;
}

.meta {
    font-weight: 600;
    margin-right: 0.3em
}

.deleted {
    visibility: hidden
}

.message {
    color: $text_color !important;
    word-wrap: break-word;
}

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

img {
    width: 1em;
    margin-right: 0.3em;
    vertical-align: middle !important
}


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

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

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

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

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

span.meta[style="color: #2E8B57"] {
    color: #1CE048 !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
}

@keyframes InBox {
    0% {
        opacity: 0;
        margin: 0 -10px -10px 0;
        box-shadow: 0 0 0 #8eabc5
    }
    to {
        opacity: 1;
        margin: .5em 0 0;
        box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    }
}

@keyframes OutBox {
    0% {
        opacity: 1;
        margin: .5em 0 0;
        box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    }
    to {
        opacity: 0;
        margin: 0 -10px -10px 0;
        box-shadow: 0 0 0 #8eabc5
    }
}

이번에는 입체적인 채팅 스킨을 만들었어요!

해당 스킨은 Chrome의 렌더링 버그 때문에 그림자의 크기는 글꼴 크기에 따라 변경 되는 것이 아닌 고정 크기로 되어 있습니다. 또한 채팅창의 너비는 그림자의 크기 때문에 역시 고정으로 되어 있어요

카테고리
Twip 스킨

레트로 채팅 스킨

@font-face {
  font-family: '_neodgm';
  src: url('https://dalgona.github.io/neodgm/assets/neodgm_code.woff2') format('woff2'),
       url('https://dalgona.github.io/neodgm/assets/neodgm_code.woff') format('woff'),
       url('https://dalgona.github.io/neodgm/assets/neodgm_code.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

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 '_neodgm', monospace;
	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: #000;
	box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em #000;
	margin: 0.8em 0.7em;
	padding: 0.3em 0.4em;
	padding-bottom: 0.3em;
	line-height: 1.2em;
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
	-webkit-animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards
}

.badge {
	padding: 0.05em;
}

.meta {
	font-weight: 600;
	margin-right: 0.3em
}

.deleted {
	visibility: hidden
}

.message {
	color: $text_color !important;
	word-wrap: break-word;
}

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

img {
	width: 1em;
	margin-right: 0.3em;
	vertical-align: middle !important
}

/* 닉네임 가독성 해결 */
span.meta[style="color: #00FF00"] {
  color: #3FD83F !important
}

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

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

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

span.meta[style="color: #2E8B57"] {
  color: #1CE048 !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
}

옛날 느낌이 나는 스킨을 만들까 생각해서 만들었습니다! 아마 이런 느낌을 좋아하시는 분들이 있지 않을까 생각했기 때문에, 옛날 컴퓨터 화면을 참고해서 직접 제작했어요

레트로 스킨에서 쓰인 글꼴의 저작권은 Neo 둥근모 프로젝트에 있습니다

카테고리
Twip 스킨

머티리얼 알림 스킨 (2019년 11월)

/* 연결 상태 표시 비활성화 */
div#Connecting {
  display: none
}

/* 이미지 표시 비활성화 */
#image-wrap {
  display: none !important
}

body,
h1,
h2,
#comment {
  font-family: 'NanumSquare' !important
}

body {
  text-align: center;
  font-size: 2em !important
}

h1 {
  font-size: 1em !important
}

html,
#body {
  display: table
}

#alertbox {
  display: flex;
  position: relative
}

#wrap {
  justify-content: center 
}

.layout-above #alertbox #text-wrap #alert-text {
  border-top: 0.25em solid #f68484;
  background-color: rgba(255,255,255,1);
  margin: 2em;
  box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.25)
}

#ytaria {
  display: none
}

h1,
h2,
#nickname,
#amount,
#comment {
  text-shadow: 0 0 0 rgba(0,0,0,0) !important
}

깔끔하게 만든 머티리얼 알림 스킨 입니당

Chrome 버전에 CSS 오류가 있어서 수정했습니다! 또한 영상 후원 부분도 잘 되는 것도 확인 했습니다

카테고리
Twip 스킨

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

아무튼 잘 쓰시기 바래요!

카테고리
유용한 정보

Nightbot 전용 주요 명령어 목록

명령어 관리

명령어 추가

!addcom !추가 -cd=5 -ul=moderator -a=!addcom $(query)

명령어 수정

!addcom !수정 -cd=5 -ul=moderator -a=!editcom $(query)

명령어 삭제

!addcom !삭제 -cd=5 -ul=moderator -a=!delcom $(query)

업타임 명령어

!addcom !업타임 -cd=5 방송 시간: $(eval u='$(twitch $(channel) "{{uptimeLength}}")',u=u.replace("channel is not live","현재 방송 중이 아닙니다."),u=u.replace(/year/g,"년"),u=u.replace(/month/g,"개월"),u=u.replace(/day/g,"일"),u=u.replace(/hour/g,"시간"),u=u.replace(/minute/g,"분"),u=u.replace(/second/g,"초"),u=u.replace(/s/g,""),u;)

기존 업타임 명령어로 이용해서 한국어로 변환 시킨 버전 입니다!

첫방송 명령어

!addcom !첫방송 -cd=5 $(twitch $(channel) "{{displayName}}")님이 방송 시작하신지 $(eval var f=new Date(2019, 8, 1),n=new Date(),c=n-f;Math.floor(c/86400000);)일 지났습니다!

2019, 8, 1 부분에서 바꿔주시면 됩니다! 참고로 Month 값은 0부터 시작이기 때문에 해당 8의 값은 9월로 됩니다

2019년 11월 11일로 설정 하고 싶다면 2019, 10, 11 이렇게 설정해 주세요!

팔로우 명령어

!addcom !팔로우 -cd=5 $(eval var u='$(twitch $(user) "{{displayName}}")',s='$(twitch $(channel) "{{displayName}}")',a="$(urlfetch https://api.2g.be/twitch/followage/$(channel)/$(user)?format=daysint)";if(a==s+" is not following "+s)"스트리머 본인은 확인할 수 없습니다";else if(a==u+" is not following "+s)u+" 님은 "+s+" 님을 팔로우 하지 않으셨습니다";else u+" 님이 "+s+" 님을 팔로우 한지 "+ ++a +"일 째";)

후원 명령어

Twip 후원

!addcom !후원 https://twip.kr/$(channel)

Toonation 후원

!addcom !투네 https://toon.at/donate/$(channel)/1

후원 명령어는 변경할 필요 없이 바로 명령어 추가해서 바로 사용이 가능해요!

인사 명령어

하루하 명령어

!addcom 하루하 -cd=5 $(twitch $(user) "{{displayName}}") 님 안녕하세요!

하루바 명령어

!addcom 하루바 -cd=5 $(twitch $(user) "{{displayName}}")님 안녕히 가세요!

여기서 다른 명령어로 쓰고 싶다면 하루하, 하루바만 바꿔주세요!

채널 이용자 명령어

팔로워 수 명령어

!addcom !팔로워 $(twitch $(channel) "{{followers}}")명이 팔로우 중입니다!

구독자 수 명령어

!addcom !구독자 $(twitch subcount)명이 구독 중입니다!

시청자 수 명령어

!addcom !시청자 $(twitch $(channel) "{{viewers}}")명이 시청 중입니다!

조회 수 명령어

!addcom !조회수 $(twitch $(channel) "{{views}}")명이 조회 했습니다!

카운트 명령어

하또죽 명령어

!addcom 하또죽 저런... $(count)번 죽었네요...

하또죽 초기화 명령어

!addcom !리셋 -a=!editcom 하또죽 \-c=0

여기서 다른 이름의 명령어를 쓰고 싶다면 하또죽만 바꿔주세요!

카테고리
Twip 스킨

무지개 2 채팅 스킨

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 {
	background-color: white;
	padding: 0.2em 0.5em;
	margin: -0.3em 0.3em 0.7em 0.3em;
	border-radius: 0.2em;
	box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.5);
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

#log>div:nth-last-child(10n-9)>.meta>.name {
	background: linear-gradient(135deg, #f2297c 0%, #ff9393 100%)
}

#log>div:nth-last-child(10n-8)>.meta>.name {
	background: linear-gradient(135deg, #f2482a 0%, #ffd093 100%)
}

#log>div:nth-last-child(10n-7)>.meta>.name {
	background: linear-gradient(135deg, #ff973d 0%, #ffdd00 100%)
}

#log>div:nth-last-child(10n-6)>.meta>.name {
	background: linear-gradient(135deg, #b1bc1a 0%, #c3ef27 100%)
}

#log>div:nth-last-child(10n-5)>.meta>.name {
	background: linear-gradient(135deg, #58aa22 0%, #a0efa9 100%)
}

#log>div:nth-last-child(10n-4)>.meta>.name {
	background: linear-gradient(135deg, #02ccbb 0%, #3df5ff 100%)
}

#log>div:nth-last-child(10n-3)>.meta>.name {
	background: linear-gradient(135deg, #0162ff 0%, #3dd5ff 100%)
}

#log>div:nth-last-child(10n-2)>.meta>.name {
	background: linear-gradient(135deg, #396ced 0%, #afb7ff 100%)
}

#log>div:nth-last-child(10n-1)>.meta>.name {
	background: linear-gradient(135deg, #8139ed 0%, #deafff 100%)
}

#log>div:nth-last-child(10n)>.meta>.name {
	background: linear-gradient(135deg, #ed39ed 0%, #ffaff0 100%)
}

.name {
	color: #fff !important;
	border-radius: 1em;
	box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.15);
	margin-right: 0.5em;
	padding: 0.2em 0.5em;
	font-weight: 700;
	font-size: 0.8em;
}

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

.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 스킨

구름 채팅 스킨

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
}

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

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

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

카테고리
Twip 스킨

유키 사쿠라 이벤트 리스트 스킨

html, .widget-EventList li > div {
    transform: rotateX($rotate_x) rotateY($rotate_y)
}

.widget-EventList {
    font: $font_size '$font_family', NanumGothic, serif;
    font-weight: $font_weight;
    overflow: hidden;
    list-style: none;
    position: relative;
    background: $background_color;
    transform: rotate(180deg);
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0.2em
}

.widget-EventList, .widget-EventList * {
    box-sizing: border-box
}

.widget-EventList li {
    transform: rotate(-180deg);
    line-height: 1.3em;
    overflow: hidden;
    margin-bottom: 0.1em
}

.widget-EventList li > div:last-child {
    /*padding: 0 10px;*/
    height: 1.3em;
    overflow: hidden;
    position: relative;
    z-index: 10;
    text-align: right;
    display: inline-block;
}

.widget-EventList .message {
    text-overflow: ellipsis;
}

.widget-EventList li > div:last-child,
.widget-EventList .tag,
.widget-EventList .message {
    white-space: nowrap;
    display: inline-block;
    margin: 0 0.25em;
    float: right;
}

.widget-EventList li:first-child div:last-child,
.widget-EventList li:nth-child(2) div:last-child,
.widget-EventList li:nth-child(3) div:last-child,
.widget-EventList li > div:last-child {
    color: #222;
    background: $theme_color;
    border-radius: 0.1em;
    margin: 0.1em;
    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.widget-EventList li:first-child div:last-child {
    color: $text_color;
    border-right: 0.3em solid $text_color;
    opacity: 1
}

.widget-EventList li:nth-child(2) div:last-child {
    opacity: 0.8
}

.widget-EventList li:nth-child(3) div:last-child {
    opacity: 0.6
}

.widget-EventList li:nth-child(4) > div:last-child {
    opacity: 0.4
}

.widget-EventList li > div:last-child {
    opacity: 0.2;
    animation: grow 0.5s forwards;
    -webkit-animation: grow 0.5s forwards
}

.widget-EventList li:nth-child(n+ $max_events ) {
    animation: fadeOut $animation_speed forwards;
    -webkit-animation: fadeOut $animation_speed forwards
}

@keyframes grow {
  0% {
    height: 0;
    padding-top: 0;
    padding-bottom: 0
  }
}

@-webkit-keyframes grow {
  0% {
    height: 0;
    padding-top: 0;
    padding-bottom: 0
  }
}

기존에 있는 이벤트 스킨을 깔끔하게 만들었습니다

스타일 색상을 #FFFFFF 로 하고, 글자 색상을 #ED597C 로 설정해 주시면 됩니다!

카테고리
Twip 스킨

리본 채팅 스킨 (미완성)

@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
}

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

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