Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-03-10 18:26:58 -04:00
parent a34bea38a6
commit a7d0354150
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
themes/lucentui/css/app.css
View File

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