index.css

:root {
  --mio-main: 255, 255, 255;
  --mio-text: 0, 0, 0;
  --mio-primary: 100, 209, 226; /* 主题色 #64d1e2 偏蓝 */
  --mio-primary50: 63, 194, 214;
  --mio-main-opacity: 0.3;
  --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-main-opacity: 0.3;
    --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);
  }
}

@font-face {
  font-family: "Yozai";
  src: url("../font/Yozai-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "HYTMR";
  src: url("https://npm.elemecdn.com/fontcdn-ariasaka@1.0.0/HYTangMeiRen55W.woff2") format("woff2");
}

/** 背景 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(https://kasuie.cc/api/img/bg?size=regular); /* 背景图片，可自行替换 */
  z-index: 0;
}

@media screen and (max-width: 960px) {
  body::before {
    background-image: url(https://kasuie.cc/api/img/bg?type=mobile&size=regular); /* 竖屏背景图片，可自行替换 */
  }
}

/**白天背景稍亮*/
body.hope-ui-light::before {
  filter: blur(3px) brightness(0.7);
}
/**夜间背景稍暗*/
body.hope-ui-dark::before {
  filter: blur(3px) brightness(0.3);
}

div#root {
  position: relative;
  z-index: 1;
  height: 100vh;
}

/**管理后台*/
div#root div.hope-c-PJLV-iiLzBwx-css {
  background: transparent;
}

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

/**内容区*/

/**侧边栏*/
div.hope-c-PJLV-ibpTetR-css > div:first-child {
  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);
}

/**tag a*/
div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css {
  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), 0.3);
}
/**亮色模式*/
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css {
  background: rgba(var(--mio-primary), 0.3);
}

/**主内容区*/
/**卡片*/
div.hope-c-PJLV-ibpTetR-css
  div.hope-c-PJLV-ijycFhp-css
  div.hope-c-PJLV-iiBrJnl-css,
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), 0.3);
}

div.hope-c-PJLV-ibpTetR-css
  div.hope-c-PJLV-ijycFhp-css
  div.hope-c-PJLV-iiBrJnl-css:hover,
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), 0.7);
}

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

/**开关*/
.hope-c-mHASU-byiOue-variant-filled {
  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);
  border-color: var(--mio-primary);
}

/**头部*/
div#root div.header {
  background: transparent;
}

div#root div.header .header-left {
  width: 40px;
  height: 40px;
}

div#root div.header .header-right > button {
  background: transparent;
}

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

/**内容部分*/

div#root div.body {
  min-height: calc(100vh - 102px);
}

/*导航部分*/
div#root div.body nav.nav {
  color: #fff;
  background: transparent;
}
div#root div.body nav.nav::after {
  background-color: transparent;
}

/*列表部分*/
div#root div.body div.obj-box {
  background-color: rgba(var(--mio-main), var(--mio-main-opacity));
  min-height: 300px;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  backdrop-filter: blur(5px);
}

div#root div.body div.obj-box::-webkit-scrollbar {
  width: 4px;
  transition: all 0.3s ease-in-out;
}

div#root div.body div.obj-box::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 8px;
  transition-duration: 150ms;
  background: rgba(var(--mio-text), 0.15);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

div#root div.body div.obj-box::-webkit-scrollbar-track {
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover {
  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), 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), var(--mio-main-opacity));
  backdrop-filter: blur(5px);
}

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

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

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

div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
}

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

/**底部*/
div#root div.footer {
  display: none;
}

/**工具栏*/
div.left-toolbar-box,
div.center-toolbar {
  z-index: 1;
}

div.left-toolbar-box div.left-toolbar {
  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));
}

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));
}

/**返回顶部*/
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), 1);
}

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

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

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

/**登录页*/
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifJliWT-css,
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-igjRXTJ-css {
  display: none;
}
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ibiABng-css,
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css {
  background-color: transparent;
}

/**登录框*/
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), 0.5);
  backdrop-filter: blur(5px);
}

div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-idKXllh-css a {
  display: none;
}