1 files changed, 70 insertions, 0 deletions
diff --git a/apps/Player/styles/_player.scss b/apps/Player/styles/_player.scss
new file mode 100644
index 0000000..8cf37cd
--- /dev/null
+++ b/apps/Player/styles/_player.scss
@@ -0,0 +1,70 @@
+.player {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-color: #000;
+
+  & > div:nth-of-type(1) {
+    height: calc(100% - 2em);
+    width: 100%;
+    padding-bottom: .5em;
+
+    video {
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+
+  & > div:nth-of-type(2) {
+    width: auto;
+    min-width: 25em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 2em;
+    background-color: var(--color-glass);
+    transition: .3s transform;
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+    border-right: 1px solid var(--color-window-border-bottom);
+
+    li {
+      padding: .5em 2em .5em .5em;
+      white-space: nowrap;
+
+      span {
+        padding-right: 1em;
+      }
+
+      @media(hover: hover) {
+        &:hover {
+          background-color: var(--color-glass-alt);
+        }
+      }
+    }
+
+    & > div {
+      position: absolute;
+      top: 50%;
+      right: -0.5em;
+      padding: 2em .5em;
+      border-radius: .5em;
+      transform: translateY(-50%);
+      background-color: var(--color-window-menu-alt);
+      color: var(--color-text-alt);
+      border: 1px solid var(--color-window-border-bottom);
+      transition: .3s background;
+
+      &:hover {
+        background-color: var(--color-window-menu);
+      }
+    }
+  }
+
+}
+
+.activeItem {
+  color: var(--color-text-alt);
+  font-weight: 600;
+}