From 30e3fce9673d4b876b695cf26096dfcd0ae0a8f3 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Thu, 2 Oct 2025 12:12:26 +0300 Subject: [PATCH] Add custom styling for chapters button --- frontend-tools/video-js/src/VideoJS.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css index bd453ffc..0ca03235 100644 --- a/frontend-tools/video-js/src/VideoJS.css +++ b/frontend-tools/video-js/src/VideoJS.css @@ -179,6 +179,24 @@ html { background: rgba(0, 0, 0, 0.2) !important; } +/* Chapters button wrapper styling */ +.video-js .vjs-chapters-button.vjs-menu-button { + order: 6 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + position: relative !important; + background: rgba(0, 0, 0, 0.1) !important; + border-radius: 6px !important; + padding: 2px !important; + margin: 0 2px !important; + transition: background-color 0.3s ease !important; +} + +.video-js .vjs-chapters-button.vjs-menu-button:hover { + background: rgba(0, 0, 0, 0.2) !important; +} + .video-js .vjs-control { height: auto !important; }