191 lines
3.3 KiB
CSS
191 lines
3.3 KiB
CSS
.playerContainer{
|
|
width:480px;
|
|
background:#76C8C4;
|
|
text-align:center;
|
|
}
|
|
.PlayerScreen{
|
|
background:#00FFFF;
|
|
width:320px;
|
|
height:240px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
.Controls{
|
|
height:85px;
|
|
background:#333333;
|
|
text-align:left;
|
|
width:100%;
|
|
}
|
|
.ControlsRight{
|
|
vertical-align:top;
|
|
}
|
|
.ControlsBottom{
|
|
vertical-align:bottom;
|
|
}
|
|
.StatusContainer{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
.PlayContainer{
|
|
width:60px;
|
|
height:60px;
|
|
}
|
|
.Progress{
|
|
height:10px;
|
|
}
|
|
.Time, .Duration, .Status{
|
|
height:16px;
|
|
margin-top:0px;
|
|
color:#F5FFC8;
|
|
width:100%;
|
|
}
|
|
.Time{
|
|
padding-left:2px;
|
|
}
|
|
.Duration{
|
|
padding-right:2px;
|
|
text-align:right;
|
|
}
|
|
.StatusContainer{
|
|
padding:0;
|
|
border-collapse:collapse;
|
|
}
|
|
.Status{
|
|
height:20px;
|
|
background:#ff0000;
|
|
table-layout:fixed;
|
|
}
|
|
.Status.statusError .statusTitle, .Status.statusError .statusInfo{
|
|
color:#FF0000;
|
|
}
|
|
.Status .statusTitle{
|
|
font-weight:bold;
|
|
color:#A5B3E9;
|
|
}
|
|
.Status .statusInfo{
|
|
font-weight:normal;
|
|
color:#3770D6;
|
|
}
|
|
.Time, .Duration, .Status{
|
|
font-family:Verdana, Arial, Helvetica, sans-serif;
|
|
font-size:9px;
|
|
background:#000000;
|
|
}
|
|
.Time, .Duration{
|
|
width:60px;
|
|
}
|
|
.Volume{
|
|
width:30px;
|
|
height:30px;
|
|
float:right;
|
|
margin-right:2px;
|
|
margin-top:auto;
|
|
background-image:url(images/player_sprite.png);
|
|
background-repeat:no-repeat;
|
|
background-position:-1px -62px;
|
|
cursor:pointer;
|
|
}
|
|
.Volume:hover{
|
|
background-position:-33px -62px;
|
|
}
|
|
.PlayPauseToggle{
|
|
width:60px;
|
|
height:60px;
|
|
background-image:url(images/player_sprite.png);
|
|
background-repeat:no-repeat;
|
|
background-position:-1px -1px;
|
|
cursor:pointer;
|
|
vertical-align:middle;
|
|
line-height:60px;
|
|
}
|
|
.PlayPauseToggle:hover{
|
|
background-position:-63px -1px;
|
|
cursor:pointer;
|
|
}
|
|
.icon{
|
|
background-image:url(images/dojoPlayerIcons.png);
|
|
background-repeat:no-repeat;
|
|
width:22px;
|
|
height:22px;
|
|
}
|
|
.PlayPauseToggle .icon{
|
|
position:relative;
|
|
top:19px;
|
|
left:19px;
|
|
background-position:-1px -1px;
|
|
}
|
|
.PlayPauseToggle.Play .icon{
|
|
background-position:-1px -1px;
|
|
}
|
|
.PlayPauseToggle.Pause .icon{
|
|
background-position:-24px -1px;
|
|
}
|
|
.Progress{
|
|
|
|
}
|
|
.Progress, .ProgressLoaded, .ProgressPosition, .ProgressHandle{
|
|
height:10px;
|
|
}
|
|
.ProgressLoaded, .ProgressPosition, .ProgressHandle{
|
|
position:absolute;
|
|
}
|
|
.ProgressLoaded{
|
|
background:url(images/progressLoadedBk.png) repeat-x;
|
|
}
|
|
.ProgressHandle{
|
|
background-image:url(images/sliderHandleSprite.png);
|
|
background-position:0px 0px;
|
|
width:15px;
|
|
margin-left:0px;
|
|
cursor:pointer;
|
|
}
|
|
.ProgressHandle.over{
|
|
background-position:-15px 0px;
|
|
}
|
|
.ProgressPosition{
|
|
background:url(images/progressPositionBk.png) repeat-x;
|
|
width:0px;
|
|
}
|
|
.VolumeSlider{
|
|
position:absolute;
|
|
}
|
|
.VolumeSliderBack{
|
|
width:128px;
|
|
height:30px;
|
|
background-image:url(images/player_sprite.png);
|
|
background-repeat:no-repeat;
|
|
background-position:-1px -95px;
|
|
}
|
|
.VolumeSliderHandle{
|
|
position:absolute;
|
|
width:12px;
|
|
height:14px;
|
|
background-image:url(images/player_sprite.png);
|
|
background-repeat:no-repeat;
|
|
background-position:-1px -140px;
|
|
cursor:pointer;
|
|
}
|
|
.VolumeSliderHandle.over{
|
|
background-position:-15px -138px;
|
|
cursor:pointer;
|
|
}
|
|
.Volume .icon{
|
|
background-position:-60px -43px;
|
|
width:18px;
|
|
height:16px;
|
|
position:relative;
|
|
top:7px;
|
|
left:7px;
|
|
}
|
|
.Volume.mute .icon{
|
|
background-position:-1px -43px;
|
|
}
|
|
.Volume.low .icon{
|
|
background-position:-20px -43px;
|
|
}
|
|
.Volume.med .icon{
|
|
background-position:-40px -43px;
|
|
}
|
|
.Volume.high .icon{
|
|
background-position:-60px -43px;
|
|
} |