js2/mwEmbed/skins/kskin/playerSkin.css

   1 /*
   2 * K-skin player
   3 */
   4 .k-player {
   5         color: white;
   6 }
   7
   8 /* large play button */
   9 .k-player .play-btn-large {
  10         width: 120px;
  11         height: 55px;
  12         background: url(images/ksprite.png) no-repeat 28px -433px;
  13         position: absolute;
  14         cursor: pointer;
  15         border: none;
  16 }  /*.ui-state-default */
  17 .k-player .play-btn-large.ui-state-hover {
  18         background: url(images/ksprite.png) no-repeat 28px -377px;
  19 }
  20
  21 /* control icons: */
  22 .k-player .ui-state-default .ui-icon,.k-player .ui-state-hover .ui-icon
  23         {
  24         background: transparent url(images/ksprite.png) no-repeat scroll 0 -48px
  25                 ;
  26 }
  27
  28 .k-player .ui-state-default .ui-icon-arrow-4-diag {
  29         background-position: 0 -32px;
  30 }  /* fullscreen */
  31 .k-player .ui-state-hover .ui-icon-arrow-4-diag {
  32         background-position: -16px -32px;
  33 }
  34
  35 .k-player .ui-state-hover .ui-icon-volume-on{
  36         background-position: -16px -48px;
  37 }
  38
  39 /* cc icon */
  40 .k-player .ui-state-default .ui-icon-comment {
  41         background-position: 0px -65px;
  42 }
  43 .k-player .ui-state-hover .ui-icon-comment {
  44         background-position: -17px -65px;
  45 }
  46
  47 .k-player .ui-state-default .ui-icon-play {
  48         background: url(images/ksprite.png) no-repeat 0 0;
  49 }
  50
  51 .k-player .ui-state-hover .ui-icon-play {
  52         background-position: -16px 0;
  53 }
  54
  55 .k-player .ui-state-default .ui-icon-pause {
  56         background: url(images/ksprite.png) no-repeat 0 -17px;
  57 }
  58
  59 .k-player .ui-state-hover .ui-icon-pause {
  60         background-position: -16px -17px;
  61 }
  62
  63 .k-player .control-bar {
  64         border: 0px;
  65         height: 21px;
  66         padding: 2px 0 0 6px;
  67         margin-top: 0px;
  68         background: url(images/ksprite.png) repeat-x 0 -81px;
  69         font: normal 11px arial, sans-serif;
  70         color: #555;
  71 }
  72
  73 .k-player .play_head {
  74         background: url("images/ksprite.png") repeat-x scroll 0 -350px
  75                 transparent;
  76         display: inline;
  77         float: left;
  78         margin-left: 10px;
  79         border: 1px solid #EEEEEE;
  80         height: 8px;
  81         margin: 6px 10px 0 7px;
  82         position: relative;
  83 }
  84
  85 .k-player .play_head .ui-slider-handle {
  86         background: url("images/ksprite.png") no-repeat scroll -67px -341px
  87                 transparent;
  88         border: 1px solid #888888;
  89         display: block;
  90         height: 8px;
  91         margin: -1px 0 0 -5px;
  92         position: absolute;
  93         top: 0;
  94         width: 8px;
  95         cursor: pointer;
  96 }
  97
  98 .k-player .time-disp {
  99         border: medium none;
 100         display: inline;
 101         color: #555555;
 102         font: 11px arial, sans-serif;
 103         line-height: 20px;
 104         overflow: hidden;
 105         width: 39px;
 106         float: right;
 107 }
 108
 109 .k-player .lButton {
 110         cursor: pointer;
 111         float: left;
 112         list-style: none outside none;
 113         margin: 2px;
 114         padding: 0px 0;
 115         width: 24px;
 116         height: 16px;
 117         position: relative;
 118         background: none repeat scroll 0 0 transparent;
 119         border: medium none;
 120 }
 121
 122 .k-player .rButton {
 123         cursor: pointer;
 124         float: right;
 125         list-style: none outside none;
 126         margin: 2px;
 127         padding: 0px 0;
 128         width: 23px;
 129         height: 16px;
 130         position: relative;
 131         background: none repeat scroll 0 0 transparent;
 132         border: medium none;
 133 }
 134
 135 .k-player .k-options {
 136         border: 1px solid #AAAAAA !important;
 137         color: #555555;
 138         float: right;
 139         height: 22px;
 140         margin-top: -2px;
 141         margin-right: 0px;
 142         width: 50px;
 143         float: right;
 144         background: none repeat scroll 0 0 transparent;
 145         font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
 146         font-size: 11px;
 147         text-transform: uppercase;
 148 }
 149
 150 .k-player .k-options span {
 151         position: relative;
 152         top: 4px;
 153         left: 7px;
 154 }
 155
 156 .k-player .k-menu-screens {
 157         float: left;
 158         font-size: 11px;
 159         padding: 13px 10px 15px 15px;
 160         width: 320px;
 161 }
 162
 163 .k-player ul.k-menu-bar {
 164         background: url("images/ksprite.png") no-repeat scroll -99px -104px
 165                 transparent;
 166         bottom: 5px;
 167         height: 128px;
 168         list-style: none outside none;
 169         padding: 0 0 5px;
 170         position: absolute;
 171         right: 0;
 172 }
 173
 174 .k-player .k-menu {
 175         background: none repeat scroll 0 0 #181818;
 176         border: medium none;
 177         display: none;
 178         height: 300px;
 179         left: 0;
 180         opacity: 0.9;
 181         position: absolute;
 182         top: 0;
 183         width: 400px;
 184         z-index: 999;
 185 }
 186
 187 .k-player .k-menu-bar li a {
 188         background: url("images/ksprite.png") no-repeat scroll -51px -110px
 189                 transparent;
 190         display: block;
 191         height: 32px;
 192         margin-left: 1px;
 193         overflow: hidden;
 194         text-indent: 99999px;
 195         width: 49px;
 196 }
 197
 198 .k-menu-bar li a:hover {
 199         background-position: -1px -110px;
 200 }
 201
 202 .k-menu-bar li.k-download-btn a {
 203         background-position: -51px -203px;
 204 }
 205
 206 .k-menu-bar li.k-download-btn a:hover {
 207         background-position: -1px -203px;
 208 }
 209
 210 .k-menu-bar li.k-share-btn a {
 211         background-position: -51px -172px;
 212 }
 213
 214 .k-menu-bar li.k-share-btn a:hover {
 215         background-position: -1px -172px;
 216 }
 217
 218 .k-menu-bar li.k-credits-btn a {
 219         background-position: -51px -141px;
 220 }
 221
 222 .k-menu-bar li.k-credits-btn a:hover {
 223         background-position: -1px -141px;
 224 }
 225
 226 .k-menu-screens {
 227         width: 320px;
 228         padding: 13px 10px 15px 15px;
 229         float: left;
 230 }  /* w & h inline via jq */
 231 .k-menu-screens h2 {
 232         padding: 0 0 5px 1px;
 233         clear: both;
 234         font-size: 12px;
 235         color: #666;
 236 }
 237
 238 .k-menu-screens p {
 239         margin: 6px 0;
 240 }
 241
 242 .k-menu-screens a {;
 243
 244 }
 245
 246 .k-menu-screens a img {
 247         border: none;
 248 }
 249
 250 .k-menu-screens ul {
 251         padding: 0;
 252         margin: 6px 0 0;
 253         list-style: none outside none;
 254 }
 255
 256 .k-edit-screen {
 257         width: 370px;
 258         height: 223px;
 259         padding-top: 77px;
 260         text-align: center;
 261         background: #181818;
 262         color: #fff;
 263 }
 264
 265 .k-edit-screen div {
 266
 267 }
 268
 269 .k-edit-screen a {
 270         color: #7BB8FC;
 271 }
 272
 273 .k-edit-screen a img {
 274         border: none;
 275 }
 276
 277 .k-menu-screens {
 278         width: 320px;
 279         padding: 13px 10px 15px 15px;
 280         float: left;
 281 }  /* w & h inline via jq */
 282 .k-menu-screens h2 {
 283         padding: 0 0 5px 1px;
 284         clear: both;
 285         font-size: 12px;
 286         color: #666;
 287 }
 288
 289 .k-menu-screens p {
 290         margin: 6px 0;
 291 }
 292
 293 .k-menu-screens a {;
 294
 295 }
 296
 297 .k-menu-screens a img {
 298         border: none;
 299 }
 300
 301 .k-menu-screens ul {
 302         padding: 0;
 303         margin: 6px 0 0;
 304         list-style: none outside none;
 305 }
 306
 307 .k-menu-screens li {
 308         height: 14px;
 309         margin-bottom: 6px;
 310 }
 311
 312 .k-menu-screens li a {
 313         padding-left: 22px;
 314         background: url(images/ksprite.png) no-repeat -85px -274px;
 315         text-decoration: none;
 316 }
 317
 318 .k-menu-screens li a.active,.k-menu-screens li a:hover .active {
 319         background-position: -85px -247px;
 320 }
 321
 322 .k-menu-screens li a:hover {
 323         background-position: -85px -260px;
 324 }
 325
 326 .k-menu-screens a {
 327         color: #BBBBBB;
 328 }
 329
 330 .k-menu textarea {
 331         background: none repeat scroll 0 0 transparent;
 332         border-color: #000000 -moz-use-text-color -moz-use-text-color #000000;
 333         border-style: solid none none solid;
 334         border-width: 2px medium medium 2px;
 335         color: #CCCCCC;
 336         font: 11px arial, sans-serif;
 337         height: 15px;
 338         overflow: hidden;
 339         padding-left: 2px;
 340         width: 100%;
 341 }
 342
 343 .menu-screen.menu-share button {
 344         background: url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
 345         border: 1px solid #000000;
 346         color: #000000;
 347         float: right;
 348         height: 34px;
 349         padding: 0 5px 3px;
 350         width: 84px;
 351         font-size: 1em;
 352 }
 353
 354 .k-player .menu-screen.menu-share div.ui-state-highlight {
 355         background: none repeat scroll 0 0 transparent;
 356         border-color: #554926;
 357         color: #FFE96E;
 358         float: left;
 359         padding: 2px 5px;
 360 }
 361
 362 .k-player .menu-screen.menu-share div.ui-state-highlight a {
 363         color: #FFE96E;
 364         font-weight: bold;
 365 }
 366
 367 .k-player .volume_control {
 368         margin-right: 0px;
 369         width: 16px;
 370 }
 371
 372 .k-player .volume_control span {
 373         margin-right: 0px;
 374 }
 375
 376 .k-player .volume-slider {
 377         width: 30px;
 378 }
 379
 380 .k-player .volume-slider .ui-slider-range {
 381         -moz-border-radius: 0 0 0 0;
 382         background: url("images/ksprite.png") repeat-x scroll -66px -306px
 383                 transparent;
 384         height: 17px;
 385         position: absolute;
 386 }
 387
 388 .k-player .volume-slider a.ui-slider-handle {
 389         background: none repeat scroll 0 0 transparent;
 390         border: medium none;
 391         display: block;
 392         height: 18px;
 393         margin: -3px 5px 0 -1px;
 394         position: absolute;
 395         width: 8px;
 396 }
 397
 398 .k-player .credits_box {
 399         background-attachment:scroll;
 400         background-color:white;
 401         background-image:none;
 402         background-position:0 0;
 403         bottom:30px;
 404         left:15px;
 405         position:absolute;
 406         right:61px;
 407         top:48px;
 408 }
 409 .k-player .credits_box a{
 410         color:#666;
 411 }
 412 .k-player .creditline img {
 413         float: left;
 414         width: 90px;
 415         margin: 4px;
 416 }
 417
 418 .k-player .k-attribution{
 419         position:absolute;
 420         bottom: 15px;
 421         right : 62px;
 422         background: url("images/kaltura_open_source_video_platform.png");
 423         width : 51px;
 424         height : 12px;
 425         cursor: pointer;
 426 }