Custom video player

resources/css/app.css

@@ -1,4 +1,5 @@
 @import "@fortawesome/fontawesome-free/css/all.css";
+@import './player.css';
 
 @tailwind base;
 @tailwind components;
@@ -8,47 +9,6 @@
 	--breakpoint-xs: 30rem; 
 }
 
-/* Player */
-.plyr--full-ui input[type="range"] {
-	color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
-}
-
-.plyr__control--overlaid {
-	background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
-}
-
-.plyr--video .plyr__control.plyr__tab-focus,
-.plyr--video .plyr__control:hover,
-.plyr--video .plyr__control[aria-expanded="true"] {
-	background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
-}
-
-.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
-	background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
-}
-
-.plyr--full-ui {
-	border-radius: 15px;
-}
-
-/* Player Engagement Heatmap, overlays the progress bar track */
-.plyr__progress__heatmap {
-	position: absolute;
-	left: -6px;
-	right: -6px;
-	bottom: 40%;
-	height: 48px;
-	pointer-events: none;
-	z-index: 0;
-}
-
-.plyr__progress__heatmap-canvas {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-}
-
 /* Player Ambient */
 .decoy {
 	position: absolute;
@@ -68,31 +28,6 @@ input:checked~.dot {
 	transform: translateX(100%);
 }
 
-#plyr__time_skip {
-	background: #c61e54;
-	border: 0;
-	border-radius: 50%;
-	color: #fff;
-	left: 50%;
-	min-width: 60px;
-	width: min-content;
-	max-width: 100px;
-	max-height: 90px;
-	opacity: 0;
-	display: table-cell;
-	text-align: center;
-	vertical-align: middle;
-	transform: translate(-50%, -50%);
-	padding-top: 15px;
-	padding-bottom: 15px;
-	position: absolute;
-	top: 50%;
-	transition: 1s;
-	z-index: 3;
-	pointer-events: none;
-	box-shadow: 0px 0px 45px #000000;
-}
-
 /* DL Button Glow */
 .hover\:glow:hover {
 	filter: drop-shadow(0px 0px 7px rgba(255, 29, 72, 0.5));