From 8d3fc8689c973c8157e1f9b320f8daca6a85cf60 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 2 Dec 2024 00:04:08 -0500
Subject: [PATCH] Polish style and adjust for fullscreen event

---
 src/Styles/Index.scss | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

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%;