3 files changed, 42 insertions, 7 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;
+  }
 }
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index f932648..62830bc 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
@@ -16,9 +15,11 @@ class NavParent extends Component {
           <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleSection('nav')}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
-              {ROMAN_NUMERALS[0]}
-              {'. '}
-              {'Introduction'}
+              <span>
+                {ROMAN_NUMERALS[0]}
+                {'. '}
+                {'Introduction'}
+              </span>
             </span>
           </div>
           <NavPlayer />
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index a39cb16..da3ecbf 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -76,7 +76,9 @@ export const PlayButton = ({ playing }) => {
 export const PlayerTime = ({ play_ts, duration }) => (
   <span className='playerTime'>
     {timestamp(play_ts)}
+    <span className='playerDuration'>
     {' / '}
     {timestamp(duration)}
+    </span>
   </span>
 )