Progress gear invisible if video is white in upper-left corner #77

src/main.css

@@ -112,18 +112,6 @@ input, button, textarea, :focus {
   z-index: 1;
 }
 
-#working {
-  color: white;
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-}
-
-#working i {
-  padding: .3em;
-}
-
 #drag-drop-field {
   padding: 15vw 0;
   border: 2vw dashed #252525;

src/renderer.jsx

@@ -404,10 +404,10 @@ class App extends React.Component {
     return (<div>
       {!this.state.filePath && <div id="drag-drop-field">DROP VIDEO</div>}
       {this.state.working && (
-        <div id="working">
-          <i className="fa fa-cog fa-spin fa-3x fa-fw" style={{ verticalAlign: 'middle' }} />
+        <div style={{ color: 'white', background: 'rgba(0, 0, 0, 0.3)', borderRadius: '.5em', margin: '1em', padding: '.2em .5em', position: 'absolute', zIndex: 1, top: 0, left: 0 }}>
+          <i className="fa fa-cog fa-spin fa-3x fa-fw" style={{ verticalAlign: 'middle', width: '1em', height: '1em' }} />
           {this.state.cutProgress != null &&
-            <span style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
+            <span style={{ color: 'rgba(255, 255, 255, 0.7)', paddingLeft: '.4em' }}>
               {Math.floor(this.state.cutProgress * 100)} %
             </span>
           }