X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fplayer%2Fcontext-menu.scss;h=fef0d30c0fcac3a7fac0f49d662360b6fb8ca755;hb=4158e67c8d7eb39712e598d3f409c6739eef5f0b;hp=45cee3e7759d00aa915f6a435f866026386d0645;hpb=c27463a603186b623500b03c6a56b330a6568350;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 45cee3e77..fef0d30c0 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,10 +1,10 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $context-menu-width: 350px;
 
-/* Sass for videojs-contextmenu-ui */
+/* Sass for @peertube/videojs-contextmenu */
 
 .video-js .vjs-contextmenu-ui-menu {
   position: absolute;
@@ -12,6 +12,7 @@ $context-menu-width: 350px;
   padding: 8px 0;
   border-radius: 4px;
   width: $context-menu-width;
+  z-index: 105; // On top of the progress bar
 
   .vjs-menu-content {
     opacity: $primary-foreground-opacity;
@@ -24,7 +25,7 @@ $context-menu-width: 350px;
     cursor: pointer;
     font-size: 1em;
     padding: 8px 16px;
-    text-align: left;
+    text-align: start;
     text-transform: none;
 
     &:hover {
@@ -34,6 +35,8 @@ $context-menu-width: 350px;
     [class^='vjs-icon-'] {
       $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
 
+      @include margin-right(0.8rem !important);
+
       display: inline-flex;
       position: relative;
       top: 2px;
@@ -41,12 +44,14 @@ $context-menu-width: 350px;
       width: 14px;
       height: 14px;
       background-color: #fff;
+
+      -webkit-mask-size: cover;
       mask-size: cover;
-      margin-right: 0.8rem !important;
 
       @each $icon in $icons {
         &[class$="-#{$icon}"] {
           mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
         }
       }