1 files changed, 93 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/viewer.nav.css b/animism-align/frontend/app/views/viewer/viewer.nav.css
index 809f2af..3797619 100644
--- a/animism-align/frontend/app/views/viewer/viewer.nav.css
+++ b/animism-align/frontend/app/views/viewer/viewer.nav.css
@@ -3,4 +3,97 @@
   bottom: 0;
   left: 0;
   width: 100%;
+  font-size: 18px;
+}
+
+/* The main nav row */
+
+.viewer-nav > .nav-row {
+  width: 100%;
+  padding: 0.25rem 0 0.25rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.viewer-nav > .nav-row > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32%;
+}
+.viewer-nav > .nav-row > div:nth-child(1) {
+  justify-content: flex-start;
+  align-items: center;
+}
+.viewer-nav > .nav-row > div:nth-child(2) {
+  justify-content: center;
+  align-items: center;
+}
+.viewer-nav > .nav-row > div:nth-child(3) {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* Arrows */
+
+.viewer-nav .arrow {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.viewer-nav .arrow.left,
+.viewer-nav .arrow.right {
+  width: 1.25rem;
+}
+.viewer-nav .arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Volume button */
+
+.volume {
+  cursor: pointer;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.volume path {
+  fill: #000;
+}
+.volume.muted path {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 0.5;
+}
+.nav-open .volume path {
+  fill: #fff;
+}
+.nav-open .volume.muted path {
+  fill: #000;
+  stroke: #fff;
+}
+
+/* Play button */
+
+.playToggle {
+  cursor: pointer;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.playToggle path,
+.playToggle polygon {
+  fill: #000;
+}
+.nav-open .playToggle path,
+.nav-open .playToggle polygon {
+  fill: #fff;
+}
+
+/* Player time */
+
+.playerTime {
+  margin-left: 0.5rem;
+  margin-right: 0.75rem;
 }