adding timeline component

1 files changed, 45 insertions, 4 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index cd992f7..63ba51e 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -689,6 +689,14 @@ input.small {
   max-width: 80vw;
   max-height: 80vh;
 }
+.fileViewer span {
+  display: block;
+  background: rgba(255,255,255,0.8);
+  padding: 3px;
+  border: 1px solid rgba(0,0,0,0.5);
+  width: 100%;
+  height: 100%;
+}
 
 /* sequence editor timeline */
 
@@ -699,15 +707,48 @@ input.small {
   background: #fff;
   position: relative;
   margin-bottom: 5px;
-  height: 50px;
+  height: 40px;
 }
 .timeline .selection {
   position: absolute;
-  border: 1px solid #000;
-  border-top: 0;
-  border-left: 0;
+  top: 0;
+  height: 100%;
+  border: 1px solid #bbb;
   background: #eee;
 }
+.timeline .cursor {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background: black;
+}
+.frame {
+  display: inline-block;
+  background: rgba(255,255,255,0.8);
+  border: 1px solid #fff;
+  padding: 4px;
+  width: 212px;
+  height: 130px;
+  margin-right: 4px;
+  margin-bottom: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+.frame .fileViewer {
+  width: 200px;
+  height: 100px;
+  margin: 0 0 4px;
+}
+.frame .fileViewer img {
+  width: 200px;
+  height: 100px;
+}
+.sequenceEditor .form {
+  display: inline-block;
+  padding: 4px;
+  width: 300px;
+  height: 130px;
+}
 
 /* system */
 .screen {