Skip to content

A
audit_material_manage
Commit ff5c9f77 authored by Andy-bubu's avatar Andy-bubu
Browse files
Options

fix: 调整登录输入框样式覆盖顺序

parent b578e10e
Show whitespace changes
Inline Side-by-side
Showing with 131 additions and 86 deletions
src/design-system/xinyuan-portable.css
View file @ ff5c9f77
......@@ -3666,6 +3666,137 @@ 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-border-hover: rgb(158 27 27 / 24%);
--rc-login-field-focus-ring: rgb(158 27 27 / 16%);
}
body
.login-form
.login-field[data-has-value='true']
:is(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
) {
--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;
background: var(--rc-login-field-filled-background) !important;
background-color: var(--rc-login-field-filled-background) !important;
}
body
.login-form
.login-field[data-has-value='true']
:is(.input input, [data-slot='input-wrapper'] input, [data-slot='control'] input) {
background: transparent !important;
background-color: transparent !important;
}
body
.login-form
.login-field[data-has-value='true']
:is(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
):hover,
body
.login-form
.login-field[data-has-value='true']
:is(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
)[data-hovered='true'] {
border-color: var(--rc-login-field-border-hover) !important;
background: var(--rc-login-field-filled-background-hover) !important;
background-color: var(--rc-login-field-filled-background-hover) !important;
}
body
.login-form
.login-field[data-has-value='true']
:is(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
):focus,
body
.login-form
.login-field[data-has-value='true']
:is(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
):focus-within,
body
.login-form
.login-field[data-has-value='true']
:is(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
)[data-focused='true'] {
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:
var(--field-shadow, 0 1px 2px rgb(15 23 42 / 4%)),
0 0 0 2px var(--rc-login-field-focus-ring) !important;
}
body
.login-form
:is(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
input:-webkit-autofill
),
body
.login-form
:is(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
input:autofill
) {
--input-bg: var(--rc-login-field-autofill-background) !important;
--input-bg-hover: var(--rc-login-field-autofill-background) !important;
--input-bg-focus: var(--rc-login-field-autofill-background) !important;
background: var(--rc-login-field-autofill-background) !important;
background-color: var(--rc-login-field-autofill-background) !important;
}
body .login-form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--rc-login-field-autofill-background)
inset !important;
-webkit-text-fill-color: var(--rc-text-primary) !important;
caret-color: var(--rc-text-primary);
}
.dark .login-page,
body .dark .login-page,
body.dark .login-page,
body [data-theme='dark'] .login-page {
--rc-login-field-filled-background: rgb(158 27 27 / 14%);
--rc-login-field-filled-background-hover: rgb(158 27 27 / 18%);
--rc-login-field-autofill-background: rgb(158 27 27 / 16%);
--rc-login-field-border-hover: rgb(184 58 58 / 42%);
--rc-login-field-focus-ring: rgb(184 58 58 / 22%);
}
body
:is(
.bg-sky-50,
......
src/global.less
View file @ ff5c9f77
......@@ -43,92 +43,6 @@ a {
text-decoration: none;
}
.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-border-hover: rgb(158 27 27 / 24%);
--rc-login-field-focus-ring: rgb(158 27 27 / 16%);
}
.login-form
.login-field[data-has-value='true']
:where(.input, .input--secondary, [data-slot='input'], [data-slot='input-wrapper'], [data-slot='control']) {
--input-bg: var(--rc-login-field-filled-background);
--input-bg-hover: var(--rc-login-field-filled-background-hover);
--input-bg-focus: var(--rc-login-field-filled-background);
background: var(--rc-login-field-filled-background) !important;
background-color: var(--rc-login-field-filled-background) !important;
}
.login-form
.login-field[data-has-value='true']
:where(.input input, [data-slot='input-wrapper'] input, [data-slot='control'] input) {
background: transparent !important;
background-color: transparent !important;
}
.login-form
.login-field[data-has-value='true']
:where(.input, .input--secondary, [data-slot='input'], [data-slot='input-wrapper'], [data-slot='control']):hover,
.login-form
.login-field[data-has-value='true']
:where(
.input,
.input--secondary,
[data-slot='input'],
[data-slot='input-wrapper'],
[data-slot='control']
)[data-hovered='true'] {
border-color: var(--rc-login-field-border-hover) !important;
background: var(--rc-login-field-filled-background-hover) !important;
background-color: var(--rc-login-field-filled-background-hover) !important;
}
.login-form
.login-field[data-has-value='true']
:where(.input, .input--secondary, [data-slot='input'], [data-slot='input-wrapper'], [data-slot='control']):focus,
.login-form
.login-field[data-has-value='true']
:where(.input, .input--secondary, [data-slot='input'], [data-slot='input-wrapper'], [data-slot='control']):focus-within,
.login-form
.login-field[data-has-value='true']
:where(.input, .input--secondary, [data-slot='input'], [data-slot='input-wrapper'], [data-slot='control'])[data-focused='true'] {
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:
var(--field-shadow, 0 1px 2px rgb(15 23 42 / 4%)),
0 0 0 2px var(--rc-login-field-focus-ring) !important;
}
.login-form
:where(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
input:-webkit-autofill
),
.login-form
:where(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
input:autofill
) {
background: var(--rc-login-field-autofill-background) !important;
background-color: var(--rc-login-field-autofill-background) !important;
}
.login-form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--rc-login-field-autofill-background)
inset !important;
-webkit-text-fill-color: var(--rc-text-primary) !important;
caret-color: var(--rc-text-primary);
}
.dark .login-page {
--rc-login-field-filled-background: rgb(158 27 27 / 14%);
--rc-login-field-filled-background-hover: rgb(158 27 27 / 18%);
--rc-login-field-autofill-background: rgb(158 27 27 / 16%);
--rc-login-field-border-hover: rgb(184 58 58 / 42%);
--rc-login-field-focus-ring: rgb(184 58 58 / 22%);
}
.rc-shell-root {
font-synthesis: none;
text-rendering: optimizeLegibility;
......
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