:root {
|
--page-bg: #424a59;
|
--brand: #5a80e8;
|
--brand-dark: #5278df;
|
--panel: #ffffff;
|
--field-border: #d9dee8;
|
--field-text: #2f3848;
|
--muted: #b8bec8;
|
--danger: #ed2228;
|
--danger-hover: #d9181e;
|
--focus: #3d7df3;
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
body {
|
margin: 0;
|
min-width: 320px;
|
min-height: 100vh;
|
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
color: var(--field-text);
|
background: var(--page-bg);
|
}
|
|
button,
|
input {
|
font: inherit;
|
}
|
|
.login-page {
|
min-height: 100vh;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 48px 24px;
|
}
|
|
.login-card {
|
width: min(638px, 100%);
|
min-height: 494px;
|
display: grid;
|
grid-template-columns: 284px 1fr;
|
overflow: hidden;
|
background: var(--panel);
|
border-radius: 8px;
|
box-shadow: 0 7px 20px rgba(14, 20, 32, 0.3);
|
}
|
|
.brand-panel {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 86px 26px 48px;
|
background: linear-gradient(180deg, var(--brand), var(--brand-dark));
|
color: #fff;
|
}
|
|
.brand-avatar {
|
width: 78px;
|
height: 78px;
|
border-radius: 50%;
|
object-fit: cover;
|
box-shadow: 0 10px 20px rgba(20, 36, 84, 0.18);
|
}
|
|
.brand-panel h1 {
|
margin: 22px 0 48px;
|
text-align: center;
|
font-size: 27px;
|
line-height: 1.56;
|
font-weight: 700;
|
}
|
|
.device-art {
|
width: 236px;
|
max-width: 100%;
|
height: auto;
|
margin-top: auto;
|
}
|
|
.form-panel {
|
display: flex;
|
align-items: center;
|
padding: 70px 20px 62px;
|
background: #fff;
|
}
|
|
.login-form {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 18px;
|
}
|
|
.input-row {
|
height: 35px;
|
display: flex;
|
align-items: center;
|
border: 1px solid var(--field-border);
|
background: #fff;
|
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
}
|
|
.input-row:focus-within {
|
border-color: var(--focus);
|
box-shadow: 0 0 0 2px rgba(61, 125, 243, 0.08);
|
}
|
|
.field-icon {
|
width: 36px;
|
height: 100%;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
color: #c5cad3;
|
flex: 0 0 36px;
|
}
|
|
.field-icon svg {
|
width: 16px;
|
height: 16px;
|
fill: none;
|
stroke: currentColor;
|
stroke-width: 2;
|
stroke-linecap: round;
|
stroke-linejoin: round;
|
}
|
|
.field-icon svg rect,
|
.field-icon svg circle {
|
fill: none;
|
}
|
|
.input-row input {
|
min-width: 0;
|
width: 100%;
|
height: 100%;
|
border: 0;
|
outline: 0;
|
color: var(--field-text);
|
background: transparent;
|
font-size: 13px;
|
}
|
|
.input-row input::placeholder {
|
color: var(--muted);
|
}
|
|
.captcha-line {
|
display: grid;
|
grid-template-columns: 1fr 82px;
|
gap: 16px;
|
align-items: center;
|
}
|
|
.captcha-input {
|
min-width: 0;
|
}
|
|
.captcha-box {
|
height: 35px;
|
padding: 0 6px;
|
border: 0;
|
background: transparent;
|
color: #111827;
|
font-size: 12px;
|
font-weight: 700;
|
cursor: pointer;
|
white-space: nowrap;
|
}
|
|
.captcha-box img {
|
display: block;
|
width: 82px;
|
height: 35px;
|
object-fit: cover;
|
}
|
|
.captcha-box:focus-visible {
|
outline: 2px solid var(--focus);
|
outline-offset: 2px;
|
}
|
|
.login-button {
|
height: 41px;
|
margin-top: 30px;
|
border: 0;
|
border-radius: 4px;
|
color: #fff;
|
background: var(--danger);
|
font-size: 14px;
|
cursor: pointer;
|
transition: background-color 0.16s ease, transform 0.16s ease;
|
}
|
|
.login-button:hover {
|
background: var(--danger-hover);
|
}
|
|
.login-button:active {
|
transform: translateY(1px);
|
}
|
|
.form-message {
|
min-height: 18px;
|
margin: 0;
|
color: #d32f2f;
|
font-size: 12px;
|
line-height: 18px;
|
}
|
|
.form-message.success {
|
color: #1f8a4c;
|
}
|
|
.login-card.no-server-ip .brand-panel {
|
padding-top: 86px;
|
}
|
|
.login-card.no-server-ip .form-panel {
|
padding-top: 92px;
|
}
|
|
.login-card.no-server-ip .login-button {
|
margin-top: 32px;
|
}
|
|
[hidden] {
|
display: none !important;
|
}
|
|
@media (max-width: 760px) {
|
.login-page {
|
padding: 24px 16px;
|
}
|
|
.login-card {
|
grid-template-columns: 1fr;
|
min-height: 0;
|
}
|
|
.brand-panel {
|
padding: 34px 24px 28px;
|
}
|
|
.brand-panel h1 {
|
margin: 18px 0 24px;
|
font-size: 24px;
|
}
|
|
.device-art {
|
width: 210px;
|
}
|
|
.form-panel,
|
.login-card.no-server-ip .form-panel {
|
padding: 30px 22px 26px;
|
}
|
|
.captcha-line {
|
grid-template-columns: 1fr;
|
gap: 10px;
|
}
|
|
.captcha-box {
|
width: 120px;
|
text-align: left;
|
}
|
}
|
