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     font-size: 1.8em;
  15     pointer-events: auto;
  16     position: absolute;
  17     top: 0;
  18     bottom: 0;
  19     background: rgba(0,0,0,0.6);
  20     width: 100%;
  21
  22     @include transition(opacity 0.1s);
  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-cancel {
  44     display: block;
  45     float: none;
  46     text-align: center;
  47   }
  48
  49   .vjs-upnext-headtext {
  50     display: block;
  51     font-size: 14px;
  52     text-align: center;
  53     padding-bottom: 7px;
  54   }
  55
  56   .vjs-upnext-title {
  57     display: block;
  58     padding: 10px 10px 2px;
  59     text-align: center;
  60     font-size: 22px;
  61     font-weight: 600;
  62     overflow: hidden;
  63     white-space: nowrap;
  64     word-wrap: normal;
  65     text-overflow: ellipsis;
  66   }
  67
  68   .vjs-upnext-cancel-button {
  69     cursor: pointer;
  70     display: inline-block;
  71     float: none;
  72     padding: 10px !important;
  73     font-size: 16px !important;
  74     border: none;
  75   }
  76
  77   .vjs-upnext-cancel-button,
  78   .vjs-upnext-cancel-button:focus {
  79     outline: 0;
  80   }
  81
  82   .vjs-upnext-cancel-button:hover {
  83     background-color: rgba(255,255,255,0.25);
  84     border-radius: 2px;
  85   }
  86
  87   &.vjs-no-flex .vjs-upnext-content {
  88     padding-bottom: 1em;
  89   }
  90
  91   .vjs-upnext-autoplay-icon {
  92     position: absolute;
  93     top: 50%;
  94     left: 50%;
  95     width: 98px;
  96     height: 98px;
  97     margin: -49px 0 0 -49px;
  98     transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1);
  99     cursor: pointer;
 100   }
 101
 102 }
 103
 104 .video-js.vjs-upnext--showing {
 105   .vjs-control-bar {
 106     z-index: 1;
 107   }
 108 }