media-player.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847
  1. .mejs-container {
  2. position:relative;
  3. background:#000;
  4. text-align:left;
  5. vertical-align:top;
  6. text-indent:0;
  7. }
  8. .me-plugin {
  9. position:absolute;
  10. }
  11. .mejs-embed, .mejs-embed body {
  12. width:100%;
  13. height:100%;
  14. margin:0;
  15. padding:0;
  16. background:#000;
  17. overflow:hidden;
  18. }
  19. .mejs-fullscreen {
  20. overflow:hidden!important;
  21. }
  22. .mejs-container-fullscreen {
  23. position:fixed;
  24. left:0;
  25. top:0;
  26. right:0;
  27. bottom:0;
  28. overflow:hidden;
  29. z-index:1000;
  30. }
  31. .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video {
  32. width:100%;
  33. height:100%;
  34. }
  35. .mejs-clear {
  36. clear:both;
  37. }
  38. .mejs-background {
  39. position:absolute;
  40. top:0;
  41. left:0;
  42. }
  43. .mejs-mediaelement {
  44. position:absolute;
  45. top:0;
  46. left:0;
  47. width:100%;
  48. height:100%;
  49. }
  50. .mejs-poster {
  51. position:absolute;
  52. top:0;
  53. left:0;
  54. background-size:contain;
  55. background-position:50% 50%;
  56. background-repeat:no-repeat;
  57. }
  58. :root .mejs-poster img {
  59. display:none;
  60. }
  61. .mejs-poster img {
  62. border:0;
  63. padding:0;
  64. border:0;
  65. }
  66. .mejs-overlay {
  67. position:absolute;
  68. top:0;
  69. left:0;
  70. }
  71. .mejs-overlay-play {
  72. cursor:pointer;
  73. }
  74. .mejs-overlay-button {
  75. position:absolute;
  76. top:50%;
  77. left:50%;
  78. width:100px;
  79. height:100px;
  80. margin:-50px 0 0 -50px;
  81. background:url(../img/media-player/bigplay.svg) no-repeat;
  82. }
  83. .no-svg .mejs-overlay-button {
  84. background-image:url(../img/media-player/bigplay.png);
  85. }
  86. .mejs-overlay:hover .mejs-overlay-button {
  87. background-position:0 -100px;
  88. }
  89. .mejs-overlay-loading {
  90. position:absolute;
  91. top:50%;
  92. left:50%;
  93. width:80px;
  94. height:80px;
  95. margin:-40px 0 0 -40px;
  96. background:#333;
  97. background:url(../img/media-player/background.png);
  98. background:rgba(0, 0, 0, 0.9);
  99. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
  100. background:-webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  101. background:-moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  102. background:-o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  103. background:-ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  104. background:linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  105. }
  106. .mejs-overlay-loading span {
  107. display:block;
  108. width:80px;
  109. height:80px;
  110. background:transparent url(../img/media-player/loading.gif) 50% 50% no-repeat;
  111. }
  112. .mejs-container .mejs-controls {
  113. position:absolute;
  114. list-style-type:none;
  115. margin:0;
  116. padding:0;
  117. bottom:0;
  118. left:0;
  119. background:url(../img/media-player/background.png);
  120. background:rgba(0, 0, 0, 0.7);
  121. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
  122. background:-webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  123. background:-moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  124. background:-o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  125. background:-ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  126. background:linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  127. height:30px;
  128. width:100%;
  129. }
  130. .mejs-container .mejs-controls div {
  131. list-style-type:none;
  132. background-image:none;
  133. display:block;
  134. float:left;
  135. margin:0;
  136. padding:0;
  137. width:26px;
  138. height:26px;
  139. font-size:11px;
  140. line-height:11px;
  141. border:0;
  142. }
  143. .mejs-controls .mejs-button button {
  144. cursor:pointer;
  145. display:block;
  146. font-size:0;
  147. line-height:0;
  148. text-decoration:none;
  149. margin:7px 5px;
  150. padding:0;
  151. position:absolute;
  152. height:16px;
  153. width:16px;
  154. border:0;
  155. background:transparent url(../img/media-player/controls.svg) no-repeat;
  156. }
  157. .no-svg .mejs-controls .mejs-button button {
  158. background-image:url(../img/media-player/controls.png);
  159. }
  160. .mejs-controls .mejs-button button:focus {
  161. outline:solid 1px yellow;
  162. }
  163. .mejs-container .mejs-controls .mejs-time {
  164. color:#fff;
  165. display:block;
  166. height:17px;
  167. width:auto;
  168. padding:8px 3px 0 3px;
  169. overflow:hidden;
  170. text-align:center;
  171. -moz-box-sizing:content-box;
  172. -webkit-box-sizing:content-box;
  173. box-sizing:content-box;
  174. }
  175. .mejs-container .mejs-controls .mejs-time span {
  176. color:#fff;
  177. font-size:11px;
  178. line-height:12px;
  179. display:block;
  180. float:left;
  181. margin:1px 2px 0 0;
  182. width:auto;
  183. }
  184. .mejs-controls .mejs-play button {
  185. background-position:0 0;
  186. }
  187. .mejs-controls .mejs-pause button {
  188. background-position:0 -16px;
  189. }
  190. .mejs-controls .mejs-stop button {
  191. background-position:-112px 0;
  192. }
  193. .mejs-controls div.mejs-time-rail {
  194. direction:ltr;
  195. width:200px;
  196. padding-top:5px;
  197. }
  198. .mejs-controls .mejs-time-rail span {
  199. display:block;
  200. position:absolute;
  201. width:180px;
  202. height:10px;
  203. -webkit-border-radius:2px;
  204. -moz-border-radius:2px;
  205. border-radius:2px;
  206. cursor:pointer;
  207. }
  208. .mejs-controls .mejs-time-rail .mejs-time-total {
  209. margin:5px;
  210. background:#333;
  211. background:rgba(50, 50, 50, 0.8);
  212. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
  213. background:-webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  214. background:-moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  215. background:-o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  216. background:-ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  217. background:linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  218. }
  219. .mejs-controls .mejs-time-rail .mejs-time-buffering {
  220. width:100%;
  221. background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  222. background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  223. background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  224. background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  225. background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  226. background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  227. -webkit-background-size:15px 15px;
  228. -moz-background-size:15px 15px;
  229. -o-background-size:15px 15px;
  230. background-size:15px 15px;
  231. -webkit-animation:buffering-stripes 2s linear infinite;
  232. -moz-animation:buffering-stripes 2s linear infinite;
  233. -ms-animation:buffering-stripes 2s linear infinite;
  234. -o-animation:buffering-stripes 2s linear infinite;
  235. animation:buffering-stripes 2s linear infinite;
  236. }
  237. @-webkit-keyframes buffering-stripes {
  238. from {
  239. background-position:0 0;
  240. }
  241. to {
  242. background-position:30px 0;
  243. }
  244. }
  245. @-moz-keyframes buffering-stripes {
  246. from {
  247. background-position:0 0;
  248. }
  249. to {
  250. background-position:30px 0;
  251. }
  252. }
  253. @-ms-keyframes buffering-stripes {
  254. from {
  255. background-position:0 0;
  256. }
  257. to {
  258. background-position:30px 0;
  259. }
  260. }
  261. @-o-keyframes buffering-stripes {
  262. from {
  263. background-position:0 0;
  264. }
  265. to {
  266. background-position:30px 0;
  267. }
  268. }
  269. @keyframes buffering-stripes {
  270. from {
  271. background-position:0 0;
  272. }
  273. to {
  274. background-position:30px 0;
  275. }
  276. }
  277. .mejs-controls .mejs-time-rail .mejs-time-loaded {
  278. background:#3caac8;
  279. background:rgba(60, 170, 200, 0.8);
  280. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8)));
  281. background:-webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  282. background:-moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  283. background:-o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  284. background:-ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  285. background:linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  286. width:0;
  287. }
  288. .mejs-controls .mejs-time-rail .mejs-time-current {
  289. background:#fff;
  290. background:rgba(255, 255, 255, 0.8);
  291. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
  292. background:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  293. background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  294. background:-o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  295. background:-ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  296. background:linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  297. width:0;
  298. }
  299. .mejs-controls .mejs-time-rail .mejs-time-handle {
  300. display:none;
  301. position:absolute;
  302. margin:0;
  303. width:10px;
  304. background:#fff;
  305. -webkit-border-radius:5px;
  306. -moz-border-radius:5px;
  307. border-radius:5px;
  308. cursor:pointer;
  309. border:solid 2px #333;
  310. top:-2px;
  311. text-align:center;
  312. }
  313. .mejs-controls .mejs-time-rail .mejs-time-float {
  314. position:absolute;
  315. display:none;
  316. background:#eee;
  317. width:36px;
  318. height:17px;
  319. border:solid 1px #333;
  320. top:-26px;
  321. margin-left:-18px;
  322. text-align:center;
  323. color:#111;
  324. }
  325. .mejs-controls .mejs-time-rail .mejs-time-float-current {
  326. margin:2px;
  327. width:30px;
  328. display:block;
  329. text-align:center;
  330. left:0;
  331. }
  332. .mejs-controls .mejs-time-rail .mejs-time-float-corner {
  333. position:absolute;
  334. display:block;
  335. width:0;
  336. height:0;
  337. line-height:0;
  338. border:solid 5px #eee;
  339. border-color:#eee transparent transparent transparent;
  340. -webkit-border-radius:0;
  341. -moz-border-radius:0;
  342. border-radius:0;
  343. top:15px;
  344. left:13px;
  345. }
  346. .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
  347. width:48px;
  348. }
  349. .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
  350. width:44px;
  351. }
  352. .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
  353. left:18px;
  354. }
  355. .mejs-controls .mejs-fullscreen-button button {
  356. background-position:-32px 0;
  357. }
  358. .mejs-controls .mejs-unfullscreen button {
  359. background-position:-32px -16px;
  360. }
  361. .mejs-controls .mejs-mute button {
  362. background-position:-16px -16px;
  363. }
  364. .mejs-controls .mejs-unmute button {
  365. background-position:-16px 0;
  366. }
  367. .mejs-controls .mejs-volume-button {
  368. position:relative;
  369. }
  370. .mejs-controls .mejs-volume-button .mejs-volume-slider {
  371. display:none;
  372. height:115px;
  373. width:25px;
  374. background:url(../img/media-player/background.png);
  375. background:rgba(50, 50, 50, 0.7);
  376. -webkit-border-radius:0;
  377. -moz-border-radius:0;
  378. border-radius:0;
  379. top:-115px;
  380. left:0;
  381. z-index:1;
  382. position:absolute;
  383. margin:0;
  384. }
  385. .mejs-controls .mejs-volume-button:hover {
  386. -webkit-border-radius:0 0 4px 4px;
  387. -moz-border-radius:0 0 4px 4px;
  388. border-radius:0 0 4px 4px;
  389. }
  390. .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
  391. position:absolute;
  392. left:11px;
  393. top:8px;
  394. width:2px;
  395. height:100px;
  396. background:#ddd;
  397. background:rgba(255, 255, 255, 0.5);
  398. margin:0;
  399. }
  400. .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
  401. position:absolute;
  402. left:11px;
  403. top:8px;
  404. width:2px;
  405. height:100px;
  406. background:#ddd;
  407. background:rgba(255, 255, 255, 0.9);
  408. margin:0;
  409. }
  410. .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
  411. position:absolute;
  412. left:4px;
  413. top:-3px;
  414. width:16px;
  415. height:6px;
  416. background:#ddd;
  417. background:rgba(255, 255, 255, 0.9);
  418. cursor:N-resize;
  419. -webkit-border-radius:1px;
  420. -moz-border-radius:1px;
  421. border-radius:1px;
  422. margin:0;
  423. }
  424. .mejs-controls div.mejs-horizontal-volume-slider {
  425. height:26px;
  426. width:60px;
  427. position:relative;
  428. }
  429. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  430. position:absolute;
  431. left:0;
  432. top:11px;
  433. width:50px;
  434. height:8px;
  435. margin:0;
  436. padding:0;
  437. font-size:1px;
  438. -webkit-border-radius:2px;
  439. -moz-border-radius:2px;
  440. border-radius:2px;
  441. background:#333;
  442. background:rgba(50, 50, 50, 0.8);
  443. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
  444. background:-webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  445. background:-moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  446. background:-o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  447. background:-ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  448. background:linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  449. }
  450. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  451. position:absolute;
  452. left:0;
  453. top:11px;
  454. width:50px;
  455. height:8px;
  456. margin:0;
  457. padding:0;
  458. font-size:1px;
  459. -webkit-border-radius:2px;
  460. -moz-border-radius:2px;
  461. border-radius:2px;
  462. background:#fff;
  463. background:rgba(255, 255, 255, 0.8);
  464. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
  465. background:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  466. background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  467. background:-o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  468. background:-ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  469. background:linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  470. }
  471. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
  472. display:none;
  473. }
  474. .mejs-controls .mejs-captions-button {
  475. position:relative;
  476. }
  477. .mejs-controls .mejs-captions-button button {
  478. background-position:-48px 0;
  479. }
  480. .mejs-controls .mejs-captions-button .mejs-captions-selector {
  481. visibility:hidden;
  482. position:absolute;
  483. bottom:26px;
  484. right:-10px;
  485. width:130px;
  486. height:100px;
  487. background:url(../img/media-player/background.png);
  488. background:rgba(50, 50, 50, 0.7);
  489. border:solid 1px transparent;
  490. padding:10px;
  491. overflow:hidden;
  492. -webkit-border-radius:0;
  493. -moz-border-radius:0;
  494. border-radius:0;
  495. }
  496. .mejs-controls .mejs-captions-button .mejs-captions-selector ul {
  497. margin:0;
  498. padding:0;
  499. display:block;
  500. list-style-type:none!important;
  501. overflow:hidden;
  502. }
  503. .mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
  504. margin:0 0 6px 0;
  505. padding:0;
  506. list-style-type:none!important;
  507. display:block;
  508. color:#fff;
  509. overflow:hidden;
  510. }
  511. .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
  512. clear:both;
  513. float:left;
  514. margin:3px 3px 0 5px;
  515. }
  516. .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
  517. width:100px;
  518. float:left;
  519. padding:4px 0 0 0;
  520. line-height:15px;
  521. font-size:10px;
  522. }
  523. .mejs-controls .mejs-captions-button .mejs-captions-translations {
  524. font-size:10px;
  525. margin:0 0 5px 0;
  526. }
  527. .mejs-chapters {
  528. position:absolute;
  529. top:0;
  530. left:0;
  531. -xborder-right:solid 1px #fff;
  532. width:10000px;
  533. z-index:1;
  534. }
  535. .mejs-chapters .mejs-chapter {
  536. position:absolute;
  537. float:left;
  538. background:#222;
  539. background:rgba(0, 0, 0, 0.7);
  540. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
  541. background:-webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  542. background:-moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  543. background:-o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  544. background:-ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  545. background:linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  546. filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
  547. overflow:hidden;
  548. border:0;
  549. }
  550. .mejs-chapters .mejs-chapter .mejs-chapter-block {
  551. font-size:11px;
  552. color:#fff;
  553. padding:5px;
  554. display:block;
  555. border-right:solid 1px #333;
  556. border-bottom:solid 1px #333;
  557. cursor:pointer;
  558. }
  559. .mejs-chapters .mejs-chapter .mejs-chapter-block-last {
  560. border-right:none;
  561. }
  562. .mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
  563. background:#666;
  564. background:rgba(102, 102, 102, 0.7);
  565. background:-webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
  566. background:-webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  567. background:-moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  568. background:-o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  569. background:-ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  570. background:linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  571. filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232);
  572. }
  573. .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
  574. font-size:12px;
  575. font-weight:bold;
  576. display:block;
  577. white-space:nowrap;
  578. text-overflow:ellipsis;
  579. margin:0 0 3px 0;
  580. line-height:12px;
  581. }
  582. .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
  583. font-size:12px;
  584. line-height:12px;
  585. margin:3px 0 4px 0;
  586. display:block;
  587. white-space:nowrap;
  588. text-overflow:ellipsis;
  589. }
  590. .mejs-captions-layer {
  591. position:absolute;
  592. bottom:0;
  593. left:0;
  594. text-align:center;
  595. line-height:22px;
  596. font-size:12px;
  597. color:#fff;
  598. }
  599. .mejs-captions-layer a {
  600. color:#fff;
  601. text-decoration:underline;
  602. }
  603. .mejs-captions-layer[lang=ar] {
  604. font-size:20px;
  605. font-weight:normal;
  606. }
  607. .mejs-captions-position {
  608. position:absolute;
  609. width:100%;
  610. bottom:15px;
  611. left:0;
  612. }
  613. .mejs-captions-position-hover {
  614. bottom:45px;
  615. }
  616. .mejs-captions-text {
  617. padding:3px 5px;
  618. background:url(../img/media-player/background.png);
  619. background:rgba(20, 20, 20, 0.8);
  620. }
  621. .me-cannotplay a {
  622. color:#fff;
  623. font-weight:bold;
  624. }
  625. .me-cannotplay span {
  626. padding:15px;
  627. display:block;
  628. }
  629. .mejs-controls .mejs-loop-off button {
  630. background-position:-64px -16px;
  631. }
  632. .mejs-controls .mejs-loop-on button {
  633. background-position:-64px 0;
  634. }
  635. .mejs-controls .mejs-backlight-off button {
  636. background-position:-80px -16px;
  637. }
  638. .mejs-controls .mejs-backlight-on button {
  639. background-position:-80px 0;
  640. }
  641. .mejs-controls .mejs-picturecontrols-button {
  642. background-position:-96px 0;
  643. }
  644. .mejs-contextmenu {
  645. position:absolute;
  646. width:150px;
  647. padding:10px;
  648. border-radius:4px;
  649. top:0;
  650. left:0;
  651. background:#fff;
  652. border:solid 1px #999;
  653. z-index:1001;
  654. }
  655. .mejs-contextmenu .mejs-contextmenu-separator {
  656. height:1px;
  657. font-size:0;
  658. margin:5px 6px;
  659. background:#333;
  660. }
  661. .mejs-contextmenu .mejs-contextmenu-item {
  662. font-size:12px;
  663. padding:4px 6px;
  664. cursor:pointer;
  665. color:#333;
  666. }
  667. .mejs-contextmenu .mejs-contextmenu-item:hover {
  668. background:#2C7C91;
  669. color:#fff;
  670. }
  671. .mejs-controls .mejs-sourcechooser-button {
  672. position:relative;
  673. }
  674. .mejs-controls .mejs-sourcechooser-button button {
  675. background-position:-128px 0;
  676. }
  677. .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
  678. visibility:hidden;
  679. position:absolute;
  680. bottom:26px;
  681. right:-10px;
  682. width:130px;
  683. height:100px;
  684. background:url(../img/media-player/background.png);
  685. background:rgba(50, 50, 50, 0.7);
  686. border:solid 1px transparent;
  687. padding:10px;
  688. overflow:hidden;
  689. -webkit-border-radius:0;
  690. -moz-border-radius:0;
  691. border-radius:0;
  692. }
  693. .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
  694. margin:0;
  695. padding:0;
  696. display:block;
  697. list-style-type:none!important;
  698. overflow:hidden;
  699. }
  700. .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
  701. margin:0 0 6px 0;
  702. padding:0;
  703. list-style-type:none!important;
  704. display:block;
  705. color:#fff;
  706. overflow:hidden;
  707. }
  708. .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
  709. clear:both;
  710. float:left;
  711. margin:3px 3px 0 5px;
  712. }
  713. .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
  714. width:100px;
  715. float:left;
  716. padding:4px 0 0 0;
  717. line-height:15px;
  718. font-size:10px;
  719. }
  720. .mejs-postroll-layer {
  721. position:absolute;
  722. bottom:0;
  723. left:0;
  724. width:100%;
  725. height:100%;
  726. background:url(../img/media-player/background.png);
  727. background:rgba(50, 50, 50, 0.7);
  728. z-index:1000;
  729. overflow:hidden;
  730. }
  731. .mejs-postroll-layer-content {
  732. width:100%;
  733. height:100%;
  734. }
  735. .mejs-postroll-close {
  736. position:absolute;
  737. right:0;
  738. top:0;
  739. background:url(../img/media-player/background.png);
  740. background:rgba(50, 50, 50, 0.7);
  741. color:#fff;
  742. padding:4px;
  743. z-index:100;
  744. cursor:pointer;
  745. }