Update styling

src/Styles/Base.scss

@@ -0,0 +1,77 @@
+// Platform Support
+/// requestPictureInPicture() - Firefox Not Supported
+/// https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
+@-moz-document url-prefix() {
+    #vc-pip {
+        display: none;
+    }
+}
+
+// Animations
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Zorn Player
+.video-container {
+    position: relative;
+    .video-controls, video {
+        border-radius: 12px;
+    }
+    *:focus-visible {
+        outline-color: none; // Allow color for contrast mode
+        background: rgba(255, 255, 255, 0.5) !important;
+        transition: 1s background;
+    }
+    video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        z-index: 1;
+        pointer-events: none;
+    }
+    canvas {
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        z-index: -1;
+        transition: 0.6s filter;
+    }
+    .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;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: calc(100% - 4px);
+        z-index: 4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        transition: 0.3s opacity;
+    }
+}
+
+.zorn-controls-hide {
+    opacity: 0 !important;
+    transition: 0.3s opacity !important;
+}
+
+.zorn-fullscreen {
+    .video-controls, video {
+        border-radius: 0 !important;
+    }
+    .video-controls {
+        height: 100%;
+        .vc-top #vc-title {
+            opacity: 1;
+        }
+    }
+}

src/Styles/Themes/Default.scss

@@ -1,65 +1,21 @@
-// Platform Support
+// Configuration
-/// requestPictureInPicture() - Firefox Not Supported
+:root {
-/// https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
+    --BottomControlsBorderRadius: 0px;
-@-moz-document url-prefix() {
+    --BottomControlsBackground: transparent;
-    #vc-pip {
+    --BottomControlsBackdrop: none;
-        display: none;
+    --BottomControlsPadding: 6px 12px;
-    }
+    --BottomControlsMargin: 0px;
+    --IconHoverBorderRadius: 3rem;
+    --IconHoverBackground: rgba(255, 255, 255, 0.1);
+    --IconColor: white;
 }
 
-// Animations
+// Theme
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-// Zorn Player
 .video-container {
-    position: relative;
-    .video-controls, video {
-        border-radius: 12px;
-    }
-    *:focus-visible {
-        outline: none;
-        background: rgba(255, 255, 255, 0.5) !important;
-        transition: 1s background;
-    }
-    video {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        z-index: 1;
-        pointer-events: none;
-    }
-    canvas {
-        top: 0px;
-        left: 0px;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        z-index: -1;
-        transition: 0.6s filter;
-    }
     .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;
-        top: 0px;
-        left: 0px;
-        width: calc(100% - 24px);
-        height: calc(100% - 28px);
-        padding: 12px;
-        z-index: 4;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        transition: 0.3s opacity;
         button {
-            color: white;
+            color: var(--IconColor);
-            border-radius: 3rem;
+            border-radius: var(--IconHoverBorderRadius);
             aspect-ratio: 1;
             border: none;
             background: transparent;
@@ -68,37 +24,66 @@
             padding: 6px;
             cursor: pointer;
             &:hover {
-                background: rgba(255, 255, 255, 0.1);
+                background: var(--IconHoverBackground);
+            }
+            svg, object {
+                fill: white;
+                color: white;
+                width: 24px !important;
+                height: 24px !important;
+                pointer-events: none;
             }
         }
+        // Title and Top Indicators
         .vc-top {
             display: flex;
             justify-content: space-between;
-            #vc-title, #vc-buffering {
+            .vc-full-title {
-                pointer-events: none;
                 opacity: 0;
-                transition: 0.3s opacity;
+                background: linear-gradient(180deg, #00000078, transparent);
-                color: white;
+                padding: 24px;
-                backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
+                width: 100%;
-                -webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
+                position: absolute;
-                width: max-content;
+                top: 0px;
-                padding: 6px 12px;
+                left: 0px;
-                border-radius: 4px;
+                * {
-                margin: 0px;
+                    margin: 0px;
-                font-size: 24px;
+                }
+                a {
+                    color: white;
+                    text-decoration: none;
+                }
+                p {
+                    color: white;
+                    text-shadow: 0px 0px 1px #00000025;
+                }
+                #vc-main-title {
+                    font-weight: bold;
+                    font-size: 22px;
+                }
+                #vc-secondary-title {
+                    font-size: 16px;
+                    margin-top: 6px;
+                }
             }
             #vc-buffering {
+                opacity: 0;
                 font-size: 14px !important;
                 align-items: center;
                 display: flex;
                 gap: 12px;
                 border-radius: 3rem !important;
                 padding: 4px 12px 4px 4px !important;
+                position: absolute;
+                right: 0px;
+                margin: 24px;
+                text-shadow: 1px 1px #00000050;
                 i::before {
                     animation: 1s spin infinite linear;
                 }
             }
         }
+        // Gestures
         #vc-gestures {
             height: 100%;
             display: grid;
@@ -117,11 +102,18 @@
                 }
             }
         }
+        // UI Controls
         .vc-bottom {
             display: flex;
             gap: 12px;
             align-items: center;
             justify-content: space-between;
+            padding: var(--BottomControlsPadding);
+            margin: var(--BottomControlsMargin);
+            background: var(--BottomControlsBackground);
+            backdrop-filter: var(--BottomControlsBackdrop);
+            -webkit-backdrop-filter: var(--BottomControlsBackdrop);
+            border-radius: var(--BottomControlsBorderRadius);
             .vc-start,
             .vc-end {
                 display: flex;
@@ -227,25 +219,28 @@
                     outline: 3px solid transparent;
                     outline-offset: 0.125rem;
                 }
+                #seek-tooltip {
+                    opacity: 0;
+                    position: absolute;
+                    top: -50px;
+                    backdrop-filter: blur(6px) contrast(0.8) brightness(0.8);
+                    -webkit-backdrop-filter: blur(6px) contrast(0.8) brightness(0.8);
+                    padding: 6px 12px;
+                    border-radius: 3rem;
+                    margin-left: -30px;
+                    color: white;
+                }
             }
             .timestamp {
                 display: flex;
-                background: rgb(255 255 255 / 10%);
+                backdrop-filter: blur(6px) brightness(0.8);
+                -webkit-backdrop-filter: blur(6px) brightness(0.8);
                 border-radius: 3rem;
                 align-items: center;
                 position: relative;
                 pointer-events: none;
                 color: white;
                 font-family: Arial, Helvetica, sans-serif;
-                #seek-tooltip {
-                    z-index: 10;
-                    background: #464646;
-                    padding: 6px 12px;
-                    border-radius: 3rem 0px 0px 3rem;
-                    margin-right: -64px;
-                    opacity: 0;
-                    transition: 0.3s opacity;
-                }
                 #current {
                     background: rgb(255 255 255 / 15%);
                     padding: 6px 12px;
@@ -257,21 +252,41 @@
             }
         }
     }
-}
+    .zorn-context-menu {
-
+        position: absolute;
-.zorn-controls-hide {
+        top: 0px;
-    opacity: 0 !important;
+        left: 0px;
-    transition: 0.3s opacity !important;
+        z-index: 4;
-}
+        display: none; /* Hide By Default */
-
+        flex-direction: column;
-.zorn-fullscreen {
+        min-width: 140px;
-    .video-controls, video {
+        backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
-        border-radius: 0 !important;
+        -webkit-backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
-    }
+        border-radius: 6px;
-    .video-controls {
+        margin-top: 6px;
-        height: calc(100% - 24px);
+        hr {
-        .vc-top {
+            margin: 0px;
-            opacity: 1 !important;
+            border: none;
+            height: 1px;
+            background: #ffffff3d;
+        }
+        a, button {
+            text-align: left;
+            margin: 0px;
+            color: white;
+            border: none;
+            font-size: 14px;
+            text-decoration: none;
+            padding: 10px 12px;
+            background: transparent;
+            cursor: pointer;
+            transition: 0.3s background;
+            &:hover {
+                background: rgba(0, 0, 0, 0.5);
+                transition: 0.3s background;
+            }
+            &:first-child {border-radius: 6px 6px 0px 0px}
+            &:last-child {border-radius: 0px 0px 6px 6px}
         }
     }
 }
@@ -299,84 +314,43 @@
     }
 }
 
-.vc-menu {
+// Settings Menu
+.zorn-settings-menu {
     position: absolute;
-    right: 0px;
+    right: 12px;
-    bottom: 0px;
+    bottom: 72px;
-    background: rgb(0 0 0 / 25%);
+    z-index: 4;
-    border-radius: 6px;
+    div {
-    margin: 0px 24px 90px 0px;
+        display: none; /* Hide By Default */
-    width: max-content;
+        flex-direction: column;
-    min-width: 180px;
+        min-width: 140px;
-    display: none;
+        backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
-    flex-direction: column;
+        -webkit-backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
-    gap: 6px;
+        border-radius: 6px;
-    padding: 4px;
+        margin-top: 6px;
-    backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
+        hr {
-    -webkit-backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
+            margin: 0px;
-    z-index: 10;
+            border: none;
-    hr {
+            height: 1px;
-        margin: 0px;
+            background: #ffffff3d;
-        width: 100%;
-        height: 1px;
-        border: none;
-        background: rgb(255 255 255 / 25%);
-    }
-    button {
-        padding: 0px 12px !important;
-        margin: 0px !important;
-        aspect-ratio: inherit !important;
-        background: transparent !important;
-        border-radius: 4px !important;
-        display: flex;
-        justify-content: space-between;
-        font-size: 14px !important;
-        min-height: 34px;
-        border: none;
-        color: white;
-        p {
-            margin: 0px !important;
-            margin-top: 4px !important;
         }
-        &:hover {
+        a, button {
-            background: rgb(95 95 95 / 51%) !important;
+            text-align: left;
+            margin: 0px;
+            color: white;
+            border: none;
+            font-size: 14px;
+            text-decoration: none;
+            padding: 10px 12px;
+            background: transparent;
+            cursor: pointer;
+            transition: 0.3s background;
+            &:hover {
+                background: rgba(0, 0, 0, 0.5);
+                transition: 0.3s background;
+            }
+            &:first-child {border-radius: 6px 6px 0px 0px}
+            &:last-child {border-radius: 0px 0px 6px 6px}
         }
-        svg {
-            width: 14px;
-        }
-        .iconoir-arrow-up-right::before {
-            width: 16px;
-            height: 16px;
-        }
-    }
-    .vc-menu-whitelabel {
-        text-align: right;
-        text-decoration: none;
-        font-size: 12px;
-        margin: 6px 12px;
-        &:hover {
-            text-decoration: underline;
-        }
-        span {
-            color: gray;
-        }
-    }
-    &#subtitles {
-        min-width: 124px !important;
     }
 }
-
-#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 {
-    width: 24px;
-}