From 027790c93ed637981d02832ae17445bb2ad50627 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sun, 3 Jun 2018 15:49:42 +0200
Subject: [PATCH] Progress gear invisible if video is white in upper-left
 corner #77

---
 src/main.css     | 12 ------------
 src/renderer.jsx |  6 +++---
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/main.css b/src/main.css
index 67300610..ae7ca5b6 100644
--- a/src/main.css
+++ b/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;
diff --git a/src/renderer.jsx b/src/renderer.jsx
index 00155739..f0ab694f 100644
--- a/src/renderer.jsx
+++ b/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>
           }