투네이션 채팅 위젯 스킨 - Classic 95

Classic 95 스킨

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

윈도우 95부터 사용한 사람이라면 익숙할 수밖에 없는 레트로 디자인을 기억할 겁니다.
그 향기를 그대로 전해드리기 위해 새로 만들었습니다.

원래 아이콘까지 바꾸려고 했는데 픽셀 아트 작업까진 귀찮아서 이건 나중에 고려해 보려고 합니다.
또한 지금 버그인지 모르겠는데 유튜브 채팅 스킨도 적용되는지 확인해보려고 했으나 작동이 안되어서 일단 트위치 기준으로 제작했습니다.

여튼 잘 쓰시기 바랍니다.

스킨 적용 방법

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

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

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

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

.chat-doubleline-box {
	background: #c0c0c0;
	border-top: var(--plus) solid #fff;
	border-left: var(--plus) solid #fff;
	border-bottom: var(--plus) solid #000;
	border-right: var(--plus) solid #000;
	border-radius: 0;
	box-shadow: var(--minus) var(--minus) 0 inset #7f7f7f, var(--plus) var(--plus) 0 inset #dfdfdf;
	color: #000 !important;
	display: flex;
	flex-direction: column;
	font-family: 'Galmuri11' !important;
	padding: var(--plus);
}

div.whitename div.float-left {
	background: initial;
	box-shadow: initial;
}

.chat-doubleline-box > .clearfix {
	align-items: center;
	background: linear-gradient(90deg, #08216b, #a5cef7);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 2px 5px;
}

.chat-doubleline-box > div div.float-left {
	color: #fff !important;
	font-weight: initial;
	padding: 0;
}

.chat-doubleline-box > span {
	padding: 0 8px 5px 8px;
}

.clearfix > .text-right {
	margin-left: auto;
}

#div_content img {
	margin-right: 5px;
}

#div_content .text-right > img {
	margin-right: 0;
}

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

업데이트 목록

2022-07-27 - 첫 공개