X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fplayer%2Fplaylist.scss;h=4419df2429a1887bbead5315e951de7ac6a629bb;hb=4158e67c8d7eb39712e598d3f409c6739eef5f0b;hp=d88baadebf98a7674a4adad9ffcd13745f80e523;hpb=1a8c2d74d1022cfddc4a12881a4c167ff3eedb3d;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index d88baadeb..4419df242 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;
@@ -38,14 +44,15 @@ $playlist-menu-width: 350px;
     }
 
     .cross {
-      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;
       mask-size: cover;
       -webkit-mask-size: cover;
+
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+      background-color: #fff;
     }
   }
 }
@@ -75,23 +82,24 @@ $playlist-menu-width: 350px;
 }
 
 .vjs-playlist-button {
-  font-size: 15px;
+  font-size: 16px;
   position: absolute;
   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;
   mask-size: cover;
   -webkit-mask-size: cover;
+
+  width: 22px;
+  height: 22px;
+  background-color: #fff;
   margin-bottom: 3px;
 }
 
@@ -131,9 +139,9 @@ $playlist-menu-width: 350px;
   }
 
   .item-player {
-    display: none;
-
     @include play-icon(20px, 16px);
+
+    display: none;
   }
 
   &.vjs-selected {