TWIP-chat-theme-FFXIV-color_bugfix.css

@charset "UTF-8";

/*
* 글자 크기를 12px(최소)로 설정하시면 실제 인게임 크기가 됩니다.
* 트윕(TWIP) 기본 ffxiv 테마에서 디테일을 약간 수정하였습니다.
*/

:root{
	--twip-font-size: $font_sizepx
}

* {
	box-sizing: border-box;
}

html {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: calc(var(--twip-font-size, 12px));
	font-family: 'Source Han Sans KR', 'Noto Sans KR', '본고딕', '$font_face', sans-serif;
}

body {
	position: absolute;
	bottom: 0;
	margin: 0 0 4rem 0 !important;
	width: 100%;
	height: 100%;
}

#log {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: column;

	position: absolute;
	top: 4.5rem;
	left: 0.75rem;

	margin: 0.25rem;
	padding: 0.125rem 0.125rem 0.125rem 0.75rem;

	overflow: hidden;

	width: calc(100% - 2rem);
	height: calc(100% - 5.375rem);
	word-wrap: break-word;
	text-shadow:
		0 0 0.08rem #000,
		0 0 0.08rem #000,
		0 0 0.08rem #000,
		0 0 0.08rem #000;
	font-size: var(--twip-font-size, 12px);
	line-height: 1.25em;
	letter-spacing: 0.01rem;

	background-image:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(191,191,191)"><polygon points="0,0 2,0 16,14 16,16"/><polygon points="5,0 7,0 16,9 16,11"/><polygon points="10,0 14,0 16,2 16,6"/></svg>'),
		linear-gradient(to top, #fff, #fff),
		linear-gradient(to top, rgba(191, 191, 191, 0.75), rgba(191, 191, 191, 0.75)),
		linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
	background-size:
		1rem 1rem,
		0.25rem 10%,
		0.08rem calc(100% - 0.75rem),
		auto;
	background-position:
		right top,
		0.125rem calc(100% - 0.25rem),
		0.2rem 0.25rem,
		0 0;
	background-repeat: no-repeat;

	box-shadow: 0 0 0.375rem 0.375rem rgba(0, 0, 0, 0.4);
}

/* pseudo element party */
body::before { 	/* text input */
	display: block;
	content: '';

	position: fixed;
	bottom: 2.25rem;
	left: 2rem;
	width: calc(100% - 2.75rem);
	height: 1.5rem;

	background: rgba(0, 0, 0, 0.5);

	border-radius: 0.25rem;
	box-shadow:
		0 0 0.125rem rgba(0, 0, 0, 0.75),
		0 0.08rem 0 rgba(255, 255, 255, 0.3) inset;

	z-index: 1000;
	cursor: text;
}

body::after { /* tab */
	display: inline-block;
	content: '일반　 　전투　 　기타';

	position: fixed;
	bottom: 0.5rem;
	left: 0.5rem;
	font-size: 0.75rem;

	z-index: 1000;
	background: linear-gradient(to right,
			#0000 0%,
			#9997 0px,
			#9997 1px,
			#0009 1px,
			#0009 2px,
			#9997 2px,
			#9997 3px,
			#0000 3px
		),linear-gradient(to bottom,
			#5C5E5C 0%,
			#4E4C4E 49%,
			#342E33 50%,
			#403F40 100%
		);
	background-size: 3rem 100%, auto;
	background-repeat: repeat-x, no-repeat;
	background-position: 1rem 0, 0 0;

	box-shadow:
		0 0 0.125rem rgba(0, 0, 0, 0.75),
		0 0.08rem 0.125rem rgba(255, 255, 255, 0.5) inset;
	color: #EEDFC5;
	text-shadow:
		0 0.08rem 0.125rem #000,
		0 0.08rem 0.125rem #000;

	border-radius: 1rem;
	line-height: 1rem;
	padding: 0.125rem 1.875rem;
	cursor: move;
}

#log::before { /* mode switch button */
	display: inline-block;
	content: '';

	position: fixed;
	left: 0.5rem;
	bottom: 2.25rem;

	width: 1.25rem;
	height: 1.25rem;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="rgba(255, 255, 255, 0.875)"><g><ellipse cx="7" cy="6.5" rx="6" ry="4.5"/><path d="M7,11l4,2l0.5,-3.5z"/></g></svg>'),
		linear-gradient(to bottom,
			#5C5E5C 0%,
			#4E4C4E 49%,
			#342E33 50%,
			#403F40 100%
		);
	background-position: center, center;
	background-repeat: no-repeat;
	background-size: 0.875rem, 100%;
	box-shadow:
		0 0 0.125rem rgba(0, 0, 0, 0.75),
		0 0.08rem 0.125rem rgba(255, 255, 255, 0.5) inset;
	border-radius: 1rem;
	z-index: 1002;
}

#log::after {  /* see content */
	display: block;
	content: '\01F170  파티';

	position: fixed;
	left: 1.875rem;
	bottom: 3.5rem;
	font-size: 0.875rem;

	line-height: 1rem;
	height: 1rem;

	color: #fff;
	text-shadow:
		0 0 0.08rem #b82,
		0 0 0.08rem #b82,
		0 0 0.08rem #b82,
		0 0 0.08rem #b82,
		0 0 0.1rem #b82,
		0 0 0.1rem #b82;
	z-index: 1001;
}

#log>div {
	color: #ffffffff;
}

.name {
	text-transform: capitalize;
}

.meta {
	color: inherit !important;
}

.badge,
.colon {
	display: none;
}

.emoticon {
	height: 1.375em;
	vertical-align: -0.375em;
}


/* 기본 채팅 서식 -> 일반 */
#log						{color: #FFFFFF;}
#log .name::before			{content: '<';}
#log .name::after			{content: '> ';}

/* 시스템 관리자? -> 시스템(MOTD) */
#log .admin.admin.admin.admin,
#log .global_mod.global_mod.global_mod.global_mod,
#log .staff.staff.staff.staff 						{color: #E6B7F8;}
#log .admin.admin.admin.admin .name::before,
#log .global_mod.global_mod.global_mod.global_mod .name::before,
#log .staff.staff.staff.staff .name::before 		{content: '[System]<';}
#log .admin.admin.admin.admin .name::after,
#log .global_mod.global_mod.global_mod.global_mod .name::after,
#log .staff.staff.staff.staff .name::after 			{content: '> ';}

/* 설립자 -> 떠들기 */
#log .founder					{color: #F9FF00;}
#log .founder .name::before		{content: '[설립자]<';}
#log .founder .name::after		{content: '> ';}

/* 구독자 -> 떠들기 */
#log .subscriber				{color: #F9FF00;}
#log .subscriber .name::before	{content: '[구독자]<';}
#log .subscriber .name::after	{content: '> ';}

/* 비트 채팅 -> 파티 */
#log.bits						{color: #a5f7fd;}
#log.bits .name::before			{content: '<';}
#log.bits .name::after			{content: '> ';}

/* 프리미엄/터보 -> 일반 */
#log .premium,
#log .turbo						{color: #FFFFFF;}
#log .premium .name::before,
#log .turbo .name::before		{content: '<';}
#log .premium .name::after,
#log .turbo .name::after		{content: '> ';}

/* 파트너('인증됨'뱃지) -> 귓속말? */
#log .partner					{color: #ffb784;}
#log .partner .name::before		{content: '<';}
#log .partner .name::after		{content: '> ';}

/* 매니저(진은검) -> GM */
#log .moderator					{color: #d7c3ff;}
#log .moderator .name::before	{content: '[GM]<';}
#log .moderator .name::after	{content: '> ';}

/* 스트리머 -> NPC */
#log .broadcaster 				{color: #C4FF78;}
#log .broadcaster .name::before	{content: ''; }
#log .broadcaster .name::after	{content: ': ';}