youtube & player apps fixes

1 files changed, 93 insertions, 28 deletions

diff --git a/apps/Player/styles/_player.scss b/apps/Player/styles/_player.scss
index 8cf37cd..0d73b59 100644
--- a/apps/Player/styles/_player.scss
+++ b/apps/Player/styles/_player.scss
@@ -16,55 +16,120 @@
     }
   }
 
-  & > div:nth-of-type(2) {
-    width: auto;
-    min-width: 25em;
+
+  & > div:nth-of-type(2)  {
+    overflow-y: auto;
+  }
+
+  & > div:nth-of-type(2),
+  & > div:nth-of-type(3) {
+    width: 48%;
     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);
+
+    @media(max-width: 40em) {
+      width: 96%;
+    }
+
+    ul {
+      width: 100%;
+      padding-top: .5em;
+    }
 
     li {
-      padding: .5em 2em .5em .5em;
-      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      padding: 0 1em;
+
+      & > span:first-of-type {
+        margin: 0 .5em;
+      }
+
+      & > span:nth-of-type(2) {
+        flex-grow: 1;
+        overflow-x: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      & > span:nth-of-type(3) {
+        padding: .5em;
 
-      span {
-        padding-right: 1em;
+        svg {
+          transition: .3s opacity linear .3s, .3s color;
+
+          @media(min-width: 40em) {
+            visibility: hidden;
+            opacity: 0;
+          }
+        }
       }
 
+      & > span:nth-of-type(3) {
+        & > svg {
+          color: var(--color-error);
+        }
+
+
+        @media(hover: hover) {
+          &:hover > svg {
+            color: #f00;
+          }
+        }
+      }
+
+
       @media(hover: hover) {
         &:hover {
           background-color: var(--color-glass-alt);
         }
+
+        &:hover > span:nth-of-type(3) > svg {
+          visibility: visible;
+          opacity: 1;
+        }
       }
     }
+  }
+
+  & > div:nth-of-type(2) {
+    left: 0;
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+    border-right: 1px solid var(--color-window-border-bottom);
 
     & > 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);
-      }
     }
   }
 
-}
+  & > div:nth-of-type(3) {
+    right: 0;
+    border-top-left-radius: 1em;
+    border-bottom-left-radius: 1em;
+    border-left: 1px solid var(--color-window-border-bottom);
+
+    & > div:last-of-type {
+      left: -0.5em;
+    }
 
-.activeItem {
-  color: var(--color-text-alt);
-  font-weight: 600;
+    & > div:first-of-type {
+      overflow-y: auto;
+      padding: 1em;
+      height: 100%;
+    }
+
+    pre {
+      line-height: 1.25;
+      white-space: break-spaces;
+
+      &:first-of-type {
+        font-weight: 600;
+        padding-bottom: 1em;
+      }
+    }
+  }
 }