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

Controls improvements

Browse Source 
- Added an option to toggle which controls display
- Better handle missing controls
This commit is contained in:
Sam Potts
2015-04-04 12:32:37 +11:00
parent c2c4172634
commit e568bc9c8d
16 changed files with 286 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/sass/plyr.scss
View File

@ -267,6 +267,22 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
font-size: $font-size-small;
@include font-smoothing();
}
// Media duration hidden on small screens
.player-time + .player-time {
display: none;
@media (min-width: $bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: "\2044";
margin-right: $control-spacing;
color: darken($control-color, 30%);
}
}
}
// Tooltips
@ -278,7 +294,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
margin-bottom: $tooltip-padding;
padding: $tooltip-padding ($tooltip-padding * 1.5);
opacity: 0;
opacity: 0;
background: $tooltip-bg;
border-radius: $tooltip-radius;
color: $tooltip-color;
@ -287,7 +303,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
font-weight: 600;
transform: translate(-50%, ($tooltip-padding * 3));
transition: transform .2s .2s ease, opacity .2s .2s ease;
transition: transform .2s .2s ease, opacity .2s .2s ease;
&::after {
content: "";
@ -594,10 +610,4 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
&.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;
}
}
}