투네이션 채팅 위젯 스킨 - ZSNES

ZSNES 스킨

ㅋ투네이션 전용 채팅창 위젯 스킨인 ZSNES 스킨을 소개합니다.

ZSNES는 SNES (슈퍼 닌텐도)의 에뮬레이터인데, 이 프로그램에 쓰인 디자인을 거의 그대로 구현해 만든 스킨입니다. 잘 쓰시기 바랍니다.

스킨 적용 방법

적용 방법은 간단합니다. 우선 투네이션의 위젯 메뉴에서 채팅창을 선택해 주시고, 반드시 채팅 표시 스타일을 "두 줄 상자 테두리" 또는 "한 줄 상자 테두리" 적용해 주시기 바랍니다.

적용 후 이제 CSS 코드를 복사합니다. CSS 코드를 복사 후 OBS에서 추가한 투네이션 채팅창 위젯의 속성에 들어가서 CSS 코드를 붙여넣습니다.

@import url('https://unpkg.com/galmuri@latest/dist/galmuri.css');

:root {
	--plus: 5px;
	--minus: -5px;
}

#div_content {
	padding: 10px;
}

.chat-doubleline-box,
.chat-singleline-box {
	background: #5a5d5a;
	border-radius: initial;
	box-shadow: 0 var(--minus) 0 inset #393431, var(--plus) 0 0 inset #6b6d6b, 0 var(--plus) 0 inset #7b7d7b, var(--minus) 0 0 inset #4a4542, var(--plus) var(--plus) 0 #0007;
	font-family: 'Galmuri7' !important;
	margin-bottom: 10px;
	text-shadow: 3px 3px 3px rgba(0,0,0,.5);
}

.chat-doubleline-box {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5px 15px 10px;
}

.chat-singleline-box {
	padding: 12px;
	position: relative;
}

.chat-doubleline-box > div {
	margin: 0;
}

.chat-doubleline-box > .clearfix {
	align-items: center;
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	position: relative;
	font-size: 100%;
	font-weight: normal;
}

.chat-singleline-box > span.whitename,
.chat-doubleline-box > div div.float-left {
	background: initial;
	box-shadow: initial;
	padding: initial;
	margin-left: 5px;
}

.chat-doubleline-box > .clearfix > .chattype-icon {
	order: 1;
}

.chat-doubleline-box > .clearfix > .text-right {
	order: 2;
}

.chat-doubleline-box > .clearfix > .float-left {
	order: 3;
}

.chat-singleline-box > div {
	display: inline;
	margin: 0;
	height: initial !important;
}

#div_content img,
.vertical-middle {
	vertical-align: initial;
}

그런 다음 CSS 코드 입력 아래로 가보면 현재 페이지의 캐시를 새로고침 버튼을 누르시고 확인 버튼까지 누르면 적용 성공 입니다.

업데이트 목록

2022-08-02 - 첫 공개