diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 36c157e4..fd905af0 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -637,33 +637,33 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la left: 0; right: 0; } + } - // Hide controls when playing in full screen - &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing, - &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing { - .plyr__controls { - transform: translateY(100%) translateY($plyr-control-spacing / 2); - transition: transform .3s .2s ease; - } - .plyr__captions { - bottom: ($plyr-control-spacing / 2); - transition: bottom .3s .2s ease; - } - &.plyr--hover .plyr__controls { - transform: translateY(0); - } + // Hide controls when playing in full screen + &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing, + &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing { + .plyr__controls { + transform: translateY(100%) translateY($plyr-control-spacing / 2); + transition: transform .3s .2s ease; } + .plyr__captions { + bottom: ($plyr-control-spacing / 2); + transition: bottom .3s .2s ease; + } + &.plyr--hover .plyr__controls { + transform: translateY(0); + } + } - // Captions - &.plyr--fullscreen .plyr__captions, - &--fullscreen-active .plyr__captions, - &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions { - top: auto; - bottom: 90px; + // Captions + &.plyr--fullscreen .plyr__captions, + &--fullscreen-active .plyr__captions, + &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions { + top: auto; + bottom: 90px; - @media (min-width: $plyr-bp-control-split) { - bottom: 60px; - } + @media (min-width: $plyr-bp-control-split) { + bottom: 60px; } }