PageRenderTime 26ms CodeModel.GetById 3ms RepoModel.GetById 0ms app.codeStats 0ms

/static/css/jPlayer/jplayer.blue.monday.css

https://github.com/kawazrepos/Kommonz
CSS | 448 lines | 403 code | 10 blank | 35 comment | 0 complexity | fb5446fd5b9bec9f8f09cda98593271c MD5 | raw file
  1. /*
  2. * Skin for jPlayer Plugin (jQuery JavaScript Library)
  3. * http://www.happyworm.com/jquery/jplayer
  4. *
  5. * Skin Name: Blue Monday
  6. *
  7. * Copyright (c) 2010 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: 3.0 (jPlayer 2.0.0)
  14. * Date: 20th December 2010
  15. */
  16. div.jp-audio,
  17. div.jp-video {
  18. /* Edit the font-size to counteract inherited font sizing.
  19. * Eg. 1.25em = 1 / 0.8em
  20. */
  21. font-size:1em; /* No parent CSS that can effect the size in these demos */
  22. font-family:Verdana, Arial, sans-serif;
  23. line-height:1.6;
  24. color: #666;
  25. }
  26. div.jp-audio {
  27. width:420px;
  28. }
  29. div.jp-video-270p {
  30. width:480px;
  31. }
  32. div.jp-video-360p {
  33. width:640px;
  34. }
  35. div.jp-interface {
  36. position: relative;
  37. background-color:#eee;
  38. /* width:418px; */
  39. width:100%;
  40. border:1px solid #009be3;
  41. }
  42. div.jp-audio div.jp-type-single div.jp-interface {
  43. height:80px;
  44. border-bottom:none;
  45. }
  46. div.jp-audio div.jp-type-playlist div.jp-interface {
  47. height:80px;
  48. }
  49. div.jp-video div.jp-type-single div.jp-interface {
  50. height:60px;
  51. border-bottom:none;
  52. }
  53. div.jp-video div.jp-type-playlist div.jp-interface {
  54. height:60px;
  55. }
  56. div.jp-interface ul.jp-controls {
  57. list-style-type:none;
  58. padding:0;
  59. margin: 0;
  60. }
  61. div.jp-interface ul.jp-controls li {
  62. /* position: absolute; */
  63. display:inline;
  64. }
  65. div.jp-interface ul.jp-controls a {
  66. position: absolute;
  67. overflow:hidden;
  68. text-indent:-9999px;
  69. }
  70. a.jp-play,
  71. a.jp-pause {
  72. width:40px;
  73. height:40px;
  74. z-index:1;
  75. }
  76. div.jp-audio div.jp-type-single a.jp-play,
  77. div.jp-audio div.jp-type-single a.jp-pause {
  78. top:20px;
  79. left:40px;
  80. }
  81. div.jp-audio div.jp-type-playlist a.jp-play,
  82. div.jp-audio div.jp-type-playlist a.jp-pause {
  83. top:20px;
  84. left:48px;
  85. }
  86. div.jp-video a.jp-play,
  87. div.jp-video a.jp-pause {
  88. top:15px;
  89. }
  90. div.jp-video-270p div.jp-type-single a.jp-play,
  91. div.jp-video-270p div.jp-type-single a.jp-pause {
  92. left:195px;
  93. }
  94. div.jp-video-270p div.jp-type-playlist a.jp-play,
  95. div.jp-video-270p div.jp-type-playlist a.jp-pause {
  96. left:220px;
  97. }
  98. div.jp-video-360p div.jp-type-single a.jp-play,
  99. div.jp-video-360p div.jp-type-single a.jp-pause {
  100. left:275px;
  101. }
  102. div.jp-video-360p div.jp-type-playlist a.jp-play,
  103. div.jp-video-360p div.jp-type-playlist a.jp-pause {
  104. left:300px;
  105. }
  106. a.jp-play {
  107. background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
  108. }
  109. a.jp-play:hover {
  110. background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
  111. }
  112. a.jp-pause {
  113. background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
  114. display: none;
  115. }
  116. a.jp-pause:hover {
  117. background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
  118. }
  119. div.jp-audio div.jp-type-single a.jp-stop {
  120. top:26px;
  121. left:90px;
  122. }
  123. div.jp-audio div.jp-type-playlist a.jp-stop {
  124. top:26px;
  125. left:126px;
  126. }
  127. div.jp-video a.jp-stop {
  128. top:21px;
  129. }
  130. div.jp-video-270p div.jp-type-single a.jp-stop {
  131. left:245px;
  132. }
  133. div.jp-video-270p div.jp-type-playlist a.jp-stop {
  134. left:298px;
  135. }
  136. div.jp-video-360p div.jp-type-single a.jp-stop {
  137. left:325px;
  138. }
  139. div.jp-video-360p div.jp-type-playlist a.jp-stop {
  140. left:378px;
  141. }
  142. a.jp-stop {
  143. background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
  144. width:28px;
  145. height:28px;
  146. z-index:1;
  147. }
  148. a.jp-stop:hover {
  149. background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
  150. }
  151. div.jp-audio div.jp-type-playlist a.jp-previous {
  152. left:20px;
  153. top:26px;
  154. }
  155. div.jp-video div.jp-type-playlist a.jp-previous {
  156. top:21px;
  157. }
  158. div.jp-video-270p div.jp-type-playlist a.jp-previous {
  159. left:192px;
  160. }
  161. div.jp-video-360p div.jp-type-playlist a.jp-previous {
  162. left:272px;
  163. }
  164. a.jp-previous {
  165. background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
  166. width:28px;
  167. height:28px;
  168. }
  169. a.jp-previous:hover {
  170. background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
  171. }
  172. div.jp-audio div.jp-type-playlist a.jp-next {
  173. left:88px;
  174. top:26px;
  175. }
  176. div.jp-video div.jp-type-playlist a.jp-next {
  177. top:21px;
  178. }
  179. div.jp-video-270p div.jp-type-playlist a.jp-next {
  180. left:260px;
  181. }
  182. div.jp-video-360p div.jp-type-playlist a.jp-next {
  183. left:340px;
  184. }
  185. a.jp-next {
  186. background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
  187. width:28px;
  188. height:28px;
  189. }
  190. a.jp-next:hover {
  191. background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
  192. }
  193. div.jp-progress {
  194. position: absolute;
  195. overflow:hidden;
  196. background-color: #ddd;
  197. }
  198. div.jp-audio div.jp-type-single div.jp-progress {
  199. top:32px;
  200. left:130px;
  201. width:122px;
  202. height:15px;
  203. }
  204. div.jp-audio div.jp-type-playlist div.jp-progress {
  205. top:32px;
  206. left:164px;
  207. width:122px;
  208. height:15px;
  209. }
  210. div.jp-video div.jp-progress {
  211. top:0px;
  212. left:0px;
  213. width:100%;
  214. height:10px;
  215. }
  216. div.jp-seek-bar {
  217. background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
  218. width:0px;
  219. /* height:15px; */
  220. height:100%;
  221. cursor: pointer;
  222. }
  223. div.jp-play-bar {
  224. background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
  225. width:0px;
  226. /* height:15px; */
  227. height:100%;
  228. }
  229. /* The seeking class is added/removed inside jPlayer */
  230. div.jp-seeking-bg {
  231. background: url("pbar-ani.gif");
  232. }
  233. a.jp-mute,
  234. a.jp-unmute {
  235. width:18px;
  236. height:15px;
  237. }
  238. div.jp-audio div.jp-type-single a.jp-mute,
  239. div.jp-audio div.jp-type-single a.jp-unmute {
  240. top:32px;
  241. left:274px;
  242. }
  243. div.jp-audio div.jp-type-playlist a.jp-mute,
  244. div.jp-audio div.jp-type-playlist a.jp-unmute {
  245. top:32px;
  246. left:296px;
  247. }
  248. div.jp-video a.jp-mute,
  249. div.jp-video a.jp-unmute {
  250. top:27px;
  251. }
  252. div.jp-video-270p div.jp-type-single a.jp-mute,
  253. div.jp-video-270p div.jp-type-single a.jp-unmute {
  254. left:304px;
  255. }
  256. div.jp-video-270p div.jp-type-playlist a.jp-unmute,
  257. div.jp-video-270p div.jp-type-playlist a.jp-mute {
  258. left:363px;
  259. }
  260. div.jp-video-360p div.jp-type-single a.jp-mute,
  261. div.jp-video-360p div.jp-type-single a.jp-unmute {
  262. left:384px;
  263. }
  264. div.jp-video-360p div.jp-type-playlist a.jp-mute,
  265. div.jp-video-360p div.jp-type-playlist a.jp-unmute {
  266. left:443px;
  267. }
  268. a.jp-mute {
  269. background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
  270. }
  271. a.jp-mute:hover {
  272. background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
  273. }
  274. a.jp-unmute {
  275. background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
  276. display: none;
  277. }
  278. a.jp-unmute:hover {
  279. background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
  280. }
  281. div.jp-volume-bar {
  282. position: absolute;
  283. overflow:hidden;
  284. background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
  285. width:46px;
  286. height:5px;
  287. cursor: pointer;
  288. }
  289. div.jp-audio div.jp-type-single div.jp-volume-bar {
  290. top:37px;
  291. left:302px;
  292. }
  293. div.jp-audio div.jp-type-playlist div.jp-volume-bar {
  294. top:37px;
  295. left:324px;
  296. }
  297. div.jp-video div.jp-volume-bar {
  298. top:32px;
  299. }
  300. div.jp-video-270p div.jp-type-single div.jp-volume-bar {
  301. left:332px;
  302. }
  303. div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {
  304. left:391px;
  305. }
  306. div.jp-video-360p div.jp-type-single div.jp-volume-bar {
  307. left:412px;
  308. }
  309. div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {
  310. left:471px;
  311. }
  312. div.jp-volume-bar-value {
  313. background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
  314. width:0px;
  315. height:5px;
  316. }
  317. div.jp-current-time,
  318. div.jp-duration {
  319. position: absolute;
  320. font-size:.64em;
  321. font-style:oblique;
  322. }
  323. div.jp-duration {
  324. text-align: right;
  325. }
  326. div.jp-audio div.jp-type-single div.jp-current-time,
  327. div.jp-audio div.jp-type-single div.jp-duration {
  328. top:49px;
  329. left:130px;
  330. width:122px;
  331. }
  332. div.jp-audio div.jp-type-playlist div.jp-current-time,
  333. div.jp-audio div.jp-type-playlist div.jp-duration {
  334. top:49px;
  335. left:164px;
  336. width:122px;
  337. }
  338. div.jp-video div.jp-current-time,
  339. div.jp-video div.jp-duration {
  340. top:10px;
  341. left:0px;
  342. width:98%;
  343. padding:0 1%;
  344. }
  345. div.jp-playlist {
  346. /* width:418px; */
  347. width:100%;
  348. background-color:#ccc;
  349. border:1px solid #009be3;
  350. border-top:none;
  351. }
  352. div.jp-playlist ul {
  353. list-style-type:none;
  354. margin:0;
  355. padding:0 20px;
  356. /* background-color:#ccc; */
  357. /* border:1px solid #009be3; */
  358. /* border-top:none; */
  359. /* width:378px; */
  360. font-size:.72em;
  361. }
  362. div.jp-type-single div.jp-playlist li {
  363. padding:5px 0 5px 20px;
  364. font-weight:bold;
  365. }
  366. div.jp-type-playlist div.jp-playlist li {
  367. padding:5px 0 4px 20px;
  368. border-bottom:1px solid #eee;
  369. }
  370. /*
  371. div.jp-video div.jp-playlist li {
  372. padding:5px 0 5px 20px;
  373. font-weight:bold;
  374. }
  375. */
  376. div.jp-type-playlist div.jp-playlist li.jp-playlist-last {
  377. padding:5px 0 5px 20px;
  378. border-bottom:none;
  379. }
  380. div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
  381. list-style-type:square;
  382. list-style-position:inside;
  383. padding-left:8px;
  384. }
  385. div.jp-type-playlist div.jp-playlist a {
  386. color: #666;
  387. text-decoration: none;
  388. }
  389. div.jp-type-playlist div.jp-playlist a:hover {
  390. color:#0d88c1;
  391. }
  392. div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
  393. color:#0d88c1;
  394. }
  395. div.jp-type-playlist div.jp-playlist div.jp-free-media {
  396. display:inline;
  397. margin-left:20px;
  398. }
  399. div.jp-video div.jp-video-play {
  400. background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center;
  401. /* position: relative; */
  402. position: absolute;
  403. cursor:pointer;
  404. z-index:2;
  405. }
  406. div.jp-video div.jp-video-play:hover {
  407. background: transparent url("jplayer.blue.monday.video.play.hover.png") no-repeat center;
  408. }
  409. div.jp-video-270p div.jp-video-play {
  410. top:-270px;
  411. width:480px;
  412. height:270px;
  413. }
  414. div.jp-video-360p div.jp-video-play {
  415. top:-360px;
  416. width:640px;
  417. height:360px;
  418. }
  419. div.jp-jplayer {
  420. width:0px;
  421. height:0px;
  422. }
  423. div.jp-video div.jp-jplayer {
  424. border:1px solid #009be3;
  425. border-bottom:none;
  426. z-index:1;
  427. }
  428. div.jp-video-270p div.jp-jplayer {
  429. width:480px;
  430. height:270px;
  431. }
  432. div.jp-video-360p div.jp-jplayer {
  433. width:640px;
  434. height:360px;
  435. }
  436. div.jp-jplayer {
  437. background-color: #000000;
  438. }