diff --git a/src/css/components/_adaptive.scss b/src/css/components/_adaptive.scss index 16ad060829..bc0210eed2 100644 --- a/src/css/components/_adaptive.scss +++ b/src/css/components/_adaptive.scss @@ -4,18 +4,23 @@ // - Play button // - Volume Mute button // - Progress bar -// - Subs-Caps button +// - Track buttons +// - Native PiP button // - Fullscreen button // -// When the player is "small", display only: +// When the player is "x-small", display only: // - Play button // - Volume Mute button -// - Progress bar +// - Spacer +// - Track buttons +// - Native PiP button // - Fullscreen button // // When the player is "tiny", display only: // - Play button // - Volume Mute button +// - Track buttons +// - Native PiP button // - Fullscreen Button // .video-js { @@ -28,11 +33,6 @@ .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, - .vjs-chapters-button, - .vjs-descriptions-button, - .vjs-captions-button, - .vjs-subtitles-button, - .vjs-audio-button, .vjs-volume-control { display: none; } @@ -50,20 +50,18 @@ } } - // Hide the subs-caps button for non-Live UI "x-small" and for "tiny" players. - &.vjs-layout-x-small:not(.vjs-liveui), - &.vjs-layout-x-small:not(.vjs-live), + // At x-small and tiny, the progress control is too narrow to be useful. + &.vjs-layout-x-small, &.vjs-layout-tiny { - .vjs-subs-caps-button { + + .vjs-progress-control { display: none; } } - // With the new Live UI, we can have the same treatment as "tiny". At - // "x-small", the Live UI makes the progress control very small and almost - // useless. - &.vjs-layout-x-small.vjs-liveui, - &.vjs-layout-tiny { + // At x-small, the buttons alone leave a large gap on the right. Fill it with + // the spacer element. + &.vjs-layout-x-small { .vjs-custom-control-spacer { @include flex(auto); @@ -73,9 +71,5 @@ &.vjs-no-flex .vjs-custom-control-spacer { width: auto; } - - .vjs-progress-control { - display: none; - } } }