sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update video player styles with a custom pink theme and blur effects

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-04 13:30:44 +00:00
parent 20ccad65c1
commit 9524400087
1 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/src/index.css
View File

@ -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 */