refactor audioplayer

1 files changed, 34 insertions, 5 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index ee4b8d2..423ac77 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -8,6 +8,9 @@ html,body {
   background-position: bottom left;
   background-repeat: no-repeat;
 }
+* {
+  box-sizing: border-box;
+}
 html,body,input,button,textarea,.fileUploadButton {
   font-size: 12px;
   font-family: sans-serif;
@@ -18,9 +21,14 @@ html,body,input,button,textarea,.fileUploadButton {
 .header {
   width: 100%;
   padding: 5px;
-  background: #111;
+  background: #220211;
   color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-content: flex-start;
 }
+
 .columns {
   display: flex;
   flex-direction: row;
@@ -94,7 +102,7 @@ textarea {
 .window {
   background: white;
   margin: 5px;
-  border: 1px solid #888;
+  border: 1px solid #111;
 }
 .actions span,
 .list .name {
@@ -103,13 +111,31 @@ textarea {
   text-decoration: underline;
   min-width: 200px;
 }
-.actions span {
-  margin-left: 5px;
+.selected .name {
+  color: #8ff;
+  font-weight: bold;
+}
+.list span {
+  color: #888;
+}
+.duration {
+  display: inline-block;
+  width: 40px;
+  text-align: right;
+}
+.actions span, 
+.actions a {
+  padding-left: 5px;
+}
+.actions a {
 }
-
 .list div {
   padding: 5px;
 }
+.list > div.selected {
+  background: #333 !important;
+  color: #fff !important;
+}
 .list > div:nth-child(2n+1) {
   background: white;
 }
@@ -143,6 +169,9 @@ textarea {
   justify-content: flex-end;
   align-content: flex-end;
 }
+.selected .actions a {
+  color: #88f;
+}
 
 /* buttons */