diff --git a/src/Styles/Index.scss b/src/Styles/Index.scss index 387e6fe..92c169a 100644 --- a/src/Styles/Index.scss +++ b/src/Styles/Index.scss @@ -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%;