@charset "utf-8"; /*! * theme-login.css — 登录页(Views/Login/Login.cshtml, Layout=null)现代化 * 只加载于登录页自身;令牌来自 tokens.css(Login.cshtml 需先加载 tokens.css)。 * 原则:不改动 Login.cshtml 标记;保留背景图与控件结构,仅重塑卡片/输入/按钮观感。 */ /* ============================================ 背景:保留 CDN 照片,叠加渐变提升卡片对比度,纯色兜底 (.login_bg 即 ,style.css 已设 position:relative) ============================================ */ .login_bg { background-color: #17293b; } .login_bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(23, 41, 59, .45), rgba(23, 41, 59, .25)); z-index: 0; } /* ============================================ 登录卡片:磨砂玻璃 + 圆角 + 大阴影(transform 居中,替代负 margin) ============================================ */ .login_con { width: 420px; height: auto; min-height: 420px; left: 50%; top: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); z-index: 1; } .login_con_det { width: auto; height: auto; margin: 0; padding: 40px 36px 32px; } .login_con_det h2 { height: auto; line-height: 1.4; font-size: 20px; font-weight: 600; text-align: center; color: var(--text-color); margin-bottom: 24px; } /* ============================================ 输入行:令牌边框 + 圆角 + 聚焦光环(图标沿用原 background 图) ============================================ */ .login_bar { width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--bg-white); overflow: hidden; /* 建立 BFC 包住内部 floatL 图标/输入框,防止浮动泄漏挤压后面的 .rem_account */ transition: border-color .2s ease, box-shadow .2s ease; } .login_bar:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(57, 174, 245, .15); } .login_bar input { width: calc(100% - 51px); box-sizing: border-box; color: var(--text-color); } /* 短信验证码行内的输入框(原 339px)随卡片自适应 */ .login_bar_iden input { width: calc(100% - 90px); } /* 行内"获取验证码"按钮 → 文字按钮 */ .getIdenCode { height: 52px; line-height: 52px; background: transparent; color: var(--primary-color); border-left: 1px solid var(--border-color); transition: color .2s ease, background-color .2s ease; } .getIdenCode:hover { color: var(--primary-hover); background-color: var(--primary-light); } /* ============================================ 记住账号:复选框主色 ============================================ */ .rem_account input { accent-color: var(--primary-color); } .rem_account em { color: var(--text-muted); } /* ============================================ 登录按钮:用 CSS 主按钮替换图片精灵(按钮无文本节点,::after 补文字) ============================================ */ button.login_but { width: 100%; height: 42px; float: none; background: var(--primary-color); background-image: none; border: none; border-radius: var(--border-radius-md); cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; } button.login_but::after { content: "登录"; color: #fff; font-size: 15px; letter-spacing: 4px; } button.login_but:hover { background: var(--primary-hover); background-position: 0 0; /* 覆盖旧精灵位移,避免残留 */ box-shadow: var(--shadow-sm); } button.login_but:active { background: var(--primary-active); background-position: 0 0; } /* 登录按钮加载态:点击后显示旋转指示 + "登录中…"并禁用,防重复提交 */ button.login_but.loading { pointer-events: none; opacity: .85; } button.login_but.loading::after { content: "登录中…"; letter-spacing: 2px; } button.login_but.loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; -webkit-animation: loginSpin .7s linear infinite; animation: loginSpin .7s linear infinite; } @-webkit-keyframes loginSpin { to { -webkit-transform: rotate(360deg); } } @keyframes loginSpin { to { transform: rotate(360deg); } } /* ============================================ 错误提示:柔化为危险色(原为内联 #ff0000,需 !important 覆盖) ============================================ */ #spErrMessage { color: var(--danger-color) !important; border-left: none !important; }