Mercurial > public > bravenewsurf

comparison bns_website/static/jplayer_skin/blue.monday/jplayer.blue.monday.css @ 51:6c7467599fa9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
I added the jquery plugin jplayer to use for playing samples of the album. For now I just used some of the songs linked to by the jplayer demo, but I also picked a couple songs at random from my iTunes library. Rather than add them to the repository I just named them 1.mp3, 1.m4a, 1.ogg and 2.mp3, 2.m4a, 2.ogg and anybody that wants to test the player will have to add some random songs themselves. I only added the "blue monday" player skin because I personally think it looks the best of the examples they supply, but we could change that or roll our own if needed.
author Bob Mourlam <bob.mourlam@gmail.com>
date Sun, 13 Nov 2011 17:01:36 -0600
parents
children
comparison
equal deleted inserted replaced
50:4614ebe73263 51:6c7467599fa9
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-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: 4.0 (jPlayer 2.1.0)
14 * Date: 1st September 2011
15 */
16
17 div.jp-audio,
18 div.jp-video {
19
20 /* Edit the font-size to counteract inherited font sizing.
21 * Eg. 1.25em = 1 / 0.8em
22 */
23
24 font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
25
26 font-family:Verdana, Arial, sans-serif;
27 line-height:1.6;
28 color: #666;
29 border:1px solid #009be3;
30 background-color:#eee;
31 position:relative;
32 }
33 div.jp-audio {
34 width:420px;
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
50 div.jp-video-full div.jp-jplayer {
51 top: 0;
52 left: 0;
53 position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
54 overflow: hidden;
55 z-index:1000;
56 }
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:1000;
65 }
66
67 div.jp-video-full div.jp-interface {
68 position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
69 bottom: 0;
70 left: 0;
71 z-index:1000;
72 }
73
74 div.jp-interface {
75 position: relative;
76 background-color:#eee;
77 width:100%;
78 }
79
80 div.jp-audio div.jp-type-single div.jp-interface {
81 height:80px;
82 }
83 div.jp-audio div.jp-type-playlist div.jp-interface {
84 height:80px;
85 }
86
87 div.jp-video div.jp-interface {
88 border-top:1px solid #009be3;
89 }
90
91 /* @group CONTROLS */
92
93 div.jp-controls-holder {
94 clear: both;
95 width:440px;
96 margin:0 auto;
97 position: relative;
98 overflow:hidden;
99 top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
100 }
101
102 div.jp-interface ul.jp-controls {
103 list-style-type:none;
104 margin:0;
105 padding: 0;
106 overflow:hidden;
107 }
108
109 div.jp-audio ul.jp-controls {
110 width: 380px;
111 padding:20px 20px 0 20px;
112 }
113
114 div.jp-video div.jp-type-single ul.jp-controls {
115 width: 78px;
116 margin-left: 200px;
117 }
118
119 div.jp-video div.jp-type-playlist ul.jp-controls {
120 width: 134px;
121 margin-left: 172px;
122 }
123 div.jp-video ul.jp-controls,
124 div.jp-interface ul.jp-controls li {
125 display:inline;
126 float: left;
127 }
128
129 div.jp-interface ul.jp-controls a {
130 display:block;
131 overflow:hidden;
132 text-indent:-9999px;
133 }
134 a.jp-play,
135 a.jp-pause {
136 width:40px;
137 height:40px;
138 }
139
140 a.jp-play {
141 background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
142 }
143 a.jp-play:hover {
144 background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
145 }
146 a.jp-pause {
147 background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
148 display: none;
149 }
150 a.jp-pause:hover {
151 background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
152 }
153
154 a.jp-stop, a.jp-previous, a.jp-next {
155 width:28px;
156 height:28px;
157 margin-top:6px;
158 }
159
160 a.jp-stop {
161 background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
162 margin-left:10px;
163 }
164
165 a.jp-stop:hover {
166 background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
167 }
168
169 a.jp-previous {
170 background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
171 }
172 a.jp-previous:hover {
173 background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
174 }
175
176 a.jp-next {
177 background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
178 }
179 a.jp-next:hover {
180 background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
181 }
182
183 /* @end */
184
185 /* @group progress bar */
186
187 div.jp-progress {
188 overflow:hidden;
189 background-color: #ddd;
190 }
191 div.jp-audio div.jp-progress {
192 position: absolute;
193 top:32px;
194 height:15px;
195 }
196 div.jp-audio div.jp-type-single div.jp-progress {
197 left:110px;
198 width:186px;
199 }
200 div.jp-audio div.jp-type-playlist div.jp-progress {
201 left:166px;
202 width:130px;
203 }
204 div.jp-video div.jp-progress {
205 top:0px;
206 left:0px;
207 width:100%;
208 height:10px;
209 }
210 div.jp-seek-bar {
211 background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
212 width:0px;
213 height:100%;
214 cursor: pointer;
215 }
216 div.jp-play-bar {
217 background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
218 width:0px;
219 height:100%;
220 }
221
222 /* The seeking class is added/removed inside jPlayer */
223 div.jp-seeking-bg {
224 background: url("jplayer.blue.monday.seeking.gif");
225 }
226
227 /* @end */
228
229 /* @group volume controls */
230
231
232 a.jp-mute,
233 a.jp-unmute,
234 a.jp-volume-max {
235 width:18px;
236 height:15px;
237 margin-top:12px;
238 }
239
240 div.jp-audio div.jp-type-single a.jp-mute,
241 div.jp-audio div.jp-type-single a.jp-unmute {
242 margin-left: 210px;
243 }
244
245 div.jp-audio div.jp-type-playlist a.jp-mute,
246 div.jp-audio div.jp-type-playlist a.jp-unmute {
247 margin-left: 154px;
248 }
249
250 div.jp-audio a.jp-volume-max {
251 margin-left: 56px;
252 }
253
254 div.jp-video a.jp-mute,
255 div.jp-video a.jp-unmute,
256 div.jp-video a.jp-volume-max {
257 position: absolute;
258 top:12px;
259 margin-top:0;
260 }
261
262 div.jp-video a.jp-mute,
263 div.jp-video a.jp-unmute {
264 left: 50px;
265 }
266
267
268 div.jp-video a.jp-volume-max {
269 left: 134px;
270 }
271
272 a.jp-mute {
273 background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
274 }
275 a.jp-mute:hover {
276 background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
277 }
278 a.jp-unmute {
279 background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat;
280 display: none;
281 }
282 a.jp-unmute:hover {
283 background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat;
284 }
285
286 a.jp-volume-max {
287 background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
288 }
289 a.jp-volume-max:hover {
290 background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
291 }
292
293 div.jp-volume-bar {
294 position: absolute;
295 overflow:hidden;
296 background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
297 width:46px;
298 height:5px;
299 cursor: pointer;
300 }
301 div.jp-audio div.jp-volume-bar {
302 top:37px;
303 left:330px;
304 }
305 div.jp-video div.jp-volume-bar {
306 top:17px;
307 left:72px;
308 }
309 div.jp-volume-bar-value {
310 background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
311 width:0px;
312 height:5px;
313 }
314
315 /* @end */
316
317 /* @group current time and duration */
318
319 div.jp-audio div.jp-time-holder {
320 position:absolute;
321 top:50px;
322 }
323 div.jp-audio div.jp-type-single div.jp-time-holder {
324 left:110px;
325 width:186px;
326 }
327 div.jp-audio div.jp-type-playlist div.jp-time-holder {
328 left:166px;
329 width:130px;
330 }
331
332 div.jp-current-time,
333 div.jp-duration {
334 width:60px;
335 font-size:.64em;
336 font-style:oblique;
337 }
338 div.jp-current-time {
339 float: left;
340 display:inline;
341 }
342 div.jp-duration {
343 float: right;
344 display:inline;
345 text-align: right;
346 }
347
348 div.jp-video div.jp-current-time {
349 margin-left:20px;
350 }
351 div.jp-video div.jp-duration {
352 margin-right:20px;
353 }
354
355 /* @end */
356
357 /* @group playlist */
358
359 div.jp-title {
360 font-weight:bold;
361 text-align:center;
362 }
363
364 div.jp-title,
365 div.jp-playlist {
366 width:100%;
367 background-color:#ccc;
368 border-top:1px solid #009be3;
369 }
370 div.jp-type-single div.jp-title,
371 div.jp-type-playlist div.jp-title,
372 div.jp-type-single div.jp-playlist {
373 border-top:none;
374 }
375 div.jp-title ul,
376 div.jp-playlist ul {
377 list-style-type:none;
378 margin:0;
379 padding:0 20px;
380 font-size:.72em;
381 }
382
383 div.jp-title li {
384 padding:5px 0;
385 font-weight:bold;
386 }
387 div.jp-playlist li {
388 padding:5px 0 4px 20px;
389 border-bottom:1px solid #eee;
390 }
391
392 div.jp-playlist li div {
393 display:inline;
394 }
395
396 /* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
397
398 div.jp-type-playlist div.jp-playlist li:last-child {
399 padding:5px 0 5px 20px;
400 border-bottom:none;
401 }
402 div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
403 list-style-type:square;
404 list-style-position:inside;
405 padding-left:7px;
406 }
407 div.jp-type-playlist div.jp-playlist a {
408 color: #333;
409 text-decoration: none;
410 }
411 div.jp-type-playlist div.jp-playlist a:hover {
412 color:#0d88c1;
413 }
414 div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
415 color:#0d88c1;
416 }
417
418 div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
419 float:right;
420 display:inline;
421 text-align:right;
422 margin-right:10px;
423 font-weight:bold;
424 color:#666;
425 }
426 div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
427 color:#0d88c1;
428 }
429 div.jp-type-playlist div.jp-playlist span.jp-free-media {
430 float:right;
431 display:inline;
432 text-align:right;
433 margin-right:10px;
434 }
435 div.jp-type-playlist div.jp-playlist span.jp-free-media a{
436 color:#666;
437 }
438 div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
439 color:#0d88c1;
440 }
441 span.jp-artist {
442 font-size:.8em;
443 color:#666;
444 }
445
446 /* @end */
447
448 div.jp-video-play {
449 position:absolute;
450 top:0;
451 left:0;
452 width:100%;
453 cursor:pointer;
454 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. */
455 }
456 div.jp-video-270p div.jp-video-play {
457 height:270px;
458 }
459 div.jp-video-360p div.jp-video-play {
460 height:360px;
461 }
462 div.jp-video-full div.jp-video-play {
463 height:100%;
464 z-index:1000;
465 }
466 a.jp-video-play-icon {
467 position:relative;
468 display:block;
469 width: 112px;
470 height: 100px;
471
472 margin-left:-56px;
473 margin-top:-50px;
474 left:50%;
475 top:50%;
476
477 background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
478 text-indent:-9999px;
479 }
480 div.jp-video-play:hover a.jp-video-play-icon {
481 background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
482 }
483
484
485
486
487
488 div.jp-jplayer audio,
489 div.jp-jplayer {
490 width:0px;
491 height:0px;
492 }
493
494 div.jp-jplayer {
495 background-color: #000000;
496 }
497
498
499
500
501
502 /* @group TOGGLES */
503
504 /* The audio toggles are nested inside jp-time-holder */
505
506 ul.jp-toggles {
507 list-style-type:none;
508 padding:0;
509 margin:0 auto;
510 overflow:hidden;
511 }
512
513 div.jp-audio .jp-type-single ul.jp-toggles {
514 width:25px;
515 }
516 div.jp-audio .jp-type-playlist ul.jp-toggles {
517 width:55px;
518 margin: 0;
519 position: absolute;
520 left: 325px;
521 top: 50px;
522 }
523
524 div.jp-video ul.jp-toggles {
525 margin-top:10px;
526 width:100px;
527 }
528
529 ul.jp-toggles li {
530 display:block;
531 float:right;
532 }
533
534 ul.jp-toggles li a {
535 display:block;
536 width:25px;
537 height:18px;
538 text-indent:-9999px;
539 line-height:100%; /* need this for IE6 */
540 }
541
542 a.jp-full-screen {
543 background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
544 margin-left: 20px;
545 }
546
547 a.jp-full-screen:hover {
548 background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
549 }
550
551 a.jp-restore-screen {
552 background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
553 margin-left: 20px;
554 }
555
556 a.jp-restore-screen:hover {
557 background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
558 }
559
560 a.jp-repeat {
561 background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
562 }
563
564 a.jp-repeat:hover {
565 background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
566 }
567
568 a.jp-repeat-off {
569 background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
570 }
571
572 a.jp-repeat-off:hover {
573 background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
574 }
575
576 a.jp-shuffle {
577 background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
578 margin-left: 5px;
579 }
580
581 a.jp-shuffle:hover {
582 background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
583 }
584
585 a.jp-shuffle-off {
586 background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
587 margin-left: 5px;
588 }
589
590 a.jp-shuffle-off:hover {
591 background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
592 }
593
594
595 /* @end */
596
597 /* @group NO SOLUTION error feedback */
598
599 .jp-no-solution {
600 position:absolute;
601 width:390px;
602 margin-left:-202px;
603 left:50%;
604 top: 10px;
605
606 padding:5px;
607 font-size:.8em;
608 background-color:#eee;
609 border:2px solid #009be3;
610 color:#000;
611 display:none;
612 }
613
614 .jp-no-solution a {
615 color:#000;
616 }
617
618 .jp-no-solution span {
619 font-size:1em;
620 display:block;
621 text-align:center;
622 font-weight:bold;
623 }
624
625 /* @end */