2 lines
5.7 KiB
CSS
2 lines
5.7 KiB
CSS
.login-page{position:relative;min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-y:auto;background:radial-gradient(circle at top left,rgba(139,92,246,.12),transparent 34%),radial-gradient(circle at bottom right,rgba(59,130,246,.08),transparent 30%),linear-gradient(180deg,#f8fafc,#eef2ff 52%,#f8fafc);background-size:cover;background-position:center;color:#334155}.login-page-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 18%,rgba(196,181,253,.5),transparent 24%),radial-gradient(circle at 85% 80%,rgba(191,219,254,.42),transparent 22%),linear-gradient(180deg,#ffffff29,#fff6)}.login-page-grid{position:relative;z-index:1;display:grid;min-height:100vh;min-height:100dvh;grid-template-columns:minmax(0,980px);justify-content:center;align-items:center;padding:max(28px,env(safe-area-inset-top)) clamp(24px,4vw,56px) max(28px,env(safe-area-inset-bottom))}.login-panel{display:flex;align-items:center;justify-content:center}.login-panel-card{width:100%;max-width:980px;padding:18px;border-radius:32px;background:#ffffffc7;border:1px solid rgba(226,232,240,.92);box-shadow:0 24px 60px #0f172a14;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.login-panel-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:18px;align-items:stretch}.login-left{display:flex;min-height:100%;flex-direction:column;justify-content:center;padding:36px;border-radius:28px;background:radial-gradient(circle at top left,rgba(139,92,246,.14),transparent 34%),linear-gradient(135deg,#ffffffeb,#f8fafcdb);border:1px solid rgba(226,232,240,.84)}.login-brand{display:flex;align-items:center;gap:18px}.brand-logo-wrap{display:flex;height:68px;width:68px;align-items:center;justify-content:center;overflow:hidden;border-radius:22px;background:linear-gradient(135deg,#ede9fe,#ddd6fe);border:1px solid rgba(139,92,246,.12);box-shadow:0 18px 40px #8b5cf61f}.brand-logo-img{height:100%;width:100%;object-fit:cover}.brand-copy{min-width:0}.brand-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#8b5cf6}.brand-name{display:block;margin:0;font-size:clamp(1.7rem,2.4vw,2.45rem);font-weight:700;line-height:1.08;color:#0f172a}.login-right{display:flex;flex-direction:column;justify-content:center;padding:34px 32px;border-radius:28px;background:#fffffff0;border:1px solid rgba(226,232,240,.82)}.login-container{width:100%}.login-header{margin-bottom:28px;text-align:left}.login-panel-eyebrow{margin:0 0 10px;color:#7c3aed;font-size:clamp(1.4rem,1.5vw,1.75rem);font-weight:700;line-height:1.2;letter-spacing:.04em}.login-header .ant-typography{margin:0;color:#475569;line-height:1.7}.login-form .ant-form-item{margin-bottom:18px}.login-form .ant-input-affix-wrapper-lg,.login-form .ant-input-lg{min-height:54px;border:1px solid rgba(148,163,184,.45);border-radius:16px;background:#fffffff5;font-size:1rem;color:#0f172a;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.login-form .ant-input-affix-wrapper-lg{padding:0 16px}.login-form .ant-input-prefix{margin-right:12px;color:#94a3b8}.login-form .ant-input-affix-wrapper-focused,.login-form .ant-input-affix-wrapper:focus-within,.login-form .ant-input-lg:focus,.login-form .ant-input-lg:focus-within{border-color:#7c3aed7a;box-shadow:0 0 0 4px #8b5cf61f;transform:translateY(-1px)}.captcha-wrapper{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:12px}.captcha-wrapper .ant-input-affix-wrapper{width:100%}.captcha-image-btn{display:inline-flex;min-height:52px;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(148,163,184,.45);border-radius:16px;background:#fff;padding:0;width:132px;box-shadow:none}.captcha-image-btn:hover,.captcha-image-btn:focus{border-color:#7c3aed66!important;background:#fff!important}.captcha-image-btn img{width:100%;height:100%;object-fit:cover}.login-extra{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;color:#475569;font-size:.92rem}.login-extra .ant-checkbox-wrapper{color:#475569}.login-submit-btn{min-height:54px;border:0;border-radius:18px;background:linear-gradient(135deg,#7c3aed,#4f46e5)!important;box-shadow:0 16px 32px #7c3aed33;font-size:1rem;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}.login-submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 20px 38px #7c3aed3d}.login-submit-btn:disabled,.captcha-image-btn:disabled{opacity:.7;cursor:not-allowed}@media (max-width: 1024px){.login-page-grid{grid-template-columns:minmax(0,1fr);gap:0;justify-items:center;padding:max(20px,env(safe-area-inset-top)) 20px max(24px,calc(20px + env(safe-area-inset-bottom)))}.login-panel-card{margin:0 auto;max-width:460px;padding:0;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.login-panel-layout{grid-template-columns:minmax(0,1fr);gap:0}.login-left{display:none}.login-right{padding:30px}}@media (max-width: 640px){.login-page-grid{padding:max(16px,env(safe-area-inset-top)) 16px max(20px,calc(16px + env(safe-area-inset-bottom)))}.login-panel-card{max-width:none;padding:0}.login-right{padding:20px 16px;border-radius:24px}.login-header{margin-bottom:22px;text-align:center}.login-panel-eyebrow{font-size:1.25rem;line-height:1.6}.login-form .ant-form-item{margin-bottom:16px}.login-form .ant-input-affix-wrapper-lg,.login-form .ant-input-lg{min-height:50px;border-radius:14px;font-size:16px}.captcha-wrapper{grid-template-columns:1fr}.captcha-image-btn{width:100%;min-height:50px;border-radius:14px}.login-extra{flex-direction:column;align-items:flex-start;gap:12px}.login-submit-btn{min-height:52px;border-radius:16px}}@media (max-width: 400px){.login-page-grid{padding-left:12px;padding-right:12px}.login-right{padding-left:14px;padding-right:14px}}
|