fixed webkit appearance of the UI

src/components/color_input/color_input.vue

@@ -47,6 +47,7 @@ export default {
 <style lang="scss">
 .color-control {
   display: flex;
+  align-items: baseline;
 
   &.disabled *:not(.opt-l){
     opacity: .5
@@ -75,10 +76,10 @@ export default {
     flex: 0;
     padding: 1px;
     cursor: pointer;
-    height: 100%;
-    max-height: 29px;
+    height: 29px;
     min-width: 2em;
     border: none;
+    align-self: stretch;
   }
 }
 </style>

src/components/contrast_ratio/contrast_ratio.vue

@@ -36,7 +36,7 @@ export default {
 <style lang="scss">
 .contrast-ratio {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
 
   .label {
     margin-right: 1em;

src/components/opacity_input/opacity_input.vue

@@ -41,6 +41,7 @@ export default {
 <style lang="scss">
 .opacity-control {
   display: flex;
+  align-items: baseline;
 
   &.disabled *:not(.opt-l) {
     opacity: .5
@@ -48,7 +49,6 @@ export default {
 
   .opt-l {
     align-self: center;
-    line-height: 0;
     &::before {
       width: 14px;
       height: 14px;
@@ -61,7 +61,6 @@ export default {
   }
 
   .input-range {
-    align-self: center;
     background: none;
     border: none;
     margin: 0;
@@ -70,8 +69,8 @@ export default {
     min-width: 7em;
     flex: 1;
   }
+
   .input-number {
-    align-self: center;
     margin: 0;
     min-width: 4em;
     flex: 0;