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