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

아무튼 잘 쓰시기 바래요!

카테고리
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
}

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

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

카테고리
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', NanumGothic, serif;
    color: $text_color;
    background-color: $background_color;
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden
}
  
#log {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0.3em 0.3em 0.3em;
    width: 100vw;
    box-sizing: border-box
}

#log div {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.2em;
    padding: 0.2em;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0.15em;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5);
    animation: fadeInUp .5s ease, fadeOutUp .5s ease $message_hide_delays forwards;
}

#log > div.deleted {
    visibility: hidden
}
  
#log .emote_wrap {
    position: relative
}
  
#log .emote_wrap img.emoticon {
    height: $font_sizepx;
    vertical-align: middle;
    margin: .1em 0
}
  
#log .meta {
    padding-right: .1em;
    position: relative
}
  
.badge,
.colon,
.name {
    display: inline-block;
    vertical-align: top
}
  
.colon,
.name {
    height: 1em
}
  
.name {
    font-weight: 600;
    margin-left: .1em
}
  
.badge {
    margin: 1px 3px 3px 0;
    display: inline-block;
    vertical-align: middle
}

.badge, span.message > img {
    height: 1em
}
  
/* 닉네임 가독성 해결 */
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
}

기존에 있는 쿠로 스킨을 조금 더 넓게 보이게 수정했습니다

스트리머님의 요청으로 제작되었으며, 수정이 필요한 부분은 더 수정해서 여기에 올리겠습니다 🙂