Enhance form field validation styles by adding user-valid state and correcting gradient opacity

Vianpyro · Vianpyro · commit d783ebd6b317 · 2025-05-15T21:48:29.000Z
diff --git a/src/styles/form_field.css b/src/styles/form_field.css
@@ -39,10 +39,14 @@
     border-bottom-color: var(--color-error);
 }
 
+.form-field input.filled:user-valid {
+    border-bottom-color: var(--color-success);
+}
+
 .form-field input.filled:user-invalid:not(:focus) {
     background: linear-gradient(
         to top,
-        rgb(from var(--color-error) r g b / 0.1) 0%,
+        rgb(from var(--color-error) r g b / 10%) 0%,
         transparent 100%
     );
 }
@@ -51,10 +55,6 @@
     color: var(--color-error);
 }
 
-.form-field input.filled:user-valid {
-    border-bottom-color: var(--color-success);
-}
-
 .form-field input.filled:user-valid + label {
     color: var(--color-success);
 }

Original file line number	Diff line number	Diff line change
`@@ -39,10 +39,14 @@`
`39`	`39`	`border-bottom-color: var(--color-error);`
`40`	`40`	`}`
`41`	`41`
	`42`	`+.form-field input.filled:user-valid {`
	`43`	`+ border-bottom-color: var(--color-success);`
	`44`	`+}`
	`45`	`+`
`42`	`46`	`.form-field input.filled:user-invalid:not(:focus) {`
`43`	`47`	`background: linear-gradient(`
`44`	`48`	`to top,`
`45`		`- rgb(from var(--color-error) r g b / 0.1) 0%,`
	`49`	`+ rgb(from var(--color-error) r g b / 10%) 0%,`
`46`	`50`	`transparent 100%`
`47`	`51`	`);`
`48`	`52`	`}`
`@@ -51,10 +55,6 @@`
`51`	`55`	`color: var(--color-error);`
`52`	`56`	`}`
`53`	`57`
`54`		`-.form-field input.filled:user-valid {`
`55`		`- border-bottom-color: var(--color-success);`
`56`		`-}`
`57`		`-`
`58`	`58`	`.form-field input.filled:user-valid + label {`
`59`	`59`	`color: var(--color-success);`
`60`	`60`	`}`