Fixed bug with caption toggle, hide controls in fullscreen

This commit is contained in:
Sam Potts
2015-03-22 21:26:29 +11:00
parent c61db87fd6
commit 8b436276bf
10 changed files with 127 additions and 82 deletions

View File

@ -31,9 +31,9 @@
@tooltip-radius: 3px;
// Progress
@progress-bg: lighten(@gray, 10%);
@progress-bg: rgba(red(@gray), green(@gray), blue(@gray), .2);
@progress-playing-bg: @blue;
@progress-buffered-bg: @gray;
@progress-buffered-bg: rgba(red(@gray), green(@gray), blue(@gray), .25);
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
@ -179,7 +179,7 @@
.clearfix();
.font-smoothing();
position: relative;
padding: (@control-spacing * 2) @control-spacing @control-spacing;
padding: @control-spacing;
background: @controls-bg;
line-height: 1;
text-align: center;
@ -313,7 +313,7 @@
// <progress> element
&-progress {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
width: 100%;
@ -549,6 +549,17 @@
left: 0;
right: 0;
}
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s 1s ease;
&.hover {
transform: translateY(0);
transition-delay: 0;
}
}
}
// Change icons on state change
@ -575,10 +586,4 @@
&.fullscreen-enabled [data-player='fullscreen'] + label {
display: inline-block;
}
// Full browser view hides toggle
&-fullscreen [data-player='fullscreen'],
&-fullscreen [data-player='fullscreen'] + label {
display: none !important;
}
}