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

fix: Push specific controls to the right side of control bar

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-07-14 15:02:36 +03:00
parent 13f80a526a
commit 8bf50795c2
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -455,3 +455,49 @@
.vjs-slider-horizontal {
top: -5px;
}
/* Push specific controls to the right side of control bar */
.video-js .vjs-control-bar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
}
/* Create a spacer to push remaining controls to the right */
.video-js .vjs-control-bar .vjs-volume-panel::after {
content: "";
flex: 1;
margin-left: auto;
}
/* Move these 5 controls to the right */
.video-js .vjs-playback-rate,
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-chapters-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-fullscreen-control,
.video-js .vjs-subs-caps-button {
margin-left: auto !important;
order: 999 !important;
}
/* Remove auto margin from subsequent items to keep them grouped */
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-chapters-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-fullscreen-control,
.video-js .vjs-subs-caps-button {
margin-left: 0 !important;
}
/* Alternative approach - target by position */
.video-js .vjs-control-bar > *:nth-last-child(-n + 5) {
margin-left: auto !important;
order: 999 !important;
}
.video-js .vjs-control-bar > *:nth-last-child(-n + 4) {
margin-left: 0 !important;
}