From 95244000873b3460b181330d9104ba4d525daba8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 4 Sep 2025 13:30:44 +0000
Subject: [PATCH] Update video player styles with a custom pink theme and blur
 effects

Add custom CSS styles for the Video.js player, including a pink theme for the control bar, play progress, and buttons, along with backdrop blur effects.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/jh6R7y2
---
 client/src/index.css | 62 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/client/src/index.css b/client/src/index.css
index bc4473e..a68ad80 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -170,6 +170,68 @@
   .animation-delay-150 {
     animation-delay: 150ms;
   }
+
+  /* Video.js Player Custom FOLX Theme */
+  .video-js .vjs-control-bar {
+    background: rgba(236, 76, 115, 0.9) !important;
+    backdrop-filter: blur(10px) !important;
+  }
+
+  .video-js .vjs-play-progress {
+    background: #ec4c73 !important;
+  }
+
+  .video-js .vjs-load-progress {
+    background: rgba(236, 76, 115, 0.3) !important;
+  }
+
+  .video-js .vjs-progress-control .vjs-progress-holder {
+    background: rgba(255, 255, 255, 0.2) !important;
+  }
+
+  .video-js .vjs-big-play-button {
+    background: rgba(236, 76, 115, 0.9) !important;
+    border-color: #ec4c73 !important;
+    color: white !important;
+  }
+
+  .video-js .vjs-big-play-button:hover {
+    background: rgba(236, 76, 115, 1) !important;
+  }
+
+  .video-js .vjs-button > .vjs-icon-placeholder:before,
+  .video-js .vjs-time-control {
+    color: white !important;
+  }
+
+  .video-js .vjs-button:hover {
+    background: rgba(236, 76, 115, 0.5) !important;
+  }
+
+  .video-js .vjs-volume-level {
+    background: #ec4c73 !important;
+  }
+
+  .video-js .vjs-volume-bar {
+    background: rgba(255, 255, 255, 0.2) !important;
+  }
+
+  .video-js .vjs-slider-horizontal .vjs-volume-level {
+    background: #ec4c73 !important;
+  }
+
+  .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+    background: rgba(236, 76, 115, 0.95) !important;
+    backdrop-filter: blur(10px) !important;
+  }
+
+  .video-js .vjs-menu li.vjs-selected {
+    background: rgba(236, 76, 115, 0.8) !important;
+  }
+
+  .video-js .vjs-menu li:hover {
+    background: rgba(236, 76, 115, 0.6) !important;
+  }
 }
 
 /* Video edit modal styles */