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