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

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

parent b866598d
...@@ -3667,9 +3667,9 @@ body { ...@@ -3667,9 +3667,9 @@ body {
} }
body .login-page { body .login-page {
--rc-login-field-filled-background: rgb(158 27 27 / 6%); --rc-login-field-filled-background: #fbf1f1;
--rc-login-field-filled-background-hover: rgb(158 27 27 / 8%); --rc-login-field-filled-background-hover: #faeaea;
--rc-login-field-autofill-background: rgb(158 27 27 / 7%); --rc-login-field-autofill-background: #fbf1f1;
--rc-login-field-border-hover: rgb(158 27 27 / 24%); --rc-login-field-border-hover: rgb(158 27 27 / 24%);
--rc-login-field-focus-ring: rgb(158 27 27 / 16%); --rc-login-field-focus-ring: rgb(158 27 27 / 16%);
} }
...@@ -3710,6 +3710,21 @@ body ...@@ -3710,6 +3710,21 @@ body
background-color: var(--rc-login-field-filled-background) !important; 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 body
.login-form .login-form
.login-field[data-has-value='true'] .login-field[data-has-value='true']
...@@ -3789,6 +3804,29 @@ body ...@@ -3789,6 +3804,29 @@ body
0 0 0 2px var(--rc-login-field-focus-ring) !important; 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 body
.login-form .login-form
:is(.input, [data-slot='input-wrapper'], [data-slot='control']):has( :is(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
......
...@@ -104,6 +104,8 @@ export default function LoginPage() { ...@@ -104,6 +104,8 @@ export default function LoginPage() {
<Input <Input
autoComplete="username" autoComplete="username"
autoFocus autoFocus
className="login-input"
data-filled={identity ? 'true' : undefined}
placeholder="请输入账号" placeholder="请输入账号"
variant="secondary" variant="secondary"
/> />
...@@ -122,6 +124,8 @@ export default function LoginPage() { ...@@ -122,6 +124,8 @@ export default function LoginPage() {
<Label>密码</Label> <Label>密码</Label>
<Input <Input
autoComplete="current-password" autoComplete="current-password"
className="login-input"
data-filled={password ? 'true' : undefined}
placeholder="请输入密码" placeholder="请输入密码"
variant="secondary" variant="secondary"
/> />
...@@ -138,7 +142,12 @@ export default function LoginPage() { ...@@ -138,7 +142,12 @@ export default function LoginPage() {
value={captchaCode} value={captchaCode}
onChange={setCaptchaCode} onChange={setCaptchaCode}
> >
<Input placeholder="请输入验证码" variant="secondary" /> <Input
className="login-input"
data-filled={captchaCode ? 'true' : undefined}
placeholder="请输入验证码"
variant="secondary"
/>
</TextField> </TextField>
<Button <Button
type="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