annotate static/js/jplayer/skins/blue.monday/jplayer.blue.monday.css @ 481:9f888dbe61ce

Fixing #230; add a scrollbar to the PM popup dialog if necessary. This wasn't as easy as I thought. Had to wrap the PM text in a div with its styling (max-height and overflow). If I then resized the dialog, I'd get two scrollbars. So for now, made the dialog non-resizable.
author Brian Neal <bgneal@gmail.com>
date Fri, 07 Oct 2011 02:11:33 +0000
parents 9175392da056
children a747215e9a5a
rev   line source
bgneal@402 1 /*
bgneal@402 2 * Skin for jPlayer Plugin (jQuery JavaScript Library)
bgneal@402 3 * http://www.happyworm.com/jquery/jplayer
bgneal@402 4 *
bgneal@402 5 * Skin Name: Blue Monday
bgneal@402 6 *
bgneal@402 7 * Copyright (c) 2010 Happyworm Ltd
bgneal@402 8 * Dual licensed under the MIT and GPL licenses.
bgneal@402 9 * - http://www.opensource.org/licenses/mit-license.php
bgneal@402 10 * - http://www.gnu.org/copyleft/gpl.html
bgneal@402 11 *
bgneal@402 12 * Author: Silvia Benvenuti
bgneal@402 13 * Skin Version: 3.0 (jPlayer 2.0.0)
bgneal@402 14 * Date: 20th December 2010
bgneal@402 15 */
bgneal@402 16
bgneal@402 17 div.jp-audio,
bgneal@402 18 div.jp-video {
bgneal@402 19
bgneal@402 20 /* Edit the font-size to counteract inherited font sizing.
bgneal@402 21 * Eg. 1.25em = 1 / 0.8em
bgneal@402 22 */
bgneal@402 23
bgneal@402 24 font-size:1.25em;
bgneal@402 25
bgneal@402 26 font-family:Verdana, Arial, sans-serif;
bgneal@402 27 line-height:1.6;
bgneal@402 28 color: #666;
bgneal@402 29 }
bgneal@402 30 div.jp-audio {
bgneal@402 31 width:420px;
bgneal@402 32 }
bgneal@402 33 div.jp-video-270p {
bgneal@402 34 width:480px;
bgneal@402 35 }
bgneal@402 36 div.jp-video-360p {
bgneal@402 37 width:640px;
bgneal@402 38 }
bgneal@402 39 div.jp-interface {
bgneal@402 40 position: relative;
bgneal@402 41 background-color:#eee;
bgneal@402 42 /* width:418px; */
bgneal@402 43 width:100%;
bgneal@402 44 border:1px solid #009be3;
bgneal@402 45 }
bgneal@402 46 div.jp-audio div.jp-type-single div.jp-interface {
bgneal@402 47 height:80px;
bgneal@402 48 border-bottom:none;
bgneal@402 49 }
bgneal@402 50 div.jp-audio div.jp-type-playlist div.jp-interface {
bgneal@402 51 height:80px;
bgneal@402 52 }
bgneal@402 53 div.jp-video div.jp-type-single div.jp-interface {
bgneal@402 54 height:60px;
bgneal@402 55 border-bottom:none;
bgneal@402 56 }
bgneal@402 57 div.jp-video div.jp-type-playlist div.jp-interface {
bgneal@402 58 height:60px;
bgneal@402 59 }
bgneal@402 60 div.jp-interface ul.jp-controls {
bgneal@402 61 list-style-type:none;
bgneal@402 62 padding:0;
bgneal@402 63 margin: 0;
bgneal@402 64 }
bgneal@402 65 div.jp-interface ul.jp-controls li {
bgneal@402 66 /* position: absolute; */
bgneal@402 67 display:inline;
bgneal@402 68 }
bgneal@402 69 div.jp-interface ul.jp-controls a {
bgneal@402 70 position: absolute;
bgneal@402 71 overflow:hidden;
bgneal@402 72 text-indent:-9999px;
bgneal@402 73 }
bgneal@402 74 a.jp-play,
bgneal@402 75 a.jp-pause {
bgneal@402 76 width:40px;
bgneal@402 77 height:40px;
bgneal@402 78 z-index:1;
bgneal@402 79 }
bgneal@402 80 div.jp-audio div.jp-type-single a.jp-play,
bgneal@402 81 div.jp-audio div.jp-type-single a.jp-pause {
bgneal@402 82 top:20px;
bgneal@402 83 left:40px;
bgneal@402 84 }
bgneal@402 85 div.jp-audio div.jp-type-playlist a.jp-play,
bgneal@402 86 div.jp-audio div.jp-type-playlist a.jp-pause {
bgneal@402 87 top:20px;
bgneal@402 88 left:48px;
bgneal@402 89 }
bgneal@402 90 div.jp-video a.jp-play,
bgneal@402 91 div.jp-video a.jp-pause {
bgneal@402 92 top:15px;
bgneal@402 93 }
bgneal@402 94 div.jp-video-270p div.jp-type-single a.jp-play,
bgneal@402 95 div.jp-video-270p div.jp-type-single a.jp-pause {
bgneal@402 96 left:195px;
bgneal@402 97 }
bgneal@402 98 div.jp-video-270p div.jp-type-playlist a.jp-play,
bgneal@402 99 div.jp-video-270p div.jp-type-playlist a.jp-pause {
bgneal@402 100 left:220px;
bgneal@402 101 }
bgneal@402 102 div.jp-video-360p div.jp-type-single a.jp-play,
bgneal@402 103 div.jp-video-360p div.jp-type-single a.jp-pause {
bgneal@402 104 left:275px;
bgneal@402 105 }
bgneal@402 106 div.jp-video-360p div.jp-type-playlist a.jp-play,
bgneal@402 107 div.jp-video-360p div.jp-type-playlist a.jp-pause {
bgneal@402 108 left:300px;
bgneal@402 109 }
bgneal@402 110 a.jp-play {
bgneal@402 111 background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
bgneal@402 112 }
bgneal@402 113 a.jp-play:hover {
bgneal@402 114 background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
bgneal@402 115 }
bgneal@402 116 a.jp-pause {
bgneal@402 117 background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
bgneal@402 118 display: none;
bgneal@402 119 }
bgneal@402 120 a.jp-pause:hover {
bgneal@402 121 background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
bgneal@402 122 }
bgneal@402 123 div.jp-audio div.jp-type-single a.jp-stop {
bgneal@402 124 top:26px;
bgneal@402 125 left:90px;
bgneal@402 126 }
bgneal@402 127 div.jp-audio div.jp-type-playlist a.jp-stop {
bgneal@402 128 top:26px;
bgneal@402 129 left:126px;
bgneal@402 130 }
bgneal@402 131 div.jp-video a.jp-stop {
bgneal@402 132 top:21px;
bgneal@402 133 }
bgneal@402 134 div.jp-video-270p div.jp-type-single a.jp-stop {
bgneal@402 135 left:245px;
bgneal@402 136 }
bgneal@402 137 div.jp-video-270p div.jp-type-playlist a.jp-stop {
bgneal@402 138 left:298px;
bgneal@402 139 }
bgneal@402 140 div.jp-video-360p div.jp-type-single a.jp-stop {
bgneal@402 141 left:325px;
bgneal@402 142 }
bgneal@402 143 div.jp-video-360p div.jp-type-playlist a.jp-stop {
bgneal@402 144 left:378px;
bgneal@402 145 }
bgneal@402 146 a.jp-stop {
bgneal@402 147 background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
bgneal@402 148 width:28px;
bgneal@402 149 height:28px;
bgneal@402 150 z-index:1;
bgneal@402 151 }
bgneal@402 152 a.jp-stop:hover {
bgneal@402 153 background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
bgneal@402 154 }
bgneal@402 155 div.jp-audio div.jp-type-playlist a.jp-previous {
bgneal@402 156 left:20px;
bgneal@402 157 top:26px;
bgneal@402 158 }
bgneal@402 159 div.jp-video div.jp-type-playlist a.jp-previous {
bgneal@402 160 top:21px;
bgneal@402 161 }
bgneal@402 162 div.jp-video-270p div.jp-type-playlist a.jp-previous {
bgneal@402 163 left:192px;
bgneal@402 164 }
bgneal@402 165 div.jp-video-360p div.jp-type-playlist a.jp-previous {
bgneal@402 166 left:272px;
bgneal@402 167 }
bgneal@402 168 a.jp-previous {
bgneal@402 169 background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
bgneal@402 170 width:28px;
bgneal@402 171 height:28px;
bgneal@402 172 }
bgneal@402 173 a.jp-previous:hover {
bgneal@402 174 background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
bgneal@402 175 }
bgneal@402 176 div.jp-audio div.jp-type-playlist a.jp-next {
bgneal@402 177 left:88px;
bgneal@402 178 top:26px;
bgneal@402 179 }
bgneal@402 180 div.jp-video div.jp-type-playlist a.jp-next {
bgneal@402 181 top:21px;
bgneal@402 182 }
bgneal@402 183 div.jp-video-270p div.jp-type-playlist a.jp-next {
bgneal@402 184 left:260px;
bgneal@402 185 }
bgneal@402 186 div.jp-video-360p div.jp-type-playlist a.jp-next {
bgneal@402 187 left:340px;
bgneal@402 188 }
bgneal@402 189 a.jp-next {
bgneal@402 190 background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
bgneal@402 191 width:28px;
bgneal@402 192 height:28px;
bgneal@402 193 }
bgneal@402 194 a.jp-next:hover {
bgneal@402 195 background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
bgneal@402 196 }
bgneal@402 197 div.jp-progress {
bgneal@402 198 position: absolute;
bgneal@402 199 overflow:hidden;
bgneal@402 200 background-color: #ddd;
bgneal@402 201 }
bgneal@402 202 div.jp-audio div.jp-type-single div.jp-progress {
bgneal@402 203 top:32px;
bgneal@402 204 left:130px;
bgneal@402 205 width:122px;
bgneal@402 206 height:15px;
bgneal@402 207 }
bgneal@402 208 div.jp-audio div.jp-type-playlist div.jp-progress {
bgneal@402 209 top:32px;
bgneal@402 210 left:164px;
bgneal@402 211 width:122px;
bgneal@402 212 height:15px;
bgneal@402 213 }
bgneal@402 214 div.jp-video div.jp-progress {
bgneal@402 215 top:0px;
bgneal@402 216 left:0px;
bgneal@402 217 width:100%;
bgneal@402 218 height:10px;
bgneal@402 219 }
bgneal@402 220 div.jp-seek-bar {
bgneal@402 221 background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
bgneal@402 222 width:0px;
bgneal@402 223 /* height:15px; */
bgneal@402 224 height:100%;
bgneal@402 225 cursor: pointer;
bgneal@402 226 }
bgneal@402 227 div.jp-play-bar {
bgneal@402 228 background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
bgneal@402 229 width:0px;
bgneal@402 230 /* height:15px; */
bgneal@402 231 height:100%;
bgneal@402 232 }
bgneal@402 233
bgneal@402 234 /* The seeking class is added/removed inside jPlayer */
bgneal@402 235 div.jp-seeking-bg {
bgneal@402 236 background: url("pbar-ani.gif");
bgneal@402 237 }
bgneal@402 238
bgneal@402 239 a.jp-mute,
bgneal@402 240 a.jp-unmute {
bgneal@402 241 width:18px;
bgneal@402 242 height:15px;
bgneal@402 243 }
bgneal@402 244 div.jp-audio div.jp-type-single a.jp-mute,
bgneal@402 245 div.jp-audio div.jp-type-single a.jp-unmute {
bgneal@402 246 top:32px;
bgneal@402 247 left:274px;
bgneal@402 248 }
bgneal@402 249 div.jp-audio div.jp-type-playlist a.jp-mute,
bgneal@402 250 div.jp-audio div.jp-type-playlist a.jp-unmute {
bgneal@402 251 top:32px;
bgneal@402 252 left:296px;
bgneal@402 253 }
bgneal@402 254 div.jp-video a.jp-mute,
bgneal@402 255 div.jp-video a.jp-unmute {
bgneal@402 256 top:27px;
bgneal@402 257 }
bgneal@402 258 div.jp-video-270p div.jp-type-single a.jp-mute,
bgneal@402 259 div.jp-video-270p div.jp-type-single a.jp-unmute {
bgneal@402 260 left:304px;
bgneal@402 261 }
bgneal@402 262 div.jp-video-270p div.jp-type-playlist a.jp-unmute,
bgneal@402 263 div.jp-video-270p div.jp-type-playlist a.jp-mute {
bgneal@402 264 left:363px;
bgneal@402 265 }
bgneal@402 266 div.jp-video-360p div.jp-type-single a.jp-mute,
bgneal@402 267 div.jp-video-360p div.jp-type-single a.jp-unmute {
bgneal@402 268 left:384px;
bgneal@402 269 }
bgneal@402 270 div.jp-video-360p div.jp-type-playlist a.jp-mute,
bgneal@402 271 div.jp-video-360p div.jp-type-playlist a.jp-unmute {
bgneal@402 272 left:443px;
bgneal@402 273 }
bgneal@402 274 a.jp-mute {
bgneal@402 275 background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
bgneal@402 276 }
bgneal@402 277 a.jp-mute:hover {
bgneal@402 278 background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
bgneal@402 279 }
bgneal@402 280 a.jp-unmute {
bgneal@402 281 background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
bgneal@402 282 display: none;
bgneal@402 283 }
bgneal@402 284 a.jp-unmute:hover {
bgneal@402 285 background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
bgneal@402 286 }
bgneal@402 287 div.jp-volume-bar {
bgneal@402 288 position: absolute;
bgneal@402 289 overflow:hidden;
bgneal@402 290 background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
bgneal@402 291 width:46px;
bgneal@402 292 height:5px;
bgneal@402 293 cursor: pointer;
bgneal@402 294 }
bgneal@402 295 div.jp-audio div.jp-type-single div.jp-volume-bar {
bgneal@402 296 top:37px;
bgneal@402 297 left:302px;
bgneal@402 298 }
bgneal@402 299 div.jp-audio div.jp-type-playlist div.jp-volume-bar {
bgneal@402 300 top:37px;
bgneal@402 301 left:324px;
bgneal@402 302 }
bgneal@402 303 div.jp-video div.jp-volume-bar {
bgneal@402 304 top:32px;
bgneal@402 305 }
bgneal@402 306 div.jp-video-270p div.jp-type-single div.jp-volume-bar {
bgneal@402 307 left:332px;
bgneal@402 308 }
bgneal@402 309 div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {
bgneal@402 310 left:391px;
bgneal@402 311 }
bgneal@402 312 div.jp-video-360p div.jp-type-single div.jp-volume-bar {
bgneal@402 313 left:412px;
bgneal@402 314 }
bgneal@402 315 div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {
bgneal@402 316 left:471px;
bgneal@402 317 }
bgneal@402 318 div.jp-volume-bar-value {
bgneal@402 319 background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
bgneal@402 320 width:0px;
bgneal@402 321 height:5px;
bgneal@402 322 }
bgneal@402 323 div.jp-current-time,
bgneal@402 324 div.jp-duration {
bgneal@402 325 position: absolute;
bgneal@402 326 font-size:.64em;
bgneal@402 327 font-style:oblique;
bgneal@402 328 }
bgneal@402 329 div.jp-duration {
bgneal@402 330 text-align: right;
bgneal@402 331 }
bgneal@402 332 div.jp-audio div.jp-type-single div.jp-current-time,
bgneal@402 333 div.jp-audio div.jp-type-single div.jp-duration {
bgneal@402 334 top:49px;
bgneal@402 335 left:130px;
bgneal@402 336 width:122px;
bgneal@402 337 }
bgneal@402 338 div.jp-audio div.jp-type-playlist div.jp-current-time,
bgneal@402 339 div.jp-audio div.jp-type-playlist div.jp-duration {
bgneal@402 340 top:49px;
bgneal@402 341 left:164px;
bgneal@402 342 width:122px;
bgneal@402 343 }
bgneal@402 344 div.jp-video div.jp-current-time,
bgneal@402 345 div.jp-video div.jp-duration {
bgneal@402 346 top:10px;
bgneal@402 347 left:0px;
bgneal@402 348 width:98%;
bgneal@402 349 padding:0 1%;
bgneal@402 350 }
bgneal@402 351 div.jp-playlist {
bgneal@402 352 /* width:418px; */
bgneal@402 353 width:100%;
bgneal@402 354 background-color:#ccc;
bgneal@402 355 border:1px solid #009be3;
bgneal@402 356 border-top:none;
bgneal@402 357 }
bgneal@402 358 div.jp-playlist ul {
bgneal@402 359 list-style-type:none;
bgneal@402 360 margin:0;
bgneal@402 361 padding:0 20px;
bgneal@402 362 /* background-color:#ccc; */
bgneal@402 363 /* border:1px solid #009be3; */
bgneal@402 364 /* border-top:none; */
bgneal@402 365 /* width:378px; */
bgneal@402 366 font-size:.72em;
bgneal@402 367 }
bgneal@402 368
bgneal@402 369
bgneal@402 370 div.jp-type-single div.jp-playlist li {
bgneal@402 371 padding:5px 0 5px 20px;
bgneal@402 372 font-weight:bold;
bgneal@402 373 }
bgneal@402 374 div.jp-type-playlist div.jp-playlist li {
bgneal@402 375 padding:5px 0 4px 20px;
bgneal@402 376 border-bottom:1px solid #eee;
bgneal@402 377 }
bgneal@402 378 /*
bgneal@402 379 div.jp-video div.jp-playlist li {
bgneal@402 380 padding:5px 0 5px 20px;
bgneal@402 381 font-weight:bold;
bgneal@402 382 }
bgneal@402 383 */
bgneal@402 384 div.jp-type-playlist div.jp-playlist li.jp-playlist-last {
bgneal@402 385 padding:5px 0 5px 20px;
bgneal@402 386 border-bottom:none;
bgneal@402 387 }
bgneal@402 388 div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
bgneal@402 389 list-style-type:square;
bgneal@402 390 list-style-position:inside;
bgneal@402 391 padding-left:8px;
bgneal@402 392 }
bgneal@402 393 div.jp-type-playlist div.jp-playlist a {
bgneal@402 394 color: #666;
bgneal@402 395 text-decoration: none;
bgneal@402 396 }
bgneal@402 397 div.jp-type-playlist div.jp-playlist a:hover {
bgneal@402 398 color:#0d88c1;
bgneal@402 399 }
bgneal@402 400 div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
bgneal@402 401 color:#0d88c1;
bgneal@402 402 }
bgneal@402 403 div.jp-type-playlist div.jp-playlist div.jp-free-media {
bgneal@402 404 display:inline;
bgneal@402 405 margin-left:20px;
bgneal@402 406 }
bgneal@402 407
bgneal@402 408 div.jp-video div.jp-video-play {
bgneal@402 409 background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center;
bgneal@402 410 /* position: relative; */
bgneal@402 411 position: absolute;
bgneal@402 412 cursor:pointer;
bgneal@402 413 z-index:2;
bgneal@402 414 }
bgneal@402 415 div.jp-video div.jp-video-play:hover {
bgneal@402 416 background: transparent url("jplayer.blue.monday.video.play.hover.png") no-repeat center;
bgneal@402 417 }
bgneal@402 418 div.jp-video-270p div.jp-video-play {
bgneal@402 419 top:-270px;
bgneal@402 420 width:480px;
bgneal@402 421 height:270px;
bgneal@402 422 }
bgneal@402 423 div.jp-video-360p div.jp-video-play {
bgneal@402 424 top:-360px;
bgneal@402 425 width:640px;
bgneal@402 426 height:360px;
bgneal@402 427 }
bgneal@402 428
bgneal@402 429 div.jp-jplayer {
bgneal@402 430 width:0px;
bgneal@402 431 height:0px;
bgneal@402 432 }
bgneal@402 433 div.jp-video div.jp-jplayer {
bgneal@402 434 border:1px solid #009be3;
bgneal@402 435 border-bottom:none;
bgneal@402 436 z-index:1;
bgneal@402 437 }
bgneal@402 438 div.jp-video-270p div.jp-jplayer {
bgneal@402 439 width:480px;
bgneal@402 440 height:270px;
bgneal@402 441 }
bgneal@402 442 div.jp-video-360p div.jp-jplayer {
bgneal@402 443 width:640px;
bgneal@402 444 height:360px;
bgneal@402 445 }
bgneal@402 446 div.jp-jplayer {
bgneal@402 447 background-color: #000000;
bgneal@402 448 }