[Summary view] [Print] [Text view]

   1  /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
   2  Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
   3  .mejs__offscreen {
   4      border: 0;
   5      clip: rect( 1px, 1px, 1px, 1px );
   6      -webkit-clip-path: inset( 50% );
   7              clip-path: inset( 50% );
   8      height: 1px;
   9      margin: -1px;
  10      overflow: hidden;
  11      padding: 0;
  12      position: absolute;
  13      width: 1px;
  14      word-wrap: normal;
  15  }
  16  
  17  .mejs__container {
  18      background: #000;
  19      box-sizing: border-box;
  20      font-family: 'Helvetica', Arial, serif;
  21      position: relative;
  22      text-align: left;
  23      text-indent: 0;
  24      vertical-align: top;
  25  }
  26  
  27  .mejs__container * {
  28      box-sizing: border-box;
  29  }
  30  
  31  /* Hide native play button and control bar from iOS to favor plugin button */
  32  .mejs__container video::-webkit-media-controls,
  33  .mejs__container video::-webkit-media-controls-panel,
  34  .mejs__container video::-webkit-media-controls-panel-container,
  35  .mejs__container video::-webkit-media-controls-start-playback-button {
  36      -webkit-appearance: none;
  37      display: none !important;
  38  }
  39  
  40  .mejs__fill-container,
  41  .mejs__fill-container .mejs__container {
  42      height: 100%;
  43      width: 100%;
  44  }
  45  
  46  .mejs__fill-container {
  47      background: transparent;
  48      margin: 0 auto;
  49      overflow: hidden;
  50      position: relative;
  51  }
  52  
  53  .mejs__container:focus {
  54      outline: none;
  55  }
  56  
  57  .mejs__iframe-overlay {
  58      height: 100%;
  59      position: absolute;
  60      width: 100%;
  61  }
  62  
  63  .mejs__embed,
  64  .mejs__embed body {
  65      background: #000;
  66      height: 100%;
  67      margin: 0;
  68      overflow: hidden;
  69      padding: 0;
  70      width: 100%;
  71  }
  72  
  73  .mejs__fullscreen {
  74      overflow: hidden !important;
  75  }
  76  
  77  .mejs__container-fullscreen {
  78      bottom: 0;
  79      left: 0;
  80      overflow: hidden;
  81      position: fixed;
  82      right: 0;
  83      top: 0;
  84      z-index: 1000;
  85  }
  86  
  87  /* Start: LAYERS */
  88  .mejs__background {
  89      left: 0;
  90      position: absolute;
  91      top: 0;
  92  }
  93  
  94  .mejs__mediaelement {
  95      height: 100%;
  96      left: 0;
  97      position: absolute;
  98      top: 0;
  99      width: 100%;
 100      z-index: 0;
 101  }
 102  
 103  .mejs__poster {
 104      background-position: 50% 50%;
 105      background-repeat: no-repeat;
 106      background-size: cover;
 107      left: 0;
 108      position: absolute;
 109      top: 0;
 110      z-index: 1;
 111  }
 112  
 113  :root .mejs__poster-img {
 114      display: none;
 115  }
 116  
 117  .mejs__poster-img {
 118      border: 0;
 119      padding: 0;
 120  }
 121  
 122  .mejs__overlay {
 123      -webkit-box-align: center;
 124      -webkit-align-items: center;
 125          -ms-flex-align: center;
 126              align-items: center;
 127      display: -webkit-box;
 128      display: -webkit-flex;
 129      display: -ms-flexbox;
 130      display: flex;
 131      -webkit-box-pack: center;
 132      -webkit-justify-content: center;
 133          -ms-flex-pack: center;
 134              justify-content: center;
 135      left: 0;
 136      position: absolute;
 137      top: 0;
 138  }
 139  
 140  .mejs__layer {
 141      z-index: 1;
 142  }
 143  
 144  .mejs__overlay-play {
 145      cursor: pointer;
 146  }
 147  
 148  .mejs__overlay-button {
 149      background: transparent;
 150      border: 0;
 151  }
 152  
 153  .mejs__overlay:hover .mejs__overlay-button svg {
 154      opacity: 1;
 155  }
 156  
 157  .mejs__overlay-button svg {
 158      opacity: 0.75;
 159  }
 160  
 161  .mejs__overlay-button:focus svg {
 162      opacity: 1;
 163  }
 164  
 165  .mejs__overlay-button,
 166  .mejs__overlay-button svg {
 167      height: 5rem;
 168      width: 5rem;
 169  }
 170  
 171  .mejs__overlay-loading,
 172  .mejs__overlay-loading svg {
 173      height: 5rem;
 174      width: 5rem;
 175  }
 176  
 177  .mejs__overlay-loading-bg-img {
 178      -webkit-animation: mejs__loading-spinner 1s linear infinite;
 179              animation: mejs__loading-spinner 1s linear infinite;
 180      display: block;
 181      height: 5rem;
 182      width: 5rem;
 183      z-index: 1;
 184  }
 185  
 186  @-webkit-keyframes mejs__loading-spinner {
 187      100% {
 188          -webkit-transform: rotate(360deg);
 189                  transform: rotate(360deg);
 190      }
 191  }
 192  
 193  @keyframes mejs__loading-spinner {
 194      100% {
 195          -webkit-transform: rotate(360deg);
 196                  transform: rotate(360deg);
 197      }
 198  }
 199  
 200  /* End: LAYERS */
 201  
 202  /* Start: CONTROL BAR */
 203  .mejs__controls {
 204      bottom: 0;
 205      display: -webkit-box;
 206      display: -webkit-flex;
 207      display: -ms-flexbox;
 208      display: flex;
 209      height: 2.5rem;
 210      left: 0;
 211      list-style-type: none;
 212      margin: 0;
 213      padding: 0 0.625rem;
 214      position: absolute;
 215      width: 100%;
 216      z-index: 3;
 217  }
 218  
 219  .mejs__controls:not([style*='display: none']) {
 220      background: rgba(255, 0, 0, 0.7);
 221      background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
 222      background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
 223  }
 224  
 225  .mejs__button,
 226  .mejs__time,
 227  .mejs__time-rail {
 228      font-size: 0.625rem;
 229      height: 2.5rem;
 230      line-height: 0.625rem;
 231      margin: 0;
 232      width: 2rem;
 233  }
 234  
 235  .mejs__button > button {
 236      background-color: transparent;
 237      border: 0;
 238      color: #fff;
 239      cursor: pointer;
 240      display: block;
 241      font-size: 0;
 242      height: 1.125rem;
 243      line-height: 0;
 244      margin: 0.625rem 0.375rem;
 245      overflow: hidden;
 246      padding: 0;
 247      position: absolute;
 248      text-decoration: none;
 249      width: 1.125rem;
 250  }
 251  
 252  .mejs__button svg {
 253      fill: currentColor;
 254      height: 1.125rem;
 255      width: 1.125rem;
 256  }
 257  
 258  /* :focus for accessibility */
 259  .mejs__button > button:focus {
 260      outline: dotted 0.125rem #fff;
 261  }
 262  
 263  .mejs__container-keyboard-inactive a,
 264  .mejs__container-keyboard-inactive a:focus,
 265  .mejs__container-keyboard-inactive button,
 266  .mejs__container-keyboard-inactive button:focus,
 267  .mejs__container-keyboard-inactive [role=slider],
 268  .mejs__container-keyboard-inactive [role=slider]:focus {
 269      outline: 0;
 270  }
 271  
 272  /* End: CONTROL BAR */
 273  
 274  /* Start: Play (Play / Pause / Replay) */
 275  .mejs__playpause-button svg {
 276      display: none;
 277  }
 278  
 279  .mejs__play svg.mejs__icon-play {
 280      display: block;
 281  }
 282  
 283  .mejs__pause svg.mejs__icon-pause {
 284      display: block;
 285  }
 286  
 287  .mejs__replay svg.mejs__icon-replay {
 288      display: block;
 289  }
 290  /* End: Play (Play / Pause / Replay) */
 291  
 292  /* Start: Fullscreen (Fullscreen / Unfullscreen) */
 293  .mejs__fullscreen-button svg.mejs__icon-unfullscreen {
 294      display: none;
 295  }
 296  .mejs__fullscreen svg.mejs__icon-fullscreen {
 297      display: block;
 298  }
 299  
 300  .mejs__fullscreen svg.mejs__icon-unfullscreen {
 301      display: none;
 302  }
 303  
 304  .mejs__unfullscreen svg.mejs__icon-unfullscreen {
 305      display: block;
 306  }
 307  
 308  .mejs__unfullscreen svg.mejs__icon-fullscreen {
 309      display: none;
 310  }
 311  /* End: Fullscreen (Fullscreen / Unfullscreen) */
 312  
 313  /* Start: Time (Current / Duration) */
 314  .mejs__time {
 315      box-sizing: content-box;
 316      color: #fff;
 317      font-size: 0.6875rem;
 318      font-weight: bold;
 319      height: 1.5rem;
 320      overflow: hidden;
 321      padding: 1rem 0.375rem 0;
 322      text-align: center;
 323      width: auto;
 324  }
 325  /* End: Time (Current / Duration) */
 326  
 327  /* Start: Progress Bar */
 328  .mejs__time-rail {
 329      direction: ltr;
 330      -webkit-box-flex: 1;
 331      -webkit-flex-grow: 1;
 332          -ms-flex-positive: 1;
 333              flex-grow: 1;
 334      height: 2.5rem;
 335      margin: 0 0.625rem;
 336      padding-top: 0.625rem;
 337      position: relative;
 338  }
 339  
 340  .mejs__time-total,
 341  .mejs__time-buffering,
 342  .mejs__time-loaded,
 343  .mejs__time-current,
 344  .mejs__time-float,
 345  .mejs__time-hovered,
 346  .mejs__time-float-current,
 347  .mejs__time-float-corner,
 348  .mejs__time-marker {
 349      border-radius: 0.125rem;
 350      cursor: pointer;
 351      display: block;
 352      height: 0.625rem;
 353      position: absolute;
 354  }
 355  
 356  .mejs__time-total {
 357      background: rgba(255, 255, 255, 0.3);
 358      margin: 0.3125rem 0 0;
 359      width: 100%;
 360  }
 361  
 362  .mejs__time-buffering {
 363      -webkit-animation: buffering-stripes 2s linear infinite;
 364              animation: buffering-stripes 2s linear infinite;
 365      background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
 366      background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
 367      background-size: 0.9375rem 0.9375rem;
 368      width: 100%;
 369  }
 370  
 371  @-webkit-keyframes buffering-stripes {
 372      from {
 373          background-position: 0 0;
 374      }
 375      to {
 376          background-position: 1.875rem 0;
 377      }
 378  }
 379  
 380  @keyframes buffering-stripes {
 381      from {
 382          background-position: 0 0;
 383      }
 384      to {
 385          background-position: 1.875rem 0;
 386      }
 387  }
 388  
 389  .mejs__time-loaded {
 390      background: rgba(255, 255, 255, 0.3);
 391  }
 392  
 393  .mejs__time-current,
 394  .mejs__time-handle-content {
 395      background: rgba(255, 255, 255, 0.9);
 396  }
 397  
 398  .mejs__time-hovered {
 399      background: rgba(255, 255, 255, 0.5);
 400      z-index: 10;
 401  }
 402  
 403  .mejs__time-hovered.negative {
 404      background: rgba(0, 0, 0, 0.2);
 405  }
 406  
 407  .mejs__time-current,
 408  .mejs__time-buffering,
 409  .mejs__time-loaded,
 410  .mejs__time-hovered {
 411      left: 0;
 412      -webkit-transform: scaleX(0);
 413          -ms-transform: scaleX(0);
 414              transform: scaleX(0);
 415      -webkit-transform-origin: 0 0;
 416          -ms-transform-origin: 0 0;
 417              transform-origin: 0 0;
 418      -webkit-transition: 0.15s ease-in all;
 419      transition: 0.15s ease-in all;
 420      width: 100%;
 421  }
 422  
 423  .mejs__time-buffering {
 424      -webkit-transform: scaleX(1);
 425          -ms-transform: scaleX(1);
 426              transform: scaleX(1);
 427  }
 428  
 429  .mejs__time-hovered {
 430      -webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
 431      transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
 432  }
 433  
 434  .mejs__time-hovered.no-hover {
 435      -webkit-transform: scaleX(0) !important;
 436          -ms-transform: scaleX(0) !important;
 437              transform: scaleX(0) !important;
 438  }
 439  
 440  .mejs__time-handle,
 441  .mejs__time-handle-content {
 442      border: 0.25rem solid transparent;
 443      cursor: pointer;
 444      left: 0;
 445      position: absolute;
 446      -webkit-transform: translateX(0);
 447          -ms-transform: translateX(0);
 448              transform: translateX(0);
 449      z-index: 11;
 450  }
 451  
 452  .mejs__time-handle-content {
 453      border: 0.25rem solid rgba(255, 255, 255, 0.9);
 454      border-radius: 50%;
 455      height: 0.625rem;
 456      left: -0.4375rem;
 457      top: -0.25rem;
 458      -webkit-transform: scale(0);
 459          -ms-transform: scale(0);
 460              transform: scale(0);
 461      width: 0.625rem;
 462  }
 463  
 464  .mejs__time-rail:hover .mejs__time-handle-content,
 465  .mejs__time-rail .mejs__time-handle-content:focus,
 466  .mejs__time-rail .mejs__time-handle-content:active {
 467      -webkit-transform: scale(1);
 468          -ms-transform: scale(1);
 469              transform: scale(1);
 470  }
 471  
 472  .mejs__time-float {
 473      background: #eee;
 474      border: solid 1px #333;
 475      bottom: 100%;
 476      color: #111;
 477      display: none;
 478      height: 1.0625rem;
 479      margin-bottom: 0.5625rem;
 480      position: absolute;
 481      text-align: center;
 482      -webkit-transform: translateX(-50%);
 483          -ms-transform: translateX(-50%);
 484              transform: translateX(-50%);
 485      width: 2.25rem;
 486  }
 487  
 488  .mejs__time-float-current {
 489      display: block;
 490      left: 0;
 491      margin: 0.125rem;
 492      text-align: center;
 493      width: 1.875rem;
 494  }
 495  
 496  .mejs__time-float-corner {
 497      border: solid 0.3125rem #eee;
 498      border-color: #eee transparent transparent;
 499      border-radius: 0;
 500      display: block;
 501      height: 0;
 502      left: 50%;
 503      line-height: 0;
 504      position: absolute;
 505      top: 100%;
 506      -webkit-transform: translateX(-50%);
 507          -ms-transform: translateX(-50%);
 508              transform: translateX(-50%);
 509      width: 0;
 510  }
 511  
 512  .mejs__long-video .mejs__time-float {
 513      margin-left: -1.4375rem;
 514      width: 4rem;
 515  }
 516  
 517  .mejs__long-video .mejs__time-float-current {
 518      width: 3.75rem;
 519  }
 520  
 521  .mejs__broadcast {
 522      color: #fff;
 523      height: 0.625rem;
 524      position: absolute;
 525      top: 0.9375rem;
 526      width: 100%;
 527  }
 528  
 529  /* End: Progress Bar */
 530  
 531  /* Start: Mute/Volume */
 532  .mejs__volume-button {
 533      position: relative;
 534  }
 535  
 536  .mejs__volume-button > .mejs__volume-slider {
 537      -webkit-backface-visibility: hidden;
 538      background: rgba(50, 50, 50, 0.7);
 539      border-radius: 0;
 540      bottom: 100%;
 541      display: none;
 542      height: 7.1875rem;
 543      left: 50%;
 544      margin: 0;
 545      position: absolute;
 546      -webkit-transform: translateX(-50%);
 547          -ms-transform: translateX(-50%);
 548              transform: translateX(-50%);
 549      width: 1.5625rem;
 550      z-index: 1;
 551  }
 552  
 553  .mejs__volume-button:hover {
 554      border-radius: 0 0 0.25rem 0.25rem;
 555  }
 556  
 557  .mejs__volume-total {
 558      background: rgba(255, 255, 255, 0.5);
 559      border: 0.06rem solid #fff;
 560      height: 6.25rem;
 561      left: 50%;
 562      margin: 0;
 563      position: absolute;
 564      top: 0.5rem;
 565      -webkit-transform: translateX(-50%);
 566          -ms-transform: translateX(-50%);
 567              transform: translateX(-50%);
 568      width: 0.125rem;
 569  }
 570  
 571  .mejs__volume-current {
 572      background: rgba(255, 255, 255, 0.9);
 573      left: 0;
 574      margin: 0;
 575      position: absolute;
 576      width: 100%;
 577  }
 578  
 579  .mejs__volume-handle {
 580      background: rgba(255, 255, 255, 0.9);
 581      border: 1px solid #fff;
 582      border-radius: 1px;
 583      cursor: ns-resize;
 584      height: 0.375rem;
 585      left: 50%;
 586      position: absolute;
 587      -webkit-transform: translateX(-50%);
 588          -ms-transform: translateX(-50%);
 589              transform: translateX(-50%);
 590      width: 1rem;
 591  }
 592  
 593  .mejs__horizontal-volume-slider {
 594      display: block;
 595      height: 2.25rem;
 596      position: relative;
 597      vertical-align: middle;
 598      width: 3.5rem;
 599  }
 600  
 601  .mejs__horizontal-volume-total {
 602      background: rgba(50, 50, 50, 0.8);
 603      border: 0.06rem solid #fff;
 604      border-radius: 0.125rem;
 605      font-size: 1px;
 606      height: 0.5rem;
 607      left: 0;
 608      margin: 0;
 609      padding: 0;
 610      position: absolute;
 611      top: 1rem;
 612      width: 3.125rem;
 613  }
 614  
 615  .mejs__horizontal-volume-current {
 616      background: rgba(255, 255, 255, 0.8);
 617      border-radius: 0.125rem;
 618      border-right: 0.06rem solid #fff;
 619      font-size: 1px;
 620      height: 100%;
 621      left: 0;
 622      margin: 0;
 623      padding: 0;
 624      position: absolute;
 625      top: 0;
 626      width: 100%;
 627  }
 628  
 629  .mejs__horizontal-volume-handle {
 630      display: none;
 631  }
 632  
 633  .mejs__mute svg,
 634  .mejs__unmute svg {
 635      stroke: currentColor;
 636  }
 637  
 638  .mejs__volume-button svg {
 639      display: none;
 640  }
 641  
 642  .mejs__mute .mejs__icon-mute {
 643      display: block;
 644  }
 645  
 646  .mejs__unmute .mejs__icon-unmute {
 647      display: block;
 648  }
 649  /* End: Mute/Volume */
 650  
 651  /* Start: Track (Captions and Chapters) */
 652  .mejs__captions-button,
 653  .mejs__chapters-button {
 654      position: relative;
 655  }
 656  
 657  .mejs__chapters-button svg,
 658  .mejs__captions-button svg {
 659      padding-top: 0.125rem;
 660  }
 661  
 662  .mejs__captions-button > .mejs__captions-selector,
 663  .mejs__chapters-button > .mejs__chapters-selector {
 664      background: rgba(50, 50, 50, 0.7);
 665      border: solid 1px transparent;
 666      border-radius: 0;
 667      bottom: 100%;
 668      margin-right: -2.6875rem;
 669      overflow: hidden;
 670      padding: 0;
 671      position: absolute;
 672      right: 50%;
 673      visibility: visible;
 674      width: 5.375rem;
 675  }
 676  
 677  .mejs__chapters-button > .mejs__chapters-selector {
 678      margin-right: -3.4375rem;
 679      width: 6.875rem;
 680  }
 681  
 682  .mejs__captions-selector-list,
 683  .mejs__chapters-selector-list {
 684      list-style-type: none !important;
 685      margin: 0;
 686      overflow: hidden;
 687      padding: 0;
 688  }
 689  
 690  .mejs__captions-selector-list-item,
 691  .mejs__chapters-selector-list-item {
 692      color: #fff;
 693      cursor: pointer;
 694      display: block;
 695      list-style-type: none !important;
 696      margin: 0 0 0.375rem;
 697      overflow: hidden;
 698      padding: 0;
 699  }
 700  
 701  .mejs__captions-selector-list-item:hover,
 702  .mejs__chapters-selector-list-item:hover {
 703      background-color: rgb(200, 200, 200) !important;
 704      background-color: rgba(255, 255, 255, 0.4) !important;
 705  }
 706  
 707  .mejs__captions-selector-input,
 708  .mejs__chapters-selector-input {
 709      clear: both;
 710      float: left;
 711      left: -62.5rem;
 712      margin: 0.1875rem 0.1875rem 0 0.3125rem;
 713      position: absolute;
 714  }
 715  
 716  .mejs__captions-selector-label,
 717  .mejs__chapters-selector-label {
 718      cursor: pointer;
 719      float: left;
 720      font-size: 0.625rem;
 721      line-height: 0.9375rem;
 722      padding: 0.25rem 0.625rem 0;
 723      width: 100%;
 724  }
 725  
 726  .mejs__captions-selector-list-item:hover .mejs__captions-selector-label,
 727  .mejs__chapters-selector-list-item:hover .mejs__chapters-selector-label {
 728      text-decoration: underline;
 729  }
 730  
 731  .mejs__captions-selected,
 732  .mejs__chapters-selected {
 733      color: rgba(33, 248, 248, 1);
 734      font-weight: bold;
 735  }
 736  
 737  .mejs__captions-translations {
 738      font-size: 0.625rem;
 739      margin: 0 0 0.3125rem;
 740  }
 741  
 742  .mejs__captions-layer {
 743      bottom: 0;
 744      color: #fff;
 745      font-size: 1rem;
 746      left: 0;
 747      line-height: 1.25rem;
 748      position: absolute;
 749      text-align: center;
 750  }
 751  
 752  .mejs__captions-layer a {
 753      color: #fff;
 754      text-decoration: underline;
 755  }
 756  
 757  .mejs__captions-layer[lang=ar] {
 758      font-size: 1.25rem;
 759      font-weight: normal;
 760  }
 761  
 762  .mejs__captions-position {
 763      bottom: 0.9375rem;
 764      left: 0;
 765      position: absolute;
 766      width: 100%;
 767  }
 768  
 769  .mejs__captions-position-hover {
 770      bottom: 2.1875rem;
 771  }
 772  
 773  .mejs__captions-text,
 774  .mejs__captions-text * {
 775      background: rgba(20, 20, 20, 0.5);
 776      box-shadow: 0.3125rem 0 0 rgba(20, 20, 20, 0.5), -0.3125rem 0 0 rgba(20, 20, 20, 0.5);
 777      padding: 0;
 778      white-space: pre-wrap;
 779  }
 780  
 781  .mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
 782      display: none;
 783  }
 784  /* End: Track (Captions and Chapters) */
 785  
 786  /* Start: Error */
 787  .mejs__overlay-error {
 788      position: relative;
 789  }
 790  .mejs__overlay-error > img {
 791      left: 0;
 792      max-width: 100%;
 793      position: absolute;
 794      top: 0;
 795      z-index: -1;
 796  }
 797  .mejs__cannotplay,
 798  .mejs__cannotplay a {
 799      color: #fff;
 800      font-size: 0.8em;
 801  }
 802  
 803  .mejs__cannotplay {
 804      position: relative;
 805  }
 806  
 807  .mejs__cannotplay p,
 808  .mejs__cannotplay a {
 809      display: inline-block;
 810      padding: 0 0.9375rem;
 811      width: 100%;
 812  }
 813  /* End: Error */