inverse overlay, growl, fix next button when nav open

1 files changed, 26 insertions, 8 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 922bd01..a6b9a3b 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -14,7 +14,7 @@
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
 }
-.main-nav.hovering-nav {
+.viewer-nav.hovering-nav .main-nav {
   background: black;
   color: white;
 }
@@ -110,6 +110,24 @@
   transform: translateZ(0) translateY(-9rem);
 }
 
+/* Inverse progress bar */
+
+.nav-progress-percentage {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: calc(3rem - 1px);
+  pointer-events: none;
+  backdrop-filter: invert(0%);
+  transition: opacity 0.2s, backdrop-filter 0.2s, width 0.25s linear;
+  opacity: 0;
+}
+.nav-open .nav-progress-percentage,
+.viewer-nav.hovering-nav .nav-progress-percentage {
+  backdrop-filter: invert(100%);
+  opacity: 1;
+}
+
 /* Arrows */
 
 .arrow svg {
@@ -139,8 +157,8 @@
 }
 .viewer-nav.black .arrow path,
 .viewer-nav.black .arrow polygon,
-.viewer-nav .main-nav.hovering-nav .arrow path,
-.viewer-nav .main-nav.hovering-nav .arrow polygon,
+.viewer-nav.hovering-nav .main-nav .arrow path,
+.viewer-nav.hovering-nav .main-nav .arrow polygon,
 .nav-open .viewer-nav .arrow path,
 .nav-open .viewer-nav .arrow polygon,
 .checklist-open .viewer-nav .arrow path,
@@ -157,7 +175,7 @@
 .nav-player.playing {
   opacity: 0.0;
 }
-.main-nav.hovering-nav .nav-player.playing,
+.viewer-nav.hovering-nav .nav-player.playing,
 .nav-open .nav-player.playing {
   opacity: 1.0;
 }
@@ -177,11 +195,11 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.main-nav.hovering-nav .volume path,
+.viewer-nav.hovering-nav .volume path,
 .nav-open .volume path {
   fill: #fff;
 }
-.main-nav.hovering-nav .volume.muted path,
+.viewer-nav.hovering-nav .volume.muted path,
 .nav-open .volume.muted path {
   fill: #000;
   stroke: #fff;
@@ -198,8 +216,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.main-nav.hovering-nav .playToggle path,
-.main-nav.hovering-nav .playToggle polygon,
+.viewer-nav.hovering-nav .playToggle path,
+.viewer-nav.hovering-nav .playToggle polygon,
 .nav-open .playToggle path,
 .nav-open .playToggle polygon {
   fill: #fff;