Polish style and adjust for fullscreen event
This commit is contained in:
parent
b6e57156db
commit
8d3fc8689c
1 changed files with 25 additions and 4 deletions
|
@ -37,15 +37,15 @@
|
||||||
.video-controls {
|
.video-controls {
|
||||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 4px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: calc(100% - 24px);
|
width: calc(100% - 24px);
|
||||||
|
height: calc(100% - 28px);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
z-index: 5;
|
z-index: 4;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: calc(100% - 28px);
|
|
||||||
transition: 0.3s opacity;
|
transition: 0.3s opacity;
|
||||||
button {
|
button {
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -62,10 +62,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.vc-top {
|
.vc-top {
|
||||||
margin-top: 12px;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: 0.3s opacity;
|
transition: 0.3s opacity;
|
||||||
|
p {
|
||||||
|
color: white;
|
||||||
|
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
|
||||||
|
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
|
||||||
|
width: max-content;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#vc-gestures {
|
#vc-gestures {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -232,6 +241,18 @@
|
||||||
transition: 0.3s opacity !important;
|
transition: 0.3s opacity !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.zorn-fullscreen {
|
||||||
|
.video-controls, video {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
.video-controls {
|
||||||
|
height: calc(100% - 24px);
|
||||||
|
.vc-top {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.big-present-button {
|
.big-present-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
Loading…
Reference in a new issue