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

Add buffering and polish Playback Rate menu

Browse source
This commit is contained in:
Korbs 2024-12-03 15:55:50 -05:00
parent 90acdad74a
commit 145b462fdf
1 changed files with 34 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/Styles/Index.scss
View file

@ -7,6 +7,16 @@
}
}
// Animations
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Zorn Player
.video-container {
position: relative;
@ -62,10 +72,12 @@
}
}
.vc-top {
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
p {
display: flex;
justify-content: space-between;
#vc-title, #vc-buffering {
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
color: white;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
@ -75,6 +87,17 @@
margin: 0px;
font-size: 24px;
}
#vc-buffering {
font-size: 14px !important;
align-items: center;
display: flex;
gap: 12px;
border-radius: 3rem !important;
padding: 4px 12px 4px 4px !important;
i::before {
animation: 1s spin infinite linear;
}
}
}
#vc-gestures {
height: 100%;
@ -300,7 +323,7 @@
background: rgb(255 255 255 / 25%);
}
button {
padding: 6px 12px !important;
padding: 10px 12px !important;
margin: 0px !important;
aspect-ratio: inherit !important;
background: transparent !important;
@ -340,6 +363,12 @@
#playback-rate {
flex-direction: row;
min-width: 100px;
border-radius: 3rem;
padding: 2px;
button {
border-radius: 3rem !important;
padding: 10px 13px !important;
}
}
button#has-switch svg {