1 files changed, 21 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 b28996a..79dc11b 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -11,7 +11,7 @@
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
 }
-.sections-open .main-nav {
+.nav-open .main-nav {
   transform: translateZ(0) translateY(-22rem);
   border-top: 1px solid #fff;
   background: black;
@@ -85,11 +85,25 @@
 .viewer-nav .arrow polygon {
   fill: #000;
 }
-.sections-open .viewer-nav .arrow path,
-.sections-open .viewer-nav .arrow polygon {
+.nav-open .viewer-nav .arrow path,
+.nav-open .viewer-nav .arrow polygon {
   fill: #fff;
 }
 
+/* Player */
+
+.nav-player {
+  transition: opacity 0.2s;
+  opacity: 1.0;
+}
+.nav-player.playing {
+  opacity: 0.0;
+}
+.main-nav:hover .nav-player.playing,
+.nav-open .nav-player.playing {
+  opacity: 1.0;
+}
+
 /* Volume button */
 
 .volume {
@@ -105,10 +119,10 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.sections-open .volume path {
+.nav-open .volume path {
   fill: #fff;
 }
-.sections-open .volume.muted path {
+.nav-open .volume.muted path {
   fill: #000;
   stroke: #fff;
 }
@@ -124,8 +138,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.sections-open .playToggle path,
-.sections-open .playToggle polygon {
+.nav-open .playToggle path,
+.nav-open .playToggle polygon {
   fill: #fff;
 }