libre-skin-grey.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657
  1. /*!
  2. LibreVideoJS Estilos personalizados = Grey
  3. Version 1.2
  4. Escrito por Jesús Eduardo
  5. */
  6. .librevjs-libre-materialgrey-skin {
  7. color:#ccc;
  8. background-color: inherit;
  9. }
  10. @font-face {
  11. font-family:"LibreVideoJS";
  12. src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
  13. src: local('?'),
  14. url("../../fonts/libre-material/libre-icons.woff") format("woff"),
  15. url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
  16. url("../../fonts/libre-material/libre-icons.svg") format("svg");
  17. }
  18. .librevjs-libre-materialgrey-skin .librevjs-slider {
  19. /* Replace browser focus highlight with handle highlight */
  20. outline: 0;
  21. position: relative;
  22. cursor: pointer;
  23. padding: 0;
  24. /* background-color-with-alpha */
  25. background-color: #000000;
  26. background-color: rgba(0, 0, 0, 0.5);
  27. }
  28. .librevjs-libre-materialgrey-skin .librevjs-slider:focus {
  29. -webkit-box-shadow:0 0 2em #fff;
  30. -moz-box-shadow:0 0 2em #fff;
  31. box-shadow:0 0 2em #fff
  32. }
  33. /*Eliminación de botón de barra de progreso*/
  34. .librevjs-libre-materialgrey-skin .librevjs-slider-handle {
  35. width: 0;
  36. height: 0;
  37. }
  38. .librevjs-libre-materialgrey-skin .librevjs-slider-handle:before {
  39. text-shadow: 0em 0em 1em #fff;
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. }
  44. /* control bar */
  45. .librevjs-libre-materialgrey-skin .librevjs-control-bar {
  46. /* Start hidden */
  47. display: none;
  48. position: absolute;
  49. /* Place control bar at the bottom of the player box/video.
  50. If you want more margin below the control bar, add more height.
  51. */
  52. bottom: 0;
  53. /* Use left/right to stretch to 100% width of player div */
  54. left: 0;
  55. right: 0;
  56. /* Height includes any margin you want above or below control items */
  57. height: 3.0em;
  58. /* background-color-with-alpha */
  59. background-color: #232323;
  60. background-color: rgba(35, 35, 35, 0.8);
  61. }
  62. .librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar {
  63. display:block;
  64. visibility:visible;
  65. opacity:1;
  66. -webkit-transition:visibility .1s,opacity .1s;
  67. -moz-transition:visibility .1s,opacity .1s;
  68. -o-transition:visibility .1s,opacity .1s;
  69. transition:visibility .1s,opacity .1s
  70. }
  71. .librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
  72. display:block;
  73. visibility:hidden;
  74. opacity:0;
  75. -webkit-transition:visibility 1s,opacity 1s;
  76. -moz-transition:visibility 1s,opacity 1s;
  77. -o-transition:visibility 1s,opacity 1s;
  78. transition:visibility 1s,opacity 1s
  79. }
  80. .librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar {
  81. display:none
  82. }
  83. .librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar {
  84. display:none
  85. }
  86. @media \0screen {
  87. .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
  88. content:""
  89. }
  90. }
  91. .librevjs-libre-materialgrey-skin .librevjs-control {
  92. outline:0;
  93. position:relative;
  94. float:left;
  95. text-align:center;
  96. margin:0;
  97. padding:0;
  98. height:3em;
  99. width:4em
  100. }
  101. .librevjs-libre-materialgrey-skin .librevjs-control:before {
  102. font-family:LibreVideoJS;
  103. font-size:1.5em;
  104. line-height:2;
  105. position:absolute;
  106. top:0;
  107. left:0;
  108. width:100%;
  109. height:100%;
  110. text-align:center;
  111. text-shadow:1px 1px 1px rgba(0,0,0,.5)
  112. }
  113. /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
  114. .librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before {
  115. color: #9e9e9e;
  116. }
  117. /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
  118. .librevjs-libre-materialgrey-skin .librevjs-control:focus {
  119. }
  120. .librevjs-libre-materialgrey-skin .librevjs-control-text {
  121. border:0;
  122. clip:rect(0 0 0 0);
  123. height:1px;
  124. margin:-1px;
  125. overflow:hidden;
  126. padding:0;
  127. position:absolute;
  128. width:1px
  129. }
  130. /*Color y diseño de boton play control*/
  131. .librevjs-libre-materialgrey-skin .librevjs-play-control {
  132. width:5em;
  133. cursor:pointer;
  134. color: rgb(158, 158, 158);
  135. }
  136. .librevjs-libre-materialgrey-skin .librevjs-play-control:before {
  137. content:"\e001"
  138. }
  139. .librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before {
  140. color:#7c7c7c; /*color de play control al pasar el cursor*/
  141. }
  142. .librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before {
  143. content:"\e002"
  144. }
  145. /*END Color y diseño de boton play control*/
  146. .librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button {
  147. cursor:pointer;
  148. float:right
  149. }
  150. .librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button:before {
  151. content:"\e006"
  152. }
  153. .librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
  154. content:"\e003"
  155. }
  156. .librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
  157. content:"\e004"
  158. }
  159. .librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
  160. content:"\e005"
  161. }
  162. .librevjs-libre-materialgrey-skin .librevjs-volume-control {
  163. width:5em;
  164. float:right
  165. }
  166. .librevjs-libre-materialgrey-skin .librevjs-volume-bar {
  167. width:5em;
  168. height:.6em;
  169. margin:1.1em auto 0
  170. }
  171. .librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content {
  172. height:2.9em
  173. }
  174. /*PERSONALIZACION DE NIVEL DE VOLUMEN*/
  175. .librevjs-libre-materialgrey-skin .librevjs-volume-level {
  176. position: absolute;
  177. top: 0;
  178. left: 0;
  179. height: 0.5em;
  180. /* assuming volume starts at 1.0 */
  181. width: 100%;
  182. background: #9e9e9e url() -50% 0 repeat; /*color de barra volumen*/
  183. }
  184. /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
  185. .librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle {
  186. width:.5em;
  187. height:.5em
  188. }
  189. .librevjs-libre-materialgrey-skin .librevjs-volume-handle:before {
  190. font-size:.9em;
  191. top:-.2em;
  192. left:-.2em;
  193. width:1em;
  194. height:1em
  195. }
  196. .librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
  197. width:6em;
  198. left:-4em
  199. }
  200. .librevjs-libre-materialgrey-skin .librevjs-progress-control {
  201. position:absolute;
  202. left:0;
  203. right:0;
  204. width:auto;
  205. font-size:.3em;
  206. height:1em;
  207. top:-1em;
  208. -webkit-transition:all .4s;
  209. -moz-transition:all .4s;
  210. -o-transition:all .4s;
  211. transition:all .4s
  212. }
  213. .librevjs-libre-materialgrey-skin:hover .librevjs-progress-control {
  214. font-size:.9em;
  215. -webkit-transition:all .2s;
  216. -moz-transition:all .2s;
  217. -o-transition:all .2s;
  218. transition:all .2s
  219. }
  220. .librevjs-libre-materialgrey-skin .librevjs-progress-holder {
  221. height:100%
  222. }
  223. .librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-load-progress {
  224. position:absolute;
  225. display:block;
  226. height:100%;
  227. margin:0;
  228. padding:0;
  229. left:0;
  230. top:0
  231. }
  232. /* Personalización de barra de progreso a color plata */
  233. .librevjs-libre-materialgrey-skin .librevjs-play-progress {
  234. background: #9e9e9e url() -50% 0 repeat;
  235. }
  236. .librevjs-libre-materialgrey-skin .librevjs-load-progress {
  237. background:#646464;
  238. background:rgba(255,255,255,.4)
  239. }
  240. .librevjs-libre-materialgrey-skin .librevjs-seek-handle {
  241. width:1.5em;
  242. height:100%
  243. }
  244. .librevjs-libre-materialgrey-skin .librevjs-seek-handle:before {
  245. padding-top:.1em
  246. }
  247. .librevjs-libre-materialgrey-skin .librevjs-time-controls {
  248. font-size:1em;
  249. font-weight: 700;/*mayor visibilidad*/
  250. line-height:3em;
  251. }
  252. .librevjs-libre-materialgrey-skin .librevjs-current-time {
  253. float:left
  254. }
  255. .librevjs-libre-materialgrey-skin .librevjs-duration {
  256. float:left
  257. }
  258. .librevjs-libre-materialgrey-skin .librevjs-remaining-time {
  259. display:none;
  260. float:left
  261. }
  262. .librevjs-time-divider {
  263. float:left;
  264. line-height:3em
  265. }
  266. .librevjs-libre-materialgrey-skin .librevjs-fullscreen-control {
  267. width:3.8em;
  268. cursor:pointer;
  269. float:right
  270. }
  271. .librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before {
  272. content:"\e000"
  273. }
  274. .librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
  275. content:"\e00b"
  276. }
  277. /*Centrado del button Play y personalizado*/
  278. .librevjs-libre-materialgrey-skin .librevjs-big-play-button {
  279. left: 50%;
  280. top: 40%;
  281. font-size: 10em;
  282. display: block;
  283. z-index: 2;
  284. position: absolute;
  285. width: 1em;
  286. height: 1em;
  287. margin-left: -0.5em;
  288. margin-top: -0.5em;
  289. text-align: center;
  290. vertical-align: middle;
  291. cursor: pointer;
  292. opacity: 1;
  293. color: #9e9e9e;
  294. }
  295. /* Hide if controls are disabled */
  296. .librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
  297. display: none;
  298. }
  299. /* Hide when video starts playing */
  300. .librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button {
  301. display: none;
  302. }
  303. /* Hide on mobile devices. Remove when we stop using native controls
  304. by default on mobile
  305. */
  306. .librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-big-play-button {
  307. display: none;
  308. }
  309. .librevjs-libre-materialgrey-skin:hover .librevjs-big-play-button,
  310. .librevjs-libre-materialgrey-skin .librevjs-big-play-button:focus {
  311. color: rgb(115, 115, 115); /*color boton focus grey oscuro*/
  312. }
  313. .librevjs-libre-materialgrey-skin .librevjs-big-play-button:before {
  314. content: "\e007";
  315. font-family: LibreVideoJS;
  316. /* In order to center the play icon vertically we need to set the line height
  317. to the same as the button height */
  318. text-align: center /* Needed for IE8 */;
  319. position: absolute;
  320. left: 0;
  321. width: 100%;
  322. height: 100%;
  323. }
  324. .librevjs-error .librevjs-big-play-button {
  325. display: none;
  326. }
  327. /*END PERSONALIZAR BIG PLAY BUTTON*/
  328. .librevjs-loading-spinner {
  329. display:none;
  330. position:absolute;
  331. top:50%;
  332. left:50%;
  333. font-size:4em;
  334. line-height:1;
  335. width:1em;
  336. height:1em;
  337. margin-left:-.5em;
  338. margin-top:-.5em;
  339. opacity:.75;
  340. -webkit-animation:spin 1.5s infinite linear;
  341. -moz-animation:spin 1.5s infinite linear;
  342. -o-animation:spin 1.5s infinite linear;
  343. animation:spin 1.5s infinite linear
  344. }
  345. .librevjs-libre-materialgrey-skin .librevjs-loading-spinner:before {
  346. content:"\e01e";
  347. font-family:LibreVideoJS;
  348. position:absolute;
  349. top:0;
  350. left:0;
  351. width:1em;
  352. height:1em;
  353. text-align:center;
  354. text-shadow:0 0 .1em #000
  355. }
  356. @-moz-keyframes spin {
  357. 0% {
  358. -moz-transform:rotate(0deg)
  359. }
  360. 100% {
  361. -moz-transform:rotate(359deg)
  362. }
  363. }
  364. @-webkit-keyframes spin {
  365. 0% {
  366. -webkit-transform:rotate(0deg)
  367. }
  368. 100% {
  369. -webkit-transform:rotate(359deg)
  370. }
  371. }
  372. @-o-keyframes spin {
  373. 0% {
  374. -o-transform:rotate(0deg)
  375. }
  376. 100% {
  377. -o-transform:rotate(359deg)
  378. }
  379. }
  380. @keyframes spin {
  381. 0% {
  382. transform:rotate(0deg)
  383. }
  384. 100% {
  385. transform:rotate(359deg)
  386. }
  387. }
  388. .librevjs-libre-materialgrey-skin .librevjs-menu-button {
  389. float:right;
  390. cursor:pointer
  391. }
  392. .librevjs-libre-materialgrey-skin .librevjs-menu {
  393. display:none;
  394. position:absolute;
  395. bottom:0;
  396. left:0;
  397. width:0;
  398. height:0;
  399. margin-bottom:3em;
  400. border-left:2em solid transparent;
  401. border-right:2em solid transparent;
  402. border-top:1.55em solid #000;
  403. border-top-color:rgba(7,40,50,.5)
  404. }
  405. .librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
  406. display:block;
  407. padding:0;
  408. margin:0;
  409. position:absolute;
  410. width:10em;
  411. bottom:1.5em;
  412. max-height:15em;
  413. overflow:auto;
  414. left:-5em;
  415. background-color:#07141e;
  416. background-color:rgba(7,20,30,.7);
  417. -webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
  418. -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
  419. box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)
  420. }
  421. .librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu {
  422. display:block
  423. }
  424. .librevjs-libre-materialgrey-skin .librevjs-menu-button ul li {
  425. list-style:none;
  426. margin:0;
  427. padding:.3em 0;
  428. line-height:1.4em;
  429. font-size:1.2em;
  430. text-align:center;
  431. text-transform:lowercase;
  432. color: #ccc;
  433. }
  434. /*COLOR DE SELECCION DE SUBTIULOS*/
  435. .librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected {
  436. color: #ffffff;
  437. background-color: rgb(158, 158, 158);
  438. }
  439. .librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover {
  440. outline: 0;
  441. color: #fff;
  442. background-color: #9e9e9e;
  443. }
  444. /*END COLOR SELECCION DE SUBTITULOS*/
  445. .librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title {
  446. text-align:center;
  447. text-transform:uppercase;
  448. font-size:1em;
  449. line-height:2em;
  450. padding:0;
  451. margin:0 0 .3em;
  452. font-weight:700;
  453. cursor:default
  454. }
  455. .librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before {
  456. content:"\e00c"
  457. }
  458. .librevjs-libre-materialgrey-skin .librevjs-captions-button:before {
  459. content:"\e008"
  460. }
  461. .librevjs-libre-materialgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before {
  462. -webkit-box-shadow:0 0 1em #fff;
  463. -moz-box-shadow:0 0 1em #fff;
  464. box-shadow:0 0 1em #fff
  465. }
  466. .cliplibre-js {
  467. background-color:#000;
  468. position:relative;
  469. padding:0;
  470. font-size:10px;
  471. vertical-align:middle;
  472. font-weight:500;
  473. font-style:normal;
  474. font-family:Arial,sans-serif;
  475. -webkit-user-select:none;
  476. -moz-user-select:none;
  477. -ms-user-select:none;
  478. user-select:none
  479. }
  480. .cliplibre-js .librevjs-tech {
  481. position:absolute;
  482. top:0;
  483. left:0;
  484. width:100%;
  485. height:100%
  486. }
  487. .cliplibre-js:-moz-full-screen {
  488. position:absolute
  489. }
  490. body.librevjs-full-window {
  491. padding:0;
  492. margin:0;
  493. height:100%;
  494. overflow-y:auto
  495. }
  496. .cliplibre-js.librevjs-fullscreen {
  497. position:fixed;
  498. overflow:hidden;
  499. z-index:1000;
  500. left:0;
  501. top:0;
  502. bottom:0;
  503. right:0;
  504. width:100%!important;
  505. height:100%!important;
  506. position:absolute;
  507. }
  508. .cliplibre-js:-webkit-full-screen {
  509. width:100%!important;
  510. height:100%!important
  511. }
  512. .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
  513. cursor:none
  514. }
  515. .librevjs-poster {
  516. background-repeat:no-repeat;
  517. background-position:50% 50%;
  518. background-size:contain;
  519. cursor:pointer;
  520. height:100%;
  521. margin:0;
  522. padding:0;
  523. position:relative;
  524. width:100%
  525. }
  526. .librevjs-poster img {
  527. display:block;
  528. margin:0 auto;
  529. max-height:100%;
  530. padding:0;
  531. width:100%
  532. }
  533. .cliplibre-js.librevjs-using-native-controls .librevjs-poster {
  534. display:none
  535. }
  536. .cliplibre-js .librevjs-text-track-display {
  537. text-align:center;
  538. position:absolute;
  539. bottom:4em;
  540. left:1em;
  541. right:1em
  542. }
  543. .cliplibre-js .librevjs-text-track {
  544. display:none;
  545. font-size:1.5em;
  546. text-align:center;
  547. margin-bottom:.1em;
  548. background-color:#000;
  549. background-color:rgba(0,0,0,.6)
  550. }
  551. .cliplibre-js .librevjs-subtitles {
  552. color:#fff
  553. }
  554. .cliplibre-js .librevjs-captions {
  555. color:rgb(255, 237, 0);
  556. background-color: rgba(2, 7, 11, 0.7);
  557. }
  558. .librevjs-tt-cue {
  559. display:block
  560. }
  561. .librevjs-libre-materialgrey-skin .librevjs-hidden {
  562. display:none
  563. }
  564. .librevjs-lock-showing {
  565. display:block!important;
  566. opacity:1;
  567. visibility:visible
  568. }
  569. .no_html5 {
  570. background: black none repeat scroll 0 0;
  571. color: white;
  572. height: 160px;
  573. padding: 130px 10px 20px;
  574. text-align: center;
  575. }
  576. /*title de resolucion | subtitles y Caption*/
  577. .librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
  578. color:#737373;
  579. background-color: inherit;
  580. }
  581. .librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
  582. color:#9e9e9e;
  583. background-color: inherit;
  584. }
  585. /*Responsive*/
  586. .cliplibre-js-responsive-container.librevjs-hd {
  587. padding-top: 56.25%;
  588. }
  589. .cliplibre-js-responsive-container.librevjs-sd {
  590. padding-top: 75%;
  591. }
  592. .cliplibre-js-responsive-container {
  593. width: 100%;
  594. position: relative;
  595. }
  596. .cliplibre-js-responsive-container .cliplibre-js {
  597. height: 100% !important;
  598. width: 100% !important;
  599. position: absolute;
  600. top: 0;
  601. left: 0;
  602. }
  603. @media screen and (max-width: 600px){
  604. .cliplibre-js .librevjs-text-track{
  605. font-size: 1.2em;
  606. }
  607. .cliplibre-js .librevjs-text-track-display{
  608. bottom: 2em;
  609. }
  610. }
  611. @media screen and (max-width: 413px){
  612. .cliplibre-js {
  613. font-size:8px;
  614. }
  615. }
  616. @media screen and (max-width: 400px){
  617. .cliplibre-js .librevjs-text-track{
  618. font-size: 0.9em;
  619. }
  620. .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
  621. font-size: 5em;
  622. top: 45%;
  623. }
  624. .cliplibre-js .librevjs-text-track-display{
  625. bottom: 1em;
  626. }
  627. }
  628. @media screen and (max-width: 335px){
  629. .cliplibre-js {
  630. font-size:6px;
  631. }
  632. }
  633. @media screen and (max-width: 200px){
  634. .librevjs-libre-materialgrey-skin .librevjs-big-play-button {
  635. top:35%;
  636. }
  637. }
  638. @media screen and (max-width: 150px){
  639. .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
  640. font-size: 3em;
  641. }
  642. }
  643. @media screen and (max-width: 90px){
  644. .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
  645. font-size: 2em;
  646. }
  647. }