UI Upgrades to file overlay for uploads

3 files changed, 36 insertions, 43 deletions

diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 0af5c01e2..614fc085b 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -106,30 +106,40 @@ body.ios {
 	}
 }
 
-#post-list {
-	.center-file-overlay {
-		top: 0px;
-		height: 100%;
-		width: 59.7%;
-		position: fixed;
-		z-index: 2147483646;
-		-moz-box-shadow: 0px 0px 3px #8a8a8a;
-		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
-		box-shadow: 0px 0px 3px #8a8a8a;
+.center-file-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.8);
+	text-align: center;
+	color: #FFF;
+	display: table;
+	font-size: 1.7em;
+	font-weight: 600;
+	z-index: 6;
 
-		.invisible {
-			visibility: hidden;
-		}
-		.visible {
-			visibility: visible;
-		}
-		.center-file-help-text {
+	> div {
+		display: table-cell;
+		vertical-align: middle;
+	}
 
-		}
-		.center-file-help-picture {
+	.fa {
+		display: block;
+		font-size: 2em;
+		margin: 0 0 0.3em;
+	}
 
-		}
+	.invisible {
+		visibility: hidden;
+	}
+	.visible {
+		visibility: visible;
 	}
+}
+
+#post-list {
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index 41b7aaada..4cf3e32a1 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -1,28 +1,5 @@
 .post-right__container {
 
-	.right-file-overlay {
-		height: 100%;
-		width: 100%;
-		position: fixed;
-		z-index: 2147483646;
-		-moz-box-shadow: 0px 0px 3px #8a8a8a;
-		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
-		box-shadow: 0px 0px 3px #8a8a8a;
-
-		.invisible {
-			visibility: hidden;
-		}
-		.visible {
-			visibility: visible;
-		}
-		.right-file-help-text {
-
-		}
-		.right-file-help-picture {
-
-		}
-	}
-
 	.post-right-root-message {
 		padding: 1em 1em 0;
 	}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 47b2b6bd7..52bb5eae6 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -189,6 +189,9 @@
 }
 
 @media screen and (max-width: 960px) {
+    .center-file-overlay {
+        font-size: 1.5em;
+    }
     .post {
         .post-header .post-header-col.post-header__reply {
             .comment-icon__container__hide {
@@ -240,6 +243,9 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .center-file-overlay {
+        font-size: 1.3em;
+    }
     .date-separator, .new-separator {
         &.hovered--after {
             &:before {