apps/catalogue/static/jplayer/jplayer.blue.monday.css

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