fix(ui): remove glossy <select> effect in Safari (#292)

packages/ui/src/components/controls/Controls.module.scss

@@ -51,7 +51,7 @@
 .select,
 .input,
 .button {
-  background: var(--surface-color-light);
+  background-color: var(--surface-color-light);
   color: rgba(255, 255, 255, 0.6);
   border: 0;
   border-radius: 4px;
@@ -94,7 +94,7 @@
     font-size: 0;
     flex-grow: 0;
     flex-basis: 0;
-    padding-left: 12px;
+    padding-left: 16px;
     border-radius: 0 4px 4px 0;
   }
 }

packages/ui/src/components/playback/Playback.module.scss

@@ -17,4 +17,9 @@
     opacity: 0.54;
     pointer-events: none;
   }
+
+  select,
+  input {
+    width: 70px;
+  }
 }

packages/ui/src/components/playback/PlaybackControls.tsx

@@ -112,7 +112,6 @@ export function PlaybackControls() {
         render={(framerate, paused) => (
           <Input
             title="Current framerate"
-            size={4}
             readOnly
             value={paused ? 'PAUSED' : `${framerate} FPS`}
           />

packages/ui/src/index.scss

@@ -71,3 +71,11 @@ button {
   border: 0;
   padding: 0;
 }
+
+select {
+  background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16.71 10.71L15.29 9.28998L12 12.59L8.71001 9.28998L7.29001 10.71L12 15.41L16.71 10.71Z' fill='gray'/%3e%3c/svg%3e")
+    no-repeat 100% 50%;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}