notion of selected annotation

1 files changed, 30 insertions, 3 deletions

diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 799693c..c2de8a1 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -109,6 +109,7 @@ canvas {
   position: absolute;
   left: 0.25rem;
   background: #448;
+  z-index: 10;
 }
 .annotationForm .row {
   justify-content: space-between;
@@ -119,16 +120,42 @@ canvas {
 .annotationIndex .annotation {
   position: absolute;
   left: 5px;
-  max-width: 450px;
+  max-width: 400px;
   padding: 0.25rem 0.375rem;
-  box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
+  box-shadow: 0px 0px 3px rgba(0,0,0,1.0);
+  border: 1px solid transparent;
   border-radius: 2px;
   font-size: 12px;
   cursor: pointer;
 }
-.annotation.sentence {
+.annotation.selected {
+  border-color: #bbf;
+  box-shadow: 0px 0px 4px rgba(0,0,0,1.0), 0px 0px 2px rgba(0,0,0,1.0);
+  z-index: 1;
+  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
+}
+.annotation.sentence.even {
   background-color: #83b;
 }
+.annotation.sentence.odd {
+  background-color: #638;
+}
 .annotation.header {
   background-color: #838;
 }
+.annotationIndex.condensed .annotation.sentence {
+  z-index: 0;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.annotationIndex.collapsed .annotation.header {
+  z-index: 1;
+}
+
+.annotationIndex.collapsed .annotation.sentence {
+  height: 1px; overflow: hidden; padding: 0; z-index: 0;
+}
+.annotationIndex.collapsed .annotation.header {
+  z-index: 1;
+}