897 lines
13 KiB
CSS
897 lines
13 KiB
CSS
/* video container */
|
|
|
|
#path{
|
|
|
|
|
|
background: no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.myVideo{
|
|
background:#000;
|
|
width: 100% ;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
.largevid{
|
|
|
|
|
|
|
|
}
|
|
|
|
.cont:-webkit-full-screen {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cont{
|
|
width:100%;
|
|
|
|
height:100%;
|
|
position:relative;
|
|
overflow:hidden;
|
|
background:#000;
|
|
color:#ccc;
|
|
display: block;
|
|
z-index: 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
.title{
|
|
|
|
font-size: 20px;
|
|
color: #fff;
|
|
font-family: Tahoma;
|
|
}
|
|
|
|
.user{
|
|
margin-top: -10px;
|
|
font-size: 11.5px;
|
|
font-family: Tahoma;
|
|
}
|
|
|
|
|
|
/* video caption css */
|
|
.caption{
|
|
display:none;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
padding:10px;
|
|
font-size:15px;
|
|
height: 80%;
|
|
z-index: 2;
|
|
background:url(skin/caption.png) repeat-x;
|
|
|
|
}
|
|
|
|
/*** 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.hbtn {
|
|
float:left;
|
|
width:34px;
|
|
height:30px;
|
|
padding:0 5px;
|
|
border-right:0px solid #404040;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.control div.hbtn.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/play_icon.png) no-repeat ;
|
|
|
|
margin-bottom: 8px;
|
|
margin-left: 5px;
|
|
|
|
}
|
|
.control div.paused{
|
|
background:url(skin/paus_icon.png) no-repeat ;
|
|
margin-left: 5px;
|
|
|
|
|
|
}
|
|
.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: 4px;
|
|
margin-left: 10px;
|
|
}
|
|
.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: 5px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
|
|
|
|
.control div.largescr{
|
|
background:url(skin/control.png) no-repeat -50px -30px !important;
|
|
float:right;
|
|
margin-top: 1px;
|
|
margin-right: 1px;
|
|
|
|
}
|
|
|
|
.control div.smallscr{
|
|
background:url(skin/largescr.png) no-repeat !important;
|
|
|
|
float:right;
|
|
margin-top: 3px;
|
|
|
|
}
|
|
|
|
/*
|
|
.control div.logo{
|
|
background:url(http://clip-bucket.com/img/logo.png) no-repeat ;
|
|
float:right;
|
|
margin-right: -0.5px;
|
|
margin-top: 3.5px;
|
|
}
|
|
|
|
*/
|
|
.control div.small{
|
|
background:url(skin/small.png) no-repeat -2px 3px;
|
|
float:right;
|
|
margin-right: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.control div.hdon{
|
|
background:url(skin/hd.png) no-repeat -55px -6px ;
|
|
float:right;
|
|
margin-right: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.control div.hdoff{
|
|
background:url(skin/hd.png) no-repeat -5px -6px !important;
|
|
float: right;
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
.buffer{
|
|
|
|
background:url(skin/buffer.png) no-repeat 12px -2px ;
|
|
float:right;
|
|
margin-right: -8px;
|
|
display:block;
|
|
position: relative;
|
|
z-index: 50;
|
|
margin-top: -2.3px;
|
|
|
|
|
|
|
|
}
|
|
/*
|
|
.test{
|
|
width: 100%;
|
|
height: 20px;
|
|
background: #fff;
|
|
}
|
|
/* PROGRESS BAR CSS */
|
|
/* Progress bar */
|
|
.progress {
|
|
width:100%;
|
|
height:7.5px;
|
|
margin-bottom: 2px;
|
|
float: left;
|
|
background: #444; /* fallback */
|
|
z-index: 50;
|
|
|
|
}
|
|
.progress span {
|
|
height:7.5px;
|
|
position:absolute;
|
|
top:0px;
|
|
left:0;
|
|
display:block;
|
|
margin-left: 0px;
|
|
|
|
|
|
|
|
}
|
|
.timeBar{
|
|
|
|
|
|
z-index:10;
|
|
width:0;
|
|
background: #7f090a;
|
|
|
|
|
|
}
|
|
|
|
|
|
.bufferBar{
|
|
|
|
z-index:5;
|
|
width:0;
|
|
background: #5d5c5c;
|
|
|
|
box-shadow:2px 0 5px #333;
|
|
-moz-box-shadow:2px 0 5px #333;
|
|
-webkit-box-shadow:2px 0 5px #333;
|
|
|
|
|
|
}
|
|
/* time and duration */
|
|
.time{
|
|
color: #fff;
|
|
margin-top: 11px;
|
|
width:12%;
|
|
float:left;
|
|
text-align:center;
|
|
font-size:11px;
|
|
line-height:12px;
|
|
position:relative;
|
|
}
|
|
|
|
/* VOLUME BAR CSS */
|
|
/* volume bar */
|
|
.volume{
|
|
background-color: #5d5c5c;
|
|
position:relative;
|
|
cursor:pointer;
|
|
width:70px;
|
|
height:4px;
|
|
float:left;
|
|
margin-top:16px;
|
|
margin-right:20px;
|
|
margin-left: 3px;
|
|
}
|
|
.volumeBar{
|
|
display:block;
|
|
height:110%;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
background-color: #fff;
|
|
z-index:11;
|
|
}
|
|
|
|
|
|
|
|
/* OTHERS CSS */
|
|
/* video screen cover */
|
|
.loading, .init{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
border-top: 4px solid rgba(0, 0, 0, .0);
|
|
border-left: 4px solid rgba(0, 0, 0, .0);
|
|
width:100%;
|
|
height:100%;
|
|
background:url(skinloading.gif) no-repeat 50% 50% !important;
|
|
z-index:4;
|
|
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:#fff;
|
|
|
|
}
|
|
|
|
.list1{
|
|
|
|
|
|
float: left;
|
|
}
|
|
|
|
|
|
#itemsr
|
|
{
|
|
list-style: none;
|
|
padding: 0px;
|
|
margin: 5px 0 0 5px;
|
|
font-size: 20px;
|
|
}
|
|
#rightcmenu
|
|
{
|
|
display: none;
|
|
position: fixed;
|
|
font-size: 12px;
|
|
height: 20px;
|
|
width: 250px;
|
|
background: #E4E4E4 ;
|
|
color: #000;
|
|
border-bottom: 1px solid #BBBBBB;
|
|
z-index: 100;
|
|
text-align: center;
|
|
}
|
|
|
|
#ritems{
|
|
background: #fff;
|
|
margin-top: 0px;
|
|
|
|
|
|
}
|
|
|
|
.rlist{
|
|
|
|
|
|
border-left: 1px solid #DFDFDF;
|
|
|
|
text-align: left;
|
|
margin-left: -5px;
|
|
|
|
height: 22px;
|
|
list-style-type:none;
|
|
|
|
}
|
|
|
|
.rlist:hover
|
|
{
|
|
background-color: rgba(92, 161, 255, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
#op{
|
|
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
#opacity{
|
|
background-color:#000;
|
|
width:100%;
|
|
height: 100%;
|
|
opacity:0.9;
|
|
position:absolute;
|
|
display:none;
|
|
top:0;
|
|
left:0;
|
|
z-index: 20;
|
|
|
|
|
|
|
|
}
|
|
|
|
#cancel_v{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin-right: 5px;
|
|
margin-top: 5px;
|
|
background-image: url(skin/cancel_v.png);
|
|
width: 35px;
|
|
height: 25px;
|
|
opacity: 1;
|
|
|
|
}
|
|
#replay_v{
|
|
background-image: url(skin/replay_v.png);
|
|
width: 35px;
|
|
height: 25px;
|
|
opacity: 1;
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
|
|
}
|
|
|
|
|
|
#h_4{
|
|
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
#related_1{
|
|
|
|
width:100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
float: right;
|
|
top:0;
|
|
left: 0;
|
|
margin-left: 0;
|
|
margin-top: 10%;
|
|
right: auto;
|
|
left: 1%;
|
|
z-index:21;
|
|
text-align: center;
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
#link_v{
|
|
position: relative;
|
|
}
|
|
#name_v{
|
|
top :0;
|
|
left:0;
|
|
color: #fff;
|
|
display:block;
|
|
width: 94.7%;
|
|
text-align: center;
|
|
position: absolute;
|
|
margin-top: 27%;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
#thumb_v{
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
margin-top:10px;
|
|
opacity:0.8;
|
|
position: relative;
|
|
border: 1px solid #000;
|
|
|
|
|
|
/*
|
|
box-shadow:1px 0 5px #00A4BD;
|
|
-moz-box-shadow:1px 0 5px #00A4BD;
|
|
-webkit-box-shadow:1px 0 5px #00A4BD;
|
|
*/
|
|
}
|
|
|
|
|
|
|
|
.windows8 {
|
|
|
|
width: 55px;
|
|
height:55px;
|
|
|
|
position:absolute;
|
|
top:40%;
|
|
right:46.1%;
|
|
/*
|
|
margin-left:46.5%;
|
|
margin-right:50%;
|
|
margin-top: 18%;
|
|
|
|
*/
|
|
|
|
}
|
|
|
|
.windows8 .wBall {
|
|
position: absolute;
|
|
width: 52px;
|
|
height: 52px;
|
|
opacity: 0;
|
|
-moz-transform: rotate(225deg);
|
|
-moz-animation: orbit 2.75s infinite;
|
|
-webkit-transform: rotate(225deg);
|
|
-webkit-animation: orbit 2.75s infinite;
|
|
-ms-transform: rotate(225deg);
|
|
-ms-animation: orbit 2.75s infinite;
|
|
-o-transform: rotate(225deg);
|
|
-o-animation: orbit 2.75s infinite;
|
|
transform: rotate(225deg);
|
|
animation: orbit 2.75s infinite;
|
|
}
|
|
|
|
.windows8 .wBall .wInnerBall{
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 7px;
|
|
background: #1966FF;
|
|
left:0px;
|
|
top:0px;
|
|
-moz-border-radius: 7px;
|
|
-webkit-border-radius: 7px;
|
|
-ms-border-radius: 7px;
|
|
-o-border-radius: 7px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.windows8 #wBall_1 {
|
|
-moz-animation-delay: 0.6s;
|
|
-webkit-animation-delay: 0.6s;
|
|
-ms-animation-delay: 0.6s;
|
|
-o-animation-delay: 0.6s;
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.windows8 #wBall_2 {
|
|
-moz-animation-delay: 0.12s;
|
|
-webkit-animation-delay: 0.12s;
|
|
-ms-animation-delay: 0.12s;
|
|
-o-animation-delay: 0.12s;
|
|
animation-delay: 0.12s;
|
|
}
|
|
|
|
.windows8 #wBall_3 {
|
|
-moz-animation-delay: 0.24s;
|
|
-webkit-animation-delay: 0.24s;
|
|
-ms-animation-delay: 0.24s;
|
|
-o-animation-delay: 0.24s;
|
|
animation-delay: 0.24s;
|
|
}
|
|
|
|
.windows8 #wBall_4 {
|
|
-moz-animation-delay: 0.36s;
|
|
-webkit-animation-delay: 0.36s;
|
|
-ms-animation-delay: 0.36s;
|
|
-o-animation-delay: 0.36s;
|
|
animation-delay: 0.36s;
|
|
}
|
|
|
|
.windows8 #wBall_5 {
|
|
-moz-animation-delay: 0.48s;
|
|
-webkit-animation-delay: 0.48s;
|
|
-ms-animation-delay: 0.48s;
|
|
-o-animation-delay: 0.48s;
|
|
animation-delay: 0.48s;
|
|
}
|
|
|
|
@-moz-keyframes orbit {
|
|
0% {
|
|
opacity: 1;
|
|
z-index:99;
|
|
-moz-transform: rotate(180deg);
|
|
-moz-animation-timing-function: ease-out;
|
|
}
|
|
|
|
7% {
|
|
opacity: 1;
|
|
-moz-transform: rotate(300deg);
|
|
-moz-animation-timing-function: linear;
|
|
-moz-origin:0%;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
-moz-transform:rotate(410deg);
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-moz-origin:7%;
|
|
}
|
|
|
|
39% {
|
|
opacity: 1;
|
|
-moz-transform: rotate(645deg);
|
|
-moz-animation-timing-function: linear;
|
|
-moz-origin:30%;
|
|
}
|
|
|
|
70% {
|
|
opacity: 1;
|
|
-moz-transform: rotate(770deg);
|
|
-moz-animation-timing-function: ease-out;
|
|
-moz-origin:39%;
|
|
}
|
|
|
|
75% {
|
|
opacity: 1;
|
|
-moz-transform: rotate(900deg);
|
|
-moz-animation-timing-function: ease-out;
|
|
-moz-origin:70%;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
-moz-transform:rotate(900deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: rotate(900deg);
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes orbit {
|
|
0% {
|
|
opacity: 1;
|
|
z-index:99;
|
|
-webkit-transform: rotate(180deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
}
|
|
|
|
7% {
|
|
opacity: 1;
|
|
-webkit-transform: rotate(300deg);
|
|
-webkit-animation-timing-function: linear;
|
|
-webkit-origin:0%;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
-webkit-transform:rotate(410deg);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-origin:7%;
|
|
}
|
|
|
|
39% {
|
|
opacity: 1;
|
|
-webkit-transform: rotate(645deg);
|
|
-webkit-animation-timing-function: linear;
|
|
-webkit-origin:30%;
|
|
}
|
|
|
|
70% {
|
|
opacity: 1;
|
|
-webkit-transform: rotate(770deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
-webkit-origin:39%;
|
|
}
|
|
|
|
75% {
|
|
opacity: 1;
|
|
-webkit-transform: rotate(900deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
-webkit-origin:70%;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
-webkit-transform:rotate(900deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: rotate(900deg);
|
|
}
|
|
|
|
}
|
|
|
|
@-ms-keyframes orbit {
|
|
0% {
|
|
opacity: 1;
|
|
z-index:99;
|
|
-ms-transform: rotate(180deg);
|
|
-ms-animation-timing-function: ease-out;
|
|
}
|
|
|
|
7% {
|
|
opacity: 1;
|
|
-ms-transform: rotate(300deg);
|
|
-ms-animation-timing-function: linear;
|
|
-ms-origin:0%;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
-ms-transform:rotate(410deg);
|
|
-ms-animation-timing-function: ease-in-out;
|
|
-ms-origin:7%;
|
|
}
|
|
|
|
39% {
|
|
opacity: 1;
|
|
-ms-transform: rotate(645deg);
|
|
-ms-animation-timing-function: linear;
|
|
-ms-origin:30%;
|
|
}
|
|
|
|
70% {
|
|
opacity: 1;
|
|
-ms-transform: rotate(770deg);
|
|
-ms-animation-timing-function: ease-out;
|
|
-ms-origin:39%;
|
|
}
|
|
|
|
75% {
|
|
opacity: 1;
|
|
-ms-transform: rotate(900deg);
|
|
-ms-animation-timing-function: ease-out;
|
|
-ms-origin:70%;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
-ms-transform:rotate(900deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-ms-transform: rotate(900deg);
|
|
}
|
|
|
|
}
|
|
|
|
@-o-keyframes orbit {
|
|
0% {
|
|
opacity: 1;
|
|
z-index:99;
|
|
-o-transform: rotate(180deg);
|
|
-o-animation-timing-function: ease-out;
|
|
}
|
|
|
|
7% {
|
|
opacity: 1;
|
|
-o-transform: rotate(300deg);
|
|
-o-animation-timing-function: linear;
|
|
-o-origin:0%;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
-o-transform:rotate(410deg);
|
|
-o-animation-timing-function: ease-in-out;
|
|
-o-origin:7%;
|
|
}
|
|
|
|
39% {
|
|
opacity: 1;
|
|
-o-transform: rotate(645deg);
|
|
-o-animation-timing-function: linear;
|
|
-o-origin:30%;
|
|
}
|
|
|
|
70% {
|
|
opacity: 1;
|
|
-o-transform: rotate(770deg);
|
|
-o-animation-timing-function: ease-out;
|
|
-o-origin:39%;
|
|
}
|
|
|
|
75% {
|
|
opacity: 1;
|
|
-o-transform: rotate(900deg);
|
|
-o-animation-timing-function: ease-out;
|
|
-o-origin:70%;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
-o-transform:rotate(900deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: rotate(900deg);
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes orbit {
|
|
0% {
|
|
opacity: 1;
|
|
z-index:99;
|
|
transform: rotate(180deg);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
7% {
|
|
opacity: 1;
|
|
transform: rotate(300deg);
|
|
animation-timing-function: linear;
|
|
origin:0%;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
transform:rotate(410deg);
|
|
animation-timing-function: ease-in-out;
|
|
origin:7%;
|
|
}
|
|
|
|
39% {
|
|
opacity: 1;
|
|
transform: rotate(645deg);
|
|
animation-timing-function: linear;
|
|
origin:30%;
|
|
}
|
|
|
|
70% {
|
|
opacity: 1;
|
|
transform: rotate(770deg);
|
|
animation-timing-function: ease-out;
|
|
origin:39%;
|
|
}
|
|
|
|
75% {
|
|
opacity: 1;
|
|
transform: rotate(900deg);
|
|
animation-timing-function: ease-out;
|
|
origin:70%;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
transform:rotate(900deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: rotate(900deg);
|
|
}
|
|
|
|
}
|