ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix #1137: Improve captions positioning consistency

Browse Source
This commit is contained in:
Albin Larsson 2018-07-31 16:17:55 +02:00
parent e3dfd16096
commit 9488de30e5
2 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/sass/components/captions.scss
View File

@ -17,7 +17,6 @@
padding: $plyr-control-spacing; padding: $plyr-control-spacing;
position: absolute; position: absolute;
text-align: center; text-align: center;
transform: translateY(-($plyr-control-spacing * 4));
transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out;
width: 100%; width: 100%;
@ -53,6 +52,8 @@
display: block; display: block;
} }
.plyr--hide-controls .plyr__captions { // If the lower controls are shown and not empty
transform: translateY(-($plyr-control-spacing * 1.5)); .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(-($plyr-control-spacing * 4));
} }

13
src/sass/components/controls.scss
View File

@ -2,6 +2,11 @@
// Controls // Controls
// -------------------------------------------------------------- // --------------------------------------------------------------
// Hide empty controls
.plyr__controls:empty {
display: none;
}
// Hide native controls // Hide native controls
.plyr--full-ui ::-webkit-media-controls { .plyr--full-ui ::-webkit-media-controls {
display: none; display: none;
@ -109,11 +114,3 @@
.plyr--fullscreen-enabled [data-plyr='fullscreen'] { .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block; display: inline-block;
} }
.plyr__controls:empty {
display: none;
~ .plyr__captions {
transform: translateY(0);
}
}