1 files changed, 35 insertions, 3 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 69afa29..a6c74d5 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -11,6 +11,11 @@
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
 }
+.main-nav:hover {
+  background: black;
+  color: white;
+}
+
 .nav-open .main-nav {
   transform: translateZ(0) translateY(-22rem);
   border-top: 1px solid #fff;
@@ -57,9 +62,16 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  max-width: 100%;
+  white-space: nowrap;
   align-items: center;  
   cursor: pointer;
 }
+.viewer-nav .link span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .transcript-link {
   padding-right: 1.25rem;
@@ -67,6 +79,11 @@
 
 /* Arrows */
 
+.arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
 .viewer-nav .arrow {
   display: inline-block;
   width: 2.5rem;
@@ -87,10 +104,10 @@
 .viewer-nav .arrow polygon {
   fill: #000;
 }
+.viewer-nav .main-nav:hover .arrow path,
+.viewer-nav .main-nav:hover .arrow polygon,
 .nav-open .viewer-nav .arrow path,
-.nav-open .viewer-nav .arrow polygon {
-  fill: #fff;
-}
+.nav-open .viewer-nav .arrow polygon,
 .checklist-open .viewer-nav .arrow path,
 .checklist-open .viewer-nav .arrow polygon {
   fill: #fff;
@@ -125,9 +142,11 @@
   stroke: #000;
   stroke-width: 0.5;
 }
+.main-nav:hover .volume path,
 .nav-open .volume path {
   fill: #fff;
 }
+.main-nav:hover .volume.muted path,
 .nav-open .volume.muted path {
   fill: #000;
   stroke: #fff;
@@ -144,6 +163,8 @@
 .playToggle polygon {
   fill: #000;
 }
+.main-nav:hover .playToggle path,
+.main-nav:hover .playToggle polygon,
 .nav-open .playToggle path,
 .nav-open .playToggle polygon {
   fill: #fff;
@@ -154,4 +175,15 @@
 .playerTime {
   margin-left: 0.5rem;
   margin-right: 0.75rem;
+  cursor: default;
+}
+@media only screen and (max-width: 950px) {
+  .playerDuration {
+    display: none;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .transcript-open .playerDuration {
+    display: none;
+  }
 }