MinPluto/Zorn
MinPluto/Zorn
1
0
Fork 0
Code Issues Activity

Polish style and adjust for fullscreen event

Browse source
This commit is contained in:
Korbs 2024-12-02 00:04:08 -05:00
parent b6e57156db
commit 8d3fc8689c
1 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/Styles/Index.scss
View file

@ -37,15 +37,15 @@
.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%);
position: absolute;
bottom: 4px;
top: 0px;
left: 0px;
width: calc(100% - 24px);
height: calc(100% - 28px);
padding: 12px;
z-index: 5;
z-index: 4;
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 28px);
transition: 0.3s opacity;
button {
color: white;
@ -62,10 +62,19 @@
}
}
.vc-top {
margin-top: 12px;
pointer-events: none;
opacity: 0;
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 {
height: 100%;
@ -232,6 +241,18 @@
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 {
position: absolute;
top: 50%;