client/src/sass/player/context-menu.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import './_player-variables';
   4
   5 $context-menu-width: 350px;
   6
   7 /* Sass for videojs-contextmenu-ui */
   8
   9 .video-js .vjs-contextmenu-ui-menu {
  10   position: absolute;
  11   background-color: rgba(0, 0, 0, 0.5);
  12   padding: 8px 0;
  13   border-radius: 4px;
  14   width: $context-menu-width;
  15
  16   .vjs-menu-content {
  17     opacity: $primary-foreground-opacity;
  18     color: pvar(--embedForegroundColor);
  19     font-size: $font-size !important;
  20     font-weight: $font-semibold;
  21   }
  22
  23   .vjs-menu-item {
  24     cursor: pointer;
  25     font-size: 1em;
  26     padding: 8px 16px;
  27     text-align: left;
  28     text-transform: none;
  29
  30     &:hover {
  31       background-color: rgba(255, 255, 255, 0.2);
  32     }
  33
  34     [class^="vjs-icon-"] {
  35       display: inline-flex;
  36       position: relative;
  37       top: 2px;
  38       cursor: pointer;
  39       width: 14px;
  40       height: 14px;
  41       background-color: white;
  42       mask-size: cover;
  43       margin-right: 0.8rem !important;
  44
  45       $icons: 'link-2', 'repeat', 'code', 'tick-white';
  46
  47       @each $icon in $icons {
  48         &[class$="-#{$icon}"] {
  49           mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
  50         }
  51       }
  52
  53       &[class$="-tick-white"] {
  54         float: right;
  55         margin: 0 !important;
  56       }
  57     }
  58   }
  59 }