2 files changed, 18 insertions, 6 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index 36393df..d365c9c 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -144,6 +144,7 @@ class EfluxChrome extends Component {
         onMouseLeave={() => this.handleMouseLeave('close')}
         onClick={() => {
           actions.viewer.toggleFullscreenVisible(false)
+          actions.audio.pause()
           this.handleMouseLeave('close')
         }}
       >
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index dfbb093..1636b4d 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -161,22 +161,33 @@
 
 .nav-progress-percentage {
   position: absolute;
-  bottom: 0;
   left: 0;
-  height: 3rem;
+  height: 4px;
+  bottom: calc(3rem - 4px);
   pointer-events: none;
-  backdrop-filter: invert(0%);
-  transition: opacity 0.2s, backdrop-filter 0.2s, width 0.25s linear;
   opacity: 0;
+  transition: opacity 0.2s;
+  background: #fff;
 }
 .nav-open .nav-progress-percentage,
 .viewer-nav.hovering-nav .nav-progress-percentage {
-  backdrop-filter: invert(100%);
   opacity: 1;
 }
-.nav-open .nav-progress-percentage {
+
+.chrome .nav-progress-percentage {
+  bottom: 0;
+  height: 3rem;
+  backdrop-filter: invert(0%);
+  transition: opacity 0.2s, backdrop-filter 0.2s, width 0.25s linear;
+}
+.chrome .nav-open .nav-progress-percentage {
   height: calc(3rem - 1px);
 }
+.chrome .nav-open .nav-progress-percentage,
+.chrome .viewer-nav.hovering-nav .nav-progress-percentage {
+  backdrop-filter: invert(100%);
+}
+
 
 /* Arrows */