www/plugins-dist/medias/lib/mejs/mediaelementplayer-legacy.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     -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 */