Added file uploads

static/less/main.less

@@ -30,8 +30,7 @@ h1 {
 	color: #fff;
 }
 
-#menu-blackout {
-	display: none;
+#blackout {
 	position: absolute;
 	left: 0px;
 	right: 0px;
@@ -39,10 +38,6 @@ h1 {
 	bottom: 0px;
 	z-index: 1024;
 	background: rgba(0, 0, 0, 0.35);
-
-	&.show {
-		display: initial;
-	}
 }
 
 #menu {
@@ -68,7 +63,7 @@ h1 {
 		-webkit-tap-highlight-color: transparent;
 
 		&.separator {
-			border-bottom: 3px solid #000;
+			border-bottom: 2px solid #000;
 		}
 
 		&:hover {
@@ -81,6 +76,62 @@ h1 {
 	}
 }
 
+#upload {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	color: #333;
+	background: #fff;
+	border: 2px solid #000;
+	padding: 16px;
+	z-index: 1025;
+
+	input {
+		border: 1px solid #000;
+		font-size: 0.85em;
+	}
+
+	.files {
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		padding-top: 12px;
+
+		.file {
+			margin-top: 8px;
+			padding-top: 8px;
+			border-top: 1px solid #ddd;
+			&:nth-child(1) {
+				padding-top: 0px;
+				margin-top: 0px;
+				border-top: none;
+			}
+
+			&.done {
+				color: #0a0;
+			}
+		}
+
+		.progress {
+			justify-self: end;
+			margin-top: 8px;
+			padding-top: 8px;
+			padding-left: 8px;
+			border-top: 1px solid #ddd;
+			&:nth-child(2) {
+				padding-top: 0px;
+				margin-top: 0px;
+				border-top: none;
+			}
+
+			&.done {
+				color: #0a0;
+			}
+		}
+	}
+}
+
 header {
 	display: grid;
 	grid-template-columns: 1fr min-content min-content;