嘗試讓介面看起來更圓潤。
以「少就是多」爲目的調整介面的編排，讓介面需要滾動的距離更少。
＊由於背包相關頁面包含大量的 inline-style，對於純 CSS 的 userstyle 而言是無法更改的。
CCO Soft Theme by liansheng197
Details
Authorliansheng197
LicenseMIT
Categoryuserstyles
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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...