style(lovart-home): refine login modal size + darker overlay
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-02-14 01:56:28 +08:00
parent ac6eeb14c7
commit 18e6e49627

View File

@ -1235,27 +1235,27 @@ export function LovartHome({
{loginDialogOpen ? (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-[1px]"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-[1px]"
onClick={() => setLoginDialogOpen(false)}
>
<div
className="w-full max-w-[580px] rounded-[28px] bg-white p-8 shadow-2xl sm:p-10"
className="w-full max-w-[460px] rounded-[24px] bg-white p-6 shadow-2xl sm:p-7"
onClick={(event) => event.stopPropagation()}
>
<div className="mb-8 flex items-center justify-between">
<div className="mb-6 flex items-center justify-between">
<div className="flex items-center gap-2">
{siteLogo ? (
<img
src={siteLogo}
alt={siteName}
className="h-8 w-8 rounded-full object-cover"
className="h-7 w-7 rounded-full object-cover"
/>
) : (
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
<Sparkles className="h-4 w-4" />
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-black text-white">
<Sparkles className="h-3.5 w-3.5" />
</div>
)}
<span className="text-[20px] font-semibold leading-none tracking-tight text-black">
<span className="text-[18px] font-semibold leading-none tracking-tight text-black">
{siteName}
</span>
</div>
@ -1264,13 +1264,13 @@ export function LovartHome({
className="rounded-full p-1 text-black/45 hover:bg-black/5 hover:text-black/70"
onClick={() => setLoginDialogOpen(false)}
>
<X className="h-5 w-5" />
<X className="h-4 w-4" />
</button>
</div>
<div className="mb-7 text-center">
<h3 className="text-[22px] font-semibold text-black">欢迎来到 {siteName}</h3>
<p className="mt-2 text-sm text-black/45">登录或注册以继续</p>
<div className="mb-5 text-center">
<h3 className="text-[18px] font-semibold text-black">欢迎来到 {siteName}</h3>
<p className="mt-2 text-[13px] text-black/45">登录或注册以继续</p>
</div>
{hasThirdPartyLoginOptions ? (
@ -1278,7 +1278,7 @@ export function LovartHome({
{canUseGoogleLogin ? (
<button
type="button"
className="flex h-14 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[18px] font-medium text-black hover:bg-black/[0.03]"
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[15px] font-medium text-black hover:bg-black/[0.03]"
onClick={handleGoogleLogin}
>
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
@ -1293,7 +1293,7 @@ export function LovartHome({
{canUseDingTalkLogin ? (
<button
type="button"
className="flex h-14 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[18px] font-medium text-black hover:bg-black/[0.03]"
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[15px] font-medium text-black hover:bg-black/[0.03]"
onClick={handleDingTalkLogin}
>
使用钉钉
@ -1315,18 +1315,18 @@ export function LovartHome({
onChange={(event) => setLoginEmail(event.target.value)}
placeholder="电子邮箱"
type="email"
className="h-14 rounded-xl border-black/20 px-4 text-base"
className="h-12 rounded-xl border-black/20 px-3.5 text-[14px]"
/>
<Input
value={loginPassword}
onChange={(event) => setLoginPassword(event.target.value)}
placeholder="密码"
type="password"
className="h-14 rounded-xl border-black/20 px-4 text-base"
className="h-12 rounded-xl border-black/20 px-3.5 text-[14px]"
/>
<Button
type="submit"
className="mt-1 h-14 w-full rounded-xl bg-black text-[17px] text-white hover:bg-black/90"
className="mt-1 h-12 w-full rounded-xl bg-black text-[15px] text-white hover:bg-black/90"
disabled={isLoggingIn}
>
{isLoggingIn ? (
@ -1340,7 +1340,7 @@ export function LovartHome({
</Button>
</form>
<p className="mt-5 text-center text-xs text-black/40">
<p className="mt-4 text-center text-xs text-black/40">
继续即表示您同意使用条款和隐私政策
</p>
</div>