From 5a994ddff9a82e6d0445ef867f0328836bd85709 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 6 Nov 2023 02:10:21 -0500
Subject: [PATCH] Fix root for progress bar

---
 src/styles/app.scss | 65 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 30365b5..592d5e2 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -2,8 +2,9 @@ $color_1: white;
 $color_2: #fff;
 $font-family_1: Arial, Helvetica, sans-serif;
 $background-color_1: transparent;
-$background-color_2: rgba(0, 0, 0, 0.6);
+$background-color_2: rgba(0, 0, 0, 0.5);
 $background-color_3: #fff;
+$background-color_4: rgba(255, 255, 255, 0.1);
 
 :root {
 	--plyx-progress-bar-bg: rgba(100,100,100,0.5);
@@ -11,6 +12,33 @@ $background-color_3: #fff;
 	--pylx-thumb: red;
 	--pylx-rounded-corners: 4px;
 }
+
+.plyx-context-menu {
+	background: linear-gradient( 45deg, rgb(10, 20, 28) 0%, rgba(10, 20, 28, 0.7) 100% );
+	border-radius: 6px;
+	border: 1px rgba(255, 255, 255, 0.08) solid;
+	ul {
+		list-style: none;
+		margin: 0px;
+		padding: 0px;
+		li {
+			padding: 8px 32px 8px 16px;
+			margin: 4px;
+			border-radius: 4px;
+			font-family: arial;
+			&:hover {
+				background: $background-color_4;
+				cursor: pointer;
+			}
+			i {
+				font-size: 14px;
+				margin-right: 12px;
+				width: 12px;
+			}
+		}
+	}
+}
+
 .video-container {
 	position: relative;
 	display: flex;
@@ -21,6 +49,19 @@ $background-color_3: #fff;
 	.plyx-player {
 		display: inline-flex;
 	}
+	.hide {
+		opacity: 0;
+		pointer-events: none;
+	}
+	.plyx-player-title {
+	  position: absolute;
+	  top: 0px;
+	  width: 100%;
+	  background-image: linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
+	  padding: 12px 24px;
+	  font-size: 18px;
+	  font-weight: bold;
+	}
 	.plyx-player-controls {
 		display: inline-flex;
 		right: 0;
@@ -58,6 +99,20 @@ $background-color_3: #fff;
 				border-radius: 6px;
 			}
 		}
+		.volume-controls {
+			&:hover > #volume {
+				opacity: 1;
+				transition: 0.3s opacity, 0.3s width;
+				margin: 0px;
+				width: 72px;
+			}
+		}
+		#volume {
+			opacity: 0;
+			transition: 0.3s opacity, 0.3s width;
+			margin: 0px -6px;
+			width: 0px;
+		}
 		#volume-button {
 			svg {
 				aspect-ratio: 1;
@@ -67,10 +122,6 @@ $background-color_3: #fff;
 				padding: 3px 0px 0px 0px;
 			}
 		}
-		.video-controls.hide {
-			opacity: 0;
-			pointer-events: none;
-		}
 		.video-progress {
 			position: relative;
 			height: 6.4px;
@@ -95,7 +146,7 @@ $background-color_3: #fff;
 			}
 			&::-moz-progress-bar {
 				border: none;
-				background: #ff7e7e;
+				background: var(--plyx-progress-bar);
 			}
 		}
 		.seek {
@@ -201,4 +252,4 @@ $background-color_3: #fff;
 			border-radius: 10px;
 		}
 	}	
-}
+}
\ No newline at end of file