diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 2 | ||||
| -rw-r--r-- | src/less/plyr.less | 9 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 9 |
3 files changed, 11 insertions, 9 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 8f3f7573..269274fd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.0 +// plyr.js v1.2.1 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/less/plyr.less b/src/less/plyr.less index ecc37e37..5ff29b3a 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -28,7 +28,7 @@ // Tooltips @tooltip-bg: @controls-bg; -@tooltip-color: #fff; +@tooltip-color: @control-color; @tooltip-padding: @control-spacing; @tooltip-arrow-size: 5px; @tooltip-radius: 3px; @@ -331,8 +331,9 @@ line-height: 1.5; font-weight: 600; - transform: translate(-50%, (@tooltip-padding * 3)); - transition: transform .2s .2s ease, opacity .2s .2s ease; + transform: translate(-50%, (@tooltip-padding * 3)) scale(0); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; &::after { content: ""; @@ -355,7 +356,7 @@ button:focus .player-tooltip { visibility: visible; opacity: 1; - transform: translate(-50%, 0); + transform: translate(-50%, 0) scale(1); } label:hover .player-tooltip, button:hover .player-tooltip { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 767dc501..5e8150e7 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -28,7 +28,7 @@ $control-bg-hover: @blue !default; // Tooltips $tooltip-bg: $controls-bg !default; -$tooltip-color: #fff !default; +$tooltip-color: $control-color !default; $tooltip-padding: $control-spacing !default; $tooltip-arrow-size: 5px !default; $tooltip-radius: 3px !default; @@ -329,8 +329,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo line-height: 1.5; font-weight: 600; - transform: translate(-50%, ($tooltip-padding * 3)); - transition: transform .2s .2s ease, opacity .2s .2s ease; + transform: translate(-50%, ($tooltip-padding * 3)) scale(0); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; &::after { content: ""; @@ -353,7 +354,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo button:focus .player-tooltip { visibility: visible; opacity: 1; - transform: translate(-50%, 0); + transform: translate(-50%, 0) scale(1); } label:hover .player-tooltip, button:hover .player-tooltip { |