1 files changed, 118 insertions, 24 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index c214d97..1f18bf5 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -3,10 +3,11 @@ html,body {
   padding: 0;
   width: 100%;
   height: 100%;
-  background: #fff;
+  background: #000;
   background-size: contain;
   background-position: bottom left;
   background-repeat: no-repeat;
+  overflow: hidden;
 }
 * {
   box-sizing: border-box;
@@ -21,6 +22,11 @@ a {
 a.disabled {
   color: #888;
 }
+a.selected {
+  color: #33f !important;
+  font-weight: bold;
+}
+
 /* main view */
 
 .header {
@@ -51,6 +57,8 @@ a.disabled {
 }
 .column {
   width: 400px;
+  height: 98vh;
+  overflow-y: scroll;
 }
 
 /* modal */
@@ -122,20 +130,54 @@ textarea {
 .actions span,
 .list .name {
   cursor: pointer;
-  color: #08f;
-  text-decoration: underline;
-  min-width: 200px;
 }
 .list .name a {
   display: block;
 }
-.selected .name {
-  color: #8ff;
-  font-weight: bold;
-}
 .list span {
   color: #888;
 }
+.list div {
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+}
+.list > div.selected {
+  background: #333 !important;
+  color: #fff !important;
+}
+.list > div:nth-child(2n+1) {
+  background: white;
+}
+.list > div:nth-child(2n+2) {
+  background: #f8f8f8;
+}
+.list > div:hover {
+  background: #eee;
+}
+.list > div > span {
+  display: inline-block;
+}
+
+/* folder lists */
+
+.folders.list {
+  height: 130px;
+  overflow-y: scroll;
+}
+/* file lists */
+
+.files .name {
+  width: 130px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.files .name a {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: hidden;
+  width: 100%;
+}
 .mime {
   width: 60px;
   text-align: left;
@@ -151,24 +193,63 @@ textarea {
 }
 .actions a {
 }
-.list div {
-  padding: 5px;
+
+/* tasks */
+
+.tasks.list > div {
+  flex-direction: column;
+  padding: 5px 0 0 5px;
 }
-.list > div.selected {
-  background: #333 !important;
-  color: #fff !important;
+.tasks.list > div:last-child {
+  padding-bottom: 5px;
 }
-.list > div:nth-child(2n+1) {
-  background: white;
+.tasks .row {
+  display: flex;
+  flex-direction: row;
 }
-.list > div:nth-child(2n+2) {
-  background: #f8f8f8;
+.tasks .date {
+  display: block;
+  width: 70px;
 }
-.list > div:hover {
-  background: #eee;
+.tasks .time {
+  width: 60px;
 }
-.list > div > span {
-  display: inline-block;
+.tasks .alpha {
+  display: block;
+  width: 140px;
+}
+.tasks .output.name {
+  width: 122px;
+}
+.tasks .output.completed.name {
+  width: 200px;
+  font-weight: bold;
+}
+.tasks .output.completed.name a {
+  color: #008;
+}
+.tasks .name {
+  padding-right: 5px;
+  width: 130px;
+  text-overflow: ellipsis;
+}
+.tasks .name a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.remove,
+.cancel {
+  padding: 2px;
+  color: #888;
+  background: #fff;
+  box-shadow: 0 1px 1px #888;
+}
+.desktop .remove:hover,
+.desktop .cancel:hover {
+  color: red;
+  cursor: pointer;
+  font-weight: bold;
+  background: black;
 }
 
 .heading {
@@ -194,6 +275,12 @@ textarea {
 .selected .actions a {
   color: #88f;
 }
+.heading .buttons button,
+.heading .buttons .fileUploadButton {
+  cursor: pointer !important;
+  background: #888;
+  color: white;
+}
 
 /* buttons */
 
@@ -203,15 +290,19 @@ button,
   overflow: hidden;
   padding: 5px;
   display: inline-block;
-  background: #888;
-  color: white;
+
+  color: #888;
+  background: #fff;
+  box-shadow: 0 1px 1px #888;
+
   border: 0;
   margin-left: 1px;
   cursor: pointer;
 }
 .desktop button:hover,
 .desktop .fileUploadButton:hover {
-  background: #666;
+  color: #fff;
+  background: #000;
 }
 button:first-child {
   margin: 0;
@@ -224,6 +315,9 @@ button:first-child {
   opacity: 0;
   cursor: pointer;
 }
+input[type=file] {
+  cursor: pointer;
+}
 .fileUploadButton span {
   cursor: pointer;
 }
\ No newline at end of file