html/skin/blue.monday/css/jplayer.blue.monday.css

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