Merge branch 'staging' into newCk

www/file/file.less

@@ -12,6 +12,19 @@ html, body {
     display: flex; // We need this to remove a 3px border at the bottom of the toolbar
 }
 
+body {
+    display: flex;
+    flex-flow: column;
+}
+#app {
+    flex: 1;
+    background: url('/customize/bg3.jpg') no-repeat center center;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .cryptpad-toolbar {
     padding: 0px;
     display: inline-block;
@@ -32,6 +45,13 @@ html, body {
     z-index: -1;
 }
 
+media-tag {
+    img {
+        max-width: 100%;
+        max-height: ~"calc(100vh - 64px)";
+    }
+}
+
 #upload-form, #download-form {
     padding: 0px;
     margin: 0px;
@@ -54,6 +74,21 @@ html, body {
         box-sizing: border-box;
     }
 }
+#download-form {
+    label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        white-space: normal;
+        word-wrap: break-word;
+        span {
+            width: 50vh;
+            max-width: 80vw;
+            text-align: center;
+            line-height: 1.5em;
+        }
+    }
+}
 .hovering {
     background-color: rgba(255, 0, 115, 0.5) !important;
 }
@@ -65,14 +100,14 @@ html, body {
     display: none;
 }
 .inputfile + label {
-    border: 2px solid black;
-    background-color: rgba(50, 50, 50, .10);
+    //border: 2px solid black;
+    //background-color: rgba(50, 50, 50, .10);
     display: block;
 }
 
 .inputfile:focus + label,
 .inputfile + label:hover {
-    background-color: rgba(50, 50, 50, 0.30);
+    //background-color: rgba(50, 50, 50, 0.30);
 }
 
 #progress {
@@ -82,7 +117,7 @@ html, body {
     height: 100%;
 
 
-    transition: width 500ms;
+    transition: width 200ms;
     width: 0%;
     max-width: 100%;
     max-height: 100%;
@@ -91,38 +126,8 @@ html, body {
     display: block;
 }
 
-#status {
-    display: none;
-    width: 80vw;
-    margin-top: 50px;
-    margin-left: 10vw;
-    border: 1px solid black;
-    border-collapse: collapse;
-    tr:nth-child(1) {
-        background-color: #ccc;
-        border: 1px solid #999;
-        td { text-align: center; }
-    }
-    td {
-        border-left: 1px solid #BBB;
-        border-right: 1px solid #BBB;
-        padding: 0 10px;
-    }
-    .upProgress {
-        width: 200px;
-        position: relative;
-        text-align: center;
-    }
-    .progressContainer {
-        position: absolute;
-        width: 0px;
-        left: 5px;
-        top: 1px; bottom: 1px;
-        background-color: rgba(0,0,255,0.3);
-    }
-    .upCancel { text-align: center; }
-    .fa.cancel {
-        color: rgb(255, 0, 115);
-    }
+body #uploadStatusContainer {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
+    opacity: 0.9;
 }
-