mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-05 23:18:53 -05:00
a4f0c742a0
Added CSS rules to prevent control bar button overflow, prioritize essential controls, and hide less important buttons on smaller screens. Also removed legacy VideoJS static assets no longer in use.
109 lines
3.2 KiB
CSS
109 lines
3.2 KiB
CSS
button {
|
|
cursor: pointer;
|
|
}
|
|
.playlist-items a {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.video-js,
|
|
.video-js[tabindex],
|
|
.vjs-button:focus,
|
|
.video-js video:focus,
|
|
.video-js video:focus-visible {
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Show time control in all screen sizes */
|
|
.video-js .vjs-time-control {
|
|
display: block !important;
|
|
}
|
|
.video-js .vjs-time-control.vjs-time-divider {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide time tooltip, mouse display, and sprite preview for audio files */
|
|
.video-js.vjs-audio-type .vjs-time-tooltip,
|
|
.video-js.vjs-audio-type .vjs-mouse-display,
|
|
.video-js.vjs-audio-type .vjs-sprite-preview-tooltip,
|
|
.video-js.vjs-audio-type .chapter-image-sprite {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* Adjust subtitle position when controls are visible */
|
|
/* When controls are VISIBLE (user is active), add extra bottom margin */
|
|
.video-js:not(.vjs-user-inactive) .vjs-text-track-display {
|
|
margin-bottom: 2em; /* Adjust this value to move subtitles higher when controls are visible */
|
|
}
|
|
|
|
/* When controls are HIDDEN (user is inactive), use default positioning */
|
|
.video-js.vjs-user-inactive .vjs-text-track-display {
|
|
margin-bottom: 0.5em; /* Smaller margin when controls are hidden */
|
|
}
|
|
|
|
/* Center the fullscreen button inside its wrapper */
|
|
/* @media (hover: hover) and (pointer: fine) {
|
|
.vjs-fullscreen-control svg {
|
|
width: 30px !important;
|
|
height: 30px !important;
|
|
}
|
|
}
|
|
*/
|
|
|
|
/* Prevent control bar buttons from overflowing */
|
|
.video-js .vjs-control-bar {
|
|
overflow: visible !important;
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
|
|
/* Ensure control bar stays within bounds - only allow non-essential buttons to shrink */
|
|
.video-js .vjs-control-bar .vjs-settings-button,
|
|
.video-js .vjs-control-bar .vjs-chapters-button,
|
|
.video-js .vjs-control-bar .vjs-subtitles-button,
|
|
.video-js .vjs-control-bar .vjs-captions-button,
|
|
.video-js .vjs-control-bar .vjs-subs-caps-button,
|
|
.video-js .vjs-control-bar .vjs-autoplay-toggle,
|
|
.video-js .vjs-control-bar .vjs-next-video-button {
|
|
flex-shrink: 1 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* Priority controls that should never shrink - maintain their size and spacing */
|
|
.video-js .vjs-control-bar .vjs-play-control,
|
|
.video-js .vjs-control-bar .vjs-volume-panel,
|
|
.video-js .vjs-control-bar .vjs-fullscreen-control,
|
|
.video-js .vjs-control-bar .vjs-picture-in-picture-toggle,
|
|
.video-js .vjs-control-bar .custom-remaining-time {
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Hide less important buttons on smaller screens */
|
|
@media (max-width: 768px) {
|
|
.video-js .vjs-control-bar .vjs-picture-in-picture-toggle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.video-js .vjs-control-bar .vjs-autoplay-toggle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.video-js .vjs-control-bar .vjs-next-video-button {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
/* Hide subtitles/captions button on very small screens - already available in settings */
|
|
.video-js .vjs-control-bar .vjs-subtitles-button,
|
|
.video-js .vjs-control-bar .vjs-captions-button,
|
|
.video-js .vjs-control-bar .vjs-subs-caps-button {
|
|
display: none !important;
|
|
}
|
|
}
|