From: Michael Dale Date: Wed, 28 Oct 2009 19:02:27 +0000 (+0000) Subject: * volume control / skin fixes to support both horz and vert volume control X-Git-Tag: 1.31.0-rc.0~39054 X-Git-Url: http://git.cyclocoop.org/?a=commitdiff_plain;h=56cfcc9f2c001625b135bf01d8429c53f3fdf546;p=lhc%2Fweb%2Fwiklou.git * volume control / skin fixes to support both horz and vert volume control --- diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js index 828ebe47fd..0dc72731eb 100644 --- a/js2/mwEmbed/libEmbedVideo/embedVideo.js +++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js @@ -1410,6 +1410,8 @@ embedVideo.prototype = { $j( '#mv_embedded_player_' + this.id ).html( this.getThumbnailHTML() ); this.paused = true; this.thumbnail_disp = true; + //make sure the ctrlBuilder remain active: + this.ctrlBuilder.addControlHooks(this); }, refreshControlsHTML:function(){ js_log('refreshControlsHTML::'); @@ -2004,17 +2006,15 @@ embedVideo.prototype = { this.update_interval = null; } }, - toggleMute:function(){ + toggleMute:function(){ var eid = (this.pc!=null)?this.pc.pp.id:this.id; - if(this.muted){ - this.muted=false; - $j('#volume_control_'+eid + ' span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on'); - $j('#volume_bar_'+eid).slider('value', 100); + if( this.muted ){ + this.muted=false; + $j('#' + eid + ' .volume-slider').slider('value', 100); this.updateVolumen(1); }else{ - this.muted=true; - $j('#volume_control_'+eid + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off'); - $j('#volume_bar_'+eid).slider('value', 0); + this.muted=true; + $j('#' + eid + ' .volume-slider').slider('value', 0); this.updateVolumen(0); } js_log('f:toggleMute::' + this.muted); @@ -2054,7 +2054,7 @@ embedVideo.prototype = { //do common monitor code like update the playhead and play status //plugin objects are responsible for updating currentTime monitor:function(){ - js_log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 ) + ' is seek: ' + this.seeking ); + //js_log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 ) + ' is seek: ' + this.seeking ); if( this.currentTime && this.currentTime > 0 && this.duration){ if( !this.userSlide && !this.seeking ){ if( this.start_offset ){ diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js index 499c8f4dc6..0e8c33c95b 100644 --- a/js2/mwEmbed/skins/ctrlBuilder.js +++ b/js2/mwEmbed/skins/ctrlBuilder.js @@ -252,34 +252,39 @@ ctrlBuilder.prototype = { doVolumeBinding:function(){ var embedObj = this.embedObj; var _this = this; - var $tp=$j('#' + embedObj.id); - //default volume binding: - var hoverOverDelay=false; + var $tp=$j('#' + embedObj.id); $tp.find('.volume_control').unbind().btnBind().click(function(){ + js_log('clicked volume control'); $j('#' +embedObj.id).get(0).toggleMute(); - }).hover( - function(){ - $j('#vol_container_' + embedObj.id).addClass('vol_container_top'); - //set to "below" if playing and embedType != native - if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){ - $j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below'); + }); + //add vertical volume display hover + if( this.volume_layout == 'vertical'){ + //default volume binding: + var hoverOverDelay = false; + var $tpvol = $tp.find('.vol_container'); + $tp.find('.volume_control').hover( + function(){ + $tpvol.addClass('vol_container_top'); + //set to "below" if playing and embedType != native + if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){ + $tpvol.removeClass('vol_container_top').addClass('vol_container_below'); + } + $tpvol.fadeIn('fast'); + hoverOverDelay = true; + }, + function(){ + hoverOverDelay= false; + setTimeout(function doHideVolume(){ + if(!hoverOverDelay){ + $tpvol.fadeOut('fast'); + } + }, 500); } - - $j('#vol_container_' + embedObj.id).fadeIn('fast'); - hoverOverDelay = true; - }, - function(){ - hoverOverDelay= false; - setTimeout(function doHideVolume(){ - if(!hoverOverDelay){ - $j('#vol_container_' + embedObj.id).fadeOut('fast'); - } - }, 500); - } - ); - //Volumen Slider - $j('#volume_bar_'+embedObj.id).slider({ - orientation: "vertical", + ); + } + + //setup slider: + var sliderConf = { range: "min", value: 80, min: 0, @@ -291,20 +296,20 @@ ctrlBuilder.prototype = { }, change:function(event, ui){ var perc = ui.value/100; - if (perc==0) { - $j('#' + embedObj.id + ' .volume_control span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off'); + if ( perc==0 ) { + $tp.find('.volume_control span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off'); }else{ - $j('#' + embedObj.id + ' .volume_control span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on'); - } - //only run the onChange event if done by a user slide: - if(embedObj.userSlide){ - embedObj.userSlide=false; - embedObj.seeking=true; - var perc = ui.value/100; - embedObj.updateVolumen(perc); + $tp.find('.volume_control span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on'); } + var perc = ui.value/100; + embedObj.updateVolumen(perc); } - }); + } + + if( this.volume_layout == 'vertical') + sliderConf['orientation'] = "vertical"; + + $tp.find( '.volume-slider' ).slider( sliderConf ); }, getMvBufferHtml:function(){ return '
'; if( ctrlObj.volume_layout == 'vertical'){ - o+=''; diff --git a/js2/mwEmbed/skins/kskin/kskin.js b/js2/mwEmbed/skins/kskin/kskin.js index 0f0a582993..e6ebe53974 100644 --- a/js2/mwEmbed/skins/kskin/kskin.js +++ b/js2/mwEmbed/skins/kskin/kskin.js @@ -110,33 +110,7 @@ var kskinConfig = { }); $tp.find('.play-btn-large').fadeOut('fast'); } - }); - - //slider: - $tp.find('.volume-slider').slider({ - range: "min", - value: 80, - min: 0, - max: 100, - slide: function(event, ui) { - embedObj.updateVolumen(ui.value/100); - }, - change: function(event, ui){ - var level = ui.value/100; - if (level==0) { - $tp.find('.k-volume span').addClass('ui-icon-volume-off'); - }else{ - $tp.find('.k-volume span').removeClass('ui-icon-volume-off'); - } - //only run the onChange event if done by a user slide: - if(embedObj.userSlide){ - embedObj.userSlide=false; - embedObj.seeking=true; -// var perc = ui.value/100; - embedObj.updateVolumen(level); - } - } - }); + }); } } \ No newline at end of file diff --git a/js2/mwEmbed/skins/kskin/playerSkin.css b/js2/mwEmbed/skins/kskin/playerSkin.css index 5acc6a380d..bd8663b092 100644 --- a/js2/mwEmbed/skins/kskin/playerSkin.css +++ b/js2/mwEmbed/skins/kskin/playerSkin.css @@ -1,235 +1,388 @@ /* * K-skin player */ +.k-player { + color: white; +} /* large play button */ -.k-player .play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer; border:none;} /*.ui-state-default */ -.k-player .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; } +.k-player .play-btn-large { + width: 120px; + height: 55px; + background: url(images/ksprite.png) no-repeat 28px -433px; + position: absolute; + cursor: pointer; + border: none; +} /*.ui-state-default */ +.k-player .play-btn-large.ui-state-hover { + background: url(images/ksprite.png) no-repeat 28px -377px; +} /* control icons: */ -.k-player .ui-state-default .ui-icon, .k-player .ui-state-hover .ui-icon {background:transparent url(images/ksprite.png) no-repeat scroll 0 -48px;} - -.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */ -.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;} -.k-player .ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;} -.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;} +.k-player .ui-state-default .ui-icon,.k-player .ui-state-hover .ui-icon + { + background: transparent url(images/ksprite.png) no-repeat scroll 0 -48px + ; +} + +.k-player .ui-state-default .ui-icon-arrow-4-diag { + background-position: 0 -32px; +} /* fullscreen */ +.k-player .ui-state-hover .ui-icon-arrow-4-diag { + background-position: -16px -32px; +} + +.k-player .ui-state-hover .ui-icon-volume-on{ + background-position: -16px -48px; +} + +.k-player .ui-state-default .ui-icon-play { + background: url(images/ksprite.png) no-repeat 0 0; +} + +.k-player .ui-state-hover .ui-icon-play { + background-position: -16px 0; +} -.k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;} -.k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;} +.k-player .ui-state-default .ui-icon-pause { + background: url(images/ksprite.png) no-repeat 0 -17px; +} -.k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;} -.k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;} +.k-player .ui-state-hover .ui-icon-pause { + background-position: -16px -17px; +} .k-player .control-bar { - border: 0px; - height:21px; - padding: 2px 0 0 6px; - margin-top:0px; - background: url(images/ksprite.png) repeat-x 0 -81px; - font: normal 11px arial,sans-serif; - color:#555; + border: 0px; + height: 21px; + padding: 2px 0 0 6px; + margin-top: 0px; + background: url(images/ksprite.png) repeat-x 0 -81px; + font: normal 11px arial, sans-serif; + color: #555; } .k-player .play_head { - background:url("images/ksprite.png") repeat-x scroll 0 -350px transparent; - display:inline; - float:left; - margin-left:10px; - border:1px solid #EEEEEE; - height:8px; - margin:6px 10px 0 7px; - position:relative; + background: url("images/ksprite.png") repeat-x scroll 0 -350px + transparent; + display: inline; + float: left; + margin-left: 10px; + border: 1px solid #EEEEEE; + height: 8px; + margin: 6px 10px 0 7px; + position: relative; } .k-player .play_head .ui-slider-handle { - background:url("images/ksprite.png") no-repeat scroll -67px -341px transparent; - border:1px solid #888888; - display:block; - height:8px; - margin:-1px 0 0 -5px; - position:absolute; - top:0; - width:8px; - cursor:pointer; + background: url("images/ksprite.png") no-repeat scroll -67px -341px + transparent; + border: 1px solid #888888; + display: block; + height: 8px; + margin: -1px 0 0 -5px; + position: absolute; + top: 0; + width: 8px; + cursor: pointer; } .k-player .time-disp { -border:medium none; -display:inline; -color:#555555; -font:11px arial,sans-serif; -line-height:20px; -overflow:hidden; -width:36px; + border: medium none; + display: inline; + color: #555555; + font: 11px arial, sans-serif; + line-height: 20px; + overflow: hidden; + width: 36px; + float: right; } .k-player .lButton { - cursor:pointer; - float:left; - list-style:none outside none; - margin:2px; - padding:0px 0; + cursor: pointer; + float: left; + list-style: none outside none; + margin: 2px; + padding: 0px 0; width: 24px; - height:16px; - position:relative; - background:none repeat scroll 0 0 transparent; - border:medium none; + height: 16px; + position: relative; + background: none repeat scroll 0 0 transparent; + border: medium none; } + .k-player .rButton { - cursor:pointer; - float:right; - list-style:none outside none; - margin:2px; - padding:0px 0; + cursor: pointer; + float: right; + list-style: none outside none; + margin: 2px; + padding: 0px 0; width: 23px; - height:16px; - position:relative; - background:none repeat scroll 0 0 transparent; - border:medium none; + height: 16px; + position: relative; + background: none repeat scroll 0 0 transparent; + border: medium none; } .k-player .k-options { - border:1px solid #AAAAAA !important; - color:#555555; - float:right; - height:22px; - margin-top:-2px; + border: 1px solid #AAAAAA !important; + color: #555555; + float: right; + height: 22px; + margin-top: -2px; margin-right: 0px; - width:50px; - float:right; - background:none repeat scroll 0 0 transparent; - font-family:Lucida Grande,Lucida Sans,Arial,sans-serif; - font-size:11px; - text-transform:uppercase; -} -.k-player .k-options span{ - position:relative; - top:4px; - left:7px; -} - -.k-player .k-menu-screens { - float:left; - font-size:11px; - padding:13px 10px 15px 15px; - width:320px; -} - -.k-player ul.k-menu-bar { - background:url("images/ksprite.png") no-repeat scroll -99px -104px transparent; - bottom:5px; - height:128px; - list-style:none outside none; - padding:0 0 5px; - position:absolute; - right:0; -} -.k-player .k-menu { - background:none repeat scroll 0 0 #181818; - border:medium none; - display:none; - height:300px; - left:0; - opacity:0.9; - position:absolute; - top:0; - width:400px; - z-index:999; + width: 50px; + float: right; + background: none repeat scroll 0 0 transparent; + font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; + font-size: 11px; + text-transform: uppercase; +} + +.k-player .k-options span { + position: relative; + top: 4px; + left: 7px; +} + +.k-player .k-menu-screens { + float: left; + font-size: 11px; + padding: 13px 10px 15px 15px; + width: 320px; +} + +.k-player ul.k-menu-bar { + background: url("images/ksprite.png") no-repeat scroll -99px -104px + transparent; + bottom: 5px; + height: 128px; + list-style: none outside none; + padding: 0 0 5px; + position: absolute; + right: 0; +} + +.k-player .k-menu { + background: none repeat scroll 0 0 #181818; + border: medium none; + display: none; + height: 300px; + left: 0; + opacity: 0.9; + position: absolute; + top: 0; + width: 400px; + z-index: 999; } + .k-player .k-menu-bar li a { - background:url("images/ksprite.png") no-repeat scroll -51px -110px transparent; - display:block; - height:32px; - margin-left:1px; - overflow:hidden; - text-indent:99999px; - width:49px; -} -.k-menu-bar li a:hover { background-position: -1px -110px;} -.k-menu-bar li.k-download-btn a { background-position: -51px -203px;} -.k-menu-bar li.k-download-btn a:hover { background-position: -1px -203px;} - -.k-menu-bar li.k-share-btn a { background-position: -51px -172px;} -.k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;} - -.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;} -.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;} - -.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */ -.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;} -.k-menu-screens p { margin: 6px 0;} -.k-menu-screens a { ;} -.k-menu-screens a img { border:none;} -.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;} - -.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;} -.k-edit-screen div { } -.k-edit-screen a { color:#7BB8FC;} -.k-edit-screen a img { border:none;} - -.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */ -.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;} -.k-menu-screens p { margin: 6px 0;} -.k-menu-screens a { ;} -.k-menu-screens a img { border:none;} -.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;} - -.k-menu-screens li { height:14px; margin-bottom:6px;} -.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;} -.k-menu-screens li a.active, .k-menu-screens li a:hover.active { background-position: -85px -247px;} -.k-menu-screens li a:hover { background-position: -85px -260px;} -.k-menu-screens a { color:#BBBBBB; } + background: url("images/ksprite.png") no-repeat scroll -51px -110px + transparent; + display: block; + height: 32px; + margin-left: 1px; + overflow: hidden; + text-indent: 99999px; + width: 49px; +} + +.k-menu-bar li a:hover { + background-position: -1px -110px; +} + +.k-menu-bar li.k-download-btn a { + background-position: -51px -203px; +} + +.k-menu-bar li.k-download-btn a:hover { + background-position: -1px -203px; +} + +.k-menu-bar li.k-share-btn a { + background-position: -51px -172px; +} + +.k-menu-bar li.k-share-btn a:hover { + background-position: -1px -172px; +} + +.k-menu-bar li.k-credits-btn a { + background-position: -51px -141px; +} + +.k-menu-bar li.k-credits-btn a:hover { + background-position: -1px -141px; +} + +.k-menu-screens { + width: 320px; + padding: 13px 10px 15px 15px; + float: left; +} /* w & h inline via jq */ +.k-menu-screens h2 { + padding: 0 0 5px 1px; + clear: both; + font-size: 12px; + color: #666; +} + +.k-menu-screens p { + margin: 6px 0; +} + +.k-menu-screens a {; + +} + +.k-menu-screens a img { + border: none; +} + +.k-menu-screens ul { + padding: 0; + margin: 6px 0 0; + list-style: none outside none; +} + +.k-edit-screen { + width: 370px; + height: 223px; + padding-top: 77px; + text-align: center; + background: #181818; + color: #fff; +} + +.k-edit-screen div { + +} + +.k-edit-screen a { + color: #7BB8FC; +} +.k-edit-screen a img { + border: none; +} + +.k-menu-screens { + width: 320px; + padding: 13px 10px 15px 15px; + float: left; +} /* w & h inline via jq */ +.k-menu-screens h2 { + padding: 0 0 5px 1px; + clear: both; + font-size: 12px; + color: #666; +} + +.k-menu-screens p { + margin: 6px 0; +} + +.k-menu-screens a {; + +} + +.k-menu-screens a img { + border: none; +} + +.k-menu-screens ul { + padding: 0; + margin: 6px 0 0; + list-style: none outside none; +} + +.k-menu-screens li { + height: 14px; + margin-bottom: 6px; +} + +.k-menu-screens li a { + padding-left: 22px; + background: url(images/ksprite.png) no-repeat -85px -274px; + text-decoration: none; +} + +.k-menu-screens li a.active,.k-menu-screens li a:hover .active { + background-position: -85px -247px; +} + +.k-menu-screens li a:hover { + background-position: -85px -260px; +} + +.k-menu-screens a { + color: #BBBBBB; +} .k-menu textarea { - background:none repeat scroll 0 0 transparent; - border-color:#000000 -moz-use-text-color -moz-use-text-color #000000; - border-style:solid none none solid; - border-width:2px medium medium 2px; - color:#CCCCCC; - font:11px arial,sans-serif; - height:15px; - overflow:hidden; - padding-left:2px; - width:100%; + background: none repeat scroll 0 0 transparent; + border-color: #000000 -moz-use-text-color -moz-use-text-color #000000; + border-style: solid none none solid; + border-width: 2px medium medium 2px; + color: #CCCCCC; + font: 11px arial, sans-serif; + height: 15px; + overflow: hidden; + padding-left: 2px; + width: 100%; } + .menu-screen.menu-share button { - background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4; - border:1px solid #000000; - color:#000000; - float:right; - height:24px; - padding:0 5px 3px; - width:84px; - font-size:1em; + background: url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4; + border: 1px solid #000000; + color: #000000; + float: right; + height: 24px; + padding: 0 5px 3px; + width: 84px; + font-size: 1em; } + .k-player .menu-screen.menu-share div.ui-state-highlight { - background:none repeat scroll 0 0 transparent; - border-color:#554926; - color:#FFE96E; - float:left; - padding:2px 5px; + background: none repeat scroll 0 0 transparent; + border-color: #554926; + color: #FFE96E; + float: left; + padding: 2px 5px; } + .k-player .menu-screen.menu-share div.ui-state-highlight a { - color:#FFE96E; - font-weight:bold; + color: #FFE96E; + font-weight: bold; +} + +.k-player .volume_control { + margin-right: 0px; + width: 16px; } -.k-player .volume-slide { - width:38px !important; +.k-player .volume_control span { + margin-right: 0px; +} + +.k-player .volume-slider { + width: 30px; } + .k-player .volume-slider .ui-slider-range { - -moz-border-radius:0 0 0 0; - background:url("images/ksprite.png") repeat-x scroll -66px -306px transparent; - height:17px; - position:absolute; + -moz-border-radius: 0 0 0 0; + background: url("images/ksprite.png") repeat-x scroll -66px -306px + transparent; + height: 17px; + position: absolute; } + .k-player .volume-slider a.ui-slider-handle { - background:none repeat scroll 0 0 transparent; - border:medium none; - display:block; - height:18px; - margin:-3px 5px 0 -1px; - position:absolute; - width:8px; + background: none repeat scroll 0 0 transparent; + border: medium none; + display: block; + height: 18px; + margin: -3px 5px 0 -1px; + position: absolute; + width: 8px; } \ No newline at end of file diff --git a/js2/mwEmbed/skins/mvpcf/playerSkin.css b/js2/mwEmbed/skins/mvpcf/playerSkin.css index 1ae63c42a5..36ca4bfa29 100644 --- a/js2/mwEmbed/skins/mvpcf/playerSkin.css +++ b/js2/mwEmbed/skins/mvpcf/playerSkin.css @@ -80,10 +80,10 @@ padding: 0 0 0 0; } -.volume_on { +.mv-player .volume_on { background: url(images/player_volume_tag.png) 0 8px no-repeat; } -.volume_off{ +.mv-player .volume_off{ background: url(images/player_volume_tag_off.png) 0 8px no-repeat; } @@ -96,7 +96,33 @@ margin: -1px 0 0 3px; cursor: pointer; } - +.mv-player .vol_container{ + z-index:99; + width:23px; + height:75px; + width:23px; + background: #CCC; +} +.mv-player .vol_container_below{ + top:30px; +} +.mv-player .vol_container_top{ + top:-77px; +} +.mv-player .vol_container .volume-slider{ + margin-top:5px; + height:65px; + width:10px; + margin-left: auto ; + margin-right: auto ; +} +.mv-player .vol_container .ui-slider-handle{ + cursor : pointer; + width:10px; + height:10px; + position:absolute; + left:-1px; +} .mv-player .time-disp { line-height: 32px; @@ -117,20 +143,20 @@ margin-top:10px; } -.play_head .ui-slider-handle{ +.mv-player .play_head .ui-slider-handle{ width:10px; height:15px; margin-left:-5px; margin-top:1px; } -.inOutSlider .ui-slider-handle{ +.mv-player .inOutSlider .ui-slider-handle{ width:8px; cusror: move; } -.videoOptionsComplete textarea { +.mv-player .videoOptionsComplete textarea { background:none repeat scroll 0 0 transparent; border-color:#333 -moz-use-text-color -moz-use-text-color #333; border-style:solid none none solid; @@ -142,7 +168,7 @@ padding-left:2px; width:100%; } -.videoOptionsComplete .copycode { +.mv-player .videoOptionsComplete .copycode { background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4; border:1px solid #000000; color:#000000; @@ -152,14 +178,14 @@ width:84px; font-size:1em; } -.videoOptionsComplete div.ui-state-highlight { +.mv-player .videoOptionsComplete div.ui-state-highlight { background:none repeat scroll 0 0 transparent; border-color:#554926; color:#FFE96E; float:left; padding:2px 5px; } -.videoOptionsComplete div.ui-state-highlight a { +.mv-player .videoOptionsComplete div.ui-state-highlight a { color:#FFE96E; font-weight:bold; }