1 files changed, 110 insertions, 1 deletions
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index 389a55d..171bb38 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -29,6 +29,10 @@
   max-height: 100%;
   z-index: 20;
 }
+.sidebar.left {
+  right: auto;
+  left: 0;
+}
 .box {
   width: 15rem;
   padding: 0.5rem;
@@ -65,6 +69,9 @@
   justify-content: flex-start;
   align-items: center;
 }
+.box form label.checkbox.short span {
+  padding: 0.125rem 0;
+}
 .box form input[type="checkbox"] {
   margin-left: 0rem;
 }
@@ -100,6 +107,9 @@
   padding: 0.25rem;
   margin-right: 0;
 }
+.box .single .select {
+  width: 9.25rem;
+}
 .box .selects label {
   flex-direction: row;
   width: 6.5rem;
@@ -110,6 +120,18 @@
   padding: 0.25rem;
 }
 
+.box form .single label span {
+  min-width: auto;
+  width: 4.25rem;
+  padding: 0.25rem 0;
+}
+.box .single label {
+  flex-direction: row;
+  width: 100%;
+  margin-right: 0.5px;
+  min-width: auto;
+}
+
 .box form .pair label span {
   min-width: 3rem;
   padding: 0.25rem 0;
@@ -123,11 +145,45 @@
 .box .pair input[type=text] {
   width: 3rem;
 }
+
+.box form .single_text label span {
+  min-width: auto;
+  width: 6rem;
+  padding: 0.25rem 0;
+}
+.box .single_text input[type=text] {
+  width: 7rem;
+}
+.box .single_text label {
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  margin-right: 0.5px;
+  min-width: auto;
+}
+
 .box .position {
   font-size: smaller;
   margin-bottom: 0.25rem;
 }
 
+button.box_corner {
+  position: absolute;
+  top: 1.25rem; right: 1.25rem;
+  padding: 0.5rem;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  transform: scaleX(-1);
+}
+button.box_corner:hover {
+  color: #fff;
+  background: rgba(64,64,128,0.5);
+}
+.sidebar.left button.box_corner {
+  transform: scaleX(1);
+}
+
 .box .slider {
   display: flex;
   flex-direction: row;
@@ -146,6 +202,59 @@
   width: 5.5rem; 
 }
 
+/* Upload area */
+
+.box .uploadButton {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.uploadButton input[type=file] {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+.audioList .audioItem {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.125rem 0;
+}
+.audioList .playButton {
+  background: transparent;
+  border: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  opacity: 0.8;
+}
+.audioList .title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
+  flex: 1;
+}
+.audioList .title div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  width: 100%;
+}
+.audioList .audioItem:hover {
+  background: rgba(255,255,255,0.2);
+}
+.audioList .audioItem:hover .title {
+  color: #fff;
+}
+.audioList .audioItem:hover .playButton {
+  opacity: 1.0;
+}
+
 /* Graph handles */
 
 .handle {
@@ -156,7 +265,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 8rem;
+  max-width: 12rem;
   user-select: none;
   cursor: arrow;
 }