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