X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fplayer%2Fplaylist.scss;h=f7e67ba16d2287da35e5574efbd2a9859b14f081;hb=62ddc31a9e4b92d7d27898ccfc363f68ab044139;hp=c242acba88078ce47da5497dcdf12a3578f10470;hpb=4572c3d0d92f5b1b79b34dbe2c7b6557a8a5b7e4;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index c242acba8..f7e67ba16 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -1,3 +1,7 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
 $playlist-menu-width: 350px;
 
 .vjs-playlist-menu {
@@ -5,9 +9,11 @@ $playlist-menu-width: 350px;
   right: 0;
   height: 100%;
   width: $playlist-menu-width;
-  background: rgba(0, 0, 0, 0.8);
+  // !important to prevent none background set on focus
+  background: rgba(0, 0, 0, 0.8) !important;
   z-index: 101;
   transition: right 0.2s;
+  overflow-y: scroll;
 
   // Hidden
   right: -$playlist-menu-width;
@@ -24,28 +30,28 @@ $playlist-menu-width: 350px;
     justify-content: space-between;
 
     .title {
+      @include ellipsis;
+
       font-size: 14px;
       margin-bottom: 5px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
 
     .channel {
+      @include ellipsis;
+
       font-size: 11px;
       color: #bfbfbf;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
 
     .cross {
+      mask-image: url('#{$assets-path}/images/feather/x.svg');
+      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+
       cursor: pointer;
       width: 20px;
       height: 20px;
-      mask-image: url('#{$assets-path}/images/feather/x.svg');
-      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
-      background-color: white;
+      background-color: #fff;
       mask-size: cover;
-      -webkit-mask-size: cover;
     }
   }
 }
@@ -80,18 +86,18 @@ $playlist-menu-width: 350px;
   right: 0;
   top: 0;
   z-index: 100;
-  padding: 1em;
+  padding: $dock-padding;
   cursor: pointer;
 }
 
 .vjs-playlist-icon {
-  width: 22px;
-  height: 22px;
   mask-image: url('#{$assets-path}/images/feather/list.svg');
   -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
-  background-color: white;
+
+  width: 22px;
+  height: 22px;
+  background-color: #fff;
   mask-size: cover;
-  -webkit-mask-size: cover;
   margin-bottom: 3px;
 }
 
@@ -106,9 +112,13 @@ $playlist-menu-width: 350px;
 }
 
 .vjs-playlist-menu-item {
-  cursor: pointer;
   display: flex;
   padding: 10px 0;
+  height: 60px;
+
+  &:not(.vjs-disabled) {
+    cursor: pointer;
+  }
 
   .item-position-block {
     position: relative;
@@ -116,12 +126,20 @@ $playlist-menu-width: 350px;
     align-items: center;
     justify-content: center;
     width: 30px;
+    flex-shrink: 0;
   }
 
-  .item-player {
-    display: none;
+  .item-unavailable {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
+  .item-player {
     @include play-icon(20px, 16px);
+
+    display: none;
   }
 
   &.vjs-selected {
@@ -136,7 +154,7 @@ $playlist-menu-width: 350px;
     }
   }
 
-  &:hover {
+  &:hover:not(.vjs-disabled) {
     background-color: rgba(150, 150, 150, 0.2);
   }
 
@@ -146,20 +164,27 @@ $playlist-menu-width: 350px;
   }
 
   .info-block {
-    margin-left: 10px;
+    margin: 0 10px;
+    min-width: 1px;
 
     .title {
+      @include ellipsis;
+
       font-size: 13px;
-      margin-bottom: 5px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      margin-bottom: 3px;
     }
 
-    .channel {
+    .channel,
+    .timestamps {
+      @include ellipsis;
+
       font-size: 11px;
       color: #bfbfbf;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    }
+
+    .timestamps {
+      font-size: 10px;
+      margin-top: 3px;
     }
   }
 }