home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-includes / js / mediaelement / mediaelementplayer.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2017-08-28  |  15.5 KB  |  772 lines
  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 10px;
  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 0 0;
  689. }
  690.  
  691. .mejs__captions-selected,
  692. .mejs__chapters-selected {
  693.     color: rgba(33, 248, 248, 1);
  694. }
  695.  
  696. .mejs__captions-translations {
  697.     font-size: 10px;
  698.     margin: 0 0 5px;
  699. }
  700.  
  701. .mejs__captions-layer {
  702.     bottom: 0;
  703.     color: #fff;
  704.     font-size: 16px;
  705.     left: 0;
  706.     line-height: 20px;
  707.     position: absolute;
  708.     text-align: center;
  709. }
  710.  
  711. .mejs__captions-layer a {
  712.     color: #fff;
  713.     text-decoration: underline;
  714. }
  715.  
  716. .mejs__captions-layer[lang=ar] {
  717.     font-size: 20px;
  718.     font-weight: normal;
  719. }
  720.  
  721. .mejs__captions-position {
  722.     bottom: 15px;
  723.     left: 0;
  724.     position: absolute;
  725.     width: 100%;
  726. }
  727.  
  728. .mejs__captions-position-hover {
  729.     bottom: 35px;
  730. }
  731.  
  732. .mejs__captions-text,
  733. .mejs__captions-text * {
  734.     background: rgba(20, 20, 20, 0.5);
  735.     box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
  736.     padding: 0;
  737.     white-space: pre-wrap;
  738. }
  739.  
  740. .mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
  741.     display: none;
  742. }
  743.  
  744. /* End: Track (Captions and Chapters) */
  745.  
  746. /* Start: Error */
  747. .mejs__overlay-error {
  748.     position: relative;
  749. }
  750. .mejs__overlay-error > img {
  751.     left: 0;
  752.     position: absolute;
  753.     top: 0;
  754.     z-index: -1;
  755. }
  756. .mejs__cannotplay,
  757. .mejs__cannotplay a {
  758.     color: #fff;
  759.     font-size: 0.8em;
  760. }
  761.  
  762. .mejs__cannotplay {
  763.     position: relative;
  764. }
  765.  
  766. .mejs__cannotplay p,
  767. .mejs__cannotplay a {
  768.     display: inline-block;
  769.     padding: 0 15px;
  770.     width: 100%;
  771. }
  772. /* End: Error */