You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

195 lines
3.2 KiB

.sideBar {
width: 852px;
height: 28px;
outline: 2px solid rgba(0, 0, 0, 0.9);
background-color: rgba(243, 244, 246, 0.9);
}
#btnHome:hover {
transform: scale(1.4);
}
#btnPlayVideo:hover {
transform: scale(1.2);
}
#btnStopVideo:hover {
transform: scale(1.2);
}
#btnFullscreen:hover {
transform: scale(1.3);
}
#PlayerParameter {
width: 852px;
height: 300px;
background-color: rgb(105, 100, 100);
border: 2px solid rgba(0, 0, 0, 0.9);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 10;
}
#videoPlayer {
width: 852px;
height: 536px;
background-color: white;
border: 2px solid rgba(0, 0, 0, 0.9);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 10;
}
#timeTrack {
margin: auto;
width: 540px;
height: 28px;
line-height: 28px;
}
#timeLabel {
margin: auto;
padding-top: 0;
font-size: 14px;
width: 200px;
height: 28px;
line-height: 28px;
}
.loadEffect {
width: 120px;
height: 120px;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.loadEffect span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top: 0;
margin-left: -8px;
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -8px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
.canvasDiv {
width: 852px;
height: 480px
}
#playCanvas {
width: 852px;
height: 480px;
}
.no-padding {
margin-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
height: 28px;
display: inline-block;
float: left;
vertical-align: middle;
}
.track-padding {
padding-left: 0px;
width: 50px;
height: 28px;
display: inline-block;
float: left;
}
.left {
width: 28px;
float: left;
}
.right {
width: 28px;
float: right;
}
#footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: #F3F4F6;
color: #000;
font-family: Arial;
font-size: 14px;
letter-spacing: 1px;
}
#input {
float: right;
margin-right: 10px;
margin-top: 3px;
font-size: 14px;
}