MinPluto/Zorn
MinPluto/Zorn
1
0
Fork 0
Code Issues 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 // Zorn Player
.video-container { .video-container {
position: relative; position: relative;
@ -62,10 +72,12 @@
} }
} }
.vc-top { .vc-top {
pointer-events: none; display: flex;
opacity: 0; justify-content: space-between;
transition: 0.3s opacity; #vc-title, #vc-buffering {
p { pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
color: white; color: white;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5); backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-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; margin: 0px;
font-size: 24px; 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 { #vc-gestures {
height: 100%; height: 100%;
@ -300,7 +323,7 @@
background: rgb(255 255 255 / 25%); background: rgb(255 255 255 / 25%);
} }
button { button {
padding: 6px 12px !important; padding: 10px 12px !important;
margin: 0px !important; margin: 0px !important;
aspect-ratio: inherit !important; aspect-ratio: inherit !important;
background: transparent !important; background: transparent !important;
@ -340,6 +363,12 @@
#playback-rate { #playback-rate {
flex-direction: row; flex-direction: row;
min-width: 100px; min-width: 100px;
border-radius: 3rem;
padding: 2px;
button {
border-radius: 3rem !important;
padding: 10px 13px !important;
}
} }
button#has-switch svg { button#has-switch svg {