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