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

Improve video control alignment and responsive time display

Browse Source 
Adjusted CSS for video control wrappers to ensure consistent alignment and spacing across desktop and mobile. Reduced gaps between PiP and fullscreen buttons, and hid subtitles button on small screens for better layout. Updated CustomRemainingTime.css to increase font size, padding, and font weight for better readability on smaller devices.
This commit is contained in:
Yiannis Christodoulou 2025-10-02 13:30:36 +03:00
parent 44e6beb814
commit 1585d619a7
2 changed files with 129 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -320,6 +320,15 @@ html {
position: relative !important;
}
/* Reduce gap between pip and fullscreen buttons */
.video-js .vjs-pip-wrapper {
margin-right: 0px !important;
}
.video-js .vjs-fullscreen-wrapper {
margin-left: 0px !important;
}
/* Center the settings button inside its wrapper */
.video-js .vjs-settings-wrapper .vjs-settings-button {
display: flex !important;
@ -339,6 +348,21 @@ html {
height: 46px !important;
}
/* Ensure consistent alignment and spacing for all control wrappers */
.video-js .vjs-play-wrapper,
.video-js .vjs-next-video-wrapper,
.video-js .vjs-volume-wrapper,
.video-js .vjs-autoplay-wrapper,
.video-js .vjs-chapters-button.vjs-menu-button,
.video-js .vjs-subtitles-button.vjs-menu-button,
.video-js .vjs-settings-wrapper,
.video-js .vjs-pip-wrapper,
.video-js .vjs-fullscreen-wrapper {
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
}
.video-js .vjs-next-video-control {
order: 1 !important;
}
@ -796,6 +820,68 @@ button.vjs-button > .vjs-icon-placeholder:before {
bottom: 52px !important; /* Moved up to prevent overlap with controls */
}
/* Consistent wrapper spacing and alignment on mobile */
.video-js .vjs-play-wrapper,
.video-js .vjs-next-video-wrapper,
.video-js .vjs-volume-wrapper,
.video-js .vjs-autoplay-wrapper,
.video-js .vjs-chapters-button.vjs-menu-button,
.video-js .vjs-subtitles-button.vjs-menu-button,
.video-js .vjs-settings-wrapper,
.video-js .vjs-pip-wrapper,
.video-js .vjs-fullscreen-wrapper {
padding: 0px !important;
margin: 0 1px !important;
width: 32px !important;
height: 32px !important;
align-items: center !important;
justify-content: center !important;
}
/* Ensure buttons inside wrappers are properly sized on mobile */
.video-js .vjs-play-wrapper .vjs-play-control,
.video-js .vjs-next-video-wrapper .vjs-next-video-control,
.video-js .vjs-autoplay-wrapper .vjs-autoplay-toggle,
.video-js .vjs-chapters-button.vjs-menu-button button,
.video-js .vjs-subtitles-button.vjs-menu-button button,
.video-js .vjs-settings-wrapper .vjs-settings-button,
.video-js .vjs-pip-wrapper .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-wrapper .vjs-fullscreen-control {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Fix play button icon vertical alignment to match other icons */
.video-js .vjs-play-wrapper .vjs-play-control .vjs-icon-placeholder {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
line-height: 1 !important;
position: absolute !important;
top: 48% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.video-js .vjs-play-wrapper .vjs-play-control .vjs-icon-placeholder:before {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
vertical-align: middle !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vjs-chapters-button button.vjs-button,
.vjs-subtitles-button button.vjs-button,
.video-js button.vjs-control {
@ -907,6 +993,20 @@ button.vjs-button > .vjs-icon-placeholder:before {
display: none !important;
}
/* Hide subtitles button on small screens to make room for fullscreen */
.video-js .vjs-subtitles-button.vjs-menu-button,
.video-js .vjs-subs-caps-button {
display: none !important;
}
/* Reduce spacing for first three controls on small screens */
.video-js .vjs-play-wrapper,
.video-js .vjs-next-video-wrapper,
.video-js .vjs-volume-wrapper {
margin: 0 0.5px !important;
padding: 0 !important;
}
/* Compact buttons for small screens */
.vjs-chapters-button button.vjs-button,
.vjs-subtitles-button button.vjs-button,
@ -1029,6 +1129,20 @@ button.vjs-button > .vjs-icon-placeholder:before {
opacity: 0 !important;
display: none !important;
}
/* Hide subtitles button on very small screens to make room for fullscreen */
.video-js .vjs-subtitles-button.vjs-menu-button,
.video-js .vjs-subs-caps-button {
display: none !important;
}
/* Further reduce spacing for first three controls on very small screens */
.video-js .vjs-play-wrapper,
.video-js .vjs-next-video-wrapper,
.video-js .vjs-volume-wrapper {
margin: 0 0px !important;
padding: 0 !important;
}
.vjs-chapters-button button.vjs-button,
.vjs-subtitles-button button.vjs-button,
.video-js button.vjs-control {

26
frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
View File

@ -21,31 +21,35 @@
/* Responsive time display sizing */
@media (max-width: 767px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 11px !important;
padding: 0 2px;
font-size: 13px !important;
padding: 0 3px;
font-weight: 600 !important;
}
}
@media (max-width: 500px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 9px !important;
padding: 0 1px;
letter-spacing: -0.3px;
font-size: 12px !important;
padding: 0 2px;
letter-spacing: -0.2px;
font-weight: 600 !important;
}
}
@media (max-width: 480px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 9px !important;
padding: 0 1px;
letter-spacing: -0.3px;
font-size: 11px !important;
padding: 0 2px;
letter-spacing: -0.2px;
font-weight: 600 !important;
}
}
@media (max-width: 399px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 8px !important;
padding: 0;
letter-spacing: -0.5px;
font-size: 10px !important;
padding: 0 1px;
letter-spacing: -0.3px;
font-weight: 600 !important;
}
}