上传完整的WebUI前端仓库
This commit is contained in:
159
dashboard/src/styles/uppy-custom.css
Normal file
159
dashboard/src/styles/uppy-custom.css
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* Uppy Dashboard 自定义样式
|
||||
* 适配项目设计系统
|
||||
*/
|
||||
|
||||
/* 基础容器样式 */
|
||||
.uppy-Dashboard-inner {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-innerWrap {
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 拖放区域样式 */
|
||||
.uppy-Dashboard-AddFiles {
|
||||
border: 2px dashed hsl(var(--border)) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
background: hsl(var(--muted) / 0.3) !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles:hover {
|
||||
border-color: hsl(var(--primary)) !important;
|
||||
background: hsl(var(--muted) / 0.5) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles-title {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles-info {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.uppy-Dashboard-browse {
|
||||
color: hsl(var(--primary)) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-browse:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* 文件列表样式 */
|
||||
.uppy-Dashboard-files {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item {
|
||||
border-bottom-color: hsl(var(--border)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item-name {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item-status {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.uppy-StatusBar {
|
||||
background: hsl(var(--muted)) !important;
|
||||
border-top: 1px solid hsl(var(--border)) !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-progress {
|
||||
background: hsl(var(--primary)) !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-content {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-actionBtn--upload {
|
||||
background: hsl(var(--primary)) !important;
|
||||
color: hsl(var(--primary-foreground)) !important;
|
||||
border-radius: 0.375rem !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-actionBtn--upload:hover {
|
||||
background: hsl(var(--primary) / 0.9) !important;
|
||||
}
|
||||
|
||||
/* Note 提示文字样式 */
|
||||
.uppy-Dashboard-note {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* 暗色主题适配 */
|
||||
[data-uppy-theme="dark"] .uppy-Dashboard-AddFiles,
|
||||
.dark .uppy-Dashboard-AddFiles {
|
||||
background: hsl(var(--muted) / 0.2) !important;
|
||||
}
|
||||
|
||||
[data-uppy-theme="dark"] .uppy-Dashboard-AddFiles-title,
|
||||
.dark .uppy-Dashboard-AddFiles-title {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
[data-uppy-theme="dark"] .uppy-StatusBar,
|
||||
.dark .uppy-StatusBar {
|
||||
background: hsl(var(--muted) / 0.5) !important;
|
||||
}
|
||||
|
||||
/* 移除 Uppy 自带的边框和阴影 */
|
||||
.uppy-Dashboard {
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
/* 文件预览图片样式 */
|
||||
.uppy-Dashboard-Item-preview {
|
||||
border-radius: 0.375rem !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 删除按钮样式 */
|
||||
.uppy-Dashboard-Item-action--remove {
|
||||
color: hsl(var(--destructive)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item-action--remove:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 成功/错误状态 */
|
||||
.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress {
|
||||
color: hsl(var(--success, 142 76% 36%)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progress {
|
||||
color: hsl(var(--destructive)) !important;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.uppy-Dashboard-files::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-files::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-files::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--muted-foreground) / 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-files::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground) / 0.5);
|
||||
}
|
||||
Reference in New Issue
Block a user