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