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