Merge branch 'release/3.2.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / context-menu.scss

diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 6bc66af0cdde629642e9da4ed6402c1d777c5866..1653dd2c4ec8795fbbccb3afa482add4d0a42123 100644 (file)
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -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;
@@ -31,26 +32,27 @@ $context-menu-width: 350px;
       background-color: rgba(255, 255, 255, 0.2);
     }
 
-    [class^="vjs-icon-"] {
+    [class^='vjs-icon-'] {
+      $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
+
       display: inline-flex;
       position: relative;
       top: 2px;
       cursor: pointer;
       width: 14px;
       height: 14px;
-      background-color: white;
+      background-color: #fff;
       mask-size: cover;
       margin-right: 0.8rem !important;
 
-      $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
-
       @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');
         }
       }
 
-      &[class$="-tick-white"] {
+      &[class$='-tick-white'] {
         float: right;
         margin: 0 !important;
       }