body {
height: 100vh;
overflow: hidden;
--icon_radius: 16px;
--icon_size: 60px;
--icon_gap_x: 30px;
--icon_gap_y: 30px;
--icon_opacity: 1;
--icon_name_size: 12px;
--icon_name_color: #fff;
--wall_mask: 0;
--wall_blur: 2px;
}
img {
width: 100%;
height: 100%;
}
input,
textarea {
outline: none;
border: none;
background-color: transparent;
font-family: inherit;
}
.scroll {
overflow: hidden auto;
height: 100%;
}
.scroll::-webkit-scrollbar {
width: 2px;
height: 2px;
}
.scroll::-webkit-scrollbar-thumb {
background: silver;
border-radius: 2px;
}
.sortable-fallback {
opacity: 0.4 !important;
}
.wallpaper {
z-index: -1;
position: absolute;
inset: 0px;
transition: background 0.3s ease 0s, transform 0.3s ease 0s;
background-size: cover;
background-image: url("https://www4.bing.com//th?id=OHR.WaitangiFjordlandNP_ZH-CN9436140228_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
}
aside .icon,
.add-page .icon {
height: 18px;
width: 18px;
line-height: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
fill: currentcolor;
transition: transform .2s;
background-repeat: no-repeat;
}
aside nav>div:hover .icon {
transform: scale(1.2);
}
aside {
animation: 0.2s ease 0s 1 normal none running fadeIn-26ca13e3;
position: fixed;
z-index: 2;
top: 0px;
left: 0px;
bottom: 0px;
transition: all 0.1s ease 0s;
text-align: center;
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: center;
width: 50px;
backdrop-filter: blur(4px);
background-color: rgba(34, 34, 34, 0.1);
}
aside header img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
.icon.home {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.code {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.app {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.zan {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.game {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.xin {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.shop {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.music {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.keji {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.chat {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.office {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.read {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.learn {
background-image: url("data:image/svg+xml;utf8,");
}
.icon.tool {
background-image: url("data:image/svg+xml;utf8,");
}
aside .add,
.pop .add i {
background-image: url("data:image/svg+xml;utf8,");
}
aside nav {
flex: 1 1 0%;
overflow: hidden auto;
}
aside header {
margin: 40px 0px;
cursor: pointer;
}
aside footer {
cursor: pointer;
height: var(--icon_size);
}
aside footer .icon,
.pop .config i {
background-image: url("data:image/svg+xml;utf8,");
}
aside footer:hover .icon {
animation: rotate ease-in-out .4s;
}
aside nav div {
display: flex;
justify-content: center;
align-items: center;
margin: 4px 0px;
height: 50px;
cursor: pointer;
transition: background 0.3s ease 0s;
flex-direction: column;
}
aside p {
padding: 4px 4px 0px;
color: white;
}
aside nav .active {
background-color: rgba(255, 255, 255, 0.15);
}
.add-page {
border-radius: 14px;
padding: 12px;
line-height: 1.4;
text-align: justify;
z-index: 99;
font-size: 14px;
position: absolute;
inset: 231px auto auto 51px;
backdrop-filter: blur(18px);
color: rgb(234, 234, 234);
background-color: rgba(34, 34, 34, 0.5) !important;
box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 24px !important;
}
.add-page h4 {
text-align: center;
margin: 9px;
}
.add-page div {
margin: 9px 0px;
}
.add-page .icons {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-flow: dense;
gap: 5px;
}
.add-page span {
cursor: pointer;
border-radius: 5px;
padding: 5px 7px;
}
.add-page span:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.add-page span.active {
background-color: rgba(255, 255, 255, 0.2);
}
.add-page input {
margin-right: 22px;
color: white;
background-color: transparent;
}
.add-page .zbtn {
background-color: transparent;
color: white;
}
.wallpaper div {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
backdrop-filter: blur(var(--wall_blur));
background-color: rgba(0, 0, 0, var(--wall_mask));
}
.datetime {
text-align: center;
margin-top: 3vh;
color: white;
transition: all 0.2s ease 0s;
}
.focusMode.datetime {
margin-top: 13vh;
}
.app-time {
display: inline-block;
font-size: 70px;
text-shadow: rgba(0, 0, 0, 0.16) 0px 2px 6px;
user-select: none;
}
.app-time .col {
vertical-align: 5px;
}
.app-date {
font-size: 14px;
line-height: 26px;
text-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px;
}
.app-date span {
margin: 0px 4px;
}
.search-box {
position: relative;
max-width: 600px;
margin: 3vh auto 20px;
}
.search-engine {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-width: 50px;
max-width: 50px;
transition: all 0.2s ease 0s;
position: relative;
}
.search-engine img {
width: 20px;
height: 20px;
}
.search-engine i {
width: 12px;
height: 12px;
position: absolute;
top: 50%;
color: rgba(0, 0, 0, 0.2);
margin-top: -5px;
right: 2px;
background-image: url("data:image/svg+xml;utf8,");
}
.search-box input {
color: rgb(34, 34, 34);
background-color: transparent;
font-size: 14px;
height: 100%;
width: 100%;
line-height: 20px;
}
.search-box form {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 3px;
position: relative;
margin: 9px 0;
backdrop-filter: blur(8px);
display: flex;
border-radius: 42px;
height: 42px;
background-color: rgba(255, 255, 255, 0.3);
align-items: center;
transition: all 0.2s ease 0s;
}
.search-box form:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.reset-icon {
display: flex;
cursor: pointer;
transform: scale(0);
transition: transform 0.2s ease 0s;
}
.search-icon {
min-width: 50px;
max-width: 50px;
height: 100%;
transition: all 0.2s ease 0s;
position: relative;
}
.reset-icon.active {
transform: scale(1);
}
.reset-icon i {
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.search-icon i {
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml;utf8,");
}
.searchEngines,
.suggestion {
backdrop-filter: blur(15px);
transition: all 0.2s ease 0s;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 10px 3px;
border-radius: 20px;
overflow: hidden;
padding: 9px;
position: absolute;
left: 0px;
right: 0px;
z-index: 10;
}
.suggestion div {
position: relative;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 33px;
font-size: 14px;
}
.suggestion div:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.suggestion i {
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 9px;
vertical-align: -3px;
background-image: url("data:image/svg+xml;utf8,");
}
.searchEngines div {
width: 64px;
padding: 6px 0px;
display: inline-block;
cursor: pointer;
position: relative;
transition: background 0.2s ease 0s;
border-radius: 8px;
}
.searchEngines div:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.searchEngines p {
font-size: 12px;
line-height: 22px;
text-align: center;
}
.searchEngines img,
.Msearch img {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
.searchEngines i {
width: 12px;
height: 12px;
display: block;
background-image: url("data:image/svg+xml;utf8,");
}
.searchEngines .logo,
.Msearch .logo {
color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
line-height: 30px;
margin: 0px auto;
height: 36px;
width: 36px;
min-width: 36px;
border-radius: 8px;
transition: all 0.2s ease 0s;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 10px 3px;
}
.searchEngines .del {
display: none;
top: -3px;
right: -3px;
padding: 1px;
position: absolute;
box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 4px 3px;
border-radius: 50%;
background: rgb(191, 191, 191);
}
.searchEngines div:hover .del {
display: block;
}
.searchEngines div .del:hover {
background: rgb(230, 40, 40);
}
.searchEngines .add i,
.Madd .diy .link.icon i {
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.Msearch .item {
border-radius: 5px;
line-height: 10px;
padding: 10px;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: row;
position: relative;
background-color: #f5f5f5;
}
.Msearch .zmodal {
padding: 15px;
}
.Msearch .item p {
white-space: nowrap;
line-height: 20px;
font-size: 14px;
}
.Msearch .item p:last-child {
font-size: 12px;
color: #939393;
}
.Msearch .logo {
margin: 0px 9px 0px 0px;
}
.Msearch .item.active,
.Msearch .item:hover {
background-color: rgba(72, 148, 255, 0.3);
}
.Msearch .list {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(2, 2fr);
gap: 8px;
}
.Msearch .desc {
color: #939393;
font-size: 12px;
margin: 8px 0px;
}
.Msearch .item .select {
display: none;
position: absolute;
top: 9px;
right: 9px;
background-color: rgb(100, 100, 255);
border-radius: 50%;
padding: 2px;
}
.Msearch .active .select {
display: block;
}
.history i {
background-image: url("data:image/svg+xml;utf8,");
}
.history i:last-child {
display: none;
position: absolute;
top: 9px;
right: 2px;
background-image: url("data:image/svg+xml;utf8,");
}
.history div:hover i {
display: inline-block;
}
main {
overflow: auto;
height: 76vh;
}
main::-webkit-scrollbar {
width: 0;
height: 0;
}
main::-webkit-scrollbar-thumb {
border-radius: 0;
}
.grids {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, var(--icon_size));
grid-template-rows: repeat(auto-fill, var(--icon_size));
grid-gap: var(--icon_gap_x) var(--icon_gap_y);
grid-auto-flow: dense;
justify-content: center;
padding: 10px 45px 45px;
max-width: 1350px;
min-height: 73vh;
margin: auto;
}
.grid {
margin: 0px auto;
position: relative;
grid-area: span 1 / span 1 / auto / auto;
border-radius: var(--icon_radius);
opacity: var(--icon_opacity);
width: var(--icon_size);
height: var(--icon_size);
}
.grid .link,
.grid .cpt {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
color: #fff;
border-radius: var(--icon_radius);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
transition: all 0.2s ease 0s;
cursor: pointer;
display: inline-block;
}
.grid>p {
width: calc(100% + var(--icon_gap_y));
margin-left: calc(var(--icon_gap_y) / 2 * -1);
margin-top: 6px;
text-align: center;
color: var(--icon_name_color);
font-size: var(--icon_name_size);
line-height: 1.1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 2px 7px);
}
.grid>.del {
z-index: 11;
position: absolute;
backdrop-filter: blur(10px);
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 7px;
right: 2px;
top: -5px;
height: 20px;
width: 20px;
border-radius: 50%;
color: rgb(51, 51, 51);
background-color: rgba(255, 255, 255, 0.4);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease 0s;
}
.grid>.del:hover {
background-color: rgb(216, 48, 48);
}
.grid>.del i {
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
}
.grid .link p {
font-weight: bold;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.batchDel .grid>.del {
display: flex;
}
.batchDel .grid>.cpt,
.batchDel .grid>.link {
animation: 0.3s ease 0s infinite normal none running aswing;
transform-origin: center 50px;
}
.s1x2 {
grid-column: span 2 / auto;
width: calc(var(--icon_size) * 2 + var(--icon_gap_y) * 1);
height: var(--icon_size);
}
.s2x1 {
grid-row: span 2 / auto;
width: var(--icon_size);
height: calc(var(--icon_size) * 2 + var(--icon_gap_x) * 1);
}
.s2x2,
.ssmall {
grid-area: span 2 / span 2 / auto / auto;
width: calc(var(--icon_size) * 2 + var(--icon_gap_y));
height: calc(var(--icon_size) * 2 + var(--icon_gap_x));
}
.s2x4,
.smedium {
grid-area: span 2 / span 4 / auto / auto;
width: calc(var(--icon_size) * 4 + var(--icon_gap_y) * 3);
height: calc(var(--icon_size) * 2 + var(--icon_gap_x));
}
.cpt-notes {
background-color: white;
}
.cpt-notes .item {
height: 24%;
padding: 0px 6px;
display: flex;
align-items: center;
color: rgb(34, 34, 34);
border-bottom: 1px solid #f2f2f2;
}
.cpt-notes h2 {
margin: 0px;
height: 25%;
font-weight: normal;
background-image: linear-gradient(0deg, rgb(255, 201, 39), rgb(255, 164, 3));
}
.cpt-wallpaper>div {
height: 100%;
}
.cpt-wallpaper>div>div {
height: 100%;
transition: all 1s ease 0s;
background-size: cover;
background-position: center center;
}
.cpt-wallpaper p {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
color: rgb(255, 255, 255);
height: 40px;
padding: 0px 10px;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
line-height: 40px;
}
.cpt-wallpaper span {
position: absolute;
right: 3px;
width: 24px;
height: 24px;
display: inline-block;
transition: all 0.2s ease 0s;
text-align: center;
line-height: 27px;
border-radius: 50%;
z-index: 9;
}
.cpt-wallpaper span:hover {
background-color: rgb(0, 0, 0);
}
.cpt-wallpaper i {
width: 14px;
height: 14px;
display: inline-block;
}
.cpt-wallpaper .download {
top: 5px;
}
.cpt-wallpaper .download i {
background-image: url("data:image/svg+xml;utf8,");
}
.cpt-wallpaper .select {
top: 35px;
}
.cpt-wallpaper .select i {
background-image: url("data:image/svg+xml;utf8,");
}
.cpt-todayShici div {
padding: 5px;
height: calc(100% - 15px);
color: black;
background-color: rgb(255, 255, 255);
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: center;
max-width: 100%;
}
.cpt-todayShici p {
font-size: 0.9em;
}
.cpt-todayShici p:nth-child(2) {
font-size: 1.2em;
}
.cpt-todayShici img {
position: absolute;
left: 0px;
bottom: 0px;
height: auto;
}
.cpt-topsearch>div {
padding: 12px;
height: calc(100% - 20px);
background-image: linear-gradient(135deg, rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.4));
backdrop-filter: blur(5px);
}
.cpt-topsearch span {
padding: 2px 4px;
margin-right: 6px;
border-radius: 2px;
}
.cpt-topsearch span.active {
background-color: rgba(255, 255, 255, 0.2);
}
.cpt-topsearch>div>div {
margin: 12px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cpt-topsearch a {
color: white;
}
.cpt-topsearch a:hover {
opacity: 0.8;
}
.cpt-exchangerate {
background-color: white;
color: black;
}
.cpt-exchangerate>div>div {
padding: 5.5px 10px;
display: flex;
align-items: center;
justify-content: space-between;
color: rgb(34, 34, 34);
}
.cpt-exchangerate section {
display: flex;
align-items: center;
}
.cpt-exchangerate p:last-child {
opacity: 0.6;
}
.cpt-exchangerate img {
width: 1.5em;
height: 1.5em;
border-radius: 0.3em;
margin-right: 1em;
}
.cpt-worldClock>div {
background-color: black;
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.cpt-worldClock>div>div {
width: 25%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cpt-worldClock section {
position: relative;
font-size: 2.8px;
width: 84px;
height: 84px;
box-sizing: content-box;
background-color: #fff;
color: #343436;
border-radius: 50%;
transform: scale(0.9);
}
.cpt-worldClock .digit {
font-size: 1.6em;
display: block;
width: 1.6em;
height: 1.6em;
position: absolute;
top: 50%;
left: 50%;
line-height: 1.6em;
text-align: center;
margin: -0.8em 0px 0px -0.8em;
font-weight: 700;
}
.cpt-worldClock .digit:nth-child(1) {
transform: translate(3.9em, -6.9em);
}
.cpt-worldClock .digit:nth-child(2) {
transform: translate(6.9em, -4em);
}
.cpt-worldClock .digit:nth-child(3) {
transform: translate(8em);
}
.cpt-worldClock .digit:nth-child(4) {
transform: translate(6.8em, 4em);
}
.cpt-worldClock .digit:nth-child(5) {
transform: translate(3.9em, 6.9em);
}
.cpt-worldClock .digit:nth-child(6) {
transform: translateY(8em);
}
.cpt-worldClock .digit:nth-child(7) {
transform: translate(-3.9em, 6.9em);
}
.cpt-worldClock .digit:nth-child(8) {
transform: translate(-6.8em, 4em);
}
.cpt-worldClock .digit:nth-child(9) {
transform: translate(-8em);
}
.cpt-worldClock .digit:nth-child(10) {
transform: translate(-6.9em, -4em);
}
.cpt-worldClock .digit:nth-child(11) {
transform: translate(-3.9em, -6.9em);
}
.cpt-worldClock .digit:nth-child(12) {
transform: translateY(-8em);
}
.cpt-worldClock .point {
position: absolute;
left: 50%;
top: 50%;
width: 0px;
height: 0px;
}
.cpt-worldClock .point::before {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
border-radius: 5px;
background-color: rgb(52, 52, 54);
}
.cpt-worldClock i {
position: absolute;
width: 2px;
bottom: 0px;
left: 50%;
transform-origin: center bottom;
background-color: rgb(52, 52, 54);
border-radius: 1px;
margin-left: -1px;
}
.cpt-worldClock .hour {
height: 9em;
}
.cpt-worldClock .minute {
height: 12em;
}
.cpt-worldClock .second {
height: 14em;
width: 1px;
background-color: rgb(251, 126, 1);
}
.cpt-worldClock p:last-child {
opacity: 0.7;
}
.cpt-caihongpi {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://b.zccdn.cn/e6/p/彩虹屁/彩虹屁背景01.jpg");
}
.cpt-caihongpi::before {
content: "";
position: absolute;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 20, 0, 0.7));
inset: 0px;
opacity: 0.8;
z-index: 0;
}
.cpt-caihongpi div {
padding: 0px 10px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.cpt-caihongpi p {
line-height: 1.4;
position: relative;
transition: all 1s ease 0s;
z-index: 1;
}
.cpt-clock {
background: rgb(17, 17, 17);
}
.cpt-clock>div {
text-align: center;
height: 100%;
padding: 1.7em 0px;
}
.cpt-clock>div>div {
font-weight: 700;
}
.cpt-clock .col {
vertical-align: 0.08em;
}
.cpt-daysMatter>div {
height: calc(100% - 30px);
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 15px;
}
.cpt-daysMatter strong {
font-size: 3em;
}
.zp116_dropClass {
background-color: transparent !important;
}
.s1x1 .cpt-daysMatter>div {
padding: 5px 0px 25px;
white-space: nowrap;
}
.s1x1 .cpt-daysMatter strong {
font-size: 2em;
}
.s1x1 .cpt-daysMatter span,
.s1x1 .cpt-daysMatter>div>div:last-child {
display: none;
}
.s2x4 .cpt-exchangerate>div>div {
width: 41%;
display: inline-flex;
}
.s2x2 .cpt-clock>div {
padding: 3em 0px;
}
.s2x2 .cpt-clock>div>div {
font-size: 3em;
}
.s1x1 .cpt-clock p,
.s1x2 .cpt-clock p {
display: none;
}
.s1x1 .cpt-clock .second,
.s2x2 .cpt-clock .second {
display: none;
}
@media screen and (max-width: 568px) {
.grids {
padding: 10 5px !important;
}
aside {
display: none;
}
}
@keyframes rotate {
0% {
transform: rotate(120deg)
}
}