Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changing the way we focus a video element.

Browse source 
Now, only one video element can be important.
This commit is contained in:
David Négrier 2021-06-15 14:45:01 +02:00
parent ac7fa164b6
commit 5cf5e0ce2b
12 changed files with 164 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

176
front/style/style.scss
View file

@ -35,102 +35,108 @@ body .message-info.info{
body .message-info.warning{
background: #ffa500d6;
}
.video-container{
.video-container {
position: relative;
transition: all 0.2s ease;
background-color: #00000099;
cursor: url('./images/cursor_pointer.png'), pointer;
}
.video-container i{
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
background-color: black;
border-radius: 50%;
text-align: center;
padding-top: 32px;
font-size: 28px;
color: white;
overflow: hidden;
}
.video-container img{
position: absolute;
display: none;
width: 40px;
height: 40px;
left: 5px;
bottom: 5px;
padding: 10px;
z-index: 2;
}
.video-container img.block-logo {
left: 30%;
bottom: 15%;
width: 150px;
height: 150px;
}
video {
width: 100%;
height: 100%;
cursor: url('./images/cursor_pointer.png'), pointer;
}
.video-container button.report{
display: block;
cursor: url('./images/cursor_pointer.png'), pointer;
background: none;
background-color: rgba(0, 0, 0, 0);
border: none;
background-color: black;
border-radius: 15px;
position: absolute;
width: 0px;
height: 35px;
right: 5px;
bottom: 5px;
padding: 0px;
overflow: hidden;
z-index: 2;
transition: all .5s ease;
}
i {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
background-color: black;
border-radius: 50%;
text-align: center;
padding-top: 32px;
font-size: 28px;
color: white;
overflow: hidden;
}
.video-container:hover button.report{
width: 35px;
padding: 10px;
}
img {
position: absolute;
display: none;
width: 40px;
height: 40px;
left: 5px;
bottom: 5px;
padding: 10px;
z-index: 2;
}
.video-container button.report:hover {
width: 160px;
}
img.block-logo {
left: 30%;
bottom: 15%;
width: 150px;
height: 150px;
}
.video-container button.report img{
position: absolute;
display: block;
bottom: 5px;
left: 5px;
margin: 0;
padding: 0;
cursor: url('./images/cursor_pointer.png'), pointer;
width: 25px;
height: 25px;
}
.video-container button.report span{
position: absolute;
bottom: 6px;
left: 36px;
color: white;
font-size: 16px;
cursor: url('./images/cursor_pointer.png'), pointer;
}
.video-container img.active {
display: block !important;
}
button.report{
display: block;
cursor: url('./images/cursor_pointer.png'), pointer;
background: none;
background-color: rgba(0, 0, 0, 0);
border: none;
background-color: black;
border-radius: 15px;
position: absolute;
width: 0px;
height: 35px;
right: 5px;
bottom: 5px;
padding: 0px;
overflow: hidden;
z-index: 2;
transition: all .5s ease;
.video-container video{
height: 100%;
cursor: url('./images/cursor_pointer.png'), pointer;
}
img{
position: absolute;
display: block;
bottom: 5px;
left: 5px;
margin: 0;
padding: 0;
cursor: url('./images/cursor_pointer.png'), pointer;
width: 25px;
height: 25px;
}
.video-container video:focus{
outline: none;
span {
position: absolute;
bottom: 6px;
left: 36px;
color: white;
font-size: 16px;
cursor: url('./images/cursor_pointer.png'), pointer;
}
img.active {
display: block !important;
}
}
&:hover button.report{
width: 35px;
padding: 10px;
&:hover {
width: 160px;
}
}
video:focus{
outline: none;
}
}
.video-container.div-myCamVideo{