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.
 
 
 
 

113 lines
2.0 KiB

#visio video {
width: 100%;
height: 100%;
}
body {
background-color: #111;
}
#visio #visio_source {
display: none;
}
#visio #switch_camera:not(.enabled) {
display: none;
}
#visio .infos {
color: white;
position: absolute;
top: calc(50% - 15rem);
width: 100%;
z-index: -1;
}
#visio .infos img {
border-radius: 100%;
width: 15rem;
}
#visio .infos p.state {
margin: 0;
font-size: 1.8rem;
}
#visio .level,
#visio video#video {
position: fixed;
right: 0;
bottom: 0;
width: 25rem;
height: auto;
}
#visio video#video {
background-image: url('/theme/img/movim_cloud.svg');
background-position: center;
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.25rem 0 0 0;
background-size: 25%;
}
@media screen and (max-width: 800px) {
#visio .level,
#visio video#video {
width: 15rem;
}
}
#visio header {
position: absolute;
width: 100%;
z-index: 1;
}
#visio header ul.list li {
padding: 3rem;
}
#visio header i {
text-shadow: 0 0 3rem black;
}
#visio .button.action {
right: calc(50% - 3.5rem);
}
#visio .level {
background-color: rgba(255, 255, 255, 0.1);
height: 0.5rem;
}
#visio .ring {
-webkit-animation: Rotate 2000ms infinite;
animation: Rotate 2000ms infinite;
}
@-webkit-keyframes Rotate {
0% {-webkit-transform:rotate(0deg);}
4% {-webkit-transform:rotate(-22.5deg);}
8% {-webkit-transform:rotate(0deg);}
12% {-webkit-transform:rotate(22.5deg);}
16% {-webkit-transform:rotate(0deg);}
20% {-webkit-transform:rotate(-22.5deg);}
24% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(0deg);}
}
@keyframes Rotate {
0% {transform:rotate(0deg);}
4% {transform:rotate(-22.5deg);}
8% {transform:rotate(0deg);}
12% {transform:rotate(-22.5deg);}
16% {transform:rotate(0deg);}
20% {transform:rotate(-22.5deg);}
24% {transform:rotate(0deg);}
100% {transform:rotate(0deg);}
}
#drawer {
display: none;
}