PageRenderTime 45ms CodeModel.GetById 12ms RepoModel.GetById 0ms app.codeStats 0ms

/media/foundry/2.1/scripts_/jplayer/skin/pink.flag/jplayer.pink.flag.css

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