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

Removed extra <progress> for populating lower fill on range inputs

Browse Source
This commit is contained in:
Sam Potts
2017-10-18 12:43:10 +11:00
parent 4392abfc49
commit 36a84c5c2d
8 changed files with 342 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/less/mixins.less
View File

@ -18,7 +18,7 @@
background: @plyr-range-thumb-bg;
border: @plyr-range-thumb-border;
border-radius: 100%;
transition: background .2s ease, border .2s ease, transform .2s ease;
transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
box-shadow: @plyr-range-thumb-shadow;
box-sizing: border-box;
}
@ -26,4 +26,4 @@
background: @plyr-range-thumb-active-bg;
border-color: @plyr-range-thumb-active-border-color;
transform: scale(@plyr-range-thumb-active-scale);
}
}

140
src/less/plyr.less
View File

@ -1,6 +1,7 @@
// ==========================================================================
// Plyr styles
// https://github.com/sampotts/plyr
// TODO: break into smaller files and look at use of BEM classnames
// ==========================================================================
@import 'variables';
@ -57,7 +58,7 @@
}
// ARIA
[aria-hidden="true"] {
[aria-hidden='true'] {
display: none;
}
@ -77,7 +78,7 @@
// Range inputs
// Specificity is for bootstrap compatibility
input[type="range"] {
input[type='range'] {
display: block;
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%;
@ -87,6 +88,9 @@
border: none;
background: transparent;
// Used in JS to populate lower fill for WebKit
color: @plyr-range-selected-bg;
// WebKit
-webkit-appearance: none;
@ -106,6 +110,11 @@
&::-moz-range-thumb {
.plyr-range-thumb();
}
&::-moz-range-progress {
height: @plyr-range-track-height;
background: currentColor;
border-radius: (@plyr-range-track-height / 2);
}
// Microsoft
&::-ms-track {
@ -119,7 +128,7 @@
}
&::-ms-fill-lower {
.plyr-range-track();
background: @plyr-range-selected-bg;
background: currentColor;
}
&::-ms-thumb {
.plyr-range-thumb();
@ -157,13 +166,37 @@
}
// Video range inputs
.plyr--video input[type="range"].tab-focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
.plyr--video input[type='range'] {
&::-webkit-slider-runnable-track {
background: @plyr-video-range-track-bg;
}
&::-moz-range-track {
background: @plyr-video-range-track-bg;
}
&::-ms-track {
background: @plyr-video-range-track-bg;
}
&.tab-focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
}
}
// Audio range inputs
.plyr--audio input[type="range"].tab-focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
.plyr--audio input[type='range'] {
&::-webkit-slider-runnable-track {
background: @plyr-audio-range-track-bg;
}
&::-moz-range-track {
background: @plyr-audio-range-track-bg;
}
&::-ms-track {
background: @plyr-audio-range-track-bg;
}
&.tab-focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
}
}
// Screen reader only elements
@ -354,7 +387,6 @@
display: block;
fill: currentColor;
pointer-events: none;
filter: drop-shadow(0 1px 1px fade(#000, 15%));
}
// Hide toggle icons by default
@ -378,17 +410,21 @@
bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
transition: opacity 0.3s ease;
.plyr__control {
svg {
filter: drop-shadow(0 1px 1px fade(#000, 15%));
}
// Hover and tab focus
&.tab-focus,
&:hover,
&[aria-expanded="true"] {
&[aria-expanded='true'] {
background: @plyr-video-control-bg-hover;
color: @plyr-video-control-color-hover;
}
@ -407,7 +443,7 @@
// Hover and tab focus
&.tab-focus,
&:hover,
&[aria-expanded="true"] {
&[aria-expanded='true'] {
background: @plyr-audio-control-bg-hover;
color: @plyr-audio-control-color-hover;
}
@ -461,11 +497,11 @@
}
// States
.plyr__controls [data-plyr="pause"],
.plyr--playing .plyr__controls [data-plyr="play"] {
.plyr__controls [data-plyr='pause'],
.plyr--playing .plyr__controls [data-plyr='play'] {
display: none;
}
.plyr--playing .plyr__controls [data-plyr="pause"] {
.plyr--playing .plyr__controls [data-plyr='pause'] {
display: inline-block;
}
@ -481,16 +517,16 @@
}
// Some options are hidden by default
.plyr [data-plyr="captions"],
.plyr [data-plyr="fullscreen"],
.plyr [data-plyr="pip"],
.plyr [data-plyr="airplay"] {
.plyr [data-plyr='captions'],
.plyr [data-plyr='fullscreen'],
.plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'] {
display: none;
}
.plyr--captions-enabled [data-plyr="captions"],
.plyr--fullscreen-enabled [data-plyr="fullscreen"],
.plyr--pip-enabled [data-plyr="pip"],
.plyr--airplay-enabled [data-plyr="airplay"] {
.plyr--captions-enabled [data-plyr='captions'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'],
.plyr--pip-enabled [data-plyr='pip'],
.plyr--airplay-enabled [data-plyr='airplay'] {
display: inline-block;
}
@ -503,7 +539,7 @@
.plyr__control svg {
transition: transform 0.3s ease;
}
.plyr__control[aria-expanded="true"] {
.plyr__control[aria-expanded='true'] {
svg {
transform: rotate(45deg);
}
@ -668,7 +704,7 @@
&::before {
// Arrows
content: "";
content: '';
position: absolute;
width: 0;
height: 0;
@ -739,16 +775,6 @@
input[type='range'] {
position: relative;
z-index: 2;
&::-webkit-slider-runnable-track {
background: transparent;
}
&::-moz-range-track {
background: transparent;
}
&::-ms-fill-upper {
background: transparent;
}
}
// Seek tooltip to show time
@ -760,9 +786,7 @@
display: inline-block;
}
.plyr__progress--buffer,
.plyr__progress--played,
.plyr__volume--display {
.plyr__progress--buffer {
position: absolute;
left: 0;
top: 50%;
@ -770,8 +794,7 @@
height: @plyr-range-track-height;
margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
background: transparent;
border: none;
border-radius: 100px;
@ -799,31 +822,6 @@
border-radius: 100px;
}
}
.plyr__progress--played,
.plyr__volume--display {
z-index: 1;
color: @plyr-range-selected-bg;
background: transparent;
transition: none;
&::-webkit-progress-value {
min-width: @plyr-range-track-height;
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transition: none;
}
&::-moz-progress-bar {
min-width: @plyr-range-track-height;
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transition: none;
}
&::-ms-fill {
display: none;
}
}
.plyr__progress--buffer {
&::-webkit-progress-value {
transition: width 0.2s ease;
@ -835,18 +833,10 @@
transition: width 0.2s ease;
}
}
.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
background: @plyr-video-range-track-bg;
box-shadow: 0 1px 1px fade(#000, 15%);
}
.plyr--video .plyr__progress--buffer {
box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-progress-buffered-bg;
}
.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
background: @plyr-audio-range-track-bg;
}
.plyr--audio .plyr__progress--buffer {
color: @plyr-audio-progress-buffered-bg;
}
@ -892,7 +882,7 @@
// Add a slash in before
&::before {
content: "\2044";
content: '\2044';
margin-right: @plyr-control-spacing;
}
}
@ -926,7 +916,7 @@
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr="mute"] {
.plyr--is-ios [data-plyr='mute'] {
display: none !important;
}

10
src/less/variables.less
View File

@ -29,8 +29,8 @@
// Controls
@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #343f4a;
@plyr-control-padding: (@plyr-control-spacing * 0.7);
@plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@ -55,10 +55,8 @@
// Progress
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#343f4a, 20%);
@plyr-video-progress-bg: fade(#fff, 25%);
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
@plyr-audio-progress-bg: fade(#c6d6db, 66%);
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
@plyr-video-progress-buffered-bg: fade(#fff, 25%);
@plyr-audio-progress-buffered-bg: fade(#c6d6db, 66%);
// Range sliders
@plyr-range-track-height: 8px;