[design] improve form select arrow

Author: zombieFox

src/css/form.css

@@ -19,16 +19,16 @@ label.disabled{
 select{
 background-color:rgb(var(--form-input-background));
 background-image:
-linear-gradient(45deg, transparent 50%,rgb(var(--form-label)) 50%),
-linear-gradient(135deg,rgb(var(--form-label)) 50%, transparent 50%);
+linear-gradient(45deg, transparent 60%,rgb(var(--form-label)) 60%),
+linear-gradient(135deg,rgb(var(--form-label)) 40%, transparent 40%);
 background-position:
-calc(100%-calc(var(--form-arrow-size) *5)) 50%,
-calc(100%-calc(var(--form-arrow-size) *4)) 50%;
+calc(100%-calc(var(--form-arrow-size) *4)) 50%,
+calc(100%-calc(var(--form-arrow-size) *3)) 50%;
 background-size:
-var(--form-arrow-size) var(--form-arrow-size),
-var(--form-arrow-size) var(--form-arrow-size);
+var(--form-arrow-size) calc(var(--form-arrow-size) *0.75),
+var(--form-arrow-size) calc(var(--form-arrow-size) *0.75);
 background-repeat: no-repeat;
-padding:0calc(var(--form-arrow-size) *10) 01em;
+padding:0calc(var(--form-arrow-size) *8) 01em;
 margin:001em0;
 color:rgb(var(--form-label));
 font-size:1em;
@@ -49,8 +49,8 @@ select{
 
 select:hover{
 background-image:
-linear-gradient(45deg, transparent 50%,rgb(var(--form-label-hover)) 50%),
-linear-gradient(135deg,rgb(var(--form-label-hover)) 50%, transparent 50%);
+linear-gradient(45deg, transparent 60%,rgb(var(--form-label-hover)) 60%),
+linear-gradient(135deg,rgb(var(--form-label-hover)) 40%, transparent 40%);
 background-color:rgb(var(--form-input-background-hover));
 border-color:rgb(var(--form-input-border-hover));
 color:rgb(var(--form-label-hover));
@@ -61,8 +61,8 @@ select:hover{
 select:focus,
 select:active{
 background-image:
-linear-gradient(45deg, transparent 50%,rgb(var(--form-label-hover)) 50%),
-linear-gradient(135deg,rgb(var(--form-label-hover)) 50%, transparent 50%);
+linear-gradient(45deg, transparent 60%,rgb(var(--form-label-focus-active)) 60%),
+linear-gradient(135deg,rgb(var(--form-label-focus-active)) 40%, transparent 40%);
 background-color:rgb(var(--form-input-background-border-focus-active));
 border-color:rgb(var(--form-input-border-focus-active));
 color:rgb(var(--form-label-focus-active));

src/css/variables.css

@@ -148,7 +148,7 @@
 --form-grid-border-checked:var(--theme-accent);
 --form-grid-border-disabled:var(--theme-gray-04);
 --form-dropdown-background:var(--theme-gray-02);
---form-arrow-size:5px;
+--form-arrow-size:calc(var(--theme-root-font-size) *0.5);
 --form-hover-ring:000var(--layout-line-width) rgb(var(--theme-gray-06));
 --form-focus-ring:000var(--layout-line-width) rgb(var(--theme-gray-10)),000calc(var(--layout-line-width) *2) rgba(var(--theme-gray-10),0.25);
 --form-focus-ring-accent:000var(--layout-line-width) rgb(var(--theme-accent)),000calc(var(--layout-line-width) *2) rgba(var(--theme-accent),0.25);