Skip to content

Commit

Permalink
style: recover
Browse files Browse the repository at this point in the history
  • Loading branch information
@kasuie
kasuie committed Apr 25, 2024
1 parent 1a1142c commit 8c68480
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 94 deletions.
96 changes: 45 additions & 51 deletions v3/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,20 @@
--mio-text: 0, 0, 0;
--mio-primary: 100, 209, 226;
--mio-primary50: 63, 194, 214;
--hope-colors-info9: rgba(var(--mio-primary-js, var(--mio-primary)), 1);
--hope-colors-info4: rgba(var(--mio-primary-js, var(--mio-primary)), 1);
--hope-colors-info5: rgba(var(--mio-primary50-js, var(--mio-primary50)), 1);
--hope-colors-info11: rgba(var(--mio-main-js, var(--mio-main)), 1);
--hope-colors-info9: rgba(var(--mio-primary), 1);
--hope-colors-info4: rgba(var(--mio-primary), 1);
--hope-colors-info5: rgba(var(--mio-primary50), 1);
--hope-colors-info11: rgba(var(--mio-main), 1);

.hope-ui-dark {
--mio-main: 0, 0, 0;
--mio-text: 255, 255, 255;
--mio-primary: 100, 209, 226;
--mio-primary50: 63, 194, 214;
--hope-colors-info9: rgba(var(--mio-primary-js, var(--mio-primary)), 1);
--hope-colors-info4: rgba(var(--mio-primary-js, var(--mio-primary)), 0.4);
--hope-colors-info5: rgba(
var(--mio-primary50-js, var(--mio-primary50)),
0.4
);
--hope-colors-info11: rgba(
var(--mio-primary50-js, var(--mio-primary50)),
1
);
--hope-colors-info9: rgba(var(--mio-primary), 1);
--hope-colors-info4: rgba(var(--mio-primary), 0.4);
--hope-colors-info5: rgba(var(--mio-primary50), 0.4);
--hope-colors-info11: rgba(var(--mio-primary50), 1);
}
}

Expand Down Expand Up @@ -69,32 +63,32 @@ div#root div.hope-c-PJLV-iiLzBwx-css {

/**头部*/
div#root div.hope-c-PJLV-iiLzBwx-css header {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background-color: rgba(var(--mio-main), 0.3);
}

/**内容区*/

/**侧边栏*/
div.hope-c-PJLV-ibpTetR-css > div:first-child {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background-color: rgba(var(--mio-main), 0.3);
}

div.hope-c-PJLV-ibpTetR-css > div:first-child div.hope-c-PJLV-ibBheSN-css {
color: var(--mio-main-js, var(--mio-main));
color: var(--mio-main);
}

/**tag a*/
div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css {
color: rgba(var(--mio-primary-js, var(--mio-primary)));
background-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.2);
color: rgba(var(--mio-primary));
background-color: rgba(var(--mio-primary), 0.2);
}
/**暗色模式*/
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ijrehjy-css {
background: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background: rgba(var(--mio-main), 0.3);
}
/**亮色模式*/
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css {
background: rgba(var(--mio-primary-js, var(--mio-primary)), 0.3);
background: rgba(var(--mio-primary), 0.3);
}

/**主内容区*/
Expand All @@ -106,7 +100,7 @@ div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ijycFhp-css
div.hope-c-PJLV-iiVJRSE-css {
transition: all 0.2s ease-in-out;
background: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background: rgba(var(--mio-main), 0.3);
}

div.hope-c-PJLV-ibpTetR-css
Expand All @@ -115,33 +109,33 @@ div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ijycFhp-css
div.hope-c-PJLV-iiVJRSE-css:hover {
border-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.7);
border-color: rgba(var(--mio-primary), 0.7);
}

/**字段*/
.hope-c-kvTTWD-hYRNAb-variant-filled {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.2);
background-color: rgba(var(--mio-main), 0.2);
}

.hope-c-kvTTWD-hYRNAb-variant-filled:hover,
.hope-c-kvTTWD-hYRNAb-variant-filled:focus {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.7);
border-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.5);
background-color: rgba(var(--mio-main), 0.7);
border-color: rgba(var(--mio-primary), 0.5);
}

/**开关*/
.hope-c-mHASU-byiOue-variant-filled {
color: rgb(var(--mio-primary-js, var(--mio-primary)), 0.5);
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.2);
color: rgb(var(--mio-primary), 0.5);
background-color: rgba(var(--mio-main), 0.2);
}

.hope-c-mHASU-byiOue-variant-filled[data-checked] {
background-color: currentcolor;
}

.hope-c-mHASU-byiOue-variant-filled[data-focus] {
box-shadow: 0 0 0 3px var(--mio-primary-js, var(--mio-primary));
border-color: var(--mio-primary-js, var(--mio-primary));
box-shadow: 0 0 0 3px var(--mio-primary);
border-color: var(--mio-primary);
}

/**头部*/
Expand All @@ -159,7 +153,7 @@ div#root div.header .header-right > button {
}

div#root div.header svg {
color: rgba(var(--mio-primary-js, var(--mio-primary)));
color: rgba(var(--mio-primary));
}

/**内容部分*/
Expand All @@ -175,7 +169,7 @@ div#root div.body nav.nav::after {

/*列表部分*/
div#root div.body div.obj-box {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background-color: rgba(var(--mio-main), 0.3);
min-height: 300px;
max-height: calc(100vh - 180px);
overflow-y: auto;
Expand All @@ -202,32 +196,32 @@ div#root div.body div.obj-box::-webkit-scrollbar-track {
}

div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.4);
background-color: rgba(var(--mio-primary), 0.4);
}

div#root div.body div.obj-box span.hope-c-iojPKw svg {
color: rgba(var(--mio-main-js, var(--mio-main)), 1);
color: rgba(var(--mio-main), 1);
}

/*底部MD*/
div#root div.body div.hope-c-PJLV-ikSuVsl-css,
div#root div.body .hope-c-PJLV-iiuDLME-css {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background-color: rgba(var(--mio-main), 0.3);
backdrop-filter: blur(5px);
}

/**MD*/
.markdown-body > ul > li::marker {
color: rgba(var(--mio-primary-js, var(--mio-primary)), 1);
color: rgba(var(--mio-primary), 1);
}

/**侧边栏*/
div#root div.body div.hope-c-PJLV-ieGWMbI-css {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background-color: rgba(var(--mio-main), 0.3);
}

div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-iZZmce-css {
background-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.7);
background-color: rgba(var(--mio-primary), 0.7);
}

div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
Expand All @@ -237,7 +231,7 @@ div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
}

div#root div.body svg {
color: rgba(var(--mio-primary-js, var(--mio-primary)));
color: rgba(var(--mio-primary));
}

/**底部*/
Expand All @@ -252,44 +246,44 @@ div.center-toolbar {
}

div.left-toolbar-box div.left-toolbar {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.8);
background-color: rgba(var(--mio-main), 0.8);
}

div.left-toolbar-box div.left-toolbar svg.hope-icon,
div.left-toolbar-box svg.hope-icon {
color: rgba(var(--mio-primary-js, var(--mio-primary)));
color: rgba(var(--mio-primary));
}

div.left-toolbar-box div.left-toolbar svg.hope-icon:hover,
div.left-toolbar-box svg.hope-icon:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(var(--mio-primary-js, var(--mio-primary)));
background-color: rgba(var(--mio-primary));
}

/**返回顶部: 为js获取后台设置的主题色，注释掉*/
/* div.hope-c-PJLV-ihMpUpe-css {
background-color: rgba(var(--mio-primary-js, var(--mio-primary))) !important;
} */
/**返回顶部*/
div.hope-c-PJLV-ihMpUpe-css {
background-color: rgba(var(--mio-primary)) !important;
}

/**tooltip提示*/
div.hope-tooltip {
color: rgba(255, 255, 255, 1);
background-color: rgba(var(--mio-primary-js, var(--mio-primary)), 1);
background-color: rgba(var(--mio-primary), 1);
}

/**加载图标*/
div.hope-spinner {
color: rgba(var(--mio-primary-js, var(--mio-primary)));
color: rgba(var(--mio-primary));
}

/**menu下拉区域*/
div.hope-menu__content {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
background-color: rgba(var(--mio-main), 0.3);
}

/**select下拉区域*/
div.hope-c-XJURY {
background: rgba(var(--mio-main-js, var(--mio-main)), 0.8);
background: rgba(var(--mio-main), 0.8);
}

/**登录页*/
Expand All @@ -305,7 +299,7 @@ div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css {
/**登录框*/
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-iubUra-css,
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css {
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.5);
background-color: rgba(var(--mio-main), 0.5);
backdrop-filter: blur(5px);
}

Expand Down
44 changes: 1 addition & 43 deletions v3/js/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: kasuie
* @Date: 2024-04-24 15:35:59
* @LastEditors: kasuie
* @LastEditTime: 2024-04-25 21:01:06
* @LastEditTime: 2024-04-25 21:07:29
* @Description:
*/
let footer = false;
Expand Down Expand Up @@ -42,11 +42,6 @@ const onPatchStyle = (style) => {
head.appendChild(styleElement);
};

const setCssVariable = (variable, value) => {
console.log(variable, value);
document.documentElement.style.setProperty(variable, value);
};

const onCreateElement = (tag, attrs) => {
const dom = document.createElement(tag);
if (attrs && typeof attrs == "object") {
Expand Down Expand Up @@ -101,43 +96,6 @@ const init = () => {
renderFooter(footerData);
}, 300);
}

const setVar = (backTopDom) => {
if (backTopDom) {
let primary = window.getComputedStyle(backTopDom).backgroundColor;
primary = primary?.includes("rgb")
? primary.replace("rgb(", "").replace(")", "")
: null;
if (primary) {
const rgb = primary.split(",");
const vars = ["--mio-primary", "--mio-primary50"];
vars.map((v) => {
if (v == "--mio-primary") {
setCssVariable(`${v}-js`, primary);
} else if (v == "--mio-primary50") {
let primary50 = "";
rgb.forEach((vv, index) => {
if (index) {
primary50 = `${primary50}, ${+vv - 10}`;
} else {
primary50 = `${+vv - 40}`;
}
});
setCssVariable(`${v}-js`, primary50);
}
});
}
}
};

let flag = 0;
const interval1 = setInterval(() => {
const backTopDom = document.querySelector(".hope-c-PJLV-ihMpUpe-css");
backTopDom && setVar(backTopDom);
if (backTopDom || flag > 10) clearInterval(interval1);
++flag;
}, 300);

// const navHome = document.querySelector(".hope-c-PJLV-ibMsOCJ-css");
// if (navHome) {
// navHome.innerHTML = "✨";
Expand Down

0 comments on commit 8c68480

Please sign in to comment.