4 files changed, 36 insertions, 10 deletions

diff --git a/css/style.css b/css/style.css
index 32e017f..07e2bf3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -267,7 +267,6 @@ input[type=submit]:hover {
 }
 
 .window {
-	background: #fafafa;
 	margin: 0rem;
 	padding: 0;
 	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
@@ -280,6 +279,15 @@ input[type=submit]:hover {
     left: 0;
     width: 800px;
     height: 600px;
+    
+    transition: opacity 0.3s;
+    display: flex;
+    flex-direction: column;
+}
+
+.foldercontents, .filecontents {
+	background: rgba(250, 250, 250, .8);
+    flex: 1 0 0;
 }
 
 .window h3,
@@ -287,10 +295,7 @@ input[type=submit]:hover {
 	color: #4d4d4d;
 	background: #f0f0f0;
 	margin: 0;
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
 
-    cursor: grab;
 
     display: flex;
     align-items: stretch;
@@ -301,12 +306,19 @@ input[type=submit]:hover {
 
 .window > h2 {
     font-size: 1.3rem;
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+    cursor: grab;
 }
 
 .window h3 {
     font-size: 1.2rem;
 }
 
+.window.dragged {
+    opacity: 0.9;
+}
+
 .files {
     padding: 0.3rem;
     display: grid;
@@ -327,7 +339,7 @@ input[type=submit]:hover {
     display: flex;
     flex-direction: column;
     align-items: center;
-    border: 1px solid #fafafa;
+    border: 1px solid rgba(0,0,0,0);
     border-radius: 0.1rem;
 }
 
@@ -337,7 +349,7 @@ input[type=submit]:hover {
 }
 
 .file:hover:not(.dragged) {
-    background: white;
+    background: rgba(255,255,255, 0.5);
     color: black;
     border-color: #ddd;
 }
@@ -396,3 +408,15 @@ input[type=submit]:hover {
     background: #2e91db;
     color: white;
 }
+
+.backdrop {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    background-image: url("/img/backdrop.jpg");
+    background-size: cover;
+}
diff --git a/img/backdrop.jpg b/img/backdrop.jpg
new file mode 100644
index 0000000..57df460
--- /dev/null
+++ b/img/backdrop.jpg
diff --git a/loggedin.js b/loggedin.js
index 8e0bf15..0f51c1b 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -210,8 +210,7 @@ function move_file(new_folder, filename) {
     xhr.send(data);
 }
 
-function new_folder() {
-    var dirname = prompt(`Directory name`, "New Folder");
+function new_folder() { var dirname = prompt(`Directory name`, "New Folder");
     if (!dirname)
         return;
 
@@ -330,8 +329,7 @@ function make_window(pwd) {
     h2.onmousedown = (e) => {
         begin_drag(e, wnd_html);
         e.preventDefault();
-   };
-
+    };
 
     path = document.createElement('div');
     path.classList.add('path');
@@ -347,6 +345,7 @@ function make_window(pwd) {
 
     {
         wnd.foldercontents = document.createElement('div');
+        wnd.foldercontents.classList.add('foldercontents');
         wnd_html.appendChild(wnd.foldercontents);
 
         var h3 = document.createElement('h3');
diff --git a/loggedin.php b/loggedin.php
index 708b14b..ad6bfc6 100644
--- a/loggedin.php
+++ b/loggedin.php
@@ -1,3 +1,6 @@
+
+<div class="backdrop">
+
 <form id="upload_form" style="display:none;" action="php/upload.php" method="post" enctype="multipart/form-data">
     <input id="filename" name="filename">
     <input type="file" name="the_file" id="the_file">