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