jplayer.blue.monday.css 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
  1. /*
  2. * Skin for jPlayer Plugin (jQuery JavaScript Library)
  3. * http://www.jplayer.org
  4. *
  5. * Skin Name: Blue Monday
  6. *
  7. * Copyright (c) 2010-2012 Happyworm Ltd
  8. * Dual licensed under the MIT and GPL licenses.
  9. * - http://www.opensource.org/licenses/mit-license.php
  10. * - http://www.gnu.org/copyleft/gpl.html
  11. *
  12. * Author: Silvia Benvenuti
  13. * Skin Version: 4.2 (jPlayer 2.2.0)
  14. * Date: 22nd October 2012
  15. */
  16. div.jp-audio,
  17. div.jp-audio-stream,
  18. div.jp-video {
  19. /* Edit the font-size to counteract inherited font sizing.
  20. * Eg. 1.25em = 1 / 0.8em
  21. */
  22. font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
  23. font-family:Verdana, Arial, sans-serif;
  24. line-height:1.6;
  25. color: #666;
  26. /*border:1px solid #009be3;*/
  27. background-color:#eee;
  28. }
  29. div.jp-audio {
  30. width:100%;
  31. }
  32. div.jp-audio-stream {
  33. width:182px;
  34. }
  35. div.jp-video-270p {
  36. width:480px;
  37. }
  38. div.jp-video-360p {
  39. width:640px;
  40. }
  41. div.jp-video-full {
  42. /* Rules for IE6 (full-screen) */
  43. width:480px;
  44. height:270px;
  45. /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
  46. position:static !important; position:relative
  47. }
  48. /* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
  49. div.jp-video-full div div {
  50. z-index:1000;
  51. }
  52. div.jp-video-full div.jp-jplayer {
  53. top: 0;
  54. left: 0;
  55. position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
  56. overflow: hidden;
  57. }
  58. div.jp-video-full div.jp-gui {
  59. position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
  60. top: 0;
  61. left: 0;
  62. width:100%;
  63. height:100%;
  64. z-index:1001; /* 1 layer above the others. */
  65. }
  66. div.jp-video-full div.jp-interface {
  67. position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
  68. bottom: 0;
  69. left: 0;
  70. }
  71. div.jp-interface {
  72. position: relative;
  73. background-color:#eee;
  74. width:100%;
  75. }
  76. div.jp-audio div.jp-type-single div.jp-interface {
  77. height:80px;
  78. }
  79. div.jp-audio div.jp-type-playlist div.jp-interface {
  80. height:80px;
  81. }
  82. div.jp-audio-stream div.jp-type-single div.jp-interface {
  83. height:80px;
  84. }
  85. div.jp-video div.jp-interface {
  86. /*border-top:1px solid #009be3;*/
  87. }
  88. /* @group CONTROLS */
  89. div.jp-controls-holder {
  90. clear: both;
  91. width:440px;
  92. margin:0 auto;
  93. position: relative;
  94. overflow:hidden;
  95. top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
  96. }
  97. div.jp-interface ul.jp-controls {
  98. list-style-type:none;
  99. margin:0;
  100. padding: 0;
  101. overflow:hidden;
  102. }
  103. div.jp-audio ul.jp-controls {
  104. width: 380px;
  105. padding:20px 20px 0 20px;
  106. }
  107. div.jp-audio-stream ul.jp-controls {
  108. width: 142px;
  109. padding:20px 20px 0 20px;
  110. }
  111. div.jp-video div.jp-type-single ul.jp-controls {
  112. width: 78px;
  113. margin-left: 200px;
  114. }
  115. div.jp-video div.jp-type-playlist ul.jp-controls {
  116. width: 134px;
  117. margin-left: 172px;
  118. }
  119. div.jp-video ul.jp-controls,
  120. div.jp-interface ul.jp-controls li {
  121. display:inline;
  122. float: left;
  123. }
  124. div.jp-interface ul.jp-controls a {
  125. display:block;
  126. overflow:hidden;
  127. text-indent:-9999px;
  128. }
  129. a.jp-play,
  130. a.jp-pause {
  131. width:40px;
  132. height:40px;
  133. }
  134. a.jp-play {
  135. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 0 no-repeat;
  136. }
  137. a.jp-play:hover {
  138. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -41px 0 no-repeat;
  139. }
  140. a.jp-pause {
  141. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -42px no-repeat;
  142. display: none;
  143. }
  144. a.jp-pause:hover {
  145. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -41px -42px no-repeat;
  146. }
  147. a.jp-stop, a.jp-previous, a.jp-next {
  148. width:28px;
  149. height:28px;
  150. margin-top:6px;
  151. }
  152. a.jp-stop {
  153. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -83px no-repeat;
  154. margin-left:10px;
  155. }
  156. a.jp-stop:hover {
  157. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -29px -83px no-repeat;
  158. }
  159. a.jp-previous {
  160. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -112px no-repeat;
  161. }
  162. a.jp-previous:hover {
  163. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -29px -112px no-repeat;
  164. }
  165. a.jp-next {
  166. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -141px no-repeat;
  167. }
  168. a.jp-next:hover {
  169. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -29px -141px no-repeat;
  170. }
  171. /* @end */
  172. /* @group progress bar */
  173. div.jp-progress {
  174. overflow:hidden;
  175. background-color: #ddd;
  176. }
  177. div.jp-audio div.jp-progress {
  178. position: absolute;
  179. top:32px;
  180. height:15px;
  181. }
  182. div.jp-audio div.jp-type-single div.jp-progress {
  183. left:110px;
  184. width:186px;
  185. }
  186. div.jp-audio div.jp-type-playlist div.jp-progress {
  187. left:166px;
  188. width:130px;
  189. }
  190. div.jp-video div.jp-progress {
  191. top:0px;
  192. left:0px;
  193. width:100%;
  194. height:10px;
  195. }
  196. div.jp-seek-bar {
  197. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -202px repeat-x;
  198. width:0px;
  199. height:100%;
  200. cursor: pointer;
  201. }
  202. div.jp-play-bar {
  203. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -218px repeat-x ;
  204. width:0px;
  205. height:100%;
  206. }
  207. /* The seeking class is added/removed inside jPlayer */
  208. div.jp-seeking-bg {
  209. background: url("jplayer.blue.monday.seeking.gif");
  210. }
  211. /* @end */
  212. /* @group volume controls */
  213. a.jp-mute,
  214. a.jp-unmute,
  215. a.jp-volume-max {
  216. width:18px;
  217. height:15px;
  218. margin-top:12px;
  219. }
  220. div.jp-audio div.jp-type-single a.jp-mute,
  221. div.jp-audio div.jp-type-single a.jp-unmute {
  222. margin-left: 210px;
  223. }
  224. div.jp-audio div.jp-type-playlist a.jp-mute,
  225. div.jp-audio div.jp-type-playlist a.jp-unmute {
  226. margin-left: 154px;
  227. }
  228. div.jp-audio-stream div.jp-type-single a.jp-mute,
  229. div.jp-audio-stream div.jp-type-single a.jp-unmute {
  230. margin-left:10px;
  231. }
  232. div.jp-audio a.jp-volume-max,
  233. div.jp-audio-stream a.jp-volume-max {
  234. margin-left: 56px;
  235. }
  236. div.jp-video a.jp-mute,
  237. div.jp-video a.jp-unmute,
  238. div.jp-video a.jp-volume-max {
  239. position: absolute;
  240. top:12px;
  241. margin-top:0;
  242. }
  243. div.jp-video a.jp-mute,
  244. div.jp-video a.jp-unmute {
  245. left: 50px;
  246. }
  247. div.jp-video a.jp-volume-max {
  248. left: 134px;
  249. }
  250. a.jp-mute {
  251. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -170px no-repeat;
  252. }
  253. a.jp-mute:hover {
  254. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -19px -170px no-repeat;
  255. }
  256. a.jp-unmute {
  257. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -60px -170px no-repeat;
  258. display: none;
  259. }
  260. a.jp-unmute:hover {
  261. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -79px -170px no-repeat;
  262. }
  263. a.jp-volume-max {
  264. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -186px no-repeat;
  265. }
  266. a.jp-volume-max:hover {
  267. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -19px -186px no-repeat;
  268. }
  269. div.jp-volume-bar {
  270. position: absolute;
  271. overflow:hidden;
  272. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -250px repeat-x;
  273. width:46px;
  274. height:5px;
  275. cursor: pointer;
  276. }
  277. div.jp-audio div.jp-volume-bar {
  278. top:37px;
  279. left:330px;
  280. }
  281. div.jp-audio-stream div.jp-volume-bar {
  282. top:37px;
  283. left:92px;
  284. }
  285. div.jp-video div.jp-volume-bar {
  286. top:17px;
  287. left:72px;
  288. }
  289. div.jp-volume-bar-value {
  290. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -256px repeat-x;
  291. width:0px;
  292. height:5px;
  293. }
  294. /* @end */
  295. /* @group current time and duration */
  296. div.jp-audio div.jp-time-holder {
  297. position:absolute;
  298. top:50px;
  299. }
  300. div.jp-audio div.jp-type-single div.jp-time-holder {
  301. left:110px;
  302. width:186px;
  303. }
  304. div.jp-audio div.jp-type-playlist div.jp-time-holder {
  305. left:166px;
  306. width:130px;
  307. }
  308. div.jp-current-time,
  309. div.jp-duration {
  310. width:60px;
  311. font-size:.64em;
  312. font-style:oblique;
  313. }
  314. div.jp-current-time {
  315. float: left;
  316. display:inline;
  317. }
  318. div.jp-duration {
  319. float: right;
  320. display:inline;
  321. text-align: right;
  322. }
  323. div.jp-video div.jp-current-time {
  324. margin-left:20px;
  325. }
  326. div.jp-video div.jp-duration {
  327. margin-right:20px;
  328. }
  329. /* @end */
  330. /* @group playlist */
  331. div.jp-title {
  332. font-weight:bold;
  333. text-align:center;
  334. }
  335. div.jp-title,
  336. div.jp-playlist {
  337. width:100%;
  338. background-color:#ccc;
  339. /*border-top:1px solid #009be3;*/
  340. }
  341. div.jp-type-single div.jp-title,
  342. div.jp-type-playlist div.jp-title,
  343. div.jp-type-single div.jp-playlist {
  344. border-top:none;
  345. }
  346. div.jp-title ul,
  347. div.jp-playlist ul {
  348. list-style-type:none;
  349. margin:0;
  350. padding:0 20px;
  351. font-size:.72em;
  352. }
  353. div.jp-title li {
  354. padding:5px 0;
  355. font-weight:bold;
  356. }
  357. div.jp-playlist li {
  358. padding:5px 0 4px 20px;
  359. /*border-bottom:1px solid #eee;*/
  360. }
  361. div.jp-playlist li div {
  362. display:inline;
  363. }
  364. /* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
  365. div.jp-type-playlist div.jp-playlist li:last-child {
  366. padding:5px 0 5px 20px;
  367. border-bottom:none;
  368. }
  369. div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
  370. list-style-type:square;
  371. list-style-position:inside;
  372. padding-left:7px;
  373. }
  374. div.jp-type-playlist div.jp-playlist a {
  375. color: #333;
  376. text-decoration: none;
  377. }
  378. div.jp-type-playlist div.jp-playlist a:hover {
  379. color:#0d88c1;
  380. }
  381. div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
  382. color:#0d88c1;
  383. }
  384. div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
  385. float:right;
  386. display:inline;
  387. text-align:right;
  388. margin-right:10px;
  389. font-weight:bold;
  390. color:#666;
  391. }
  392. div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
  393. color:#0d88c1;
  394. }
  395. div.jp-type-playlist div.jp-playlist span.jp-free-media {
  396. float:right;
  397. display:inline;
  398. text-align:right;
  399. margin-right:10px;
  400. }
  401. div.jp-type-playlist div.jp-playlist span.jp-free-media a{
  402. color:#666;
  403. }
  404. div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
  405. color:#0d88c1;
  406. }
  407. span.jp-artist {
  408. font-size:.8em;
  409. color:#666;
  410. }
  411. /* @end */
  412. div.jp-video-play {
  413. width:100%;
  414. overflow:hidden; /* Important for nested negative margins to work in modern browsers */
  415. cursor:pointer;
  416. background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
  417. }
  418. div.jp-video-270p div.jp-video-play {
  419. margin-top:-270px;
  420. height:270px;
  421. }
  422. div.jp-video-360p div.jp-video-play {
  423. margin-top:-360px;
  424. height:360px;
  425. }
  426. div.jp-video-full div.jp-video-play {
  427. height:100%;
  428. }
  429. a.jp-video-play-icon {
  430. position:relative;
  431. display:block;
  432. width: 112px;
  433. height: 100px;
  434. margin-left:-56px;
  435. margin-top:-50px;
  436. left:50%;
  437. top:50%;
  438. background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
  439. text-indent:-9999px;
  440. }
  441. div.jp-video-play:hover a.jp-video-play-icon {
  442. background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
  443. }
  444. div.jp-jplayer audio,
  445. div.jp-jplayer {
  446. width:0px;
  447. height:0px;
  448. }
  449. div.jp-jplayer {
  450. background-color: #000000;
  451. }
  452. /* @group TOGGLES */
  453. /* The audio toggles are nested inside jp-time-holder */
  454. ul.jp-toggles {
  455. list-style-type:none;
  456. padding:0;
  457. margin:0 auto;
  458. overflow:hidden;
  459. }
  460. div.jp-audio .jp-type-single ul.jp-toggles {
  461. width:25px;
  462. }
  463. div.jp-audio .jp-type-playlist ul.jp-toggles {
  464. width:55px;
  465. margin: 0;
  466. position: absolute;
  467. left: 325px;
  468. top: 50px;
  469. }
  470. div.jp-video ul.jp-toggles {
  471. margin-top:10px;
  472. width:100px;
  473. }
  474. ul.jp-toggles li {
  475. display:block;
  476. float:right;
  477. }
  478. ul.jp-toggles li a {
  479. display:block;
  480. width:25px;
  481. height:18px;
  482. text-indent:-9999px;
  483. line-height:100%; /* need this for IE6 */
  484. }
  485. a.jp-full-screen {
  486. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -310px no-repeat;
  487. margin-left: 20px;
  488. }
  489. a.jp-full-screen:hover {
  490. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -30px -310px no-repeat;
  491. }
  492. a.jp-restore-screen {
  493. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -60px -310px no-repeat;
  494. margin-left: 20px;
  495. }
  496. a.jp-restore-screen:hover {
  497. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -90px -310px no-repeat;
  498. }
  499. a.jp-repeat {
  500. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -290px no-repeat;
  501. }
  502. a.jp-repeat:hover {
  503. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -30px -290px no-repeat;
  504. }
  505. a.jp-repeat-off {
  506. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -60px -290px no-repeat;
  507. }
  508. a.jp-repeat-off:hover {
  509. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -90px -290px no-repeat;
  510. }
  511. a.jp-shuffle {
  512. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") 0 -270px no-repeat;
  513. margin-left: 5px;
  514. }
  515. a.jp-shuffle:hover {
  516. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -30px -270px no-repeat;
  517. }
  518. a.jp-shuffle-off {
  519. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -60px -270px no-repeat;
  520. margin-left: 5px;
  521. }
  522. a.jp-shuffle-off:hover {
  523. background: url("/jplayer/skin/blue.monday/jplayer.blue.monday.jpg") -90px -270px no-repeat;
  524. }
  525. /* @end */
  526. /* @group NO SOLUTION error feedback */
  527. .jp-no-solution {
  528. padding:5px;
  529. font-size:.8em;
  530. background-color:#eee;
  531. border:2px solid #009be3;
  532. color:#000;
  533. display:none;
  534. }
  535. .jp-no-solution a {
  536. color:#000;
  537. }
  538. .jp-no-solution span {
  539. font-size:1em;
  540. display:block;
  541. text-align:center;
  542. font-weight:bold;
  543. }
  544. /* @end */