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