Mercurial > public > sg101

comparison static/js/jplayer/skins/blue.monday/jplayer.blue.monday.css @ 402:9175392da056

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