CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Center and resize settings button in VideoJS

Browse Source 
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.
This commit is contained in:
Yiannis Christodoulou 2025-10-02 12:43:02 +03:00
parent a43316bd5b
commit 44e6beb814
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend-tools/video-js/src/VideoJS.css
View File

@ -320,6 +320,25 @@ html {
position: relative !important; 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 { .video-js .vjs-next-video-control {
order: 1 !important; order: 1 !important;
} }
@ -698,6 +717,10 @@ button.vjs-button > .vjs-icon-placeholder:before {
line-height: 36px; line-height: 36px;
transition: ease-in-out 0.5s; 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 { .video-js .vjs-volume-panel div.vjs-volume-control {
height: 100% !important; height: 100% !important;