Adds drag'n'drop upload.

src/_h5ai/css/inc/dropbox.less

@@ -0,0 +1,100 @@
+
+#dropbox {
+	margin: 48px 24px;
+	padding: 24px 12px;
+	overflow: hidden;
+
+	background-color: #f8f8f8;
+	border: 1px dashed #ccc;
+	border-radius: 10px;
+
+	.transition(all 0.2s ease-in-out);
+
+	.label {
+		text-align: center;
+		color: #eee;
+		font-size: 5em;
+		font-weight: bold;
+	}
+
+	&.hint {
+		// color: #ccc;
+		// border-color: #aaa;
+	}
+
+	&.match {
+		border-color: #555;
+
+		.label {
+			color: #999;
+		}
+	}
+}
+
+#uploads {
+	width: 450px;
+	margin: 12px auto;
+	padding: 0;
+	list-style: none;
+
+	.upload {
+		color: #555;
+		font-size: 0.9em;
+
+		.name {
+			display: inline-block;
+			white-space: nowrap;
+			width: 320px;
+			overflow: hidden;
+
+			&:before {
+				display: inline-block;
+				content: '•';
+				color: #55c;
+				width: 1em;
+				text-align: center;
+				padding-right: 1em;
+			}
+		}
+
+		.size {
+			// display: inline-block;
+			display: none;
+			float: right;
+			white-space: nowrap;
+
+			&:after {
+				content: ' bytes'
+			}
+		}
+
+		.progress {
+			display: inline-block;
+			margin: 4px 8px;
+
+			width: 84px;
+			height: 8px;
+			background-color: #ddd;
+			overflow: hidden;
+			float: right;
+
+			.bar {
+				width: 0%;
+				height: 100%;
+				background-color: #999;
+			}
+		}
+
+		&.finished .name:before {
+			// content: '✓✔';
+			content: '✔';
+			color: #008200;
+		}
+		&.error .name:before {
+			content: '✖';
+			color: #c55;
+		}
+	}
+
+}
+