/* ============================================ Siliang Cloud Drive — 自定义主题 v2 FileBrowser branding override ============================================ */ /* ============================ 登录页背景 — Cloud01.jpg ============================ */ #login { background: url('/static/img/login-bg.jpg') center center / contain no-repeat !important; width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; z-index: 0; background-color: #080c1c !important; } /* 半透明遮罩 — 让图片不喧宾夺主 */ #login::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(8, 12, 28, 0.86) 0%, rgba(12, 20, 42, 0.86) 50%, rgba(8, 12, 28, 0.86) 100% ); pointer-events: none; z-index: 0; } /* 登录表单 — 毛玻璃卡片 */ #login form { background: rgba(12, 18, 38, 0.72) !important; backdrop-filter: blur(28px) saturate(1.5) !important; -webkit-backdrop-filter: blur(28px) saturate(1.5) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 2.8em 2.2em 2.2em !important; max-width: 24em !important; width: 90% !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; z-index: 2 !important; } /* 替换磁盘图标 — 科技感云+闪电 */ #login img { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2360a5fa'/%3E%3Cstop offset='50%25' stop-color='%23818cf8'/%3E%3Cstop offset='100%25' stop-color='%23c084fc'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='.5' y1='0' x2='.5' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fde68a'/%3E%3Cstop offset='100%25' stop-color='%23fbbf24'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='40' cy='40' r='36' fill='rgba(59,130,246,0.08)' stroke='rgba(96,165,250,0.2)' stroke-width='1'/%3E%3Cpath d='M54 36a12 12 0 0 0-11-12 16 16 0 0 0-29 9 11 11 0 0 0 2 21h36a12 12 0 0 0 2-18z' fill='url(%23a)' opacity='.9' filter='url(%23glow)'/%3E%3Cpath d='M40 28l-6 12h5l-3 12 10-14h-5z' fill='url(%23b)' filter='url(%23glow)'/%3E%3C/svg%3E") !important; width: 5.5em !important; height: 5.5em !important; margin-bottom: 0.2em !important; filter: none; } /* 登录标题 */ #login h1 { color: rgba(255, 255, 255, 0.95) !important; font-size: 1.5em !important; font-weight: 600 !important; letter-spacing: 0.3px !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } /* 输入框 */ #login input.input { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 12px !important; color: rgba(255, 255, 255, 0.9) !important; padding: 0.9em 1.1em !important; font-size: 0.95em !important; transition: all 0.3s ease !important; } #login input.input:focus { border-color: rgba(96, 165, 250, 0.5) !important; background: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12) !important; outline: none !important; } #login input.input::placeholder { color: rgba(255, 255, 255, 0.35) !important; } /* 登录按钮 — 渐变科技风（注意：FB 用 input 不是 button） */ #login input[type='submit'], #login .button.button--block { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%) !important; border: none !important; border-radius: 12px !important; color: #fff !important; padding: 0.9em 1.5em !important; font-size: 1em !important; font-weight: 600 !important; letter-spacing: 1px !important; cursor: pointer !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 4px 18px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; } #login input[type='submit']:hover, #login .button.button--block:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%) !important; } #login input[type='submit']:active, #login .button.button--block:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important; } /* 登录页文字链接 */ #login p { color: rgba(96, 165, 250, 0.75) !important; } /* 错误提示 */ #login .wrong { background: rgba(239, 68, 68, 0.85) !important; backdrop-filter: blur(8px) !important; border-radius: 10px !important; } /* ============================ 主文件浏览页 — 覆盖 CSS 变量为深色主题 ============================ */ :root { --background: #0a0e1a !important; --surfacePrimary: #0d1220 !important; --surfaceSecondary: #151c30 !important; --textPrimary: rgba(255, 255, 255, 0.87) !important; --textSecondary: rgba(255, 255, 255, 0.6) !important; --borderPrimary: rgba(255, 255, 255, 0.06) !important; --borderSecondary: rgba(255, 255, 255, 0.12) !important; --divider: rgba(255, 255, 255, 0.08) !important; --dividerPrimary: rgba(255, 255, 255, 0.15) !important; --dividerSecondary: rgba(255, 255, 255, 0.4) !important; --hover: rgba(255, 255, 255, 0.06) !important; --action: rgba(255, 255, 255, 0.8) !important; --iconPrimary: #60a5fa !important; --iconSecondary: #fff !important; --iconTertiary: rgba(255, 255, 255, 0.5) !important; --moon-grey: #2a3248 !important; --item-selected: rgba(59, 130, 246, 0.15) !important; --input-red: #5c1f1d !important; --input-green: #1a4a2e !important; } html body { background: #0a0e1a !important; color: rgba(255, 255, 255, 0.87) !important; min-height: 100vh; } #login { z-index: 10; } /* ============================ 左上角 Logo 替换 ============================ */ header img, .HeaderBar img, img[src*="logo.svg"] { content: url('/static/img/logo.svg') !important; width: 2.8em !important; height: 2.8em !important; } /* ============================ 隐藏 "File Browser 2.63.2" 版本文字 ============================ */ .credits { display: none !important; } /* ---- 加载动画 ---- */ #loading { background: linear-gradient(135deg, #080c1c, #0f1932) !important; } #loading .spinner > div { background-color: #60a5fa !important; }