nav moon logic

1 files changed, 12 insertions, 9 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index de76368..2c17621 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:hover {
+.main-nav.hovering-nav {
   background: black;
   color: white;
 }
@@ -52,7 +52,10 @@
   justify-content: flex-start;
   align-items: center;
 }
-.viewer-nav > .nav-row > div:nth-child(2) {
+.viewer-nav > .nav-row > div:nth-child(2),
+.viewer-nav > .nav-row > div:nth-child(2) > div {
+  display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
 }
@@ -136,8 +139,8 @@
 }
 .viewer-nav.black .arrow path,
 .viewer-nav.black .arrow polygon,
-.viewer-nav .main-nav:hover .arrow path,
-.viewer-nav .main-nav:hover .arrow polygon,
+.viewer-nav .main-nav.hovering-nav .arrow path,
+.viewer-nav .main-nav.hovering-nav .arrow polygon,
 .nav-open .viewer-nav .arrow path,
 .nav-open .viewer-nav .arrow polygon,
 .checklist-open .viewer-nav .arrow path,
@@ -154,7 +157,7 @@
 .nav-player.playing {
   opacity: 0.0;
 }
-.main-nav:hover .nav-player.playing,
+.main-nav.hovering-nav .nav-player.playing,
 .nav-open .nav-player.playing {
   opacity: 1.0;
 }
@@ -174,11 +177,11 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.main-nav:hover .volume path,
+.main-nav.hovering-nav .volume path,
 .nav-open .volume path {
   fill: #fff;
 }
-.main-nav:hover .volume.muted path,
+.main-nav.hovering-nav .volume.muted path,
 .nav-open .volume.muted path {
   fill: #000;
   stroke: #fff;
@@ -195,8 +198,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.main-nav:hover .playToggle path,
-.main-nav:hover .playToggle polygon,
+.main-nav.hovering-nav .playToggle path,
+.main-nav.hovering-nav .playToggle polygon,
 .nav-open .playToggle path,
 .nav-open .playToggle polygon {
   fill: #fff;