Alist Web 界面样式优化文档

概述

本 CSS 样式文件用于美化 Alist 或其他基于 hope 组件库的 Web 应用界面，主要实现以下功能：

• 全屏背景图片（桌面端/移动端适配）
• 半透明毛玻璃效果（backdrop-filter blur）
• 响应式布局优化
• 组件背景透明度调整

文件结构

├── 桌面端样式
│ ├── body 背景图设置
│ ├── hope 组件透明度与模糊效果
│ └── 动画定义 (gradientBG)
└── 移动端适配 (@media max-width: 768px)
├── 背景图切换
├── 模糊效果兼容性前缀
└── 圆角与对比度优化

移动端适配 (≤768px)

@media (max-width: 768px) {
    body {
        background-image: url('...alist_mobile-scaled.jpg');
        background-attachment: scroll;
        background-position: center top;
    }
    
    .hope-c-PJLV-ijgzmFG-css,
    ... {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);  /* Safari 兼容 */
    }
    
    .hope-c-PJLV-igScBhH-css {
        background-color: rgba(255, 255, 255, 0.85) !important;
    }
    
    .hope-c-PJLV-idaeksS-css {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 12px;
    }
}

使用方法

1. 登录 Alist 管理面板
2. 进入 设置 → 全局 → 自定义头部
3. 将 CSS 代码粘贴到文本框中
4. 保存并重启 Alist（部分版本无需重启）

版本记录