diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/js/utils.js | 10 | ||||
-rw-r--r-- | src/less/components/menus.less | 3 | ||||
-rw-r--r-- | src/less/components/progress.less | 21 | ||||
-rw-r--r-- | src/less/components/sliders.less | 4 | ||||
-rw-r--r-- | src/less/lib/mixins.less | 4 | ||||
-rw-r--r-- | src/less/settings.less | 9 |
6 files changed, 19 insertions, 32 deletions
diff --git a/src/js/utils.js b/src/js/utils.js index a0a551c4..d9dd3df1 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -29,22 +29,22 @@ const utils = { return !this.nullOrUndefined(input) && Array.isArray(input); }, weakMap(input) { - return this.instanceof(input, WeakMap); + return this.instanceof(input, window.WeakMap); }, nodeList(input) { - return this.instanceof(input, NodeList); + return this.instanceof(input, window.NodeList); }, element(input) { - return this.instanceof(input, Element); + return this.instanceof(input, window.Element); }, textNode(input) { return this.getConstructor(input) === Text; }, event(input) { - return this.instanceof(input, Event); + return this.instanceof(input, window.Event); }, cue(input) { - return this.instanceof(input, TextTrackCue) || this.instanceof(input, VTTCue); + return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); }, track(input) { return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind)); diff --git a/src/less/components/menus.less b/src/less/components/menus.less index 80b8fabe..f0a92d06 100644 --- a/src/less/components/menus.less +++ b/src/less/components/menus.less @@ -3,6 +3,7 @@ // -------------------------------------------------------------- .plyr__menu { + display: flex; // Edge fix position: relative; // Animate the icon @@ -11,7 +12,7 @@ } .plyr__control[aria-expanded='true'] { svg { - transform: rotate(45deg); + transform: rotate(90deg); } // Hide tooltip diff --git a/src/less/components/progress.less b/src/less/components/progress.less index 1472f9c5..1a252937 100644 --- a/src/less/components/progress.less +++ b/src/less/components/progress.less @@ -4,7 +4,7 @@ .plyr__progress { position: relative; - display: none; + display: flex; flex: 1; input[type='range'] { @@ -19,10 +19,6 @@ } } -.plyr .plyr__progress { - display: inline-block; -} - .plyr__progress--buffer { position: absolute; left: 0; @@ -40,6 +36,7 @@ &::-webkit-progress-bar { background: transparent; + transition: width 0.2s ease; } &::-webkit-progress-value { @@ -53,24 +50,12 @@ background: currentColor; border-radius: 100px; min-width: @plyr-range-track-height; + transition: width 0.2s ease; } // Microsoft &::-ms-fill { border-radius: 100px; - } -} - -.plyr__progress--buffer { - &::-webkit-progress-value { - transition: width 0.2s ease; - } - - &::-moz-progress-bar { - transition: width 0.2s ease; - } - - &::-ms-fill { transition: width 0.2s ease; } } diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less index b420c8ad..41954a97 100644 --- a/src/less/components/sliders.less +++ b/src/less/components/sliders.less @@ -5,7 +5,7 @@ // Specificity is for bootstrap compatibility .plyr--full-ui input[type='range'] { display: block; - height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); + height: @plyr-range-thumb-active-height; width: 100%; margin: 0; padding: 0; @@ -16,7 +16,7 @@ border-radius: (@plyr-range-thumb-height * 2); // Used in JS to populate lower fill for WebKit - color: @plyr-range-selected-bg; + color: @plyr-range-fill-bg; // WebKit -webkit-appearance: none; diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less index 8a3c52ab..da63443b 100644 --- a/src/less/lib/mixins.less +++ b/src/less/lib/mixins.less @@ -35,7 +35,7 @@ .plyr-range-thumb() { position: relative; height: @plyr-range-thumb-height; - width: @plyr-range-thumb-width; + width: @plyr-range-thumb-height; background: @plyr-range-thumb-bg; border: @plyr-range-thumb-border; border-radius: 100%; @@ -47,7 +47,7 @@ .plyr-range-thumb-active() { background: @plyr-range-thumb-active-bg; border-color: @plyr-range-thumb-active-border-color; - transform: scale(@plyr-range-thumb-active-scale); + transform: scale(unit(@plyr-range-thumb-active-height / @plyr-range-thumb-height)); } // Fullscreen styles diff --git a/src/less/settings.less b/src/less/settings.less index 73cd10ca..0bcdafdb 100644 --- a/src/less/settings.less +++ b/src/less/settings.less @@ -78,17 +78,18 @@ // Range sliders @plyr-range-track-height: 6px; -@plyr-range-thumb-height: ceil(@plyr-range-track-height * 2.3); -@plyr-range-thumb-width: ceil(@plyr-range-track-height * 2.3); +@plyr-range-thumb-height: 14px; @plyr-range-thumb-bg: #fff; @plyr-range-thumb-border: 2px solid transparent; @plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%); +@plyr-range-fill-bg: @plyr-color-main; + @plyr-range-thumb-active-border-color: #fff; @plyr-range-thumb-active-bg: @plyr-video-control-bg-hover; -@plyr-range-thumb-active-scale: 1.5; +@plyr-range-thumb-active-height: 20px; + @plyr-video-range-track-bg: @plyr-video-progress-buffered-bg; @plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg; -@plyr-range-selected-bg: @plyr-color-main; // Breakpoints @plyr-bp-sm: 480px; |