aboutsummaryrefslogblamecommitdiffhomepage
path: root/client/src/sass/player/context-menu.scss
blob: 5548e2712d284615a98f4c463fe80d4c0e487f08 (plain) (tree)
1
2
3
4
5
6
7
8
9
10


                                






                                     
                                              

                     
                             
                                             


                                         
                                        







                                     
                      




                                                 
 


                                                               

                                               





                           
                             
                       
 


                                                                        
                                                                                


         
                               



                             
   
 
@use '_variables' as *;
@use '_mixins' as *;
@use './_player-variables' as *;

$context-menu-width: 350px;

/* Sass for videojs-contextmenu-ui */

.video-js .vjs-contextmenu-ui-menu {
  position: absolute;
  background-color: $primary-background-color;
  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;
    color: pvar(--embedForegroundColor);
    font-size: $font-size !important;
    font-weight: $font-semibold;
  }

  .vjs-menu-item {
    cursor: pointer;
    font-size: 1em;
    padding: 8px 16px;
    text-align: start;
    text-transform: none;

    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    [class^='vjs-icon-'] {
      $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';

      @include margin-right(0.8rem !important);

      display: inline-flex;
      position: relative;
      top: 2px;
      cursor: pointer;
      width: 14px;
      height: 14px;
      background-color: #fff;
      mask-size: cover;

      @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'] {
        float: right;
        margin: 0 !important;
      }
    }
  }
}