Calendar and series details show download progress

src/UI/Content/progress-bars.less

@@ -0,0 +1,36 @@
+@import "Bootstrap/mixins";
+@import "Bootstrap/variables";
+@import "variables";
+
+.progress.episode-progress {
+  width         : 125px;
+  position      : relative;
+  margin-bottom : 2px;
+
+  .progressbar-back-text, .progressbar-front-text {
+    font-size   : 11.844px;
+    font-weight : bold;
+    text-align  : center;
+    cursor      : default;
+  }
+
+  .progressbar-back-text {
+    position : absolute;
+    width    : 100%;
+    height   : 100%;
+  }
+
+  .progressbar-front-text {
+    display : block;
+    width   : 125px;
+  }
+
+  .bar {
+    position : absolute;
+    overflow : hidden;
+  }
+}
+
+.progress-purple .bar, .progress .bar-purple {
+  #gradient > .vertical(@purple, @nzbdronePurple);
+}

src/UI/Content/theme.less

@@ -10,39 +10,11 @@
 @import "checkbox-button";
 @import "spinner";
 @import "legend";
+@import "progress-bars";
 @import "../Shared/Styles/clickable";
 @import "../Shared/Styles/card";
 @import "../Rename/rename";
 
-.progress.episode-progress {
-  width         : 125px;
-  position      : relative;
-  margin-bottom : 2px;
-
-  .progressbar-back-text, .progressbar-front-text {
-    font-size   : 11.844px;
-    font-weight : bold;
-    text-align  : center;
-    cursor      : default;
-  }
-
-  .progressbar-back-text {
-    position : absolute;
-    width    : 100%;
-    height   : 100%;
-  }
-
-  .progressbar-front-text {
-    display : block;
-    width   : 125px;
-  }
-
-  .bar {
-    position : absolute;
-    overflow : hidden;
-  }
-}
-
 .page-toolbar {
   margin-top    : 10px;
   margin-bottom : 30px;

src/UI/Content/variables.less

@@ -1 +1,2 @@
-@nzbdroneRed: #C4273C;
+@nzbdroneRed: #c4273c;
+@nzbdronePurple: #7932ea;