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