Skip to content

Commit

Permalink
style: v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@kasuie
kasuie committed Apr 25, 2024
1 parent 241d3a9 commit 88b82f5
Showing 1 changed file with 48 additions and 42 deletions.
90 changes: 48 additions & 42 deletions v3/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,26 @@
--mio-text: 0, 0, 0;
--mio-primary: 100, 209, 226;
--mio-primary50: 63, 194, 214;
--hope-colors-info9: rgba(var(--mio-primary-js, --mio-primary), 1);
--hope-colors-info4: rgba(var(--mio-primary-js, --mio-primary), 1);
--hope-colors-info5: rgba(var(--mio-primary50-js, --mio-primary50), 1);
--hope-colors-info11: rgba(var(--mio-main-js, --mio-main), 1);
--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-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, --mio-primary), 1);
--hope-colors-info4: rgba(var(--mio-primary-js, --mio-primary), 0.4);
--hope-colors-info5: rgba(var(--mio-primary50-js, --mio-primary50), 0.4);
--hope-colors-info11: rgba(var(--mio-primary50-js, --mio-primary50), 1);
--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
);
}
}

Expand Down Expand Up @@ -63,32 +69,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, --mio-main), 0.3);
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
}

/**内容区*/

/**侧边栏*/
div.hope-c-PJLV-ibpTetR-css > div:first-child {
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
background-color: rgba(var(--mio-main-js, 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, --mio-main);
color: var(--mio-main-js, 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, --mio-primary));
background-color: rgba(var(--mio-primary-js, --mio-primary), 0.2);
color: rgba(var(--mio-primary-js, var(--mio-primary)));
background-color: rgba(var(--mio-primary-js, 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, --mio-main), 0.3);
background: rgba(var(--mio-main-js, 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, --mio-primary), 0.3);
background: rgba(var(--mio-primary-js, var(--mio-primary)), 0.3);
}

/**主内容区*/
Expand All @@ -100,7 +106,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, --mio-main), 0.3);
background: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
}

div.hope-c-PJLV-ibpTetR-css
Expand All @@ -109,33 +115,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, --mio-primary), 0.7);
border-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.7);
}

/**字段*/
.hope-c-kvTTWD-hYRNAb-variant-filled {
background-color: rgba(var(--mio-main-js, --mio-main), 0.2);
background-color: rgba(var(--mio-main-js, 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, --mio-main), 0.7);
border-color: rgba(var(--mio-primary-js, --mio-primary), 0.5);
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.7);
border-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.5);
}

/**开关*/
.hope-c-mHASU-byiOue-variant-filled {
color: rgb(var(--mio-primary-js, --mio-primary), 0.5);
background-color: rgba(var(--mio-main-js, --mio-main), 0.2);
color: rgb(var(--mio-primary-js, var(--mio-primary)), 0.5);
background-color: rgba(var(--mio-main-js, 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, --mio-primary);
border-color: var(--mio-primary-js, --mio-primary);
box-shadow: 0 0 0 3px var(--mio-primary-js, var(--mio-primary));
border-color: var(--mio-primary-js, var(--mio-primary));
}

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

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

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

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

div#root div.body div.obj-box span.hope-c-iojPKw svg {
color: rgba(var(--mio-main-js, --mio-main), 1);
color: rgba(var(--mio-main-js, 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, --mio-main), 0.3);
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.3);
backdrop-filter: blur(5px);
}

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

/**侧边栏*/
div#root div.body div.hope-c-PJLV-ieGWMbI-css {
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
background-color: rgba(var(--mio-main-js, 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, --mio-primary), 0.7);
background-color: rgba(var(--mio-primary-js, var(--mio-primary)), 0.7);
}

div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
Expand All @@ -231,7 +237,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, --mio-primary));
color: rgba(var(--mio-primary-js, var(--mio-primary)));
}

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

div.left-toolbar-box div.left-toolbar {
background-color: rgba(var(--mio-main-js, --mio-main), 0.8);
background-color: rgba(var(--mio-main-js, 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, --mio-primary));
color: rgba(var(--mio-primary-js, 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, --mio-primary));
background-color: rgba(var(--mio-primary-js, var(--mio-primary)));
}

/**返回顶部*/
div.hope-c-PJLV-ihMpUpe-css {
background-color: rgba(var(--mio-primary-js, --mio-primary)) !important;
background-color: rgba(var(--mio-primary-js, var(--mio-primary))) !important;
}

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

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

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

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

/**登录页*/
Expand All @@ -299,7 +305,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, --mio-main), 0.5);
background-color: rgba(var(--mio-main-js, var(--mio-main)), 0.5);
backdrop-filter: blur(5px);
}

Expand Down

0 comments on commit 88b82f5

Please sign in to comment.