diff --git a/src/css/components/_button.scss b/src/css/components/_button.scss index 780114ca43..47d407fa39 100644 --- a/src/css/components/_button.scss +++ b/src/css/components/_button.scss @@ -32,8 +32,6 @@ // Control bar child buttons .vjs-control.vjs-button { - // Don't scale buttons down on tiny screens width: $control-button-width; - min-width: $control-button-width; height: $control-button-height; } diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss index b0466b0f99..d2153e18e0 100644 --- a/src/css/components/_control-bar.scss +++ b/src/css/components/_control-bar.scss @@ -9,6 +9,12 @@ pointer-events: none; // Don't block nested buttons } +.video-js.vjs-audio-only-mode .vjs-control-bar { + position: relative; + inset: 0; + padding: $controls-margin; +} + /* Flex wrap control bar children at the custom neueWrap component */ .video-js .vjs-neue-wrap { diff --git a/src/css/components/_error.scss b/src/css/components/_error.scss index 7ac118848e..ec64c8f058 100644 --- a/src/css/components/_error.scss +++ b/src/css/components/_error.scss @@ -2,22 +2,3 @@ width: 100%; // see _modal-dialog.scss; } - -// .vjs-error .vjs-error-display:before { -// color: #fff; -// content: 'X'; -// font-family: $text-font-family; -// font-size: 4em; -// left: 0; - -// // In order to center the play icon vertically we need to set the line height -// // to the same as the button height -// line-height: 1; -// margin-top: -0.5em; -// position: absolute; -// text-shadow: 0.05em 0.05em 0.1em #000; -// text-align: center; -// top: 50%; -// vertical-align: middle; -// width: 100%; -// } diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss index 293f68c773..a51ff44708 100644 --- a/src/css/components/_modal-dialog.scss +++ b/src/css/components/_modal-dialog.scss @@ -1,19 +1,14 @@ .vjs-modal-dialog-content { - z-index: 1; font-size: $modal-text-size; line-height: $modal-text-line-height; } .video-js .vjs-modal-dialog { - @include display-flex(flex-start, flex-start); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: $modal-padding; - overflow: auto; + @extend %fill-parent; + // @include display-flex(flex-start, flex-start); background-color: $primary-background-color; + // This allows scrolling of content if need be. + overflow: auto; } // Reset box-sizing inside the modal dialog @@ -23,5 +18,7 @@ // } .vjs-modal-dialog .vjs-modal-dialog-content { - // see .vjs-modal-dialog-content; + @extend %fill-parent; + padding: $modal-padding; + z-index: 1; } diff --git a/src/css/components/_play-pause.scss b/src/css/components/_play-pause.scss index c284e9730c..cfd0b1ffc1 100644 --- a/src/css/components/_play-pause.scss +++ b/src/css/components/_play-pause.scss @@ -9,31 +9,14 @@ backdrop-filter: blur(16px); } -// Collapse control bar to child height for Github ci tests -.video-js.vjs-audio-only-mode .vjs-play-control { - position: relative; - margin: 0; - width: $control-button-height; // This button is square (?) - min-width: unset; - height: $control-button-height; - border-radius: 0; - backdrop-filter: unset; -} - -// Hide play control when paused -.video-js.vjs-paused .vjs-play-control { - display: none; -} - // Show play control when playback starts -.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder, -.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder { +.video-js .vjs-play-control .vjs-icon-placeholder { display: block; position: relative; // Required for positioning of pseudo content width: 100%; height: 100%; background-size: contain; - @extend .icon-pause; + @extend .icon-big-play; &:before { display: block; position: absolute; @@ -43,7 +26,7 @@ height: inherit; content: ""; opacity: 0; - @extend .icon-pause-highlight; + @extend .icon-big-play-highlight; @include transition(opacity $icon-unhighlight-time); } &:hover { @@ -52,4 +35,13 @@ @include transition(opacity $icon-highlight-time); } } +} + +// Show play control when playback starts +.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder, +.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder { + @extend .icon-pause; + &:before { + @extend .icon-pause-highlight; + } } \ No newline at end of file