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 */ 368div.jp-type-playlist div.jp-playlist li:last-child { 369 padding: 5px 0 5px 20px; 370 border-bottom: none; } 371 372div.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 377div.jp-type-playlist div.jp-playlist a { 378 color: #333; 379 text-decoration: none; } 380 381div.jp-type-playlist div.jp-playlist a:hover { 382 color: #0d88c1; } 383 384div.jp-type-playlist div.jp-playlist a.jp-playlist-current { 385 color: #0d88c1; } 386 387div.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 395div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover { 396 color: #0d88c1; } 397 398div.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 404div.jp-type-playlist div.jp-playlist span.jp-free-media a { 405 color: #666; } 406 407div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover { 408 color: #0d88c1; } 409 410span.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 */ 552