html/skin/pink.flag/css/jplayer.pink.flag.css

   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 */
 281 div.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
 292 div.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 */
 457 div.jp-type-playlist div.jp-playlist li:first-child {
 458   border-top: none;
 459   padding-top: 3px; }
 460
 461 div.jp-type-playlist div.jp-playlist li:last-child {
 462   border-bottom: none;
 463   padding-bottom: 3px; }
 464
 465 div.jp-type-playlist div.jp-playlist a {
 466   color: #fff;
 467   text-decoration: none; }
 468
 469 div.jp-type-playlist div.jp-playlist a:hover {
 470   color: #e892e9; }
 471
 472 div.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
 479 div.jp-type-playlist div.jp-playlist li.jp-playlist-current a {
 480   color: #e892e9; }
 481
 482 div.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
 490 div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
 491   color: #E892E9; }
 492
 493 div.jp-type-playlist div.jp-playlist span.jp-free-media {
 494   float: right;
 495   display: inline;
 496   text-align: right;
 497   color: #8C7A99; }
 498
 499 div.jp-type-playlist div.jp-playlist span.jp-free-media a {
 500   color: #8C7A99; }
 501
 502 div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover {
 503   color: #E892E9; }
 504
 505 span.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 */