diff options
Diffstat (limited to 'src/less')
-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 |
5 files changed, 14 insertions, 27 deletions
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; |