265 lines
4.8 KiB
CSS
265 lines
4.8 KiB
CSS
/* video container */
|
|
.videoContainer{
|
|
width:700px;
|
|
margin-left: 300px;
|
|
height:370px;
|
|
position:relative;
|
|
overflow:hidden;
|
|
background:#000;
|
|
color:#ccc;
|
|
}
|
|
|
|
/* video caption css */
|
|
.caption{
|
|
display:none;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
padding:10px;
|
|
font-size:15px;
|
|
box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
background: #1F1F1F; /* fallback */
|
|
background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
|
|
background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
|
|
background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
|
|
}
|
|
|
|
/*** VIDEO CONTROLS CSS ***/
|
|
/* control holder */
|
|
.control{
|
|
background:#000;
|
|
color:#000;
|
|
position:absolute;
|
|
bottom:0;
|
|
left:0;
|
|
width:100%;
|
|
z-index:5;
|
|
display: block;
|
|
|
|
}
|
|
/* control top part */
|
|
|
|
/* control bottom part */
|
|
.btmControl{
|
|
clear:both;
|
|
background: #000; /* fallback */
|
|
background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
|
|
background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
|
|
background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
|
|
}
|
|
.control div.btn {
|
|
float:left;
|
|
width:34px;
|
|
height:30px;
|
|
padding:0 5px;
|
|
border-right:0px solid #404040;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.control div.btn.sound_btn{
|
|
|
|
float:left;
|
|
}
|
|
|
|
.control div.text{
|
|
font-size:12px;
|
|
font-weight:bold;
|
|
line-height:30px;
|
|
text-align:center;
|
|
font-family:verdana;
|
|
width:20px;
|
|
border:none;
|
|
color:#777;
|
|
}
|
|
.control div.btnPlay{
|
|
background:url(skin/control.png) no-repeat 0 0;
|
|
border-left:1px solid #404040;
|
|
margin-bottom: 5px;
|
|
}
|
|
.control div.paused{
|
|
background:url(skin/control.png) no-repeat 0 -29px;
|
|
}
|
|
.control div.btnStop{
|
|
background:url(skin/control.png) no-repeat 0 -57px;
|
|
}
|
|
.control div.spdText{
|
|
border:none;
|
|
font-size:14px;
|
|
line-height:30px;
|
|
font-style:italic;
|
|
}
|
|
.control div.selected{
|
|
font-size:15px;
|
|
color:#ccc;
|
|
}
|
|
.control div.sound{
|
|
background:url(skin/control.png) no-repeat -88px -28px;
|
|
border:none;
|
|
float:left;
|
|
margin-top: 3px;
|
|
margin-left: 4px;
|
|
}
|
|
.control div.sound2{
|
|
background:url(skin/control.png) no-repeat -87px -59px !important;
|
|
}
|
|
.control div.muted{
|
|
background:url(skin/control.png) no-repeat -88px -2px !important;
|
|
}
|
|
.control div.btnFS{
|
|
background:url(skin/control.png) no-repeat -50px -2px;
|
|
float:right;
|
|
margin-right: 10px;
|
|
}
|
|
.control div.smallscr{
|
|
background:url(skin/control.png) no-repeat -50px -30px !important;
|
|
|
|
float:right;
|
|
margin-right: 7px;
|
|
}
|
|
.control div.largescr{
|
|
background:url(skin/control.png) no-repeat -50px -30px !important;
|
|
}
|
|
.control div.logo{
|
|
background:url(skin/control.png) no-repeat -52px -57px;
|
|
float:right;
|
|
margin-right: 10px;
|
|
}
|
|
.control div.small{
|
|
background:url(skin/small.png) no-repeat -2px 3px;
|
|
float:right;
|
|
margin-right: 10px;
|
|
}
|
|
.control div.quality{
|
|
background:url(skin/quality.png) no-repeat -5px -6px;
|
|
float:right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* PROGRESS BAR CSS */
|
|
/* Progress bar */
|
|
.progress {
|
|
width:100%;
|
|
height:7px;
|
|
margin-bottom: 0px;
|
|
position:relative;
|
|
float:left;
|
|
cursor:pointer;
|
|
background: #444; /* fallback */
|
|
background:-moz-linear-gradient(top,#666,#333);
|
|
background:-webkit-linear-gradient(top,#666,#333);
|
|
background:-o-linear-gradient(top,#666,#333);
|
|
box-shadow:0 2px 3px #333 inset;
|
|
-moz-box-shadow:0 2px 3px #333 inset;
|
|
-webkit-box-shadow:0 2px 3px #333 inset;
|
|
|
|
}
|
|
.progress span {
|
|
height:100%;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
display:block;
|
|
|
|
}
|
|
.timeBar{
|
|
z-index:10;
|
|
width:0;
|
|
background: #7f090a; /* fallback */
|
|
|
|
|
|
}
|
|
.bufferBar{
|
|
|
|
width:0;
|
|
background: #5d5c5c;
|
|
|
|
|
|
}
|
|
/* time and duration */
|
|
.time{
|
|
color: #fff;
|
|
margin-top: 10px;
|
|
width:15%;
|
|
float:left;
|
|
text-align:center;
|
|
font-size:11px;
|
|
line-height:12px;
|
|
}
|
|
|
|
/* VOLUME BAR CSS */
|
|
/* volume bar */
|
|
.volume{
|
|
background-color: #5d5c5c;
|
|
position:relative;
|
|
cursor:pointer;
|
|
width:70px;
|
|
height:4px;
|
|
float:left;
|
|
margin-top:15px;
|
|
margin-right:20px;
|
|
margin-left: 3px;
|
|
}
|
|
.volumeBar{
|
|
display:block;
|
|
height:100%;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
background-color: #7f090a;
|
|
z-index:10;
|
|
}
|
|
|
|
|
|
|
|
/* OTHERS CSS */
|
|
/* video screen cover */
|
|
.loading, #init{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
background:url(skinloading.gif) no-repeat 50% 50%;
|
|
z-index:2;
|
|
display:none;
|
|
}
|
|
#init{
|
|
background:url(skin/bigplay.png) no-repeat 50% 50% !important;
|
|
cursor:pointer;
|
|
}
|
|
|
|
|
|
|
|
.qualityopt{
|
|
background-color: black;
|
|
width: 90px;
|
|
position: absolute;
|
|
margin-top: 244px;
|
|
margin-left: 500px;
|
|
border:2px solid black;
|
|
border-radius:2px;
|
|
display :none;
|
|
|
|
}
|
|
|
|
.list{
|
|
|
|
color: #e7e7e7;
|
|
|
|
}
|
|
|
|
.list1{
|
|
|
|
|
|
float: left;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|