무지개 3 채팅 스킨 (2022년 3월 수정)

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;
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
}

#log>div:nth-last-child(10n-9) {
	box-shadow: 0 0.2em 0.3em rgba(255, 168, 168, 1);
}

#log>div:nth-last-child(10n-8) {
	box-shadow: 0 0.2em 0.3em rgba(255, 192, 120, 1);
}

#log>div:nth-last-child(10n-7) {
	box-shadow: 0 0.2em 0.3em rgba(255, 224, 102, 1);
}

#log>div:nth-last-child(10n-6) {
	box-shadow: 0 0.2em 0.3em rgba(140, 233, 154, 1);
}

#log>div:nth-last-child(10n-5) {
	box-shadow: 0 0.2em 0.3em rgba(99, 230, 190, 1);
}

#log>div:nth-last-child(10n-4) {
	box-shadow: 0 0.2em 0.3em rgba(102, 217, 232, 1);
}

#log>div:nth-last-child(10n-3) {
	box-shadow: 0 0.2em 0.3em rgba(116, 143, 252, 1);
}

#log>div:nth-last-child(10n-2) {
	box-shadow: 0 0.2em 0.3em rgba(177, 151, 252, 1);
}

#log>div:nth-last-child(10n-1) {
	box-shadow: 0 0.2em 0.3em rgba(229, 153, 247, 1);
}

#log>div:nth-last-child(10n) {
	box-shadow: 0 0.2em 0.3em rgba(250, 162, 193, 1);
}

.name {
	font-weight: 900;
}

.colon {
	margin-right: 0.25em;
}

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

.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: #69db7c !important
}

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

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

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

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

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

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

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

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

오랜만에 새 채팅 스킨을 배포합니다! 이번 스킨도 무지개인데 그림자만 무지개 색깔로 해서 만든 스킨입니다. 잘 쓰세요!

2022년 3월 수정판은 OBS의 투명 렌더링 버그로 인해 새로 수정했습니다. 완벽하진 않지만 위 사진처럼 표시하려면 OBS 브라우저에서 CSS 코드를 아래와 같이 수정해 주시기 바랍니다.

body { background: white; margin: 0px auto; overflow: hidden; }

하루 제작

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

댓글 6개

  1. 안녕하세요 하루님!
    무지개 그림자가 너무 예뻐서 트위치 채팅에 적용해보았는데요!
    트윕 미리보기에는 무지개가 잘 적용이 되어서 나오는데,
    OBS에서는 회색그림자로만 나와요! 혹시 무슨 문제인지 아시나요?

    좋아요

    1. 안녕하세요!
      OBS에서 회색 그림자로 표시되는 현상은 안타깝게도 OBS의 렌더링 버그 입니다
      그나마 색깔이 보이도록 할 수 있게 코드를 수정해 두었습니다

      좋아요

그레이 에 답글 남기기 응답 취소

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중

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