Skip to content

CCO Soft Theme by liansheng197

Write a review Install Get Stylus

Details

Authorliansheng197

LicenseMIT

Categoryuserstyles

Created

Updated

Size16 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

嘗試讓介面看起來更圓潤。

以「少就是多」爲目的調整介面的編排，讓介面需要滾動的距離更少。

＊由於背包相關頁面包含大量的 inline-style，對於純 CSS 的 userstyle 而言是無法更改的。

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         CCO Soft Theme 
@version      20220718.09.02
@namespace    userstyles.world/user/liansheng197
@description  ...
@author       liansheng197
@license      MIT
==/UserStyle== */
@-moz-document domain("cybercodeonline.com") {
	/**************************************
*            全局：底部按鈕              *
**************************************/
	ion-tabs {
		position: relative !important;
	}

	ion-tab-bar {
		position: relative;
	}

	ion-tab-button {
		background-color: var(--primary-darker);
	}

	ion-tab-button.tab-selected {
		color: #ff0;
	}

	ion-tab-button span.relative:has(svg) {
		position: absolute;
		display: flex;
		background-color: var(--primary-darker);
		height: 120px;
		transition: 0.25s;
		z-index: 1;
	}

	ion-tab-button span.relative:has(svg):hover {
		transform: translateY(-20%);
		opacity: 0;
	}

	ion-tab-button span.relative svg {
		margin: auto;
		width: 100%;
		height: 40px;
	}

	ion-tab-button ion-label {
		position: fixed;
		line-height: 1.25rem !important;
		font-size: 1.2rem !important;
	}

	ion-tab-button.tab-selected ion-label {
		color: yellow;
	}
}

@-moz-document domain("cybercodeonline.com") {
	/**************************************
*        全局：所有掛機行動的按鈕         *
**************************************/
	span > div.ion-activatable {
		position: relative;
	}

	span > div.ion-activatable > div.w-full {
		position: relative;
		padding: 4px;
	}

	span > div.ion-activatable > div.w-full span.uppercase {
		background-color: var(--primary-darker);
		height: 60px;
		border-radius: 4px;
		padding: 8px;
		opacity: 1;
		z-index: 1;
		transition: 0.25s;
	}

	span > div.ion-activatable > div.w-full span.uppercase:hover {
		opacity: 0;
		transition: 0.25s;
	}

	span > div.ion-activatable > div.w-full span.whitespace-pre-line {
		position: absolute;
		top: 0.4rem;
		padding-right: 8px;
		transition: 0.25s;
		font-size: 0.75rem;
	}

	span > div.ion-activatable > div.w-full span.text-primary-dark:has(.normal-case) {
		display: none;
	}

	span > div.ion-activatable > div.w-full span:has(svg) {
		z-index: 2;
	}

	span > div.ion-activatable > div.w-full span:has(.text-danger) {
		z-index: 2;
	}
}

@-moz-document domain("cybercodeonline.com") {
	/**************************************
*        全局：右下角的手機按鈕           *
**************************************/
	.fab-container:has(.pointer-events-none) div.fixed.fab {
		opacity: 0.5;
		transition: 0.25s;
	}

	.fab-container:has(.pointer-events-none) div.fixed.fab:hover {
		opacity: 1;
		transition: 0.25s;
	}
}

@-moz-document domain("cybercodeonline.com") {
	/**************************************
*        全局：所有旅行相關的按鈕         *
**************************************/
	span.flex-grow > div.w-full {
		position: relative;
	}

	span.flex-grow > div.w-full {
		position: relative;
		padding: 4px;
	}

	span.flex-grow > div.w-full span.uppercase {
		background-color: var(--primary-darker);
		height: 45px;
		padding-top: 10px;
		border-radius: 4px;
		opacity: 1;
		z-index: 1;
		transition: 0.25s;
	}

	span.flex-grow > div.w-full span.uppercase:hover {
		opacity: 0;
		transition: 0.25s;
	}

	span.flex-grow > div.w-full span.text-primary-dark {
		position: absolute;
		display: block;
		padding-right: 5rem;
		font-weight: bold;
	}

	span.flex-grow > div.w-full:has(path[d^='M403.594 220.649a7.55']) span.text-primary-dark {
		color: yellow;
		top: 1rem;
		font-size: 1rem;
	}

	span.flex-grow > div.w-full:has(path[d^='M43 1.91c-1.92']) span.text-primary-dark {
		color: yellow;
		top: 1rem;
		font-size: 1rem;
	}


	span.flex-grow > div.w-full svg {
		margin-left: 16px;
	}

	span.flex-grow > div.w-full span.text-danger {
		z-index: 1;
	}
}

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

@-moz-document domain("cybercodeonline.com") {
	/**************************************
*        分頁：背包頁的頂部按鈕          *
**************************************/
	/*
 - 部分頁面有分隔條的原因，改用 nth-last-child 來決定圖示
 - 五個分頁的讀取順序不固定，不能用 nth* 來判斷，改用右下角是否存在手機按鈕來決定
*/
	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) {
		position: relative !important;
		height: 50px;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase {
		position: relative !important;
		height: 100%;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase > span:nth-child(1) {
		color: #0000;
		width: 100%;
		height: 100%;
		padding-top: calc(25px - 0.5rem);
		text-shadow: none;
		text-align: center;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .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;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase > span:nth-child(1):hover {
		color: #fff;
		text-shadow: none;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .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;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase > span:nth-child(1):hover::before {
		transform: translateY(-20px);
		opacity: 0;
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > :nth-last-child(4) > span:nth-child(1)::before {
		background-image: url("https://www.svgrepo.com/show/26159/shield.svg");
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > :nth-last-child(3) > span:nth-child(1)::before {
		background-image: url("https://www.svgrepo.com/show/29190/backpack.svg");
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > :nth-last-child(2) > span:nth-child(1)::before {
		background-image: url("https://www.svgrepo.com/show/98789/mailbox.svg");
	}

	#root:not(:has(div.fixed.fab)) .ion-page:not(.ion-page-hidden) > :nth-child(1) > :nth-last-child(1) > span:nth-child(1)::before {
		background-image: url("https://www.svgrepo.com/show/65383/saw.svg");
	}
}

@-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") {
	/**************************************
*        分頁：個人檔案頁的頂部按鈕       *
**************************************/
	/*
 - 部分頁面有分隔條的原因，改用 nth-last-child 來決定圖示
 - 五個分頁的讀取順序不固定，不能用 nth* 來判斷，改用右下角是否存在手機按鈕來決定
*/
	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidden) > :nth-child(1) {
		position: relative !important;
		height: 50px;
	}

	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase {
		position: relative !important;
		height: 100%;
	}

	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase > span:nth-child(1) {
		color: #0000;
		width: 100%;
		height: 100%;
		padding-top: calc(25px - 0.5rem);
		text-shadow: none;
		text-align: center;
	}

	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .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;
	}

	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .uppercase > span:nth-child(1):hover {
		color: #fff;
		text-shadow: none;
	}

	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidden) > :nth-child(1) > .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;
	}

	#root:has(div.fixed.fab) .ion-page:not(.ion-page-hidde...

Reviews

No reviews yet.