优化桌面登录表单焦点状态
This commit is contained in:
@@ -112,6 +112,8 @@ withDefaults(
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
background:
|
||||
@@ -123,6 +125,48 @@ withDefaults(
|
||||
border-radius: 0;
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
transition:
|
||||
filter 0.22s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
|
||||
.auth-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background: url('../../assets/images/generated/auth-panel-bg-v1.webp') center / 100% 100% no-repeat;
|
||||
filter: brightness(1.28) saturate(1.16);
|
||||
mix-blend-mode: screen;
|
||||
transition: opacity 0.22s ease;
|
||||
}
|
||||
|
||||
.auth-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 8%, rgba(255, 226, 156, 0.08) 50%, transparent 92%),
|
||||
radial-gradient(circle at 72% 48%, rgba(212, 175, 55, 0.1), transparent 34%);
|
||||
transition: opacity 0.22s ease;
|
||||
}
|
||||
|
||||
.auth-card:focus-within {
|
||||
transform: translateY(-2px);
|
||||
filter: brightness(1.04) saturate(1.05);
|
||||
}
|
||||
|
||||
.auth-card:focus-within::before {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.auth-card:focus-within::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.auth-card--wide {
|
||||
@@ -130,12 +174,16 @@ withDefaults(
|
||||
}
|
||||
|
||||
.form-lang {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 14px 24px 0;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 260px) 1fr;
|
||||
gap: 24px;
|
||||
|
||||
@@ -274,16 +274,21 @@ label {
|
||||
}
|
||||
|
||||
.field-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #0d0d0d;
|
||||
background-color: #0d0d0d;
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
caret-color: var(--primary-light, #f0d875);
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
@@ -304,7 +309,26 @@ label {
|
||||
|
||||
.login-page--desktop .field-input:focus {
|
||||
border-color: var(--border-gold, #d4af37);
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 72%),
|
||||
#0d0d0d;
|
||||
background-color: #0d0d0d;
|
||||
box-shadow:
|
||||
inset 0 0 18px rgba(212, 175, 55, 0.08),
|
||||
0 0 14px rgba(212, 175, 55, 0.14);
|
||||
}
|
||||
|
||||
.login-page--desktop .field-input:-webkit-autofill,
|
||||
.login-page--desktop .field-input:-webkit-autofill:hover,
|
||||
.login-page--desktop .field-input:-webkit-autofill:focus {
|
||||
border-color: var(--border-gold, #d4af37);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
box-shadow:
|
||||
0 0 0 1000px #0d0d0d inset,
|
||||
inset 0 0 18px rgba(212, 175, 55, 0.08);
|
||||
transition: background-color 9999s ease-out;
|
||||
}
|
||||
|
||||
.login-page--desktop .field-input:hover:not(:focus) {
|
||||
|
||||
@@ -286,16 +286,21 @@ function goRegister() {
|
||||
}
|
||||
|
||||
.field-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #0d0d0d;
|
||||
background-color: #0d0d0d;
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
caret-color: var(--primary-light, #f0d875);
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
@@ -313,7 +318,26 @@ function goRegister() {
|
||||
|
||||
.login-page--desktop .field-input:focus {
|
||||
border-color: var(--border-gold, #D4AF37);
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 72%),
|
||||
#0d0d0d;
|
||||
background-color: #0d0d0d;
|
||||
box-shadow:
|
||||
inset 0 0 18px rgba(212, 175, 55, 0.08),
|
||||
0 0 14px rgba(212, 175, 55, 0.14);
|
||||
}
|
||||
|
||||
.login-page--desktop .field-input:-webkit-autofill,
|
||||
.login-page--desktop .field-input:-webkit-autofill:hover,
|
||||
.login-page--desktop .field-input:-webkit-autofill:focus {
|
||||
border-color: var(--border-gold, #D4AF37);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
box-shadow:
|
||||
0 0 0 1000px #0d0d0d inset,
|
||||
inset 0 0 18px rgba(212, 175, 55, 0.08);
|
||||
transition: background-color 9999s ease-out;
|
||||
}
|
||||
|
||||
.login-page--desktop .field-input:hover:not(:focus) {
|
||||
|
||||
@@ -358,16 +358,21 @@ label {
|
||||
}
|
||||
|
||||
.field-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #0d0d0d;
|
||||
background-color: #0d0d0d;
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
caret-color: var(--primary-light, #f0d875);
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
@@ -389,7 +394,26 @@ label {
|
||||
|
||||
.login-page--desktop .field-input:focus {
|
||||
border-color: var(--border-gold, #D4AF37);
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 72%),
|
||||
#0d0d0d;
|
||||
background-color: #0d0d0d;
|
||||
box-shadow:
|
||||
inset 0 0 18px rgba(212, 175, 55, 0.08),
|
||||
0 0 14px rgba(212, 175, 55, 0.14);
|
||||
}
|
||||
|
||||
.login-page--desktop .field-input:-webkit-autofill,
|
||||
.login-page--desktop .field-input:-webkit-autofill:hover,
|
||||
.login-page--desktop .field-input:-webkit-autofill:focus {
|
||||
border-color: var(--border-gold, #D4AF37);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
box-shadow:
|
||||
0 0 0 1000px #0d0d0d inset,
|
||||
inset 0 0 18px rgba(212, 175, 55, 0.08);
|
||||
transition: background-color 9999s ease-out;
|
||||
}
|
||||
|
||||
.login-page--desktop .field-input:hover:not(:focus) {
|
||||
|
||||
Reference in New Issue
Block a user