/* ============================================================ 星梦云QQ等级加速 · 登录/注册/找回 三页表面美化层 beautify-auth.css v1.0.1 (v1.3 配套) 仅覆盖视觉，不改变任何表单字段、提交逻辑与动态 key/reg_token， 与 beautify.css（登录后内部页）配套使用、互不冲突。 引入方式：在 /user/login.php、/user/reg.php、/user/retrieve.php 的 内、tailwind.js 之后加一行： 三页 body 均为深紫渐变（bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600），本文件将其替换为与用户中心一致的浅色品牌风。 ============================================================ */ /* ---------- 1. 页面背景：深紫渐变 → 浅色品牌风 + 柔和光晕 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) { background: radial-gradient(1100px 460px at 88% -12%, rgba(99, 102, 241, 0.16), transparent 60%), radial-gradient(820px 400px at -8% 12%, rgba(139, 92, 246, 0.14), transparent 55%), radial-gradient(700px 360px at 50% 108%, rgba(34, 211, 238, 0.10), transparent 60%), linear-gradient(170deg, #f6f8ff 0%, #eef1fb 45%, #f7f3ff 100%) !important; background-attachment: fixed; } /* ---------- 2. Logo 区：半透明白盒 → 品牌渐变描边白卡 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) div.inline-flex.items-center.justify-center[class*="bg-white/20"] { background: linear-gradient(135deg, #ffffff, #eef1fb) !important; border: 1px solid rgba(99, 102, 241, 0.18); box-shadow: 0 10px 26px -10px rgba(99, 102, 241, 0.45); } :is(body.bg-gradient-to-br, .auth-demo) div.inline-flex.items-center.justify-center[class*="bg-white/20"] i { color: #6366f1 !important; filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.45)); } /* ---------- 3. 标题与副标题：白字 → 深蓝紫字 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) h1.text-lg, :is(body.bg-gradient-to-br, .auth-demo) h1.text-xl { color: #1e2a4a !important; letter-spacing: 0.01em; } :is(body.bg-gradient-to-br, .auth-demo) p.text-purple-200 { color: #8a93b0 !important; } /* ---------- 4. 主卡片：更强圆润 + 品牌淡边 + 柔和投影 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) div.bg-white.rounded-xl { border: 1px solid rgba(99, 102, 241, 0.16) !important; box-shadow: 0 22px 48px -20px rgba(30, 41, 99, 0.28), 0 6px 18px -8px rgba(99, 102, 241, 0.16) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } :is(body.bg-gradient-to-br, .auth-demo) div.bg-white.rounded-xl:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, 0.30) !important; box-shadow: 0 26px 56px -20px rgba(30, 41, 99, 0.32), 0 10px 26px -10px rgba(99, 102, 241, 0.24) !important; } /* 卡片标题（找回密码页 h3） */ :is(body.bg-gradient-to-br, .auth-demo) h3[class*="text-gray-800"] i { color: #6366f1 !important; text-shadow: 0 1px 6px rgba(99, 102, 241, 0.3); } /* ---------- 5. 表单控件：聚焦发光 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) input[type="text"], :is(body.bg-gradient-to-br, .auth-demo) input[type="password"], :is(body.bg-gradient-to-br, .auth-demo) input:not([type]) { border-color: #e0e6f2 !important; background-color: #fbfcff !important; border-radius: 12px !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } :is(body.bg-gradient-to-br, .auth-demo) input:focus { border-color: #818cf8 !important; background-color: #ffffff !important; box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.14) !important; outline: none !important; } :is(body.bg-gradient-to-br, .auth-demo) input::placeholder { color: #a5b0c5 !important; } /* 字段左侧图标（保持浅灰，聚焦时随输入框提亮） */ :is(body.bg-gradient-to-br, .auth-demo) span.absolute.left-3 i, :is(body.bg-gradient-to-br, .auth-demo) span.absolute.left-3\.5 i { color: #9aa7c0 !important; } /* ---------- 6. 主按钮：统一投影 + hover 抬升 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) button[type="submit"] { border-radius: 12px !important; box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.5) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } :is(body.bg-gradient-to-br, .auth-demo) button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.04) saturate(1.05); box-shadow: 0 12px 26px -10px rgba(79, 70, 229, 0.6) !important; } /* 注册页「发送邮箱验证码」小按钮 */ :is(body.bg-gradient-to-br, .auth-demo) button[onclick*="send_email"] { box-shadow: 0 6px 14px -6px rgba(99, 102, 241, 0.5) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } :is(body.bg-gradient-to-br, .auth-demo) button[onclick*="send_email"]:hover { transform: translateY(-1px); filter: brightness(1.06); } /* ---------- 7. 快捷登录分隔线与 QQ 按钮 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) span.px-2.bg-white.text-gray-400 { color: #8a93b0 !important; font-weight: 500; } :is(body.bg-gradient-to-br, .auth-demo) a[href*="connect.php"] { box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.55); transition: transform .2s ease, box-shadow .2s ease; } :is(body.bg-gradient-to-br, .auth-demo) a[href*="connect.php"]:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.65); } /* ---------- 8. 版权文字与底部链接适配浅色背景 ---------- */ :is(body.bg-gradient-to-br, .auth-demo) div.text-center[class*="text-white/70"], :is(body.bg-gradient-to-br, .auth-demo) div.text-center.text-white\/70 { color: #8a93b0 !important; } :is(body.bg-gradient-to-br, .auth-demo) a[href*="login.php"], :is(body.bg-gradient-to-br, .auth-demo) a[href*="reg.php"], :is(body.bg-gradient-to-br, .auth-demo) a[href*="retrieve.php"] { transition: color .2s ease; } /* ---------- 9. Toast / Loading ---------- */ #toastWrap > div { border-radius: 12px; box-shadow: 0 10px 28px -8px rgba(30, 41, 99, 0.35); } #loadingOverlay { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ---------- 10. 动效降级 ---------- */ @media (prefers-reduced-motion: reduce) { :is(body.bg-gradient-to-br, .auth-demo) div.bg-white.rounded-xl, :is(body.bg-gradient-to-br, .auth-demo) button[type="submit"] { transform: none !important; transition: none !important; } }