mediaelementplayer-legacy.css (15758B)
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 */