style: update form input styles for improved appearance and focus effects

This commit is contained in:
2026-03-10 18:26:58 -04:00
parent a34bea38a6
commit a7d0354150

View File

@@ -390,19 +390,31 @@ x-navigation-link svg {
}
.form-input {
border: none;
border-bottom: 2px solid #404040;
border: 1px solid hsl(var(--color-neutral));
border-radius: 0.375rem;
outline: none;
background: transparent;
transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
background: hsl(var(--color-background-secondary) / 0.5);
transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
width: 100%;
padding: 10px 0;
padding: 0.625rem;
font-size: 0.875rem;
color: hsl(var(--color-base));
}
.form-input:focus {
border-color: hsl(var(--color-primary));
box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.3);
}
.form-input::placeholder {
color: hsl(var(--color-base) / 0.4);
}
.form-input-label {
position: absolute;
top: 10px;
left: 0;
top: 0.625rem;
left: 0.625rem;
color: #a3a3a3;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
@@ -412,11 +424,7 @@ x-navigation-link svg {
.form-input:not(:placeholder-shown) + .form-input-label {
transform: translateY(-22px);
font-size: 12px;
color: hsl(var(--color-background));
}
.form-input:focus {
border-bottom-color: hsl(var(--color-background));
color: hsl(var(--color-primary));
}
.form-radio:checked {