From 49ddc58ce8ac9aa979a5fed0de0e50fbd9421964 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Mon, 16 Oct 2023 17:56:26 -0400
Subject: [PATCH] updaet

---
 README.md          | 11 +++++++++
 package.json       |  2 +-
 src/styles/app.css | 59 +++++++++++++++++++++++-----------------------
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 75048ab..e14ee33 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,17 @@ Add the stylesheet and script:
 ...
 ```
 
+Also add the Font Awesome that the Pylx uses:
+```html
+<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
+```
+
+<details>
+<summary>About this Font Awesome Pro Kit</summary>
+This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.
+</details>
+
+
 Then, add the class name `plyx-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
 ```html
 <div class="video-container">
diff --git a/package.json b/package.json
index a3679c0..f544fa2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sudovanilla/plyx-player",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Custom player for HTML5",
   "author": "sudovanilla",
   "license": "AGPL-3.0-or-later",
diff --git a/src/styles/app.css b/src/styles/app.css
index 769f122..6735035 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -8,6 +8,7 @@
 	flex-direction: column;
 	justify-content: center;
 	font-family: Arial, Helvetica, sans-serif;
+	color: white;
 }
 .plyx-player-controls {
 	display: inline-flex;
@@ -20,21 +21,21 @@
 	background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
 	flex-direction: inherit;
 }
-.row-1 {
+.video-container .row-1 {
 	display: flex;
 	justify-content: space-between;
 	width: 100%;
 	padding-bottom: 12px;
 }
-.row-1-start {
+.video-container .row-1-start {
 	display: flex;
 	align-items: center;
 }
-.row-1-end {
+.video-container .row-1-end {
 	display: flex;
 	align-items: center;
 }
-button {
+.video-container button {
 	aspect-ratio: 1;
 	height: 32px;
 	width: 32px;
@@ -43,27 +44,27 @@ button {
 	border: none;
 	margin: 0px 6px;
 }
-button:hover {
+.video-container button:hover {
 	background: rgba(44, 44, 44, 0.6);
 	border-radius: 6px;
 }
-#volume-button svg {
+.video-container #volume-button svg {
 	aspect-ratio: 1;
 	height: 32px;
 	width: 32px;
 	fill: white;
 	padding: 3px 0px 0px 0px;
 }
-.video-controls.hide {
+.video-container .video-controls.hide {
 	opacity: 0;
 	pointer-events: none;
 }
-.video-progress {
+.video-container .video-progress {
 	position: relative;
 	height: 6.4px;
 	margin: 24px 0px;
 }
-progress {
+.video-container progress {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
@@ -74,29 +75,29 @@ progress {
 	position: absolute;
 	top: 0;
 }
-progress::-webkit-progress-bar {
+.video-container progress::-webkit-progress-bar {
 	background-color: #474545;
 	border-radius: 2px;
 }
-progress::-webkit-progress-value {
+.video-container progress::-webkit-progress-value {
 	background: red;
 	border-radius: 2px;
 }
-progress::-moz-progress-bar {
+.video-container progress::-moz-progress-bar {
 	border: none;
 	background: #ff7e7e;
 }
-.seek {
+.video-container .seek {
 	position: absolute;
 	top: 0;
 	width: 100%;
 	cursor: pointer;
 	margin: 0;
 }
-.seek:hover + .seek-tooltip {
+.video-container .seek:hover + .seek-tooltip {
 	display: block;
 }
-.seek-tooltip {
+.video-container .seek-tooltip {
 	display: none;
 	position: absolute;
 	top: -50px;
@@ -108,30 +109,30 @@ progress::-moz-progress-bar {
 	color: #fff;
 	background-color: rgba(0, 0, 0, 0.6);
 }
-input[type=range] {
+.video-container input[type=range] {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	height: 8.4px;
 	background: transparent;
 	cursor: pointer;
 }
-input[type=range]:focus {
+.video-container input[type=range]:focus {
 	outline: none;
 }
-input[type=range]:focus::-webkit-slider-runnable-track {
+.video-container input[type=range]:focus::-webkit-slider-runnable-track {
 	background: transparent;
 }
-input[type=range]:focus::-moz-range-track {
+.video-container input[type=range]:focus::-moz-range-track {
 	outline: none;
 }
-input[type=range]::-webkit-slider-runnable-track {
+.video-container input[type=range]::-webkit-slider-runnable-track {
 	width: 100%;
 	cursor: pointer;
 	border-radius: 1.3px;
 	-webkit-appearance: none;
 	transition: all 0.4s ease;
 }
-input[type=range]::-webkit-slider-thumb {
+.video-container input[type=range]::-webkit-slider-thumb {
 	height: 16px;
 	width: 16px;
 	border-radius: 16px;
@@ -140,7 +141,7 @@ input[type=range]::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	margin-left: -1px;
 }
-input[type=range]::-moz-range-track {
+.video-container input[type=range]::-moz-range-track {
 	width: 100%;
 	height: 8.4px;
 	cursor: pointer;
@@ -148,24 +149,24 @@ input[type=range]::-moz-range-track {
 	background: transparent;
 	border-radius: 0;
 }
-input[type=range].volume {
+.video-container input[type=range].volume {
 	height: 5px;
 	background-color: #fff;
 }
-input[type=range].volume::-webkit-slider-runnable-track {
+.video-container input[type=range].volume::-webkit-slider-runnable-track {
 	background-color: transparent;
 }
-input[type=range].volume::-webkit-slider-thumb {
+.video-container input[type=range].volume::-webkit-slider-thumb {
 	margin-left: 0;
 	height: 14px;
 	width: 14px;
 	background: #fff;
 }
-input[type=range].volume::-moz-range-thumb {
+.video-container input[type=range].volume::-moz-range-thumb {
 	border: 1px solid #fff;
 	background: #fff;
 }
-input[type="range"]::-moz-range-thumb {
+.video-container input[type="range"]::-moz-range-thumb {
 	height: 12px;
 	width: 12px;
 	border-radius: 10px;
@@ -173,11 +174,11 @@ input[type="range"]::-moz-range-thumb {
 	background: #f00;
 	cursor: pointer;
 }
-.hide {
+.video-container .hide {
 	opacity: 0;
 	pointer-events: none;
 }
-#progress-bar {
+.video-container #progress-bar {
 	background: rgba(12, 12, 12, 0.1);
 	border: none;
 	border-radius: 10px;