引入字体

引入全局字体 LXGW WenKai。

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

自定义 CSS 样式

所有自定义的 CSS 样式放在一个 style 标签中。

移除站点公告关闭按钮

.notify-render .hope-close-button{
    display: none;
}

文字超长自动换行

.name-box .name {
    white-space: unset !important;
    overflow: unset !important;
}

自定义网站背景图

亮色模式

.hope-ui-light {
    background-image: url("https://photo-1322390394.cos.ap-nanjing.myqcloud.com/2024/06/25/667a97b925ff4.png") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
}

暗色模式

.hope-ui-dark {
    background-image: url("https://photo-1322390394.cos.ap-nanjing.myqcloud.com/2024/06/25/667a97b925ff4.png") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
}

搜索主体透明毛玻璃效果

亮色模式

.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

暗色模式

.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

搜索栏输入框透明毛玻璃效果

亮色模式

.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

暗色模式

.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

搜索按钮透明毛玻璃效果

亮色模式

.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
   padding: var(--hope-space-1)!important;
}

暗色模式

.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
    padding: var(--hope-space-1)!important;
}

主列表透明效果

白天模式

.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

夜间模式

.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

README 区域透明效果

白天模式

.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

夜间模式

.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

顶部右上角切换按钮透明效果

白天模式

.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

夜间模式

.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 50%) !important;
}

右下角侧边栏按钮透明效果

白天模式

.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

夜间模式

.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

代码块透明效果

白天模式

.hope-ui-light pre {
    background-color: rgba(255, 255, 255, 0.1)!important;
}

夜间模式

.hope-ui-dark pre {
    background-color: rgba(255, 255, 255, 0)!important;
}

左侧侧边栏目录透明效果

白天模式

.hope-ui-light .hope-c-PJLV-ieGWMbI-css {
    background: rgba(255, 255, 255, 0.5) !important;
}

夜间模式

.hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

返回顶部按钮透明效果

.hope-c-PJLV-ihVEsOa-css {
    background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

顶部和导航条透明效果

正常情况未使用吸附功能

顶部

.hope-c-PJLV-ikaMhsQ-css {
    background: rgba(255, 255, 255, 0) !important;
}

导航条

白天模式：

.hope-ui-light .hope-c-PJLV-idaeksS-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}

夜间模式：

.hope-ui-dark .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !important;
}

吸附到页面顶部

顶部

.hope-c-PJLV-icWrYmg-css {
    background: rgba(255, 255, 255, 0) !important;
}

导航条

.hope-c-PJLV-icKsjdm-css::after {
    background: rgba(255, 255, 255, 0) !important;
}

白天模式：

.hope-ui-light .hope-c-PJLV-icKsjdm-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}

夜间模式：

.hope-ui-dark .hope-c-PJLV-icKsjdm-css {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !important;
}

仅吸附导航栏

导航条

.hope-c-PJLV-ifdXShc-css::after {
    background: rgba(255, 255, 255, 0) !important;
}

白天模式：

.hope-ui-light .hope-c-hrsMRY {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}

夜间模式：

.hope-ui-dark .hope-c-hrsMRY {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !important;
}

底部 CSS

dibu {
    border-top: 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.App {
    min-height: 85vh;
}
.table {
    margin: auto;
}

移除底部信息

.footer {
    display: none !important;
}

设置全局字体

*{font-family:LXGW WenKai}
*{font-weight:normal}
body {font-family: LXGW WenKai;}

隐藏登陆 LOGO 图标

.hope-c-PJLV-ibwASZs-css{
    display: none;
}