Upload modal

html_orig/sass/app.scss

@@ -18,6 +18,8 @@ $c-form-field-fg: white;
 $c-form-highlight: #2972ba;
 $c-form-highlight-a: #2ea1f9;
 
+$c-modal-bg: #242426;
+
 $screen-stack: "DejaVu Sans Mono", "Liberation Mono", "Inconsolata", monospace;
 
 @function dist($x) {

html_orig/sass/layout/_modal.scss

@@ -1,4 +1,5 @@
 .Modal {
+	z-index: 100;
 	position: fixed;
 	width: 100%; height: 100%;
 	left: 0; top: 0; right: 0; bottom: 0;
@@ -12,6 +13,21 @@
 	opacity: 0;
 	&.visible { opacity: 1 }
 	&.hidden { display: none }
+
+	&.light {
+		background: rgba(black, .25);
+	}
+
+	@include media($phone) {
+		flex-direction: column;
+		justify-content: flex-start;
+		overflow-y: auto;
+		.Dialog {
+			margin-top: dist(-1) !important;
+			flex-basis: unset;
+			flex-shrink: 0;
+		}
+	}
 }
 
 .Dialog {
@@ -19,16 +35,16 @@
 	padding: dist(0);
 	overflow: hidden;
 
-	max-width: 100%;
-	max-height: 100%;
-	flex: 0 1 30rem;
+	//max-width: 100%;
+	//max-height: 100%;
+	flex-basis: 35rem;
 	//min-height: 15rem;
 
-	background: #1c1c1e;
+	background: $c-modal-bg;//#1c1c1e;
 	border-left: 6px solid $c-form-highlight;
 	border-right: 6px solid $c-form-highlight;
-	border-top: 1px solid $c-form-highlight;
-	border-bottom: 1px solid $c-form-highlight;
+	//border-top: 1px solid $c-form-highlight;
+	//border-bottom: 1px solid $c-form-highlight;
 	box-shadow: 0 0 6px 0 black;
 
 	border-radius: 6px;

html_orig/sass/pages/_term.scss

@@ -71,8 +71,10 @@ body.term {
 	text-align: center;
 
 	a {
-		padding: 0 dist(-2);
-		text-decoration: underline;
+		text-decoration: none;
+		padding: 5px 5px;
+		border-radius: 2px;
+		position: relative;
 
 		&, &:visited, &:link {
 			color: #336085;
@@ -80,12 +82,34 @@ body.term {
 
 		&:hover {
 			color: #5abfff;
+			background: #1b273c;
+		}
+
+		&:active {
+			top: 1px;
+		}
+
+		i::before {
+			display: inline;
+		}
+
+		span {
+			margin-left: .2em;
+		}
+
+		@include media($phone) {
+			span {
+				display: none;
+			}
+
+			font-size: 130%;
+			padding: 6px;
 		}
 	}
 
 	.icn-keyboard {
 		text-decoration: none;
-		font-size: 150%;
+		font-size: 130%; // make it bigger - icon is too small to be recognizable
 		vertical-align: middle;
 	}
 }
@@ -100,6 +124,69 @@ body.term {
 	top: -9999px;
 }
 
+#fu_modal {
+	align-items: flex-start;
+}
+
+#fu_form {
+	//border: 1px solid #3983CD;
+	//border-radius: 2px;
+	//padding: 0 dist(0);
+	//background: #333e58;
+	padding: dist(0);
+	margin-top: 100px; // offset
+
+	z-index: 1000;
+
+	label {
+		width: 8em;
+		display: inline-block;
+	}
+
+	input[type="number"], select {
+		width: 10em;
+	}
+
+	textarea {
+		width: 100%;
+		min-height: 8em;
+		margin-top: dist(-1);
+		resize: vertical;
+	}
+
+	.fu-buttons {
+		text-align: center;
+		padding: dist(-2);
+		margin-top: dist(-2);
+		border-radius: 3px;
+	}
+
+	.fu-prog-box {
+		display: none;
+	}
+
+	&.busy {
+		background: rgba($c-modal-bg, .3);
+		border-left-color: rgba($c-form-highlight, .3);
+		border-right-color: rgba($c-form-highlight, .3);
+
+		.fu-content {
+			@include click-through;
+			opacity: .3;
+		}
+
+		.fu-buttons {
+			text-align: left;
+			background: $c-modal-bg;
+			border: 1px solid $c-form-highlight;
+		}
+
+		.fu-prog-box {
+			display: inline-block;
+		}
+	}
+}
+
 // Tango
 .theme-0 {
 	$term-colors: