diff --git a/src/Styles/Index.scss b/src/Styles/Index.scss index 852858d..01f161f 100644 --- a/src/Styles/Index.scss +++ b/src/Styles/Index.scss @@ -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 {