From 44e6beb81490a01d255775d099de6c204abfe811 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 2 Oct 2025 12:43:02 +0300
Subject: [PATCH] Center and resize settings button in VideoJS

Added CSS rules to center the settings button within its wrapper and increased the SVG icon size by 2px for improved visual alignment in the video player controls.
---
 frontend-tools/video-js/src/VideoJS.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index b92df26b..dab53cd4 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -320,6 +320,25 @@ html {
     position: relative !important;
 }
 
+/* Center the settings button inside its wrapper */
+.video-js .vjs-settings-wrapper .vjs-settings-button {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 36px !important;
+    height: 36px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+/* Increase settings button SVG icon size by 2px */
+.video-js .vjs-settings-wrapper .vjs-settings-button svg {
+    width: 46px !important;
+    height: 46px !important;
+}
+
 .video-js .vjs-next-video-control {
     order: 1 !important;
 }
@@ -698,6 +717,10 @@ button.vjs-button > .vjs-icon-placeholder:before {
     line-height: 36px;
     transition: ease-in-out 0.5s;
 }
+.vjs-icon-chapters:before,
+.video-js .vjs-chapters-button .vjs-icon-placeholder:before {
+    font-size: 2.1em !important;
+}
 
 .video-js .vjs-volume-panel div.vjs-volume-control {
     height: 100% !important;