client/src/sass/player/upnext.scss

   1 $browser-context: 16;
   2
   3 @function em($pixels, $context: $browser-context) {
   4   @return #{$pixels/$context}em;
   5 }
   6
   7 @mixin transition($string: $transition--default) {
   8   transition: $string;
   9 }
  10
  11 .video-js {
  12
  13   .vjs-upnext-content {
  14     @include transition(opacity 0.1s);
  15
  16     font-size: 1.8em;
  17     pointer-events: auto;
  18     position: absolute;
  19     top: 0;
  20     bottom: 0;
  21     background: rgba(0, 0, 0, 0.6);
  22     width: 100%;
  23   }
  24
  25   .vjs-upnext-top {
  26     width: 100%;
  27     position: absolute;
  28     margin-left: auto;
  29     margin-right: auto;
  30     bottom: 50%;
  31     margin-bottom: 60px;
  32   }
  33
  34   .vjs-upnext-bottom {
  35     width: 100%;
  36     position: absolute;
  37     margin-left: auto;
  38     margin-right: auto;
  39     top: 50%;
  40     margin-top: 52px;
  41   }
  42
  43   .vjs-upnext-suspended,
  44   .vjs-upnext-cancel {
  45     display: block;
  46     float: none;
  47     text-align: center;
  48   }
  49
  50   .vjs-upnext-suspended {
  51     font-size: 50%;
  52     margin-top: 1rem;
  53   }
  54
  55   .vjs-upnext-headtext {
  56     display: block;
  57     font-size: 14px;
  58     text-align: center;
  59     padding-bottom: 7px;
  60   }
  61
  62   .vjs-upnext-title {
  63     display: block;
  64     padding: 10px 10px 2px;
  65     text-align: center;
  66     font-size: 22px;
  67     font-weight: 600;
  68     overflow: hidden;
  69     white-space: nowrap;
  70     word-wrap: normal;
  71     text-overflow: ellipsis;
  72   }
  73
  74   .vjs-upnext-cancel-button {
  75     cursor: pointer;
  76     display: inline-block;
  77     float: none;
  78     padding: 10px !important;
  79     font-size: 16px !important;
  80     border: 0;
  81   }
  82
  83   .vjs-upnext-cancel-button,
  84   .vjs-upnext-cancel-button:focus {
  85     outline: 0;
  86   }
  87
  88   .vjs-upnext-cancel-button:hover {
  89     background-color: rgba(255, 255, 255, 0.25);
  90     border-radius: 2px;
  91   }
  92
  93   &.vjs-no-flex .vjs-upnext-content {
  94     padding-bottom: 1em;
  95   }
  96
  97   .vjs-upnext-autoplay-icon {
  98     @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
  99
 100     position: absolute;
 101     top: 50%;
 102     left: 50%;
 103     width: 98px;
 104     height: 98px;
 105     margin: -49px 0 0 -49px;
 106     cursor: pointer;
 107   }
 108
 109 }
 110
 111 .video-js.vjs-upnext--showing {
 112   .vjs-control-bar {
 113     z-index: 1;
 114   }
 115 }