Add fancy loading spinner when downloading

ramazansancar · Dec 5, 2018 · e4e9e2f · e4e9e2f
1 parent ca04e39
commit e4e9e2f
Show file tree

Hide file tree

Showing 5 changed files with 307 additions and 43 deletions.
diff --git a/manifest.json b/manifest.json
@@ -12,7 +12,11 @@
       "matches": ["*://*.netflix.com/*"],
       "run_at": "document_end",
       "js": ["src/js/content.js"],
-      "css": ["src/css/inject.css"]
+      "css": [
+        "src/css/inject.css",
+        "src/css/buttons.css",
+        "src/css/loader.css"
+      ]
     }
   ],
   "externally_connectable": {

diff --git a/src/css/buttons.css b/src/css/buttons.css
@@ -0,0 +1,94 @@
+/** Make sure the buttons keep working,
+    even after Netflix changes their style. **/
+
+/** Default button **/
+.va-button {
+  position: relative;
+  font-size: 1em;
+  padding: 24.5px 2em;
+  min-width: 74px;
+  min-height: 50px;
+  margin: .5em .5em .5em 0;
+
+  display: inline-block;
+  text-decoration: none;
+  line-height: 1em;
+  vertical-align: middle;
+  cursor: pointer;
+  font-weight: 400;
+  letter-spacing: .1px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 0;
+
+  color: #000;
+  background-color: #e6e6e6;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#e6e6e6),to(#ddd));
+  background-image: -webkit-linear-gradient(top,#e6e6e6,#ddd);
+  background-image: -moz-linear-gradient(top,#e6e6e6,#ddd);
+  background-image: -o-linear-gradient(top,#e6e6e6,#ddd);
+  background-image: linear-gradient(to bottom,#e6e6e6,#ddd);
+  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2);
+  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.2);
+  box-shadow: 0 1px 0 rgba(0,0,0,.2);
+}
+
+.va-button:hover {
+  text-decoration: none;
+  background: #eaeaea;
+  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2);
+  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.2);
+  box-shadow: 0 1px 0 rgba(0,0,0,.2);
+}
+
+.va-button:active {
+  background: #c2c2c2;
+}
+
+/** Small button **/
+.va-button.va-button-small {
+  display: inline-block;
+  font-size: 13px;
+  padding: 12px 2em;
+  min-width: 98px;
+  min-height: 37px;
+  margin-right: .5em;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: auto;
+  line-height: 1em;
+}
+
+/** Blue button **/
+.va-button-blue {
+	color: #fff;
+	background-color: #0080ff;
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#0080ff),to(#0277ec));
+	background-image: -webkit-linear-gradient(top,#0080ff,#0277ec);
+	background-image: -moz-linear-gradient(top,#0080ff,#0277ec);
+	background-image: -o-linear-gradient(top,#0080ff,#0277ec);
+	background-image: linear-gradient(to bottom,#0080ff,#0277ec);
+	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.55);
+	-moz-box-shadow: 0 1px 0 rgba(0,0,0,.55);
+	box-shadow: 0 1px 0 rgba(0,0,0,.55);
+}
+
+.va-button-blue:hover {
+	background: #2490fd;
+  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.55);
+  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.55);
+  box-shadow: 0 1px 0 rgba(0,0,0,.55);
+}
+
+.va-button-blue:active {
+  background: #0166c9;
+}
diff --git a/src/css/inject.css b/src/css/inject.css
@@ -1,24 +1,23 @@
+/** TODO: Rename to main.css or something. **/
 
 /** Use Netflix's fancy font on all 'va-' classes. **/
 *[class^="va-"] {
   font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
+/** Menu item & Modal open buttons **/
 .va-active {
   color: #fff !important;
 }
+
 .va-dl {
   float: right;
   font-size: 16px;
   margin-right: 15px;
+  margin-top: -8px;
 }
-.va-button {
-  display: inline-block;
-  border-radius: 7px;
-  padding: .4em .75em .35em;
-}
-.va-input {
 
-}
+/** Modals **/
 .va-modal {
   position: fixed;
   top: 0;
@@ -40,25 +39,25 @@
 .va-modal-contents {
   background-color: #fff;
   color: #333;
-  padding: 3em;
-  border-radius: 10px; /* higher radius so that the white doesn't show underneath the title and footer. */
+  padding: 2em;
 }
+
 .va-modal-title {
   margin-top: -3em;
-  margin-left: -3em;
-  margin-right: -3em;
+  margin-left: -2em;
+  margin-right: -2em;
   padding-top: 1em;
-  padding-bottom: 1em;
-  padding-right: 3em;
-  padding-left: 3em;
-  border-top-left-radius: 7px;
-  border-top-right-radius: 7px;
+  padding-right: 2em;
+  padding-left: 2em;
 
   font-weight: 500;
-  background-color: #333232;
+  background-color: #fff;
   color: #fff;
+}
 
-  text-align: center;
+.va-modal-title > h1,
+.va-modal-title > h2 {
+  margin: 0;
 }
 
 .va-modal-error .va-modal-title {
@@ -68,28 +67,33 @@
 .va-modal-title > select {
   color: #000;
 }
+
 .va-modal-body {
-  padding-top: 2em;
-  padding-bottom: 2em;
+  padding-bottom: .5em;
 }
+
 .va-modal-body p {
   max-width: 500px;
 }
+
 .va-modal-body label {
   font-weight: bold;
 }
+
+.va-input {
+  color: #333;
+}
+
 .va-modal-footer {
   margin-bottom: -3em;
   padding-top: 1em;
-  padding-bottom: 1em;
-  margin-left: -3em;
-  margin-right: -3em;
+  padding-bottom: 1.5em;
+  margin-left: -1em;
+  margin-right: -1em;
   padding-left: 1em;
   padding-right: 1em;
-  background-color: lightgrey;
-  border-bottom-left-radius: 7px;
-  border-bottom-right-radius: 7px;
 }
+
 .va-modal-footer > button:last-of-type {
   float: right;
 }
diff --git a/src/css/loader.css b/src/css/loader.css
@@ -0,0 +1,93 @@
+/**
+ * Created by Scott Galloway
+ * March 15 2016, April 13 2018
+ * https://codepen.io/scottloway/pen/zqoLyQ
+ */
+
+/** Container **/
+.va-loading-section {
+	text-align: center;
+	padding-top: 1em;
+}
+.va-loading-section h1 {
+	text-align: left;
+	font-size: inherit;
+}
+
+/** Circle loader **/
+.va-circle-loader {
+  margin-bottom: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-left-color: #5cb85c;
+  animation: va-loading 1.2s infinite linear;
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  border-radius: 50%;
+  width: 7em;
+  height: 7em;
+}
+
+.va-load-complete {
+  -webkit-animation: none;
+  animation: none;
+  border-color: #5cb85c;
+  transition: border 500ms ease-out;
+}
+
+@keyframes va-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/** Checkmark done **/
+.va-checkmark {
+  display: none;
+}
+
+.va-checkmark.va-draw:after {
+  animation-duration: 800ms;
+  animation-timing-function: ease;
+  animation-name: va-checkmark;
+  transform: scaleX(-1) rotate(135deg);
+}
+
+.va-checkmark:after {
+  opacity: 1;
+  height: 3.5em;
+  width: 1.75em;
+  transform-origin: left top;
+  border-right: 3px solid #5cb85c;
+  border-top: 3px solid #5cb85c;
+  content: '';
+  left: 1.75em;
+  top: 3.5em;
+  position: absolute;
+}
+
+@keyframes va-checkmark {
+  0% {
+    height: 0;
+    width: 0;
+    opacity: 1;
+  }
+  20% {
+    height: 0;
+    width: 1.75em;
+    opacity: 1;
+  }
+  40% {
+    height: 3.5em;
+    width: 1.75em;
+    opacity: 1;
+  }
+  100% {
+    height: 3.5em;
+    width: 1.75em;
+    opacity: 1;
+  }
+}