break out browser and tasks

1 files changed, 32 insertions, 5 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 57979b1..ee4b8d2 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -12,12 +12,24 @@ html,body,input,button,textarea,.fileUploadButton {
   font-size: 12px;
   font-family: sans-serif;
 }
+
+/* main view */
+
 .header {
   width: 100%;
   padding: 5px;
-  background: black;
+  background: #111;
   color: white;
 }
+.columns {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-content: flex-start;
+}
+.column {
+  width: 400px;
+}
 
 /* modal */
 
@@ -28,6 +40,7 @@ html,body,input,button,textarea,.fileUploadButton {
   top: 0; left: 0;
   background: rgba(0,0,0,0.9);
   display: none;
+  z-index: 2;
 }
 .modal.visible {
   display: block;
@@ -41,6 +54,15 @@ html,body,input,button,textarea,.fileUploadButton {
   background: white;
   border-radius: 2px;
 }
+.close {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+  background: black;
+  color: white;
+  font-size: 72px;
+  cursor: pointer;
+}
 
 /* forms */
 
@@ -60,27 +82,30 @@ input {
   padding: 5px;
 }
 textarea {
-  width: 320px;
+  width: 324px;
   height: 160px;
   padding: 5px;
   border: 1px solid #888;
   margin-top: 10px;
 }
 
-/* file browser */
+/* browser */
 
-.folders, .folder {
+.window {
   background: white;
   margin: 5px;
   border: 1px solid #888;
-  max-width: 400px;
 }
+.actions span,
 .list .name {
   cursor: pointer;
   color: #08f;
   text-decoration: underline;
   min-width: 200px;
 }
+.actions span {
+  margin-left: 5px;
+}
 
 .list div {
   padding: 5px;
@@ -119,6 +144,8 @@ textarea {
   align-content: flex-end;
 }
 
+/* buttons */
+
 button,
 .fileUploadButton {
   position: relative;