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 .video-js {
   8
   9   .vjs-upnext-content {
  10     transition: opacity 0.1s;
  11
  12     font-size: 1.8em;
  13     pointer-events: auto;
  14     position: absolute;
  15     top: 0;
  16     bottom: 0;
  17     background: rgba(0, 0, 0, 0.6);
  18     width: 100%;
  19   }
  20
  21   .vjs-upnext-top {
  22     margin: 0 auto;
  23     width: 100%;
  24     position: absolute;
  25     bottom: 50%;
  26     margin-bottom: 60px;
  27   }
  28
  29   .vjs-upnext-bottom {
  30     margin: 0 auto;
  31     width: 100%;
  32     position: absolute;
  33     top: 50%;
  34     margin-top: 52px;
  35   }
  36
  37   .vjs-upnext-suspended,
  38   .vjs-upnext-cancel {
  39     display: block;
  40     float: none;
  41     text-align: center;
  42   }
  43
  44   .vjs-upnext-suspended {
  45     font-size: 50%;
  46     margin-top: 1rem;
  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: 0;
  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     transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1);
  93
  94     position: absolute;
  95     top: 50%;
  96     left: 50%;
  97     width: 98px;
  98     height: 98px;
  99     margin: -49px 0 0 -49px;
 100     cursor: pointer;
 101   }
 102
 103 }
 104
 105 .video-js.vjs-upnext--showing {
 106   .vjs-control-bar {
 107     z-index: 1;
 108   }
 109 }