1 files changed, 72 insertions, 0 deletions
diff --git a/static/upload.css b/static/upload.css
new file mode 100644
index 0000000..0b37238
--- /dev/null
+++ b/static/upload.css
@@ -0,0 +1,72 @@
+/* (A) UPLOAD ZONE */
+/* vim:set ts=2 sw=2 sts=2 et: */
+
+:root {
+  --blue: #cfd5ff;
+  --radius: 5px;
+  --yellow: #f9fcbd;
+  --green: #bdfcbe;
+  --red: #ffcfd5;
+  --boxshadow1: inset 0px 0px 0px 8px;
+  --boxshadow2: 0px 0px 0px 8px;
+}
+
+#upzone {
+  width: 300px;
+  height: 200px;
+  background: var(--blue);
+  padding: 0px;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+  /* border: 5px solid var(--blue); */
+    ;
+  box-shadow: var(--boxshadow1) var(--blue),
+    var(--boxshadow2) var(--blue);
+}
+
+/* when hovering over it with a file */
+#upzone.highlight {
+  background: var(--green);
+  box-shadow: var(--boxshadow1) var(--green),
+    var(--boxshadow2) var(--green);
+}
+
+/* when uploading files in the queue */
+#upzone.processing {
+  background: var(--yellow);
+  box-shadow: var(--boxshadow1) var(--yellow),
+    var(--boxshadow2) var(--yellow);
+}
+
+#upzone.invalid {
+  background: var(--red);
+  box-shadow: var(--boxshadow1) var(--red),
+    var(--boxshadow2) var(--red);
+}
+
+#upzone.processing, #upzone.highlight, #upzone.invalid, #upzone {
+  /* nice transition effect when beginning to upload */
+  -webkit-transition: all 0.25s linear;
+  -moz-transition: all 0.25s linear;
+  -o-transition: all 0.25s linear;
+  transition: all 0.25s linear;
+  border: 3px solid rgba(0,0,0,0.1);
+  border-radius: var(--radius);
+  border-style: dashed;
+}
+
+/* (B) UPLOAD FORM */
+#upform {
+  /* display anyway, even with upload zone visible */
+  display: block;
+}
+
+#upstat {
+  font-size: 70%;
+}
+
+/* this div will be set to display: block by javascript */
+#hiddenfirst {
+  display: none;
+}