Improve LoginPage styles and remove redundant labels
Removed unnecessary email and password labels to simplify the form. Adjusted spacing, padding, and font size for better visual alignment and added styles to enhance autofill appearance.
This commit is contained in:
@@ -38,7 +38,6 @@ export function LoginPage() {
|
||||
</section>
|
||||
<form className="card login-card" onSubmit={submit}>
|
||||
<h2>Login</h2>
|
||||
<label>Email</label>
|
||||
<div className="input-shell">
|
||||
<input
|
||||
type="email"
|
||||
@@ -48,7 +47,6 @@ export function LoginPage() {
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
<label>Passwort</label>
|
||||
<div className="input-shell">
|
||||
<input
|
||||
type="password"
|
||||
|
||||
@@ -222,7 +222,7 @@ td {
|
||||
.login-card {
|
||||
width: min(460px, 92vw);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
border-color: #3559a3;
|
||||
backdrop-filter: blur(8px);
|
||||
animation: loginEnter 0.5s ease;
|
||||
@@ -285,6 +285,8 @@ td {
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 9px 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-cta {
|
||||
@@ -292,6 +294,7 @@ td {
|
||||
font-weight: 700;
|
||||
border-color: #3f74d6;
|
||||
background: linear-gradient(90deg, #1e74d6, #1b5ab6);
|
||||
padding: 9px 12px;
|
||||
}
|
||||
|
||||
.login-cta:hover {
|
||||
@@ -299,6 +302,14 @@ td {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.login-card input:-webkit-autofill,
|
||||
.login-card input:-webkit-autofill:hover,
|
||||
.login-card input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #e5edf7;
|
||||
-webkit-box-shadow: 0 0 0px 1000px #0e1731 inset;
|
||||
transition: background-color 9999s ease-out 0s;
|
||||
}
|
||||
|
||||
@keyframes focusPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 3px #38bdf820, 0 0 14px #38bdf820;
|
||||
|
||||
Reference in New Issue
Block a user