Commit fc2df85c authored by Andy-bubu's avatar Andy-bubu

fix: 统一登录输入框选中与填充色

parent b866598d
......@@ -3667,9 +3667,9 @@ body {
}
body .login-page {
--rc-login-field-filled-background: rgb(158 27 27 / 6%);
--rc-login-field-filled-background-hover: rgb(158 27 27 / 8%);
--rc-login-field-autofill-background: rgb(158 27 27 / 7%);
--rc-login-field-filled-background: #fbf1f1;
--rc-login-field-filled-background-hover: #faeaea;
--rc-login-field-autofill-background: #fbf1f1;
--rc-login-field-border-hover: rgb(158 27 27 / 24%);
--rc-login-field-focus-ring: rgb(158 27 27 / 16%);
}
......@@ -3710,6 +3710,21 @@ body
background-color: var(--rc-login-field-filled-background) !important;
}
body
.login-form
.login-input:is(.input, .input--secondary, [data-slot='input'])[data-filled='true'],
body
.login-form
.login-input:is(.input, .input--secondary, [data-slot='input']):not(:placeholder-shown) {
--input-bg: var(--rc-login-field-filled-background) !important;
--input-bg-hover: var(--rc-login-field-filled-background-hover) !important;
--input-bg-focus: var(--rc-login-field-filled-background) !important;
border-color: transparent !important;
background: var(--rc-login-field-filled-background) !important;
background-color: var(--rc-login-field-filled-background) !important;
box-shadow: inset 0 0 0 1000px var(--rc-login-field-filled-background) !important;
}
body
.login-form
.login-field[data-has-value='true']
......@@ -3789,6 +3804,29 @@ body
0 0 0 2px var(--rc-login-field-focus-ring) !important;
}
body
.login-form
.login-input:is(.input, .input--secondary, [data-slot='input'])[data-filled='true']:focus,
body
.login-form
.login-input:is(.input, .input--secondary, [data-slot='input'])[data-filled='true'][data-focused='true'],
body
.login-form
.login-input:is(.input, .input--secondary, [data-slot='input']):not(:placeholder-shown):focus,
body
.login-form
.login-input:is(.input, .input--secondary, [data-slot='input']):not(:placeholder-shown)[data-focused='true'] {
--input-bg: var(--rc-login-field-filled-background) !important;
--input-bg-hover: var(--rc-login-field-filled-background-hover) !important;
--input-bg-focus: var(--rc-login-field-filled-background) !important;
border-color: var(--rc-field-border-focus) !important;
background: var(--rc-login-field-filled-background) !important;
background-color: var(--rc-login-field-filled-background) !important;
box-shadow:
inset 0 0 0 1000px var(--rc-login-field-filled-background),
0 0 0 2px var(--rc-login-field-focus-ring) !important;
}
body
.login-form
:is(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
......
......@@ -104,6 +104,8 @@ export default function LoginPage() {
<Input
autoComplete="username"
autoFocus
className="login-input"
data-filled={identity ? 'true' : undefined}
placeholder="请输入账号"
variant="secondary"
/>
......@@ -122,6 +124,8 @@ export default function LoginPage() {
<Label>密码</Label>
<Input
autoComplete="current-password"
className="login-input"
data-filled={password ? 'true' : undefined}
placeholder="请输入密码"
variant="secondary"
/>
......@@ -138,7 +142,12 @@ export default function LoginPage() {
value={captchaCode}
onChange={setCaptchaCode}
>
<Input placeholder="请输入验证码" variant="secondary" />
<Input
className="login-input"
data-filled={captchaCode ? 'true' : undefined}
placeholder="请输入验证码"
variant="secondary"
/>
</TextField>
<Button
type="button"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment