style: update form input styles for improved appearance and focus effects
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user