目前已知 Bug：

1. 在窄一些的屏幕，列表会居右显示
2. 文档区手机界面没搞好
3. 预览.md 文件会是一片黑
4. 输入密码弹窗的输入框颜色受到影响
5. 后台 css 受到影响，刷新一下可解决
6. 批量复制链接界面受影响

ZFile

https://github.com/zhaojun1998/zfile

主题演示

https://pan.cdn.vin/

主题代码

/* 背景图 */
body {
background-image: url(https://gitee.com/darki/img/raw/master/1631081013043.webp) !important;
background-size: cover !important;
background-position: center top !important;
background-attachment: fixed !important;
font-family: Arial,Helvetica,sans-serif !important;
}

/* 背景条纹 */
#app {
background-image: url(https://gitee.com/darki/img/raw/master/1631632836519.webp) !important;
}

/* 导航栏 */
.zfile-header {
background: rgba(0, 0, 0, 0.1) !important;
}

/* Logo字体 */
.zfile-header .el-breadcrumb[data-v-42cbe009] {
font-size: 16px !important;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
color: #fff !important;
font-weight: bold !important;
}

/* 文件路径 */
.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
color: #fff !important;
}

.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a:hover {
color: #fff !important;
}

/* 文件路径图标 */
.el-breadcrumb__separator {
color: #fff !important;
}

/* 图片按钮左边字体 */
.el-form-item__label {
color: #fff !important;
}

/* 图片按钮 */
.el-switch__core {
border: 1px solid #fff !important;
background: rgb(0 0 0 / 10%) !important;
}

/* 图片按钮点击后 */
.el-switch.is-checked .el-switch__core {
border: 1px solid #000 !important;
background-color: #000 !important;
}

/* 驱动器 */
.el-input__inner {
background-color: rgb(0 0 0 / 10%) !important;
border: 1px solid #fff !important;
color: #fff !important;
}

/* 驱动器字体 */
.el-select .el-input .el-select__caret {
color: #fff !important;
}

/* 驱动器图标 */
.el-select .el-input.is-focus .el-input__inner {
border-color: #fff !important;
}

/* 驱动器下拉框 */
.el-select-dropdown {
background-color: rgba(255, 255, 255, 0.8) !important;
}

/* 公告 */
.zfile-header-announcement {
background-color: rgba(255, 255, 255, 0.3) !important;
color: #000 !important;
}

/* 列表 */
.el-row {
margin: 12px !important;
border-radius: 0.3rem !important;
}

#ListTable {
height: 88vh !important;
border-radius: 0.3rem !important;
}

.el-table, .el-table__expanded-cell {
background-color: rgba(255, 255, 255, 0.3) !important;
}

.el-table th, .el-table tr {
background-color: rgba(255, 255, 255, 0) !important;
}

/* 排序字体 */
.el-table thead {
color: #fff !important;
}

/* 排序图标 */
.el-table .sort-caret.descending {
border-top-color: #fff !important;
}

.el-table .descending .sort-caret.descending {
border-top-color: #000 !important;
}

.el-table .sort-caret.ascending {
border-bottom-color: #fff !important;
}

.el-table .ascending .sort-caret.ascending {
border-bottom-color: #000 !important;
}

/* 列表字体 */
.el-table {
color: #000 !important;
margin: 0 !important;
padding-right: 0 !important;
}

/* 下载复制按钮 */
.operator-btn {
color: #000 !important;
}

/* 每行鼠标悬浮 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: rgb(0 0 0 / 10%) !important;
}

/* 右键 */
.v-contextmenu {
background-color: rgba(255, 255, 255, 0.8) !important;
}

.v-contextmenu .v-contextmenu-item {
color: #000 !important;
}

/* Readme */
.zfile-readme-center {
width: 74% !important;
}

.el-card {
margin-bottom: 14px !important;
border: 0 !important;
background-color: rgba(255, 255, 255, 0.6) !important;
}

/* 卡片 */
.el-dialog, .el-pager li {
border-radius: 0.5rem !important;
background: rgba(0, 0, 0, 0.6) !important;
}

/* 卡片标题 */
.el-dialog__title {
color: #fff !important;
}

/* x */
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
}

/* 卡片字体 */
.zfile-word-aux {
color: #fff !important;
}

/* 卡片复制链接输入框 */
.el-input-group__append, .el-input-group__prepend {
background-color: rgb(0 0 0 / 10%) !important;
color: #fff !important;
border: 1px solid #fff !important;
}

/* 返回顶部 */
.el-backtop {
background-color: #fff0 !important;
}

.el-backtop:hover {
background-color: #fff0 !important;
}

.back-to-ceiling[data-v-7390ee08] {
border-radius: 999px !important;
line-height: 40px !important;
background: rgb(0 0 0 / 50%) !important;
}

.back-to-ceiling .Icon[data-v-7390ee08] {
fill: #fff !important;
}

.back-to-ceiling[data-v-1f5c4a64] {
border-radius: 999px !important;
line-height: 40px !important;
background: rgb(0 0 0 / 50%) !important;
}

.back-to-ceiling .Icon[data-v-1f5c4a64] {
fill: #fff !important;
}