CCO Soft Theme (Lite) by liansheng197

/* ==UserStyle==
@name         CCO Soft Theme (Lite)
@version      20220718.09.02
@namespace    userstyles.world/user/liansheng197
@description  ...
@author       liansheng197
@license      MIT
==/UserStyle== */


@-moz-document domain("cybercodeonline.com") {
/**************************************
 *             全局：分段元素            *
 **************************************/
/*:not(.flex-row) > div[class='flex-1']:empty {
	display: none; 
}*/

}


@-moz-document domain("cybercodeonline.com") {
/**************************************
 *       分頁：聊天室的頂部按鈕           *
 **************************************/
ion-header {
	position: relative !important;
	height: 50px !important;
}

ion-header > .uppercase {
	position: relative !important;
	height: 100%;
}

ion-header > .uppercase > span:nth-child(1) {
	color: #0000;
	width: 100%;
	height: 100%;
	padding-top: calc(25px - 0.5rem);
	text-shadow: none;
	text-align: center;
}

ion-header > .uppercase > span:nth-child(2) {
	height: 16px;
	width: 24px;
	padding: 0;
	text-align: center;
	position: absolute;
	top: calc(25% - 8px);
	left: calc(60% - 12px);
	text-shadow: none;
}

ion-header > .uppercase > span:nth-child(1):hover {
	color: #fff;
	text-shadow: none;
}

ion-header > .uppercase > span:nth-child(1)::before {
	content: "";
	position: absolute;
	top: calc(50% - 16px);
	left: calc(50% - 16px);
	display: block;
	width: 32px;
	height: 32px;
	background-color: var(--primary-darker) invert(1);
	background-size: 32px 32px;
	filter: invert(1);
	transition: 0.25s;
}

ion-header > .uppercase > span:nth-child(1):hover::before {
	transform: translateY(-20px);
	opacity: 0;
}

ion-header > :nth-child(1) > span:nth-child(1)::before {
	background-image: url("https://www.svgrepo.com/show/332404/global.svg") !important;
}

ion-header > :nth-child(2) > span:nth-child(1)::before {
	background-image: url("https://www.svgrepo.com/show/335242/people.svg") !important;
}

ion-header > :nth-child(3) > span:nth-child(1)::before {
	background-image: url("https://www.svgrepo.com/show/113460/mail-sent.svg") !important;
}

ion-header > :nth-child(4) > span:nth-child(1)::before {
	background-image: url("https://www.svgrepo.com/show/340729/notification.svg") !important;
}
}



@-moz-document domain("cybercodeonline.com") {
/**************************************
 *           分頁：聊天訊息             *
 **************************************/
/* 通用聊天 上方玩家 去除原生的額外邊框 */
.chat-message .message-container::after {
	opacity: 0;
}

/* 通用聊天 上方玩家資訊 */
.chat-message .header {
	border-radius: 8px 8px 0 0 !important;
	padding: 0 10px !important;
	margin: 0 !important;
}

/* 通用聊天 上方玩家 去除原生的折角 */
.chat-message .header::after {
	opacity: 0;
}

/* 通用聊天 上方玩家資訊 會員等級 */
.chat-message span.title {
	margin: 0 16px;
	font-size: 0.8rem !important;
}

.chat-message span.title:not(:empty)::before {
	content: "【";
}

.chat-message span.title:not(:empty)::after {
	content: "】";
}

/* 通用聊天 中間訊息框 */
.chat-message .message-container {
	border-radius: 0 16px 16px 16px;
	border-width: 1px !important;
}

.chat-message .message-container::after {
	width: 0;
}

/* 通用聊天 下方等級與時間 */
.chat-message span:not([class]) {
	margin: 0 16px;
}

/* 我方聊天 訊息框 */
.chat-message.isMe .message-container {
	border-radius: 16px 0 16px 16px;
}

/* 你正在看舊訊息 */
ion-content div.absolute div.slide-in-up {
	background-color: #fffa;
	color: #000;
	font-size: 1.05rem;
	padding: 2px 16px;
	height: 100%;
}


/* 標記他人 調亮基本底色 不含地城連結 */
span[class*='hover:bg-black-normal'] {
	background-color: #353c3c;
	opacity: 0.8;
	margin: 0 4px;
	font-weight: bold;
	cursor: pointer;
}

span[class*='hover:bg-black-normal']:hover {
	background-color: #353c3c;
	opacity: 1;
}

}



@-moz-document domain("cybercodeonline.com") {
/**************************************
 *         區塊：個人檔案 GANG          *
 **************************************/
div.w-full > .detail-row {
	position: relative;
	display: block !important;
	height: fit-content !important;
	border-radius: 8px;
	padding: 8px !important;
}

div.w-full > .detail-row > label {
	display: inline-block !important;	
	width: calc(40% + 8px);
	font-size: 1rem !important;
	color: var(--ion-color-primary) !important;
}

div.w-full > .detail-row > label:after {
	content: ":";
	position: absolute;
	left: 39%;
	
}

div.w-full > .detail-row > span {
	display: inline-block !important;
	width: 55%;
}

div.w-full > .detail-row:nth-last-child(4) > span {
	text-transform: none; 
}
}