1 files changed, 113 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
new file mode 100644
index 0000000..3689593
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -0,0 +1,113 @@
+.viewer-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  font-size: 18px;
+}
+
+/* The main nav row */
+
+.viewer-nav > .nav-row {
+  width: 100%;
+  height: 3rem;
+  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;
+}
+
+.viewer-nav .link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;  
+  cursor: pointer;
+}
+
+.transcript-link {
+  padding-right: 1.25rem;
+}
+
+/* Arrows */
+
+.viewer-nav .arrow {
+  display: inline-block;
+  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;
+}