[design] improve form input grid and range styles

Author: zombieFox

src/css/form.css

@@ -692,6 +692,11 @@ input[type="range"]::-moz-range-progress{
 background-color:rgb(var(--form-range-progress-background));
 height:calc(var(--layout-line-width) *2);
 border-radius:var(--theme-radius);
+transition: background-color var(--layout-timing-extra-fast);
+}
+
+input[type="range"]:active::-moz-range-progress{
+background-color:rgb(var(--form-range-progress-background-active));
 }
 
 input[type="range"]:disabled::-moz-range-progress{
@@ -946,7 +951,7 @@ input[type="range"]:disabled::-moz-range-progress{
 
 .form-grid{
 background-color:rgb(var(--form-grid-background));
-padding:calc(var(--layout-line-width) *4);
+padding:0.75em;
 display: inline-grid;
 overflow: hidden;
 transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);

src/css/variables.css

@@ -130,8 +130,7 @@
 --form-range-track-background-focus-hover:var(--theme-gray-04);
 --form-range-track-background-active:var(--theme-gray-03);
 --form-range-track-background-disabled:var(--theme-gray-02);
---form-range-progress-background:var(--theme-accent);
---form-range-progress-background-focus-hover:var(--theme-accent);
+--form-range-progress-background:var(--theme-gray-14);
 --form-range-progress-background-active:var(--theme-accent);
 --form-range-progress-background-disabled:var(--theme-gray-02);
 --form-grid-input-background:var(--theme-gray-03);