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

   1 @use '_variables';
   2 @use '_mixins';
   3 @use './_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: $primary-background-color;
  12   padding: 8px 0;
  13   border-radius: 4px;
  14   width: $context-menu-width;
  15   z-index: 105; // On top of the progress bar
  16
  17   .vjs-menu-content {
  18     opacity: $primary-foreground-opacity;
  19     color: pvar(--embedForegroundColor);
  20     font-size: $font-size !important;
  21     font-weight: $font-semibold;
  22   }
  23
  24   .vjs-menu-item {
  25     cursor: pointer;
  26     font-size: 1em;
  27     padding: 8px 16px;
  28     text-align: start;
  29     text-transform: none;
  30
  31     &:hover {
  32       background-color: rgba(255, 255, 255, 0.2);
  33     }
  34
  35     [class^='vjs-icon-'] {
  36       $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
  37
  38       @include margin-right(0.8rem !important);
  39
  40       display: inline-flex;
  41       position: relative;
  42       top: 2px;
  43       cursor: pointer;
  44       width: 14px;
  45       height: 14px;
  46       background-color: #fff;
  47       mask-size: cover;
  48
  49       @each $icon in $icons {
  50         &[class$="-#{$icon}"] {
  51           mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
  52           -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
  53         }
  54       }
  55
  56       &[class$='-tick-white'] {
  57         float: right;
  58         margin: 0 !important;
  59       }
  60     }
  61   }
  62 }