www/plugins-dist/medias/lib/mejs/mediaelementplayer.css

   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     background: rgba(50, 50, 50, 0.7);
 521     border-radius: 0;
 522     bottom: 100%;
 523     display: none;
 524     height: 115px;
 525     left: 50%;
 526     margin: 0;
 527     position: absolute;
 528     -webkit-transform: translateX(-50%);
 529         -ms-transform: translateX(-50%);
 530             transform: translateX(-50%);
 531     width: 25px;
 532     z-index: 1;
 533 }
 534
 535 .mejs__volume-button:hover {
 536     border-radius: 0 0 4px 4px;
 537 }
 538
 539 .mejs__volume-total {
 540     background: rgba(255, 255, 255, 0.5);
 541     height: 100px;
 542     left: 50%;
 543     margin: 0;
 544     position: absolute;
 545     top: 8px;
 546     -webkit-transform: translateX(-50%);
 547         -ms-transform: translateX(-50%);
 548             transform: translateX(-50%);
 549     width: 2px;
 550 }
 551
 552 .mejs__volume-current {
 553     background: rgba(255, 255, 255, 0.9);
 554     left: 0;
 555     margin: 0;
 556     position: absolute;
 557     width: 100%;
 558 }
 559
 560 .mejs__volume-handle {
 561     background: rgba(255, 255, 255, 0.9);
 562     border-radius: 1px;
 563     cursor: ns-resize;
 564     height: 6px;
 565     left: 50%;
 566     position: absolute;
 567     -webkit-transform: translateX(-50%);
 568         -ms-transform: translateX(-50%);
 569             transform: translateX(-50%);
 570     width: 16px;
 571 }
 572
 573 .mejs__horizontal-volume-slider {
 574     display: block;
 575     height: 36px;
 576     position: relative;
 577     vertical-align: middle;
 578     width: 56px;
 579 }
 580
 581 .mejs__horizontal-volume-total {
 582     background: rgba(50, 50, 50, 0.8);
 583     border-radius: 2px;
 584     font-size: 1px;
 585     height: 8px;
 586     left: 0;
 587     margin: 0;
 588     padding: 0;
 589     position: absolute;
 590     top: 16px;
 591     width: 50px;
 592 }
 593
 594 .mejs__horizontal-volume-current {
 595     background: rgba(255, 255, 255, 0.8);
 596     border-radius: 2px;
 597     font-size: 1px;
 598     height: 100%;
 599     left: 0;
 600     margin: 0;
 601     padding: 0;
 602     position: absolute;
 603     top: 0;
 604     width: 100%;
 605 }
 606
 607 .mejs__horizontal-volume-handle {
 608     display: none;
 609 }
 610
 611 /* End: Mute/Volume */
 612
 613 /* Start: Track (Captions and Chapters) */
 614 .mejs__captions-button,
 615 .mejs__chapters-button {
 616     position: relative;
 617 }
 618
 619 .mejs__captions-button > button {
 620     background-position: -140px 0;
 621 }
 622
 623 .mejs__chapters-button > button {
 624     background-position: -180px 0;
 625 }
 626
 627 .mejs__captions-button > .mejs__captions-selector,
 628 .mejs__chapters-button > .mejs__chapters-selector {
 629     background: rgba(50, 50, 50, 0.7);
 630     border: solid 1px transparent;
 631     border-radius: 0;
 632     bottom: 100%;
 633     margin-right: -43px;
 634     overflow: hidden;
 635     padding: 0;
 636     position: absolute;
 637     right: 50%;
 638     visibility: visible;
 639     width: 86px;
 640 }
 641
 642 .mejs__chapters-button > .mejs__chapters-selector {
 643     margin-right: -55px;
 644     width: 110px;
 645 }
 646
 647 .mejs__captions-selector-list,
 648 .mejs__chapters-selector-list {
 649     list-style-type: none !important;
 650     margin: 0;
 651     overflow: hidden;
 652     padding: 0;
 653 }
 654
 655 .mejs__captions-selector-list-item,
 656 .mejs__chapters-selector-list-item {
 657     color: #fff;
 658     cursor: pointer;
 659     display: block;
 660     list-style-type: none !important;
 661     margin: 0 0 6px;
 662     overflow: hidden;
 663     padding: 0 10px;
 664 }
 665
 666 .mejs__captions-selector-list-item:hover,
 667 .mejs__chapters-selector-list-item:hover {
 668     background-color: rgb(200, 200, 200) !important;
 669     background-color: rgba(255, 255, 255, 0.4) !important;
 670 }
 671
 672 .mejs__captions-selector-input,
 673 .mejs__chapters-selector-input {
 674     clear: both;
 675     float: left;
 676     left: -1000px;
 677     margin: 3px 3px 0 5px;
 678     position: absolute;
 679 }
 680
 681 .mejs__captions-selector-label,
 682 .mejs__chapters-selector-label {
 683     cursor: pointer;
 684     float: left;
 685     font-size: 10px;
 686     line-height: 15px;
 687     padding: 4px 0 0;
 688 }
 689
 690 .mejs__captions-selected,
 691 .mejs__chapters-selected {
 692     color: rgba(33, 248, 248, 1);
 693 }
 694
 695 .mejs__captions-translations {
 696     font-size: 10px;
 697     margin: 0 0 5px;
 698 }
 699
 700 .mejs__captions-layer {
 701     bottom: 0;
 702     color: #fff;
 703     font-size: 16px;
 704     left: 0;
 705     line-height: 20px;
 706     position: absolute;
 707     text-align: center;
 708 }
 709
 710 .mejs__captions-layer a {
 711     color: #fff;
 712     text-decoration: underline;
 713 }
 714
 715 .mejs__captions-layer[lang=ar] {
 716     font-size: 20px;
 717     font-weight: normal;
 718 }
 719
 720 .mejs__captions-position {
 721     bottom: 15px;
 722     left: 0;
 723     position: absolute;
 724     width: 100%;
 725 }
 726
 727 .mejs__captions-position-hover {
 728     bottom: 35px;
 729 }
 730
 731 .mejs__captions-text,
 732 .mejs__captions-text * {
 733     background: rgba(20, 20, 20, 0.5);
 734     box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
 735     padding: 0;
 736     white-space: pre-wrap;
 737 }
 738
 739 .mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
 740     display: none;
 741 }
 742
 743 /* End: Track (Captions and Chapters) */
 744
 745 /* Start: Error */
 746 .mejs__overlay-error {
 747     position: relative;
 748 }
 749 .mejs__overlay-error > img {
 750     left: 0;
 751     position: absolute;
 752     top: 0;
 753     z-index: -1;
 754 }
 755 .mejs__cannotplay,
 756 .mejs__cannotplay a {
 757     color: #fff;
 758     font-size: 0.8em;
 759 }
 760
 761 .mejs__cannotplay {
 762     position: relative;
 763 }
 764
 765 .mejs__cannotplay p,
 766 .mejs__cannotplay a {
 767     display: inline-block;
 768     padding: 0 15px;
 769     width: 100%;
 770 }
 771 /* End: Error */